Add validation modal and enhance menu state handling

- Introduced a validation modal in the identity form actions component.
- Added validations prop to handle validation errors.
- Updated menu state logging to be commented out for cleaner output.
- Refactored various components for consistency and improved readability.

Author: tacxou

nuxt.config.ts

@@ -150,6 +150,9 @@ export default defineNuxtConfig({
         actions: [{ icon: 'mdi-close', color: 'white' }],
       },
     },
+    extras: {
+      animations: 'all',
+    },
   },
   vite: {
     define: {

src/assets/sass/global.sass

@@ -5,7 +5,6 @@ blockquote
   margin: 0 0 20px
   border-left: 4px solid $primary
 
-
 .sesame-sticky-last-column-table
   thead tr:last-child th:last-child
     background-color: $tooltip-color
@@ -31,14 +30,16 @@ body.body--dark
   color: $primary
   font-weight: bold
 
-
 .outer-ne-resize
   resize: vertical
   overflow: auto
 
-
 .inner-ne-resize,
 .outer-ne-resize
   transform: rotateX(180deg)
   height: 100%
   width: 100%
+
+.sesame.animated.infinite
+  animation-iteration-count: infinite !important
+  animation-duration: 3s !important

src/components/2pan/index.vue

@@ -133,11 +133,11 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  hideLeftButtons:{
+  hideLeftButtons: {
     type: Boolean,
     default: false,
   },
-  hideRightButtons:{
+  hideRightButtons: {
     type: Boolean,
     default: false,
   },
@@ -175,7 +175,7 @@ const props = defineProps({
   },
   refresh: {
     type: Function,
-    default: () => { },
+    default: () => {},
   },
   total: {
     type: Number,
@@ -231,9 +231,11 @@ const props = defineProps({
         return row
       },
 
-      cancel: async () => { },
-      add: async () => { return {} },
-      onMounted: async () => { },
+      cancel: async () => {},
+      add: async () => {
+        return {}
+      },
+      onMounted: async () => {},
     },
   },
 })
@@ -275,11 +277,14 @@ const route = useRoute()
 const { pagination, onRequest, initializePagination } = usePagination()
 initializePagination(props.total)
 
-watch(() => props.data, async () => {
-  if (pagination.value) {
-    pagination.value.rowsNumber = props.total
-  }
-})
+watch(
+  () => props.data,
+  async () => {
+    if (pagination.value) {
+      pagination.value.rowsNumber = props.total
+    }
+  },
+)
 
 const emit = defineEmits(['create', 'refresh', 'read', 'update', 'delete'])
 const { debug } = useDebug()
@@ -304,10 +309,10 @@ function highlightRow(rowKey) {
   }
 }
 function selectedIsHidden() {
-  if (props.hideSelection === false){
-    return "multiple"
-  }else {
-    return "none"
+  if (props.hideSelection === false) {
+    return 'multiple'
+  } else {
+    return 'none'
   }
 }
 
@@ -334,7 +339,7 @@ async function read(row) {
 async function add() {
   const read = NEW_ID
   targetId.value = read
-  target.value = await props.actions.add() || {}
+  target.value = (await props.actions.add()) || {}
   await router.push({ query: { ...route.query, read } })
 }
 
@@ -404,5 +409,4 @@ onMounted(async () => {
 })
 </script>
 
-<style>
-</style>
+<style></style>

src/components/identityForm/actions.vue

@@ -1,9 +1,25 @@
 <template lang="pug">
 div.flex
   div
+    q-btn.sesame.infinite.animated.flash(color="negative" @click="validationsModal = true" v-if="!isNew && hasValidations()" outline)
+      q-tooltip.text-body2(slot="trigger") Afficher les erreurs
+      q-icon.text-negative(name='mdi-alert-box')
+    q-dialog(v-model="validationsModal")
+      q-card(style="min-width: 350px")
+        q-card-section.q-pa-sm.bg-negative.text-white.flex
+          q-icon(name='mdi-alert-box' size="2rem")
+          div.text-h6.q-ml-md Erreurs de validation
+        q-card-section.q-py-sm
+          q-list(separator)
+            q-item(v-for="field in Object.keys(validations)" :key="field")
+              q-item-section.text-negative
+                q-item-label {{ field }}
+                q-item-label(v-for='f in validations[field]' caption) - {{ f }}
+        q-card-actions(align="right")
+          q-btn(flat label="Fermer" color="primary" v-close-popup)
     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-toggle.q-pa-md.q-gutter-y-lg(
+    q-toggle.q-px-md.q-gutter-y-lg(
       checked-icon="mdi-account-check"
       unchecked-icon="mdi-account-cancel"
       indeterminate-icon="mdi-lock-reset"
@@ -76,6 +92,10 @@ const props = defineProps({
   refreshTarget: {
     type: Function,
   },
+  validations: {
+    type: Object,
+    default: {},
+  },
 })
 
 const $q = useQuasar()
@@ -85,6 +105,8 @@ const { handleError } = useErrorHandling()
 
 const emits = defineEmits(['submit', 'sync', 'logs', 'create', 'delete'])
 
+const validationsModal = ref(false)
+
 async function doChangePassword() {
   const requestOptions = { method: 'POST', body: JSON.stringify({ id: props.identity._id, newPassword: newpassword.value }) }
   try {
@@ -105,6 +127,18 @@ async function doChangePassword() {
   }
   resetPasswordModal.value = false
 }
+
+function hasValidations() {
+  if (props.validations) {
+    for (const field in props.validations) {
+      if (Object.keys(props.validations[field]).length > 0) {
+        return true
+      }
+    }
+  }
+  return false
+}
+
 async function submit() {
   // console.log('submit from actions')
   emits('submit')

src/components/jsonFormRendererApi.vue

@@ -100,7 +100,7 @@ const data = defineModel('data', {
 function onChange(event: JsonFormsChangeEvent) {
   data.value = event.data
 
-  console.log('onChange', event)
+  // console.log('onChange', event)
 
   if (!event.data) {
     console.error('error', event.errors)

src/composables/useMenu.ts

@@ -173,7 +173,7 @@ function useMenu(identityStateStore) {
       const stateValue = identityStateStore.getStateValue(label)
       const value = stateValue > 9999 ? '9999+' : stateValue?.toString() || '0'
 
-      console.log('stateValue', label, stateValue, value)
+      // console.log('stateValue', label, stateValue, value)
 
       // const badgeType = menu.badgeValue ? menu.badgeValue : 'UNKNOWN'
       // const stateInfo = getStateInfos(IdentityState[badgeType])

src/pages/identities/index.vue

@@ -38,6 +38,7 @@ q-page.container
         @sync="sync"
         @logs="logs"
         @delete="deleteIdentity"
+        :validations="getValidations(target)"
         :crud="crud"
         :isNew="isNew"
         :refreshTarget="refreshTarget"
@@ -222,5 +223,9 @@ const fieldsList = computed(() => {
   }, [])
 })
 
+function getValidations(target: Identity) {
+  return target?.additionalFields?.validations ? target?.additionalFields?.validations : {}
+}
+
 provide('fieldsList', fieldsList.value)
 </script>