chore: migrate to composition API and auth0-spa
This commit is contained in:
@@ -5,14 +5,14 @@
|
||||
</v-card-title>
|
||||
<v-container>
|
||||
<v-layout row wrap>
|
||||
<v-flex xs12 sm6><strong>Datum:</strong> {{event.date}} ({{ weekday }})</v-flex>
|
||||
<v-flex xs12 sm6 v-if="event.time"><strong>Tid:</strong> {{event.time}}</v-flex>
|
||||
<v-flex xs12 sm6><strong class="mr-1" v-text="$t('events.date')" />{{event.date}} ({{ weekday }} {{ daysUntil }})</v-flex>
|
||||
<v-flex xs12 sm6 v-if="event.time"><strong class="mr-1" v-text="$t('events.time')" />{{event.time}}</v-flex>
|
||||
</v-layout>
|
||||
<v-layout row wrap>
|
||||
<v-flex xs12 sm6 md3><strong>Var:</strong><v-icon class="ml-1 mr-1" v-if="hasUser" v-on:click="toggleIgnore('danceHall', event.danceHall.name)" small title="Dölj">mdi-eye-off</v-icon>{{event.danceHall.name}}</v-flex>
|
||||
<v-flex xs12 sm6 md3><strong>Ort:</strong><v-icon class="ml-1 mr-1" v-if="hasUser" v-on:click="toggleIgnore('city', event.danceHall.city)" small title="Dölj">mdi-eye-off</v-icon>{{event.danceHall.city}}</v-flex>
|
||||
<v-flex xs12 sm6 md3><strong>Kommun:</strong><v-icon class="ml-1 mr-1" v-if="hasUser" v-on:click="toggleIgnore('municipality', event.danceHall.municipality)" small title="Dölj">mdi-eye-off</v-icon>{{event.danceHall.municipality}}</v-flex>
|
||||
<v-flex xs12 sm6 md3><strong>Län:</strong><v-icon class="ml-1 mr-1" v-if="hasUser" v-on:click="toggleIgnore('state', event.danceHall.state)" small title="Dölj">mdi-eye-off</v-icon>{{event.danceHall.state}}</v-flex>
|
||||
<v-flex xs12 sm6 md3><strong class="mr-1" v-text="$t('events.hall')" /><v-icon class="ml-1 mr-1" v-if="hasUser" v-on:click="toggleIgnore('danceHall', event.danceHall.name)" small :title="$t('events.hide')">mdi-eye-off</v-icon>{{event.danceHall.name}}</v-flex>
|
||||
<v-flex xs12 sm6 md3><strong class="mr-1" v-text="$t('events.city')" /><v-icon class="ml-1 mr-1" v-if="hasUser" v-on:click="toggleIgnore('city', event.danceHall.city)" small :title="$t('events.hide')">mdi-eye-off</v-icon>{{event.danceHall.city}}</v-flex>
|
||||
<v-flex xs12 sm6 md3><strong class="mr-1" v-text="$t('events.municipality')" /><v-icon class="ml-1 mr-1" v-if="hasUser" v-on:click="toggleIgnore('municipality', event.danceHall.municipality)" small :title="$t('events.hide')">mdi-eye-off</v-icon>{{event.danceHall.municipality}}</v-flex>
|
||||
<v-flex xs12 sm6 md3><strong class="mr-1" v-text="$t('events.state')" /><v-icon class="ml-1 mr-1" v-if="hasUser" v-on:click="toggleIgnore('state', event.danceHall.state)" small :title="$t('events.hide')">mdi-eye-off</v-icon>{{event.danceHall.state}}</v-flex>
|
||||
</v-layout>
|
||||
<v-layout row wrap v-for="distance in event.distances" :key="event.origin">
|
||||
<v-flex xs12 sm6>
|
||||
@@ -31,6 +31,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dayjs from 'dayjs'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
event: {
|
||||
@@ -46,10 +48,14 @@
|
||||
required: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
weekday() {
|
||||
return window.$nuxt.$moment(this.event.date).format('dddd');
|
||||
setup(props) {
|
||||
const time = (props.event.time || '').split('-')[0].replace('.', ':')
|
||||
const weekday = dayjs(props.event.date).format('dddd')
|
||||
const daysUntil = dayjs(`${props.event.date} ${time}`).fromNow()
|
||||
return {
|
||||
weekday,
|
||||
daysUntil
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-layout row wrap v-for="event in events.events" :key="event.id" v-if="events && events.events">
|
||||
<v-flex xs12>
|
||||
<Event :event="event" :has-user="hasUser" :toggleIgnore="toggleIgnore"/>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Event from '../Event';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Event,
|
||||
},
|
||||
props: {
|
||||
hasUser: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
toggleIgnore: {
|
||||
type: Function,
|
||||
required: true
|
||||
},
|
||||
events: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
+136
-183
@@ -1,249 +1,202 @@
|
||||
<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 || isRefreshing" class="app-fade-in">
|
||||
<v-layout row wrap v-if="!hasUser">
|
||||
<div :key="isAuthenticated">
|
||||
<v-container fluid grid-list-md class="app-fade-in" :key="range">
|
||||
<v-layout row wrap v-if="!isAuthenticated">
|
||||
<v-flex xs12>
|
||||
<p><b>OBS! Logga in för att kunna filtrera listan</b></p>
|
||||
<p><b v-text="$t('events.login')"/></p>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<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" v-if="hasUser">
|
||||
<v-tooltip top slot="prepend" v-if="isAuthenticated">
|
||||
<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-flex>
|
||||
<v-btn-toggle v-if="$vuetify.breakpoint.smAndUp" v-model="range" mandatory @change="changeRange">
|
||||
<v-btn text v-for="r in ranges" :key="r.value" :value="r.value">{{r.name}}</v-btn>
|
||||
<v-btn-toggle v-if="$vuetify.breakpoint.smAndUp" v-model="range" mandatory>
|
||||
<v-btn text v-for="r in ranges" :key="r.value" :value="r.value" v-text="$t(`events.range.${r.value}`)"/>
|
||||
</v-btn-toggle>
|
||||
<v-select outline v-if="$vuetify.breakpoint.xsOnly" v-model="range" @change="changeRange" :items="ranges" item-text="name" item-value="value"></v-select>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout row wrap v-for="event in events" :key="event.id">
|
||||
<v-flex xs12>
|
||||
<Event :event="event" :has-user="hasUser" :toggleIgnore="toggleIgnore" />
|
||||
<v-select outline v-if="$vuetify.breakpoint.xsOnly" v-model="range" :items="ranges" item-text="name" item-value="value"/>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<list :events="data" :has-user="isAuthenticated" :toggleIgnore="toggleIgnore" />
|
||||
</v-container>
|
||||
<v-snackbar
|
||||
v-model="snackbar"
|
||||
:color="snackColor"
|
||||
:timeout="5000"
|
||||
v-model="snackbar.active"
|
||||
:color="snackbar.color"
|
||||
:timeout="5000"
|
||||
>
|
||||
{{ snackText }}
|
||||
{{ snackbar.text }}
|
||||
</v-snackbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { useAuth } from '../../../plugins/auth'
|
||||
|
||||
import List from './List'
|
||||
import { useRouter, useMutations } from '@u3u/vue-hooks'
|
||||
import { computed, ref, watch } from '@vue/composition-api'
|
||||
import { useLazyQuery, useMutation } from '../../../plugins/apollo'
|
||||
import {
|
||||
findEvents,
|
||||
fetchAddress,
|
||||
findEvents,
|
||||
saveOrigin,
|
||||
toggleIgnoreBand,
|
||||
toggleIgnoreDanceHall,
|
||||
toggleIgnoreCity,
|
||||
toggleIgnoreDanceHall,
|
||||
toggleIgnoreMunicipality,
|
||||
toggleIgnoreState,
|
||||
saveOrigin} from "~/utils/graph-client";
|
||||
|
||||
import auth from "~/utils/auth";
|
||||
|
||||
import Event from "./Event";
|
||||
toggleIgnoreState
|
||||
} from '../../../utils/graph-client'
|
||||
import { useTranslation } from '../../../plugins/i18n'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Event
|
||||
List
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
status: "loading",
|
||||
origin: undefined,
|
||||
origins: [],
|
||||
submitInfo: "",
|
||||
submitError: "",
|
||||
user: undefined,
|
||||
snackbar: false,
|
||||
snackColor: "success",
|
||||
snackText: "",
|
||||
range: "ONE_WEEK",
|
||||
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"}
|
||||
]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
isLoading() {
|
||||
return this.status === "loading";
|
||||
},
|
||||
isReady() {
|
||||
return this.status === "ready";
|
||||
},
|
||||
isSubmitting() {
|
||||
return this.status === "submitting";
|
||||
},
|
||||
isSubmitted() {
|
||||
return this.status === "submitted";
|
||||
},
|
||||
isRefreshing() {
|
||||
return this.status === "refreshing";
|
||||
},
|
||||
hasUser() {
|
||||
return this.user !== undefined && this.user !== null;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$store.commit('setTitle', 'Evenemang');
|
||||
const {range} = this.$route.query;
|
||||
this.range = range || "ONE_WEEK";
|
||||
this.fetchUser();
|
||||
this.fetchEvents();
|
||||
},
|
||||
watch: {
|
||||
"$route.query"() {
|
||||
const {range} = this.$route.query;
|
||||
this.range = range;
|
||||
this.fetchUser();
|
||||
this.fetchEvents();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fetchEvents (status) {
|
||||
this.status = status || "loading";
|
||||
const origins = this.origins;
|
||||
if (this.origin) {
|
||||
origins.push(this.origin);
|
||||
setup() {
|
||||
const { setTitle } = useMutations(['setTitle'])
|
||||
const { t } = useTranslation();
|
||||
setTitle(t('app.links.events'))
|
||||
const { loading: authLoading, isAuthenticated } = useAuth()
|
||||
const { route, router } = useRouter();
|
||||
const range = computed({get: () => route.value.query.range || 'ONE_WEEK', set: value => router.push(`/?range=${value}`)})
|
||||
const [query, { loading, data, error, refetch }] = useLazyQuery(findEvents)
|
||||
watch(() => range.value, (r, o) => {
|
||||
query({
|
||||
variables: {
|
||||
range: r,
|
||||
includeOrigins: isAuthenticated.value
|
||||
}
|
||||
})
|
||||
}, { lazy: false})
|
||||
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 origins = [...(data.value.origins || [])]
|
||||
if (origin.value) {
|
||||
origins.push(origin.value)
|
||||
}
|
||||
const variables = {
|
||||
range: this.range,
|
||||
origins: origins.length > 0 ? origins : null,
|
||||
includeOrigins: this.hasUser
|
||||
};
|
||||
findEvents(variables)
|
||||
.then(this.eventsFetched)
|
||||
.catch(this.eventsFailed);
|
||||
},
|
||||
eventsFetched(response) {
|
||||
if (response.errors) {
|
||||
throw new Error("Fetch failed");
|
||||
query({
|
||||
variables: {
|
||||
range: range.value,
|
||||
origins,
|
||||
includeOrigins: (isAuthenticated.value || false)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const [doToggleIgnoreBand, {loading: ignoringBand, error: errorIgnoreBand}] = useMutation(toggleIgnoreBand)
|
||||
const [doToggleIgnoreDanceHall, {loading: ignoringDanceHall, error: errorIgnoreDanceHall}] = useMutation(toggleIgnoreDanceHall)
|
||||
const [doToggleIgnoreCity, {loading: ignoringCity, error: errorIgnoreCity}] = useMutation(toggleIgnoreCity)
|
||||
const [doToggleIgnoreMunicipality, {loading: ignoringMunicipality, error: errorIgnoreMunicipality}] = useMutation(toggleIgnoreMunicipality)
|
||||
const [doToggleIgnoreState, {loading: ignoringState, error: errorIgnoreState}] = useMutation(toggleIgnoreState)
|
||||
|
||||
const toggleIgnoreSuccess = (name) => {
|
||||
return () => {
|
||||
fetchEvents();
|
||||
snackbar.value.color = 'success';
|
||||
snackbar.value.text = `${name} har dolts`;
|
||||
snackbar.value.active = true;
|
||||
}
|
||||
this.events = response.data.events;
|
||||
this.origins = response.data.origins || [];
|
||||
this.status = "ready";
|
||||
},
|
||||
eventsFailed() {
|
||||
this.status = "load-failed";
|
||||
},
|
||||
fetchUser() {
|
||||
this.user = auth.getUserInfo();
|
||||
},
|
||||
toggleIgnore(type, name) {
|
||||
}
|
||||
|
||||
const toggleIgnoreFailed = (name) => {
|
||||
return () => {
|
||||
snackbar.value.color = 'error';
|
||||
snackbar.value.text = `${name} kunde inte döljas`;
|
||||
snackbar.value.active = true;
|
||||
}
|
||||
}
|
||||
|
||||
const toggleIgnore = (type, name) => {
|
||||
switch (type) {
|
||||
case 'band':
|
||||
toggleIgnoreBand({name: name})
|
||||
.then(this.toggleIgnoreSuccess(name))
|
||||
.catch(this.toggleIgnoreFailed);
|
||||
doToggleIgnoreBand({ variables: { name: name } })
|
||||
.then(toggleIgnoreSuccess(name))
|
||||
.catch(toggleIgnoreFailed);
|
||||
break;
|
||||
case 'danceHall':
|
||||
toggleIgnoreDanceHall({name: name})
|
||||
.then(this.toggleIgnoreSuccess(name))
|
||||
.catch(this.toggleIgnoreFailed);
|
||||
doToggleIgnoreDanceHall({ variables: { name: name } })
|
||||
.then(toggleIgnoreSuccess(name))
|
||||
.catch(toggleIgnoreFailed);
|
||||
break;
|
||||
case 'city':
|
||||
toggleIgnoreCity({name: name})
|
||||
.then(this.toggleIgnoreSuccess(name))
|
||||
.catch(this.toggleIgnoreFailed);
|
||||
doToggleIgnoreCity({ variables: { name: name } })
|
||||
.then(toggleIgnoreSuccess(name))
|
||||
.catch(toggleIgnoreFailed);
|
||||
break;
|
||||
case 'municipality':
|
||||
toggleIgnoreMunicipality({name: name})
|
||||
.then(this.toggleIgnoreSuccess(name))
|
||||
.catch(this.toggleIgnoreFailed);
|
||||
doToggleIgnoreMunicipality({ variables: { name: name } })
|
||||
.then(toggleIgnoreSuccess(name))
|
||||
.catch(toggleIgnoreFailed);
|
||||
break;
|
||||
case 'state':
|
||||
toggleIgnoreState({name: name})
|
||||
.then(this.toggleIgnoreSuccess(name))
|
||||
.catch(this.toggleIgnoreFailed);
|
||||
doToggleIgnoreState({ variables: { name: name } })
|
||||
.then(toggleIgnoreSuccess(name))
|
||||
.catch(toggleIgnoreFailed);
|
||||
break;
|
||||
}
|
||||
},
|
||||
toggleIgnoreSuccess(name) {
|
||||
return () => {
|
||||
this.fetchEvents('refreshing');
|
||||
this.snackColor = 'success';
|
||||
this.snackText = `${name} har dolts`;
|
||||
this.snackbar = true;
|
||||
}
|
||||
},
|
||||
toggleIgnoreFailed(name) {
|
||||
return () => {
|
||||
this.snackColor = 'error';
|
||||
this.snackText = `${name} kunde inte döljas`;
|
||||
this.snackbar = true;
|
||||
}
|
||||
},
|
||||
saveOrigin(origin) {
|
||||
saveOrigin({origin: origin})
|
||||
.then(saved => {
|
||||
if (saved) {
|
||||
this.origins = [];
|
||||
this.origin = "";
|
||||
this.fetchEvents('refreshing');
|
||||
} else {
|
||||
this.snackColor = 'error';
|
||||
this.snackText = `${origin} kunde inte sparas`;
|
||||
this.snackbar = true;
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.snackColor = 'error';
|
||||
this.snackText = `${origin} kunde inte sparas`;
|
||||
this.snackbar = true;
|
||||
})
|
||||
},
|
||||
changeRange(range) {
|
||||
this.$router.push(`/?range=${range}`);
|
||||
},
|
||||
fetchAddress() {
|
||||
}
|
||||
|
||||
const [doSaveOrigin, {loading: savingOrigin, error: errorSaveOrigin}] = useMutation(saveOrigin)
|
||||
const [doFetchAddress, {data: address, loading: fetchingAddress, error: errorFetchingAddress}] = useLazyQuery(fetchAddress)
|
||||
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;
|
||||
this.fetchEvents('refreshing');
|
||||
doFetchAddress({variables: {latlng: pos.coords.latitude + "," + pos.coords.longitude}})
|
||||
.then(() => {
|
||||
origin.value = address.value.address;
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
const saveOriginFn = o => doSaveOrigin({variables: { origin: o }}).then(() => {
|
||||
origin.value = ''
|
||||
fetchEvents()
|
||||
})
|
||||
|
||||
return {
|
||||
authLoading,
|
||||
isAuthenticated,
|
||||
range,
|
||||
data,
|
||||
query: fetchEvents,
|
||||
submitting,
|
||||
ranges,
|
||||
snackbar,
|
||||
toggleIgnore,
|
||||
origin,
|
||||
fetchAddress: fetchAddressFn,
|
||||
saveOrigin: saveOriginFn
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@@ -2,14 +2,17 @@
|
||||
<v-flex xs12 sm6 md4 lg3>
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
<span v-html="title"/>
|
||||
<v-spacer/>
|
||||
<span v-html="model.length"/><span class="ml-1">st</span>
|
||||
<span v-text="$tc(title, model.length)"/>
|
||||
</v-card-title>
|
||||
<v-list>
|
||||
<v-list-item v-for="item in model" :key="item">
|
||||
<v-list-item-action v-on:click="toggleIgnore(type, item)">
|
||||
<v-icon>mdi-delete-outline</v-icon>
|
||||
<v-tooltip top slot="prepend">
|
||||
<template v-slot:activator="{ on }">
|
||||
<v-icon v-on="on">mdi-delete-outline</v-icon>
|
||||
</template>
|
||||
<span v-text="$t('filters.remove')"/>
|
||||
</v-tooltip>
|
||||
</v-list-item-action>
|
||||
<v-list-item-title v-html="item"/>
|
||||
</v-list-item>
|
||||
|
||||
@@ -1,12 +1,6 @@
|
||||
<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 || isRefreshing" 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-card>
|
||||
@@ -14,14 +8,14 @@
|
||||
fluid
|
||||
grid-list-md
|
||||
>
|
||||
<v-layout row wrap>
|
||||
<list :model="bands" title="Band" type="band" :toggleIgnore="toggleIgnore"/>
|
||||
<v-layout row wrap v-if="!loading && data">
|
||||
<list :model="data.bands" title="filters.band" type="band" :toggleIgnore="toggleIgnore" v-if="data.bands"/>
|
||||
<v-flex xs12 sm6 md4 lg3>
|
||||
<v-layout column align-content-start>
|
||||
<list :model="states" title="Län" type="state" :toggleIgnore="toggleIgnore"/>
|
||||
<list :model="municipalities" title="Kommun" type="municipality" :toggleIgnore="toggleIgnore"/>
|
||||
<list :model="cities" title="Stad" type="city" :toggleIgnore="toggleIgnore"/>
|
||||
<list :model="danceHalls" title="Danslokal" type="danceHall" :toggleIgnore="toggleIgnore"/>
|
||||
<v-layout column>
|
||||
<list :model="data.states" title="filters.state" type="state" :toggleIgnore="toggleIgnore" v-if="data.states"/>
|
||||
<list :model="data.municipalities" title="filters.municipality" type="municipality" :toggleIgnore="toggleIgnore" v-if="data.municipalities"/>
|
||||
<list :model="data.cities" title="filters.city" type="city" :toggleIgnore="toggleIgnore" v-if="data.cities"/>
|
||||
<list :model="data.danceHalls" title="filters.hall" type="danceHall" :toggleIgnore="toggleIgnore" v-if="data.danceHalls"/>
|
||||
</v-layout>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
@@ -30,6 +24,13 @@
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
<v-snackbar
|
||||
v-model="snackbar.active"
|
||||
:color="snackbar.color"
|
||||
:timeout="5000"
|
||||
>
|
||||
{{ snackbar.text }}
|
||||
</v-snackbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -44,110 +45,82 @@
|
||||
} from "~/utils/graph-client";
|
||||
|
||||
import List from "./List";
|
||||
import { 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 {
|
||||
components: {
|
||||
List
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
status: "loading",
|
||||
bands: [],
|
||||
danceHalls: [],
|
||||
cities: [],
|
||||
municipalities: [],
|
||||
states: [],
|
||||
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";
|
||||
},
|
||||
isRefreshing() {
|
||||
return this.status === "refreshing";
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$store.commit('setTitle', 'Filter');
|
||||
this.fetchFilters();
|
||||
},
|
||||
methods: {
|
||||
fetchFilters(status) {
|
||||
this.status = status || "loading";
|
||||
fetchFilters()
|
||||
.then(this.filtersFetched)
|
||||
.catch(this.filtersFailed);
|
||||
},
|
||||
filtersFetched(response) {
|
||||
if (response.errors) {
|
||||
throw new Error("Fetch failed");
|
||||
setup() {
|
||||
const { setTitle } = useMutations(['setTitle'])
|
||||
const { t } = useTranslation();
|
||||
setTitle(t('app.links.filters'))
|
||||
const { loading: authLoading, isAuthenticated } = useAuth()
|
||||
const {data, loading, error, refetch} = useQuery(fetchFilters)
|
||||
const snackbar = ref({ active: false, color: 'success', text: '' })
|
||||
const [doToggleIgnoreBand, {loading: ignoringBand, error: errorIgnoreBand}] = useMutation(toggleIgnoreBand)
|
||||
const [doToggleIgnoreDanceHall, {loading: ignoringDanceHall, error: errorIgnoreDanceHall}] = useMutation(toggleIgnoreDanceHall)
|
||||
const [doToggleIgnoreCity, {loading: ignoringCity, error: errorIgnoreCity}] = useMutation(toggleIgnoreCity)
|
||||
const [doToggleIgnoreMunicipality, {loading: ignoringMunicipality, error: errorIgnoreMunicipality}] = useMutation(toggleIgnoreMunicipality)
|
||||
const [doToggleIgnoreState, {loading: ignoringState, error: errorIgnoreState}] = useMutation(toggleIgnoreState)
|
||||
|
||||
const toggleIgnoreSuccess = (name) => {
|
||||
return () => {
|
||||
refetch.value();
|
||||
snackbar.value.color = 'success';
|
||||
snackbar.value.text = t('filters.success', { name });
|
||||
snackbar.value.active = true;
|
||||
}
|
||||
this.bands = response.data.bands;
|
||||
this.danceHalls = response.data.danceHalls;
|
||||
this.cities = response.data.cities;
|
||||
this.municipalities = response.data.municipalities;
|
||||
this.states = response.data.states;
|
||||
this.status = "ready";
|
||||
},
|
||||
filtersFailed() {
|
||||
this.status = "load-failed";
|
||||
},
|
||||
toggleIgnore(type, name) {
|
||||
}
|
||||
|
||||
const toggleIgnoreFailed = (name) => {
|
||||
return () => {
|
||||
snackbar.value.color = 'error';
|
||||
snackbar.value.text = t('filters.failure', { name });
|
||||
snackbar.value.active = true;
|
||||
}
|
||||
}
|
||||
|
||||
const toggleIgnore = (type, name) => {
|
||||
switch (type) {
|
||||
case 'band':
|
||||
toggleIgnoreBand({name: name})
|
||||
.then(this.toggleIgnoreSuccess(name))
|
||||
.catch(this.toggleIgnoreFailed);
|
||||
doToggleIgnoreBand({ variables: { name: name } })
|
||||
.then(toggleIgnoreSuccess(name))
|
||||
.catch(toggleIgnoreFailed);
|
||||
break;
|
||||
case 'danceHall':
|
||||
toggleIgnoreDanceHall({name: name})
|
||||
.then(this.toggleIgnoreSuccess(name))
|
||||
.catch(this.toggleIgnoreFailed);
|
||||
doToggleIgnoreDanceHall({ variables: { name: name } })
|
||||
.then(toggleIgnoreSuccess(name))
|
||||
.catch(toggleIgnoreFailed);
|
||||
break;
|
||||
case 'city':
|
||||
toggleIgnoreCity({name: name})
|
||||
.then(this.toggleIgnoreSuccess(name))
|
||||
.catch(this.toggleIgnoreFailed);
|
||||
doToggleIgnoreCity({ variables: { name: name } })
|
||||
.then(toggleIgnoreSuccess(name))
|
||||
.catch(toggleIgnoreFailed);
|
||||
break;
|
||||
case 'municipality':
|
||||
toggleIgnoreMunicipality({name: name})
|
||||
.then(this.toggleIgnoreSuccess(name))
|
||||
.catch(this.toggleIgnoreFailed);
|
||||
doToggleIgnoreMunicipality({ variables: { name: name } })
|
||||
.then(toggleIgnoreSuccess(name))
|
||||
.catch(toggleIgnoreFailed);
|
||||
break;
|
||||
case 'state':
|
||||
toggleIgnoreState({name: name})
|
||||
.then(this.toggleIgnoreSuccess(name))
|
||||
.catch(this.toggleIgnoreFailed);
|
||||
doToggleIgnoreState({ variables: { name: name } })
|
||||
.then(toggleIgnoreSuccess(name))
|
||||
.catch(toggleIgnoreFailed);
|
||||
break;
|
||||
}
|
||||
},
|
||||
toggleIgnoreSuccess(name) {
|
||||
return () => {
|
||||
this.fetchFilters('refreshing');
|
||||
this.snackColor = 'success';
|
||||
this.snackText = `${name} har tagits bort`;
|
||||
this.snackbar = true;
|
||||
}
|
||||
},
|
||||
toggleIgnoreFailed(name) {
|
||||
return () => {
|
||||
this.snackColor = 'error';
|
||||
this.snackText = `${name} kunde inte tas bort`;
|
||||
this.snackbar = true;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
isAuthenticated,
|
||||
loading,
|
||||
data,
|
||||
snackbar,
|
||||
toggleIgnore
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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