Merge pull request #3 from Libertech-FR/wip-ui-array

Wip UI array

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...
@@ -84,20 +84,20 @@ 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")
-              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")
+            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-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")
+            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")
             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',
 })
@@ -190,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: {
@@ -207,6 +210,7 @@ const props = defineProps({
       },
 
       cancel: async () => { },
+      add: async () => { return {} },
       onMounted: async () => { },
     },
   },
@@ -222,6 +226,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,11 +254,12 @@ 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 target = ref<null | object>(null)
+const targetId = ref<null | string>(route.query?.read ? `${route.query?.read}` : null)
+const target = ref<object>({})
 const daysjs = useDayjs()
 
 watch(target, (t) => {
@@ -275,39 +284,59 @@ async function refresh() {
 
 async function cancel() {
   await props.actions.cancel()
-  target.value = null
+  targetId.value = null
+  target.value = {}
   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
   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 = 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)
-  target.value = response
+  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)
 }
 
 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 +356,15 @@ defineExpose({
 })
 
 onMounted(async () => {
+  if (isNew.value) {
+    await add()
+    return
+  }
   const newTarget = await props.actions.onMounted()
+  // console.log('newTarget', newTarget)
   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/genericForm/index.vue

@@ -1,12 +1,13 @@
 <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="validations"
+    v-model:validations="validationsInternal"
     :schema="schema"
     :uischema="uischema"
   )
+  //- pre(v-html="JSON.stringify(payload.target, null, 2)")
 </template>
 
 <script lang="ts" setup>
@@ -32,6 +33,13 @@ const props = defineProps(
     payload: {
       type: Object,
       required: true,
+      // default: {
+      //   target: {},
+      // }
+    },
+    validations: {
+      type: Object || null,
+      default: {},
     },
   }
 )
@@ -42,7 +50,12 @@ const { getStateColor, getStateName } = useIdentityStates()
 const { handleError } = useErrorHandling()
 
 
-const validations = ref([])
+const validationsInternal = ref(props.validations)
+
+watch(() => props.validations, () => {
+  validationsInternal.value = props.validations
+})
+
 const error = ref(null)
 
 // defineExpose({