chore(deps): update dependency nuxt to v4
This commit is contained in:
Renovate
@@ -0,0 +1,240 @@
|
||||
<template>
|
||||
<div :key="isAuthenticated ? 'true' : 'false'">
|
||||
<v-container :key="range" fluid grid-list-md class="app-fade-in">
|
||||
<v-row v-if="!isAuthenticated" wrap>
|
||||
<v-col xs="12">
|
||||
<p><b v-text="t('events.login')" /></p>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row wrap>
|
||||
<v-col xs="12">
|
||||
<v-text-field
|
||||
v-model="origin"
|
||||
variant="underlined"
|
||||
hide-details
|
||||
:label="t('origins.origin')"
|
||||
:placeholder="t('origins.geolocation')"
|
||||
>
|
||||
<template #append>
|
||||
<v-tooltip top>
|
||||
<template #activator="{ props }">
|
||||
<v-icon
|
||||
icon='mdi-crosshairs-gps'
|
||||
v-bind="props"
|
||||
@click="fetchAddressFn()"
|
||||
/>
|
||||
</template>
|
||||
<span v-text="t('origins.fetchAddress')" />
|
||||
</v-tooltip>
|
||||
</template>
|
||||
<template #prepend>
|
||||
<v-tooltip v-if="isAuthenticated" top>
|
||||
<template #activator="{ props }">
|
||||
<v-icon
|
||||
icon='mdi-bookmark-plus-outline'
|
||||
:disabled="!origin"
|
||||
v-bind="props"
|
||||
@click="saveOriginFn(origin)"
|
||||
/>
|
||||
</template>
|
||||
<span v-text="t('origins.save')" />
|
||||
</v-tooltip>
|
||||
</template>
|
||||
</v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row wrap>
|
||||
<v-col>
|
||||
<v-btn-toggle
|
||||
v-if="smAndUp"
|
||||
v-model="state.range"
|
||||
mandatory
|
||||
>
|
||||
<v-btn v-for="r in ranges" :key="r.value" variant="outlined" :value="r.value">
|
||||
<span v-text="t(`events.range.${r.value}`)" />
|
||||
</v-btn>
|
||||
</v-btn-toggle>
|
||||
<v-select
|
||||
v-else
|
||||
v-model="state.range"
|
||||
variant="outlined"
|
||||
:items="ranges"
|
||||
item-title="name"
|
||||
item-value="value"
|
||||
hide-details
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row wrap>
|
||||
<v-col cols="12" sm="8">
|
||||
<v-text-field
|
||||
v-model="state.search"
|
||||
variant="underlined"
|
||||
append-outer-icon="mdi-magnify"
|
||||
:label="t('events.filter')"
|
||||
:placeholder="t('events.filter')"
|
||||
hide-details
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="4">
|
||||
<v-checkbox v-model="state.includeHidden" :label="t('events.includeHidden')" hide-details />
|
||||
</v-col>
|
||||
</v-row>
|
||||
<event-list
|
||||
:events="events"
|
||||
:has-user="isAuthenticated"
|
||||
:toggle-ignore="toggleIgnore"
|
||||
/>
|
||||
</v-container>
|
||||
<v-snackbar
|
||||
v-model="snackbar.active"
|
||||
:color="snackbar.color"
|
||||
:timeout="5000"
|
||||
>
|
||||
{{ snackbar.text }}
|
||||
</v-snackbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { useAuth0 } from '@auth0/auth0-vue'
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { useDisplay } from 'vuetify'
|
||||
|
||||
import { useI18n } from '#i18n'
|
||||
import { useState } from '~/store'
|
||||
import type { FindEventsQueryVariables } from '~~/graphql/generated/operations'
|
||||
import {
|
||||
useFetchAddressLazyQuery,
|
||||
useFindEventsQuery,
|
||||
useSaveOriginMutation,
|
||||
useToggleIgnoreBandMutation,
|
||||
useToggleIgnoreCityMutation,
|
||||
useToggleIgnoreDanceHallMutation,
|
||||
useToggleIgnoreMunicipalityMutation,
|
||||
useToggleIgnoreStateMutation,
|
||||
} from '~~/graphql/generated/operations'
|
||||
|
||||
import EventList from './event-list.vue'
|
||||
|
||||
const state = useState()
|
||||
const { smAndUp } = useDisplay()
|
||||
const range = computed(() => state.range)
|
||||
const { t } = useI18n()
|
||||
state.setTitle(t('app.links.events'))
|
||||
const { isAuthenticated } = useAuth0()
|
||||
const variables = ref<FindEventsQueryVariables>({
|
||||
range: state.range,
|
||||
includeOrigins: isAuthenticated.value || false,
|
||||
search: state.search,
|
||||
includeHidden: state.includeHidden,
|
||||
})
|
||||
const { result, refetch } = useFindEventsQuery(() => variables.value)
|
||||
watch([state, isAuthenticated], () => {
|
||||
variables.value.range = state.range
|
||||
variables.value.search = state.search
|
||||
variables.value.includeHidden = state.includeHidden
|
||||
variables.value.includeOrigins = isAuthenticated.value || false
|
||||
refetch(variables.value)
|
||||
})
|
||||
const events = computed(() => result.value?.events ?? [])
|
||||
const origins = computed(() => result.value?.origins ?? [])
|
||||
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 originsTemp = [...(origins.value || [])]
|
||||
if (origin.value) {
|
||||
originsTemp.push(origin.value)
|
||||
}
|
||||
variables.value = {
|
||||
...variables.value,
|
||||
range: state.range,
|
||||
origins: originsTemp,
|
||||
includeOrigins: isAuthenticated.value || false,
|
||||
}
|
||||
refetch(variables.value)
|
||||
}
|
||||
|
||||
const { mutate: doToggleIgnoreBand } = useToggleIgnoreBandMutation({})
|
||||
const { mutate: doToggleIgnoreDanceHall } = useToggleIgnoreDanceHallMutation({})
|
||||
const { mutate: doToggleIgnoreCity } = useToggleIgnoreCityMutation({})
|
||||
const { mutate: doToggleIgnoreMunicipality } = useToggleIgnoreMunicipalityMutation({})
|
||||
const { mutate: doToggleIgnoreState } = useToggleIgnoreStateMutation({})
|
||||
|
||||
const toggleIgnoreSuccess = (name: string) => {
|
||||
return () => {
|
||||
fetchEvents()
|
||||
snackbar.value.color = 'success'
|
||||
snackbar.value.text = `${name} har dolts`
|
||||
snackbar.value.active = true
|
||||
}
|
||||
}
|
||||
|
||||
const toggleIgnoreFailed = (name: string) => {
|
||||
return () => {
|
||||
snackbar.value.color = 'error'
|
||||
snackbar.value.text = `${name} kunde inte döljas`
|
||||
snackbar.value.active = true
|
||||
}
|
||||
}
|
||||
|
||||
const toggleIgnore = (type: string, name: string) => {
|
||||
switch (type) {
|
||||
case 'band':
|
||||
doToggleIgnoreBand({ name })
|
||||
.then(toggleIgnoreSuccess(name))
|
||||
.catch(toggleIgnoreFailed)
|
||||
break
|
||||
case 'danceHall':
|
||||
doToggleIgnoreDanceHall({ name })
|
||||
.then(toggleIgnoreSuccess(name))
|
||||
.catch(toggleIgnoreFailed)
|
||||
break
|
||||
case 'city':
|
||||
doToggleIgnoreCity({ name })
|
||||
.then(toggleIgnoreSuccess(name))
|
||||
.catch(toggleIgnoreFailed)
|
||||
break
|
||||
case 'municipality':
|
||||
doToggleIgnoreMunicipality({ name })
|
||||
.then(toggleIgnoreSuccess(name))
|
||||
.catch(toggleIgnoreFailed)
|
||||
break
|
||||
case 'state':
|
||||
doToggleIgnoreState({ name })
|
||||
.then(toggleIgnoreSuccess(name))
|
||||
.catch(toggleIgnoreFailed)
|
||||
break
|
||||
default:
|
||||
}
|
||||
}
|
||||
|
||||
const { mutate: doSaveOrigin } = useSaveOriginMutation({})
|
||||
const { refetch: doFetchAddress, load: loadFetchAddress } = useFetchAddressLazyQuery({ latlng: '' })
|
||||
const fetchAddressFn = () => {
|
||||
if (window.navigator) {
|
||||
window.navigator.geolocation.getCurrentPosition((pos) => {
|
||||
loadFetchAddress()
|
||||
doFetchAddress({
|
||||
latlng: `${pos.coords.latitude},${pos.coords.longitude}`,
|
||||
})?.then((result) => {
|
||||
origin.value = result.data.address
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
const saveOriginFn = (o: string) =>
|
||||
doSaveOrigin({ origin: o }).then(() => {
|
||||
origin.value = ''
|
||||
fetchEvents()
|
||||
})
|
||||
|
||||
</script>
|
||||
Reference in New Issue
Block a user