fix(gallery): render similar-mode results (flat list when no date groups)
The 'See all similar' takeover fetched /api/gallery/similar fine (200, ~100 results) but the grid showed nothing: GalleryGrid renders ONLY by iterating store.dateGroups, and similar-mode returns date_groups=[] (results are ranked by cosine distance, not chronological). Zero groups → zero tiles despite store.images being full. Add a flat fallback: when there are no date groups but images exist, render them as one ungrouped list in ranked order (no date headers). The modal Related strip was unaffected (it renders its images directly). Test locks both the flat and grouped paths. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -15,6 +15,19 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Similar-mode (and any non-date-grouped result set) returns no date
|
||||
groups — the results are ranked, not chronological. Render them as a
|
||||
single flat list in their given order rather than nothing. -->
|
||||
<div
|
||||
v-if="!store.dateGroups.length && store.images.length"
|
||||
class="fc-gallery-grid__items"
|
||||
>
|
||||
<GalleryItem
|
||||
v-for="img in store.images"
|
||||
:key="img.id" :image="img" @open="$emit('open', img.id)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="store.loading" class="fc-gallery-grid__sentinel">
|
||||
<v-progress-circular indeterminate color="accent" size="28" />
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,47 @@
|
||||
// @vitest-environment happy-dom
|
||||
import { describe, it, expect } from 'vitest'
|
||||
import { mount } from '@vue/test-utils'
|
||||
|
||||
import GalleryGrid from '../../src/components/gallery/GalleryGrid.vue'
|
||||
import { useGalleryStore } from '../../src/stores/gallery.js'
|
||||
import { freshPinia } from '../support/mountComponent.js'
|
||||
|
||||
const GIStub = { name: 'GalleryItem', props: ['image'], template: '<div class="gi" />' }
|
||||
|
||||
function mountGrid(pinia) {
|
||||
return mount(GalleryGrid, {
|
||||
global: {
|
||||
plugins: [pinia],
|
||||
stubs: { GalleryItem: GIStub, RouterLink: { template: '<a><slot /></a>' } },
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
describe('GalleryGrid', () => {
|
||||
it('renders a flat ranked list when there are no date groups (similar mode)', () => {
|
||||
const pinia = freshPinia()
|
||||
const store = useGalleryStore()
|
||||
// similar-mode shape: images present, date_groups empty, no cursor.
|
||||
store.images = [
|
||||
{ id: 1, thumbnail_url: '/a' },
|
||||
{ id: 2, thumbnail_url: '/b' },
|
||||
{ id: 3, thumbnail_url: '/c' },
|
||||
]
|
||||
store.dateGroups = []
|
||||
const w = mountGrid(pinia)
|
||||
expect(w.findAll('.gi').length).toBe(3)
|
||||
})
|
||||
|
||||
it('renders grouped by date when date groups are present', () => {
|
||||
const pinia = freshPinia()
|
||||
const store = useGalleryStore()
|
||||
store.images = [
|
||||
{ id: 1, thumbnail_url: '/a' },
|
||||
{ id: 2, thumbnail_url: '/b' },
|
||||
]
|
||||
store.dateGroups = [{ year: 2026, month: 6, image_ids: [1, 2] }]
|
||||
const w = mountGrid(pinia)
|
||||
expect(w.find('.fc-gallery-grid__date-header').exists()).toBe(true)
|
||||
expect(w.findAll('.gi').length).toBe(2)
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user