@drax/crud-vue 0.11.3 → 0.11.5

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.11.3",
+  "version": "0.11.5",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -24,9 +24,9 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@drax/common-front": "^0.11.3",
+    "@drax/common-front": "^0.11.5",
     "@drax/crud-front": "^0.11.3",
-    "@drax/crud-share": "^0.11.3",
+    "@drax/crud-share": "^0.11.5",
     "@drax/media-vue": "^0.11.3"
   },
   "peerDependencies": {
@@ -64,5 +64,5 @@
     "vue-tsc": "^2.1.10",
     "vuetify": "^3.7.1"
   },
-  "gitHead": "54216d94d68dac488969f9c95d3c6be780935f9d"
+  "gitHead": "e67f10f0af29468c9d30f16135cfdbdff166d916"
 }

package/src/EntityCrud.ts

@@ -177,6 +177,9 @@ class EntityCrud implements IEntityCrud{
     return false
   }
 
+  get dialogMaxWidth(){
+    return ''
+  }
 
 }
 

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/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

@@ -99,7 +99,7 @@ const {
                   :entity="entity"
                   v-model="valueModel[field.name]"
                   :clearable="false"
-                  :readonly="readonly"
+                  :readonly="readonly || field.readonly"
                   :variant="variant"
                   :prepend-inner-icon="field?.prependInnerIcon"
                   :prepend-icon="field?.prependIcon"
@@ -115,7 +115,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/composables/UseCrud.ts

@@ -1,6 +1,6 @@
 import type {IDraxPaginateResult, IEntityCrud} from "@drax/crud-share";
 import {useCrudStore} from "../stores/UseCrudStore";
-import {computed} from "vue";
+import {computed, toRaw} from "vue";
 
 export function useCrud(entity: IEntityCrud) {
 
@@ -242,22 +242,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 +268,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(formData.id, 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 +302,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(formData.id)
             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)
         }
 
     }