padreug/web-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add quick town selection and category selection from homescreen with localstorage!

Browse source
This commit is contained in:
padreug 2025-02-11 01:41:12 +01:00
parent 73f5683fbc
commit 02e699aad5
24 changed files with 619 additions and 137 deletions
Download patch file Download diff file Expand all files Collapse all files

27
src/components/directory/DirectoryFilter.vue
View file

@ -87,9 +87,9 @@ const towns = computed(() => [
</script>
<template>
<div class="w-full flex flex-col md:flex-row gap-2 sm:gap-4">
<div class="w-full space-y-4">
<!-- Search Input -->
<div class="relative flex-1">
<div class="relative w-full max-w-2xl mx-auto">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<Search class="h-5 w-5 text-muted-foreground" />
</div>
@ -97,9 +97,20 @@ const towns = computed(() => [
inputmode="text" enterkeyhint="search" />
</div>
<div class="flex flex-col md:flex-row gap-1 sm:gap-2">
<div class="flex flex-col gap-4">
<!-- Town Filter -->
<div class="flex justify-start md:justify-center gap-2 overflow-x-auto pb-2 px-2 md:px-0
[&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
<Button v-for="to in towns" :key="to.id" @click="emit('update:town', to.id)"
:variant="props.town === to.id ? 'default' : 'secondary'" size="sm"
class="rounded-full whitespace-nowrap">
{{ to.label }}
</Button>
</div>
<!-- Category Filter -->
<div class="flex gap-1 sm:gap-2 overflow-x-auto pb-1 sm:pb-2 md:pb-0">
<div class="flex justify-start md:justify-center gap-2 overflow-x-auto pb-2 px-2 md:px-0
[&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
<Button v-for="cat in categories" :key="cat.id" @click="emit('update:category', cat.id)"
:variant="props.category === cat.id ? 'default' : 'secondary'" size="sm"
class="rounded-full whitespace-nowrap">
@ -119,14 +130,6 @@ const towns = computed(() => [
</template>
</Button>
</div>
<!-- Town Filter -->
<div class="flex gap-1 sm:gap-2 overflow-x-auto pb-1 sm:pb-2 md:pb-0">
<Button v-for="to in towns" :key="to.id" @click="emit('update:town', to.id)"
:variant="props.town === to.id ? 'default' : 'secondary'" size="sm" class="rounded-full whitespace-nowrap">
{{ to.label }}
</Button>
</div>
</div>
</div>
</template>

6
src/components/directory/DirectoryGrid.vue
View file

@ -3,7 +3,6 @@ import { ref, computed } from 'vue'
import Fuse from 'fuse.js'
import DirectoryCard from './DirectoryCard.vue'
import { type DirectoryItem } from '@/types/directory'
import DirectoryFilter from './DirectoryFilter.vue'
const selectedCategory = ref<string>('all')
const selectedTown = ref<string>('all')
@ -54,11 +53,6 @@ const filteredItems = computed(() => {
<template>
<div>
<!-- Filters -->
<div class="space-y-2 md:space-y-0 md:flex md:items-center md:justify-between">
<DirectoryFilter v-model:category="selectedCategory" v-model:search="searchQuery" v-model:town="selectedTown" />
</div>
<!-- Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-4">
<DirectoryCard v-for="item in filteredItems" :key="item.id" :item="item" />