@drax/crud-vue 0.11.4 → 0.12.1

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.11.4",
+  "version": "0.12.1",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -24,10 +24,10 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@drax/common-front": "^0.11.3",
-    "@drax/crud-front": "^0.11.3",
-    "@drax/crud-share": "^0.11.4",
-    "@drax/media-vue": "^0.11.3"
+    "@drax/common-front": "^0.12.1",
+    "@drax/crud-front": "^0.12.1",
+    "@drax/crud-share": "^0.12.1",
+    "@drax/media-vue": "^0.12.1"
   },
   "peerDependencies": {
     "pinia": "^2.2.2",
@@ -64,5 +64,5 @@
     "vue-tsc": "^2.1.10",
     "vuetify": "^3.7.1"
   },
-  "gitHead": "543e9fc9947da228d0f2dc37d2bae3a39ec32250"
+  "gitHead": "76fd366e12449f5f605662197f985a28d98058a2"
 }

package/src/EntityCrud.ts

@@ -1,184 +1,191 @@
 import type {
-  IEntityCrud, IEntityCrudForm, IEntityCrudHeader, IEntityCrudRefs,
-  IEntityCrudRules, IEntityCrudField, IEntityCrudPermissions,
-  IDraxCrudProvider, IEntityCrudFilter, IEntityCrudFormFilter
+    IEntityCrud, IEntityCrudForm, IEntityCrudHeader, IEntityCrudRefs,
+    IEntityCrudRules, IEntityCrudField, IEntityCrudPermissions,
+    IDraxCrudProvider, IEntityCrudFilter, IEntityCrudFormFilter
 } from "@drax/crud-share";
 
 
