111 lines
3.5 KiB
Vue
111 lines
3.5 KiB
Vue
<script setup lang="ts">
|
|
import { useI18n } from 'vue-i18n'
|
|
import DirectoryGrid from '@/components/directory/DirectoryGrid.vue'
|
|
import DirectoryFilter from '@/components/directory/DirectoryFilter.vue'
|
|
import { mockDirectoryItems } from '@/data/directory'
|
|
import { ref, computed, watch } from 'vue'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import { useTheme } from '@/components/theme-provider'
|
|
|
|
const { t } = useI18n()
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const { currentTown } = useTheme()
|
|
|
|
// Use the imported mock data
|
|
const items = mockDirectoryItems
|
|
|
|
const category = ref('all')
|
|
const search = ref('')
|
|
const town = ref(currentTown.value)
|
|
|
|
// Watch for route changes to update filters
|
|
watch(() => route.query, (newQuery) => {
|
|
category.value = newQuery.category?.toString() || 'all'
|
|
search.value = newQuery.search?.toString() || ''
|
|
town.value = newQuery.town === undefined ? currentTown.value : (newQuery.town?.toString() || 'all')
|
|
}, { immediate: true })
|
|
|
|
// Watch for filter changes and update URL
|
|
watch([category, search, town], ([newCategory, newSearch, newTown]) => {
|
|
// Don't update URL if it matches current query params
|
|
if (
|
|
newCategory === route.query.category &&
|
|
newSearch === route.query.search &&
|
|
newTown === route.query.town
|
|
) {
|
|
return
|
|
}
|
|
|
|
const query = {
|
|
...(newCategory !== 'all' && { category: newCategory }),
|
|
...(newSearch && { search: newSearch }),
|
|
...(newTown !== currentTown.value && { town: newTown })
|
|
}
|
|
router.replace({ query })
|
|
})
|
|
|
|
// Filter items based on category, search, and town
|
|
const filteredItems = computed(() => {
|
|
return items.filter(item => {
|
|
const matchesCategory = category.value === 'all' || item.category === category.value
|
|
const matchesSearch = !search.value ||
|
|
item.name.toLowerCase().includes(search.value.toLowerCase()) ||
|
|
item.description?.toLowerCase().includes(search.value.toLowerCase())
|
|
const matchesTown = town.value === 'all' || item.town === town.value
|
|
return matchesCategory && matchesSearch && matchesTown
|
|
})
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="px-0 md:container md:px-4 py-2 md:py-8">
|
|
<div class="space-y-4 md:space-y-6">
|
|
<!-- Directory Header -->
|
|
<div class="text-center space-y-2 mb-2 md:mb-6">
|
|
<h1 class="md:hidden text-lg font-semibold tracking-tight px-4">
|
|
{{ t('directory.title') }}
|
|
</h1>
|
|
<div class="hidden md:block space-y-2">
|
|
<h1 class="text-2xl font-bold tracking-tight sm:text-3xl">
|
|
{{ t('directory.title') }}
|
|
</h1>
|
|
<p class="text-sm sm:text-base text-muted-foreground">
|
|
{{ t('directory.subtitle') }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sticky Container for Filter -->
|
|
<div class="sticky top-14 z-40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-b md:border-b-0 w-full shadow-sm transition-all duration-200">
|
|
<div class="w-full">
|
|
<DirectoryFilter v-model:category="category" v-model:search="search" v-model:town="town" class="py-3 px-4" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Directory Grid -->
|
|
<div class="pt-4 px-4 md:px-0">
|
|
<DirectoryGrid :items="filteredItems" class="transition-all duration-300" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.fade-move,
|
|
.fade-enter-active,
|
|
.fade-leave-active {
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.fade-enter-from,
|
|
.fade-leave-to {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
|
|
.fade-leave-active {
|
|
position: absolute;
|
|
}
|
|
</style>
|