chore: migrate to composition API and auth0-spa
This commit is contained in:
@@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user