@drax/crud-vue 0.21.0 → 0.23.0

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.21.0",
+  "version": "0.23.0",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -24,10 +24,10 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@drax/common-front": "^0.21.0",
-    "@drax/crud-front": "^0.21.0",
-    "@drax/crud-share": "^0.21.0",
-    "@drax/media-vue": "^0.21.0"
+    "@drax/common-front": "^0.23.0",
+    "@drax/crud-front": "^0.23.0",
+    "@drax/crud-share": "^0.23.0",
+    "@drax/media-vue": "^0.23.0"
   },
   "peerDependencies": {
     "pinia": "^2.2.2",
@@ -64,5 +64,5 @@
     "vue-tsc": "^2.1.10",
     "vuetify": "^3.8.2"
   },
-  "gitHead": "f548c85def32664144bfece18641b17c27bab6dd"
+  "gitHead": "a5f8dca06ceb293bf54c3f32ca0c871af2fc02e4"
 }

package/src/EntityCrud.ts

@@ -207,6 +207,11 @@ class EntityCrud implements IEntityCrud {
         return true
     }
 
+    get filterButtons(){
+        return true
+    }
+
+
 }
 
 export default EntityCrud;

package/src/components/CrudFilters.vue

@@ -9,9 +9,9 @@ const {t} = useI18n()
 const valueModel = defineModel({type: [Object]})
 const {hasPermission} = useAuth()
 
-const {entity} = defineProps({
+const {entity, actionButtons} = defineProps({
   entity: {type: Object as PropType<IEntityCrud>, required: true},
-  actions: {type: Boolean, default: false},
+  actionButtons: {type: Boolean, default: false},
 })
 
 const aFields = computed(() => {
@@ -46,16 +46,22 @@ const icon = computed(() => {
 })
 
 
-async function filter() {
-  emit('filter')
+ function filter() {
+  emit('applyFilter')
 }
 
-async function clear() {
-  emit('filter')
+ function clear() {
+  emit('clearFilter')
+}
+
+function onUpdateValue(){
+  if(!actionButtons){
+    emit('applyFilter')
+  }
 }
 
 
-const emit = defineEmits(['filter', 'clear','updateValue'])
+const emit = defineEmits(['applyFilter', 'clearFilter'])
 
 </script>
 
@@ -78,14 +84,14 @@ const emit = defineEmits(['filter', 'clear','updateValue'])
                 density="compact"
                 variant="outlined"
                 :prepend-inner-icon="icon(filter)"
-                hide-details single-line disable-rules
-                @updateValue="$emit('updateValue')"
+                hide-details  disable-rules
+                @updateValue="onUpdateValue"
             />
           </v-col>
 
         </v-row>
 
-    <v-card-actions v-if="actions" class="pb-0">
+    <v-card-actions v-if="actionButtons" class="pb-0">
       <v-spacer />
       <v-btn variant="text" density="compact" color="grey" @click="clear">{{ t('action.clear') }}</v-btn>
       <v-btn variant="flat" density="compact" color="primary" @click="filter">

package/src/components/CrudFormField.vue

@@ -282,7 +282,6 @@ defineEmits(['updateValue'])
 
     <v-date-input
         v-if="field.type === 'date'"
-        type="text"
         :name="name"
         :label="label"
         :hint="field.hint"
@@ -296,12 +295,25 @@ defineEmits(['updateValue'])
         :clearable="clearable"
         :hide-details="hideDetails"
         :single-line="singleLine"
-        @update:modelValue="$emit('updateValue')"
+        @update:modelValue="(v) => {
+          if(field.endOfDay){
+            const date = new Date(v)
+            date.setHours(23, 59, 59, 0)
+            valueModel = date
+          }
+          $emit('updateValue')
+        }"
+        @click:clear="() => {valueModel = null;  $emit('updateValue');} "
         :prepend-icon="prependIcon"
         :append-icon="appendIcon"
         :prepend-inner-icon="prependInnerIcon"
         :append-inner-icon="appendInnerIcon"
-    />
+
+    >
+      <template v-if="field.endOfDay" v-slot:append-inner>
+        <v-chip size="small">23:59</v-chip>
+      </template>
+    </v-date-input>
 
     <crud-autocomplete
         v-if="field.type === 'ref'"

package/src/components/CrudList.vue

@@ -25,7 +25,7 @@ const {entity} = defineProps({
 
 const {
   loading, itemsPerPage, page, sortBy, search, totalItems, items,
-  doPaginate, filters
+  doPaginate, filters, applyFilters, clearFilters
 } = useCrud(entity)
 
 const actions: IEntityCrudHeader[] = entity.actionHeaders.map(header => ({
@@ -114,7 +114,9 @@ defineEmits(['import', 'export', 'create', 'update', 'delete', 'view', 'edit'])
             v-if="!$slots.filters"
             :entity="entity"
             v-model="filters"
-            @updateValue="doPaginate()"
+            :action-buttons="entity.filterButtons"
+            @clearFilter="clearFilters()"
+            @applyFilter="applyFilters()"
           />
         </v-card-text>
 

package/src/composables/UseCrud.ts

@@ -349,12 +349,21 @@ export function useCrud(entity: IEntityCrud) {
         store.setFilters(entity.formFilters)
     }
 
+    async function clearFilters(){
+        prepareFilters()
+        await doPaginate()
+    }
+
+    async function applyFilters(){
+        await doPaginate()
+    }
+
 
     return {
         doPaginate, doExport, onView, onCreate, onEdit, onDelete, onCancel, onSubmit, resetCrudStore,
         operation, dialog, form, notify, error, message, formValid,
         loading, itemsPerPage, page, sortBy, search, totalItems, items,
-        prepareFilters, filters,
+        prepareFilters, filters, clearFilters, applyFilters,
         exportFiles, exportLoading, exportListVisible
     }