graphical revision

components/Ui/DatePicker.vue

@@ -18,6 +18,7 @@ Sélecteur de dates
         :select-text="$t('select')"
         :cancel-text="$t('cancel')"
         :disabled="readonly"
+        :position="position"
         @update:model-value="onUpdate"
     />
   </main>
@@ -51,6 +52,14 @@ const props = defineProps({
     type: Boolean,
     required: false,
     default: false
+  },
+  /**
+   * @see https://vue3datepicker.com/props/positioning/#position
+   */
+  position: {
+    type: String as PropType<'left' | 'center' | 'right'>,
+    required: false,
+    default: 'center'
   }
 })
 

components/Ui/Input/DatePicker.vue

@@ -11,6 +11,7 @@ Sélecteur de dates, à placer dans un composant `UiForm`
           v-model="date"
           :readonly="readonly"
           :format="format"
+          :position="position"
           @update:model-value="onUpdate($event)"
       />
 
@@ -24,6 +25,7 @@ Sélecteur de dates, à placer dans un composant `UiForm`
 <script setup lang="ts">
 import {useFieldViolation} from "~/composables/form/useFieldViolation";
 import {formatISO} from "date-fns";
+import {PropType} from "@vue/runtime-core";
 
 const props = defineProps({
   /**
@@ -92,6 +94,14 @@ const props = defineProps({
     type: String,
     required: false,
     default: null
+  },
+  /**
+   * @see https://vue3datepicker.com/props/positioning/#position
+   */
+  position: {
+    type: String as PropType<'left' | 'center' | 'right'>,
+    required: false,
+    default: 'center'
   }
 })
 

layouts/parameters.vue

@@ -41,6 +41,6 @@ layoutStore.name = 'parameters'
     background-color: rgb(var(--v-theme-neutral-very-soft));
     color: rgb(var(--v-theme-on-neutral-very-soft));
     margin: 3%;
-    padding: 18px 24px;
+    padding: 24px;
   }
 </style>

pages/parameters/bulletin.vue

@@ -59,6 +59,7 @@
               v-model="parameters.bulletinReceiver"
               field="bulletinReceiver"
               enum-name="organization_bulletin_send_to"
+              variant="underlined"
           />
         </v-col>
       </v-row>

pages/parameters/education_timings.vue

@@ -1,55 +1,49 @@
 <template>
   <LayoutContainer>
     <UiLoadingPanel v-if="pending" />
-    <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>
+    <div v-else>
+      <v-table>
+        <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-btn
+          :flat="true"
+          prepend-icon="fa fa-plus"
+          class="theme-primary mt-4"
+          @click="goToCreatePage"
+      >
+        {{ $t('add') }}
+      </v-btn>
+    </div>
   </LayoutContainer>
 
 </template>
@@ -93,6 +87,11 @@ const goToCreatePage = () => {
 </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));

pages/parameters/general_parameters.vue

@@ -14,6 +14,7 @@
               v-model="parameters.financialDate"
               field="financialDate"
               label="start_date_of_financial_season"
+              position="left"
               class="my-2"
           />
 
@@ -22,6 +23,7 @@
               v-model="parameters.startCourseDate"
               field="startCourseDate"
               label="start_date_of_courses"
+              position="left"
               class="my-2"
           />
 
@@ -43,6 +45,7 @@
               v-model="parameters.musicalDate"
               field="musicalDate"
               label="start_date_of_activity_season"
+              position="left"
               class="my-2"
           />
 
@@ -51,6 +54,7 @@
               v-model="parameters.endCourseDate"
               field="endCourseDate"
               label="end_date_of_courses"
+              position="left"
               class="my-2"
           />
 
@@ -89,3 +93,6 @@ if (organizationProfile.parametersId === null) {
 
 const { data: parameters, pending } = fetch(Parameters, organizationProfile.parametersId) as AsyncData<Parameters, Parameters | true>
 </script>
+
+<style scoped lang="scss">
+</style>

pages/parameters/residence_areas.vue

@@ -1,55 +1,50 @@
 <template>
   <LayoutContainer>
     <UiLoadingPanel v-if="pending" />
-    <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>
+    <div v-else>
+      <v-table>
+        <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-btn
+          :flat="true"
+          prepend-icon="fa fa-plus"
+          class="theme-primary mt-4"
+          @click="goToCreatePage"
+      >
+        {{ $t('add') }}
+      </v-btn>
+    </div>
   </LayoutContainer>
 </template>
 
@@ -87,6 +82,11 @@ const goToCreatePage = () => {
 </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));

