@drax/crud-vue 0.22.0 → 0.24.0

package/package.json

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

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>
 
@@ -79,13 +85,13 @@ const emit = defineEmits(['filter', 'clear','updateValue'])
                 variant="outlined"
                 :prepend-inner-icon="icon(filter)"
                 hide-details  disable-rules
-                @updateValue="$emit('updateValue')"
+                @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/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/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} from "vue"
+import {ref, defineModel, watch} from "vue"
 
 
 const {t} = useI18n()
@@ -9,6 +9,10 @@ const model = defineModel<any>()
 
 let input = ref(model.value)
 
+watch(() => model.value, (newValue) => {
+  input.value = newValue
+})
+
 const debouncedSearch = debounce(updateModel, 500)
 
 function updateModel() {

package/src/composables/UseCrud.ts

@@ -1,6 +1,6 @@
 import type {IDraxPaginateResult, IEntityCrud} from "@drax/crud-share";
 import {useCrudStore} from "../stores/UseCrudStore";
-import {computed, toRaw} from "vue";
+import {computed, nextTick, toRaw} from "vue";
 import getItemId from "../helpers/getItemId";
 
 export function useCrud(entity: IEntityCrud) {
@@ -349,12 +349,26 @@ export function useCrud(entity: IEntityCrud) {
         store.setFilters(entity.formFilters)
     }
 
+    async function clearFilters(){
+        prepareFilters()
+        store.setSearch("")
+        search.value = ""
+        await nextTick(async () => {
+            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
     }