update structure of the education timings tab

components/Layout/Parameters/EducationTimings.vue

@@ -1,17 +1,55 @@
 <template>
   <LayoutContainer>
     <UiLoadingPanel v-if="pending" />
-    <div v-else>
-      <ul>
-        <li v-for="timing in allTimings" :key="timing.id">
-          {{ timing.timing }}
-
-          <UiButtonDelete :model="EducationTiming" :entity="timing" />
-          <span class="edit-icon" @click="goToEditPage(timing.id)">✏️</span>
-        </li>
-      </ul>
-    </div>
-    <button @click="goToCreatePage">Nouveau</button>
+    <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('educationTimings') }}</td>
+                <td></td>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-if="educationTimings.length > 0" v-for="timing in educationTimings" :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
+                      :model="EducationTiming"
+                      :entity="timing"
+                      :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>
 
@@ -20,27 +58,43 @@ import { useEntityFetch } from '~/composables/data/useEntityFetch'
 import EducationTiming from '~/models/Education/EducationTiming'
 import { useRepo } from 'pinia-orm'
 import EducationTimingsRepository from '~/stores/repositories/EducationTimingsRepository'
+import {ComputedRef} from "vue";
+import {useOrganizationProfileStore} from "~/stores/organizationProfile";
+import UrlUtils from "~/services/utils/urlUtils";
 
-const { fetchCollection } = useEntityFetch()
+const organizationProfile = useOrganizationProfileStore()
 
-const { data: educationTimings, pending } = fetchCollection(EducationTiming)
+if (organizationProfile.parametersId === null) {
+  throw new Error('Missing organization parameters id')
+}
+
+const { fetch, fetchCollection } = useEntityFetch()
+
+const { pending } = fetchCollection(EducationTiming)
 
 const educationTimingRepo = useRepo(EducationTimingsRepository)
 
 /**
- * On récupère les timings via le store 
+ * On récupère les timings via le store
  * (sans ça, les mises à jour SSE ne seront pas prises en compte)
  */
-const allTimings: ComputedRef<Array<EducationTiming>> = computed(() => {
+const educationTimings: ComputedRef<Array<EducationTiming>> = computed(() => {
   return educationTimingRepo.getEducationTimings()
 })
 
 const goToEditPage = (id: number) => {
-  navigateTo(`/parameters/education_timings/${id}`)
+  navigateTo(UrlUtils.join('/parameters/education_timings', id))
 }
 
 const goToCreatePage = () => {
-  navigateTo(`/parameters/education_timings/new`)
+  navigateTo('/parameters/education_timings/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>

components/Ui/Button/Delete.vue

@@ -4,8 +4,8 @@ Bouton Delete avec modale de confirmation de la suppression
 
 <template>
   <main>
-    <v-btn :icon="true" @click="alertDeleteItem()">
-      <v-icon>mdi-delete</v-icon>
+    <v-btn :icon="true" :flat="flat" @click="alertDeleteItem()">
+      <v-icon>fas fa-trash</v-icon>
     </v-btn>
 
     <LazyLayoutDialog
@@ -45,6 +45,11 @@ const props = defineProps({
     entity: {
       type: Object as () => ApiResource,
       required: true
+    },
+    flat: {
+      type: Boolean,
+      required: false,
+      default: false
     }
 })
 
@@ -54,7 +59,7 @@ const { em } = useEntityManager()
 
 const deleteItem = async () => {
   try {
-    await em.delete(props.model, props.entity)
+    await em.delete(props.model.value, props.entity)
     usePageStore().addAlert(TYPE_ALERT.SUCCESS, ['deleteSuccess'])
   } catch (error: any) {
     usePageStore().addAlert(TYPE_ALERT.ALERT, [error.message])

models/Education/EducationTiming.ts

@@ -10,7 +10,7 @@ export default class EducationTiming extends ApiModel {
   static entity = 'education_timings'
 
   @Uid()
-  declare id: number | string | null
+  declare id: number | string
 
   @Num(null)
   declare timing: number