fix: Handle object values correctly in QStringControlRenderer setup function

Author: tacxou

src/components/2pan/index.vue

@@ -285,7 +285,7 @@ async function cancel() {
   targetId.value = null
   target.value = null
   selected.value = []
-  router.push({ query: { ...route.query, read: undefined } })
+  await router.push({ query: { ...route.query, read: null } })
 }
 async function read(row) {
   targetId.value = row?._id
@@ -357,6 +357,7 @@ onMounted(async () => {
     return
   }
   const newTarget = await props.actions.onMounted()
+  console.log('newTarget', newTarget)
   if (newTarget) {
     target.value = { ...newTarget }
     targetId.value = (newTarget as any)?._id

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

@@ -1,6 +1,7 @@
 <template lang="pug">
 //control-wrapper(v-bind="controlWrapper" :styles="styles" :isFocused="isFocused" :appliedOptions="appliedOptions")
 div
+  //- pre(v-html="JSON.stringify(control.data)")
   q-select(
     :model-value="control.data"
     :options="suggestions"
@@ -68,11 +69,20 @@ const QStringControlRenderer = defineComponent({
   setup(props: RendererProps<ControlElement>) {
     return useQuasarControl(
       useJsonFormsControl(props),
-      (value) => isObject(value) ? value.value : value || undefined
+      (value) => {
+        return isObject(value) ? value.value || [] : value || []
+      }
     )
   },
   methods: {
+    onChange(val) {
+      console.log('val', val)
+    },
     createValue(val, done) {
+      if (!this.control.data) {
+        this.control.data = []
+        this.handleChange('', null)
+      }
       done(val, 'add-unique')
     },
     isIterable(obj) {
@@ -112,6 +122,12 @@ const QStringControlRenderer = defineComponent({
       return this.control.label === undefined ? this.control.schema.title : this.control.label;
     },
   },
+  mounted() {
+    if (!this.control.data) {
+      this.control.data = []
+      this.handleChange('', null)
+    }
+  }
 });
 export default QStringControlRenderer;
 

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

@@ -70,6 +70,9 @@ const QStringControlRenderer = defineComponent({
     )
   },
   methods: {
+    onChange(val) {
+      console.log('val', val)
+    },
     isIterable(obj) {
       // checks for null and undefined
       if (obj == null) {

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

@@ -115,8 +115,8 @@ export const useQuasarControl = <
 
   console.log('input', input.control.value.path, input.control.value.data)
   if (typeof input.control.value.data === 'undefined' || input.control.value.data === null && input.control.value.errors) {
+    input.handleChange(input.control.value.path, input.control.value.schema.default || null)
     console.log('input.data', input.control.value.data)
-    input.handleChange(input.control.value.path, '')
   }
   console.log('input.data', input.control.value)
 
@@ -282,4 +282,4 @@ export const useNested = (element: false | 'array' | 'object'): NestedInfo => {
     });
   }
   return nestedInfo;
-};
+};

src/composables/useAgentsSchema.ts

@@ -21,6 +21,7 @@ export default function useAgentsSchema() {
       },
       "state.current": {
         "type": "number",
+        "default": 1,
         "description": "État actuel"
       },
       "baseURL": {
@@ -96,24 +97,24 @@ export default function useAgentsSchema() {
           }
         ]
       },
-      // {
-      //   "type": "HorizontalLayout",
-      //   "elements": [
-      //     {
-      //       "type": "Control",
-      //       "label": "Base URL",
-      //       "scope": "#/properties/baseURL"
-      //     },
-      //     {
-      //       "type": "Control",
-      //       "label": "Allowed Networks",
-      //       "scope": "#/properties/allowedNetworks",
-      //       "options": {
-      //         "detail": "List of networks allowed to access the agent"
-      //       }
-      //     }
-      //   ]
-      // },
+      {
+        "type": "HorizontalLayout",
+        "elements": [
+          {
+            "type": "Control",
+            "label": "Base URL",
+            "scope": "#/properties/baseURL"
+          },
+          {
+            "type": "Control",
+            "label": "Allowed Networks",
+            "scope": "#/properties/allowedNetworks",
+            "options": {
+              "detail": "List of networks allowed to access the agent"
+            }
+          }
+        ]
+      },
     ]
   })
 

src/pages/agents/index.vue

@@ -165,9 +165,12 @@ function logs(agent: Agent) {
 const actions = {
   cancel: async (row: Agent) => {
     console.log('cancel')
+    validations.value = {}
   },
   create: async (row: Agent) => {
 
+    // console.log('row', row)
+
     const sanitizedAgent = { ...row }
     delete sanitizedAgent.metadata
 
@@ -259,6 +262,7 @@ const actions = {
     const { data } = await useHttp<Agent>(`/core/agents/${row._id}`, {
       method: 'get',
     })
+    validations.value = {}
     return data.value?.data
   },
   onMounted: async () => {