@drax/crud-vue 0.27.0 → 0.29.0

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.27.0",
+  "version": "0.29.0",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -24,16 +24,16 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@drax/common-front": "^0.27.0",
-    "@drax/crud-front": "^0.27.0",
-    "@drax/crud-share": "^0.27.0",
-    "@drax/media-vue": "^0.27.0"
+    "@drax/common-front": "^0.29.0",
+    "@drax/crud-front": "^0.29.0",
+    "@drax/crud-share": "^0.29.0",
+    "@drax/media-vue": "^0.29.0"
   },
   "peerDependencies": {
     "pinia": "^2.2.2",
     "vue": "^3.5.7",
     "vue-i18n": "^9.14.0",
-    "vuetify": "^3.7.2"
+    "vuetify": "^3.9.2"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.8.0",
@@ -64,5 +64,5 @@
     "vue-tsc": "^2.1.10",
     "vuetify": "^3.8.2"
   },
-  "gitHead": "b8c4047451d7bcae320e5b9e50b8e60fb69229a8"
+  "gitHead": "0a3f69beb23eb8768ebe7a3d41d61d4a6d40b104"
 }

package/src/EntityCrud.ts

@@ -30,7 +30,8 @@ class EntityCrud implements IEntityCrud {
                 key: 'actions',
                 sortable: false,
                 align: 'center',
-                minWidth: '190px'
+                minWidth: '190px',
+                fixed:  'end'
             },
         ]
     }
@@ -169,6 +170,10 @@ class EntityCrud implements IEntityCrud {
         return ['_id']
     }
 
+    get exportFileName(){
+        return 'export'
+    }
+
     get isImportable() {
         return true
     }
@@ -211,6 +216,42 @@ class EntityCrud implements IEntityCrud {
         return true
     }
 
+    get containerFluid(){
+        return false
+    }
+
+    get cardDensity() : 'default' | 'comfortable' | 'compact' {
+        return 'default'
+    }
+
+    get cardClass() : string {
+        return 'rounded-xl'
+    }
+
+    get toolbarDensity() : 'default' | 'comfortable' | 'compact' {
+        return 'default'
+    }
+
+    get toolbarClass() : string {
+        return 'bg-primary'
+    }
+
+    get tableDensity() : 'default' | 'comfortable' | 'compact' {
+        return 'default'
+    }
+
+    get headerProps(){
+        return { class: 'bg-primary' }
+    }
+
+    get tableStriped() : null | 'odd' | 'even' {
+        return 'even'
+    }
+
+    get footerClass(){
+        return 'bg-primary'
+    }
+
 
 }
 

package/src/components/Crud.vue

@@ -22,14 +22,14 @@ onBeforeMount(() => {
   prepareFilters()
 })
 
-const emit = defineEmits(['created', 'updated', 'deleted', 'viewed','canceled'])
+const emit = defineEmits(['created', 'updated', 'deleted', 'viewed', 'canceled'])
 
 
 </script>
 
 <template>
-  <v-container fluid class="mt-5">
-    <v-card>
+  <v-container :fluid="entity.containerFluid" class="mt-5">
+    <v-card :class="entity.cardClass" :density="entity.cardDensity">
 
       <crud-list
           :entity="entity"
@@ -50,6 +50,16 @@ const emit = defineEmits(['created', 'updated', 'deleted', 'viewed','canceled'])
           </slot>
         </template>
 
+        <template v-for="iFilter in entity.filters"
+                  :key="iFilter.name"
+                  v-slot:[`filter.${iFilter.name}`]="{filter, filterIndex}"
+        >
+          <slot v-if="$slots[`filter.${iFilter.name}`]"
+                :name="`filter.${iFilter.name}`"
+                v-bind="{filter, filterIndex}"
+          />
+        </template>
+
         <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}">
             {{ (Array.isArray(value) && value.length > 0) || !Array.isArray(value) ? value : '' }}

package/src/components/CrudExportList.vue

@@ -9,7 +9,7 @@ const {entity} = defineProps({
 })
 
 const {
-  exportFiles, exportListVisible, exportLoading
+  exportFiles, exportListVisible, exportLoading, exportError
 } = useCrud(entity);
 
 </script>
