@drax/crud-vue 0.5.9 → 0.5.12

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.5.9",
+  "version": "0.5.12",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -24,9 +24,9 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@drax/common-front": "^0.5.5",
+    "@drax/common-front": "^0.5.11",
     "@drax/crud-front": "^0.5.3",
-    "@drax/crud-share": "^0.5.9"
+    "@drax/crud-share": "^0.5.12"
   },
   "peerDependencies": {
     "pinia": "^2.2.2",
@@ -63,5 +63,5 @@
     "vue-tsc": "^2.0.11",
     "vuetify": "^3.7.1"
   },
-  "gitHead": "9b734c6232ae023b9f718b3a503049d2731e47df"
+  "gitHead": "440be142d8877498814d5c4914e645004fd60f90"
 }

package/src/EntityCrud.ts

@@ -60,6 +60,8 @@ class EntityCrud implements IEntityCrud{
       field.objectFields.forEach(subField => {
         if(subField.type === 'object'){
           value[subField.name] = this.objectFields(subField)
+        }if(subField.type === 'number' && field.default!= undefined){
+          value[subField.name] = null
         }else{
           value[subField.name] = subField.default
         }
@@ -77,6 +79,8 @@ class EntityCrud implements IEntityCrud{
         value = this.objectFields(field)
       }else if(field.default != undefined){
         value = field.default
+      }else{
+        value = null
       }
 
       return {...acc, [field.name]: value }

package/src/components/CrudFormField.vue

@@ -7,15 +7,16 @@ import {useI18n} from "vue-i18n";
 import {useCrudStore} from "../stores/UseCrudStore";
 import {VDateInput} from 'vuetify/labs/VDateInput'
 import type {IEntityCrud, IEntityCrudField, IEntityCrudFilter} from "@drax/crud-share";
+
 const {t, te} = useI18n()
 
 const store = useCrudStore()
 
 const valueModel = defineModel<any>({type: [String, Number, Boolean, Object, Array], default: false})
 
-const {index, entity, field, disableRules} = defineProps({
+const {index, entity, field, disableRules, parentField} = defineProps({
   entity: {type: Object as PropType<IEntityCrud>, required: true},
-  field: {type: Object as PropType<IEntityCrudField|IEntityCrudFilter|undefined>, required: true},
+  field: {type: Object as PropType<IEntityCrudField | IEntityCrudFilter | undefined>, required: true},
   prependIcon: {type: String, default: ''},
   prependInnerIcon: {type: String, default: ''},
   appendIcon: {type: String, default: ''},
@@ -25,18 +26,21 @@ const {index, entity, field, disableRules} = defineProps({
   singleLine: {type: Boolean, default: false},
   clearable: {type: Boolean, default: false},
   disableRules: {type: Boolean, default: false},
-  index: {type: Number, default: 0},
+  parentField: {type: String, default: null, required: false},
+  index: {type: Number, default: null, required: false},
   density: {type: String as PropType<'comfortable' | 'compact' | 'default'>, default: 'default'},
-  variant: {type: String as PropType<'underlined' | 'outlined' | 'filled' | 'solo' | 'solo-inverted' | 'solo-filled' | 'plain'>, default: 'filled'},
+  variant: {
+    type: String as PropType<'underlined' | 'outlined' | 'filled' | 'solo' | 'solo-inverted' | 'solo-filled' | 'plain'>,
+    default: 'filled'
+  },
 })
 
 
-
-if(!field){
+if (!field) {
   throw new Error("CrudFormField must be provided with a field object")
 }
 
-const name = computed(() => index > 0 ? `${field.name}_${index}` : field.name)
+const name = computed(() => index >= 0 ? `${field.name}_${index}` : field.name)
 
 const label = computed(() => {
   const i18n = `${entity.name}.field.${field.name}`
@@ -44,12 +48,16 @@ const label = computed(() => {
 })
 
 const rules = computed(() => {
-  if(disableRules) return undefined
+  if (disableRules) return undefined
   return entity.getRule(field.name) as any
 })
 
-const inputErrors = computed(() =>
-    store.getInputErrors(field.name).map((error: string) => t(te(error) ? t(error) : error))
+const inputErrors = computed(() => {
+      let sIndex = (index != null && index >= 0) ? `${index}.` : ''
+      let name = parentField ? `${parentField}.${sIndex}${field.name}` : field.name
+      console.log("inputErrors name",name, index, sIndex)
+      return store.getInputErrors(name).map((error: string) => t(te(error) ? t(error) : error))
+    }
 )
 
 defineEmits(['updateValue'])
@@ -85,7 +93,7 @@ defineEmits(['updateValue'])
         type="number"
         :name="name"
         :label="label"
-        v-model="valueModel"
+        v-model.number="valueModel"
         :readonly="readonly"
         :error-messages="inputErrors"
         :rules="rules"
@@ -174,6 +182,7 @@ defineEmits(['updateValue'])
             v-for="oField in field.objectFields"
             :entity="entity"
             :field="oField"
+            :parent-field="field.name"
             v-model="valueModel[oField.name]"
             :density="density"
             :variant="variant"
@@ -245,7 +254,7 @@ defineEmits(['updateValue'])
         type="number"
         :name="name"
         :label="label"
-        v-model="valueModel"
+        v-model   ="valueModel"
         :multiple="true"
         :chips="true"
         :readonly="readonly"

package/src/components/CrudFormList.vue

@@ -46,7 +46,7 @@ defineEmits(['updateValue'])
     <v-card-title class="text-h5">{{field.label}}</v-card-title>
     <v-card-text>
       <v-row>
-        <v-col cols="12" v-for="(item,index) in valueModel" :key="index" class="text-right">
+        <v-col cols="12" v-for="(item,index) in valueModel" :key="index" >
           <v-row dense align="center">
             <v-col cols="11">
               <template v-for="key in Object.keys(item as Record<string, any>)" :key="key">
@@ -56,6 +56,7 @@ defineEmits(['updateValue'])
                     :field="getField(key)"
                     v-model="(valueModel[index] as any)[key]"
                     :readonly="readonly"
+                    :parentField="field.name"
                     :index="index"
                     :density="density"
                     :variant="variant"

package/src/composables/UseCrud.ts

@@ -4,224 +4,331 @@ import {computed} from "vue";
 
 export function useCrud(entity: IEntityCrud) {
 
-  const store = useCrudStore()
-
-  const dialog = computed({get(){return store.dialog} , set(value){store.setDialog(value)}})
-  const operation = computed({get(){return store.operation} , set(value){store.setOperation(value)}})
-  const form = computed({get(){return store.form} , set(value){store.setForm(value)}})
-  const formValid = computed({get(){return store.formValid} , set(value){store.setFormValid(value)}})
-  const notify = computed({get(){return store.notify} , set(value){store.setNotify(value)}})
-  const error = computed({get(){return store.error} , set(value){store.setError(value)}})
-  const message = computed({get(){return store.message} , set(value){store.setMessage(value)}})
-  const loading = computed({get(){return store.loading} , set(value){store.setLoading(value)}})
-  const itemsPerPage = computed({get(){return store.itemsPerPage} , set(value){store.setItemsPerPage(value)}})
-  const page = computed({get(){return store.page} , set(value){store.setPage(value)}})
-  const sortBy = computed({get(){return store.sortBy} , set(value){store.setSortBy(value)}})
-  const search = computed({get(){return store.search} , set(value){store.setSearch(value)}})
-  const totalItems = computed({get(){return store.totalItems} , set(value){store.setTotalItems(value)}})
-  const items = computed({get(){return store.items} , set(value){store.setItems(value)}})
-  const exportFiles = computed({get(){return store.exportFiles} , set(value){store.setExportFiles(value)}})
-  const exportLoading = computed({get(){return store.exportLoading} , set(value){store.setExportLoading(value)}})
-  const exportListVisible = computed({get(){return store.exportListVisible} , set(value){store.setExportListVisible(value)}})
-  const filters = computed({get(){return store.filters} , set(value){store.setFilters(value)}})
-
-
-  async function doPaginate() {
-    store.setLoading(true)
-    try {
-
-      const r: IDraxPaginateResult<any> = await entity?.provider.paginate({
-        page: store.page,
-        limit: store.itemsPerPage,
-        orderBy: store.sortBy[0]?.key,
-        order: store.sortBy[0]?.order,
-        search: store.search,
-        filters: store.filters
-      })
-      store.setItems(r.items)
-      store.setTotalItems(r.total)
-    } catch (e) {
-      console.error("Error paginating", e)
-    } finally {
-      store.setLoading(false)
-    }
-  }
-
-  async function doExport(format: 'JSON') {
-    store.setExportLoading(true)
-    store.setExportListVisible(true)
-    try {
-
-      if(!entity?.provider.export) {
-        throw new Error("provider.export not implemented")
-      }
-
-      const headers: string = entity.exportHeaders.join(',')
-
-      const r: any = await entity?.provider.export({
-        format: format,
-        headers: headers,
-        separator: ";",
-        orderBy: store.sortBy[0]?.key,
-        order: store.sortBy[0]?.order,
-        search: store.search
-      })
-
-      if(r && r.url) {
-        store.addExportFile(r)
-        store.showMessage("Export successful")
-      }
-
-      return r
-
-    } catch (e) {
-      console.error("Error exporting csv", e)
-    } finally {
-      store.setExportLoading(false)
-    }
-  }
-
-
-
-  function cast(item: any){
-    entity.fields.filter(field => field.type === 'date')
-        .forEach(field => {
-            item[field.name] = new Date(item[field.name])
-        })
-
-    entity.fields.filter(field => field.type === 'ref')
-        .forEach(field => {
-          item[field.name] = item[field.name]?._id ? item[field.name]._id : item[field.name]
-        })
-
-    entity.fields.filter(field => field.type === 'array.ref')
-        .forEach(field => {
-          if(item[field.name] && Array.isArray(item[field.name])){
-            item[field.name] = item[field.name].map(((i:any) => i?._id ? i._id : i))
-          }
-        })
-
-    return item
-  }
-
-  function onView(item: object) {
-    store.setOperation("view")
-    store.setForm(cast({...item}))
-    openDialog()
-  }
-
-
-  function onCreate() {
-    store.setOperation("create")
-    store.setForm(entity.form)
-    openDialog()
-  }
-
-  function onEdit(item: object) {
-    store.setOperation("edit")
-    store.setForm(cast({...item}))
-    openDialog()
-  }
-
-  function onDelete(item: object) {
-    store.setOperation("delete")
-    store.setForm(cast({...item}))
-    openDialog()
-  }
-
-  function onCancel() {
-    closeDialog()
-    store.setError("")
-    store.setInputErrors(null)
-  }
-
-  function onSubmit(formData: any) {
-    store.setInputErrors(null)
-    switch (store.operation) {
-      case "view":
+    const store = useCrudStore()
+
+    const dialog = computed({
+        get() {
+            return store.dialog
+        }, set(value) {
+            store.setDialog(value)
+        }
+    })
+    const operation = computed({
+        get() {
+            return store.operation
+        }, set(value) {
+            store.setOperation(value)
+        }
+    })
+    const form = computed({
+        get() {
+            return store.form
+        }, set(value) {
+            store.setForm(value)
+        }
+    })
+    const formValid = computed({
+        get() {
+            return store.formValid
+        }, set(value) {
+            store.setFormValid(value)
+        }
+    })
+    const notify = computed({
+        get() {
+            return store.notify
+        }, set(value) {
+            store.setNotify(value)
+        }
+    })
+    const error = computed({
+        get() {
+            return store.error
+        }, set(value) {
+            store.setError(value)
+        }
+    })
+    const message = computed({
+        get() {
+            return store.message
+        }, set(value) {
+            store.setMessage(value)
+        }
+    })
+    const loading = computed({
+        get() {
+            return store.loading
+        }, set(value) {
+            store.setLoading(value)
+        }
+    })
+    const itemsPerPage = computed({
+        get() {
+            return store.itemsPerPage
+        }, set(value) {
+            store.setItemsPerPage(value)
+        }
+    })
+    const page = computed({
+        get() {
+            return store.page
+        }, set(value) {
+            store.setPage(value)
+        }
+    })
+    const sortBy = computed({
+        get() {
+            return store.sortBy
+        }, set(value) {
+            store.setSortBy(value)
+        }
+    })
+    const search = computed({
+        get() {
+            return store.search
+        }, set(value) {
+            store.setSearch(value)
+        }
+    })
+    const totalItems = computed({
+        get() {
+            return store.totalItems
+        }, set(value) {
+            store.setTotalItems(value)
+        }
+    })
+    const items = computed({
+        get() {
+            return store.items
+        }, set(value) {
+            store.setItems(value)
+        }
+    })
+    const exportFiles = computed({
+        get() {
+            return store.exportFiles
+        }, set(value) {
+            store.setExportFiles(value)
+        }
+    })
+    const exportLoading = computed({
+        get() {
+            return store.exportLoading
+        }, set(value) {
+            store.setExportLoading(value)
+        }
+    })
+    const exportListVisible = computed({
+        get() {
+            return store.exportListVisible
+        }, set(value) {
+            store.setExportListVisible(value)
+        }
+    })
+    const filters = computed({
+        get() {
+            return store.filters
+        }, set(value) {
+            store.setFilters(value)
+        }
+    })
+
+
+    async function doPaginate() {
+        store.setLoading(true)
+        try {
+
+            const r: IDraxPaginateResult<any> = await entity?.provider.paginate({
+                page: store.page,
+                limit: store.itemsPerPage,
+                orderBy: store.sortBy[0]?.key,
+                order: store.sortBy[0]?.order,
+                search: store.search,
+                filters: store.filters
+            })
+            store.setItems(r.items)
+            store.setTotalItems(r.total)
+        } catch (e) {
+            console.error("Error paginating", e)
+        } finally {
+            store.setLoading(false)
+        }
+    }
+
+    async function doExport(format: 'JSON') {
+        store.setExportLoading(true)
+        store.setExportListVisible(true)
+        try {
+
+            if (!entity?.provider.export) {
+                throw new Error("provider.export not implemented")
+            }
+
+            const headers: string = entity.exportHeaders.join(',')
+
+            const r: any = await entity?.provider.export({
+                format: format,
+                headers: headers,
+                separator: ";",
+                orderBy: store.sortBy[0]?.key,
+                order: store.sortBy[0]?.order,
+                search: store.search
+            })
+
+            if (r && r.url) {
+                store.addExportFile(r)
+                store.showMessage("Export successful")
+            }
+
+            return r
+
+        } catch (e) {
+            console.error("Error exporting csv", e)
+        } finally {
+            store.setExportLoading(false)
+        }
+    }
+
+
+    function cast(item: any) {
+        entity.fields.filter(field => field.type === 'date')
+            .forEach(field => {
+                item[field.name] = new Date(item[field.name])
+            })
+
+        entity.fields.filter(field => field.type === 'ref')
+            .forEach(field => {
+                item[field.name] = item[field.name]?._id ? item[field.name]._id : item[field.name]
+            })
+
+        entity.fields.filter(field => field.type === 'array.ref')
+            .forEach(field => {
+                if (item[field.name] && Array.isArray(item[field.name])) {
+                    item[field.name] = item[field.name].map(((i: any) => i?._id ? i._id : i))
+                }
+            })
+
+        return item
+    }
+
+    function onView(item: object) {
+        store.setOperation("view")
+        store.setForm(cast({...item}))
+        openDialog()
+    }
+
+
+    function onCreate() {
+        store.setOperation("create")
+        store.setForm(entity.form)
+        openDialog()
+    }
+
+    function onEdit(item: object) {
+        store.setOperation("edit")
+        store.setForm(cast({...item}))
+        openDialog()
+    }
+
+    function onDelete(item: object) {
+        store.setOperation("delete")
+        store.setForm(cast({...item}))
+        openDialog()
+    }
+
+    function onCancel() {
         closeDialog()
-        break
-      case "create":
-        doCreate(formData)
-        break
-      case "edit":
-        doUpdate(formData)
-        break
-      case "delete":
-        doDelete(formData)
-        break
-    }
-  }
-
-  function openDialog() {
-    store.setDialog(true)
-  }
-
-  function closeDialog() {
-    store.setDialog(false)
-  }
-
-  async function doCreate(formData: any) {
-    try {
-      await entity?.provider.create(formData)
-      await doPaginate()
-      closeDialog()
-      store.showMessage("Entity created successfully!")
-    } catch (e: any) {
-      if(e.inputErrors){
-        store.setInputErrors(e.inputErrors)
-      }
-      store.setError(e.message || "An error occurred while creating the entity")
-      console.error("Error creating entity", e)
-    }
-
-  }
-
-  async function doUpdate(formData: any) {
-    try {
-      await entity?.provider.update(formData._id, formData)
-      await doPaginate()
-      closeDialog()
-      store.showMessage("Entity updated successfully!")
-    } catch (e: any) {
-      console.log("inputErrors", e.inputErrors)
-      if(e.inputErrors){
-        store.setInputErrors(e.inputErrors)
-      }
-      store.setError(e.message || "An error occurred while updating the entity")
-      console.error("Error updating entity", e)
-    }
-
-  }
-
-  async function doDelete(formData: any) {
-    try {
-      await entity?.provider.delete(formData._id)
-      await doPaginate()
-      closeDialog()
-      store.showMessage("Entity deleted successfully!")
-    } catch (e: any) {
-      store.setError(e.message || "An error occurred while deleting the entity")
-      console.error("Error updating entity", e)
-    }
-
-  }
-
-  function resetCrudStore(){
-    store.$reset()
-  }
-
-  function prepareFilters(){
-    store.setFilters(entity.formFilters)
-  }
-
-
-  return {
-    doPaginate, doExport, onView, onCreate, onEdit, onDelete, onCancel, onSubmit,resetCrudStore,
-    operation, dialog, form, notify, error, message, formValid,
-    loading, itemsPerPage, page, sortBy, search, totalItems, items,
-    prepareFilters,filters,
-    exportFiles,exportLoading,exportListVisible
-  }
+        store.setError("")
+        store.setInputErrors(null)
+    }
+
+    function onSubmit(formData: any) {
+        store.setInputErrors(null)
+        switch (store.operation) {
+            case "view":
+                closeDialog()
+                break
+            case "create":
+                doCreate(formData)
+                break
+            case "edit":
+                doUpdate(formData)
+                break
+            case "delete":
+                doDelete(formData)
+                break
+        }
+    }
+
+    function openDialog() {
+        store.setDialog(true)
+    }
+
+    function closeDialog() {
+        store.setDialog(false)
+    }
+
+    async function doCreate(formData: any) {
+        try {
+            await entity?.provider.create(formData)
+            await doPaginate()
+            closeDialog()
+            store.showMessage("Entity created successfully!")
+        } catch (e: any) {
+            if (e.inputErrors) {
+                store.setInputErrors(e.inputErrors)
+            }
+            store.setError(e.message || "An error occurred while creating the entity")
+            console.error("Error creating entity", e)
+        }
+
+    }
+
+    async function doUpdate(formData: any) {
+        try {
+            await entity?.provider.update(formData._id, formData)
+            await doPaginate()
+            closeDialog()
+            store.showMessage("Entity updated successfully!")
+        } catch (e: any) {
+            console.log("inputErrors", e.inputErrors)
+            if (e.inputErrors) {
+                store.setInputErrors(e.inputErrors)
+            }
+            store.setError(e.message || "An error occurred while updating the entity")
+            console.error("Error updating entity", e)
+        }
+
+    }
+
+    async function doDelete(formData: any) {
+        try {
+            await entity?.provider.delete(formData._id)
+            await doPaginate()
+            closeDialog()
+            store.showMessage("Entity deleted successfully!")
+        } catch (e: any) {
+            store.setError(e.message || "An error occurred while deleting the entity")
+            console.error("Error updating entity", e)
+        }
+
+    }
+
+    function resetCrudStore() {
+        store.$reset()
+    }
+
+    function prepareFilters() {
+        store.setFilters(entity.formFilters)
+    }
+
+
+    return {
+        doPaginate, doExport, onView, onCreate, onEdit, onDelete, onCancel, onSubmit, resetCrudStore,
+        operation, dialog, form, notify, error, message, formValid,
+        loading, itemsPerPage, page, sortBy, search, totalItems, items,
+        prepareFilters, filters,
+        exportFiles, exportLoading, exportListVisible
+    }
 
 }