@drax/crud-vue 2.4.0 → 2.7.0

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "2.4.0",
+  "version": "2.7.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": "6914eb5bfd532fb5e510b95c7d17b5b2ada8b07d"
 }

package/src/EntityCrud.ts

@@ -303,11 +303,11 @@ class EntityCrud implements IEntityCrud {
   }
 
   get inputVariantView(): IEntityCrudFieldVariant {
-    return 'filled'
+    return 'solo-filled'
   }
 
   get inputVariantDelete() : IEntityCrudFieldVariant{
-    return 'underlined'
+    return 'solo-filled'
   }
 
 

package/src/components/CrudForm.vue

@@ -3,7 +3,7 @@ import {useI18n} from "vue-i18n";
 import type {IEntityCrud, IEntityCrudField} from "@drax/crud-share";
 import {getItemId} from "../helpers/getItemId";
 import CrudFormField from "./CrudFormField.vue";
-import {computed, defineEmits, defineProps, ref} from "vue";
+import {computed, ref} from "vue";
 import type {PropType} from "vue";
 import {useCrudStore} from "../stores/UseCrudStore";
 import {useCrud} from "../composables/UseCrud";
@@ -132,6 +132,10 @@ const rules = computed(() => {
   }
 })
 
+const onlyView = computed(()=> {
+  return ['delete','view'].includes(operation?.value)
+})
+
 </script>
 
 <template>
