app/pages/parameters/residence_areas/index.vue

<template>
  <LayoutContainer>
    <UiLoadingPanel v-if="pending" />
    <div v-else>
      <v-table>
        <thead>
          <tr>
            <td>{{ $t('residenceAreas') }}</td>
            <td></td>
          </tr>
        </thead>
        <tbody v-if="residenceAreas.length > 0">
          <tr v-for="residenceArea in residenceAreas" :key="residenceArea.id">
            <td class="cycle-editable-cell">
              {{ residenceArea.label }}
            </td>
            <td class="d-flex flex-row">
              <v-btn
                :flat="true"
                icon="fa fa-pen"
                class="cycle-edit-icon mr-3"
                @click="goToEditPage(residenceArea.id as number)"
              />
              <UiButtonDelete
                :model="ResidenceArea"
                :entity="residenceArea"
                :flat="true"
                class="cycle-edit-icon"
              />
            </td>
          </tr>
        </tbody>
        <tbody v-else>
          <tr class="theme-neutral">
            <td>
              <i>{{ $t('nothing_to_show') }}</i>
            </td>
            <td></td>
          </tr>
        </tbody>
      </v-table>

      <v-btn
        :flat="true"
        prepend-icon="fa fa-plus"
        class="theme-primary mt-4"
        @click="goToCreatePage"
      >
        {{ $t('add') }}
      </v-btn>
    </div>
  </LayoutContainer>
</template>

<script setup lang="ts">
import { useRepo } from 'pinia-orm'
import type { ComputedRef } from 'vue'
import { useEntityFetch } from '~/composables/data/useEntityFetch'
import ResidenceArea from '~/models/Billing/ResidenceArea'
import ResidenceAreasRepository from '~/stores/repositories/ResidenceAreasRepository'
import UrlUtils from '~/services/utils/urlUtils'

const residenceAreasRepo = useRepo(ResidenceAreasRepository)

const { fetchCollection } = useEntityFetch()

const { pending } = fetchCollection(ResidenceArea)

/**
 * On récupère les Residence Area via le store
 * (sans ça, les mises à jour SSE ne seront pas prises en compte)
 */
const residenceAreas: ComputedRef<Array<ResidenceArea>> = computed(() => {
  return residenceAreasRepo.getResidenceAreas()
})

const goToEditPage = (id: number) => {
  navigateTo(UrlUtils.join('/parameters/residence_areas', id))
}

const goToCreatePage = () => {
  navigateTo(`/parameters/residence_areas/new`)
}
</script>

<style scoped lang="scss">
.v-table {
  width: 100%;
  max-width: 800px;
}

// TODO: voir à factoriser ces styles, ptêt en faisant un component de ces boutons?
:deep(.cycle-edit-icon .v-icon) {
  color: rgb(var(--v-theme-primary));
  font-size: 18px;
}
</style>