chore: migrate to script setup style

2024-02-02 18:55:45 +01:00
parent d1bcaf423f
commit 171e1039a7
15 changed files with 3468 additions and 4540 deletions
@@ -1,5 +1,5 @@
 <template>
-  <div :key="isAuthenticated">
+  <div :key="isAuthenticated ? 'true' : 'false'">
    <v-container :key="range" fluid grid-list-md class="app-fade-in">
      <v-row v-if="!isAuthenticated" wrap>
        <v-col xs="12">
@@ -18,7 +18,7 @@
                <template #activator="{ on }">
                  <v-icon
                    v-on="on"
-                    @click="fetchAddress()"
+                    @click="fetchAddressFn()"
                  >
                    mdi-crosshairs-gps
                  </v-icon>
@@ -32,7 +32,7 @@
                  <v-icon
                    :disabled="!origin"
                    v-on="on"
-                    @click="saveOrigin(origin)"
+                    @click="saveOriginFn(origin)"
                  >
                    mdi-bookmark-plus-outline
                  </v-icon>
@@ -74,10 +74,10 @@
          />
        </v-col>
        <v-col cols="12" sm="4">
-          <v-checkbox v-model="state.includeHidden" :label="$t(&quot;events.includeHidden&quot;)" />
+          <v-checkbox v-model="state.includeHidden" :label="$t('events.includeHidden')" />
        </v-col>
      </v-row>
-      <list
+      <event-list
        :events="events"
        :has-user="isAuthenticated"
        :toggle-ignore="toggleIgnore"
@@ -93,10 +93,9 @@
  </div>
 </template>

