argoyle
348e0fa045
Replace deprecated V2 props that were being silently ignored: - v-layout → v-row, grid-list-md removed, xs → cols on v-col - v-tooltip top → location="top", v-list dense → density="compact" - v-app-bar app/scroll-off-screen → scroll-behavior="hide" - append-outer-icon → append-icon, remove primary-title - headline class → text-h6, remove wrap from v-row Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
136 lines
3.9 KiB
Vue
136 lines
3.9 KiB
Vue
<template>
|
|
<v-card flat variant="outlined" rounded="xl">
|
|
<v-card-title v-if="event.band">
|
|
<h3 class="text-h6 mb-0">
|
|
<v-icon
|
|
v-if="hasUser"
|
|
class="ml-1 mr-1 text-medium-emphasis"
|
|
size="small"
|
|
:title="t('events.hide')"
|
|
icon='mdi-eye-off'
|
|
@click="toggleIgnore('band', event.band.name)"
|
|
/>
|
|
{{ event.band.name }}
|
|
</h3>
|
|
</v-card-title>
|
|
<v-card-text>
|
|
<v-row dense>
|
|
<v-col
|
|
cols="12"
|
|
sm="6"
|
|
>
|
|
<strong class="mr-1" v-text="t('events.date')" />{{
|
|
event.date
|
|
}}
|
|
({{ weekday }} {{ daysUntil }})
|
|
</v-col>
|
|
<v-col v-if="event.time" cols="12" sm="6">
|
|
<strong class="mr-1" v-text="t('events.time')" />{{
|
|
event.time
|
|
}}
|
|
</v-col>
|
|
</v-row>
|
|
<v-row v-if="event.danceHall" dense>
|
|
<v-col
|
|
cols="12"
|
|
sm="6"
|
|
>
|
|
<strong class="mr-1" v-text="t('events.hall')" />
|
|
<v-icon
|
|
v-if="hasUser"
|
|
class="ml-1 mr-1 text-medium-emphasis"
|
|
size="small"
|
|
:title="t('events.hide')"
|
|
icon='mdi-eye-off'
|
|
@click="toggleIgnore('danceHall', event.danceHall.name)"
|
|
/>
|
|
{{ event.danceHall.name }}
|
|
</v-col>
|
|
<v-col
|
|
cols="12"
|
|
sm="6"
|
|
>
|
|
<strong class="mr-1" v-text="t('events.city')" />
|
|
<v-icon
|
|
v-if="hasUser"
|
|
class="ml-1 mr-1 text-medium-emphasis"
|
|
size="small"
|
|
:title="t('events.hide')"
|
|
icon='mdi-eye-off'
|
|
@click="toggleIgnore('city', event.danceHall.city)"
|
|
/>
|
|
{{ event.danceHall.city }}
|
|
</v-col>
|
|
<v-col
|
|
cols="12"
|
|
sm="6"
|
|
>
|
|
<strong class="mr-1" v-text="t('events.municipality')" />
|
|
<v-icon
|
|
v-if="hasUser"
|
|
class="ml-1 mr-1 text-medium-emphasis"
|
|
size="small"
|
|
:title="t('events.hide')"
|
|
icon='mdi-eye-off'
|
|
@click="
|
|
toggleIgnore('municipality', event.danceHall.municipality)
|
|
"
|
|
/>
|
|
{{ event.danceHall.municipality }}
|
|
</v-col>
|
|
<v-col
|
|
cols="12"
|
|
sm="6"
|
|
>
|
|
<strong class="mr-1" v-text="t('events.state')" />
|
|
<v-icon
|
|
v-if="hasUser"
|
|
class="ml-1 mr-1 text-medium-emphasis"
|
|
size="small"
|
|
:title="t('events.hide')"
|
|
icon='mdi-eye-off'
|
|
@click="toggleIgnore('state', event.danceHall.state)"
|
|
/>
|
|
{{ event.danceHall.state }}
|
|
</v-col>
|
|
</v-row>
|
|
<distance-display v-for="distance in event.distances" :key="distance.origin" :distance="distance" />
|
|
</v-card-text>
|
|
</v-card>
|
|
</template>
|
|
|
|
<script setup lang='ts'>
|
|
|
|
import { format, formatDistanceToNow, parseISO } from 'date-fns'
|
|
import { enGB, sv } from 'date-fns/locale'
|
|
import type { PropType } from 'vue'
|
|
import { computed } from 'vue'
|
|
|
|
import { useI18n } from '#i18n'
|
|
import DistanceDisplay from '~/components/pages/events/event-distance.vue'
|
|
import type { Event } from '~~/graphql/generated/operations'
|
|
|
|
const props = defineProps({
|
|
event: {
|
|
type: Object as PropType<Event>,
|
|
required: true,
|
|
},
|
|
hasUser: {
|
|
type: Boolean,
|
|
required: true,
|
|
},
|
|
toggleIgnore: {
|
|
type: Function,
|
|
required: true,
|
|
},
|
|
})
|
|
const { t, locale: currentLocale } = useI18n()
|
|
const locale = computed(() => (currentLocale.value ?? 'sv') === 'en' ? enGB : sv)
|
|
const time = computed(() => (props.event.time || '').split('-')[0].replace('.', ':'))
|
|
const weekday = computed(() => format(parseISO(props.event.date), 'EEEE', { locale: locale.value }))
|
|
const daysUntil = computed(() => formatDistanceToNow(parseISO(`${props.event.date}T${time.value}`), {
|
|
addSuffix: true,
|
|
locale: locale.value,
|
|
}))
|
|
</script>
|