dancefinder-app/components/pages/events/event-page.vue

<template>
  <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">
          <p><b v-text="t('events.login')" /></p>
        </v-col>
      </v-row>
      <v-row wrap>
        <v-col xs="12">
          <v-text-field
            v-model="origin"
            variant="underlined"
            hide-details
            :label="t('origins.origin')"
            :placeholder="t('origins.geolocation')"
          >
            <template #append>
              <v-tooltip top>
                <template #activator="{ props }">
                  <v-icon
                    icon='mdi-crosshairs-gps'
                    v-bind="props"
                    @click="fetchAddressFn()"
                  />
                </template>
                <span v-text="t('origins.fetchAddress')" />
              </v-tooltip>
            </template>
            <template #prepend>
              <v-tooltip v-if="isAuthenticated" top>
                <template #activator="{ props }">
                  <v-icon
                    icon='mdi-bookmark-plus-outline'
                    :disabled="!origin"
                    v-bind="props"
                    @click="saveOriginFn(origin)"
                  />
                </template>
                <span v-text="t('origins.save')" />
              </v-tooltip>
            </template>
          </v-text-field>
        </v-col>
      </v-row>
      <v-row wrap>
        <v-col>
          <v-btn-toggle
            v-if="smAndUp"
            v-model="state.range"
            mandatory
          >
            <v-btn v-for="r in ranges" :key="r.value" variant="outlined" :value="r.value">
              <span v-text="t(`events.range.${r.value}`)" />
            </v-btn>
          </v-btn-toggle>
          <v-select
            v-else
            v-model="state.range"
            variant="outlined"
            :items="ranges"
            item-title="name"
            item-value="value"
            hide-details
          />
        </v-col>
      </v-row>
      <v-row wrap>
        <v-col cols="12" sm="8">
          <v-text-field
            v-model="state.search"
            variant="underlined"
            append-outer-icon="mdi-magnify"
            :label="t('events.filter')"
            :placeholder="t('events.filter')"
            hide-details
          />
        </v-col>
        <v-col cols="12" sm="4">
          <v-checkbox v-model="state.includeHidden" :label="t('events.includeHidden')" hide-details />
        </v-col>
      </v-row>
      <event-list
        :events="events"
        :has-user="isAuthenticated"
        :toggle-ignore="toggleIgnore"
      />
    </v-container>
    <v-snackbar
      v-model="snackbar.active"
      :color="snackbar.color"
      :timeout="5000"
    >
      {{ snackbar.text }}
    </v-snackbar>
  </div>
</template>

<script setup lang='ts'>
import { useAuth0 } from '@auth0/auth0-vue'
import { computed, ref, watch } from 'vue'
import { useDisplay } from 'vuetify'

import { useI18n } from '#i18n'
import {
  type FindEventsQueryVariables,
  useFetchAddressLazyQuery,
  useFindEventsQuery,
  useSaveOriginMutation,
  useToggleIgnoreBandMutation,
  useToggleIgnoreCityMutation,
  useToggleIgnoreDanceHallMutation,
  useToggleIgnoreMunicipalityMutation,
  useToggleIgnoreStateMutation,
} from '~/graphql/generated/operations'
import { useState } from '~/store'

import EventList from './event-list.vue'

const state = useState()
const { smAndUp } = useDisplay()
const range = computed(() => state.range)
const { t } = useI18n()
state.setTitle(t('app.links.events'))
const { isAuthenticated } = useAuth0()
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>