@drax/crud-vue 0.14.2 → 0.14.4

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.14.2",
+  "version": "0.14.4",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -64,5 +64,5 @@
     "vue-tsc": "^2.1.10",
     "vuetify": "^3.7.1"
   },
-  "gitHead": "6022bdf26c1775b837dc03e20aae732229eaebd4"
+  "gitHead": "d16e928bedeaaedf04229ec2db917e67d0eb117c"
 }

package/src/components/Crud.vue

@@ -12,8 +12,8 @@ const {entity} = defineProps({
 })
 
 const {
-  onView, onCreate, onEdit, onDelete, onCancel, onSubmit, resetCrudStore,
-  operation, dialog, form, notify, error, message, doExport,
+  onView, onCreate, onEdit, onDelete, resetCrudStore,
+  operation, dialog, 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>
 
@@ -90,13 +71,12 @@ async function submit() {
 
       <slot name="form">
         <crud-form
-            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,39 @@
 <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 {computed, defineEmits, 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},
 })
 
+const {onSubmit, onCancel, operation, error, form} = 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 +47,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(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("viewed")
+      break
   }
+
 }
 
 function cancel() {
-  emit('cancel')
+  onCancel()
+  emit('canceled')
 }
 
 const {
   variant, submitColor, readonly
-} = useFormUtils(operation)
+} = useFormUtils(operation.value)
 
 
 </script>
@@ -80,13 +90,14 @@ const {
   <v-form ref="formRef" @submit.prevent>
     <v-card flat>
 
-      <v-card-subtitle v-if="getItemId(valueModel)">ID: {{ getItemId(valueModel) }}</v-card-subtitle>
+      <v-card-subtitle v-if="getItemId(form)">ID: {{ getItemId(form) }}</v-card-subtitle>
 
       <v-card-text v-if="error">
         <v-alert color="error">{{ te(error) ? t(error) : error }}</v-alert>
       </v-card-text>
 
       <v-card-text>
+
         <v-row>
           <v-col
               v-for="field in aFields"
@@ -101,9 +112,9 @@ const {
               <crud-form-field
                   :field="field"
                   :entity="entity"
-                  v-model="valueModel[field.name]"
+                  v-model="form[field.name]"
                   :clearable="false"
-                  :readonly="readonly || field.readonly"
+                  :readonly="['delete','view'].includes(operation) || field.readonly"
                   :variant="variant"
                   :prepend-inner-icon="field?.prependInnerIcon"
                   :prepend-icon="field?.prependIcon"
@@ -118,7 +129,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>

package/src/composables/UseCrud.ts

@@ -224,20 +224,20 @@ export function useCrud(entity: IEntityCrud) {
 
 
     function onCreate() {
-        store.setOperation("create")
         store.setForm(entity.form)
+        store.setOperation("create")
         openDialog()
     }
 
     function onEdit(item: object) {
-        store.setOperation("edit")
         store.setForm(cast({...item}))
+        store.setOperation("edit")
         openDialog()
     }
 
     function onDelete(item: object) {
-        store.setOperation("delete")
         store.setForm(cast({...item}))
+        store.setOperation("delete")
         openDialog()
     }