diff --git a/frontend/src/components/gallery/PostInfoHeader.vue b/frontend/src/components/gallery/PostInfoHeader.vue index 11fe9ae..eb5613d 100644 --- a/frontend/src/components/gallery/PostInfoHeader.vue +++ b/frontend/src/components/gallery/PostInfoHeader.vue @@ -21,6 +21,11 @@ v-if="info.data.post.url" :href="info.data.post.url" target="_blank" rel="noopener noreferrer" >↗ original post + ⬇ {{ at.original_filename }} @@ -90,4 +95,8 @@ function clear() { font-size: 13px; color: rgb(var(--v-theme-on-surface-variant)); } .fc-postinfo__main a { color: rgb(var(--v-theme-accent)); text-decoration: none; } +.fc-postinfo__attach { + font-size: 13px; color: rgb(var(--v-theme-accent)); + text-decoration: none; +} diff --git a/frontend/src/components/modal/ProvenancePanel.vue b/frontend/src/components/modal/ProvenancePanel.vue index 5b3dcd3..9e428c2 100644 --- a/frontend/src/components/modal/ProvenancePanel.vue +++ b/frontend/src/components/modal/ProvenancePanel.vue @@ -44,6 +44,17 @@ /> + +
+

Attachments

+ ⬇ {{ at.original_filename }} + ({{ at.size_bytes }} B) + +
@@ -77,6 +88,8 @@ const show = computed(() => { return Array.isArray(st.entries) && st.entries.length > 0 }) +const attachments = computed(() => state.value?.attachments || []) + function postDate(e) { return formatPostDate(e.post.date) } function openPost(postId) { @@ -124,4 +137,14 @@ function openPost(postId) { color: rgb(var(--v-theme-on-surface-variant)); } .fc-prov__desc :deep(a) { color: rgb(var(--v-theme-accent)); } +.fc-prov__attach { padding: 0 0 12px; } +.fc-prov__attach-title { + font-size: 13px; color: rgb(var(--v-theme-on-surface-variant)); + margin: 8px 0 4px; +} +.fc-prov__attach-row { + display: block; font-size: 13px; text-decoration: none; + color: rgb(var(--v-theme-accent)); padding: 2px 0; +} +.fc-prov__attach-size { color: rgb(var(--v-theme-on-surface-variant)); } diff --git a/frontend/src/stores/provenance.js b/frontend/src/stores/provenance.js index c87680a..97b28f8 100644 --- a/frontend/src/stores/provenance.js +++ b/frontend/src/stores/provenance.js @@ -16,8 +16,11 @@ export const useProvenanceStore = defineStore('provenance', () => { imageCache.value[id] = { loading: true, error: null, entries: null } try { const body = await api.get(`/api/provenance/image/${id}`) - imageCache.value[id] = - { loading: false, error: null, entries: body.provenance } + imageCache.value[id] = { + loading: false, error: null, + entries: body.provenance, + attachments: body.attachments || [], + } } catch (e) { imageCache.value[id] = { loading: false, error: e.message, entries: null } diff --git a/frontend/test/provenance.spec.js b/frontend/test/provenance.spec.js index 7ade1c7..c5142d6 100644 --- a/frontend/test/provenance.spec.js +++ b/frontend/test/provenance.spec.js @@ -59,4 +59,18 @@ describe('provenance store', () => { expect(globalThis.fetch.mock.calls.length).toBe(1) expect(store.postInfo(3).data.artist.slug).toBe('a') }) + + it('loadForImage keeps attachments from the payload', async () => { + const store = useProvenanceStore() + stubFetch(() => ({ + status: 200, + body: { + image_id: 1, provenance: [], + attachments: [{ id: 9, original_filename: 'p.zip', size_bytes: 5, + ext: '.zip', download_url: '/api/attachments/9/download' }] + } + })) + await store.loadForImage(1) + expect(store.imageProv(1).attachments[0].id).toBe(9) + }) })