replace ApiModel parameters table by new ParametersTable component

components/Layout/Parameters/Table.vue

@@ -10,7 +10,7 @@ A data table for the parameters page
           <td v-for="col in columns">
             {{ col.label }}
           </td>
-          <td>{{ $t('actions') }}</td>
+          <td>{{ i18n.t('actions') }}</td>
         </tr>
       </thead>
       <tbody v-if="items">
@@ -44,7 +44,7 @@ A data table for the parameters page
       <tbody v-else>
         <tr class="theme-neutral">
           <td>
-            <i>{{ $t('nothing_to_show') }}</i>
+            <i>{{ i18n.t('nothing_to_show') }}</i>
           </td>
           <td></td>
         </tr>
@@ -57,7 +57,7 @@ A data table for the parameters page
         class="theme-primary mt-4"
         @click="goToCreatePage"
       >
-        {{ $t('add') }}
+        {{ i18n.t('add') }}
       </v-btn>
     </div>
   </div>

pages/parameters/education_timings/index.vue

@@ -1,60 +1,15 @@
 <template>
   <LayoutContainer>
-    <UiLoadingPanel v-if="pending" />
-    <div v-else>
-      <v-table>
-        <thead>
-          <tr>
-            <td>{{ $t('educationTimings') }}</td>
-            <td>{{ $t('actions')}}</td>
-          </tr>
-        </thead>
-        <tbody v-if="educationTimings!.items.length > 0">
-          <tr v-for="timing in educationTimings!.items" :key="timing.id">
-            <td class="cycle-editable-cell">
-              {{ timing.timing }}
-            </td>
-            <td class="d-flex flex-row">
-              <v-btn
-                :flat="true"
-                icon="fa fa-pen"
-                class="cycle-edit-icon mr-3"
-                @click="goToEditPage(timing.id as number)"
-              />
-              <UiButtonDelete
-                :entity="timing"
-                :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>
+    <LayoutParametersTable
+      :model="EducationTiming"
+      :columns-definitions="[{ property: 'timing' }]"
+    />
   </LayoutContainer>
 </template>
 
 <script setup lang="ts">
-import { useEntityFetch } from '~/composables/data/useEntityFetch'
 import EducationTiming from '~/models/Education/EducationTiming'
 import { useOrganizationProfileStore } from '~/stores/organizationProfile'
-import UrlUtils from '~/services/utils/urlUtils'
 
 definePageMeta({
   name: 'parameters_education_timings_page',
@@ -65,29 +20,7 @@ const organizationProfile = useOrganizationProfileStore()
 if (organizationProfile.parametersId === null) {
   throw new Error('Missing organization parameters id')
 }
-
-const { fetchCollection } = useEntityFetch()
-
-const { data: educationTimings, pending } = fetchCollection(EducationTiming)
-
-const goToEditPage = (id: number) => {
-  navigateTo(UrlUtils.join('/parameters/education_timings', id))
-}
-
-const goToCreatePage = () => {
-  navigateTo('/parameters/education_timings/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>

pages/parameters/residence_areas/index.vue

@@ -1,90 +1,19 @@
 <template>
   <LayoutContainer>
-    <UiLoadingPanel v-if="pending" />
-    <div v-else>
-      <v-table>
-        <thead>
-          <tr>
-            <td>{{ $t('residenceAreas') }}</td>
-            <td>{{$t('actions')}}</td>
-          </tr>
-        </thead>
-        <tbody v-if="residenceAreas!.items.length > 0">
-          <tr
-            v-for="residenceArea in residenceAreas!.items"
-            :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
-                :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>
+    <LayoutParametersTable
+      :model="ResidenceArea"
+      :columns-definitions="[{ property: 'label' }]"
+    />
   </LayoutContainer>
 </template>
 
 <script setup lang="ts">
-import { useEntityFetch } from '~/composables/data/useEntityFetch'
 import ResidenceArea from '~/models/Billing/ResidenceArea'
-import UrlUtils from '~/services/utils/urlUtils'
 
 definePageMeta({
   name: 'parameters_residence_areas_page',
 })
-
-const { fetchCollection } = useEntityFetch()
-
-const { data: residenceAreas, pending } = fetchCollection(ResidenceArea)
-
-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>