feat: results filters in drawer

brownben · Apr 26, 2024 · eb06f01 · eb06f01
1 parent 43ba5f2
commit eb06f01
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 89 deletions.
diff --git a/frontend/components/ResultsFilterMenu.vue b/frontend/components/ResultsFilterMenu.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import {
+  DrawerContent,
+  DrawerOverlay,
+  DrawerPortal,
+  DrawerRoot,
+  DrawerTrigger,
+} from 'vaul-vue'
+import { AdjustmentsVerticalIcon } from '@heroicons/vue/24/outline'
+import type { Filters } from '~/utils/filter'
+import type { PropType } from 'vue'
+
+const filters = defineModel({
+  type: Object as PropType<Filters>,
+  required: true,
+})
+</script>
+<template>
+  <div>
+    <DrawerRoot>
+      <DrawerTrigger as-child>
+        <Button small>
+          <AdjustmentsVerticalIcon
+            class="-ml-1 mr-2 h-5 w-5"
+            aria-hidden="true"
+          />
+          <span>Filter Results</span>
+        </Button>
+      </DrawerTrigger>
+      <DrawerPortal>
+        <DrawerOverlay class="fixed inset-0 bg-black/10" />
+        <DrawerContent
+          class="fixed bottom-0 left-0 right-0 flex flex-col rounded-xl bg-gray-50 pb-8 shadow dark:bg-gray-800"
+        >
+          <div
+            class="mx-auto mb-6 mt-4 h-1.5 w-12 flex-shrink-0 rounded-full bg-gray-200 dark:bg-gray-700"
+          />
+
+          <div
+            class="mx-auto grid w-full max-w-screen-lg grid-cols-2 gap-4 p-6 pt-4 sm:pt-0 md:grid-cols-4 lg:px-8"
+          >
+            <Input v-model="filters.name" label="Name:" class="col-span-2" />
+            <Input v-model="filters.club" label="Club:" class="col-span-2" />
+            <Input
+              v-model="filters.minAge"
+              label="Min. Age:"
+              type="number"
+              :form-props="{ max: 120, min: 0, step: 1 }"
+            />
+            <Input
+              v-model="filters.maxAge"
+              label="Max. Age:"
+              type="number"
+              :form-props="{ max: 120, min: 0, step: 1 }"
+            />
+            <InputSwitch v-model="filters.male" label="Male:" class="mt-2" />
+            <InputSwitch
+              v-model="filters.female"
+              label="Female:"
+              class="mt-2"
+            />
+          </div>
+        </DrawerContent>
+      </DrawerPortal>
+    </DrawerRoot>
+  </div>
+</template>
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -31,7 +31,8 @@
   "dependencies": {
     "@headlessui/vue": "^1.7.19",
     "@heroicons/vue": "^2.1.3",
-    "radix-vue": "^1.7.2"
+    "radix-vue": "^1.7.2",
+    "vaul-vue": "^0.1.0"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.12",

diff --git a/frontend/pages/events/[id]/results.vue b/frontend/pages/events/[id]/results.vue
@@ -1,10 +1,7 @@
 <script setup lang="ts">
 import type { EventResults } from '~/api-types'
 import type { Filters } from '~/utils/filter'
-import {
-  AdjustmentsVerticalIcon,
-  DocumentArrowUpIcon,
-} from '@heroicons/vue/24/outline'
+import { DocumentArrowUpIcon } from '@heroicons/vue/24/outline'
 
 const route = useRoute()
 
@@ -19,7 +16,6 @@ const results = computed(() =>
 )
 const courses = computed(() => Object.keys(results.value).sort())
 
-const show = ref(false)
 const filters = reactive<Filters>({
   name: queryToString(route.query.name ?? ''),
   club: queryToString(route.query.club ?? ''),
@@ -38,58 +34,19 @@ if (event.value) {
 </script>
 <template>
   <div v-if="event" class="flex h-full flex-grow flex-col gap-8">
-    <div>
-      <Heading
-        :title="event.name"
-        :link-text="event.league"
-        :link-location="`/leagues/${event.league}`"
-      >
-        <template v-if="Object.keys(event.results_links).length > 0" #default>
-          <ResultsLinks :links="event.results_links" />
-        </template>
-        <template #rightAction>
-          <Button small @click="show = !show">
-            <AdjustmentsVerticalIcon
-              class="-ml-1 mr-2 h-5 w-5"
-              aria-hidden="true"
-            />
-            <span>Filter Results</span>
-          </Button>
-        </template>
-      </Heading>
+    <Heading
+      :title="event.name"
+      :link-text="event.league"
+      :link-location="`/leagues/${event.league}`"
+    >
+      <template v-if="Object.keys(event.results_links).length > 0" #default>
+        <ResultsLinks :links="event.results_links" />
+      </template>
 
-      <transition
-        enter-from-class="scale-y-95 opacity-0 "
-        enter-active-class="duration-300 origin-top motion-safe:transform"
-        enter-to-class="scale-y-100 opacity-100"
-        leave-from-class="scale-y-100 opacity-100"
-        leave-active-class="duration-300 origin-top motion-safe:transform"
-        leave-to-class="scale-y-95 opacity-0 "
-      >
-        <section v-if="show" class="bg-gray-50 dark:bg-gray-800 print:hidden">
-          <div
-            class="mx-auto grid max-w-screen-lg grid-cols-2 gap-6 p-8 pt-4 sm:grid-cols-4 sm:pt-0 lg:px-8"
-          >
-            <Input v-model="filters.name" label="Name:" class="col-span-2" />
-            <Input v-model="filters.club" label="Club:" class="col-span-2" />
-            <Input
-              v-model="filters.minAge"
-              label="Min. Age:"
-              type="number"
-              :form-props="{ max: 120, min: 0, step: 1 }"
-            />
-            <Input
-              v-model="filters.maxAge"
-              label="Max. Age:"
-              type="number"
-              :form-props="{ max: 120, min: 0, step: 1 }"
-            />
-            <InputSwitch v-model="filters.male" label="Male:" />
-            <InputSwitch v-model="filters.female" label="Female:" />
-          </div>
-        </section>
-      </transition>
-    </div>
+      <template #rightAction>
+        <ResultsFilterMenu v-model="filters" />
+      </template>
+    </Heading>
 
     <div
       class="mx-auto flex w-full max-w-screen-lg flex-grow flex-row flex-wrap gap-x-4 gap-y-2 px-6 lg:px-8 print:hidden"
@@ -137,6 +94,7 @@ if (event.value) {
 
       <TableResults :results="results[course]" :filters="filters" />
     </section>
+
     <LinksSection
       :links="
         courses.map((course) => ({

diff --git a/frontend/pages/leagues/[name]/results/[class].vue b/frontend/pages/leagues/[name]/results/[class].vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { LeagueResultsOverview } from '~/api-types'
 import type { Filters } from '~/utils/filter'
-import { AdjustmentsVerticalIcon } from '@heroicons/vue/24/outline'
 
 const route = useRoute()
 
@@ -17,7 +16,6 @@ const otherClasses = computed(
     [],
 )
 
-const show = ref(false)
 const filters = reactive<Filters>({
   name: queryToString(route.query.name ?? ''),
   club: queryToString(route.query.club ?? ''),
@@ -42,38 +40,10 @@ if (data.value) {
       :link-text="data.league"
     >
       <template #rightAction>
-        <Button small @click="show = !show">
-          <AdjustmentsVerticalIcon
-            class="-ml-1 mr-2 h-5 w-5"
-            aria-hidden="true"
-          />
-          <span>Filter Results</span>
-        </Button>
+        <ResultsFilterMenu v-model="filters" />
       </template>
     </Heading>
 
-    <transition
-      enter-from-class="scale-y-95 opacity-0 "
-      enter-active-class="duration-300 origin-top motion-safe:transform"
-      enter-to-class="scale-y-100 opacity-100"
-      leave-from-class="scale-y-100 opacity-100"
-      leave-active-class="duration-300 origin-top motion-safe:transform"
-      leave-to-class="scale-y-95 opacity-0 "
-    >
-      <section v-if="show" class="bg-gray-50 dark:bg-gray-800 print:hidden">
-        <div
-          class="mx-auto grid max-w-screen-lg grid-cols-2 gap-6 p-8 pt-4 sm:grid-cols-4 sm:pt-0 lg:px-8"
-        >
-          <Input v-model="filters.name" label="Name:" class="col-span-2" />
-          <Input v-model="filters.club" label="Club:" class="col-span-2" />
-          <Input v-model="filters.minAge" label="Min. Age:" type="number" />
-          <Input v-model="filters.maxAge" label="Max. Age:" type="number" />
-          <InputSwitch v-model="filters.male" label="Male:" />
-          <InputSwitch v-model="filters.female" label="Female:" />
-        </div>
-      </section>
-    </transition>
-
     <section
       v-if="results"
       class="mx-auto w-full flex-grow pb-10 pt-8 lg:px-8 print:sm:py-4"