dancefinder-app/components/pages/origins/origin-page.vue

<template>
  <div :key="isAuthenticated ? 'true' : 'false'">
    <v-container fluid grid-list-md class="app-fade-in">
      <v-layout row wrap>
        <v-col xs="12">
          <v-text-field
            v-model="origin"
            variant="underlined"
            :label="$t('origins.origin')"
            :placeholder="$t('origins.geolocation')"
          >
            <template #append>
              <v-tooltip top>
                <template #activator="{ props }">
                  <v-icon
                    v-bind="props"
                    @click="fetchAddressFn()"
                  >
                    mdi-crosshairs-gps
                  </v-icon>
                </template>
                <span v-text="$t('origins.fetchAddress')" />
              </v-tooltip>
            </template>
            <template #prepend>
              <v-tooltip top>
                <template #activator="{ props }">
                  <v-icon
                    :disabled="!origin"
                    v-bind="props"
                    @click="saveOriginFn(origin)"
                  >
                    mdi-bookmark-plus-outline
                  </v-icon>
                </template>
                <span v-text="$t('origins.save')" />
              </v-tooltip>
            </template>
          </v-text-field>
        </v-col>
      </v-layout>
      <v-layout v-for="o in origins" :key="o" row wrap>
        <v-col xs="12">
          <v-tooltip top>
            <template #activator="{ props }">
              <v-icon
                v-bind="props"
                @click="removeOriginFn(o)"
              >
                mdi-delete-outline
              </v-icon>
            </template>
            <span v-text="$t('origins.remove')" />
          </v-tooltip>
          <span>{{ o }}</span>
        </v-col>
      </v-layout>
    </v-container>
    <v-snackbar
      v-model="snackbar.active"
      :color="snackbar.color"
      :timeout="5000"
    >
      {{ snackbar.text }}
    </v-snackbar>
  </div>
</template>

<script setup lang='ts'>
import { computed, ref } from 'vue'
import { useAuth0 } from '@auth0/auth0-vue'
import { useI18n } from '#i18n'
import {
  useFetchAddressLazyQuery,
  useFindOriginsQuery,
  useRemoveOriginMutation,
  useSaveOriginMutation,
} from '~/graphql/generated/operations'
import { useState } from '~/store'

const state = useState()
const { t } = useI18n()
state.setTitle(t('app.links.origins'))
const { isAuthenticated } = useAuth0()
const { result, refetch } = useFindOriginsQuery()
const origins = computed(() => result.value?.origins ?? [])
const snackbar = ref({ active: false, color: 'success', text: '' })
const { mutate: doSaveOrigin } = useSaveOriginMutation({})
const { mutate: doRemoveOrigin } = useRemoveOriginMutation({})
const { refetch: doFetchAddress, load } = useFetchAddressLazyQuery({ latlng: '' })
const origin = ref('')
const fetchAddressFn = () => {
  if (window.navigator) {
    window.navigator.geolocation.getCurrentPosition((pos) => {
      load()
      doFetchAddress({
        latlng: `${pos.coords.latitude},${pos.coords.longitude}`,
      })?.then((res) => {
        origin.value = res.data.address
      })
    })
  }
}
const saveOriginFn = (o: string) =>
  doSaveOrigin({ origin: o }).then(() => {
    refetch()
    origin.value = ''
  })
const removeOriginFn = (o: string) =>
  doRemoveOrigin({ origin: o }).then(() => refetch())
</script>