fix: Handle object values correctly in QStringControlRenderer setup function

Author: tacxou

src/components/2pan/index.vue

@@ -84,14 +84,14 @@ q-splitter(
             q-btn(color="primary", icon="mdi-chevron-left" @click="cancel" tooltip="Retour")
               q-tooltip.text-body2 Retour
             q-separator.q-mx-sm(vertical)
-            slot(name="right-panel-actions-content" v-if="defaultRightPanelButton" :target="target")
+            slot(name="right-panel-actions-content" v-if="defaultRightPanelButton" :target="target" :isNew="isNew" :crud="crud")
               q-btn(color="positive" icon='mdi-content-save-plus' @click="create(target)" v-show="isNew" v-if="crud.create")
                 q-tooltip.text-body2 Créer
               q-btn(color="positive" icon='mdi-content-save' @click="update(target)" v-show="!isNew" v-if="crud.update")
                 q-tooltip.text-body2 Enregistrer
               q-btn(color="negative" icon='mdi-delete' @click="remove(target)" v-show="!isNew" v-if="crud.delete")
                 q-tooltip.text-body2 Supprimer
-            slot(name="right-panel-actions-content-after" :target="target")
+            slot(name="right-panel-actions-content-after" :target="target" :isNew="isNew" :crud="crud")
         q-card-section.q-pa-none.fit.flex(style='flex-flow: column; overflow: hidden;')
           slot(name="right-panel-content" :payload="{ target }")
             slot(name="right-panel-content-before")
@@ -192,6 +192,7 @@ const props = defineProps({
       update: <T>(r: T) => Promise<T>
       delete: <T>(r: T) => Promise<T>
       cancel: () => Promise<void>
+      add: <T>() => Promise<T>
       onMounted: <T = object>() => Promise<T | null>
     }>,
     default: {
@@ -209,6 +210,7 @@ const props = defineProps({
       },
 
       cancel: async () => { },
+      add: async () => { return {} },
       onMounted: async () => { },
     },
   },
@@ -257,7 +259,7 @@ const { debug } = useDebug()
 const selected = ref([])
 const tab = ref('')
 const targetId = ref<null | string>(route.query?.read ? `${route.query?.read}` : null)
-const target = ref<null | object>(null)
+const target = ref<object>({})
 const daysjs = useDayjs()
 
 watch(target, (t) => {
@@ -283,36 +285,38 @@ async function refresh() {
 async function cancel() {
   await props.actions.cancel()
   targetId.value = null
-  target.value = null
+  target.value = {}
   selected.value = []
   await router.push({ query: { ...route.query, read: null } })
 }
 async function read(row) {
   targetId.value = row?._id
   const response = await props.actions.read(row)
-  target.value = response
+  target.value = { ...response }
   emit('read', response)
 }
 
 async function add() {
   const read = NEW_ID
   targetId.value = read
-  target.value = {}
-  router.push({ query: { ...route.query, read } })
+  target.value = await props.actions.add() || {}
+  await router.push({ query: { ...route.query, read } })
 }
 
 async function create(row) {
   console.log('create', row)
   const response = await props.actions.create(row)
+  console.log('response', response)
   // target.value = response
   // targetId.value = response?._id
   emit('create', response)
+  if (response) cancel()
 }
 
 async function update(row) {
   targetId.value = row?._id
   const response = await props.actions.update(row)
-  target.value = response
+  target.value = { ...response }
   emit('update', response)
 }
 
@@ -357,7 +361,7 @@ onMounted(async () => {
     return
   }
   const newTarget = await props.actions.onMounted()
-  console.log('newTarget', newTarget)
+  // console.log('newTarget', newTarget)
   if (newTarget) {
     target.value = { ...newTarget }
     targetId.value = (newTarget as any)?._id

src/components/genericForm/index.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
 div
-  //- pre(v-html="JSON.stringify(payload, null, 2)")
+  pre(v-html="JSON.stringify(payload, null, 2)")
   sesame-json-form-renderer(
     v-model:data="payload.target"
     v-model:validations="validationsInternal"
@@ -33,6 +33,9 @@ const props = defineProps(
     payload: {
       type: Object,
       required: true,
+      // default: {
+      //   target: {},
+      // }
     },
     validations: {
       type: Object || null,

src/components/identityForm/actions.vue

@@ -1,11 +1,13 @@
 <template lang="pug">
 div
-  q-btn.q-mx-xs(@click="submit" color="positive" icon="mdi-check")
+  q-btn(color="positive" icon='mdi-content-save-plus' @click="create" v-show="isNew" v-if="crud.create")
+    q-tooltip.text-body2 Créer
+  q-btn.q-mx-xs(@click="submit" color="positive" icon="mdi-check"  v-show="!isNew" v-if="crud.update")
     q-tooltip.text-body2(slot="trigger") Enregistrer les modifications
-  q-btn.q-mx-xs(@click="sync" color="orange-8" v-if="identity" :disabled="props.identity.state != IdentityState.TO_VALIDATE" icon="mdi-sync")
+  q-btn.q-mx-xs(v-if="props.identity?._id" @click="sync" color="orange-8" :disabled="props.identity.state != IdentityState.TO_VALIDATE" icon="mdi-sync")
     q-tooltip.text-body2(slot="trigger" v-if="props.identity.state == IdentityState.TO_VALIDATE") Synchroniser l'identité
     q-tooltip.text-body2(slot="trigger" v-else) L'état de l'identité ne permet pas de la synchroniser
-  q-btn.q-mx-xs(@click="logs" color="grey-8" icon="mdi-file-document" :href="'/jobs?filters[:concernedTo.id]=' + props.identity?._id")
+  q-btn.q-mx-xs(v-if="props.identity?._id" @click="logs" color="grey-8" icon="mdi-file-document" :href="'/jobs?filters[:concernedTo.id]=' + props.identity?._id")
     q-tooltip.text-body2(slot="trigger") Voir les logs de l'identité
 </template>
 
@@ -27,19 +29,32 @@ const props = defineProps({
     type: Object as PropType<Identity>,
     required: true,
   },
+  crud: {
+    type: Object,
+    default: {},
+  },
+  isNew: {
+    type: Boolean,
+    required: true,
+  },
 })
 const $q = useQuasar()
 const router = useRouter()
 const { getStateColor, getStateName } = useIdentityStates()
 const { handleError } = useErrorHandling()
 
-const emits = defineEmits(['submit', 'sync', 'logs'])
+const emits = defineEmits(['submit', 'sync', 'logs', 'create'])
 
 async function submit() {
-  console.log('submit from actions')
+  // console.log('submit from actions')
   emits('submit')
 }
 
+async function create() {
+  // console.log('submit from actions')
+  emits('create')
+}
+
 const stateName = computed(() => {
   const state = props.identity?.state
   return getStateName(state)

src/components/identityForm/index.vue

@@ -1,11 +1,17 @@
 <template lang="pug">
 div
+  //- pre(v-html="JSON.stringify(identity, null, 2)")
   q-tabs(v-model="tab" align="justify")
     q-tab(name="inetOrgPerson" label="inetOrgPerson" :alert="getTabValidations('inetOrgPerson')" alert-icon="mdi-alert" :class="`q-mr-xs`")
     q-tab(v-for="tab in tabs" :key="tab" :name="tab" :label="tab" :alert="getTabValidations(tab)" alert-icon="mdi-alert" :class="`q-mr-xs`")
-
+    q-btn-dropdown.full-height(icon="mdi-newspaper-plus" flat)
+      q-tooltip.text-body2(anchor="top middle" self="center middle") Ajouter un schéma
+      q-list
+        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-panel(name="inetOrgPerson" v-if='identity && identity.inetOrgPerson')
+    q-tab-panel(name="inetOrgPerson")
       sesame-json-form-renderer-api(
         schemaName="inetorgperson"
         v-model:data="identity.inetOrgPerson"
@@ -41,6 +47,12 @@ const props = defineProps(
     identity: {
       type: Object as PropType<Identity>,
       required: true,
+      default: {
+        additionalFields: {
+          objectClasses: [],
+          attributes: {},
+        },
+      },
     }
   }
 )
@@ -65,6 +77,23 @@ watch(() => props.identity, () => {
 const tab = ref('inetOrgPerson')
 const error = ref(null)
 
+const { data: schemasResult, pending, refresh } = await useHttp<any>(`/management/identities/validation`, {
+  method: 'GET',
+});
+
+const schemas = computed(() => {
+  return schemasResult.value.data.filter((schema: any) => {
+    return !tabs.value.includes(schema.name) && `${schema.name}`.toLocaleLowerCase() !== 'inetOrgPerson'.toLocaleLowerCase()
+  })
+})
+
+async function addSchema(schema) {
+  console.log('identity.value', identity.value)
+  if (!identity.value.additionalFields) identity.value.additionalFields = { objectClasses: [], attributes: {} }
+  identity.value.additionalFields.attributes[schema.name] = {}
+  identity.value.additionalFields.objectClasses.push(schema.name)
+}
+
 async function submit() {
   console.log('submit from form')
   const sanitizedIdentity = { ...props.identity }
@@ -95,6 +124,33 @@ async function submit() {
   }
 }
 
+async function create() {
+  console.log('create from form')
+  const sanitizedIdentity = { ...props.identity }
+  delete sanitizedIdentity.metadata
+
+  const { data: result, pending, error, refresh } = await useHttp(`/management/identities`, {
+    method: 'POST',
+    body: { ...sanitizedIdentity },
+  });
+  if (error.value) {
+    handleError({
+      error: error.value,
+      message: 'Erreur lors de la création'
+    })
+    console.log('error', error.value.data.validations)
+    validations.value = { ...error.value.data.validations }
+  } else {
+    $q.notify({
+      message: 'Création effectuée',
+      color: 'positive',
+      position: 'top-right',
+      icon: 'mdi-check-circle-outline',
+    })
+    emits('refreshTarget', {})
+  }
+}
+
 const stateName = computed(() => {
   const state = props.identity?.state
   return getStateName(state)
@@ -113,7 +169,7 @@ async function sync() {
   const { data: result, pending, error, refresh } = await useHttp<any>(`/management/identities/${props.identity._id}/state`, {
     method: 'PATCH',
     body: {
-      state: IdentityState.TO_SYNC,
+      state: IdentityState.TO_VALIDATE,
     },
   });
 
@@ -141,6 +197,7 @@ function back() {
 
 defineExpose({
   submit,
+  create,
   sync,
   logs,
   back,

src/components/jsonFormRenderer.vue

@@ -1,7 +1,6 @@
 <template lang="pug">
 div
   json-forms(
-    v-if="data"
     :data="data"
     :schema="schema"
     :uischema="uischema"
@@ -26,6 +25,7 @@ import { QuasarJsonformRenderer } from './quasar-jsonform';
 import { computed, provide, ref } from 'vue';
 import { useFetch } from 'nuxt/app';
 import type { ErrorObject } from 'ajv';
+import { isObject } from 'radash';
 
 const customStyle = mergeStyles(defaultStyles, {
   control: {
@@ -55,6 +55,10 @@ const props = defineProps({
     type: Object || null,
     default: {},
   },
+  // data: {
+  //   type: Object,
+  //   default: {},
+  // },
 });
 
 const validations = defineModel('validations', {
@@ -68,10 +72,18 @@ const data = defineModel('data', {
 });
 
 function onChange(event: JsonFormsChangeEvent) {
+  // console.log('onchanbge', event)
+  // data.value = event.data;
+  // console.log('event.data', event.data)
+  // if (isObject(event.data)) {
+  // if (!isObject(data.value)) data.value = {}
   for (const key in event.data) {
     const evdata = event.data[key];
+    // console.log('data.value', data.value)
     data.value[key] = evdata;
+    // console.log('data.value[key]', data.value[key])
   }
+  // }
 }
 
 const getSchemaValidations = computed(() => {

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

@@ -51,6 +51,7 @@ import type { RendererProps } from '@jsonforms/vue';
 import type { ControlElement } from '@jsonforms/core';
 import { useQuasarControl } from '../util';
 import { ControlWrapper } from '@jsonforms/vue-vanilla';
+import { debounce } from 'quasar';
 
 const QPasswordControlRenderer = defineComponent({
   name: 'q-password-control-renderer',
@@ -70,18 +71,20 @@ const QPasswordControlRenderer = defineComponent({
     password: ref(''),
     confirm: ref(''),
   }),
-  watch: {
-    'control.data': {
-      deep: true,
-      handler(val) {
-        this.password = val
-      },
-    },
-  },
+  // watch: {
+  // 'control.data': {
+  //   deep: true,
+  //   handler(val) {
+  //     this.password = val
+  //   },
+  // },
+  // },
   methods: {
-    onChangeControl() {
+    onChangeControl(val) {
       if (this.password === this.confirm) {
-        this.onChange(this.password)
+        this.onChange(val)
+      } else {
+        this.control.errors = 'Mot de passes non identiques'
       }
     },
     isIterable(obj) {

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

@@ -1,7 +1,7 @@
 <template lang="pug">
 //control-wrapper(v-bind="controlWrapper" :styles="styles" :isFocused="isFocused" :appliedOptions="appliedOptions")
 div
-  pre(v-html="JSON.stringify(control.data, null, 2)")
+  //- pre(v-html="JSON.stringify(control.data, null, 2)")
   q-select(
     v-if="suggestions !== undefined"
     :model-value="control.data"
@@ -82,10 +82,10 @@ const QStringControlRenderer = defineComponent({
       return typeof obj[Symbol.iterator] === 'function';
     },
   },
-  mounted() {
-    console.log('this.control', this.control)
-    console.log('this.control.dataa', this.control.data)
-  },
+  // mounted() {
+  //   console.log('this.control', this.control)
+  //   console.log('this.control.dataa', this.control.data)
+  // },
   computed: {
     suggestions() {
       const suggestions = this.control.uischema.options?.suggestion;