frames/pages/events/index.vue

<!-- Search for events -->

<template>
  <LayoutContainer>
    <!-- Header -->
    <v-row>
      <v-layout>
        <h2 v-if="!hideTitle">
          {{ $t("events") }}
        </h2>
      </v-layout>
    </v-row>

    <!-- Search form -->
    <v-row>
      <v-form method="get" class="mt-8 w100">
        <v-container>
          <v-row>
            <v-col cols="12" md="6" class="py-2 px-1">
              <UiSearchDateRangePicker
                ref="dateSearch"
                v-model="dateRangeFilter"
                :start-label="$t('start_date')"
                :end-label="$t('end_date')"
                preset-label=""
                separator-label="~"
                :presets="dateRangePresets"
                :min="dateRangeMin"
                locale="fr-FR"
                no-title
                display-format="dd/MM/yyyy"
                :inputProps="{outlined: true}"
                :menuProps="{offsetY: true, closeOnContentClick: false}"
                :actionLabels="{apply: $t('apply'), cancel: $t('cancel'), reset: $t('reset')}"
              >
              </UiSearchDateRangePicker>
            </v-col>

            <v-col cols="12" md="6" class="py-2 px-1">
              <UiSearchAddress
                ref="addressSearch"
                type="municipality"
                @change="locationFilterChanged"
              />
            </v-col>

            <v-col cols="12" md="6" class="py-2 px-1">
              <v-text-field
                v-model="textFilter"
                type="text"
                outlined
                clearable
                hide-details
                append-icon="mdi-magnify"
                :label="$t('what') + ' ?'"
                @click:append="search"
                @keydown.enter="search"
              />
            </v-col>
          </v-row>

          <v-row>
            <v-col cols="2" class="py-2 px-1">
              <v-btn class="h100" @click="reinitializeFilters">
                {{ $t('reinitialize') }}
              </v-btn>
            </v-col>
            <v-col cols="2" class="py-2 px-1 d-flex justify-end">
              <v-btn class="h100" @click="search()">
                {{ $t('search') }}
              </v-btn>
            </v-col>
          </v-row>
        </v-container>
      </v-form>
    </v-row>

    <v-row>
      <!-- loading skeleton -->
      <v-container v-if="$fetchState.pending">
        <v-row v-for="i in 4" :key="i" justify="space-between" class="mt-1 mb-3">
          <v-col v-for="j in 4" :key="j" cols="3" :md="6" class="py-2 px-1">
            <v-skeleton-loader type="card-avatar, text, button" :loading="true" />
          </v-col>
        </v-row>
      </v-container>

      <!-- Results -->
      <v-data-iterator
        v-else
        :items="events"
        :page.sync="page"
        :items-per-page="itemsPerPage"
        sort-by="name"
        hide-default-footer
        no-data-text=""
      >
        <template #header>
          <i class="results-count">{{ totalRecords }} {{ $t('results') }}</i>
        </template>
        <template #default="props">
          <v-row justify="space-between" class="mt-3 mb-3">
            <v-col
              v-for="event in props.items"
              :key="event.uuid"
              cols="3"
              sm="6"
              :lg="3"
              class="py-2 px-1"
            >
              <v-card
                elevation="1"
                outlined
                class="event-card pa-0 d-flex flex-column"
              >
                <div class="d-flex justify-center max-w100">
                  <v-img
                    v-if="event.imageId"
                    :src="'https://api.opentalent.fr/app.php/_internal/secure/files/' + event.imageId"
                    alt="poster"
                    height="320"
                    width="100%"
                    max-height="100%"
                    :contain="true"
                    style="margin: 12px;"
                  />
                  <div v-else style="height: 344px; width: 264px" />
                </div>

                <div class="d-flex flex-column flex-grow-1">
                  <v-card-title class="title">
                    <nuxt-link :to="{path: '/events/' + event.uuid, query: { theme: theme }}">
                      {{ event.name }}
                    </nuxt-link>
                  </v-card-title>

                  <v-card-text class="infos">
                    <table>
                      <tr v-if="event.datetimeStart">
                        <td>
                          <font-awesome-icon :icon="['fas', 'calendar']" class="icon mr-2" />
                        </td>
                        <td>
                          <span>
                            {{ formatDateIntervalFor(new Date(event.datetimeStart), new Date(event.datetimeEnd)) }}
                          </span>
                        </td>
                      </tr>

                      <tr v-if="event.address.addressCity">
                        <td>
                          <font-awesome-icon class="icon" :icon="['fas', 'map-marker-alt']" />
                        </td>
                        <td>
                          <span v-if="event.address.streetAddress" style="white-space: pre-line;">{{ event.address.streetAddress }}<br></span>
                          <span v-if="event.address.postalCode" class="postalCode">{{ event.address.postalCode }} </span>
                          <span>{{ event.address.addressCity }}</span>
                        </td>
                      </tr>
                    </table>
                  </v-card-text>
                </div>

                <v-card-actions class="align-self-end">
                  <v-btn
                    class="see"
                    :to="{path: '/event/' + event.uuid, query: { theme: theme, hideTitle: hideTitle }}"
                    nuxt
                  >
                    <span style="margin-right: 6px;">{{ $t("see_more") }}</span>
                    <font-awesome-icon :icon="['fa', 'caret-right']" />
                  </v-btn>
                </v-card-actions>
              </v-card>
            </v-col>
          </v-row>
        </template>
        <template #footer>
          <v-pagination
            v-model="page"
            :length="pagesCount"
            total-visible="9"
            color="primary"
            @input="pageUpdated"
          />
        </template>
      </v-data-iterator>
    </v-row>
  </LayoutContainer>