pages/parameters/sms.vue

@@ -8,8 +8,9 @@
       <v-row>
         <v-col cols="12">
           <UiInputText
-            v-model="parameters.smsSenderName"
-            field="smsSenderName"
+              v-model="parameters.smsSenderName"
+              field="smsSenderName"
+              variant="underlined"
           />
         </v-col>
         <v-col cols="12">
@@ -17,6 +18,7 @@
             v-model="parameters.usernameSMS"
             field="usernameSMS"
             label="Nom d'utilisateur SMS"
+            variant="underlined"
           />
         </v-col>
         <v-col cols="12">
@@ -24,6 +26,7 @@
               v-model="parameters.passwordSMS"
               field="passwordSMS"
               class="password"
+              variant="underlined"
           />
         </v-col>
       </v-row>

pages/parameters/super_admin.vue

@@ -1,49 +1,40 @@
 <template>
   <div>
-    <v-container>
-      <v-row>
-        <v-col cols="1">
-        </v-col>
-        <v-col cols="4">
-          <div class="explanation">
-            <div class="px-6 d-flex flex-row align-center">
-              <v-icon class="theme-primary">fa fa-info</v-icon>
-            </div>
-            <div class="px-2">
-              {{ $t('super_admin_explanation_text')}}
-            </div>
-          </div>
-        </v-col>
-        <v-col cols="1" />
-        <v-col cols="6">
-          <v-row>
+      <div class="explanation">
+        <div class="px-6 d-flex flex-row align-center">
+          <v-icon class="theme-primary">fa fa-info</v-icon>
+        </div>
+        <div class="px-2">
+          {{ $t('super_admin_explanation_text')}}
+        </div>
+      </div>
 
-          </v-row>
-          <v-row v-if="pending">
-            <UiLoadingPanel/>
-          </v-row>
-          <v-row v-else>
-            <UiForm
-                ref="form"
-                :model="AdminAccess"
-                :entity="adminAccess"
-                class="w-100"
-                action-position="bottom"
-            >
-              <div class="d-flex flex-row mx-4 my-6">
-                <span>{{ $t('username') }} :</span> <pre> {{ adminAccess.username }}</pre>
-              </div>
+      <UiLoadingPanel v-if="pending"/>
+      <UiForm
+          v-else
+          ref="form"
+          :model="AdminAccess"
+          :entity="adminAccess"
+          class="w-100"
+          action-position="bottom"
+      >
+        <v-table class="mb-4">
+          <tbody>
+            <tr>
+              <td>{{ $t('username') }} : </td>
+              <td>{{ adminAccess.username }}</td>
+            </tr>
+          </tbody>
+        </v-table>
 
-              <UiInputText
-                  field="email"
-                  v-model="adminAccess.email"
-                  :rules="rules()"
-              />
-            </UiForm>
-          </v-row>
-        </v-col>
-      </v-row>
-    </v-container>
+        <UiInputText
+            field="email"
+            v-model="adminAccess.email"
+            :rules="rules()"
+            class="mx-4"
+            variant="underlined"
+        />
+      </UiForm>
   </div>
 </template>
 
@@ -95,4 +86,8 @@ const rules = () => [
     border-right: solid 1px rgb(var(--v-theme-primary));
   }
 }
+
+.v-table td:first-child {
+  width: 180px;
+}
 </style>

pages/parameters/teaching.vue

@@ -34,15 +34,11 @@
         </tbody>
       </v-table>
 
-      <v-row>
-        <v-col cols="6">
-          <UiInputCheckbox
-              v-model="parameters.showEducationIsACollectivePractice"
-              field="showEducationIsACollectivePractice"
-              label="allow_to_configure_teachings_with_played_instrument_choice"
-          />
-        </v-col>
-      </v-row>
+      <UiInputCheckbox
+          v-model="parameters.showEducationIsACollectivePractice"
+          field="showEducationIsACollectivePractice"
+          label="allow_to_configure_teachings_with_played_instrument_choice"
+      />
     </UiForm>
   </LayoutContainer>
 </template>
