@drax/crud-vue 0.4.0 → 0.5.2

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.4.0",
+  "version": "0.5.2",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -24,8 +24,9 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@drax/common-front": "^0.4.0",
-    "@drax/common-share": "^0.4.0"
+    "@drax/common-front": "^0.5.1",
+    "@drax/crud-front": "^0.5.1",
+    "@drax/crud-share": "^0.5.2"
   },
   "peerDependencies": {
     "pinia": "^2.2.2",
@@ -62,5 +63,5 @@
     "vue-tsc": "^2.0.11",
     "vuetify": "^3.7.1"
   },
-  "gitHead": "481b302fe72f403abf092806ceca540dd2765dfa"
+  "gitHead": "6f854dbeb2af7bca32ed35bcec2f8e48790a73b9"
 }

package/src/EntityCrud.ts

@@ -1,102 +1,98 @@
-import type {IDraxCrud} from "@drax/common-share";
 import type {
-  IFields,
-  ICrudForm,
-  ICrudHeaders,
-  ICrudPermissions,
-  ICrudRules,
-  ICrudField
-} from "./interfaces/IEntityCrud";
+  IEntityCrud, IEntityCrudForm, IEntityCrudHeader, IEntityCrudRefs,
+  IEntityCrudRules, IEntityCrudField, IEntityCrudPermissions,
+  IDraxCrudProvider
+} from "@drax/crud-share";
 
 
 
