@drax/crud-vue 2.4.0 → 2.6.0

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "2.4.0",
+  "version": "2.6.0",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -24,7 +24,7 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@drax/common-front": "^2.2.0",
+    "@drax/common-front": "^2.6.0",
     "@drax/crud-front": "^2.0.0",
     "@drax/crud-share": "^2.4.0",
     "@drax/media-vue": "^2.2.1"
@@ -50,5 +50,5 @@
     "vue-tsc": "^3.2.4",
     "vuetify": "^3.11.8"
   },
-  "gitHead": "4e247435d6ffc0772296e6d013a78d2d00e31ffe"
+  "gitHead": "57830b50c2c9081b9d7e236d441ed9b2a3aca0ba"
 }

package/src/components/CrudList.vue

@@ -26,7 +26,7 @@ const {entity} = defineProps({
 
 const {
   loading, itemsPerPage, page, sortBy, search, totalItems, items,
-  doPaginate, filters, applyFilters, clearFilters
+  doPaginate, filters, applyFilters, clearFilters, paginationError
 } = useCrud(entity)
 
 // Usar el composable de columnas
@@ -61,6 +61,19 @@ defineEmits(['import', 'export', 'create', 'update', 'delete', 'view', 'edit'])
       @update:options="doPaginate"
   >
 
+    <template v-slot:no-data>
+      <v-alert
+          v-if="paginationError"
+          variant="tonal"
+          class="w-100 ma-2"
+          style="width: 100%; min-width: 100%"
+          prominent
+          type="error"
+          :text="te(paginationError) ? t(paginationError) : paginationError"
+      />
+      <v-alert v-else variant="tonal"  class="w-100 ma-2 " type="info" :text="te('crud.noData') ? t('crud.noData') : 'No data' " />
+    </template>
+
     <template v-slot:bottom>
       <v-data-table-footer :class="entity.footerClass"
                            :items-per-page-options="[5, 10, 20, 50]"
@@ -80,12 +93,12 @@ defineEmits(['import', 'export', 'create', 'update', 'delete', 'view', 'edit'])
 
         <crud-import-button
             :entity="entity"
-            @import="v => $emit('import', v)"
+            @import="(v:any) => $emit('import', v)"
         />
 
         <crud-export-button
             :entity="entity"
-            @export="v => $emit('export',v)"
+            @export="(v:any) => $emit('export',v)"
         />
 
         <crud-group-by-button

package/src/composables/UseCrud.ts

@@ -18,6 +18,14 @@ export function useCrud(entity: IEntityCrud) {
         }
     })
 
+    const paginationError = computed({
+        get() {
+            return store.paginationError
+        }, set(value) {
+            store.setPaginationError(value)
+        }
+    })
+
     const dialog = computed({
         get() {
             return store.dialog
@@ -148,6 +156,7 @@ export function useCrud(entity: IEntityCrud) {
 
     async function doPaginate() {
         store.setLoading(true)
+        store.setPaginationError("")
         try {
 
             const r: IDraxPaginateResult<any> = await entity?.provider.paginate({
@@ -160,7 +169,13 @@ export function useCrud(entity: IEntityCrud) {
             })
             store.setItems(r.items)
             store.setTotalItems(r.total)
-        } catch (e) {
+        } catch (e: any) {
+            store.setItems([])
+            store.setTotalItems(0)
+            if(e && e.message){
+                store.setPaginationError(e.message)
+
+            }
             console.error("Error paginating", e)
         } finally {
             store.setLoading(false)
@@ -401,7 +416,7 @@ export function useCrud(entity: IEntityCrud) {
     return {
         doPaginate, doExport, doUpdate, doCreate, doDelete,
         onView, onCreate, onEdit, onDelete, onCancel, onSubmit, resetCrudStore,
-        operation, dialog, form, notify, error, message, formValid,
+        operation, dialog, form, notify, error, paginationError, message, formValid,
         loading, itemsPerPage, page, sortBy, search, totalItems, items,
         prepareFilters, filters, clearFilters, applyFilters,
         exportFiles, exportLoading, exportListVisible, exportError,

package/src/stores/UseCrudStore.ts

@@ -11,6 +11,7 @@ export const useCrudStore = (id: string = 'entity') => defineStore('CrudStore'+i
             notify: false as boolean,
             message: '' as string,
             error: '' as string,
+            paginationError: '' as string,
             filters: [] as IDraxFieldFilter[],
             items: [] as any[],
             totalItems: 0 as number,
@@ -139,6 +140,9 @@ export const useCrudStore = (id: string = 'entity') => defineStore('CrudStore'+i
 
         clearVisibleColumns() {
             this.visibleColumns = []
+        },
+        setPaginationError(val: string){
+            this.paginationError = val
         }
     }