+class EntityCrud implements IEntityCrud {
 
-class EntityCrud implements IEntityCrud{
+    name: string = ''
 
-  name: string = ''
-
-  constructor() {
-  }
+    constructor() {
+    }
 
-  static get instance():IEntityCrud{
-    throw new Error('EntityCrud instance not found')
-  }
+    static get instance(): IEntityCrud {
+        throw new Error('EntityCrud instance not found')
+    }
 
 
-  get headers():IEntityCrudHeader[]{
-    return [
-      {title: 'ID',key:'_id'},
-    ]
-  }
+    get headers(): IEntityCrudHeader[] {
+        return [
+            {title: 'ID', key: '_id'},
+        ]
+    }
 
-  get actionHeaders():IEntityCrudHeader[]{
-    return [
-      {
-        title: 'action.actions',
-        key: 'actions',
-        sortable: false,
-        align: 'center',
-        minWidth: '190px'
-      },
-    ]
-  }
+    get actionHeaders(): IEntityCrudHeader[] {
+        return [
+            {
+                title: 'action.actions',
+                key: 'actions',
+                sortable: false,
+                align: 'center',
+                minWidth: '190px'
+            },
+        ]
+    }
 
 
-  get permissions(): IEntityCrudPermissions {
-    return {
-      manage: 'manage', view: 'view', create: 'create',  update: 'update', delete: 'delete'
+    get permissions(): IEntityCrudPermissions {
+        return {
+            manage: 'manage', view: 'view', create: 'create', update: 'update', delete: 'delete'
+        }
     }
-  }
 
-  get provider(): IDraxCrudProvider<any, any, any>{
-    throw new Error('provider not implemented')
-  }
+    get provider(): IDraxCrudProvider<any, any, any> {
+        throw new Error('provider not implemented')
+    }
 
-  get fields():IEntityCrudField[]{
-    return [
-      {name: '_id', type: 'string', label: 'ID', default: '' },
-    ]
-  }
+    get fields(): IEntityCrudField[] {
+        return [
+            {name: '_id', type: 'string', label: 'ID', default: ''},
+        ]
+    }
 
-  get createFields(){
-    return this.fields
-  }
+    get createFields() {
+        return this.fields
+    }
 
-  get updateFields(){
-    return this.fields
-  }
+    get updateFields() {
+        return this.fields
+    }
 
-  get deleteFields(){
-    return this.fields
-  }
+    get deleteFields() {
+        return this.fields
+    }
 
-  get viewFields(){
-    return this.fields
-  }
+    get viewFields() {
+        return this.fields
+    }
 
-  get filters():IEntityCrudFilter[]{
-    return [
-      {name: '_id', type: 'string', label: 'ID', default: '', operator: 'eq' },
-    ]
-  }
+    get filters(): IEntityCrudFilter[] {
+        return [
+            {name: '_id', type: 'string', label: 'ID', default: '', operator: 'eq'},
+        ]
+    }
 
-  objectFields(field:IEntityCrudField){
-    let value:any = {}
-    if(field.objectFields){
-      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
+    objectFields(field: IEntityCrudField) {
+        let value: any = {}
+        if (field.objectFields) {
+            field.objectFields.forEach(subField => {
+
+                if (subField.default != undefined) {
+                    value[subField.name] = field.default
+                } else if (subField.type === 'object') {
+                    value[subField.name] = this.objectFields(field)
+                } else if (/array/.test(field.type)) {
+                    value[subField.name] = []
+                } else {
+                    value = null
+                }
+
+            })
         }
-
-      })
+        return value
     }
-    return value
-  }
-
-  get form():IEntityCrudForm{
 
-    return this.fields.reduce((acc, field) => {
-      let value = null
-      if(field.type === 'object'){
-        value = this.objectFields(field)
-      }else if(field.default != undefined){
-        value = field.default
-      }else{
-        value = null
-      }
+    get form(): IEntityCrudForm {
 
-      return {...acc, [field.name]: value }
-    }, {})
+        return this.fields.reduce((acc, field) => {
+            let value = null
+            if (field.default != undefined) {
+                value = field.default
+            } else if (field.type === 'object') {
+                value = this.objectFields(field)
+            } else if (/array/.test(field.type)) {
+                value = []
+            } else {
+                value = null
+            }
 
-  }
+            return {...acc, [field.name]: value}
+        }, {})
 
+    }
 
-  get formFilters():IEntityCrudFormFilter[]{
-    return this.filters.map(
-        (filter:IEntityCrudFilter) =>
-            ({field:filter.name, value: null, operator: filter.operator  })
-    )
-  }
 
-  get refs():IEntityCrudRefs{
-    return {}
-  }
+    get formFilters(): IEntityCrudFormFilter[] {
+        return this.filters.map(
+            (filter: IEntityCrudFilter) =>
+                ({field: filter.name, value: null, operator: filter.operator})
+        )
+    }
 
-  getRef(ref: string):IEntityCrud{
-    if(!this.refs.hasOwnProperty(ref))  {
-      throw new Error("Ref not found: " + ref)
+    get refs(): IEntityCrudRefs {
+        return {}
     }
 
-    return this.refs[ref]
-  }
+    getRef(ref: string): IEntityCrud {
+        if (!this.refs.hasOwnProperty(ref)) {
+            throw new Error("Ref not found: " + ref)
+        }
+
+        return this.refs[ref]
+    }
 
-  get rules(): IEntityCrudRules{
-    return {}
-  }
+    get rules(): IEntityCrudRules {
+        return {}
+    }
 
-  getRule(field:string|undefined):Array<Function>|undefined  {
-      return field && this.rules[field] && this.rules[field].length > 0 ? this.rules[field] : undefined
-  }
+    getRule(field: string | undefined): Array<Function> | undefined {
+        return field && this.rules[field] && this.rules[field].length > 0 ? this.rules[field] : undefined
+    }
 
-  get isViewable(){
-    return true
-  }
+    get isViewable() {
+        return true
+    }
 
-  get isEditable(){
-    return true
-  }
+    get isEditable() {
+        return true
+    }
 
-  get isCreatable(){
-    return true
-  }
+    get isCreatable() {
+        return true
+    }
 
-  get isDeletable(){
-    return true
-  }
+    get isDeletable() {
+        return true
+    }
 
-  get isExportable(){
-    return true
-  }
+    get isExportable() {
+        return true
+    }
 
-  get exportFormats(){
-    return ['CSV', 'JSON']
-  }
+    get exportFormats() {
+        return ['CSV', 'JSON']
+    }
 
-  get exportHeaders(){
-    return ['_id']
-  }
+    get exportHeaders() {
+        return ['_id']
+    }
 
-  get isImportable(){
-    return true
-  }
+    get isImportable() {
+        return true
+    }
 
-  get importFormats(){
-    return ['CSV', 'JSON']
-  }
+    get importFormats() {
+        return ['CSV', 'JSON']
+    }
 
-  get dialogFullscreen(){
-    return false
-  }
+    get dialogFullscreen() {
+        return false
+    }
 
+    get dialogMaxWidth() {
+        return ''
+    }
 
 }
 
 export default EntityCrud;
-export { EntityCrud }
+export {EntityCrud}

package/src/components/Crud.vue

@@ -22,6 +22,28 @@ onBeforeMount(() => {
   prepareFilters()
 })
 
+const emit = defineEmits(['created', 'updated', 'deleted', 'viewed'])
+
+async function submit() {
+  let result = await onSubmit(form.value)
+  switch (result.status) {
+    case "created":
+      emit("created", result.item)
+      break
+    case "updated":
+      emit("updated", result.item)
+      break
+    case "deleted":
+      emit("deleted")
+      break
+    case "viewed":
+      emit("deleted")
+      break
+  }
+
+
+}
+
 </script>
 
 <template>
@@ -73,7 +95,7 @@ onBeforeMount(() => {
             :error="error"
             :operation="operation"
             :readonly="operation === 'delete'"
-            @submit="onSubmit"
+            @submit="submit"
             @cancel="onCancel"
         >
 

package/src/components/CrudAutocomplete.vue

@@ -2,6 +2,7 @@
 import {debounce} from "@drax/common-front"
 import { type PropType, type Ref} from "vue";
 import {ref, onBeforeMount} from "vue";
+import {getItemId} from "../helpers/getItemId"
 import type {IEntityCrud, IEntityCrudField} from "@drax/crud-share";
 
 const valueModel = defineModel<string | string[]>({type: [String, Array], required: false})
@@ -57,7 +58,6 @@ async function search(value: any) {
 }
 
 onBeforeMount(async () => {
-
   await search('')
   await checkIds()
 })
@@ -68,7 +68,7 @@ async function checkIds(ids: Array<string> = []) {
     if(valueModel.value) {
       let ids = Array.isArray(valueModel.value) ? valueModel.value : [valueModel.value]
       for (let id of ids) {
-        if (!items.value.some((item: any) => item._id === id)) {
+        if (!items.value.some((item: any) => getItemId(item) === id)) {
           if (!entity) {
             throw new Error('CrudAutocomplete Entity is required')
           }
@@ -88,9 +88,6 @@ async function checkIds(ids: Array<string> = []) {
   }
 }
 
-
-
-
 defineEmits(['updateValue'])
 
 </script>

package/src/components/CrudDialog.vue

@@ -30,7 +30,7 @@ const title = computed(() => {
 </script>
 
 <template>
-  <v-dialog v-model="dialog" :fullscreen="entity.dialogFullscreen">
+  <v-dialog v-model="dialog" :fullscreen="entity.dialogFullscreen" :max-width="entity.dialogMaxWidth">
     <v-card>
       <v-toolbar>
         <v-toolbar-title>{{title}}</v-toolbar-title>

package/src/components/CrudForm.vue

@@ -2,6 +2,7 @@
 import {useI18n} from "vue-i18n";
 import type {IEntityCrud, IEntityCrudField, IEntityCrudOperation} from "@drax/crud-share";
 import {useFormUtils} from "../composables/UseFormUtils";
+import {getItemId} from "../helpers/getItemId";
 import CrudFormField from "./CrudFormField.vue";
 import {computed, defineEmits, defineModel, defineProps, ref} from "vue";
 import type {PropType} from "vue";
@@ -11,6 +12,8 @@ import {useAuth} from '@drax/identity-vue'
 const {hasPermission} = useAuth()
 const {t, te} = useI18n()
 
+
+
 const valueModel = defineModel({type: [Object]})
 
 const {entity, operation} = defineProps({
@@ -20,6 +23,7 @@ const {entity, operation} = defineProps({
   error: {type: String, required: false},
 })
 
+
 const emit = defineEmits(['submit', 'cancel'])
 
 const store = useCrudStore()
@@ -76,7 +80,7 @@ const {
   <v-form ref="formRef" @submit.prevent>
     <v-card flat>
 
-      <v-card-subtitle v-if="valueModel._id">ID: {{ valueModel._id }}</v-card-subtitle>
+      <v-card-subtitle v-if="getItemId(valueModel)">ID: {{ getItemId(valueModel) }}</v-card-subtitle>
 
       <v-card-text v-if="error">
         <v-alert color="error">{{ te(error) ? t(error) : error }}</v-alert>
@@ -115,7 +119,7 @@ const {
       <v-card-actions>
         <v-spacer></v-spacer>
         <v-btn variant="text" color="grey" @click="cancel">{{ t('action.cancel') }}</v-btn>
-        <v-btn variant="flat" v-if="operation != 'view'" :color="submitColor" @click="submit">
+        <v-btn variant="flat" v-if="operation != 'view'" :color="submitColor" @click="submit" :loading="store.loading">
           {{ operation ? t('action.' + operation) : t('action.sent') }}
         </v-btn>
       </v-card-actions>

package/src/components/CrudFormField.vue

@@ -59,8 +59,7 @@ const rules = computed(() => {
 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))
+      return store.getFieldInputErrors(name).map((error: string) =>te(error) ? t(error) : error)
     }
 )
 

package/src/components/CrudFormList.vue

@@ -3,7 +3,9 @@ import {computed, type PropType} from "vue";
 import CrudFormField from "./CrudFormField.vue";
 import type {IEntityCrud, IEntityCrudField} from "@drax/crud-share";
 import {useI18n} from "vue-i18n";
+import {useCrudStore} from "../stores/UseCrudStore";
 
+const store = useCrudStore()
 const {t, te} = useI18n()
 const valueModel = defineModel({type: Array, default: () => []});
 
@@ -49,6 +51,14 @@ const label = computed(() => {
   return te(i18n) ? t(i18n) : field.label
 })
 
+const hasError = computed(() => {
+  return (index:number) => {
+    const fieldListName = field.name + '.' + index
+    return store.hasFieldListInputErrors(fieldListName)
+  }
+
+})
+
 defineEmits(['updateValue'])
 
 </script>
@@ -62,7 +72,7 @@ defineEmits(['updateValue'])
         <v-expansion-panel v-for="(item,index) in valueModel" :key="index">
 
           <v-expansion-panel-title>
-            {{ index }} - {{valueModel[index][Object.keys(valueModel[index] as any)[0]]}}
+            <v-chip class="mr-2" :color="hasError(index) ? 'red':'teal'">{{ index }}</v-chip> {{valueModel[index][Object.keys(valueModel[index] as any)[0]]}}
 
             <template v-slot:actions="{expanded}">
               <v-icon>{{expanded ? "mdi-menu-down" : "mdi-menu-up"}}</v-icon>

package/src/components/CrudSearch.vue

@@ -1,18 +1,38 @@
 <script setup lang="ts">
 import {useI18n} from "vue-i18n";
+import {debounce} from "@drax/common-front"
+import {ref, defineModel} from "vue"
+
+
 const {t} = useI18n()
 const model = defineModel<any>()
+
+let input = ref(model.value)
+
+const debouncedSearch = debounce(updateModel, 500)
+
+function updateModel() {
+  model.value = input.value
+}
+
+function clear() {
+  input.value = ''
+  updateModel()
+}
+
 </script>
 
 <template>
-  <v-text-field v-model="model"
+  <v-text-field v-model="input"
                 density="compact"
                 class="mr-2"
                 variant="outlined"
                 append-inner-icon="mdi-magnify"
                 :label="t('action.search')"
                 single-line hide-details
-                clearable @click:clear="() => model = ''"
+                @update:modelValue="debouncedSearch"
+                clearable
+                @click:clear="clear"
   />
 </template>
 

package/src/composables/UseCrud.ts

@@ -1,11 +1,13 @@
 import type {IDraxPaginateResult, IEntityCrud} from "@drax/crud-share";
 import {useCrudStore} from "../stores/UseCrudStore";
-import {computed} from "vue";
+import {computed, toRaw} from "vue";
+import getItemId from "../helpers/getItemId";
 
 export function useCrud(entity: IEntityCrud) {
 
     const store = useCrudStore()
 
+
     const dialog = computed({
         get() {
             return store.dialog
@@ -198,13 +200,16 @@ export function useCrud(entity: IEntityCrud) {
 
         entity.fields.filter(field => field.type === 'ref')
             .forEach(field => {
-                item[field.name] = item[field.name]?._id ? item[field.name]._id : item[field.name]
+                item[field.name] = getItemId(item[field.name]) ? getItemId(item[field.name]) : 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))
+                    item[field.name] = item[field.name].map(((i: any) => getItemId(i) ? getItemId(i) : i))
+                }else{
+                    item[field.name] = []
                 }
             })
 
@@ -242,22 +247,20 @@ export function useCrud(entity: IEntityCrud) {
         store.setInputErrors(null)
     }
 
-    function onSubmit(formData: any) {
+    async function onSubmit(formData: any): Promise<{status:string,item?:any}> {
         store.setInputErrors(null)
         switch (store.operation) {
             case "view":
                 closeDialog()
-                break
+                return {status: 'viewed'}
             case "create":
-                doCreate(formData)
-                break
+                return doCreate(formData)
             case "edit":
-                doUpdate(formData)
-                break
+                return doUpdate(formData)
             case "delete":
-                doDelete(formData)
-                break
+                return doDelete(formData)
         }
+        return {status: 'unknown'}
     }
 
     function openDialog() {
@@ -270,26 +273,33 @@ export function useCrud(entity: IEntityCrud) {
 
     async function doCreate(formData: any) {
         try {
-            await entity?.provider.create(formData)
+            store.setLoading(true)
+            let item = await entity?.provider.create(toRaw(formData))
             await doPaginate()
             closeDialog()
             store.showMessage("Entity created successfully!")
+            return {status: 'created', item: item}
         } 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)
+            return {status: 'error'}
+        } finally {
+            store.setLoading(false)
         }
 
     }
 
     async function doUpdate(formData: any) {
         try {
-            await entity?.provider.update(formData._id, formData)
+            store.setLoading(true)
+            let item = await entity?.provider.update(getItemId(formData), toRaw(formData))
             await doPaginate()
             closeDialog()
             store.showMessage("Entity updated successfully!")
+            return {status: 'updated', item: item}
         } catch (e: any) {
             //console.log("inputErrors", e.inputErrors)
             if (e.inputErrors) {
@@ -297,19 +307,27 @@ export function useCrud(entity: IEntityCrud) {
             }
             store.setError(e.message || "An error occurred while updating the entity")
             console.error("Error updating entity", e)
+            return {status: 'error'}
+        } finally {
+            store.setLoading(false)
         }
 
     }
 
     async function doDelete(formData: any) {
         try {
-            await entity?.provider.delete(formData._id)
+            store.setLoading(true)
+            await entity?.provider.delete(getItemId(formData))
             await doPaginate()
             closeDialog()
             store.showMessage("Entity deleted successfully!")
+            return {status: 'deleted'}
         } catch (e: any) {
             store.setError(e.message || "An error occurred while deleting the entity")
             console.error("Error updating entity", e)
+            return {status: 'error'}
+        } finally {
+            store.setLoading(false)
         }
 
     }

package/src/composables/UseInputErrorI18n.ts

@@ -0,0 +1,19 @@
+import {useCrudStore} from "../stores/UseCrudStore";
+import {useI18n} from "vue-i18n";
+import {computed} from "vue";
+
+export function useInputErrorI18n() {
+
+    const store = useCrudStore()
+
+    const {t, te} = useI18n()
+
+    const inputErrorsI18n = computed(() => {
+            return (name:string) => {
+                return store.getFieldInputErrors(name).map((error: string) => te(error) ? t(error) : error)
+            }
+        }
+    )
+
+    return {inputErrorsI18n}
+}

package/src/helpers/getItemId.ts

@@ -0,0 +1,11 @@
+const getItemId = (item: any) => {
+    if(item && item._id) {
+        return item._id
+    }else if(item && item.id) {
+        return item.id
+    }
+    return null
+}
+
+export default getItemId
+export {getItemId}

package/src/index.ts

@@ -10,6 +10,7 @@ import CrudAutocomplete from "./components/CrudAutocomplete.vue";
 import {useCrudStore} from "./stores/UseCrudStore";
 import {useCrud} from "./composables/UseCrud";
 import {useFormUtils} from "./composables/UseFormUtils";
+import {useInputErrorI18n} from "./composables/UseInputErrorI18n";
 import {EntityCrud} from "./EntityCrud";
 
 
@@ -26,6 +27,7 @@ export {
     useCrud,
     useFormUtils,
     useCrudStore,
+    useInputErrorI18n,
     EntityCrud
 
 }

package/src/stores/UseCrudStore.ts

@@ -14,7 +14,7 @@ export const useCrudStore = defineStore('CrudStore', {
             filters: [] as any[],
             items: [] as any[],
             totalItems: 0 as number,
-            itemsPerPage: 5 as number,
+            itemsPerPage: 10 as number,
             page: 1 as number,
             search: '' as string,
             sortBy: [] as any[],
@@ -25,15 +25,25 @@ export const useCrudStore = defineStore('CrudStore', {
             exportListVisible: false,
         }
     ),
-    getters:{
-      getInputErrors(state: any) {
-          return (fieldName:string) => {
-              if (state.inputErrors && state.inputErrors[fieldName]) {
-                  return state.inputErrors[fieldName]
-              }
-              return []
-          }
-      }
+    getters: {
+        getFieldInputErrors(state: any) {
+            return (fieldName: string) => {
+                if (state.inputErrors && state.inputErrors[fieldName]) {
+                    return state.inputErrors[fieldName]
+                }
+                return []
+            }
+        },
+        hasFieldListInputErrors(state: any) {
+            return (fieldListName: string) => {
+                if(state.inputErrors && typeof state.inputErrors === 'object'){
+                    for(const key in state.inputErrors) {
+                        return key.startsWith(fieldListName)
+                    }
+                }
+            }
+        }
+
     },
     actions: {
         setOperation(operation: IEntityCrudOperation) {
@@ -85,7 +95,7 @@ export const useCrudStore = defineStore('CrudStore', {
         setInputErrors(inputErrors: any) {
             this.inputErrors = inputErrors
         },
-        resetErrors(){
+        resetErrors() {
             this.inputErrors = null
             this.error = ''
         },