various style improvements on parameters page

assets/css/global.scss

@@ -77,8 +77,10 @@ h3, h4 {
 
 h3 {
   font-size: 1.1rem;
+  color: rgb(var(--v-theme-on-neutral-soft));
 }
 
 h4 {
   font-size: 1.05rem;
+  color: rgb(var(--v-theme-on-neutral));
 }

components/Ui/DatePicker.vue

@@ -26,6 +26,7 @@ Sélecteur de dates
         :cancel-text="$t('cancel')"
         input-class-name="date-picker-input"
         @update:model-value="$emit('update:modelValue', $event)"
+        class="mb-6"
       />
   </div>
 </template>

components/Ui/Form/DeletionConfirmationDialog.vue

@@ -15,7 +15,7 @@
     </template>
 
     <template #dialogBtn>
-      <v-btn class="mr-4 submitBtn theme-neutral-strong" @click="onCancelClicked">
+      <v-btn class="mr-4 submitBtn theme-neutral" @click="onCancelClicked">
         {{ $t('cancel') }}
       </v-btn>
       <v-btn class="mr-4 submitBtn theme-danger" @click="onDeleteClicked">

components/Ui/Input/Autocomplete.vue

@@ -27,6 +27,7 @@ Liste déroulante avec autocompletion, à placer dans un composant `UiForm`
       "
       :rules="rules"
       :chips="chips"
+      :closable-chips="closableChips"
       :hide-no-data="hideNoData"
       :no-data-text="
         isLoading ? $t('please_wait') : $t('no_result_matching_your_request')
@@ -36,6 +37,7 @@ Liste déroulante avec autocompletion, à placer dans un composant `UiForm`
       @update:search="emit('update:search', $event)"
       @update:menu="emit('update:menu', $event)"
       @update:focused="emit('update:focused', $event)"
+      class="mb-3"
     >
       <template v-if="slotText" #item="data">
         <!--        <v-list-item-content v-text="data.item.slotTextDisplay"></v-list-item-content>-->
@@ -144,6 +146,14 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  /**
+   * Permet de retirer une puce directement
+   * @see https://vuetifyjs.com/en/api/v-autocomplete/#props-closable-chips
+   */
+  closableChips: {
+    type: Boolean,
+    default: false,
+  },
   /**
    * Le contenu de la liste est en cours de chargement
    */
@@ -359,3 +369,10 @@ const prepareItem = (item: Object): AnyJson => {
   })
 }
 </script>
+
+<style scoped lang="scss">
+:deep(.v-chip__close .v-icon) {
+  font-size: 16px;
+  color: rgb(var(--v-theme-on-neutral));
+}
+</style>

components/Ui/Input/Autocomplete/Accesses.vue

@@ -16,6 +16,7 @@ Champs autocomplete dédié à la recherche des Accesses d'une structure
       :multiple="multiple"
       hide-no-data
       :chips="chips"
+      :closable-chips="true"
       :auto-select-first="false"
       prepend-inner-icon="fas fa-magnifying-glass"
       :return-object="false"

pages/parameters/teaching.vue

@@ -1,27 +1,31 @@
 <template>
   <LayoutContainer>
-    <h3>{{ $t("parameters_teaching_page")}}</h3>
+    <h3 class="mb-8">{{ $t("parameters_teaching_page")}}</h3>
+
+    <h4>{{ $t('configuration') }}</h4>
 
     <UiLoadingPanel v-if="pending" />
     <UiForm
       v-else-if="parameters !== null"
       v-model="parameters"
     >
-      <LayoutParametersTable
-        :items="tableItems"
-        :title="$t('teaching_cycles')"
-        :columns-definitions="[{ property: 'originalLabel' }, { property: 'effectiveLabel' }]"
-        identifier="value"
-        :actions="[TABLE_ACTION.EDIT]"
-        @editClicked="goToCycleEditPage"
-      />
-
       <UiInputCheckbox
         v-model="parameters.showEducationIsACollectivePractice"
         field="showEducationIsACollectivePractice"
         label="allow_to_configure_teachings_with_played_instrument_choice"
       />
     </UiForm>
+
+    <v-divider class="my-5" />
+
+    <LayoutParametersTable
+      :items="tableItems"
+      :title="$t('teaching_cycles')"
+      :columns-definitions="[{ property: 'originalLabel' }, { property: 'effectiveLabel' }]"
+      identifier="value"
+      :actions="[TABLE_ACTION.EDIT]"
+      @editClicked="goToCycleEditPage"
+    />
   </LayoutContainer>
 </template>
 

services/data/enumManager.ts

@@ -23,7 +23,7 @@ class EnumManager {
     const enum_: Enum = []
     for (const key in data.items) {
       if (Object.prototype.hasOwnProperty.call(data.items, key)) {
-        enum_.push({ value: key, label: this.i18n.t(data.items[key]) })
+        enum_.push({ value: data.items[key], label: this.i18n.t(data.items[key]) })
       }
     }