diff --git a/app/javascript/dashboard/i18n/locale/pt_BR/integrations.json b/app/javascript/dashboard/i18n/locale/pt_BR/integrations.json index 65f59f3..2f1aa96 100755 --- a/app/javascript/dashboard/i18n/locale/pt_BR/integrations.json +++ b/app/javascript/dashboard/i18n/locale/pt_BR/integrations.json @@ -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.", diff --git a/app/javascript/dashboard/routes/dashboard/captain/assets/Index.vue b/app/javascript/dashboard/routes/dashboard/captain/assets/Index.vue index 4f88e49..b35a3e8 100644 --- a/app/javascript/dashboard/routes/dashboard/captain/assets/Index.vue +++ b/app/javascript/dashboard/routes/dashboard/captain/assets/Index.vue @@ -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 = () => { - deleteAssetDialog.value.dialogRef.open(); + 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" /> diff --git a/progresso/2026-01-13_fix_media_gallery_blank_page.md b/progresso/2026-01-13_fix_media_gallery_blank_page.md new file mode 100644 index 0000000..680452f --- /dev/null +++ b/progresso/2026-01-13_fix_media_gallery_blank_page.md @@ -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.