@drax/crud-vue 3.10.0 → 3.11.0

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "3.10.0",
+  "version": "3.11.0",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -24,10 +24,10 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@drax/common-front": "^3.0.0",
-    "@drax/crud-front": "^3.0.0",
-    "@drax/crud-share": "^3.10.0",
-    "@drax/media-vue": "^3.10.0"
+    "@drax/common-front": "^3.11.0",
+    "@drax/crud-front": "^3.11.0",
+    "@drax/crud-share": "^3.11.0",
+    "@drax/media-vue": "^3.11.0"
   },
   "peerDependencies": {
     "pinia": "^3.0.4",
@@ -50,5 +50,5 @@
     "vue-tsc": "^3.2.4",
     "vuetify": "^3.11.8"
   },
-  "gitHead": "063b6aba11e891c5374c2d3de6546a3ff120b4c9"
+  "gitHead": "9f9de6fe51c4f11d885385bd31a12edec799823e"
 }

package/src/components/Crud.vue

@@ -15,7 +15,7 @@ const {entity} = defineProps({
 
 const {
   onView, onCreate, onEdit, onDelete, resetCrudStore,
-  operation, dialog, notify, message, doExport,
+  operation, dialog, notify, message, doExport, doImport,
   prepareFilters
 } = useCrud(entity);
 
@@ -56,6 +56,7 @@ const {xs} = useDisplay()
           @edit="onEdit"
           @delete="onDelete"
           @export="doExport"
+          @import="doImport"
           @view="onView"
       >
 
@@ -112,6 +113,11 @@ const {xs} = useDisplay()
           </slot>
         </template>
 
+        <template v-slot:import-table="{ importFiles }">
+          <slot name="import-table" :importFiles="importFiles">
+          </slot>
+        </template>
+
       </component>
     </v-card>
 

package/src/components/CrudImportList.vue

@@ -0,0 +1,72 @@
+<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 {
+  importFiles, importListVisible, importLoading, importError
+} = useCrud(entity);
+
+</script>
+
+<template>
+  <v-card
+      v-if="importListVisible"
+      :loading="importLoading"
+      class="ma-3" density="compact" variant="outlined" color="secondary"
+  >
+    <v-card-title>
+      {{ t('action.imports') }}
+    </v-card-title>
+    <v-card-text>
+      <v-alert v-if="importError" type="error">
+        {{ t('error.crud.import') }}
+      </v-alert>
+      <template v-else>
+        <slot name="import-table" :importFiles="importFiles">
+          <v-table density="compact">
+            <thead>
+            <tr>
+              <th> {{t('crud.import.link')}}</th>
+              <th> {{t('crud.import.rows')}}</th>
+              <th> {{t('crud.import.success')}}</th>
+              <th> {{t('crud.import.error')}}</th>
+              <th> {{t('crud.import.time')}}</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr v-for="importFile in importFiles">
+              <td>
+                <a v-if="importFile.url" :href="importFile.url" target="_blank">
+                  {{t('crud.import.report')}}
+                </a>
+                <span v-else>-</span>
+              </td>
+              <td>{{ importFile.rowCount }}</td>
+              <td>{{ importFile.successCount ?? '-' }}</td>
+              <td>{{ importFile.errorCount ?? '-' }}</td>
+              <td>{{ importFile.time }}</td>
+            </tr>
+            </tbody>
+          </v-table>
+        </slot>
+      </template>
+    </v-card-text>
+
+    <v-card-actions>
+      <v-spacer></v-spacer>
+      <v-btn @click="importFiles = []" :loading="importLoading">{{ t('action.clear') }}</v-btn>
+      <v-btn @click="importListVisible = false">{{ t('action.close') }}</v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<style scoped>
+
+</style>

package/src/components/CrudList.vue

@@ -13,6 +13,7 @@ import CrudGroupByButton from "./buttons/CrudGroupByButton.vue";
 import CrudColumnsButton from "./buttons/CrudColumnsButton.vue";
 import CrudFilterButton from "./buttons/CrudFilterButton.vue";
 import CrudExportList from "./CrudExportList.vue";
+import CrudImportList from "./CrudImportList.vue";
 import type {IEntityCrud} from "@drax/crud-share";
 import {useI18n} from "vue-i18n";
 import CrudFilters from "./CrudFilters.vue";
@@ -96,7 +97,7 @@ defineEmits(['import', 'export', 'create', 'update', 'delete', 'view', 'edit'])
 
         <crud-import-button
             :entity="entity"
-            @import="(v:any) => $emit('import', v)"
+            @import="(file:any, format:any) => $emit('import', file, format)"
         />
 
         <crud-export-button
@@ -132,6 +133,12 @@ defineEmits(['import', 'export', 'create', 'update', 'delete', 'view', 'edit'])
         </template>
       </crud-export-list>
 
+      <crud-import-list :entity="entity">
+        <template #import-table="{ importFiles }">
+          <slot name="import-table" :importFiles="importFiles" />
+        </template>
+      </crud-import-list>
+
       <v-card variant="flat">
         <v-card-text v-if="entity.searchEnable">
           <crud-search

package/src/components/CrudListGallery.vue

@@ -13,6 +13,7 @@ import CrudViewButton from "./buttons/CrudViewButton.vue";
 import CrudGroupByButton from "./buttons/CrudGroupByButton.vue";
 import CrudColumnsButton from "./buttons/CrudColumnsButton.vue";
 import CrudExportList from "./CrudExportList.vue";
+import CrudImportList from "./CrudImportList.vue";
 import type {IEntityCrud} from "@drax/crud-share";
 import {useI18n} from "vue-i18n";
 import CrudFilters from "./CrudFilters.vue";
@@ -67,7 +68,7 @@ onMounted(() => {
 
           <crud-import-button
               :entity="entity"
-              @import="(v:any) => $emit('import', v)"
+              @import="(file:any, format:any) => $emit('import', file, format)"
           />
 
           <crud-export-button
@@ -115,6 +116,14 @@ onMounted(() => {
       </template>
     </crud-export-list>
 
+    <crud-import-list
+        :entity="entity"
+    >
+      <template #import-table="{ importFiles }">
+        <slot name="import-table" :importFiles="importFiles" />
+      </template>
+    </crud-import-list>
+
     <v-card variant="flat">
       <v-card-text v-if="entity.searchEnable">
         <crud-search

package/src/components/CrudListTable.vue

@@ -12,6 +12,7 @@ import CrudViewButton from "./buttons/CrudViewButton.vue";
 import CrudGroupByButton from "./buttons/CrudGroupByButton.vue";
 import CrudColumnsButton from "./buttons/CrudColumnsButton.vue";
 import CrudExportList from "./CrudExportList.vue";
+import CrudImportList from "./CrudImportList.vue";
 import type {IEntityCrud} from "@drax/crud-share";
 import {useI18n} from "vue-i18n";
 import CrudFilters from "./CrudFilters.vue";
@@ -97,7 +98,7 @@ defineEmits(['import', 'export', 'create', 'update', 'delete', 'view', 'edit'])
 
         <crud-import-button
             :entity="entity"
-            @import="(v:any) => $emit('import', v)"
+            @import="(file:any, format:any) => $emit('import', file, format)"
         />
 
         <crud-export-button
@@ -142,6 +143,14 @@ defineEmits(['import', 'export', 'create', 'update', 'delete', 'view', 'edit'])
         </template>
       </crud-export-list>
 
+      <crud-import-list
+          :entity="entity"
+      >
+        <template #import-table="{ importFiles }">
+          <slot name="import-table" :importFiles="importFiles" />
+        </template>
+      </crud-import-list>
+
       <v-card variant="flat">
         <v-card-text v-if="entity.searchEnable">
           <crud-search

package/src/components/buttons/CrudImportButton.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import {ref} from "vue";
 import type {PropType} from "vue";
 import type {IEntityCrud} from "@drax/crud-share"
 import {useCrud} from "../../composables/UseCrud";
@@ -10,26 +11,62 @@ const {entity} = defineProps({
 })
 
 const {
-  exportLoading
+  importLoading
 } = useCrud(entity)
+
+const fileInput = ref<HTMLInputElement | null>(null)
+const selectedFormat = ref<'CSV' | 'JSON'>('CSV')
+
+const emit = defineEmits(['import'])
+
+function selectFormat(format: string) {
+  selectedFormat.value = format as 'CSV' | 'JSON'
+  fileInput.value?.click()
+}
+
+function onFileChange(event: Event) {
+  const target = event.target as HTMLInputElement
+  const file = target.files?.[0]
+  if (!file) {
+    return
+  }
+
+  emit('import', file, selectedFormat.value)
+  target.value = ''
+}
 </script>
 
 <template>
   <div v-if="entity.isImportable">
+    <input
+        ref="fileInput"
+        class="d-none"
+        type="file"
+        :accept="entity.importFormats.includes('CSV') && entity.importFormats.includes('JSON') ? '.csv,.json,application/json,text/csv' : entity.importFormats.includes('CSV') ? '.csv,text/csv' : '.json,application/json'"
+        @change="onFileChange"
+    />
+    <v-menu>
+      <template v-slot:activator="{ props: mp }">
       <v-tooltip location="top">
         <template v-slot:activator="{ props }">
           <v-btn
-              v-bind="props"
-              :disabled="exportLoading"
+              v-bind="{...mp, ...props}"
+              :disabled="importLoading"
               class="mr-1"
               variant="text"
-              :loading="exportLoading"
+              :loading="importLoading"
               icon="mdi-database-import-outline"
           ></v-btn>
         </template>
         {{ t('action.import')}}
       </v-tooltip>
-
+      </template>
+      <v-list>
+        <v-list-item v-for="format in entity.importFormats" @click="selectFormat(format)">
+          <v-list-item-title>{{ format }}</v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </v-menu>
   </div>
 </template>
 

package/src/composables/UseCrud.ts

@@ -159,6 +159,14 @@ export function useCrud(entity: IEntityCrud) {
         }
     })
 
+    const importFiles = computed({
+        get() {
+            return store.importFiles
+        }, set(value) {
+            store.setImportFiles(value)
+        }
+    })
+
     const exportLoading = computed({
         get() {
             return store.exportLoading
@@ -167,6 +175,14 @@ export function useCrud(entity: IEntityCrud) {
         }
     })
 
+    const importLoading = computed({
+        get() {
+            return store.importLoading
+        }, set(value) {
+            store.setImportLoading(value)
+        }
+    })
+
     const exportListVisible = computed({
         get() {
             return store.exportListVisible
@@ -175,6 +191,22 @@ export function useCrud(entity: IEntityCrud) {
         }
     })
 
+    const importListVisible = computed({
+        get() {
+            return store.importListVisible
+        }, set(value) {
+            store.setImportListVisible(value)
+        }
+    })
+
+    const importError = computed({
+        get() {
+            return store.importError
+        }, set(value) {
+            store.setImportError(value)
+        }
+    })
+
     const filters = computed({
         get() {
             return store.filters
@@ -270,6 +302,30 @@ export function useCrud(entity: IEntityCrud) {
         }
     }
 
+    async function doImport(file: File, format: 'CSV' | 'JSON') {
+        store.setImportLoading(true)
+        store.setImportListVisible(true)
+        store.setImportError(false)
+        try {
+            if (!entity?.provider.import) {
+                throw new Error("provider.import not implemented")
+            }
+
+            const result = await entity.provider.import(file, format)
+            store.addImportFile(result)
+            await doPaginate()
+            store.showMessage(result?.message || "Import successful")
+            return result
+        } catch (e: any) {
+            store.setImportError(true)
+            store.setError(e.message || "An error occurred while importing")
+            console.error("Error importing", e)
+            return {status: 'error'}
+        } finally {
+            store.setImportLoading(false)
+        }
+    }
+
 
     function cast(item: any) {
         entity.fields.filter(field => field.type === 'date')
@@ -475,12 +531,12 @@ export function useCrud(entity: IEntityCrud) {
 
 
     return {
-        doPaginate, doExport, doUpdate, doCreate, doDelete,
+        doPaginate, doExport, doImport, doUpdate, doCreate, doDelete,
         onView, onCreate, onEdit, onDelete, onCancel, onSubmit, resetCrudStore,
         operation, dialog, form, notify, error, paginationError, message, formValid,
         loading, itemsPerPage, page, sortBy, search, totalItems, items,
         prepareFilters, filters, clearFilters, applyFilters,
-        exportFiles, exportLoading, exportListVisible, exportError,
+        exportFiles, importFiles, exportLoading, importLoading, exportListVisible, importListVisible, exportError, importError,
         cloneItem, cast, prepareEdit,
         isDynamicFiltersEnable
     }

package/src/stores/UseCrudStore.ts

@@ -32,9 +32,13 @@ export const useCrudStore = (id: string = 'entity') => defineStore('CrudStore'+i
             loading: false,
             inputErrors: null,
             exportLoading: false,
+            importLoading: false,
             exportFiles: [] as string[],
+            importFiles: [] as any[],
             exportListVisible: false,
+            importListVisible: false,
             exportError: false,
+            importError: false,
             visibleColumns: []
         }
     ),
@@ -134,15 +138,30 @@ export const useCrudStore = (id: string = 'entity') => defineStore('CrudStore'+i
         addExportFile(exportFile: string) {
             this.exportFiles.push(exportFile)
         },
+        setImportFiles(importFiles: any[]) {
+            this.importFiles = importFiles
+        },
+        addImportFile(importFile: any) {
+            this.importFiles.push(importFile)
+        },
         setExportLoading(exportLoading: boolean) {
             this.exportLoading = exportLoading
         },
+        setImportLoading(importLoading: boolean) {
+            this.importLoading = importLoading
+        },
         setExportListVisible(exportListVisible: boolean) {
             this.exportListVisible = exportListVisible
         },
+        setImportListVisible(importListVisible: boolean) {
+            this.importListVisible = importListVisible
+        },
         setExportError(error: boolean){
             this.exportError = error
         },
+        setImportError(error: boolean){
+            this.importError = error
+        },
         setFilters(filters: IDraxFieldFilter[]) {
             this.filters = filters
         },