feat: add full text search

components/pages/events/index.vue

@@ -43,7 +43,7 @@
         <v-col>
           <v-btn-toggle
             v-if='$vuetify.breakpoint.smAndUp'
-            v-model='range'
+            v-model='state.range'
             mandatory
           >
             <v-btn v-for='r in ranges' :key='r.value' text :value='r.value'>
@@ -52,7 +52,7 @@
           </v-btn-toggle>
           <v-select
             v-else
-            v-model='range'
+            v-model='state.range'
             outline
             :items='ranges'
             item-text='name'
@@ -60,6 +60,19 @@
           />
         </v-col>
       </v-row>
+      <v-row wrap>
+        <v-col cols='12' sm='8'>
+          <v-text-field
+            v-model='state.search'
+            append-outer-icon='mdi-magnify'
+            :label="$t('events.filter')"
+            :placeholder="$t('events.filter')"
+          />
+        </v-col>
+        <v-col cols='12' sm='4'>
+          <v-checkbox v-model='state.includeHidden' :label='$t("events.includeHidden")' />
+        </v-col>
+      </v-row>
       <list
         :events='events'
         :has-user='isAuthenticated'
@@ -78,16 +91,14 @@
 
 <script lang='ts'>
 import { computed, defineComponent, ref, watch } from 'vue'
-import { useNuxtApp } from '@nuxt/bridge/dist/runtime'
 
 import List from './List/index.vue'
 import { useAuth } from '~/plugins/auth'
 import { useTranslation } from '~/plugins/i18n'
 import {
   FindEventsQueryVariables,
-  Range,
   useFetchAddressLazyQuery,
-  useFindEventsLazyQuery,
+  useFindEventsQuery,
   useSaveOriginMutation,
   useToggleIgnoreBandMutation,
   useToggleIgnoreCityMutation,
@@ -95,6 +106,7 @@ import {
   useToggleIgnoreMunicipalityMutation,
   useToggleIgnoreStateMutation
 } from '~/graphql/generated/operations'
+import { useState } from '~/store'
 
 export default defineComponent({
   name: 'EventsPage',
@@ -102,45 +114,26 @@ export default defineComponent({
     List
   },
   setup() {
-    const { $store } = useNuxtApp()
+    const state = useState()
     const { t } = useTranslation()
-    $store.commit('setTitle', t('app.links.events'))
+    state.setTitle(t('app.links.events'))
     const { loading: authLoading, isAuthenticated } = useAuth()
-    const route = useRoute()
-    const router = useRouter()
-    const validRange = (value: string | null | (string|null)[]): Range | undefined => {
-      if (!value) {
-        return Range.OneWeek
-      }
-      if (Array.isArray(value)) {
-        return validRange(value[0])
-      }
-      return Object.values(Range).includes(value as Range) ? value as Range : Range.OneWeek
-    }
-    const range = computed({
-      get: () => validRange(route.query.range),
-      set: (value) => {
-        router.push(`/?range=${validRange(value)}`)
-      }
+    const variables = ref<FindEventsQueryVariables>({
+      range: state.range,
+      includeOrigins: isAuthenticated.value || false,
+      search: state.search,
+      includeHidden: state.includeHidden
+    })
+    const { result, refetch } = useFindEventsQuery(() => variables.value)
+    watch([state, isAuthenticated], () => {
+      variables.value.range = state.range
+      variables.value.search = state.search
+      variables.value.includeHidden = state.includeHidden
+      variables.value.includeOrigins = isAuthenticated.value || false
+      refetch(variables.value)
     })
-    const variables = ref<FindEventsQueryVariables>({ includeOrigins: false})
-    const { result, refetch, load } = useFindEventsLazyQuery(variables)
     const events = computed(() => result.value?.events ?? [])
     const origins = computed(() => result.value?.origins ?? [])
-    watch(
-      () => route.query.range,
-      (r) => {
-        if (!authLoading.value) {
-          variables.value = {
-            range: r ? r as Range : Range.OneWeek,
-            includeOrigins: isAuthenticated.value || false
-          }
-          load()
-          refetch(variables.value)
-        }
-      },
-      { immediate: true }
-    )
     const submitting = ref(true)
     const ranges = [
       { name: '1 vecka', value: 'ONE_WEEK' },
@@ -158,11 +151,11 @@ export default defineComponent({
         originsTemp.push(origin.value)
       }
       variables.value = {
-        range: range.value,
+        ...variables.value,
+        range: state.range,
         origins: originsTemp,
         includeOrigins: isAuthenticated.value || false
       }
-      load()
       refetch(variables.value)
     }
 
@@ -243,7 +236,7 @@ export default defineComponent({
     return {
       authLoading,
       isAuthenticated,
-      range,
+      state,
       events,
       origins,
       submitting,

components/pages/filters/index.vue

@@ -62,7 +62,6 @@
 
 <script lang='ts'>
 import { computed, ref } from 'vue'
-import { useNuxtApp } from '@nuxt/bridge/dist/runtime'
 
 import List from './List/index.vue'
 import { useAuth } from '~/plugins/auth'
@@ -75,6 +74,7 @@ import {
   useToggleIgnoreMunicipalityMutation,
   useToggleIgnoreStateMutation
 } from '~/graphql/generated/operations'
+import { useState } from '~/store'
 
 export default {
   name: 'FiltersPage',
@@ -82,9 +82,9 @@ export default {
     List
   },
   setup() {
-    const { $store } = useNuxtApp()
+    const state = useState()
     const { t } = useTranslation()
-    $store.commit('setTitle', t('app.links.filters'))
+    state.setTitle(t('app.links.filters'))
     const { isAuthenticated } = useAuth()
     const { result, loading, refetch } = useFetchFiltersQuery()
     const bands = computed(() => result.value?.bands ?? [])

components/pages/origins/index.vue

@@ -60,7 +60,6 @@
 
 <script lang='ts'>
 import { computed, defineComponent, ref } from 'vue'
-import { useNuxtApp } from '@nuxt/bridge/dist/runtime'
 import { useAuth } from '~/plugins/auth'
 import { useTranslation } from '~/plugins/i18n'
 import {
@@ -69,13 +68,14 @@ import {
   useRemoveOriginMutation,
   useSaveOriginMutation
 } from '~/graphql/generated/operations'
+import { useState } from '~/store'
 
 export default defineComponent({
   name: 'OriginsPage',
   setup() {
-    const { $store } = useNuxtApp()
+    const state = useState()
     const { t } = useTranslation()
-    $store.commit('setTitle', t('app.links.origins'))
+    state.setTitle(t('app.links.origins'))
     const { isAuthenticated } = useAuth()
     const { result, loading, refetch } = useFindOriginsQuery()
     const origins = computed(() => result.value?.origins ?? [])