implement renderer api

Author: tacxou

src/components/jsonFormRendererApi.vue

@@ -0,0 +1,160 @@
+<template lang="pug">
+json-forms(
+  :data="data"
+  :schema="schema"
+  :uischema="uischema"
+  :renderers="renderers"
+  validationMode="ValidateAndShow"
+  :additionalErrors="getSchemaValidations"
+  @change="onChange"
+)
+</template>
+
+<script setup lang="ts">
+import { JsonForms } from '@jsonforms/vue';
+import {
+  defaultStyles,
+  mergeStyles,
+  vanillaRenderers,
+} from "@jsonforms/vue-vanilla";
+
+import type { JsonFormsChangeEvent } from '@jsonforms/vue';
+import { QuasarJsonformRenderer } from './quasar-jsonform';
+import { computed, provide, ref } from 'vue';
+import { useFetch } from 'nuxt/app';
+import type { ErrorObject } from 'ajv';
+
+const customStyle = mergeStyles(defaultStyles, {
+  control: {
+    input: 'inputstyle',
+    error: 'errorstyle',
+  },
+});
+
+provide('styles', customStyle);
+
+const renderers = Object.freeze([
+  //...vanillaRenderers,
+  ...QuasarJsonformRenderer,
+  // Add custom renderers here
+]);
+
+const props = defineProps({
+  schemaName: {
+    type: String,
+    default: '',
+  },
+  validations: {
+    type: Object || null,
+    default: {},
+  },
+});
+
+const validations = defineModel('validations', {
+  type: Object,
+  default: {},
+});
+
+const data = defineModel('data', {
+  type: Object,
+  default: {},
+});
+
+function onChange(event: JsonFormsChangeEvent) {
+  data.value = event.data;
+}
+
+const getSchemaValidations = computed(() => {
+  if (!props.validations || !props.validations[props.schemaName]) {
+    return [];
+  }
+  const errorObject: ErrorObject[] = [];
+  let validationList = props.validations[props.schemaName]
+  for (const key in validationList) {
+    errorObject.push({
+      message: validationList[key],
+      instancePath: `/${key}`,
+      keyword: 'type',
+      params: {},
+    });
+  }
+  return errorObject;
+})
+
+
+const { data: result, pending, error, refresh } = await useHttp(`/management/identities/validation/${props.schemaName}`, {
+  method: 'GET',
+});
+
+const { data: resultUi, pending: pendingUi, error: errorUi, refresh: refreshUi } = await useHttp(`/management/identities/jsonforms/${props.schemaName}`, {
+  method: 'GET',
+});
+
+const schema = ref(result.value.data);
+const uischema = ref(resultUi.value.data);
+
+</script>
+
+<style>
+.horizontal-layout {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  justify-items: center;
+}
+
+.horizontal-layout-item {
+  flex: 1;
+  min-width: 0;
+  width: calc(33.333% - 10px);
+  height: 100px;
+  margin-right: 15px;
+  justify-content: center;
+}
+
+.horizontal-layout-item:last-child {
+  margin-right: 0;
+}
+
+.vertical-layout {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  justify-items: flex-start;
+}
+
+.inputstyle {
+  padding: 10px 15px;
+  font-size: 16px;
+  border: 1px solid #ced4da;
+  /* Couleur de bordure légère */
+  border-radius: 5px;
+  /* Coins arrondis */
+  outline: none;
+  /* Supprime le contour par défaut lors de la sélection */
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  /* Légère ombre pour un effet en profondeur */
+  transition: border-color 0.2s, box-shadow 0.2s;
+  /* Transition douce pour l'interaction */
+}
+
+.inputstyle:focus {
+  border-color: #007bff;
+  /* Changement de couleur de bordure pour l'état focus */
+  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+  /* Ombre extérieure pour indiquer le focus */
+}
+
+.errorstyle {
+  border-color: red;
+  color: red;
+  /* Set border color to red for error */
+}
+
+
+.description {
+  display: none;
+}
+</style>./form/StringControlRenderer.vue./form/QStringControlRenderer.vue./form/controls/QStringControlRenderer.vue

src/pages/identities/[id].vue

@@ -27,13 +27,13 @@ q-page
 
   q-tab-panels(v-model="tab")
     q-tab-panel(name="inetOrgPerson")
-      sesame-json-form-renderer(
+      sesame-json-form-renderer-api(
         schemaName="inetorgperson"
         v-model:data="identity.inetOrgPerson"
         v-model:validations="validations"
         )
     q-tab-panel(v-for="tab in tabs" :key="tab" :name="tab")
-      sesame-json-form-renderer(
+      sesame-json-form-renderer-api(
         :schemaName="tab"
         v-model:data="identity.additionalFields.attributes[tab]"
         v-model:validations="validations"