v8-3873 reprise de l'input enum

components/Ui/Form.vue

@@ -11,7 +11,7 @@ Formulaire générique
       lazy-validation
       :readonly="readonly"
       @submit.prevent=""
-      @change="onChange"
+      @update:entity="onFormChange"
     >
       <!-- Top action bar -->
       <v-container fluid class="container btnActions">
@@ -86,6 +86,7 @@ import {Route} from "@intlify/vue-router-bridge";
 import {useEntityManager} from "~/composables/data/useEntityManager";
 import ApiModel from "~/models/ApiModel";
 import {usePageStore} from "~/store/page";
+import {watch} from "@vue/runtime-core";
 
 const props = defineProps({
   model: {
@@ -168,10 +169,16 @@ const setIsDirty = (dirty: boolean) => {
   }
 }
 
+watch(props.entity, async (newEntity, oldEntity) => {
+  await onFormChange()
+})
+
 /**
  *  Update store when form is changed (if valid)
  */
 const onFormChange = async () => {
+  console.log('form save')
+
   await validate()
 
   if (isValid.value) {

components/Ui/Input/Enum.vue

@@ -6,33 +6,32 @@ Liste déroulante dédiée à l'affichage d'objets Enum
 
 <template>
   <main>
-<!--    <v-skeleton-loader-->
-<!--      v-if="pending"-->
-<!--      type="list-item"-->
-<!--      loading-->
-<!--    />-->
+    <v-skeleton-loader
+      v-if="pending"
+      type="list-item"
+      loading
+    />
 
     <v-select
+      v-else
       :value="modelValue"
       :label="$t(label ?? field)"
       :items="items"
-      item-text="label"
       item-value="value"
+      item-title="label"
+      :no-data-text="$t('nothing-to-show') + '...'"
       :rules="rules"
       :disabled="readonly"
       :error="error || !!fieldViolations"
       :error-messages="errorMessage || (fieldViolations ? $t(fieldViolations) : '')"
-      @change="updateViolationState($event); $emit('update:modelValue', $event.target.value)"
+      @update:modelValue="updateViolationState($event); $emit('update:modelValue', $event)"
     />
   </main>
 </template>
 
 <script setup lang="ts">
-import {useNuxtApp} from "#app";
 import {useFieldViolation} from "~/composables/form/useFieldViolation";
-import {ref, Ref} from "@vue/reactivity";
 import {useEnumFetch} from "~/composables/data/useEnumFetch";
-import {Enum} from "~/types/data";
 
 const props = defineProps({
   /**
@@ -106,16 +105,21 @@ if (typeof props.enum === 'undefined') {
   throw new Error("missing 'enum' property for input")
 }
 
-const { emit } = useNuxtApp()
-
 const { fieldViolations, updateViolationState } = useFieldViolation(props.field)
 
-const items: Ref<Enum> = ref([])
-
 const { fetch } = useEnumFetch()
-const { data: fetched, pending } = fetch(props.enum)
+const { data: items, pending } = fetch(props.enum)
 
-items.value = fetched.value || []
+const onClick = () => console.log(items.value)
+
+const emit = defineEmits(['update:modelValue', 'change'])
+
+const onModelUpdate = (event: any) => {
+  console.log(event)
+  updateViolationState(event)
+  emit('change', event)
+  emit('update:modelValue', event)
+}
 
 </script>
 

components/Ui/Input/Text.vue

@@ -14,12 +14,13 @@ Champs de saisie de texte
     :type="(type === 'password' && show) ? 'text' : type"
     :error="error || !!fieldViolations"
     :error-messages="errorMessage || (fieldViolations ? $t(fieldViolations) : '')"
-    v-cleave="mask"
     :append-icon="type === 'password' ? (show ? 'mdi-eye' : 'mdi-eye-off') : ''"
     @click:append="show = !show"
     @input="$emit('update:modelValue', $event.target.value)"
     @change="updateViolationState($event); $emit('change', $event)"
   />
+
+<!--  v-cleave="mask"-->
 </template>
 
 <script setup lang="ts">
@@ -116,8 +117,6 @@ const i18n = useI18n()
 const { fieldViolations, updateViolationState } = useFieldViolation(props.field)
 
 const show = ref(false)
-
-defineEmits(['update:modelValue'])
 </script>
 
 <style scoped>

composables/data/useEnumManager.ts

@@ -1,8 +1,10 @@
 import EntityManager from "~/services/data/entityManager";
 import {useAp2iRequestService} from "~/composables/data/useAp2iRequestService";
 import EnumManager from "~/services/data/enumManager";
+import VueI18n, {useI18n} from "vue-i18n";
 
 export const useEnumManager = () => {
     const { apiRequestService, pending } = useAp2iRequestService()
-    return { enumManager: new EnumManager(apiRequestService), pending: pending }
+    const i18n = useI18n() as any
+    return { enumManager: new EnumManager(apiRequestService, i18n), pending: pending }
 }

composables/form/useFieldViolation.ts

@@ -1,6 +1,7 @@
 import {computed, ComputedRef} from "@vue/reactivity";
 import {useFormStore} from "~/store/form";
 import {useNuxtApp} from "#app";
+import {useGet} from "#imports";
 
 /**
  * Composable pour gérer l'apparition de message d'erreurs de validation d'un champ de formulaire
@@ -22,9 +23,6 @@ export function useFieldViolation(field: string) {
   function updateViolationState(field: string, value: any) {
     //@ts-ignore
     useFormStore().setViolations(useOmit(useFormStore().violations, field))
-
-    console.log('X', useFormStore().violations)
-    emit('update', value, field)
   }
 
   return {

lang/fr.json

@@ -564,5 +564,10 @@
   "PRINCIPAL_non_unique": "Vous ne pouvez pas avoir 2 points de contact principaux",
   "BILL_non_unique": "Vous ne pouvez pas avoir 2 points de contact de facturation",
   "CONTACT_non_unique": "Vous ne pouvez pas avoir 2 points de contact",
-  "could_not_contact_server_please_try_again": "Le serveur n'a pas pu être contacté, veuillez réessayer un peu plus tard"
+  "could_not_contact_server_please_try_again": "Le serveur n'a pas pu être contacté, veuillez réessayer un peu plus tard",
+  "nothing-to-show": "Rien à afficher",
+  "PENDING": "En cours de traitement",
+  "READY": "Prêt",
+  "DELETED": "Supprimé",
+  "ERROR": "Erreur"
 }

pages/organization/index.vue

@@ -52,7 +52,7 @@ Contient toutes les informations sur l'organization courante
                 </v-col>
 
                 <v-col v-if="!organizationProfile.isManagerProduct()" cols="12" sm="6">
-                  <UiInputEnum field="principalType" v-model="organization.principalType" enum-type="organization_principal_type"/>
+<!--                  <UiInputEnum field="principalType" v-model="organization.principalType" enum-type="organization_principal_type"/>-->
                 </v-col>
 
 <!--                <v-col v-if="!organizationProfile.isFfec() && !organizationProfile.isManagerProduct() && !organizationProfile.isArtist()" cols="12" sm="6">-->

pages/poc/[id].vue

@@ -23,7 +23,7 @@
           </template>
         </UiForm>
 
-        <v-btn to="/poc"></v-btn>
+        <v-btn to="/poc">Retour</v-btn>
       </div>
     </div>
   </main>
@@ -31,9 +31,9 @@
 
 <script setup lang="ts">
 import {useEntityManager} from "~/composables/data/useEntityManager";
-import {computed, ComputedRef, ref, Ref} from "@vue/reactivity";
+import {ref, Ref} from "@vue/reactivity";
 import {File} from "~/models/Core/File";
-import {navigateTo, useNuxtApp, useRoute} from "#app";
+import {navigateTo, useRoute} from "#app";
 import {useEntityFetch} from "~/composables/data/useEntityFetch";
 import {useI18n} from "vue-i18n";
 

services/data/enumManager.ts

@@ -2,12 +2,15 @@ import ApiRequestService from "./apiRequestService";
 import Url from "~/services/utils/url";
 import HydraDenormalizer from "~/services/data/serializer/denormalizer/hydraDenormalizer";
 import {Enum} from "~/types/data.d";
+import {VueI18n} from "vue-i18n";
 
 class EnumManager {
     private apiRequestService: ApiRequestService;
+    private i18n: VueI18n;
 
-    public constructor(apiRequestService: ApiRequestService) {
+    public constructor(apiRequestService: ApiRequestService, i18n: VueI18n) {
         this.apiRequestService = apiRequestService
+        this.i18n = i18n
     }
 
     public async fetch(enumName: string): Promise<Enum> {
@@ -15,13 +18,16 @@ class EnumManager {
 
         const response = await this.apiRequestService.get(url)
 
-        const data: any = await HydraDenormalizer.denormalize(response)
+        const { data } = await HydraDenormalizer.denormalize(response)
 
-        return data.items.map(
-            (v: string, k: string | number) => {
-                return {value: k, label: v}
+        const enum_: Enum = []
+        for (const key in data.items) {
+            if (data.items.hasOwnProperty(key)) {
+                enum_.push({value: key, label: this.i18n.t(data.items[key])})
             }
-        )
+        }
+
+        return enum_
     }
 }