@@ -104,6 +100,10 @@ const goToCycleEditPage = (id: number) => {
 </script>
 
 <style scoped lang="scss">
+.v-table {
+  width: 100%;
+  max-width: 800px;
+}
 
 .cycle-edit-icon {
   color: rgb(var(--v-theme-primary));
@@ -112,6 +112,4 @@ const goToCycleEditPage = (id: number) => {
 :deep(.cycle-edit-icon .v-icon) {
   font-size: 18px;
 }
-
-
 </style>

pages/parameters/website.vue

@@ -9,24 +9,47 @@
     >
       <v-row>
         <v-col cols="12">
-          <div class="mb-6">
-            <div>{{ $t('your_opentalent_website_address_is')}} : </div>
-            <div class="ma-2 text-primary">
-              <strong>{{ organizationProfile.website }}</strong>
-            </div>
+          <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="underlined"
+              class="my-4"
+          />
+
+          <div>
+            <UiInputText
+                v-model="parameters.otherWebsite"
+                field="otherWebsite"
+                variant="underlined"
+                class="my-4"
+            />
+          </div>
+
+          <v-divider class="my-10"/>
+
           <div class="mb-6">
-            <div>{{ $t('your_subdomains') }} : </div>
+            <div><h4>{{ $t('your_subdomains') }} : </h4></div>
             <UiLoadingPanel v-if="subdomainsPending" />
             <div v-else>
-              <v-table class="my-2">
+              <v-table class="subdomains-table my-2">
                 <tbody>
                   <tr
                       v-for="subdomain in subdomains.items"
                       :key="subdomain.id"
                       :title="subdomain.subdomain"
-                      class="subdomainItem"
+                      :class="'subdomainItem' + (subdomain.active ? ' active' : '')"
                       @click="goToEditPage(subdomain.id)"
                   >
                     <td>{{ subdomain.subdomain }}</td>
@@ -44,26 +67,21 @@
 
               </v-table>
 
-              <v-btn
-                  :disabled="!canAddNewSubdomain"
-                  class="my-2"
-                  @click="onAddSubdomainClick"
-              >
-                {{ $t('record_a_new_subdomain')}}
-              </v-btn>
+              <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>
           </div>
 
-            <!-- les publicationDirectors sont des entités Access -->
-            <UiInputAutocompleteAccesses
-                v-model="parameters.publicationDirectors"
-                field="publicationDirectors"
-                multiple
-                chips
-                variant="underlined"
-            />
+          <v-divider class="my-10"/>
 
-          <div class="my-8" v-if="!organizationProfile.isCmf">
+          <div class="my-8 d-flex flex-row justify-center w-100" v-if="!organizationProfile.isCmf">
             <v-btn
               v-if="!parameters.desactivateOpentalentSiteWeb"
               color="error"
@@ -106,13 +124,6 @@
             </LazyLayoutDialog>
           </div>
 
-          <div>
-            <UiInputText
-                v-model="parameters.otherWebsite"
-                field="otherWebsite"
-                variant="underlined"
-            />
-          </div>
         </v-col>
       </v-row>
     </UiForm>
@@ -167,11 +178,14 @@ const reactivateWebsite = () => {
 </script>
 
 <style scoped lang="scss">
-.v-table {
-  background: transparent;
+
+.subdomains-table {
+  max-width: 450px;
 }
+
 .subdomainItem {
   cursor: pointer;
+  border: solid 1px rgb(var(--v-theme-neutral-strong));
 }
 .subdomainItem:hover {
   background: rgb(var(--v-theme-neutral));
@@ -180,4 +194,12 @@ const reactivateWebsite = () => {
   font-size: 12px;
 }
 
+.subdomainItem td:first-child {
+  border-left: solid 2px rgb(var(--v-theme-neutral));
+}
+
+.subdomainItem.active td:first-child {
+  border-left: solid 2px rgb(var(--v-theme-primary));
+}
+
 </style>