app/components/Ui/EventList.vue

<template>
  <div>
    <v-list height="420">
      <v-list-item v-for="event in events" :key="event.id" class="event-item">
        <template #prepend>
          <v-avatar color="grey-lighten-1">
            <UiImage
              :image-id="event.image"
              :width="50"
              :size="IMAGE_SIZE.SM"
            />
          </v-avatar>
        </template>

        <template #default>
          <div class="flex-grow-1" @click="$emit('edit', event.id)">
            <span class="text-subtitle-1">{{ event.name }}</span>
            <br />
            <span class="text-subtitle-2">{{
              date.format(event.datetimeStart, 'fullDateWithWeekday')
            }}</span>
          </div>
        </template>

        <template #append>
          <v-avatar
            class="edit-btn action-btn"
            @click="$emit('edit', event.id)"
          >
            <v-icon>fas fa-pencil</v-icon>
          </v-avatar>

          <UiButtonDelete :entity="event" class="delete-btn action-btn">
            <v-avatar>
              <v-icon>fas fa-trash</v-icon>
            </v-avatar>
          </UiButtonDelete>
        </template>
      </v-list-item>
    </v-list>

    <div
      v-if="events.length > 0"
      class="d-flex justify-space-between px-4 py-2 pagination mb-5"
    >
      <v-btn
        variant="flat"
        class="pagination-btn"
        :disabled="!pagination.first || !pagination.previous"
        @click="$emit('load', pagination.first)"
      >
        <v-avatar>
          <v-icon>fas fa-angles-left</v-icon>
        </v-avatar>
      </v-btn>
      <v-btn
        variant="flat"
        class="pagination-btn"
        :disabled="!pagination.previous"
        @click="$emit('load', pagination.previous)"
      >
        <v-avatar>
          <v-icon>fas fa-angle-left</v-icon>
        </v-avatar>
      </v-btn>
      <v-btn
        variant="flat"
        class="pagination-btn"
        :disabled="!pagination.next"
        @click="$emit('load', pagination.next)"
      >
        <v-avatar>
          <v-icon>fas fa-angle-right</v-icon>
        </v-avatar>
      </v-btn>
      <v-btn
        variant="flat"
        class="pagination-btn"
        :disabled="pagination.last == 1"
        @click="$emit('load', pagination.last)"
      >
        <v-avatar>
          <v-icon>fas fa-angles-right</v-icon>
        </v-avatar>
      </v-btn>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits } from 'vue'
import type { Collection } from 'pinia-orm'
import type Event from '~/models/Freemium/Event'
import type { Pagination } from '~/types/data'
import { useDate } from 'vuetify'
import { IMAGE_SIZE } from '~/types/enum/enums'

const props = defineProps<{
  events: Collection<Event>
  pagination: Pagination
}>()

const emits = defineEmits(['edit', 'load'])
const date = useDate()
</script>

<style scoped lang="scss">
.event-item {
  margin-top: 20px;
  color: rgb(var(--v-theme-on-neutral));
  .text-subtitle-2 {
    text-transform: capitalize !important;
    color: rgb(var(--v-theme-on-neutral--sub));
  }
}
.pagination-btn[disabled] {
  opacity: 0.3;
}
.edit-btn {
  cursor: pointer;
}
.action-btn:hover {
  background-color: rgb(var(--v-theme-on-neutral-soft--sub));
  border-radius: 20px;
}
:deep(.v-list-item):hover {
  cursor: pointer;
  background-color: rgb(var(--v-theme-neutral-soft));
}
</style>