parameters : review structure of residence areas tab

components/Layout/Parameters/ResidenceAreas.vue

@@ -1,17 +1,55 @@
 <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>
+    <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>
 
@@ -21,24 +59,26 @@ 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 { data: residence_areas, pending } = fetchCollection(ResidenceArea)
+const { pending } = fetchCollection(ResidenceArea)
 
 /**
- * On récupère les Residence Area via le store 
+ * 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(() => {
+ const residenceAreas: ComputedRef<Array<ResidenceArea>> = computed(() => {
   return residenceAreasRepo.getResidenceAreas()
 })
 
 const goToEditPage = (id: number) => {
-  navigateTo(`/parameters/residence_areas/${id}`)
+  navigateTo(UrlUtils.join('/parameters/residence_areas', id))
 }
 
 const goToCreatePage = () => {
@@ -46,4 +86,10 @@ const goToCreatePage = () => {
 }
 </script>
 
-<style scoped lang="scss"></style>
+<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>

lang/fr.json

@@ -649,5 +649,7 @@
   "Europe/Zurich": "Europe/Zurich",
   "Europe/Paris": "Europe/Paris",
   "licenceQrCode": "QrCode pour la licence",
-  "education_timings_breadcrumbs": "Durée des cours"
+  "education_timings_breadcrumbs": "Durée des cours",
+  "create_a_new_residence_area": "Créer une nouvelle zone de résidence",
+  "residence_areas_breadcrumbs": "Zones de résidence"
 }

pages/parameters/residence_areas/[id].vue

@@ -16,6 +16,9 @@
         />
       </UiForm>
     </div>
+    <v-btn class="mr-12" @click="quit">
+      {{ $t('back') }}
+    </v-btn>
   </LayoutContainer>
 </template>
 
@@ -30,11 +33,10 @@ import { SUBMIT_TYPE } from '~/types/enum/enums'
 
 const i18n = useI18n()
 const { fetch } = useEntityFetch()
+const router = useRouter()
 const route = useRoute()
-const idValue = Array.isArray(route.params.id)
-  ? route.params.id[0]
-  : route.params.id
-const residenceID = ref(parseInt(idValue))
+
+const residenceId = ref(parseInt(route.params.id as string))
 
 const goBackRoute = { path: `/parameters`, query: { tab: 'residenceAreas' } }
 
@@ -46,11 +48,15 @@ const submitActions = computed(() => {
 
 const { data: residence_areas, pending } = fetch(
   ResidenceArea,
-  residenceID.value
+  residenceId.value
 )
 
 const rules = () => [
   (label: string | null) =>
     (label !== null && label.length > 0) || i18n.t('please_enter_a_value'),
 ]
+
+const quit = () => {
+  router.push(goBackRoute)
+}
 </script>

pages/parameters/residence_areas/index.vue

@@ -0,0 +1,10 @@
+<template>
+</template>
+
+<script setup lang="ts">
+/** Redirect to /parameters?tab=educationTimings */
+const router = useRouter()
+router.push(
+    { path: `/parameters`, query: { tab: 'residenceAreas' } }
+)
+</script>

pages/parameters/residence_areas/new.vue

@@ -2,7 +2,7 @@
   <LayoutContainer>
     <UiLoadingPanel v-if="pending" />
     <div v-else>
-      <h2>Créer Nouvelle Résidence Area</h2>
+      <h2>{{ $t('create_a_new_residence_area') }}</h2>
       <UiForm
         ref="form"
         :model="ResidenceArea"
@@ -10,16 +10,11 @@
         :submitActions="submitActions"
       >
         <v-container :fluid="true" class="container">
-          <v-row>
-            <v-col cols="12" sm="6">
-              <div>{{ $t('pleaseEnterYourNewSubdomain') }} :</div>
-            </v-col>
-          </v-row>
           <v-row>
             <v-col cols="12" sm="6">
               <UiInputText
                 v-model="residence_areas.label"
-                field="residence Areas"
+                field="label"
                 type="string"
                 :rules="rules()"
               />
@@ -27,6 +22,9 @@
           </v-row>
         </v-container>
       </UiForm>
+      <v-btn class="mr-12" @click="quit">
+        {{ $t('back') }}
+      </v-btn>
     </div>
   </LayoutContainer>
 </template>
@@ -42,12 +40,11 @@ import { useI18n } from 'vue-i18n'
 import { useEntityManager } from '~/composables/data/useEntityManager'
 
 const i18n = useI18n()
-
+const router = useRouter()
 const { em } = useEntityManager()
 
-const residence_areas: Ref<ResidenceArea> = ref(
-  em.newInstance(ResidenceArea) as ResidenceArea
-)
+//@ts-ignore
+const residence_areas: Ref<ResidenceArea> = reactive(em.newInstance(ResidenceArea))
 
 const goBackRoute = { path: `/parameters`, query: { tab: 'residenceAreas' } }
 
@@ -61,4 +58,8 @@ const rules = () => [
   (label: string | null) =>
     (label !== null && label.length > 0) || i18n.t('please_enter_a_value'),
 ]
+
+const quit = () => {
+  router.push(goBackRoute)
+}
 </script>