@drax/crud-vue 0.14.1 → 0.14.3

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.14.1",
+  "version": "0.14.3",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -27,7 +27,7 @@
     "@drax/common-front": "^0.14.0",
     "@drax/crud-front": "^0.14.0",
     "@drax/crud-share": "^0.14.0",
-    "@drax/media-vue": "^0.14.1"
+    "@drax/media-vue": "^0.14.2"
   },
   "peerDependencies": {
     "pinia": "^2.2.2",
@@ -64,5 +64,5 @@
     "vue-tsc": "^2.1.10",
     "vuetify": "^3.7.1"
   },
-  "gitHead": "611243529fbe0be079d8dd6cbc2040630bd845dc"
+  "gitHead": "6638957752a86713df6545de62664b083393cc45"
 }

package/src/components/Crud.vue

@@ -12,7 +12,7 @@ const {entity} = defineProps({
 })
 
 const {
-  onView, onCreate, onEdit, onDelete, onCancel, onSubmit, resetCrudStore,
+  onView, onCreate, onEdit, onDelete, resetCrudStore,
   operation, dialog, form, notify, error, message, doExport,
   prepareFilters
 } = useCrud(entity);
@@ -22,27 +22,8 @@ onBeforeMount(() => {
   prepareFilters()
 })
 
-const emit = defineEmits(['created', 'updated', 'deleted', 'viewed'])
+const emit = defineEmits(['created', 'updated', 'deleted', 'viewed','canceled'])
 
-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>
 
@@ -93,10 +74,12 @@ async function submit() {
             v-model="form"
             :entity="entity"
             :error="error"
-            :operation="operation"
             :readonly="operation === 'delete'"
-            @submit="submit"
-            @cancel="onCancel"
+            @created="item => emit('created', item)"
+            @updated="item => emit('updated', item)"
+            @deleted="emit('deleted')"
+            @viewed="emit('viewed')"
+            @canceled="emit('canceled')"
         >
 
           <template v-for="ifield in entity.fields" :key="ifield.name" v-slot:[`field.${ifield.name}`]="{field}">

package/src/components/CrudForm.vue

@@ -1,43 +1,41 @@
 <script setup lang="ts">
 import {useI18n} from "vue-i18n";
-import type {IEntityCrud, IEntityCrudField, IEntityCrudOperation} from "@drax/crud-share";
+import type {IEntityCrud, IEntityCrudField} 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";
 import {useCrudStore} from "../stores/UseCrudStore";
+import {useCrud} from "../composables/UseCrud";
 import {useAuth} from '@drax/identity-vue'
 
 const {hasPermission} = useAuth()
 const {t, te} = useI18n()
 
-
-
 const valueModel = defineModel({type: [Object]})
 
-const {entity, operation} = defineProps({
+const {entity} = defineProps({
   entity: {type: Object as PropType<IEntityCrud>, required: true},
-  operation: {type: String as PropType<IEntityCrudOperation>, required: true},
-  readonly: {type: Boolean, default: false},
-  error: {type: String, required: false},
+  readonly: {type: Boolean, default: false}
 })
 
+const {onSubmit, onCancel, operation, error} = useCrud(entity)
 
-const emit = defineEmits(['submit', 'cancel'])
+const emit = defineEmits(['created', 'updated', 'deleted', 'viewed', 'canceled'])
 
 const store = useCrudStore()
 
 const formRef = ref()
 
 const fields = computed(() => {
-  if (operation === 'create') {
+  if (operation.value === 'create') {
     return entity.createFields
-  } else if (operation === 'edit') {
+  } else if (operation.value === 'edit') {
     return entity.updateFields
-  } else if (operation === 'delete') {
+  } else if (operation.value === 'delete') {
     return entity.deleteFields
-  } else if (operation === 'view') {
+  } else if (operation.value === 'view') {
     return entity.viewFields
   }
   return []
@@ -51,27 +49,41 @@ const aFields = computed(() => {
 async function submit() {
   store.resetErrors()
 
-  if (operation === 'delete') {
-    emit('submit', valueModel.value)
-    return
+  if (['create', 'edit'].includes(operation.value)) {
+    const {valid, errors} = await formRef.value.validate()
+    if (!valid) {
+      console.log('Invalid form', errors)
+      return
+    }
   }
 
-  const {valid, errors} = await formRef.value.validate()
-
-  if (valid) {
-    emit('submit', valueModel.value)
-  } else {
-    console.log('Invalid form', errors)
+  let result = await onSubmit(valueModel.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("viewed")
+      break
   }
+
 }
 
 function cancel() {
-  emit('cancel')
+  onCancel()
+  emit('canceled')
 }
 
 const {
   variant, submitColor, readonly
-} = useFormUtils(operation)
+} = useFormUtils(operation.value)
 
 
 </script>
@@ -118,7 +130,9 @@ const {
 
       <v-card-actions>
         <v-spacer></v-spacer>
-        <v-btn variant="text" color="grey" @click="cancel">{{ t('action.cancel') }}</v-btn>
+        <v-btn variant="text" color="grey" @click="cancel">
+          {{ operation == 'view' ? t('action.close') : t('action.cancel') }}
+        </v-btn>
         <v-btn variant="flat" v-if="operation != 'view'" :color="submitColor" @click="submit" :loading="store.loading">
           {{ operation ? t('action.' + operation) : t('action.sent') }}
         </v-btn>