app/components/Layout/Parameters/ResidenceAreas.vue

<template>
  <LayoutContainer>
    <UiLoadingPanel v-if="pending" />
    <v-container v-else style="width: 500px;">
      <v-col cols="12">
        <v-row class="justify-center">
          <v-table class="w-100">
            <thead>
            <tr>
              <td>{{ $t('residenceAreas') }}</td>
              <td></td>
            </tr>
            </thead>
            <tbody>
            <tr v-if="residenceAreas.length > 0" 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>
            <tr v-else class="theme-neutral">
              <td><i>{{ $t('nothing_to_show')}}</i></td>
              <td></td>
            </tr>
            </tbody>
          </v-table>
        </v-row>
        <v-row class="justify-end">
          <v-btn
              :flat="true"
              prepend-icon="fa fa-plus"
              class="theme-primary mt-2"
              @click="goToCreatePage"
          >
            {{ $t('add') }}
          </v-btn>
        </v-row>
      </v-col>
    </v-container>
  </LayoutContainer>
</template>

<script setup lang="ts">
import { useEntityFetch } from '~/composables/data/useEntityFetch'
import ResidenceArea from '~/models/Billing/ResidenceArea'
import { useRepo } from 'pinia-orm'
import ResidenceAreasRepository from '~/stores/repositories/ResidenceAreasRepository'
import { useRouter } from 'vue-router'
import UrlUtils from "~/services/utils/urlUtils";
import EducationTiming from "~/models/Education/EducationTiming";
const residenceAreasRepo = useRepo(ResidenceAreasRepository)

const router = useRouter()
const { fetchCollection } = useEntityFetch()
const i18n = useI18n()

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">
// 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>