@drax/crud-vue 3.0.0 → 3.2.0

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "3.0.0",
+  "version": "3.2.0",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -26,8 +26,8 @@
   "dependencies": {
     "@drax/common-front": "^3.0.0",
     "@drax/crud-front": "^3.0.0",
-    "@drax/crud-share": "^3.0.0",
-    "@drax/media-vue": "^3.0.0"
+    "@drax/crud-share": "^3.2.0",
+    "@drax/media-vue": "^3.2.0"
   },
   "peerDependencies": {
     "pinia": "^3.0.4",
@@ -50,5 +50,5 @@
     "vue-tsc": "^3.2.4",
     "vuetify": "^3.11.8"
   },
-  "gitHead": "63ae718b24ea25ae80b1a9a5dfb84a3abbb95199"
+  "gitHead": "8446a621e05bc1f4fd080c814a3ebdd7ae8a626b"
 }

package/src/EntityCrud.ts

@@ -1,7 +1,8 @@
 import type {
   IEntityCrud, IEntityCrudForm, IEntityCrudHeader, IEntityCrudRefs,
   IEntityCrudRules, IEntityCrudField, IEntityCrudPermissions,
-  IDraxCrudProvider, IEntityCrudFilter, IEntityCrudFieldVariant, IDraxFieldFilter
+  IDraxCrudProvider, IEntityCrudFilter, IEntityCrudFieldVariant, IDraxFieldFilter,
+  IEntityCrudOnInput
 } from "@drax/crud-share";
 
 
@@ -149,10 +150,20 @@ class EntityCrud implements IEntityCrud {
     return {}
   }
 
+
+
   getRule(field: string | undefined): Array<Function> | undefined {
     return field && this.rules[field] && this.rules[field].length > 0 ? this.rules[field] : undefined
   }
 
+  get onInputs(): IEntityCrudOnInput {
+    return {}
+  }
+
+  getOnInput(field: string | undefined): Function | undefined {
+    return (field && this.onInputs[field] && typeof this.onInputs[field] === 'function')  ? this.onInputs[field] : undefined
+  }
+
   get isViewable() {
     return true
   }
@@ -209,6 +220,10 @@ class EntityCrud implements IEntityCrud {
     return false
   }
 
+  get isFilterable(){
+    return true
+  }
+
   get dialogFullscreen() {
     return false
   }

package/src/components/CrudForm.vue

@@ -132,6 +132,12 @@ const rules = computed(() => {
   }
 })
 
+const onInput = computed(() => {
+  return (fieldName: string) => {
+    return entity?.getOnInput(fieldName) as Function || undefined
+  }
+})
+
 const onlyView = computed(()=> {
   return ['delete','view'].includes(operation?.value)
 })
