dancefinder-app/components/pages/events/index.vue

<template>
  <div :key='isAuthenticated'>
    <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'
            :label="$t('origins.origin')"
            :placeholder="$t('origins.geolocation')"
          >
            <template #append-outer>
              <v-tooltip top>
                <template #activator='{ on }'>
                  <v-icon v-on='on' @click='fetchAddress()'
                  >mdi-crosshairs-gps
                  </v-icon>
                </template>
                <span v-text="$t('origins.fetchAddress')" />
              </v-tooltip>
            </template>
            <template #prepend>
              <v-tooltip v-if='isAuthenticated' top>
                <template #activator='{ on }'>
                  <v-icon
                    :disabled='!origin'
                    v-on='on'
                    @click='saveOrigin(origin)'
                  >mdi-bookmark-plus-outline
                  </v-icon>
                </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='$vuetify.breakpoint.smAndUp'
            v-model='state.range'
            mandatory
          >
            <v-btn v-for='r in ranges' :key='r.value' text :value='r.value'>
              <span v-text='$t(`events.range.${r.value}`)'
              /></v-btn>
          </v-btn-toggle>
          <v-select
            v-else
            v-model='state.range'
            outline
            :items='ranges'
            item-text='name'
            item-value='value'
          />
        </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'
        :toggle-ignore='toggleIgnore'
      />
    </v-container>
    <v-snackbar
      v-model='snackbar.active'
      :color='snackbar.color'
      :timeout='5000'
    >
      {{ snackbar.text }}
    </v-snackbar>
  </div>
</template>

<script lang='ts'>
import { computed, defineComponent, ref, watch } from 'vue'

import List from './List/index.vue'
import { useAuth } from '~/plugins/auth'
import { useTranslation } from '~/plugins/i18n'
import {
  FindEventsQueryVariables,
  useFetchAddressLazyQuery,
  useFindEventsQuery,
  useSaveOriginMutation,
  useToggleIgnoreBandMutation,
  useToggleIgnoreCityMutation,
  useToggleIgnoreDanceHallMutation,
  useToggleIgnoreMunicipalityMutation,
  useToggleIgnoreStateMutation
} 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
    }
  }
})
</script>