-<script lang='ts'>
-import { computed, defineComponent, ref, watch } from 'vue'
-
-import List from './List/index.vue'
+<script setup lang='ts'>
+import { computed, ref, watch } from 'vue'
+import EventList from './List/index.vue'
 import { useAuth } from '~/plugins/auth'
 import { useTranslation } from '~/plugins/i18n'
 import {
@@ -112,145 +111,123 @@ import {
 } from '~/graphql/generated/operations'
 import { useState } from '~/store'

-export default defineComponent({
-  name: 'EventsPage',
-  components: {
-    List
-  },
-  setup () {
-    const state = useState()
-    const { t } = useTranslation()
-    state.setTitle(t('app.links.events'))
-    const { loading: authLoading, isAuthenticated } = useAuth()
-    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 events = computed(() => result.value?.events ?? [])
-    const origins = computed(() => result.value?.origins ?? [])
-    const submitting = ref(true)
-    const ranges = [
-      { name: '1 vecka', value: 'ONE_WEEK' },
-      { name: '2 veckor', value: 'TWO_WEEKS' },
-      { name: '1 månad', value: 'ONE_MONTH' },
-      { name: '1 kvartal', value: 'ONE_QUARTER' },
-      { name: '1 år', value: 'ONE_YEAR' }
-    ]
-    const snackbar = ref({ active: false, color: 'success', text: '' })
-
-    const origin = ref('')
-    const fetchEvents = () => {
-      const originsTemp = [...(origins.value || [])]
-      if (origin.value) {
-        originsTemp.push(origin.value)
-      }
-      variables.value = {
-        ...variables.value,
-        range: state.range,
-        origins: originsTemp,
-        includeOrigins: isAuthenticated.value || false
-      }
-      refetch(variables.value)
-    }
-
-    const { mutate: doToggleIgnoreBand } = useToggleIgnoreBandMutation({})
-    const { mutate: doToggleIgnoreDanceHall } = useToggleIgnoreDanceHallMutation({})
-    const { mutate: doToggleIgnoreCity } = useToggleIgnoreCityMutation({})
-    const { mutate: doToggleIgnoreMunicipality } = useToggleIgnoreMunicipalityMutation({})
-    const { mutate: doToggleIgnoreState } = useToggleIgnoreStateMutation({})
-
-    const toggleIgnoreSuccess = (name: string) => {
-      return () => {
-        fetchEvents()
-        snackbar.value.color = 'success'
-        snackbar.value.text = `${name} har dolts`
-        snackbar.value.active = true
-      }
-    }
-
-    const toggleIgnoreFailed = (name: string) => {
-      return () => {
-        snackbar.value.color = 'error'
-        snackbar.value.text = `${name} kunde inte döljas`
-        snackbar.value.active = true
-      }
-    }
-
-    const toggleIgnore = (type: string, name: string) => {
-      switch (type) {
-        case 'band':
-          doToggleIgnoreBand({ name })
-            .then(toggleIgnoreSuccess(name))
-            .catch(toggleIgnoreFailed)
-          break
-        case 'danceHall':
-          doToggleIgnoreDanceHall({ name })
-            .then(toggleIgnoreSuccess(name))
-            .catch(toggleIgnoreFailed)
-          break
-        case 'city':
-          doToggleIgnoreCity({ name })
-            .then(toggleIgnoreSuccess(name))
-            .catch(toggleIgnoreFailed)
-          break
-        case 'municipality':
-          doToggleIgnoreMunicipality({ name })
-            .then(toggleIgnoreSuccess(name))
-            .catch(toggleIgnoreFailed)
-          break
-        case 'state':
-          doToggleIgnoreState({ name })
-            .then(toggleIgnoreSuccess(name))
-            .catch(toggleIgnoreFailed)
-          break
-        default:
-      }
-    }
-
-    const { mutate: doSaveOrigin } = useSaveOriginMutation({})
-    const { refetch: doFetchAddress, load: loadFetchAddress } = useFetchAddressLazyQuery({ latlng: '' })
-    const fetchAddressFn = () => {
-      if (window.navigator) {
-        window.navigator.geolocation.getCurrentPosition((pos) => {
-          loadFetchAddress()
-          doFetchAddress({
-            latlng: `${pos.coords.latitude},${pos.coords.longitude}`
-          })?.then((result) => {
-            origin.value = result.data.address
-          })
-        })
-      }
-    }
-    const saveOriginFn = (o: string) =>
-      doSaveOrigin({ origin: o }).then(() => {
-        origin.value = ''
-        fetchEvents()
-      })
-
-    return {
-      authLoading,
-      isAuthenticated,
-      state,
-      events,
-      origins,
-      submitting,
-      ranges,
-      snackbar,
-      toggleIgnore,
-      origin,
-      fetchAddress: fetchAddressFn,
-      saveOrigin: saveOriginFn
-    }
-  }
+const state = useState()
+const range = computed(() => state.range)
+const { t } = useTranslation()
+state.setTitle(t('app.links.events'))
+const { isAuthenticated } = useAuth()
+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 events = computed(() => result.value?.events ?? [])
+const origins = computed(() => result.value?.origins ?? [])
+const ranges = [
+  { name: '1 vecka', value: 'ONE_WEEK' },
+  { name: '2 veckor', value: 'TWO_WEEKS' },
+  { name: '1 månad', value: 'ONE_MONTH' },
+  { name: '1 kvartal', value: 'ONE_QUARTER' },
+  { name: '1 år', value: 'ONE_YEAR' }
+]
+const snackbar = ref({ active: false, color: 'success', text: '' })
+
+const origin = ref('')
+const fetchEvents = () => {
+  const originsTemp = [...(origins.value || [])]
+  if (origin.value) {
+    originsTemp.push(origin.value)
+  }
+  variables.value = {
+    ...variables.value,
+    range: state.range,
+    origins: originsTemp,
+    includeOrigins: isAuthenticated.value || false
+  }
+  refetch(variables.value)
+}
+
+const { mutate: doToggleIgnoreBand } = useToggleIgnoreBandMutation({})
+const { mutate: doToggleIgnoreDanceHall } = useToggleIgnoreDanceHallMutation({})
+const { mutate: doToggleIgnoreCity } = useToggleIgnoreCityMutation({})
+const { mutate: doToggleIgnoreMunicipality } = useToggleIgnoreMunicipalityMutation({})
+const { mutate: doToggleIgnoreState } = useToggleIgnoreStateMutation({})
+
+const toggleIgnoreSuccess = (name: string) => {
+  return () => {
+    fetchEvents()
+    snackbar.value.color = 'success'
+    snackbar.value.text = `${name} har dolts`
+    snackbar.value.active = true
+  }
+}
+
+const toggleIgnoreFailed = (name: string) => {
+  return () => {
+    snackbar.value.color = 'error'
+    snackbar.value.text = `${name} kunde inte döljas`
+    snackbar.value.active = true
+  }
+}
+
+const toggleIgnore = (type: string, name: string) => {
+  switch (type) {
+    case 'band':
+      doToggleIgnoreBand({ name })
+        .then(toggleIgnoreSuccess(name))
+        .catch(toggleIgnoreFailed)
+      break
+    case 'danceHall':
+      doToggleIgnoreDanceHall({ name })
+        .then(toggleIgnoreSuccess(name))
+        .catch(toggleIgnoreFailed)
+      break
+    case 'city':
+      doToggleIgnoreCity({ name })
+        .then(toggleIgnoreSuccess(name))
+        .catch(toggleIgnoreFailed)
+      break
+    case 'municipality':
+      doToggleIgnoreMunicipality({ name })
+        .then(toggleIgnoreSuccess(name))
+        .catch(toggleIgnoreFailed)
+      break
+    case 'state':
+      doToggleIgnoreState({ name })
+        .then(toggleIgnoreSuccess(name))
+        .catch(toggleIgnoreFailed)
+      break
+    default:
+  }
+}
+
+const { mutate: doSaveOrigin } = useSaveOriginMutation({})
+const { refetch: doFetchAddress, load: loadFetchAddress } = useFetchAddressLazyQuery({ latlng: '' })
+const fetchAddressFn = () => {
+  if (window.navigator) {
+    window.navigator.geolocation.getCurrentPosition((pos) => {
+      loadFetchAddress()
+      doFetchAddress({
+        latlng: `${pos.coords.latitude},${pos.coords.longitude}`
+      })?.then((result) => {
+        origin.value = result.data.address
+      })
+    })
+  }
+}
+const saveOriginFn = (o: string) =>
+  doSaveOrigin({ origin: o }).then(() => {
+    origin.value = ''
+    fetchEvents()
+  })
+
 </script>