chore: migrate to composition API and auth0-spa
This commit is contained in:
@@ -1,41 +1,47 @@
|
||||
<template>
|
||||
<div>
|
||||
<app-loader :show="isLoading" />
|
||||
<app-loader v-if="isSubmitting" overlay>
|
||||
<p>
|
||||
{{submitInfo}}
|
||||
</p>
|
||||
</app-loader>
|
||||
<v-container fluid grid-list-md v-if="isReady || isSubmitting || isSubmitted" class="app-fade-in">
|
||||
<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="Startpunkt"
|
||||
placeholder="Address/geokoordinat"
|
||||
: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>Hämta nuvarande position</span>
|
||||
<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>Spara startpunkt</span>
|
||||
<span v-text="$t('origins.save')"/>
|
||||
</v-tooltip>
|
||||
</v-text-field>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout row wrap v-for="origin in origins" :key="origin">
|
||||
<v-layout row wrap v-for="origin in data.origins" :key="origin" v-if="data && data.origins">
|
||||
<v-flex xs12>
|
||||
<v-icon v-on:click="removeOrigin(origin)">mdi-delete-outline</v-icon>
|
||||
<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>
|
||||
</v-container>
|
||||
<v-snackbar
|
||||
v-model="snackbar.active"
|
||||
:color="snackbar.color"
|
||||
:timeout="5000"
|
||||
>
|
||||
{{ snackbar.text }}
|
||||
</v-snackbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -45,112 +51,50 @@
|
||||
saveOrigin,
|
||||
removeOrigin,
|
||||
fetchAddress,
|
||||
} from "~/utils/graph-client";
|
||||
} from "../../../utils/graph-client";
|
||||
import { useLazyQuery, useMutation, useQuery } from '../../../plugins/apollo'
|
||||
import { ref } from '@vue/composition-api'
|
||||
import { useAuth } from '../../../plugins/auth'
|
||||
import { useMutations } from '@u3u/vue-hooks'
|
||||
import { useTranslation } from '../../../plugins/i18n'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
status: "loading",
|
||||
origin: undefined,
|
||||
submitInfo: "",
|
||||
snackbar: false,
|
||||
snackColor: "success",
|
||||
snackText: "",
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
isLoading() {
|
||||
return this.status === "loading";
|
||||
},
|
||||
isReady() {
|
||||
return this.status === "ready";
|
||||
},
|
||||
isSubmitting() {
|
||||
return this.status === "submitting";
|
||||
},
|
||||
isSubmitted() {
|
||||
return this.status === "submitted";
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.$store.commit('setTitle', 'Startpunkter');
|
||||
this.fetchOrigins();
|
||||
},
|
||||
methods: {
|
||||
fetchOrigins() {
|
||||
this.status = "loading";
|
||||
findOrigins()
|
||||
.then(this.originsFetched)
|
||||
.catch(this.originsFailed);
|
||||
},
|
||||
originsFetched(response) {
|
||||
if (response.errors) {
|
||||
throw new Error("Fetch failed");
|
||||
}
|
||||
this.origins = response.data.origins;
|
||||
this.status = "ready";
|
||||
},
|
||||
originsFailed() {
|
||||
this.status = "load-failed";
|
||||
},
|
||||
saveOrigin(origin) {
|
||||
this.submitInfo = 'Sparar startpunkt';
|
||||
this.status = 'submitting';
|
||||
saveOrigin({origin: origin})
|
||||
.then(saved => {
|
||||
this.status = 'submitted';
|
||||
if (saved) {
|
||||
this.origins = [];
|
||||
this.origin = "";
|
||||
this.fetchOrigins();
|
||||
} else {
|
||||
this.snackColor = 'error';
|
||||
this.snackText = `${origin} kunde inte sparas`;
|
||||
this.snackbar = true;
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.status = 'submit-failed';
|
||||
this.snackColor = 'error';
|
||||
this.snackText = `${origin} kunde inte sparas`;
|
||||
this.snackbar = true;
|
||||
})
|
||||
},
|
||||
removeOrigin(origin) {
|
||||
this.submitInfo = 'Tar bort startpunkt';
|
||||
this.status = 'submitting';
|
||||
removeOrigin({origin: origin})
|
||||
.then(removed => {
|
||||
this.status = 'submitted';
|
||||
if (removed) {
|
||||
this.origins = [];
|
||||
this.fetchOrigins();
|
||||
} else {
|
||||
this.snackColor = 'error';
|
||||
this.snackText = `${origin} kunde inte tas bort`;
|
||||
this.snackbar = true;
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.status = 'submit-failed';
|
||||
this.snackColor = 'error';
|
||||
this.snackText = `${origin} kunde inte tas bort`;
|
||||
this.snackbar = true;
|
||||
})
|
||||
},
|
||||
fetchAddress() {
|
||||
setup() {
|
||||
const { setTitle } = useMutations(['setTitle'])
|
||||
const { t } = useTranslation();
|
||||
setTitle(t('app.links.origins'))
|
||||
const { loading: authLoading, isAuthenticated } = useAuth()
|
||||
const {data, loading, error, refetch} = useQuery(findOrigins)
|
||||
const snackbar = ref({ active: false, color: 'success', text: '' })
|
||||
const [doSaveOrigin, {loading: savingOrigin, error: errorSaveOrigin}] = useMutation(saveOrigin)
|
||||
const [doRemoveOrigin, {loading: removingOrigin, error: errorRemoveOrigin}] = useMutation(removeOrigin)
|
||||
const [doFetchAddress, {data: address, loading: fetchingAddress, error: errorFetchingAddress}] = useLazyQuery(fetchAddress)
|
||||
const origin = ref('')
|
||||
const fetchAddressFn = () => {
|
||||
if (window.navigator) {
|
||||
this.submitInfo = 'Hämtar aktuell position';
|
||||
this.status = 'submitting';
|
||||
window.navigator.geolocation.getCurrentPosition(pos => {
|
||||
fetchAddress({latlng: pos.coords.latitude + "," + pos.coords.longitude})
|
||||
.then(response => {
|
||||
this.status = 'submitted';
|
||||
this.origin = response.data.address;
|
||||
})
|
||||
doFetchAddress({variables: {latlng: pos.coords.latitude + "," + pos.coords.longitude}})
|
||||
.then(() => {
|
||||
origin.value = address.value.address;
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
const saveOriginFn = o => doSaveOrigin({variables: { origin: o }}).then(() => {
|
||||
refetch.value()
|
||||
origin.value = ''
|
||||
})
|
||||
const removeOriginFn = o => doRemoveOrigin({variables: { origin: o }}).then(() => refetch.value())
|
||||
return {
|
||||
isAuthenticated,
|
||||
loading,
|
||||
data,
|
||||
snackbar,
|
||||
origin,
|
||||
saveOrigin: saveOriginFn,
|
||||
removeOrigin: removeOriginFn,
|
||||
fetchAddress: fetchAddressFn
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user