-class EntityCrud{
+class EntityCrud implements IEntityCrud{
 
   name: string = ''
 
   constructor() {
   }
 
-  static get instance(){
+  static get instance():IEntityCrud{
     throw new Error('EntityCrud instance not found')
   }
 
 
-  get headers():ICrudHeaders[]{
+  get headers():IEntityCrudHeader[]{
     return [
       {title: 'ID',key:'_id'},
     ]
   }
 
-  get permissions(): ICrudPermissions {
+  get permissions(): IEntityCrudPermissions {
     return {
       manage: 'manage', view: 'view', create: 'create',  update: 'update', delete: 'delete'
     }
   }
 
-  get provider(): IDraxCrud<any, any, any>{
+  get provider(): IDraxCrudProvider<any, any, any>{
     throw new Error('provider not implemented')
   }
 
-  get fields():IFields{
+  get fields():IEntityCrudField[]{
     return [
       {name: 'id', type: 'string', label: 'ID', default: '' },
     ]
   }
 
-  get form():ICrudForm{
-
-    function objectFields(field:ICrudField){
-      let value:any = {}
-      if(field.objectFields){
-        field.objectFields.forEach(subField => {
-          if(subField.type === 'object'){
-            value[subField.name] = objectFields(subField)
-          }else{
-            value[subField.name] = subField.default
-          }
-
-        })
-      }
-      return value
+  objectFields(field:IEntityCrudField){
+    let value:any = {}
+    if(field.objectFields){
+      field.objectFields.forEach(subField => {
+        if(subField.type === 'object'){
+          value[subField.name] = this.objectFields(subField)
+        }else{
+          value[subField.name] = subField.default
+        }
+
+      })
     }
+    return value
+  }
 
-    const form = this.fields.reduce((acc, field) => {
+  get form():IEntityCrudForm{
 
+    const form = this.fields.reduce((acc, field) => {
       let value = null
       if(field.type === 'object'){
-        value = objectFields(field)
-      } else if(field.default != undefined){
+        value = this.objectFields(field)
+      }else if(field.default != undefined){
         value = field.default
       }
 
       return {...acc, [field.name]: value }
     }, {})
 
-    console.log("Form: ", form)
+    //console.log("Form: ", form)
 
     return form
 
   }
 
-  get refs():{ [key: string]: EntityCrud }{
+  get refs():IEntityCrudRefs{
     return {}
   }
 
-  getRef(ref: string):EntityCrud{
+  getRef(ref: string):IEntityCrud{
     if(!this.refs.hasOwnProperty(ref))  {
       throw new Error("Ref not found: " + ref)
     }
 
-    return this.refs[ref] as EntityCrud
+    return this.refs[ref]
   }
 
-  get rules(): ICrudRules{
+  get rules(): IEntityCrudRules{
     return {}
   }
 
-  get rule()  {
-    return (field:string) => 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(){
@@ -111,11 +107,29 @@ class EntityCrud{
     return true
   }
 
-  get dialogFullscreen(){
-    return false
+  get isExportable(){
+    return true
+  }
+
+  get exportFormats(){
+    return ['CSV', 'JSON']
+  }
+
+  get exportHeaders(){
+    return ['_id']
+  }
+
+  get isImportable(){
+    return true
   }
 
+  get importFormats(){
+    return ['CSV', 'JSON']
+  }
 
+  get dialogFullscreen(){
+    return false
+  }
 
 
 }

package/src/components/Crud.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type {PropType} from "vue";
-import EntityCrud from "../EntityCrud";
+import {onBeforeMount, type PropType} from "vue";
+import type {IEntityCrud} from "@drax/crud-share";
 import CrudList from "./CrudList.vue";
 import CrudForm from "./CrudForm.vue";
 import CrudNotify from "./CrudNotify.vue";
@@ -8,14 +8,18 @@ import CrudDialog from "./CrudDialog.vue";
 import {useCrud} from "../composables/UseCrud";
 
 const {entity} = defineProps({
-  entity: {type: Object as PropType<EntityCrud>, required: true},
+  entity: {type: Object as PropType<IEntityCrud>, required: true},
 })
 
 const {
-  onCreate, onEdit, onDelete, onCancel, onSubmit,
-  operation, dialog, form, formValid, notify, error, message,
+  onCreate, onEdit, onDelete, onCancel, onSubmit,resetCrudStore,
+  operation, dialog, form, notify, error, message, doExport
 } = useCrud(entity);
 
+onBeforeMount(() => {
+  resetCrudStore()
+})
+
 </script>
 
 <template>
@@ -27,6 +31,7 @@ const {
           @create="onCreate"
           @edit="onEdit"
           @delete="onDelete"
+          @export="doExport"
       >
         <template v-for="header in entity.headers" :key="header.key" v-slot:[`item.${header.key}`]="{item, value}">
           <slot :name="`item.${header.key}`" v-bind="{item, value}">

package/src/components/CrudAutocomplete.vue

@@ -1,15 +1,14 @@
 <script setup lang="ts">
 import {debounce} from "@drax/common-front"
-import type { PropType, Ref} from "vue";
+import { type PropType, type Ref} from "vue";
 import {ref, onBeforeMount} from "vue";
-import EntityCrud from "../EntityCrud";
-import type {ICrudField} from "@/interfaces/IEntityCrud";
+import type {IEntityCrud, IEntityCrudField} from "@drax/crud-share";
 
-const valueModel = defineModel({type: [String, Array], required: false})
+const valueModel = defineModel<string | string[]>({type: [String, Array], required: false})
 
 const {entity, multiple} = defineProps({
-  entity: {type: Object as PropType<EntityCrud>, required: true},
-  field: {type: Object as PropType<ICrudField>, required: true},
+  entity: {type: Object as PropType<IEntityCrud|undefined>, required: true},
+  field: {type: Object as PropType<IEntityCrudField>, required: true},
   multiple: {type: Boolean, default: false},
   chips: {type: Boolean, default: false},
   closableChips: {type: Boolean, default: true},
@@ -17,10 +16,14 @@ const {entity, multiple} = defineProps({
   label: {type: String},
   itemValue: {type: [String], default: '_id'},
   itemTitle: {type: [String], default: 'name'},
-  rules: {type: Array<Function>, default: []},
+  rules: {type: Array as PropType<any>, default: []},
   errorMessages: {type: Array as PropType<string[]>, default: []},
 })
 
+if(!entity){
+  throw new Error('entity is required')
+}
+
 const loading: Ref<boolean> = ref(false)
 const items: Ref<Array<any>> = ref([])
 
@@ -28,19 +31,33 @@ const debouncedSearch = debounce(search, 300)
 
 onBeforeMount(async () => {
   if(valueModel.value && valueModel.value.length > 0){
+
     if(multiple && Array.isArray(valueModel.value) ){
       items.value = valueModel.value
-      //await findByIds(valueModel.value)
-    }else{
-      items.value = [valueModel.value]
-      //await findByIds([valueModel.value])
+
+      // valueModel.value = valueModel.value.map((item:any) => item._id)
+      await findByIds(valueModel.value)
+    }else if(!Array.isArray(valueModel.value)){
+      // items.value = [valueModel.value]
+      await findByIds([valueModel.value])
     }
 
+
+
   }
 })
 
-async function findByIds(ids: Array<string>) {
+async function findByIds(ids: Array<string> = []) {
   try{
+    if(!entity){
+      throw new Error('Entity is required')
+    }
+    if(!entity.provider){
+      throw new Error('Provider is not defined')
+    }
+    if (typeof entity.provider.findByIds !== 'function') {
+      throw new Error('Provider does not have a findByIds method');
+    }
     loading.value = true
     items.value = await entity.provider.findByIds(ids)
   }catch (e){
@@ -51,11 +68,12 @@ async function findByIds(ids: Array<string>) {
 }
 
 
-
-
 async function search(value: any) {
   try{
     loading.value = true
+    if(!entity){
+      throw new Error('Entity is required')
+    }
     if(!entity.provider.search){
       throw new Error('Provider does not have a search method')
     }

package/src/components/CrudDialog.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import type {TOperation} from "../interfaces/TOperation";
 import type {PropType} from "vue";
-import EntityCrud from "../EntityCrud";
+import type {IEntityCrud} from "@drax/crud-share";
 const dialog = defineModel({type: Boolean, default: false})
+import {useI18n} from "vue-i18n";
+const {t,te} = useI18n()
 
 defineProps({
-  entity: {type: Object as PropType<EntityCrud>, required: true},
+  entity: {type: Object as PropType<IEntityCrud>, required: true},
   operation: {type: String as PropType<TOperation>}
 })
 
@@ -19,7 +21,7 @@ defineEmits(
   <v-dialog v-model="dialog" :fullscreen="entity.dialogFullscreen">
     <v-card>
       <v-toolbar>
-        <v-toolbar-title>{{entity.name}} {{$te('action.'+operation) ? $t('action.'+operation) : operation}}</v-toolbar-title>
+        <v-toolbar-title>{{entity.name}} {{te('action.'+operation) ? t('action.'+operation) : operation}}</v-toolbar-title>
         <v-spacer></v-spacer>
         <v-btn icon @click="dialog = false"><v-icon>mdi-close</v-icon></v-btn>
       </v-toolbar>

package/src/components/CrudExportList.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import {useCrud} from "../composables/UseCrud";
+import type {PropType} from "vue";
+import type {IEntityCrud} from "@drax/crud-share";
+import {useI18n} from "vue-i18n";
+const {t} = useI18n()
+const {entity} = defineProps({
+  entity: {type: Object as PropType<IEntityCrud>, required: true},
+})
+
+const {
+  exportFiles, exportListVisible, exportLoading
+} = useCrud(entity);
+
+</script>
+
+<template>
+  <v-card
+      v-if="exportListVisible"
+      :loading="exportLoading"
+      class="ma-3" density="compact" variant="outlined" color="secondary"
+  >
+    <v-card-title>
+      {{ t('action.exports') }}
+
+    </v-card-title>
+    <v-card-text>
+      <v-table density="compact">
+        <thead>
+        <tr>
+          <th>Link</th><th>Rows</th><th>Time</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr v-for="exportFile in exportFiles">
+          <td><a :href="exportFile.url" target="_blank">{{ exportFile.url }}</a></td>
+          <td>{{ exportFile.rowCount }}</td>
+          <td>{{ exportFile.time }}</td>
+        </tr>
+        </tbody>
+      </v-table>
+
+    </v-card-text>
+
+    <v-card-actions>
+      <v-spacer></v-spacer>
+      <v-btn @click="exportFiles = []" :loading="exportLoading">{{ t('action.clear') }}</v-btn>
+      <v-btn @click="exportListVisible=false">{{ t('action.close') }}</v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<style scoped>
+
+</style>

package/src/components/CrudForm.vue

@@ -1,16 +1,18 @@
 <script setup lang="ts">
 import type {PropType} from "vue";
 import  {ref} from "vue";
-import EntityCrud from "../EntityCrud";
 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]})
 
 
 const {entity} = defineProps({
-  entity: {type: Object as PropType<EntityCrud>, required: true},
+  entity: {type: Object as PropType<IEntityCrud>, required: true},
   operation: {type: String as PropType<TOperation>, required: true},
   readonly: {type: Boolean, default: false},
   error: {type: String, required: false},
@@ -19,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')
   }
 }
 
@@ -37,8 +42,11 @@ 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-alert color="error">{{ te(error) ? t(error) : error }}</v-alert>
       </v-card-text>
       <v-card-text>
         <template v-for="field in entity.fields" :key="field.name">
@@ -52,9 +60,9 @@ const emit = defineEmits(['submit', 'cancel'])
 
       <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">{{ t('action.cancel') }}</v-btn>
         <v-btn variant="flat" color="primary" @click="submit">
-          {{ operation ? $t('action.' + operation) : $t('action.sent') }}
+          {{ operation ? t('action.' + operation) : t('action.sent') }}
         </v-btn>
       </v-card-actions>
     </v-card>

package/src/components/CrudFormField.vue

@@ -1,26 +1,29 @@
 <script setup lang="ts">
 import {computed} from "vue";
 import type {PropType} from "vue";
-import type {ICrudField} from "../interfaces/IEntityCrud";
 import CrudFormList from "./CrudFormList.vue";
 import CrudAutocomplete from "./CrudAutocomplete.vue";
-import EntityCrud from "@/EntityCrud";
 import {useI18n} from "vue-i18n";
 import {useCrudStore} from "../stores/UseCrudStore";
 import {VDateInput} from 'vuetify/labs/VDateInput'
+import type {IEntityCrud, IEntityCrudField} from "@drax/crud-share";
 const {t, te} = useI18n()
 
 const store = useCrudStore()
 
-const valueModel = defineModel({type: [String, Number, Boolean, Object, Array], default: false})
+const valueModel = defineModel<any>({type: [String, Number, Boolean, Object, Array], default: false})
 
 const {index, entity, field} = defineProps({
-  entity: {type: Object as PropType<EntityCrud>, required: true},
-  field: {type: Object as PropType<ICrudField>, required: true},
+  entity: {type: Object as PropType<IEntityCrud>, required: true},
+  field: {type: Object as PropType<IEntityCrudField|undefined>, required: true},
   readonly: {type: Boolean, default: false},
   index: {type: Number, default: 0},
 })
 
+if(!field){
+  throw new Error("CrudFormField must be provided with a field object")
+}
+
 const name = computed(() => index > 0 ? `${field.name}_${index}` : field.name)
 
 const label = computed(() => {
@@ -29,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(() =>
@@ -41,7 +44,6 @@ const inputErrors = computed(() =>
 <template>
 
   <div v-if="field && field.type">
-
     <v-text-field
         v-if="field.type === 'string'"
         type="text"
@@ -93,7 +95,7 @@ const inputErrors = computed(() =>
 
     <crud-autocomplete
         v-if="field.type === 'ref'"
-        :entity="entity.getRef(field.ref).instance"
+        :entity="entity.getRef(field.ref)"
         :field="field"
         v-model="valueModel"
         :label="label"
@@ -133,7 +135,7 @@ const inputErrors = computed(() =>
 
     <crud-autocomplete
         v-if="field.type === 'array.ref'"
-        :entity="entity.getRef(field.ref).instance"
+        :entity="entity.getRef(field.ref)"
         :field="field"
         v-model="valueModel"
         :multiple="true"

package/src/components/CrudFormList.vue

@@ -1,14 +1,13 @@
 <script setup lang="ts">
 import type {PropType} from "vue";
-import type {ICrudField} from "../interfaces/IEntityCrud";
 import CrudFormField from "./CrudFormField.vue";
-import EntityCrud from "@/EntityCrud";
+import type {IEntityCrud, IEntityCrudField} from "@drax/crud-share";
 
 const valueModel = defineModel({type: Array, default: () => []});
 
 const {field} = defineProps({
-  entity: {type: Object as PropType<EntityCrud>, required: true},
-  field: {type: Object as PropType<ICrudField>, required: true},
+  entity: {type: Object as PropType<IEntityCrud>, required: true},
+  field: {type: Object as PropType<IEntityCrudField>, required: true},
   readonly: {type: Boolean, default: false},
 })
 
@@ -16,7 +15,7 @@ function newItem() {
   return field.objectFields ? field.objectFields.reduce((acc, field) => ({...acc, [field.name]: field.default }), {}) : []
 }
 
-function getField(key: string):ICrudField|undefined {
+function getField(key: string):IEntityCrudField|undefined {
   return field.objectFields ? field.objectFields.find(field => field.name === key) : undefined;
 }
 
@@ -43,12 +42,12 @@ function removeItem(index: number) {
         <v-col cols="12" v-for="(item,index) in valueModel" :key="index" class="text-right">
           <v-row dense align="center">
             <v-col cols="11">
-              <template v-for="key in Object.keys(item)" :key="key">
+              <template v-for="key in Object.keys(item as Record<string, any>)" :key="key">
                 <crud-form-field
                     v-if="hasField(key)"
                     :entity="entity"
                     :field="getField(key)"
-                    v-model="valueModel[index][key]"
+                    v-model="(valueModel[index] as any)[key]"
                     :readonly="readonly"
                     :index="index"
                 />

package/src/components/CrudList.vue

@@ -1,24 +1,37 @@
 <script setup lang="ts">
 import type {PropType} from 'vue'
 import {useAuth} from '@drax/identity-vue'
-import EntityCrud from "../EntityCrud";
 import CrudSearch from "./CrudSearch.vue";
 import {useCrud} from "../composables/UseCrud";
+import CrudExportButton from "./buttons/CrudExportButton.vue";
+import CrudImportButton from "./buttons/CrudImportButton.vue";
+import CrudCreateButton from "./buttons/CrudCreateButton.vue";
+import CrudUpdateButton from "./buttons/CrudUpdateButton.vue";
+import CrudDeleteButton from "./buttons/CrudDeleteButton.vue";
+import CrudExportList from "./CrudExportList.vue";
+import type {IEntityCrud} from "@drax/crud-share";
 import {useI18n} from "vue-i18n";
-const {t, te} = useI18n()
+import type {IEntityCrudHeader} from "@drax/crud-share";
+
+const {t,te} = useI18n()
 const {hasPermission} = useAuth()
 
 const {entity} = defineProps({
-  entity: {type: Object as PropType<EntityCrud>, required: true},
+  entity: {type: Object as PropType<IEntityCrud>, required: true},
 })
 
-const {loading, itemsPerPage, page, sortBy, search, totalItems, items,
-loadItems} = useCrud(entity)
+const {
+  loading, itemsPerPage, page, sortBy, search, totalItems, items,
+  loadItems
+} = useCrud(entity)
 
-const actions = [{title: t('action.actions'),key:'actions', sortable: false, align: 'right'}]
-const tHeaders = entity.headers.map(header => ({...header, title: t(`${entity.name}.fields.${header.title}`)}))
+const actions: IEntityCrudHeader[] = [{title: t('action.actions'), key: 'actions', sortable: false, align: 'end', minWidth: '140px'}]
+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 = [...tHeaders, ...actions]
+const headers: IEntityCrudHeader[] = [...tHeaders, ...actions]
 
 
 defineExpose({
@@ -29,29 +42,46 @@ defineExpose({
 
 <template>
   <v-data-table-server
-    class="border"
-    v-if="hasPermission(entity.permissions.view)"
-    v-model:items-per-page="itemsPerPage"
-    :items-per-page-options="[5, 10, 20, 50]"
-    v-model:page="page"
-    v-model:sort-by="sortBy"
-    :headers="headers"
-    :items="items"
-    :items-length="totalItems"
-    :loading="loading"
-    :search="search"
-    :multi-sort="false"
-    item-value="name"
-    @update:options="loadItems"
+      class="border"
+      v-if="hasPermission(entity.permissions.view)"
+      v-model:items-per-page="itemsPerPage"
+      :items-per-page-options="[5, 10, 20, 50]"
+      v-model:page="page"
+      v-model:sort-by="sortBy"
+      :headers="headers"
+      :items="items"
+      :items-length="totalItems"
+      :loading="loading"
+      :search="search"
+      :multi-sort="false"
+      item-value="name"
+      @update:options="loadItems"
   >
     <template v-slot:top>
-      <v-toolbar density="compact" >
+      <v-toolbar density="compact">
         <v-toolbar-title>{{ entity.name }}</v-toolbar-title>
         <v-spacer></v-spacer>
-        <v-btn v-if="entity.isCreatable" icon="mdi-plus" class="mr-1" variant="text" color="primary" @click="$emit('create')">
-        </v-btn>
+
+        <crud-import-button
+            :entity="entity"
+            @import="v => $emit('import', v)"
+        />
+
+        <crud-export-button
+            :entity="entity"
+            @export="v => $emit('export',v)"
+        />
+
+        <crud-create-button
+            v-if="entity.isCreatable"
+            :entity="entity"
+            @click="$emit('create')"
+        />
+
       </v-toolbar>
 
+      <crud-export-list :entity="entity"></crud-export-list>
+
       <v-card>
         <v-card-text>
           <crud-search v-model="search"></crud-search>
@@ -62,21 +92,21 @@ defineExpose({
 
 
     <template v-for="header in entity.headers" :key="header.key" v-slot:[`item.${header.key}`]="{item, value}">
-    <slot :name="`item.${header.key}`" v-bind="{item, value}" >
-      {{value}}
-    </slot>
+      <slot :name="`item.${header.key}`" v-bind="{item, value}">
+        {{ value }}
+      </slot>
     </template>
 
 
     <template v-slot:item.actions="{item}">
-      <v-btn v-if="entity.isEditable && hasPermission(entity.permissions.update)"
-             icon="mdi-pencil" variant="text" color="primary"
-             @click="$emit('edit', item)">
-      </v-btn>
-      <v-btn v-if="entity.isDeletable && hasPermission(entity.permissions.delete)"
-             icon="mdi-delete" class="mr-1" variant="text" color="red"
-             @click="$emit('delete', item)">
-      </v-btn>
+      <crud-update-button
+          v-if="entity.isEditable && hasPermission(entity.permissions.update)"
+          @click="$emit('edit', item)"
+      />
+      <crud-delete-button
+          v-if="entity.isDeletable && hasPermission(entity.permissions.delete)"
+          @click="$emit('delete', item)"
+      />
     </template>
 
   </v-data-table-server>

package/src/components/CrudSearch.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import {useI18n} from "vue-i18n";
+const {t} = useI18n()
 const model = defineModel<any>()
 </script>
 
@@ -7,7 +9,7 @@ const model = defineModel<any>()
                 density="compact" class="mr-2"
                 variant="outlined"
                 append-inner-icon="mdi-magnify"
-                :label="$t('action.search')"
+                :label="t('action.search')"
                 single-line clearable @click:clear="() => model = ''"
   />
 </template>

package/src/components/buttons/CrudCreateButton.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import {useI18n} from "vue-i18n";
+
+const {t} = useI18n()
+</script>
+
+<template>
+  <v-tooltip location="top">
+    <template v-slot:activator="{ props }">
+      <v-btn
+          v-bind="{ ...$attrs, ...props }"
+             icon="mdi-plus"
+             class="mr-1"
+             variant="text"
+             color="primary"
+      >
+      </v-btn>
+    </template>
+    {{ t('action.create')}}
+  </v-tooltip>
+</template>
+
+<style scoped>
+
+</style>

package/src/components/buttons/CrudDeleteButton.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import {useI18n} from "vue-i18n";
+
+const {t} = useI18n()
+</script>
+
+<template>
+  <v-tooltip location="top">
+    <template v-slot:activator="{ props}">
+      <v-btn
+          v-bind="{ ...$attrs, ...props }"
+          icon="mdi-delete"
+          class="mr-1"
+          variant="text"
+          color="red"
+      >
+      </v-btn>
+    </template>
+    {{ t('action.delete')}}
+  </v-tooltip>
+</template>
+
+<style scoped>
+
+</style>

package/src/components/buttons/CrudExportButton.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import type {PropType} from "vue";
+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<IEntityCrud>, required: true},
+})
+
+const {
+  exportLoading
+} = useCrud(entity)
+</script>
+
+<template>
+  <v-menu v-if="entity.isExportable">
+    <template v-slot:activator="{ props: mp }">
+      <v-tooltip location="top">
+        <template v-slot:activator="{ props: tp }">
+          <v-btn
+              v-bind="{...mp, ...tp}"
+              :disabled="exportLoading"
+              class="mr-1"
+              color="teal"
+              variant="text"
+              :loading="exportLoading"
+              icon="mdi-database-export-outline"
+          ></v-btn>
+        </template>
+        {{ t('action.export')}}
+      </v-tooltip>
+
+    </template>
+    <v-list>
+      <v-list-item v-for="format in entity.exportFormats" @click="$emit('export', format)">
+        <v-list-item-title>{{format}}</v-list-item-title>
+      </v-list-item>
+    </v-list>
+
+  </v-menu>
+</template>
+
+<style scoped>
+
+</style>

package/src/components/buttons/CrudImportButton.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type {PropType} from "vue";
+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<IEntityCrud>, required: true},
+})
+
+const {
+  exportLoading
+} = useCrud(entity)
+</script>
+
+<template>
+  <div v-if="entity.isImportable">
+      <v-tooltip location="top">
+        <template v-slot:activator="{ props }">
+          <v-btn
+              v-bind="props"
+              :disabled="exportLoading"
+              class="mr-1"
+              color="purple"
+              variant="text"
+              :loading="exportLoading"
+              icon="mdi-database-import-outline"
+          ></v-btn>
+        </template>
+        {{ t('action.import')}}
+      </v-tooltip>
+
+  </div>
+</template>
+
+<style scoped>
+
+</style>

package/src/components/buttons/CrudUpdateButton.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import {useI18n} from "vue-i18n";
+const {t} = useI18n()
+</script>
+
+<template>
+  <v-tooltip location="top">
+    <template v-slot:activator="{ props}">
+      <v-btn
+          v-bind="{ ...$attrs, ...props }"
+          icon="mdi-pencil"
+          class="mr-1"
+          variant="text"
+          color="primary"
+          slim
+      >
+      </v-btn>
+    </template>
+      {{ t('action.update')}}
+  </v-tooltip>
+</template>
+
+<style scoped>
+
+</style>

package/src/composables/UseCrud.ts

@@ -1,14 +1,12 @@
-import EntityCrud from "../EntityCrud";
-import type {IDraxPaginateResult} from "@drax/common-share";
+import type {IDraxPaginateResult, IEntityCrud} from "@drax/crud-share";
 import {useCrudStore} from "../stores/UseCrudStore";
 import {computed} from "vue";
-import type {ICrudField} from "@/interfaces/IEntityCrud";
 
-export function useCrud(entity: EntityCrud) {
+export function useCrud(entity: IEntityCrud) {
 
   const store = useCrudStore()
 
-  async function loadItems() {
+  async function doPaginate() {
     store.setLoading(true)
     try {
       const r: IDraxPaginateResult<any> = await entity?.provider.paginate({
@@ -27,25 +25,68 @@ export function useCrud(entity: EntityCrud) {
     }
   }
 
-  function cast(item: any){
+  async function doExport(format: 'JSON') {
+    store.setExportLoading(true)
+    store.setExportListVisible(true)
+    try {
 
-    entity.fields.filter(field => field.type === 'date')
-        .forEach(field => {
-          if(field.type === 'date'){
-            item[field.name] = new Date(item[field.name])
-          }
-        })
+      if(!entity?.provider.export) {
+        throw new Error("provider.export not implemented")
+      }
 
-    return item
+      const headers: string = entity.exportHeaders.join(',')
+
+      const r: any = await entity?.provider.export({
+        format: format,
+        headers: headers,
+        separator: ";",
+        orderBy: store.sortBy[0]?.key,
+        order: store.sortBy[0]?.order,
+        search: store.search
+      })
+
+      if(r && r.url) {
+        store.addExportFile(r)
+        store.showMessage("Export successful")
+      }
+
+      return r
+
+    } catch (e) {
+      console.error("Error exporting csv", e)
+    } finally {
+      store.setExportLoading(false)
+    }
   }
 
 
+
+
   function onCreate() {
     store.setOperation("create")
     store.setForm(entity.form)
     store.setDialog(true)
   }
 
+  function cast(item: any){
+    entity.fields.filter(field => field.type === 'date')
+        .forEach(field => {
+            item[field.name] = new Date(item[field.name])
+        })
+
+    entity.fields.filter(field => field.type === 'ref')
+        .forEach(field => {
+          item[field.name] = item[field.name]._id
+        })
+
+    entity.fields.filter(field => field.type === 'array.ref')
+        .forEach(field => {
+          item[field.name] = item[field.name].map(((i:any) => i._id))
+        })
+
+    return item
+  }
+
   function onEdit(item: object) {
     store.setOperation("edit")
     store.setForm(cast({...item}))
@@ -65,7 +106,6 @@ export function useCrud(entity: EntityCrud) {
   }
 
   function onSubmit(formData: any) {
-    console.log("formData", formData)
     store.setInputErrors(null)
     switch (store.operation) {
       case "create":
@@ -83,7 +123,7 @@ export function useCrud(entity: EntityCrud) {
   async function doCreate(formData: any) {
     try {
       await entity?.provider.create(formData)
-      await loadItems()
+      await doPaginate()
       store.setDialog(false)
       store.showMessage("Entity created successfully!")
     } catch (e: any) {
@@ -99,7 +139,7 @@ export function useCrud(entity: EntityCrud) {
   async function doUpdate(formData: any) {
     try {
       await entity?.provider.update(formData._id, formData)
-      await loadItems()
+      await doPaginate()
       store.setDialog(false)
       store.showMessage("Entity updated successfully!")
     } catch (e: any) {
@@ -116,7 +156,7 @@ export function useCrud(entity: EntityCrud) {
   async function doDelete(formData: any) {
     try {
       await entity?.provider.delete(formData._id)
-      await loadItems()
+      await doPaginate()
       store.setDialog(false)
       store.showMessage("Entity deleted successfully!")
     } catch (e: any) {
@@ -126,6 +166,10 @@ export function useCrud(entity: EntityCrud) {
 
   }
 
+  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)}})
@@ -140,11 +184,15 @@ export function useCrud(entity: EntityCrud) {
   const search = computed({get(){return store.search} , set(value){store.setSearch(value)}})
   const totalItems = computed({get(){return store.totalItems} , set(value){store.setTotalItems(value)}})
   const items = computed({get(){return store.items} , set(value){store.setItems(value)}})
+  const exportFiles = computed({get(){return store.exportFiles} , set(value){store.setExportFiles(value)}})
+  const exportLoading = computed({get(){return store.exportLoading} , set(value){store.setExportLoading(value)}})
+  const exportListVisible = computed({get(){return store.exportListVisible} , set(value){store.setExportListVisible(value)}})
 
   return {
-    loadItems, onCreate, onEdit, onDelete, onCancel, onSubmit,
-    operation, dialog, form, notify, error, message,
-    loading, itemsPerPage, page, sortBy, search, totalItems, items
+    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/index.ts

@@ -10,8 +10,6 @@ import {useCrudStore} from "./stores/UseCrudStore";
 import {useCrud} from "./composables/UseCrud";
 import {EntityCrud} from "./EntityCrud";
 
-import type {IFields, ICrudForm, ICrudHeaders, ICrudPermissions, ICrudRules} from "./interfaces/IEntityCrud";
-export type {IFields, ICrudForm, ICrudHeaders, ICrudPermissions, ICrudRules}
 
 export {
     Crud,

package/src/stores/UseCrudStore.ts

@@ -9,8 +9,8 @@ export const useCrudStore = defineStore('CrudStore', {
             form: {} as any,
             formValid: {} as any,
             notify: false as boolean,
-            error: '' as string,
             message: '' as string,
+            error: '' as string,
             items: [] as any[],
             totalItems: 0 as number,
             itemsPerPage: 5 as number,
@@ -18,7 +18,10 @@ export const useCrudStore = defineStore('CrudStore', {
             search: '' as string,
             sortBy: [] as any[],
             loading: false,
-            inputErrors: null
+            inputErrors: null,
+            exportLoading: false,
+            exportFiles: [] as string[],
+            exportListVisible: false,
         }
     ),
     getters:{
@@ -80,6 +83,22 @@ export const useCrudStore = defineStore('CrudStore', {
         },
         setInputErrors(inputErrors: any) {
             this.inputErrors = inputErrors
+        },
+        resetErrors(){
+            this.inputErrors = null
+            this.error = ''
+        },
+        setExportFiles(exportFiles: string[]) {
+            this.exportFiles = exportFiles
+        },
+        addExportFile(exportFile: string) {
+            this.exportFiles.push(exportFile)
+        },
+        setExportLoading(exportLoading: boolean) {
+            this.exportLoading = exportLoading
+        },
+        setExportListVisible(exportListVisible: boolean) {
+            this.exportListVisible = exportListVisible
         }
     }
 

package/src/interfaces/IEntityCrud.ts

@@ -1,33 +0,0 @@
-interface ICrudHeaders {
-  title: string
-  key: string
-}
-
-interface ICrudRules {
-  [key: string]: Array<Function>
-}
-
-interface ICrudField {
-  name: string
-  type: 'string' | 'number' | 'boolean' | 'date' | 'object' | 'ref' | 'array.string' | 'array.number' | 'array.object' | 'array.ref'
-  ref?: string
-  objectFields?: ICrudField[]
-  label: string,
-  default: any
-}
-
-interface ICrudForm {
-  [key: string]: string | number | boolean | Date | null
-}
-
-type IFields = ICrudField[]
-
-interface ICrudPermissions {
-  manage: string
-  view: string
-  create: string
-  update: string
-  delete: string
-}
-
-export type {ICrudHeaders, ICrudRules, ICrudField, IFields, ICrudForm, ICrudPermissions}