@@ -25,7 +25,10 @@ const {
 
     </v-card-title>
     <v-card-text>
-      <v-table density="compact">
+      <v-alert v-if="exportError" type="error">
+        {{ t('export.error.message') }}
+      </v-alert>
+      <v-table density="compact" v-else>
         <thead>
         <tr>
           <th>Link</th><th>Rows</th><th>Time</th>

package/src/components/CrudFilters.vue

@@ -76,17 +76,21 @@ const emit = defineEmits(['applyFilter', 'clearFilter'])
                  :lg="filter.lg ? filter.lg : 4"
                  :xl="filter.xl ? filter.xl : 3"
           >
-            <crud-form-field
-                :field="filter"
-                :entity="entity"
-                v-model="valueModel[index].value"
-                :clearable="true"
-                density="compact"
-                variant="outlined"
-                :prepend-inner-icon="icon(filter)"
-                hide-details  disable-rules
-                @updateValue="onUpdateValue"
-            />
+
+            <slot :name="`filter.${filter.name}`" v-bind="{filter, filterIndex: index}">
+              <crud-form-field
+                  :field="filter"
+                  :entity="entity"
+                  v-model="valueModel[index].value"
+                  :clearable="true"
+                  density="compact"
+                  variant="outlined"
+                  :prepend-inner-icon="icon(filter)"
+                  hide-details  disable-rules
+                  @updateValue="onUpdateValue"
+              />
+            </slot>
+
           </v-col>
 
         </v-row>

package/src/components/CrudFormField.vue

@@ -308,9 +308,9 @@ defineEmits(['updateValue'])
         :append-icon="appendIcon"
         :prepend-inner-icon="prependInnerIcon"
         :append-inner-icon="appendInnerIcon"
-
+        :max="field.max"
     >
-      <template v-if="field.endOfDay" v-slot:append-inner>
+      <template v-if="field.endOfDay && field.showEndOfDayChip !== false" v-slot:append-inner>
         <v-chip size="small">23:59</v-chip>
       </template>
     </v-date-input>

package/src/components/CrudList.vue

@@ -53,7 +53,9 @@ defineEmits(['import', 'export', 'create', 'update', 'delete', 'view', 'edit'])
 
 <template>
   <v-data-table-server
-      class="border"
+      :density="entity.tableDensity"
+      :striped="entity.tableStriped"
+      :header-props="entity.headerProps"
       v-if="hasPermission(entity.permissions.view)"
       v-model:items-per-page="itemsPerPage"
       :items-per-page-options="[5, 10, 20, 50]"
@@ -68,8 +70,15 @@ defineEmits(['import', 'export', 'create', 'update', 'delete', 'view', 'edit'])
       item-value="name"
       @update:options="doPaginate"
   >
+
+    <template v-slot:bottom>
+      <v-data-table-footer :class="entity.footerClass"
+                           :items-per-page-options="[5, 10, 20, 50]"
+      ></v-data-table-footer>
+    </template>
+
     <template v-slot:top>
-      <v-toolbar density="compact">
+      <v-toolbar :class="entity.toolbarClass" :density="entity.toolbarDensity">
         <v-toolbar-title>
           {{ te(`${entity.name.toLowerCase()}.crud`) ? t(`${entity.name.toLowerCase()}.crud`) : entity.name }}
         </v-toolbar-title>
@@ -101,7 +110,7 @@ defineEmits(['import', 'export', 'create', 'update', 'delete', 'view', 'edit'])
           :entity="entity"
       />
 
-      <v-card>
+      <v-card variant="flat">
         <v-card-text v-if="entity.searchEnable">
           <crud-search
               v-model="search"
@@ -110,23 +119,36 @@ defineEmits(['import', 'export', 'create', 'update', 'delete', 'view', 'edit'])
 
         <v-card-text class="pt-0">
           <slot name="filters" v-bind="{filters}"></slot>
+
           <crud-filters
-            v-if="!$slots.filters"
-            :entity="entity"
-            v-model="filters"
-            :action-buttons="entity.filterButtons"
-            @clearFilter="clearFilters()"
-            @applyFilter="applyFilters()"
-          />
+              v-if="!$slots.filters"
+              :entity="entity"
+              v-model="filters"
+              :action-buttons="entity.filterButtons"
+              @clearFilter="clearFilters()"
+              @applyFilter="applyFilters()"
+          >
+
+            <template v-for="iFilter in entity.filters"
+                      :key="iFilter.name"
+                      v-slot:[`filter.${iFilter.name}`]="{filter, filterIndex}"
+            >
+              <slot v-if="$slots[`filter.${iFilter.name}`]"
+                    :name="`filter.${iFilter.name}`"
+                    v-bind="{filter, filterIndex}"
+              />
+            </template>
+          </crud-filters>
         </v-card-text>
 
       </v-card>
 
+      <v-divider></v-divider>
     </template>
 
 
     <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}">
