refactor parameters page section cards

components/Layout/Parameters/Section.vue

@@ -0,0 +1,15 @@
+<template>
+  <v-card class="parameters-page-card">
+    <slot />
+  </v-card>
+</template>
+
+<style scoped lang="scss">
+.parameters-page-card {
+  background-color: rgb(var(--v-theme-neutral-very-soft));
+  color: rgb(var(--v-theme-on-neutral-very-soft));
+  padding: 24px;
+  margin: 28px auto;
+  max-width: 1200px;
+}
+</style>

layouts/parameters.vue

@@ -42,14 +42,6 @@ const pageTitle = computed(() => i18n.t(route.name || 'parameters_page'))
 </script>
 
 <style scoped lang="scss">
-:deep(.parameters-page-card) {
-  background-color: rgb(var(--v-theme-neutral-very-soft));
-  color: rgb(var(--v-theme-on-neutral-very-soft));
-  padding: 24px;
-  margin: 28px auto;
-  max-width: 1200px;
-}
-
 .inner-container {
   max-width: 1200px;
   margin: 0 auto;

pages/parameters/attendance_booking_reasons/[id].vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <v-card class="parameters-page-card">
+    <LayoutParametersSection>
       <UiFormEdition
         :model="AttendanceBookingReason"
         go-back-route="/parameters/attendances"
@@ -13,7 +13,7 @@
           />
         </template>
       </UiFormEdition>
-    </v-card>
+    </LayoutParametersSection>
   </div>
 </template>
 <script setup lang="ts">

pages/parameters/attendance_booking_reasons/new.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <v-card class="parameters-page-card">
+    <LayoutParametersSection>
       <UiFormCreation
         :model="AttendanceBookingReason"
         go-back-route="/parameters/attendances"
@@ -22,7 +22,7 @@
           </v-container>
         </template>
       </UiFormCreation>
-    </v-card>
+    </LayoutParametersSection>
   </div>
 </template>
 

pages/parameters/attendances.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-card v-if="organizationProfile.isSchool" class="parameters-page-card">
+  <LayoutParametersSection v-if="organizationProfile.isSchool">
     <h4>{{ $t("alert_configuration") }}</h4>
     <UiLoadingPanel v-if="pending" />
     <UiForm
@@ -33,15 +33,15 @@
         </v-col>
       </v-row>
     </UiForm>
-  </v-card>
+  </LayoutParametersSection>
 
-  <v-card class="parameters-page-card">
+  <LayoutParametersSection>
     <LayoutParametersEntityTable
       :model="AttendanceBookingReason"
       :title="$t('attendanceBookingReasons')"
       :columns-definitions="[{ property: 'reason' }]"
     />
-  </v-card>
+  </LayoutParametersSection>
 </template>
 <script setup lang="ts">
 import type { AsyncData } from '#app'

pages/parameters/bulletin.vue

@@ -1,6 +1,6 @@
 <template>
   <LayoutContainer>
-    <v-card class="parameters-page-card">
+    <LayoutParametersSection>
       <UiLoadingPanel v-if="pending" />
       <UiForm
         v-else
@@ -67,7 +67,7 @@
           </v-col>
         </v-row>
       </UiForm>
-    </v-card>
+    </LayoutParametersSection>
   </LayoutContainer>
 </template>
 

pages/parameters/cycles/[id].vue

@@ -1,12 +1,12 @@
 <template>
   <div>
-    <v-card class="parameters-page-card">
+    <LayoutParametersSection>
       <UiFormEdition :model="Cycle" go-back-route="/parameters/teaching">
         <template #default="{ entity }">
           <UiInputText v-model="entity.label" field="label" :rules="rules()" />
         </template>
       </UiFormEdition>
-    </v-card>
+    </LayoutParametersSection>
   </div>
 </template>
 <script setup lang="ts">

pages/parameters/education_notation.vue

@@ -1,6 +1,6 @@
 <template>
   <LayoutContainer>
-    <v-card class="parameters-page-card">
+    <LayoutParametersSection>
       <UiLoadingPanel v-if="pending" />
       <UiForm
         v-else
@@ -51,7 +51,7 @@
           </v-col>
         </v-row>
       </UiForm>
-    </v-card>
+    </LayoutParametersSection>
   </LayoutContainer>
 </template>
 

pages/parameters/education_timings/[id].vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <v-card class="parameters-page-card">
+    <LayoutParametersSection>
       <UiFormEdition
         :model="EducationTiming"
         go-back-route="/parameters/education_timings"
@@ -13,7 +13,7 @@
           />
         </template>
       </UiFormEdition>
-    </v-card>
+    </LayoutParametersSection>
   </div>
 </template>
 <script setup lang="ts">

pages/parameters/education_timings/index.vue

@@ -1,11 +1,11 @@
 <template>
   <LayoutContainer>
-      <v-card class="parameters-page-card">
+      <LayoutParametersSection>
       <LayoutParametersEntityTable
         :model="EducationTiming"
         :columns-definitions="[{ property: 'timing' }]"
       />
-    </v-card>
+    </LayoutParametersSection>
   </LayoutContainer>
 </template>
 

pages/parameters/education_timings/new.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <v-card class="parameters-page-card">
+    <LayoutParametersSection>
       <UiFormCreation
         :model="EducationTiming"
         go-back-route="/parameters/education_timings"
@@ -22,7 +22,7 @@
           </v-container>
         </template>
       </UiFormCreation>
-    </v-card>
+    </LayoutParametersSection>
   </div>
 </template>
 

pages/parameters/general_parameters.vue

@@ -1,6 +1,6 @@
 <template>
   <LayoutContainer>
-    <v-card class="parameters-page-card">
+    <LayoutParametersSection>
       <UiLoadingPanel v-if="pending" />
       <UiForm
         v-else-if="parameters !== null"
@@ -82,7 +82,7 @@
           </v-col>
         </v-row>
       </UiForm>
-    </v-card>
+    </LayoutParametersSection>
   </LayoutContainer>
 </template>
 

pages/parameters/intranet.vue

@@ -1,6 +1,6 @@
 <template>
   <LayoutContainer>
-    <v-card class="parameters-page-card">
+    <LayoutParametersSection>
       <UiLoadingPanel v-if="pending" />
       <UiForm
         v-else
@@ -49,7 +49,7 @@
           </v-col>
         </v-row>
       </UiForm>
-    </v-card>
+    </LayoutParametersSection>
   </LayoutContainer>
 </template>
 

pages/parameters/residence_areas/[id].vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <v-card class="parameters-page-card">
+    <LayoutParametersSection>
       <UiFormEdition
         :model="ResidenceArea"
         go-back-route="/parameters/residence_areas"
@@ -14,7 +14,7 @@
           />
         </template>
       </UiFormEdition>
-    </v-card>
+    </LayoutParametersSection>
   </div>
 </template>
 

pages/parameters/residence_areas/index.vue

@@ -1,12 +1,12 @@
 <template>
-  <v-card class="parameters-page-card">
+  <LayoutParametersSection>
     <LayoutContainer>
       <LayoutParametersEntityTable
         :model="ResidenceArea"
         :columns-definitions="[{ property: 'label' }]"
       />
     </LayoutContainer>
-  </v-card>
+  </LayoutParametersSection>
 </template>
 
 <script setup lang="ts">

pages/parameters/residence_areas/new.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <v-card class="parameters-page-card">
+    <LayoutParametersSection>
       <UiFormCreation
         :model="ResidenceArea"
         go-back-route="/parameters/residence_areas"
@@ -20,7 +20,7 @@
           </v-container>
         </template>
       </UiFormCreation>
-    </v-card>
+    </LayoutParametersSection>
   </div>
 </template>
 

pages/parameters/sms.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <v-card class="parameters-page-card">
+    <LayoutParametersSection>
       <UiForm v-if="parameters" v-model="parameters">
         <v-row>
           <v-col cols="12">
@@ -27,7 +27,7 @@
           </v-col>
         </v-row>
       </UiForm>
-    </v-card>
+    </LayoutParametersSection>
   </div>
 </template>
 <script setup lang="ts">

pages/parameters/subdomains/[id].vue

@@ -1,7 +1,7 @@
 <!-- Page de détails d'un sous-domaine -->
 <template>
   <div>
-    <v-card class="parameters-page-card">
+    <LayoutParametersSection>
       <UiLoadingPanel v-if="pending" />
       <div v-else-if="subdomain !== null">
         <div>{{ $t('youRegisteredTheFollowingSubdomain') }} :</div>
@@ -32,7 +32,7 @@
           </div>
         </div>
       </div>
-    </v-card>
+    </LayoutParametersSection>
   </div>
 </template>
 

pages/parameters/subdomains/new.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <v-card class="parameters-page-card">
+    <LayoutParametersSection>
       <UiForm
         ref="form"
         v-model="subdomain"
@@ -45,7 +45,7 @@
           </NuxtLink>
         </template>
       </UiForm>
-    </v-card>
+    </LayoutParametersSection>
   </div>
 </template>
 

pages/parameters/super_admin.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <v-card class="parameters-page-card">
+    <LayoutParametersSection>
       <div class="explanation">
         <div class="px-4 d-flex flex-row align-center justify-center py-2">
           <v-icon class="theme-info">fa fa-info</v-icon>
@@ -34,7 +34,7 @@
         />
       </UiForm>
       <span v-else>{{ $t('no_admin_access_recorded') }}</span>
-    </v-card>
+    </LayoutParametersSection>
   </div>
 </template>
 

pages/parameters/teaching.vue

@@ -1,6 +1,6 @@
 <template>
   <LayoutContainer>
-    <v-card class="parameters-page-card">
+    <LayoutParametersSection>
       <h4>{{ $t('configuration') }}</h4>
 
       <UiLoadingPanel v-if="pending" />
@@ -14,9 +14,9 @@
           label="allow_to_configure_teachings_with_played_instrument_choice"
         />
       </UiForm>
-    </v-card>
+    </LayoutParametersSection>
 
-    <v-card class="parameters-page-card">
+    <LayoutParametersSection>
       <LayoutParametersTable
         :items="tableItems"
         :title="$t('teaching_cycles')"
@@ -25,7 +25,7 @@
         :actions="[TABLE_ACTION.EDIT]"
         @editClicked="goToCycleEditPage"
       />
-    </v-card>
+    </LayoutParametersSection>
   </LayoutContainer>
 </template>
 

pages/parameters/website.vue

@@ -1,6 +1,6 @@
 <template>
   <LayoutContainer>
-    <v-card class="parameters-page-card">
+    <LayoutParametersSection>
       <h4 class="flex-grow-1 align-self-center">
         {{ $t('your_website') }}
       </h4>
@@ -48,9 +48,9 @@
           class="my-4"
         />
       </UiForm>
-    </v-card>
+    </LayoutParametersSection>
 
-    <v-card v-if="!parameters.desactivateOpentalentSiteWeb" class="parameters-page-card">
+    <LayoutParametersSection v-if="!parameters.desactivateOpentalentSiteWeb">
       <div class="section-header">
         <h4 class="flex-grow-1 align-self-center">
           {{ $t('your_subdomains') }}
@@ -95,7 +95,7 @@
           </v-btn>
         </div>
       </div>
-    </v-card>
+    </LayoutParametersSection>
   </LayoutContainer>
 </template>