various parameters page style improvements

components/Layout/Parameters/EntityTable.vue

@@ -7,6 +7,7 @@ A data table for the parameters page
     <div v-else>
       <LayoutParametersTable
         :items="items"
+        :title="title"
         :columns-definitions="columns"
         :actions="actions"
         :actions-route="actionsRoute"
@@ -42,6 +43,12 @@ const props = defineProps({
     type: Object as PropType<typeof ApiResource>,
     required: true,
   },
+  /** Titre du tableau */
+  title: {
+    type: String,
+    required: false,
+    default: null
+  },
   /**
    * If provided, define the columns to show.
    * Else, all the entity's props are shown.

components/Layout/Parameters/Table.vue

@@ -3,6 +3,24 @@ A data table for the parameters page
 -->
 <template>
   <div class="container">
+    <div class="d-flex flex-row mb-2">
+      <h4 v-if="title" class="align-self-center">
+        {{ title }}
+      </h4>
+      <div class="flex-grow-1" />
+
+      <v-btn
+        prepend-icon="fa fa-plus"
+        class="theme-neutral"
+        @click="emit('addClicked')"
+      >
+        {{ i18n.t('add') }}
+      </v-btn>
+    </div>
+    <div class="d-flex justify-end" v-if="actions.includes(TABLE_ACTION.ADD)">
+
+    </div>
+
     <v-table>
       <thead>
         <tr>
@@ -52,16 +70,6 @@ A data table for the parameters page
         </tr>
       </tbody>
     </v-table>
-    <div class="d-flex justify-end" v-if="actions.includes(TABLE_ACTION.ADD)">
-      <v-btn
-        :flat="true"
-        prepend-icon="fa fa-plus"
-        class="theme-primary mt-4"
-        @click="emit('addClicked')"
-      >
-        {{ i18n.t('add') }}
-      </v-btn>
-    </div>
   </div>
 </template>
 
@@ -78,6 +86,12 @@ const props = defineProps({
     type: Array as PropType<Array<object>>,
     required: true,
   },
+  /** Titre du tableau */
+  title: {
+    type: String,
+    required: false,
+    default: null
+  },
   /**
    * If provided, define the columns to show.
    * Else, all the entity's props are shown.
@@ -142,10 +156,6 @@ const columns: ComputedRef<Array<ColumnDefinition>> = computed(() => {
 </script>
 
 <style scoped lang="scss">
-.container {
-  max-width: 1000px;
-}
-
 .v-table {
   width: 100%;
 

i18n/lang/fr.json

@@ -182,9 +182,11 @@
   "OTHER": "Autre",
   "CONTACT": "Contact",
   "cycle": "Cycle",
-  "timing": "Durée d'un enseignement (en minutes)",
-  "educationTiming": "Durée d'un enseignement (en minutes)",
-  "new_education_timings": "Nouvelle durée d'enseignement",
+  "teaching_cycles": "Cycles d'enseignement",
+  "timing_title": "Durée des cours",
+  "timing": "Durée des cours (en minutes)",
+  "educationTiming": "Durée des cours (en minutes)",
+  "new_education_timings": "Nouvelle durée de cours",
   "superAdmin": "Compte super-admin",
   "username": "Nom d'utilisateur",
   "residenceArea": "Zones de résidence",
@@ -641,6 +643,9 @@
   "parameters_residence_areas_page": "Zones de résidence",
   "parameters_sms_page": "Option SMS",
   "sms_option": "Option SMS",
+  "sms_option_configuration": "Configuration de l'option SMS",
+  "sms_option_configuration_notice": "Pour utiliser l'option SMS, renseignez les informations d'identification Mobyt de votre structure",
+  "sms_option_configuration_tip": "Pour utiliser l'option SMS, renseignez les informations d'identification Mobyt de votre structure",
   "sms_breadcrumbs": "SMS",
   "super_admin": "Compte super-admin",
   "parameters_super_admin_page": "Compte super-admin",

pages/parameters/attendances.vue

@@ -33,11 +33,12 @@
         </v-row>
       </UiForm>
 
-      <v-divider class="my-10" />
+      <v-divider class="my-5" />
     </div>
 
     <LayoutParametersEntityTable
       :model="AttendanceBookingReason"
+      :title="$t('attendanceBookingReasons')"
       :columns-definitions="[{ property: 'reason' }]"
     />
   </LayoutContainer>

pages/parameters/bulletin.vue

@@ -52,17 +52,17 @@
             field="bulletinShowAverages"
           />
 
-          <UiInputAutocompleteWithEnum
-            v-model="parameters.bulletinReceiver"
-            field="bulletinReceiver"
-            enum-name="organization_bulletin_send_to"
-          />
-
           <UiInputAutocompleteWithEnum
             v-model="parameters.bulletinCriteriaSort"
             field="bulletinCriteriaSort"
             enum-name="organization_bulletin_criteria_sort"
           />
+
+          <UiInputAutocompleteWithEnum
+            v-model="parameters.bulletinReceiver"
+            field="bulletinReceiver"
+            enum-name="organization_bulletin_send_to"
+          />
         </v-col>
       </v-row>
     </UiForm>

pages/parameters/education_timings/index.vue

@@ -2,6 +2,7 @@
   <LayoutContainer>
     <LayoutParametersEntityTable
       :model="EducationTiming"
+      :title="$t('timing_title')"
       :columns-definitions="[{ property: 'timing' }]"
     />
   </LayoutContainer>

pages/parameters/residence_areas/index.vue

@@ -2,6 +2,7 @@
   <LayoutContainer>
     <LayoutParametersEntityTable
       :model="ResidenceArea"
+      :title="$t('residenceArea')"
       :columns-definitions="[{ property: 'label' }]"
     />
   </LayoutContainer>

pages/parameters/sms.vue

@@ -1,9 +1,8 @@
 <template>
   <div>
-    <UiForm
-      v-if="parameters"
-      v-model="parameters"
-    >
+    <h4>{{ $t('sms_option') }}</h4>
+
+    <UiForm v-if="parameters" v-model="parameters">
       <v-row>
         <v-col cols="12">
           <UiInputText

pages/parameters/teaching.vue

@@ -7,6 +7,7 @@
     >
       <LayoutParametersTable
         :items="tableItems"
+        :title="$t('teaching_cycles')"
         :columns-definitions="[{ property: 'originalLabel' }, { property: 'effectiveLabel' }]"
         identifier="value"
         :actions="[TABLE_ACTION.EDIT]"

pages/parameters/website.vue

@@ -8,75 +8,16 @@
     >
       <v-row>
         <v-col cols="12">
-          <div class="my-5">
-            <span>{{ $t('your_opentalent_website_address_is') }} : </span>
-            <strong class="ml-2">
-              <a :href="organizationProfile.website ?? '#'" target="_blank">
-                {{ organizationProfile.website }}
-              </a>
-            </strong>
-          </div>
-
-          <!-- les publicationDirectors sont des entités Access -->
-          <UiInputAutocompleteAccesses
-            v-model="parameters.publicationDirectors"
-            field="publicationDirectors"
-            multiple
-            chips
-            variant="outlined"
-            class="my-4"
-          />
-
-          <div class="mb-6">
-            <div>
-              <h4>{{ $t('your_subdomains') }} :</h4>
-            </div>
-            <UiLoadingPanel v-if="subdomainsPending" />
-            <div v-else>
-              <v-table v-if="subdomains!.items" class="subdomains-table my-2">
-                <tbody>
-                  <tr
-                    v-for="subdomain in subdomains!.items"
-                    :key="subdomain.id"
-                    :title="subdomain.subdomain"
-                    :class="
-                      'subdomainItem' + (subdomain.active ? ' active' : '')
-                    "
-                    @click="goToEditPage(subdomain.id)"
-                  >
-                    <td>{{ subdomain.subdomain }}</td>
-                    <td>
-                      <span v-if="subdomain.active">
-                        <v-icon class="text-success icon">
-                          fa-solid fa-check
-                        </v-icon>
-                        {{ $t('active') }}
-                      </span>
-                    </td>
-                  </tr>
-                </tbody>
-              </v-table>
-              <span v-else>{{ $t('no_recorded_subdomain') }}</span>
-
-              <div class="d-flex flex-row justify-center w-100">
-                <v-btn
-                  :disabled="!canAddNewSubdomain"
-                  class="my-5"
-                  @click="onAddSubdomainClick"
-                >
-                  {{ $t('record_a_new_subdomain') }}
-                </v-btn>
-              </div>
+          <div class="my-5 d-flex flex-row">
+            <div class="flex-grow-1 align-self-center">
+              <span>{{ $t('your_opentalent_website_address_is') }} : </span>
+              <strong class="ml-2">
+                <a :href="organizationProfile.website ?? '#'" target="_blank">
+                  {{ organizationProfile.website }}
+                </a>
+              </strong>
             </div>
-          </div>
-
-          <div v-if="!organizationProfile.isCmf">
-            <v-divider class="my-10" />
-
-            <div
-              v-if="!organizationProfile.isCmf"
-              class="my-8 d-flex flex-row justify-center w-100"
-            >
+            <div v-if="!organizationProfile.isCmf">
               <v-btn
                 v-if="!parameters.desactivateOpentalentSiteWeb"
                 color="error"
@@ -120,6 +61,60 @@
             </div>
           </div>
 
+          <!-- les publicationDirectors sont des entités Access -->
+          <UiInputAutocompleteAccesses
+            v-model="parameters.publicationDirectors"
+            field="publicationDirectors"
+            multiple
+            chips
+            variant="outlined"
+            class="my-4"
+          />
+
+          <div class="mb-6">
+            <div class="d-flex flex-row">
+              <h4 class="flex-grow-1 align-self-center">
+                {{ $t('your_subdomains') }}
+              </h4>
+
+              <v-btn
+                :disabled="!canAddNewSubdomain"
+                class="my-5"
+                @click="onAddSubdomainClick"
+              >
+                {{ $t('record_a_new_subdomain') }}
+              </v-btn>
+            </div>
+
+            <UiLoadingPanel v-if="subdomainsPending" />
+            <div v-else>
+              <v-table v-if="subdomains!.items" class="subdomains-table my-2">
+                <tbody>
+                  <tr
+                    v-for="subdomain in subdomains!.items"
+                    :key="subdomain.id"
+                    :title="subdomain.subdomain"
+                    :class="
+                      'subdomainItem' + (subdomain.active ? ' active' : '')
+                    "
+                    @click="goToEditPage(subdomain.id)"
+                  >
+                    <td>{{ subdomain.subdomain }}</td>
+                    <td>
+                      <span v-if="subdomain.active">
+                        <v-icon class="text-success icon">
+                          fa-solid fa-check
+                        </v-icon>
+                        {{ $t('active') }}
+                      </span>
+                    </td>
+                  </tr>
+                </tbody>
+              </v-table>
+              <span v-else>{{ $t('no_recorded_subdomain') }}</span>
+            </div>
+          </div>
+
           <div>
             <UiInputText
               v-model="parameters.otherWebsite"
@@ -202,10 +197,6 @@ const onDialogYesBtnClick = () => {
 </script>
 
 <style scoped lang="scss">
-.subdomains-table {
-  max-width: 450px;
-}
-
 .subdomainItem {
   cursor: pointer;
   border: solid 1px rgb(var(--v-theme-neutral-strong));