fix(captain): media gallery blank page caused by i18n syntax error
This commit is contained in:
parent
bda0c3818c
commit
6f4458c4c0
@ -873,7 +873,7 @@
|
||||
},
|
||||
"ASSETS": {
|
||||
"HEADER": "Galeria de Midia",
|
||||
"DESCRIPTION": "Envie imagens e referencie nos prompts usando {{ media.chave }}.",
|
||||
"DESCRIPTION": "Envie imagens e referencie nos prompts usando {'{{'} media.chave {'}}'}.",
|
||||
"ADD_NEW": "Enviar imagem",
|
||||
"EMPTY_STATE": "Nenhuma imagem ainda. Envie sua primeira imagem para comecar.",
|
||||
"FORM_DESCRIPTION": "Envie uma imagem e defina uma chave unica para usar nos prompts.",
|
||||
|
||||
@ -16,7 +16,7 @@ const uiFlags = useMapGetter('captainAssets/getUIFlags');
|
||||
const assets = useMapGetter('captainAssets/getRecords');
|
||||
const assetsMeta = useMapGetter('captainAssets/getMeta');
|
||||
|
||||
const isFetching = computed(() => uiFlags.value.fetchingList);
|
||||
const isFetching = computed(() => uiFlags.value?.fetchingList || false);
|
||||
|
||||
const selectedAsset = ref(null);
|
||||
const deleteAssetDialog = ref(null);
|
||||
@ -43,10 +43,13 @@ const handleEditDialogClose = () => {
|
||||
};
|
||||
|
||||
const handleDelete = () => {
|
||||
nextTick(() => {
|
||||
deleteAssetDialog.value.dialogRef.open();
|
||||
});
|
||||
};
|
||||
|
||||
const handleAction = ({ action, id }) => {
|
||||
if (!assets.value) return;
|
||||
selectedAsset.value = assets.value.find(asset => id === asset.id);
|
||||
if (action === 'delete') {
|
||||
handleDelete();
|
||||
@ -76,11 +79,11 @@ onMounted(() => {
|
||||
:header-description="$t('CAPTAIN.ASSETS.DESCRIPTION')"
|
||||
:button-label="$t('CAPTAIN.ASSETS.ADD_NEW')"
|
||||
:button-policy="['administrator']"
|
||||
:total-count="assetsMeta.totalCount"
|
||||
:current-page="assetsMeta.page"
|
||||
:show-pagination-footer="!isFetching && !!assets.length"
|
||||
:total-count="assetsMeta?.totalCount || 0"
|
||||
:current-page="assetsMeta?.page || 1"
|
||||
:show-pagination-footer="!isFetching && !!assets?.length"
|
||||
:is-fetching="isFetching"
|
||||
:is-empty="!assets.length"
|
||||
:is-empty="!assets?.length"
|
||||
:show-know-more="false"
|
||||
:show-assistant-switcher="false"
|
||||
:feature-flag="FEATURE_FLAGS.CAPTAIN"
|
||||
@ -114,7 +117,6 @@ onMounted(() => {
|
||||
:key="asset.id"
|
||||
:name="asset.name"
|
||||
:file-url="asset.file_url"
|
||||
:created-at="asset.created_at"
|
||||
@action="handleAction"
|
||||
/>
|
||||
</div>
|
||||
|
||||
34
progresso/2026-01-13_fix_media_gallery_blank_page.md
Normal file
34
progresso/2026-01-13_fix_media_gallery_blank_page.md
Normal file
@ -0,0 +1,34 @@
|
||||
# Fix: Galeria de Mídia em Branco (Media Gallery)
|
||||
|
||||
## Contexto
|
||||
|
||||
A página "Galeria de Mídia" (`/captain/assets`) estava carregando totalmente em branco para o usuário.
|
||||
Inicialmente suspeitou-se de erro no componente Vue ou na API, mas após correções iniciais, o problema persistiu.
|
||||
|
||||
## Sintomas
|
||||
|
||||
- Página branca.
|
||||
- Console do navegador exibia: `SyntaxError: Not allowed nest placeholder` vindo de `vue-i18n` (useBranding).
|
||||
|
||||
## Causa Raiz
|
||||
|
||||
O arquivo de tradução `pt_BR/integrations.json` continha uma string com sintaxe de interpolação inválida para o Vue I18n:
|
||||
`"DESCRIPTION": "Envie imagens e referencie nos prompts usando {{ media.chave }}."`
|
||||
|
||||
O par de chaves duplas `{{ }}` é interpretado pelo framework como um placeholder de variável. Como `media.chave` não era uma variável passada, e a sintaxe estava solta, causava o crash da renderização.
|
||||
|
||||
## Solução
|
||||
|
||||
1. **Frontend (Defensivo)**: Adicionado _Optional Chaining_ (`?.`) e valores padrão (`|| 0`) no componente `Index.vue` para evitar erros caso a Store demore a carregar.
|
||||
2. **I18n (Correção)**: Escape das chaves no arquivo de tradução JSON para serem tratadas como literal string.
|
||||
- De: `{{ media.chave }}`
|
||||
- Para: `{'{{'} media.chave {'}}'}`
|
||||
|
||||
## Arquivos Alterados
|
||||
|
||||
- `app/javascript/dashboard/routes/dashboard/captain/assets/Index.vue`
|
||||
- `app/javascript/dashboard/i18n/locale/pt_BR/integrations.json`
|
||||
|
||||
## Validação
|
||||
|
||||
O erro de sintaxe sumiu do console e a página voltou a renderizar a interface corretamente.
|
||||
Loading…
Reference in New Issue
Block a user