</template>

<script lang="ts">
import Vue from 'vue'
import EventsProvider from "~/services/data/EventsProvider"
import {today, todayIso, formatIso} from '@/services/utils/date'
import locale from 'date-fns/locale/fr'

const defaultDateRange: DateRange = { start: '', end: '' }

export default Vue.extend({
  data () {
    return {
      theme: this.$route.query.theme ?? 'orange',
      hideTitle: this.$route.query.hideTitle === 'true',
      events: [] as Array<PublicEvent>,
      page: 1,
      itemsPerPage: 16,
      textFilter: null as string | null,
      locationFilter: null as Coordinates | null,
      dateRangeFilter: defaultDateRange,
      totalRecords: 0 as number,
      pagesCount: 1 as number | null,
    }
  },
  async fetch () {
    await new EventsProvider(this.$axios).getBy(
      this.textFilter,
      null,
      this.dateRangeFilter.start,
      this.dateRangeFilter.end,
      this.locationFilter,
      this.page,
      this.itemsPerPage
    ).then(
      (collection: HydraCollection<PublicEvent>) => {
        this.events = collection.items
        this.totalRecords = collection.totalItems
        this.page = collection.page ?? 1
        this.pagesCount = collection.lastPage ?? 1

        console.log(this.events)
      })
  },
  computed: {
    dateRangeMin(): string {
      return todayIso()
    },
    dateRangePresets(): Array<DateRangePreset> {
      // Today
      const today_preset: DateRangePreset = {
        label: this.$t('today').toString(),
        range: {start: todayIso(), end: todayIso()}
      }

      // Cette semaine
      const week_preset: DateRangePreset = {
        label: this.$t('next_week').toString(),
        range: {start: todayIso(), end: formatIso(this.$dateFns.addDays(today(), 7))}
      }

      // Ce week-end
      const sunday: Date = this.$dateFns.nextSunday(today())
      const weekend_preset: DateRangePreset = {
        label: this.$t('next_weekend').toString(),
        range: {start: formatIso(this.$dateFns.addDays(sunday, -2)), end: formatIso(sunday)}
      }

      // Ce mois
      const month_preset: DateRangePreset = {
        label: this.$t('next_month').toString(),
        range: {start: todayIso(), end: formatIso(this.$dateFns.addMonths(today(), 1))}
      }

      return [today_preset, week_preset, weekend_preset, month_preset]
    }
  },
  methods: {
    textFilterChanged (newVal: string) {
      this.textFilter = newVal
    },
    locationFilterChanged (newVal: Coordinates) {
      this.locationFilter = newVal
      this.search()
    },
    dateRangeFilterChanged (newVal: DateRange) {
      this.dateRangeFilter = newVal
      this.search()
    },
    reinitializeFilters (): void {
      this.textFilter = null
      this.locationFilter = null
      this.dateRangeFilter = defaultDateRange
      const addressSearch = this.$refs.addressSearch as any
      addressSearch.clear()
      this.search()
    },
    pageUpdated (page: number): void {
      this.page = page
      this.search()
    },
    /**
     * Update the filteredEvents array
     */
    search (): void {
      this.$fetch()
    },
    /**
     * Enhanced filter for v-autocomplete components
     *
     * @param _
     * @param queryText
     * @param itemText
     */
    enhancedAutocompleteFilter (_: any, queryText: string, itemText: string): boolean {
      return normalize(itemText).includes(normalize(queryText))
    },
    formatDate(date: Date, short = true): string {
      return short ? this.$dateFns.format(date, 'dd/MM/yyyy') : this.$dateFns.format(date, 'dd MMM yyyy', {locale: locale})
    },
    formatTime(date: Date): string {
      return this.$dateFns.format(date, 'HH:mm')
    },
    formatDateTime(date: Date): string {
      return this.formatDate(date) + ' ' + this.$t('on_hour') + ' ' + this.formatTime(date)
    },
    formatDateIntervalFor(dateStart: Date | null = null, dateEnd: Date | null = null): string {
      if (dateStart === null && dateEnd !== null)
      {
        return this.formatDateTime(dateEnd)
      }
      else if (dateEnd === null && dateStart !== null) {
        return this.formatDateTime(dateStart)
      }
      else if (dateStart !== null && dateEnd !== null) {
        if (dateStart === dateEnd) {
          return this.formatDateTime(dateStart)
        }
        else if (this.$dateFns.isSameDay(dateStart, dateEnd)) {
          return this.$t('on_day') + ' ' + this.formatDate(dateStart, false) + ', ' +
            this.$t('from_hour') + ' ' + this.formatTime(dateStart) + ' ' + this.$t('to_hour') + ' ' + this.formatTime(dateEnd)
        }
        else {
          return this.$t('from_day') + ' ' + this.formatDateTime(dateStart) + ' ' + this.$t('to_day') + ' ' + this.formatDateTime(dateEnd)
        }
      }
      return ""
    }
  }
})
</script>

<style scoped lang="scss">
@import 'assets/style/variables.scss';

h2 {
  color: var(--v-primary-base);
}

.event-card {
  height: 100%;
  color: #666666;
}

.infos .col {
  padding: 6px 12px;
}

.infos td {
  padding: 4px;
  vertical-align: top;
}
.infos td:first-child {
  padding-top: 6px;
  text-align: center;
}

.title {
  word-break: normal;
  color: var(--v-primary-base);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6rem;
}

.title a {
  text-decoration: none;
}

.icon {
  color: var(--v-primary-base);
}

.results-count {
  font-size: .8em;
  color: #666;
}
</style>