feat: enhance jsonforms-renderer and schemas-bar components with improved prop handling and styling; add photo control renderer

Author: tacxou

apps/web/src/components/core/jsonforms-renderer.vue

@@ -69,12 +69,16 @@ export default defineNuxtComponent({
   components: {
     JsonForms,
   },
-  setup({ mode, schemaName, manualSchema, manualUiSchema, modelValue, baseUrlValidation, baseUrlSchema }) {
+  setup(props) {
     const renderers = Object.freeze([...quasarRenderers])
 
-    const employeeType = computed(() => modelValue?.inetOrgPerson?.employeeType || 'LOCAL')
+    const employeeType = computed(() => {
+      // `modelValue` can be the full identity object or directly inetOrgPerson.
+      return props.modelValue?.employeeType || props.modelValue?.inetOrgPerson?.employeeType || 'LOCAL'
+    })
+
 
-    if (!schemaName && (!manualSchema || !manualUiSchema)) {
+    if (!props.schemaName && (!props.manualSchema || !props.manualUiSchema)) {
       throw new Error('Either schemaName or manualSchema/manualUiSchema props must be provided')
     }
 
@@ -90,10 +94,10 @@ export default defineNuxtComponent({
       return err[0].message
     }
 
-    if (!schemaName) {
+    if (!props.schemaName) {
       return {
-        schema: computed(() => manualSchema),
-        uischema: computed(() => manualUiSchema),
+        schema: computed(() => props.manualSchema),
+        uischema: computed(() => props.manualUiSchema),
         pending: computed(() => false),
         error: computed(() => null),
         refresh: () => {},
@@ -108,7 +112,7 @@ export default defineNuxtComponent({
       pending,
       error,
       refresh,
-    } = useHttp<any>(`${baseUrlValidation}${schemaName}`, {
+    } = useHttp<any>(`${props.baseUrlValidation}${props.schemaName}`, {
       method: 'GET',
     })
 
@@ -117,18 +121,18 @@ export default defineNuxtComponent({
       pending: pendingUi,
       error: errorUi,
       refresh: refreshUi,
-    } = useHttp<any>(`${baseUrlSchema}${schemaName}`, {
+    } = useHttp<any>(`${props.baseUrlSchema}${props.schemaName}`, {
       method: 'POST',
       params: {
-        mode,
+        mode: props.mode,
       },
       query: {
-        mode,
+        mode: props.mode,
       },
       watch: [employeeType],
-      body: {
-        employeeType,
-      },
+      body: computed(() => ({
+        employeeType: employeeType.value,
+      })),
     })
 
     const schema = computed(() => result.value?.data)

apps/web/src/components/pages/identities/schemas-bar.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-div
+div.schemas-bar.full-height
   .sesame-sticky-space
   q-bar.q-px-none.sesame-sticky-bar(:style="{ top: topOffset || '0px' }")
     q-tabs(
@@ -75,7 +75,7 @@ div
       span(v-else-if="schemas.length === 0") Tous les schémas sont déjà ajoutés
       span(v-else-if="!readonly") Ajouter un schéma
       span(v-else) Impossible d'ajouter un schéma en mode lecture seule
-  q-tab-panels(v-model="tab" keep-alive)
+  q-tab-panels.schemas-bar__panels(v-model="tab" keep-alive)
     slot(name='items' :tabs="tabs")
       q-tab-panel.q-pa-none(v-for="key in ['inetOrgPerson', ...tabs]" :key="key" :name="key")
         div.q-pa-md Unknown schema "{{ key }}"
@@ -207,3 +207,18 @@ export default defineNuxtComponent({
   },
 })
 </script>
+
+<style lang="scss" scoped>
+.schemas-bar {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.schemas-bar__panels {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+}
+</style>

apps/web/src/jsonforms/controls/index.ts

@@ -34,6 +34,7 @@ export { default as numericControlRenderer } from './numeric.vue'
 export { default as TextareaControlRenderer } from './textarea.vue'
 export { default as AutocompleteControlRenderer } from './autocomplete.vue'
 export { default as FileUploadControlRenderer } from './file-upload.vue'
+export { default as PhotoControlRenderer } from './photo.vue'
 export { default as AclControlRenderer } from './acl.vue'
 
 import InputControlRendererComponent from './input.vue'
@@ -47,6 +48,7 @@ import NumericControlRendererComponent from './numeric.vue'
 import TextareaControlRendererComponent from './textarea.vue'
 import AutocompleteControlRendererComponent from './autocomplete.vue'
 import FileUploadControlRendererComponent from './file-upload.vue'
+import PhotoControlRendererComponent from './photo.vue'
 import AclControlRendererComponent from './acl.vue'
 
 const inputControlRendererEntry: JsonFormsRendererRegistryEntry = {
@@ -104,6 +106,11 @@ const fileUploadControlRendererEntry: JsonFormsRendererRegistryEntry = {
   tester: rankWith(3, and(or(isStringControl, isObjectArrayControl, isObjectControl), optionIs('format', 'file'))), // Rend prioritaire les contrôles string, object ou array avec options.format === 'file'
 }
 
+const photoControlRendererEntry: JsonFormsRendererRegistryEntry = {
+  renderer: PhotoControlRendererComponent,
+  tester: rankWith(20, and(or(isStringControl, isObjectArrayControl, isObjectControl), and(optionIs('format', 'file'), optionIs('storage', 'picture')))),
+}
+
 const aclControlRendererEntry: JsonFormsRendererRegistryEntry = {
   renderer: AclControlRendererComponent,
   tester: rankWith(30, and(isPrimitiveArrayControl, optionIs('format', 'acl'))),
@@ -120,6 +127,7 @@ export const controlsRenderers = [
   numericControlRendererEntry,
   textareaControlRendererEntry,
   autocompleteControlRendererEntry,
+  photoControlRendererEntry,
   fileUploadControlRendererEntry,
   aclControlRendererEntry,
 ]

apps/web/src/jsonforms/controls/photo.vue

@@ -0,0 +1,132 @@
+<template lang="pug">
+  control-wrapper(
+    v-bind="controlWrapper"
+    v-model:is-hovered="isHovered"
+    :styles="styles"
+    :is-focused="isFocused"
+    :applied-options="appliedOptions"
+  )
+    .photo-control.q-mb-md(:class="styles.control.input")
+      .text-caption.text-grey-8.q-mb-xs(v-if="computedLabel") {{ computedLabel }}
+      q-img(
+        v-if="photoUrl && !hasError"
+        :src="photoUrl"
+        :ratio="1"
+        fit="contain"
+        spinner-color="primary"
+        class="photo-control__image"
+        :height="appliedOptions.height || '400px'"
+        @error="onImageError"
+      )
+        template(#error)
+          .photo-control__placeholder
+            q-icon(name="mdi-account" size="48px" color="grey-6")
+            span.text-caption.text-grey-7 Photo indisponible
+      .photo-control__placeholder(v-else)
+        q-icon(name="mdi-account" size="48px" color="grey-6")
+        span.text-caption.text-grey-7 Aucune photo
+      .text-caption.text-negative.q-mt-xs(v-if="control.errors") {{ control.errors }}
+</template>
+
+<script lang="ts">
+import { type ControlElement } from '@jsonforms/core'
+import { defineComponent, computed, ref, watch } from 'vue'
+import { rendererProps, type RendererProps, useJsonFormsControl } from '@jsonforms/vue'
+import { QImg, QIcon } from 'quasar'
+import { isArray } from 'radash'
+import { ControlWrapper } from '../common'
+import { determineClearValue, useJsonForms, useQuasarControl } from '../utils'
+
+const controlRenderer = defineComponent({
+  name: 'PhotoControlRenderer',
+  components: {
+    ControlWrapper,
+    QImg,
+    QIcon,
+  },
+  props: {
+    ...rendererProps<ControlElement>(),
+  },
+  setup(props: RendererProps<ControlElement>) {
+    const jsonFormsControl = useJsonFormsControl(props)
+    const clearValue = determineClearValue(undefined)
+    const api = useQuasarControl(jsonFormsControl, (value) => value ?? clearValue, 100)
+    const jsonforms = useJsonForms()
+    const auth = useAuth()
+
+    const hasError = ref(false)
+
+    const employeeNumber = computed(() => {
+      const value = (jsonforms as any)?.core?.data?.employeeNumber
+      if (isArray(value)) return value[0]
+      return value
+    })
+
+    const employeeType = computed(() => {
+      const value = (jsonforms as any)?.core?.data?.employeeType
+      if (isArray(value)) return value[0]
+      return value
+    })
+
+    const photoUrl = computed(() => {
+      const query = new URLSearchParams()
+      const employeeNumberValue = employeeNumber.value
+      const employeeTypeValue = employeeType.value
+
+      if (!employeeNumberValue || !employeeTypeValue) return ''
+      if (!auth.user?._id || !auth.user?.sseToken) return ''
+
+      query.append('filters[:inetOrgPerson.employeeNumber]', `${employeeNumberValue}`)
+      query.append('filters[:inetOrgPerson.employeeType]', `${employeeTypeValue}`)
+      query.append('id', `${auth.user._id}`)
+      query.append('key', `${auth.user.sseToken}`)
+
+      return `/api/management/identities/photo/raw?${query.toString()}`
+    })
+
+    watch(photoUrl, () => {
+      hasError.value = false
+    })
+
+    const onImageError = () => {
+      hasError.value = true
+    }
+
+    return {
+      ...api,
+      photoUrl,
+      hasError,
+      onImageError,
+    }
+  },
+})
+
+export default controlRenderer
+</script>
+
+<style lang="scss" scoped>
+.photo-control {
+  width: 100%;
+  max-width: none;
+}
+
+.photo-control__image {
+  width: 100%;
+  border-radius: 8px;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  overflow: hidden;
+}
+
+.photo-control__placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  width: 100%;
+  min-height: 180px;
+  border-radius: 8px;
+  border: 1px dashed rgba(0, 0, 0, 0.2);
+  background: rgba(0, 0, 0, 0.03);
+}
+</style>