@drax/crud-vue 0.5.1 → 0.5.2

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.5.1",
+  "version": "0.5.2",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -26,7 +26,7 @@
   "dependencies": {
     "@drax/common-front": "^0.5.1",
     "@drax/crud-front": "^0.5.1",
-    "@drax/crud-share": "^0.5.1"
+    "@drax/crud-share": "^0.5.2"
   },
   "peerDependencies": {
     "pinia": "^2.2.2",
@@ -63,5 +63,5 @@
     "vue-tsc": "^2.0.11",
     "vuetify": "^3.7.1"
   },
-  "gitHead": "6f507c8b52e134f10839fd7698c2466ff65a3d08"
+  "gitHead": "6f854dbeb2af7bca32ed35bcec2f8e48790a73b9"
 }

package/src/EntityCrud.ts

@@ -90,10 +90,9 @@ class EntityCrud implements IEntityCrud{
     return {}
   }
 
-  get rule(): (field:string|undefined) => Array<Function>  {
-    return (field:string|undefined) => {
-      return field && this.rules[field] ? this.rules[field] : []
-    }
+  getRule(field:string|undefined):Array<Function>|undefined  {
+      console.log("Getting rule for field: ", field, this.rules)
+      return field && this.rules[field] && this.rules[field].length > 0 ? this.rules[field] : undefined
   }
 
   get isEditable(){

package/src/components/Crud.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type {PropType} from "vue";
+import {onBeforeMount, type PropType} from "vue";
 import type {IEntityCrud} from "@drax/crud-share";
 import CrudList from "./CrudList.vue";
 import CrudForm from "./CrudForm.vue";
@@ -7,24 +7,25 @@ import CrudNotify from "./CrudNotify.vue";
 import CrudDialog from "./CrudDialog.vue";
 import {useCrud} from "../composables/UseCrud";
 
-
 const {entity} = defineProps({
   entity: {type: Object as PropType<IEntityCrud>, required: true},
 })
 
 const {
-  onCreate, onEdit, onDelete, onCancel, onSubmit,
+  onCreate, onEdit, onDelete, onCancel, onSubmit,resetCrudStore,
   operation, dialog, form, notify, error, message, doExport
 } = useCrud(entity);
 
+onBeforeMount(() => {
+  resetCrudStore()
+})
+
 </script>
 
 <template>
   <v-container fluid class="mt-5">
     <v-card>
 
-
-
       <crud-list
           :entity="entity"
           @create="onCreate"

package/src/components/CrudForm.vue

@@ -5,8 +5,9 @@ import CrudFormField from "./CrudFormField.vue";
 import type {TOperation} from "../interfaces/TOperation";
 import type {IEntityCrud} from "@drax/crud-share";
 import {useI18n} from "vue-i18n";
+import {useCrudStore} from "../stores/UseCrudStore";
 const {t,te} = useI18n()
-
+const store = useCrudStore()
 const valueModel = defineModel({type: [Object]})
 
 
@@ -20,10 +21,13 @@ const {entity} = defineProps({
 const valid = ref()
 const formRef = ref()
 
-function submit() {
-  formRef.value.validate()
+async function submit() {
+  store.resetErrors()
+  await formRef.value.validate()
   if(valid.value) {
     emit('submit',valueModel.value)
+  }else{
+    console.log('Invalid form')
   }
 }
 
@@ -38,6 +42,9 @@ const emit = defineEmits(['submit', 'cancel'])
 <template>
   <v-form v-model="valid" ref="formRef"  @submit.prevent >
     <v-card flat>
+
+      <v-card-subtitle v-if="valueModel._id">ID: {{valueModel._id}}</v-card-subtitle>
+
       <v-card-text v-if="error">
         <v-alert color="error">{{ te(error) ? t(error) : error }}</v-alert>
       </v-card-text>

package/src/components/CrudFormField.vue

@@ -32,7 +32,7 @@ const label = computed(() => {
 })
 
 const rules = computed(() => {
-  return entity.rule(field.name) as any
+  return entity.getRule(field.name) as any
 })
 
 const inputErrors = computed(() =>
@@ -44,7 +44,6 @@ const inputErrors = computed(() =>
 <template>
 
   <div v-if="field && field.type">
-
     <v-text-field
         v-if="field.type === 'string'"
         type="text"

package/src/components/CrudList.vue

@@ -13,7 +13,7 @@ import type {IEntityCrud} from "@drax/crud-share";
 import {useI18n} from "vue-i18n";
 import type {IEntityCrudHeader} from "@drax/crud-share";
 
-const {t} = useI18n()
+const {t,te} = useI18n()
 const {hasPermission} = useAuth()
 
 const {entity} = defineProps({
@@ -26,7 +26,10 @@ const {
 } = useCrud(entity)
 
 const actions: IEntityCrudHeader[] = [{title: t('action.actions'), key: 'actions', sortable: false, align: 'end', minWidth: '140px'}]
-const tHeaders: IEntityCrudHeader[] = entity.headers.map(header => ({...header, title: t(`${entity.name}.fields.${header.title}`)}))
+const tHeaders: IEntityCrudHeader[] = entity.headers.map(header => ({
+  ...header,
+  title: te(`${entity.name.toLowerCase()}.fields.${header.title}`) ? t(`${entity.name.toLowerCase()}.fields.${header.title}`) : header.title
+}))
 
 const headers: IEntityCrudHeader[] = [...tHeaders, ...actions]
 

package/src/components/buttons/CrudExportButton.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import type {PropType} from "vue";
-import EntityCrud from "../../EntityCrud";
+import type {IEntityCrud} from "@drax/crud-share"
 import {useCrud} from "../../composables/UseCrud";
 import {useI18n} from "vue-i18n";
 
 const {t} = useI18n()
 
 const {entity} = defineProps({
-  entity: {type: Object as PropType<EntityCrud>, required: true},
+  entity: {type: Object as PropType<IEntityCrud>, required: true},
 })
 
 const {

package/src/components/buttons/CrudImportButton.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import type {PropType} from "vue";
-import EntityCrud from "../../EntityCrud";
+import type {IEntityCrud} from "@drax/crud-share"
 import {useCrud} from "../../composables/UseCrud";
 import {useI18n} from "vue-i18n";
 
 const {t} = useI18n()
 const {entity} = defineProps({
-  entity: {type: Object as PropType<EntityCrud>, required: true},
+  entity: {type: Object as PropType<IEntityCrud>, required: true},
 })
 
 const {

package/src/composables/UseCrud.ts

@@ -31,7 +31,7 @@ export function useCrud(entity: IEntityCrud) {
     try {
 
       if(!entity?.provider.export) {
-        throw new Error("exportCsv not implemented")
+        throw new Error("provider.export not implemented")
       }
 
       const headers: string = entity.exportHeaders.join(',')
@@ -106,7 +106,6 @@ export function useCrud(entity: IEntityCrud) {
   }
 
   function onSubmit(formData: any) {
-    console.log("formData", formData)
     store.setInputErrors(null)
     switch (store.operation) {
       case "create":
@@ -167,6 +166,10 @@ export function useCrud(entity: IEntityCrud) {
 
   }
 
+  function resetCrudStore(){
+    store.$reset()
+  }
+
   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)}})
@@ -186,7 +189,7 @@ export function useCrud(entity: IEntityCrud) {
   const exportListVisible = computed({get(){return store.exportListVisible} , set(value){store.setExportListVisible(value)}})
 
   return {
-    loadItems: doPaginate, doExport, onCreate, onEdit, onDelete, onCancel, onSubmit,
+    loadItems: doPaginate, doExport, onCreate, onEdit, onDelete, onCancel, onSubmit,resetCrudStore,
     operation, dialog, form, notify, error, message, formValid,
     loading, itemsPerPage, page, sortBy, search, totalItems, items,
     exportFiles,exportLoading,exportListVisible

package/src/stores/UseCrudStore.ts

@@ -84,6 +84,10 @@ export const useCrudStore = defineStore('CrudStore', {
         setInputErrors(inputErrors: any) {
             this.inputErrors = inputErrors
         },
+        resetErrors(){
+            this.inputErrors = null
+            this.error = ''
+        },
         setExportFiles(exportFiles: string[]) {
             this.exportFiles = exportFiles
         },