@@ -177,6 +183,7 @@ const onlyView = computed(()=> {
                   :preview="field?.preview"
                   :previewHeight="field?.previewHeight"
                   :rules="rules(field.name)"
+                  :on-input="onInput(field.name)"
                   :hint="field.hint"
                   :persistent-hint="field.persistentHint"
                   :placeholder="field.placeholder"
@@ -226,6 +233,7 @@ const onlyView = computed(()=> {
                           :append-icon="field?.appendIcon"
                           :append-inner-icon="field?.appendInnerIcon"
                           :rules="rules(field.name)"
+                          :on-input="onInput(field.name)"
                           :hint="field.hint"
                           :persistent-hint="field.persistentHint"
                           :placeholder="field.placeholder"
@@ -284,6 +292,7 @@ const onlyView = computed(()=> {
                           :append-icon="field?.appendIcon"
                           :append-inner-icon="field?.appendInnerIcon"
                           :rules="rules(field.name)"
+                          :on-input="onInput(field.name)"
                           :hint="field.hint"
                           :persistent-hint="field.persistentHint"
                           :placeholder="field.placeholder"

package/src/components/CrudFormField.vue

@@ -23,7 +23,7 @@ const {hasPermission} = useAuth()
 
 const valueModel = defineModel<any>({type: [String, Number, Boolean, Object, Array], default: false})
 
-const {index, entity, field, parentField, errorMessages, rules, readonly, hideDetails} = defineProps({
+const {index, entity, field, parentField, errorMessages, rules, onInput, 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: ''},
@@ -43,6 +43,7 @@ const {index, entity, field, parentField, errorMessages, rules, readonly, hideDe
   previewHeight: {type: String, default: '100px'},
   parentField: {type: String, default: null, required: false},
   errorMessages: {type: Array as PropType<string[]>, default: null, required: false},
+  onInput: {type: Function as PropType<Function>, required: false},
   rules: {type: Array as PropType<ValidationRule[]>, required: false},
   index: {type: Number, default: null, required: false},
   density: {type: String as PropType<'comfortable' | 'compact' | 'default'>, default: 'default'},
@@ -120,6 +121,7 @@ const hasHideDetails = computed(()=>{
         :append-icon="appendIcon"
         :prepend-inner-icon="prependInnerIcon"
         :append-inner-icon="appendInnerIcon"
+        @input="onInput"
         @update:modelValue="$emit('updateValue')"
     />
 
@@ -146,6 +148,7 @@ const hasHideDetails = computed(()=>{
         :append-icon="appendIcon"
         :prepend-inner-icon="prependInnerIcon"
         :append-inner-icon="appendInnerIcon"
+        @input="onInput"
         @update:modelValue="$emit('updateValue')"
     />
 
@@ -169,10 +172,11 @@ const hasHideDetails = computed(()=>{
         :prepend-icon="prependIcon"
         :append-icon="appendIcon"
         :prepend-inner-icon="prependInnerIcon"
-        @update:modelValue="$emit('updateValue')"
         :type="show ? 'text' : 'password'"
         :append-inner-icon="show ? 'mdi-eye' : 'mdi-eye-off'"
         @click:append-inner="show = !show"
+        @input="onInput"
+        @update:modelValue="$emit('updateValue')"
     />
 
 

package/src/components/CrudList.vue

@@ -11,6 +11,7 @@ import CrudDeleteButton from "./buttons/CrudDeleteButton.vue";
 import CrudViewButton from "./buttons/CrudViewButton.vue";
 import CrudGroupByButton from "./buttons/CrudGroupByButton.vue";
 import CrudColumnsButton from "./buttons/CrudColumnsButton.vue";
+import CrudFilterButton from "./buttons/CrudFilterButton.vue";
 import CrudExportList from "./CrudExportList.vue";
 import type {IEntityCrud} from "@drax/crud-share";
 import {useI18n} from "vue-i18n";
@@ -19,6 +20,7 @@ import { useCrudColumns } from "../composables/UseCrudColumns";
 import CrudFiltersDynamic from "./CrudFiltersDynamic.vue";
 import CrudFiltersAction from "./CrudFiltersAction.vue";
 
+
 const {t, te} = useI18n()
 const {hasPermission} = useAuth()
 
@@ -90,7 +92,6 @@ defineEmits(['import', 'export', 'create', 'update', 'delete', 'view', 'edit'])
         <v-spacer></v-spacer>
 
         <slot name="toolbar">
-
         </slot>
 
         <crud-import-button
@@ -108,6 +109,10 @@ defineEmits(['import', 'export', 'create', 'update', 'delete', 'view', 'edit'])
             :entity="entity"
         />
 
+
+        <crud-filter-button
+            :entity="entity" />
+
         <crud-columns-button
             v-if="entity.isColumnSelectable"
             :entity="entity"

package/src/components/CrudListGallery.vue

@@ -19,6 +19,7 @@ import CrudFilters from "./CrudFilters.vue";
 import {useCrudColumns} from "../composables/UseCrudColumns";
 import CrudFiltersDynamic from "./CrudFiltersDynamic.vue";
 import CrudFiltersAction from "./CrudFiltersAction.vue";
+import CrudFilterButton from "./buttons/CrudFilterButton.vue";
 
 const {t, te} = useI18n()
 const {hasPermission} = useAuth()
@@ -29,7 +30,8 @@ const {entity} = defineProps({
 
 const {
   loading, itemsPerPage, page, search, totalItems, items,
-  doPaginate, filters, applyFilters, clearFilters, paginationError
+  doPaginate, filters, applyFilters, clearFilters, paginationError,
+    isDynamicFiltersEnable
 } = useCrud(entity)
 
 // Usar el composable de columnas
@@ -51,40 +53,50 @@ onMounted(() => {
 <template>
   <div v-if="hasPermission(entity.permissions.view)" class="d-flex flex-column h-100 pb-4">
     <!-- Toolbar -->
-    <v-toolbar :class="entity.toolbarClass" :density="entity.toolbarDensity">
+    <v-toolbar :class="entity.toolbarClass" :density="entity.toolbarDensity" extended>
       <v-toolbar-title>
         {{ te(`${entity.name.toLowerCase()}.crud`) ? t(`${entity.name.toLowerCase()}.crud`) : entity.name }}
       </v-toolbar-title>
       <v-spacer></v-spacer>
+      <template v-slot:extension>
 
-      <slot name="toolbar">
-      </slot>
+        <v-row justify="end" class="px-2 border-t-sm" >
+          <slot name="toolbar">
+          </slot>
 
-      <crud-import-button
-          :entity="entity"
-          @import="(v:any) => $emit('import', v)"
-      />
+          <crud-import-button
+              :entity="entity"
+              @import="(v:any) => $emit('import', v)"
+          />
 
-      <crud-export-button
-          :entity="entity"
-          @export="(v:any) => $emit('export',v)"
-      />
+          <crud-export-button
+              :entity="entity"
+              @export="(v:any) => $emit('export',v)"
+          />
 
-      <crud-group-by-button
-          v-if="entity.isGroupable"
-          :entity="entity"
-      />
+          <crud-group-by-button
+              v-if="entity.isGroupable"
+              :entity="entity"
+          />
+
+          <crud-filter-button
+              :entity="entity" />
+
+          <crud-columns-button
+              v-if="entity.isColumnSelectable"
+              :entity="entity"
+          />
+
+          <crud-create-button
+              v-if="entity.isCreatable"
+              :entity="entity"
+              @click="$emit('create')"
+          />
+        </v-row>
+
+      </template>
 
-      <crud-columns-button
-          v-if="entity.isColumnSelectable"
-          :entity="entity"
-      />
 
-      <crud-create-button
-          v-if="entity.isCreatable"
-          :entity="entity"
-          @click="$emit('create')"
-      />
     </v-toolbar>
 
     <crud-export-list
@@ -124,7 +136,7 @@ onMounted(() => {
           </crud-filters>
 
           <crud-filters-dynamic
-              v-if="entity.dynamicFiltersEnable"
+              v-if="isDynamicFiltersEnable"
               :entity="entity"
               v-model="filters"
               :auto-filter="!entity.filterButtons"

package/src/components/CrudListTable.vue

@@ -18,6 +18,7 @@ import CrudFilters from "./CrudFilters.vue";
 import { useCrudColumns } from "../composables/UseCrudColumns";
 import CrudFiltersDynamic from "./CrudFiltersDynamic.vue";
 import CrudFiltersAction from "./CrudFiltersAction.vue";
+import CrudFilterButton from "./buttons/CrudFilterButton.vue";
 
 const {t, te} = useI18n()
 const {hasPermission} = useAuth()
@@ -28,7 +29,8 @@ const {entity} = defineProps({
 
 const {
   loading, itemsPerPage, page, sortBy, search, totalItems, items,
-  doPaginate, filters, applyFilters, clearFilters, paginationError
+  doPaginate, filters, applyFilters, clearFilters, paginationError,
+  isDynamicFiltersEnable
 } = useCrud(entity)
 
 // Usar el composable de columnas
@@ -108,6 +110,9 @@ defineEmits(['import', 'export', 'create', 'update', 'delete', 'view', 'edit'])
             :entity="entity"
         />
 
+        <crud-filter-button
+            :entity="entity" />
+
         <crud-columns-button
             v-if="entity.isColumnSelectable"
             :entity="entity"
@@ -158,7 +163,7 @@ defineEmits(['import', 'export', 'create', 'update', 'delete', 'view', 'edit'])
             </crud-filters>
 
             <crud-filters-dynamic
-                v-if="entity.dynamicFiltersEnable"
+                v-if="isDynamicFiltersEnable"
                 :entity="entity"
                 v-model="filters"
                 :auto-filter="!entity.filterButtons"

package/src/components/buttons/CrudFilterButton.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import {useI18n} from "vue-i18n";
+import {computed} from "vue";
+import type {PropType} from "vue";
+import type {IEntityCrud} from "@drax/crud-share";
+import {useCrudStore} from "../../stores/UseCrudStore";
+
+const {entity} = defineProps({
+  entity: {type: Object as PropType<IEntityCrud>, required: true},
+})
+
+const store = useCrudStore(entity?.name)
+
+let dynamicFiltersEnable = computed({
+  get: () => store.dynamicFiltersEnable,
+  set: (value: boolean) => store.setDynamicFiltersEnable(value)
+})
+
+const {t} = useI18n()
+</script>
+
+<template>
+  <div v-if="entity.isFilterable">
+    <v-tooltip location="top">
+      <template v-slot:activator="{ props }">
+        <v-btn
+            v-bind="{ ...$attrs, ...props }"
+            :icon="dynamicFiltersEnable ? 'mdi-filter-off' : 'mdi-filter' "
+            class="mr-1"
+            variant="text"
+            @click="dynamicFiltersEnable = !dynamicFiltersEnable"
+        >
+        </v-btn>
+      </template>
+      {{ t('action.filters') }}
+    </v-tooltip>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

package/src/composables/UseCrud.ts

@@ -19,6 +19,10 @@ export function useCrud(entity: IEntityCrud) {
 
     const {t: $t, te: $te} = useI18n()
 
+    const isDynamicFiltersEnable = computed(() => {
+        return entity.dynamicFiltersEnable && store.dynamicFiltersEnable
+    })
+
     const exportError = computed({
         get() {
             return store.exportError
@@ -477,7 +481,8 @@ export function useCrud(entity: IEntityCrud) {
         loading, itemsPerPage, page, sortBy, search, totalItems, items,
         prepareFilters, filters, clearFilters, applyFilters,
         exportFiles, exportLoading, exportListVisible, exportError,
-        cloneItem, cast, prepareEdit
+        cloneItem, cast, prepareEdit,
+        isDynamicFiltersEnable
     }
 
 }

package/src/index.ts

@@ -4,6 +4,8 @@ import CrudForm from "./components/CrudForm.vue";
 import CrudFormField from "./components/CrudFormField.vue";
 import CrudFormList from "./components/CrudFormList.vue";
 import CrudList from "./components/CrudList.vue";
+import CrudListTable from "./components/CrudListTable.vue";
+import CrudListGallery from "./components/CrudListGallery.vue";
 import CrudFilters from "./components/CrudFilters.vue";
 import CrudNotify from "./components/CrudNotify.vue";
 import CrudSearch from "./components/CrudSearch.vue";
@@ -25,6 +27,8 @@ export {
     CrudFormField,
     CrudFormList,
     CrudList,
+    CrudListTable,
+    CrudListGallery,
     CrudNotify,
     CrudSearch,
     CrudAutocomplete,

package/src/stores/UseCrudStore.ts

@@ -1,5 +1,5 @@
 import {defineStore} from "pinia";
-import type {IEntityCrudOperation, IDraxFieldFilter} from "@drax/crud-share";
+import type {IEntityCrudOperation, IDraxFieldFilter, IEntityCrudFilter} from "@drax/crud-share";
 
 export const useCrudStore = (id: string = 'entity') => defineStore('CrudStore'+id, {
     state: () => (
@@ -13,7 +13,16 @@ export const useCrudStore = (id: string = 'entity') => defineStore('CrudStore'+i
             error: '' as string,
             paginationError: '' as string,
             filters: [] as IDraxFieldFilter[],
-            dynamicFilters: [] as IDraxFieldFilter[],
+            dynamicFilters: [{
+                default: undefined,
+                label: "",
+                name: "",
+                operator: "eq",
+                type: "string",
+                permission: "",
+                value: ""
+            }] as IEntityCrudFilter[],
+            dynamicFiltersEnable: false as boolean,
             items: [] as any[],
             totalItems: 0 as number,
             itemsPerPage: 10 as number,
@@ -30,6 +39,14 @@ export const useCrudStore = (id: string = 'entity') => defineStore('CrudStore'+i
         }
     ),
     getters: {
+        getFieldValue(state: any) {
+            return (fieldName: string) => {
+                if (fieldName && state.form[fieldName]) {
+                    return state.form[fieldName]
+                }
+                return undefined
+            }
+        },
         getFieldInputErrors(state: any) {
             return (fieldName: string) => {
                 if (state.inputErrors && state.inputErrors[fieldName]) {
@@ -150,6 +167,9 @@ export const useCrudStore = (id: string = 'entity') => defineStore('CrudStore'+i
                 this.dynamicFilters[index].value = value
             }
         },
+        setDynamicFiltersEnable(enable: boolean) {
+            this.dynamicFiltersEnable = enable
+        },
         setVisibleColumns(columns: string[]) {
             this.visibleColumns = columns
         },