+      <slot v-if="$slots[`item.${header.key}`]" :name="`item.${header.key}`" v-bind="{item, value}">
         {{ value }}
       </slot>
     </template>

package/src/components/buttons/CrudCreateButton.vue

@@ -12,7 +12,6 @@ const {t} = useI18n()
              icon="mdi-plus"
              class="mr-1"
              variant="text"
-             color="primary"
       >
       </v-btn>
     </template>

package/src/components/buttons/CrudUpdateButton.vue

@@ -11,7 +11,7 @@ const {t} = useI18n()
           icon="mdi-pencil"
           class="mr-1"
           variant="text"
-          color="primary"
+          color="blue"
           slim
       >
       </v-btn>

package/src/components/buttons/CrudViewButton.vue

@@ -11,7 +11,7 @@ const {t} = useI18n()
           icon="mdi-magnify"
           class="mr-1"
           variant="text"
-          color="secondary"
+          color="teal"
           slim
       >
       </v-btn>

package/src/composables/UseCrud.ts

@@ -7,6 +7,13 @@ export function useCrud(entity: IEntityCrud) {
 
     const store = useCrudStore()
 
+    const exportError = computed({
+        get() {
+            return store.exportError
+        }, set(value) {
+            store.setExportError(value)
+        }
+    })
 
     const dialog = computed({
         get() {
@@ -167,11 +174,13 @@ export function useCrud(entity: IEntityCrud) {
             }
 
             const headers: string = entity.exportHeaders.join(',')
+            const fileName: string = entity.exportFileName
 
             const r: any = await entity?.provider.export({
                 format: format,
                 headers: headers,
                 separator: ";",
+                fileName: fileName,
                 orderBy: store.sortBy[0]?.key,
                 order: store.sortBy[0]?.order,
                 search: store.search,
@@ -186,6 +195,7 @@ export function useCrud(entity: IEntityCrud) {
             return r
 
         } catch (e) {
+            store.setExportError(true)
             console.error("Error exporting csv", e)
         } finally {
             store.setExportLoading(false)
@@ -371,7 +381,7 @@ export function useCrud(entity: IEntityCrud) {
         operation, dialog, form, notify, error, message, formValid,
         loading, itemsPerPage, page, sortBy, search, totalItems, items,
         prepareFilters, filters, clearFilters, applyFilters,
-        exportFiles, exportLoading, exportListVisible
+        exportFiles, exportLoading, exportListVisible, exportError
     }
 
 }

package/src/stores/UseCrudStore.ts

@@ -23,6 +23,7 @@ export const useCrudStore = defineStore('CrudStore', {
             exportLoading: false,
             exportFiles: [] as string[],
             exportListVisible: false,
+            exportError: false
         }
     ),
     getters: {
@@ -42,6 +43,11 @@ export const useCrudStore = defineStore('CrudStore', {
                     }
                 }
             }
+        },
+        getFilterIndex(state: any) {
+            return (filterName: string) => {
+                return state.filters.findIndex((filter: any) => filter.field === filterName)
+            }
         }
 
     },
@@ -111,6 +117,9 @@ export const useCrudStore = defineStore('CrudStore', {
         setExportListVisible(exportListVisible: boolean) {
             this.exportListVisible = exportListVisible
         },
+        setExportError(error: boolean){
+            this.exportError = error
+        },
         setFilters(filters: any[]) {
             this.filters = filters
         }