dancefinder-app/app/components/pages/events/event-card.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>