94 lines
2.8 KiB
Vue
94 lines
2.8 KiB
Vue
<template>
|
|
<v-container fluid class="py-6">
|
|
<v-btn
|
|
class="fc-select-toggle"
|
|
:color="sel.isSelectMode ? 'accent' : undefined"
|
|
:variant="sel.isSelectMode ? 'flat' : 'tonal'"
|
|
size="small"
|
|
@click="sel.isSelectMode ? sel.exitSelectMode() : sel.enterSelectMode()"
|
|
>{{ sel.isSelectMode ? 'Done' : 'Select' }}</v-btn>
|
|
|
|
<div class="fc-gallery-layout">
|
|
<div class="fc-gallery-layout__main">
|
|
<EmptyState v-if="store.isEmpty" />
|
|
<GalleryGrid v-else @open="openImage" />
|
|
</div>
|
|
<TimelineSidebar v-if="store.images.length > 0" class="fc-gallery-layout__sidebar" />
|
|
</div>
|
|
|
|
<ImageViewer
|
|
v-if="modal.currentImageId !== null"
|
|
@close="closeImage"
|
|
/>
|
|
<BulkEditorPanel />
|
|
</v-container>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onMounted, watch } from 'vue'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import { useGalleryStore } from '../stores/gallery.js'
|
|
import { useModalStore } from '../stores/modal.js'
|
|
import GalleryGrid from '../components/gallery/GalleryGrid.vue'
|
|
import TimelineSidebar from '../components/gallery/TimelineSidebar.vue'
|
|
import EmptyState from '../components/gallery/EmptyState.vue'
|
|
import ImageViewer from '../components/modal/ImageViewer.vue'
|
|
import BulkEditorPanel from '../components/gallery/BulkEditorPanel.vue'
|
|
import { useGallerySelectionStore } from '../stores/gallerySelection.js'
|
|
|
|
const store = useGalleryStore()
|
|
const modal = useModalStore()
|
|
const sel = useGallerySelectionStore()
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
|
|
onMounted(async () => {
|
|
const tagId = parseInt(route.query.tag_id, 10)
|
|
if (!isNaN(tagId)) store.setTagFilter(tagId)
|
|
await store.loadInitial()
|
|
await store.loadTimeline()
|
|
// Open modal if URL has ?image=N
|
|
const initial = parseInt(route.query.image, 10)
|
|
if (!isNaN(initial)) modal.open(initial)
|
|
})
|
|
|
|
watch(() => route.query.tag_id, (q) => {
|
|
sel.clear() // result set changed — selected ids are no longer valid
|
|
const tagId = parseInt(q, 10)
|
|
store.setTagFilter(isNaN(tagId) ? null : tagId)
|
|
})
|
|
|
|
watch(() => route.query.image, (q) => {
|
|
const id = parseInt(q, 10)
|
|
if (!isNaN(id) && id !== modal.currentImageId) modal.open(id)
|
|
else if (isNaN(id) && modal.currentImageId !== null) modal.close()
|
|
})
|
|
|
|
function openImage(id) {
|
|
router.push({ query: { ...route.query, image: id } })
|
|
}
|
|
function closeImage() {
|
|
const q = { ...route.query }
|
|
delete q.image
|
|
router.push({ query: q })
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.fc-gallery-layout {
|
|
display: flex;
|
|
gap: 16px;
|
|
align-items: flex-start;
|
|
}
|
|
.fc-gallery-layout__main { flex: 1; min-width: 0; }
|
|
.fc-gallery-layout__sidebar { flex-shrink: 0; }
|
|
.fc-select-toggle {
|
|
position: absolute; top: 12px; right: 16px; z-index: 1101;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.fc-gallery-layout { flex-direction: column-reverse; }
|
|
.fc-gallery-layout__sidebar { width: 100%; max-height: 200px; }
|
|
}
|
|
</style>
|