app/components/Layout/Parameters/ResidenceAreas.vue

<template>
  <LayoutContainer>
    <UiLoadingPanel v-if="pending" />
    <div v-else>
      <!-- Afficher la liste des résidences -->
      <ul>
        <li v-for="area in allResidenceArea" :key="area.id">
          {{ area.label }}
          <UiButtonDelete :model="ResidenceArea" :entity="area" />
          <span class="edit-icon" @click="goToEditPage(area.id)">✏️</span>
        </li>
      </ul>
    </div>
    <button @click="goToCreatePage">Nouveau</button>
  </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'
const residenceAreasRepo = useRepo(ResidenceAreasRepository)

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

const { data: residence_areas, 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 allResidenceArea: ComputedRef<Array<ResidenceArea>> = computed(() => {
  return residenceAreasRepo.getResidenceAreas()
})

const goToEditPage = (id: number) => {
  navigateTo(`/parameters/residence_areas/${id}`)
}

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

<style scoped lang="scss"></style>