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

<template>
  <div :key="isAuthenticated">
    <v-container fluid grid-list-md class="app-fade-in">
      <v-layout row wrap>
        <v-flex xs12>
          <v-text-field
            v-model="origin"
            :label="$t('origins.origin')"
            :placeholder="$t('origins.geolocation')"
          >
            <v-tooltip top slot="append-outer">
              <template v-slot:activator="{ on }">
                <v-icon v-on="on" v-on:click="fetchAddress()"
                  >mdi-crosshairs-gps</v-icon
                >
              </template>
              <span v-text="$t('origins.fetchAddress')" />
            </v-tooltip>
            <v-tooltip top slot="prepend">
              <template v-slot:activator="{ on }">
                <v-icon
                  v-on="on"
                  :disabled="!origin"
                  v-on:click="saveOrigin(origin)"
                  >mdi-bookmark-plus-outline</v-icon
                >
              </template>
              <span v-text="$t('origins.save')" />
            </v-tooltip>
          </v-text-field>
        </v-flex>
      </v-layout>
      <template>
        <v-layout row wrap v-for="origin in origins" :key="origin">
          <v-flex xs12>
            <v-tooltip top slot="prepend">
              <template v-slot:activator="{ on }">
                <v-icon v-on="on" v-on:click="removeOrigin(origin)"
                  >mdi-delete-outline
                </v-icon>
              </template>
              <span v-text="$t('origins.remove')" />
            </v-tooltip>
            <span>{{ origin }}</span>
          </v-flex>
        </v-layout>
      </template>
    </v-container>
    <v-snackbar
      v-model="snackbar.active"
      :color="snackbar.color"
      :timeout="5000"
    >
      {{ snackbar.text }}
    </v-snackbar>
  </div>
</template>

<script>
import { ref } from '@vue/composition-api'
import { useMutations } from '@u3u/vue-hooks'
import {
  fetchAddress,
  findOrigins,
  removeOrigin,
  saveOrigin
} from '../../../utils/graph-client'
import {
  useLazyQuery,
  useMutation,
  useQuery,
  useResult
} from '../../../plugins/apollo'
import useAuth from '../../../plugins/auth'
import { useTranslation } from '../../../plugins/i18n'

export default {
  setup() {
    const { setTitle } = useMutations(['setTitle'])
    const { t } = useTranslation()
    setTitle(t('app.links.origins'))
    const { isAuthenticated } = useAuth()
    const { data, loading, refetch } = useQuery(findOrigins)
    const origins = useResult(data, [])
    const snackbar = ref({ active: false, color: 'success', text: '' })
    const [doSaveOrigin] = useMutation(saveOrigin)
    const [doRemoveOrigin] = useMutation(removeOrigin)
    const [doFetchAddress] = useLazyQuery(fetchAddress)
    const origin = ref('')
    const fetchAddressFn = () => {
      if (window.navigator) {
        window.navigator.geolocation.getCurrentPosition(pos => {
          doFetchAddress({
            variables: {
              latlng: `${pos.coords.latitude},${pos.coords.longitude}`
            }
          }).then(res => {
            origin.value = res.address
          })
        })
      }
    }
    const saveOriginFn = o =>
      doSaveOrigin({ variables: { origin: o } }).then(() => {
        refetch()
        origin.value = ''
      })
    const removeOriginFn = o =>
      doRemoveOrigin({ variables: { origin: o } }).then(() => refetch())
    return {
      isAuthenticated,
      loading,
      origins,
      snackbar,
      origin,
      saveOrigin: saveOriginFn,
      removeOrigin: removeOriginFn,
      fetchAddress: fetchAddressFn
    }
  }
}
</script>