@drax/crud-vue 2.11.0 → 3.1.0

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "2.11.0",
+  "version": "3.1.0",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -24,10 +24,10 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@drax/common-front": "^2.11.0",
-    "@drax/crud-front": "^2.11.0",
-    "@drax/crud-share": "^2.11.0",
-    "@drax/media-vue": "^2.2.1"
+    "@drax/common-front": "^3.0.0",
+    "@drax/crud-front": "^3.0.0",
+    "@drax/crud-share": "^3.1.0",
+    "@drax/media-vue": "^3.1.0"
   },
   "peerDependencies": {
     "pinia": "^3.0.4",
@@ -50,5 +50,5 @@
     "vue-tsc": "^3.2.4",
     "vuetify": "^3.11.8"
   },
-  "gitHead": "8919d31d4d9512e48ac461b0876dc85a5849daea"
+  "gitHead": "262ea8f861c84ca1ad4d555545c5a94b95dbf25e"
 }

package/src/EntityCrud.ts

@@ -209,6 +209,10 @@ class EntityCrud implements IEntityCrud {
     return false
   }
 
+  get isFilterable(){
+    return true
+  }
+
   get dialogFullscreen() {
     return false
   }

package/src/components/CrudFiltersDynamic.vue

@@ -7,9 +7,9 @@ import {useAuth} from "@drax/identity-vue";
 import {useFilterIcon} from "../composables/UseFilterIcon";
 import {useCrudStore} from "../stores/UseCrudStore";
 import {useEntityStore} from "../stores/UseEntityStore";
-import {useDynamicFilters} from "../composables/UseDynamicFilters.ts";
+import {useDynamicFilters} from "../composables/UseDynamicFilters";
 
-const {t, te} = useI18n()
+const {t} = useI18n()
 const valueModel = defineModel({type: [Object]})
 const {hasPermission} = useAuth()
 const {filterIcon} = useFilterIcon()
@@ -65,6 +65,30 @@ function onUpdateValue() {
   }
 }
 
+function numericIndex(index: string | number) {
+  return typeof index === 'number' ? index : Number(index)
+}
+
+function getDynamicFilter(index: string | number) {
+  return dynamicFilter.value(numericIndex(index))
+}
+
+function updateDynamicField(index: string | number, resetOperator = false) {
+  onUpdateField(numericIndex(index), resetOperator)
+}
+
+function getDynamicOperations(index: string | number) {
+  return getOperations.value(numericIndex(index))
+}
+
+function dynamicValueRequired(index: string | number) {
+  return isValueRequired.value(numericIndex(index))
+}
+
+function deleteFilter(index: string | number) {
+  removeFilter(numericIndex(index))
+}
+
 
 
 const emit = defineEmits(['applyFilter', 'clearFilter'])
@@ -81,31 +105,31 @@ const emit = defineEmits(['applyFilter', 'clearFilter'])
         <v-col cols="12" sm="4">
           <v-select
               :items="selectableFields"
-              v-model="dynamicFilter(index)!.name"
+              v-model="getDynamicFilter(index)!.name"
               :label="t('crud.field')"
               density="compact"
               variant="outlined"
               hide-details
-              @update:modelValue="(v:string) => onUpdateField(index, true)"
+              @update:modelValue="(_v:string) => updateDynamicField(index, true)"
           />
         </v-col>
         <v-col cols="12" sm="3">
           <v-select
-              :items="getOperations(index)"
-              v-model="dynamicFilter(index)!.operator"
+              :items="getDynamicOperations(index)"
+              v-model="getDynamicFilter(index)!.operator"
               :label="t('crud.operator')"
               density="compact"
               variant="outlined"
               hide-details
-              @update:modelValue="(v:string) => onUpdateField(index)"
+              @update:modelValue="(_v:string) => updateDynamicField(index)"
           />
         </v-col>
         <v-col cols="10" sm="4">
           <crud-form-field
-              v-if="isValueRequired(index)"
+              v-if="dynamicValueRequired(index)"
               :field="filter"
               :entity="entity"
-              v-model="dynamicFilter(index)!.value"
+              v-model="getDynamicFilter(index)!.value"
               :clearable="true"
               density="compact"
               variant="outlined"
@@ -115,7 +139,7 @@ const emit = defineEmits(['applyFilter', 'clearFilter'])
           />
         </v-col>
         <v-col cols="2" sm="1">
-          <v-btn @click="removeFilter(index)"
+          <v-btn @click="deleteFilter(index)"
                  icon="mdi-delete"
                  class="mr-1"
                  variant="text"

package/src/components/CrudFormField.vue

@@ -9,9 +9,14 @@ import {useI18n} from "vue-i18n";
 import {useCrudStore} from "../stores/UseCrudStore";
 import {VDateInput} from 'vuetify/labs/VDateInput'
 import type {IEntityCrud, IEntityCrudField, IEntityCrudFilter} from "@drax/crud-share";
-import {MediaField, MediaFullField} from "@drax/media-vue";
 import {useAuth} from "@drax/identity-vue";
 
+//TODO: Ver si esto no puede traer problemas...
+import MediaField from "@drax/media-vue/src/components/MediaField.vue";
+import MediaFullField from "@drax/media-vue/src/components/MediaFullField.vue";
+
+
+
 const {t, te} = useI18n()
 
 const {hasPermission} = useAuth()

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,
@@ -150,6 +159,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
         },