Amélioration de la gestion des données et des validations dans les formulaires JSON, ajout de vérifications d'erreurs et nettoyage du code

Author: tacxou

src/components/identityForm/index.vue

@@ -10,18 +10,21 @@ div
         q-item(clickable v-close-popup v-for="schema in schemas" @click="addSchema(schema)")
           q-item-section
             q-item-label(v-text="schema.name")
-  q-tab-panels(v-model="tab")
+  q-tab-panels(v-model="tab" keep-alive)
     q-tab-panel(name="inetOrgPerson")
       sesame-json-form-renderer-api(
+        v-if='identity.inetOrgPerson'
         schemaName="inetorgperson"
         v-model:data="identity.inetOrgPerson"
         v-model:validations="validations"
         :isNew="isNew"
       )
-    q-tab-panel(v-for="tab in tabs" :key="tab" :name="tab")
+    q-tab-panel(v-for="t in tabs" :key="t" :name="t")
+      //- pre(v-html="JSON.stringify(identity.additionalFields.attributes[t], null, 2)")
       sesame-json-form-renderer-api(
-        :schemaName="tab"
-        v-model:data="identity.additionalFields.attributes[tab]"
+        v-if='identity.additionalFields.attributes[t]'
+        :schemaName="t"
+        v-model:data="identity.additionalFields.attributes[t]"
         v-model:validations="validations"
         :isNew="isNew"
       )

src/components/jsonFormRendererApi.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
 div
-  //- pre(v-html="JSON.stringify({ isNew }, null, 2)")
+  //- pre(v-html="JSON.stringify({ data }, null, 2)")
   json-forms(
     :data="data"
     :schema="schema"
@@ -65,11 +65,19 @@ const validations = defineModel('validations', {
 
 const data = defineModel('data', {
   type: Object,
-  default: {},
+  required: true,
 });
 
 function onChange(event: JsonFormsChangeEvent) {
-  data.value = event.data || {};
+  data.value =  event.data;
+
+  if (!event.data) {
+    console.error('error', event.errors);
+    throw createError({
+      message: 'Data is empty',
+      status: 500,
+    })
+  }
 }
 
 const getSchemaValidations = computed(() => {
@@ -99,7 +107,7 @@ const { data: result, pending, error, refresh } = await useHttp<any>(`/managemen
 
 const identityForm = inject('identityForm') as Ref<any>;
 const employeeType = computed(() => {
-  console.log('employeeType', identityForm.value?.inetOrgPerson?.employeeType);
+  //console.log('employeeType', identityForm.value?.inetOrgPerson?.employeeType);
   return identityForm.value?.inetOrgPerson?.employeeType || 'LOCAL';
 });
 

src/components/quasar-jsonform/controls/QArrayControlRenderer.vue

@@ -81,7 +81,7 @@ const QStringControlRenderer = defineComponent({
     createValue(val, done) {
       if (!this.control.data) {
         this.control.data = []
-        this.handleChange('', null)
+        //this.handleChange('', null)
       }
       done(val, 'add-unique')
     },
@@ -125,7 +125,7 @@ const QStringControlRenderer = defineComponent({
   mounted() {
     if (!this.control.data) {
       this.control.data = []
-      this.handleChange('', null)
+      //this.handleChange('', null)
     }
   }
 });

src/components/quasar-jsonform/util/composition.ts

@@ -84,6 +84,7 @@ export const useQuasarControl = <
       : input.handleChange;
 
   const onChange = (value: any) => {
+    // console.debug('onChange', input.control.value.path, adaptValue(value))
     changeEmitter(input.control.value.path, adaptValue(value));
   };
 

src/composables/useErrorHandling.ts

@@ -13,7 +13,7 @@ type handleErrorPayload = {
     message?: string;
 };
 
-const $q = useQuasar();
+//const $q = useQuasar();
 
 export function useErrorHandling(): useErrorHandlingReturnType {
   function handleError(payload: handleErrorPayload) {