feat: Add lazy loading for images in jsonFormRenderer.vue and persistent drawer in default.vue

Author: tacxou

src/components/2pan/btns/add.vue

@@ -2,7 +2,7 @@
 q-btn(flat icon="mdi-plus" @click="add" color="primary")
     q-tooltip.text-body2(transition-show="scale" transition-hide="scale") {{ tooltip }}
 </template>
-        
+
 <script lang="ts" setup>
 import type { PropType } from 'vue'
 const props = defineProps({
@@ -16,4 +16,4 @@ const emit = defineEmits(['add'])
 function add() {
     emit('add')
 }
-</script>
+</script>

src/components/2pan/btns/refresh.vue

@@ -1,12 +1,12 @@
 <template lang="pug">
-q-btn(flat icon="mdi-refresh" @click="refresh" color="primary")
+q-btn(flat icon="mdi-refresh" @click="refresh" color="info")
     q-tooltip.text-body2(transition-show="scale" transition-hide="scale") Rafraichir
 </template>
-    
+
 <script lang="ts" setup>
 import type { PropType } from 'vue'
 const emit = defineEmits(['refresh'])
 function refresh() {
     emit('refresh')
 }
-</script>
+</script>

src/components/2pan/btns/remove.vue

@@ -1,8 +1,8 @@
 <template lang="pug">
 q-btn(flat icon="mdi-delete" @click="remove" size="sm" color="negative")
-    q-tooltip.text-body2(transition-show="scale" transition-hide="scale") {{ tooltip  }}
+    q-tooltip.text-body2(transition-show="scale" transition-hide="scale") {{ tooltip }}
 </template>
-            
+
 <script lang="ts" setup>
 import type { PropType } from 'vue'
 const props = defineProps({
@@ -16,4 +16,4 @@ const emit = defineEmits(['remove'])
 function remove() {
     emit('remove')
 }
-</script>
+</script>

src/components/2pan/index.vue

@@ -9,7 +9,7 @@ q-splitter(
   :style='{ "padding": isSimple ? "6px 0" : "0" }'
 )
   template(#before)
-    q-card.full-height.q-pa-sm(bordered :class='{"hidden": isSimple && target}')
+    q-card.full-height.q-pa-sm(bordered :class='{"hidden": isSimple && targetId}')
       q-table.sesame-sticky-last-column-table.full-height(
         v-bind="$attrs"
         selection="multiple"
@@ -33,18 +33,18 @@ q-splitter(
         template(v-for="(_, name) in $slots" v-slot:[name]="slotData")
           slot(:name="name" v-bind="slotData")
         template(v-slot:top-left)
-          q-btn-group(rounded flat)
+          q-btn-group(v-if="leftBtnHidden" rounded flat)
             slot(name="top-left-btn-grp" :selectedValues="selected")
               slot(name="top-left-btn-grp-content-before")
               slot(name="top-left-btn-grp-content-after")
         template(v-slot:top-right)
           q-btn-group(rounded flat)
             slot(name="top-right-btn-grp")
               slot(name="top-right-btn-grp-content-before")
-              sesame-2pan-btns-add(@add="create" v-if="crud.create")
-              q-btn.desktop-only(flat :icon="isSimple ? 'mdi-table-border' : 'mdi-table-merge-cells'" color="primary" @click="simple = !simple")
+              sesame-2pan-btns-add(@add="add" v-if="crud.create")
+              q-btn.desktop-only(flat :icon="isSimple ? 'mdi-table-border' : 'mdi-table-merge-cells'" color="info" @click="simple = !simple")
                 q-tooltip.text-body2(transition-show="scale" transition-hide="scale") Mode simple/double panneaux
-              q-btn(flat icon="mdi-table-headers-eye" color="primary")
+              q-btn(flat icon="mdi-table-headers-eye" color="info")
                 q-tooltip.text-body2(transition-show="scale" transition-hide="scale") Afficher/cacher des colonnes
                 q-menu(max-width="350px" max-height="350px").q-pa-md
                   .row
@@ -53,21 +53,21 @@ q-splitter(
               sesame-2pan-btns-refresh(@refresh="refresh")
               slot(name="top-right-btn-grp-content-after")
 
-        template(v-slot:body-cell-actions="props" )
+        template(v-slot:body-cell-actions="props")
           q-td(:props="props")
             q-btn-group(flat rounded)
               slot(name="body-cell-actions" :props="props")
                 slot(name="body-cell-actions-content-before")
                 sesame-2pan-btns-read(@read="read(props.row)" v-if="crud.read")
-                sesame-2pan-btns-remove(@remove="remove(props.row)" v-if="crud.delete" )
+                sesame-2pan-btns-remove(@remove="remove(props.row)" v-if="crud.delete")
                 slot(name="body-cell-actions-content-after")
 
   template(#separator)
     q-avatar(v-if='!isSimple' size="sm" color="primary" icon="mdi-unfold-more-vertical" class="text-white")
 
   template(#after)
-    q-card.full-height.q-pa-sm(bordered :class='{"hidden": isSimple && !target}')
-      q-card-section.q-pa-none.flex.items-center.full-height.justify-center(v-if='!target')
+    q-card.full-height.q-pa-sm(bordered :class='{"hidden": isSimple && !targetId}')
+      q-card-section.q-pa-none.flex.items-center.full-height.justify-center(v-if='!targetId')
         slot(name="right-panel-empty")
           slot(name="right-panel-empty-content-before")
           p Selectionnez une entrée pour afficher son contenu...
@@ -85,19 +85,19 @@ q-splitter(
               q-tooltip.text-body2 Retour
             q-separator.q-mx-sm(vertical)
             slot(name="right-panel-actions-content" v-if="defaultRightPanelButton" :target="target")
-              q-btn(color="positive" icon='mdi-content-save-plus' @click="create(target)" v-if="crud.create")
-                q-tooltip.text-body2 Enregistrer
-              q-btn(color="positive" icon='mdi-content-save' @click="update(target)" v-if="crud.update")
+              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-if="crud.delete")
+              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")
         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")
             slot(name="right-panel-content-after")
-        q-expansion-item.bg-blue-grey-10(v-if='debug' label='Debug' icon='mdi-bug' dense)
-          q-card.overflow-auto.bg-blue-grey-8(:style='{maxHeight: "250px", height: "250px"}')
+        q-expansion-item.bg-blue-grey-10(v-if='debug' label='Debug' icon='mdi-bug' dark dense)
+          q-card.overflow-auto.bg-blue-grey-8.text-white(:style='{maxHeight: "250px", height: "250px"}')
             q-card-section.q-pa-xs
               pre.q-ma-none(v-html='JSON.stringify(target, null, 2)')
 </template>
@@ -113,6 +113,8 @@ import type { PropType } from 'vue'
 import { crush, pick } from 'radash'
 import { routerKey } from 'vue-router'
 
+const NEW_ID = '000000000000000000000000'
+
 defineOptions({
   name: '2pan',
 })
@@ -222,6 +224,10 @@ watch(simple, (v) => {
 })
 const splitterModel = ref(isSimple.value ? 100 : 50)
 
+const leftBtnHidden = computed(() => {
+  return isSimple.value || splitterModel.value > 40
+})
+
 const visibleColumnsInternal = ref(props.visibleColumns)
 const visibleColumnsComputed = computed({
   get() {
@@ -246,10 +252,11 @@ const { pagination, onRequest, initializePagination } = usePagination()
 initializePagination(props.total)
 
 const emit = defineEmits(['create', 'refresh', 'read', 'update', 'delete'])
-const debug = process.env.NODE_ENV === 'development'
+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 daysjs = useDayjs()
 
@@ -275,39 +282,57 @@ async function refresh() {
 
 async function cancel() {
   await props.actions.cancel()
+  targetId.value = null
   target.value = null
   selected.value = []
   router.push({ query: { ...route.query, read: undefined } })
 }
 async function read(row) {
+  targetId.value = row?._id
   const response = await props.actions.read(row)
   target.value = response
   emit('read', response)
 }
 
+async function add() {
+  const read = NEW_ID
+  targetId.value = read
+  target.value = {}
+  router.push({ query: { ...route.query, read } })
+}
+
 async function create(row) {
+  console.log('create', row)
   const response = await props.actions.create(row)
-  target.value = response
+  // target.value = response
+  // targetId.value = response?._id
   emit('create', response)
 }
 
 async function update(row) {
+  targetId.value = row?._id
   const response = await props.actions.update(row)
   target.value = response
   emit('update', response)
 }
 
 async function remove(row) {
+  // targetId.value = row?._id
   const response = await props.actions.delete(row)
   target.value = response
+  // target.value = response
   emit('delete', response)
 }
 
+const isNew = computed(() => {
+  return targetId.value === NEW_ID
+})
+
 const getTitle = computed(() => {
   const keys = Array.isArray(props.titleKey) ? props.titleKey : [props.titleKey]
   if (!target.value) return ''
   const crushed = crush(target.value)
-  const valuesList = target.value ? pick(crushed, keys) : {}
+  const valuesList = target.value ? pick(crushed, keys as any) : {}
   return Object.values(valuesList).join(' ')
 })
 
@@ -327,9 +352,14 @@ defineExpose({
 })
 
 onMounted(async () => {
+  if (isNew.value) {
+    await add()
+    return
+  }
   const newTarget = await props.actions.onMounted()
   if (newTarget) {
-    target.value = newTarget
+    target.value = { ...newTarget }
+    targetId.value = (newTarget as any)?._id
   }
 })
 </script>

src/components/appbar/Menu.vue

@@ -8,7 +8,6 @@ q-btn(flat icon="mdi-dots-grid" size="20px" square)
           q-icon(:name="app.icon.name" :color="app.icon.color" size="xl")
           q-badge(v-if="app.badge" :color="app.badge.color" floating) {{ app.badge.value }}
           div.text-center(:class="`text-${app.title.color}`") {{ app.title.name }}
-
 </template>
 
 <script lang="ts" setup>

src/components/appbar/RightButtons.vue

@@ -3,6 +3,7 @@ div
   //q-btn(v-for="button in buttons" :key="button.icon" round flat :icon="button.icon" size="md").q-mx-sm
     q-tooltip.text-body2(transition-show="scale" transition-hide="scale") {{ button.name }}
   q-btn(v-if="badgesValues.TO_SYNC > 0" icon="mdi-sync" square color="amber-9" size="md" :label="badgesValues.TO_SYNC +' items à Synchroniser'" @click="syncAll")
+  q-btn(v-if="debug" @click="$q.dark.toggle()" flat size="md" icon="mdi-theme-light-dark")
   q-btn-dropdown(icon="mdi-account-circle-outline" :label="auth?.user?.displayName" round flat size="md")
     q-list
       q-item.q-pa-none(v-for="button in buttons" :key="button.name")
@@ -28,7 +29,8 @@ const badgesValues = ref({
 })
 
 const auth = useAuth()
-console.log(auth)
+const { debug } = useDebug()
+// console.log(auth)
 const buttons = [
   // {
   //   icon: 'mdi-cog',

src/components/appbar/index.vue

@@ -1,10 +1,10 @@
 <template lang="pug">
 q-header
   q-toolbar.bg-primary.text-white(style={ height: '32px' })
-    q-btn(flat @click="closeDrawer()" icon="mdi-menu")
-    q-separator(vertical dark inset).q-mx-md
-
-    q-btn(flat @click="backToIndex()")
+    //- div.desktop-hidden
+    //-   q-btn(flat @click="closeDrawer()" icon="mdi-menu")
+    //-   q-separator(vertical dark inset).q-mx-md
+    q-btn.q-pl-none(flat @click="backToIndex()")
       q-avatar(square)
         q-img(src="/config/logo.png" error-src="/default.png" alt="Sesame logo")
       q-toolbar-title SESAME

src/components/identityForm/actions.vue

@@ -1,11 +1,11 @@
 <template lang="pug">
 div
-  q-btn.q-mx-xs(@click="submit" color="primary" icon="mdi-check")
+  q-btn.q-mx-xs(@click="submit" color="positive" icon="mdi-check")
     q-tooltip.text-body2(slot="trigger") Enregistrer les modifications
-  q-btn.q-mx-xs(@click="sync" color="primary" v-if="identity" :disabled="props.identity.state != IdentityState.TO_VALIDATE" icon="mdi-sync")
+  q-btn.q-mx-xs(@click="sync" color="orange-8" v-if="identity" :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="primary" icon="mdi-file-document" :href="'/jobs?filters[:concernedTo.id]=' + props.identity._id")
+  q-btn.q-mx-xs(@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>
 

src/components/identityForm/index.vue

@@ -5,7 +5,7 @@ div
     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-tab-panels(v-model="tab")
-    q-tab-panel(name="inetOrgPerson")
+    q-tab-panel(name="inetOrgPerson" v-if='identity && identity.inetOrgPerson')
       sesame-json-form-renderer-api(
         schemaName="inetorgperson"
         v-model:data="identity.inetOrgPerson"
@@ -53,22 +53,23 @@ const { getStateColor, getStateName } = useIdentityStates()
 const { handleError } = useErrorHandling()
 
 const identity = ref<Identity>(props.identity)
-const validations = ref<Record<string, unknown> | null>(props.identity.additionalFields?.validations ?? {})
+const tabs = ref(props.identity?.additionalFields?.objectClasses ?? [])
+const validations = ref<Record<string, unknown> | null>(props.identity?.additionalFields?.validations ?? {})
 
 watch(() => props.identity, () => {
   identity.value = props.identity
-  validations.value = props.identity.additionalFields?.validations ?? null
+  tabs.value = props.identity?.additionalFields?.objectClasses ?? []
+  validations.value = props.identity?.additionalFields?.validations ?? null
 })
 
-const tabs = ref(props.identity?.additionalFields?.objectClasses ?? [])
 const tab = ref('inetOrgPerson')
 const error = ref(null)
 
 async function submit() {
   console.log('submit from form')
   const sanitizedIdentity = { ...props.identity }
   delete sanitizedIdentity.metadata
-  if (sanitizedIdentity.additionalFields?.validations) delete sanitizedIdentity.additionalFields.validations
+  if (sanitizedIdentity?.additionalFields?.validations) delete sanitizedIdentity.additionalFields.validations
 
   const { data: result, pending, error, refresh } = await useHttp<any>(`/management/identities/${props.identity._id}`, {
     method: 'PATCH',

src/components/jsonFormRenderer.vue

@@ -1,5 +1,6 @@
 <template lang="pug">
 json-forms(
+  v-if="data"
   :data="data"
   :schema="schema"
   :uischema="uischema"