@@ -158,12 +162,13 @@ const rules = computed(() => {
               :xl="field.xl ? field.xl : undefined"
           >
             <slot :name="`field.${field.name}`" v-bind="{field}">
+
               <crud-form-field
                   :field="field"
                   :entity="entity"
                   v-model="form[field.name]"
                   :clearable="false"
-                  :readonly="['delete','view'].includes(operation) || field.readonly"
+                  :readonly="onlyView || field.readonly"
                   :variant="variant"
                   :prepend-inner-icon="field?.prependInnerIcon"
                   :prepend-icon="field?.prependIcon"
@@ -206,12 +211,15 @@ const rules = computed(() => {
                       :xl="field.xl ? field.xl : undefined"
                   >
                     <slot :name="`field.${field.name}`" v-bind="{field}">
+
+
+
                       <crud-form-field
                           :field="field"
                           :entity="entity"
                           v-model="form[field.name]"
                           :clearable="false"
-                          :readonly="['delete','view'].includes(operation) || field.readonly"
+                          :readonly="onlyView || field.readonly"
                           :variant="variant"
                           :prepend-inner-icon="field?.prependInnerIcon"
                           :prepend-icon="field?.prependIcon"

package/src/components/CrudFormField.vue

@@ -18,7 +18,7 @@ const {hasPermission} = useAuth()
 
 const valueModel = defineModel<any>({type: [String, Number, Boolean, Object, Array], default: false})
 
-const {index, entity, field, parentField, errorMessages, rules} = defineProps({
+const {index, entity, field, parentField, errorMessages, rules, readonly, hideDetails} = defineProps({
   entity: {type: Object as PropType<IEntityCrud>, required: true},
   field: {type: Object as PropType<IEntityCrudField | IEntityCrudFilter | undefined>, required: true},
   prependIcon: {type: String, default: ''},
@@ -79,7 +79,14 @@ const inputErrors = computed(() => {
 defineEmits(['updateValue'])
 
 
+const hasHideDetails = computed(()=>{
+  if(readonly){
+    return true
+  }else{
+    return hideDetails ?? field.hideDetails
+  }
 
+})
 
 </script>
 
@@ -102,7 +109,7 @@ defineEmits(['updateValue'])
         :density="density"
         :variant="variant"
         :clearable="clearable"
-        :hide-details="hideDetails ?? field.hideDetails"
+        :hide-details="hasHideDetails"
         :single-line="singleLine"
         :prepend-icon="prependIcon"
         :append-icon="appendIcon"
@@ -128,7 +135,7 @@ defineEmits(['updateValue'])
         :density="density"
         :variant="variant"
         :clearable="clearable"
-        :hide-details="hideDetails ?? field.hideDetails"
+        :hide-details="hasHideDetails"
         :single-line="singleLine"
         :prepend-icon="prependIcon"
         :append-icon="appendIcon"
@@ -152,7 +159,7 @@ defineEmits(['updateValue'])
         :density="density"
         :variant="variant"
         :clearable="clearable"
-        :hide-details="hideDetails ?? field.hideDetails"
+        :hide-details="hasHideDetails"
         :single-line="singleLine"
         :prepend-icon="prependIcon"
         :append-icon="appendIcon"
@@ -179,7 +186,7 @@ defineEmits(['updateValue'])
         :density="density"
         :variant="variant"
         :clearable="clearable"
-        :hide-details="hideDetails ?? field.hideDetails"
+        :hide-details="hasHideDetails"
         :single-line="singleLine"
         :rules="rules"
         @update:modelValue="$emit('updateValue')"
@@ -208,7 +215,7 @@ defineEmits(['updateValue'])
         :density="density"
         :variant="variant"
         :clearable="clearable"
-        :hide-details="hideDetails ?? field.hideDetails"
+        :hide-details="hasHideDetails"
         :single-line="singleLine"
         :rules="rules"
         @update:modelValue="$emit('updateValue')"
@@ -250,7 +257,7 @@ defineEmits(['updateValue'])
         :density="density"
         :variant="variant"
         :clearable="clearable"
-        :hide-details="hideDetails ?? field.hideDetails"
+        :hide-details="hasHideDetails"
         :single-line="singleLine"
         :rules="rules"
         @update:modelValue="$emit('updateValue')"
@@ -279,7 +286,7 @@ defineEmits(['updateValue'])
         :density="density"
         :variant="variant"
         :clearable="clearable"
-        :hide-details="hideDetails ?? field.hideDetails"
+        :hide-details="hasHideDetails"
         :single-line="singleLine"
         @update:modelValue="$emit('updateValue')"
         :prepend-icon="prependIcon"
@@ -299,7 +306,7 @@ defineEmits(['updateValue'])
         :density="density"
         :variant="variant"
         :clearable="clearable"
-        :hide-details="hideDetails ?? field.hideDetails"
+        :hide-details="hasHideDetails"
         :single-line="singleLine"
         @update:modelValue="$emit('updateValue')"
         :prepend-icon="prependIcon"
@@ -321,7 +328,7 @@ defineEmits(['updateValue'])
         :density="density"
         :variant="variant"
         :clearable="clearable"
-        :hide-details="hideDetails ?? field.hideDetails"
+        :hide-details="hasHideDetails"
         :single-line="singleLine"
         @update:modelValue="$emit('updateValue')"
         :prepend-icon="prependIcon"
@@ -347,7 +354,7 @@ defineEmits(['updateValue'])
         :density="density"
         :variant="variant"
         :clearable="clearable"
-        :hide-details="hideDetails ?? field.hideDetails"
+        :hide-details="hasHideDetails"
         :single-line="singleLine"
         @update:modelValue="$emit('updateValue')"
         :prepend-icon="prependIcon"
@@ -371,7 +378,7 @@ defineEmits(['updateValue'])
         :density="density"
         :variant="variant"
         :clearable="clearable"
-        :hide-details="hideDetails ?? field.hideDetails"
+        :hide-details="hasHideDetails"
         :single-line="singleLine"
         @update:modelValue="(v) => {
           if(field.endOfDay){
@@ -412,7 +419,7 @@ defineEmits(['updateValue'])
         :variant="variant"
         :readonly="readonly"
         :clearable="clearable"
-        :hide-details="hideDetails ?? field.hideDetails"
+        :hide-details="hasHideDetails"
         :single-line="singleLine"
         :prepend-icon="prependIcon"
         :append-icon="appendIcon"
@@ -425,23 +432,31 @@ defineEmits(['updateValue'])
 
       <v-card-title class="text-h5">{{ field.label }}</v-card-title>
       <v-card-text>
-        <crud-form-field
-            v-for="oField in field.objectFields"
-            :entity="entity"
-            :field="oField"
-            :parent-field="field.name"
-            v-model="valueModel[oField.name]"
-            :density="density"
-            :variant="variant"
-            :clearable="clearable"
-            :hide-details="hideDetails ?? field.hideDetails"
-            :single-line="singleLine"
-            @updateValue="$emit('updateValue')"
-            :prepend-icon="prependIcon"
-            :append-icon="appendIcon"
-            :prepend-inner-icon="prependInnerIcon"
-            :append-inner-icon="appendInnerIcon"
-        ></crud-form-field>
+
+        <v-row dense>
+          <v-col cols="12"  v-for="oField in field.objectFields">
+            <crud-form-field
+
+                :entity="entity"
+                :field="oField"
+                :parent-field="field.name"
+                :readonly="readonly"
+                v-model="valueModel[oField.name]"
+                :density="density"
+                :variant="variant"
+                :clearable="clearable"
+                :hide-details="hasHideDetails"
+                :single-line="singleLine"
+                @updateValue="$emit('updateValue')"
+                :prepend-icon="prependIcon"
+                :append-icon="appendIcon"
+                :prepend-inner-icon="prependInnerIcon"
+                :append-inner-icon="appendInnerIcon"
+            ></crud-form-field>
+          </v-col>
+
+        </v-row>
+
       </v-card-text>
 
     </v-card>
@@ -464,7 +479,7 @@ defineEmits(['updateValue'])
         :density="density"
         :variant="variant"
         :clearable="clearable"
-        :hide-details="hideDetails ?? field.hideDetails"
+        :hide-details="hasHideDetails"
         :single-line="singleLine"
         :rules="rules"
         @update:modelValue="$emit('updateValue')"
@@ -494,7 +509,7 @@ defineEmits(['updateValue'])
         :density="density"
         :variant="variant"
         :clearable="clearable"
-        :hide-details="hideDetails ?? field.hideDetails"
+        :hide-details="hasHideDetails"
         :single-line="singleLine"
         :rules="rules"
         @update:modelValue="$emit('updateValue')"
@@ -525,7 +540,7 @@ defineEmits(['updateValue'])
         :density="density"
         :variant="variant"
         :clearable="clearable"
-        :hide-details="hideDetails ?? field.hideDetails"
+        :hide-details="hasHideDetails"
         :single-line="singleLine"
         @updateValue="$emit('updateValue')"
         :prepend-icon="prependIcon"
@@ -553,7 +568,7 @@ defineEmits(['updateValue'])
         :density="density"
         :variant="variant"
         :clearable="clearable"
-        :hide-details="hideDetails ?? field.hideDetails"
+        :hide-details="hasHideDetails"
         :single-line="singleLine"
         :rules="rules"
         @update:modelValue="$emit('updateValue')"
@@ -574,7 +589,7 @@ defineEmits(['updateValue'])
         :density="density"
         :variant="variant"
         :clearable="clearable"
-        :hide-details="hideDetails ?? field.hideDetails"
+        :hide-details="hasHideDetails"
         :single-line="singleLine"
         @updateValue="$emit('updateValue')"
     />
@@ -588,7 +603,7 @@ defineEmits(['updateValue'])
         :density="density"
         :variant="variant"
         :clearable="clearable"
-        :hide-details="hideDetails ?? field.hideDetails"
+        :hide-details="hasHideDetails"
         :single-line="singleLine"
         :error-messages="inputErrors"
         @updateValue="$emit('updateValue')"

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/components/CrudSearch.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import {useI18n} from "vue-i18n";
 import {debounce} from "@drax/common-front"
-import {ref, defineModel, watch} from "vue"
+import {ref, watch} from "vue"
 
 
 const {t} = useI18n()

package/src/components/buttons/CrudCreateOnTheFlyButton.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import {useI18n} from "vue-i18n";
-import {defineProps, type PropType, ref} from "vue";
+import { type PropType, ref} from "vue";
 import type {IEntityCrud} from "@drax/crud-share";
 import CrudForm from "../CrudForm.vue";
 import CrudDialog from "../CrudDialog.vue";

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
         }
     }