@drax/crud-vue 2.7.0 → 2.11.0

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "2.7.0",
+  "version": "2.11.0",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -24,9 +24,9 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@drax/common-front": "^2.6.0",
-    "@drax/crud-front": "^2.0.0",
-    "@drax/crud-share": "^2.4.0",
+    "@drax/common-front": "^2.11.0",
+    "@drax/crud-front": "^2.11.0",
+    "@drax/crud-share": "^2.11.0",
     "@drax/media-vue": "^2.2.1"
   },
   "peerDependencies": {
@@ -50,5 +50,5 @@
     "vue-tsc": "^3.2.4",
     "vuetify": "^3.11.8"
   },
-  "gitHead": "6914eb5bfd532fb5e510b95c7d17b5b2ada8b07d"
+  "gitHead": "8919d31d4d9512e48ac461b0876dc85a5849daea"
 }

package/src/EntityCrud.ts

@@ -1,10 +1,11 @@
 import type {
   IEntityCrud, IEntityCrudForm, IEntityCrudHeader, IEntityCrudRefs,
   IEntityCrudRules, IEntityCrudField, IEntityCrudPermissions,
-  IDraxCrudProvider, IEntityCrudFilter, IEntityCrudFormFilter, IEntityCrudFieldVariant
+  IDraxCrudProvider, IEntityCrudFilter, IEntityCrudFieldVariant, IDraxFieldFilter
 } from "@drax/crud-share";
 
 
+
 class EntityCrud implements IEntityCrud {
 
   name: string = ''
@@ -125,11 +126,11 @@ class EntityCrud implements IEntityCrud {
   }
 
 
-  get formFilters(): IEntityCrudFormFilter[] {
+  get formFilters(): IDraxFieldFilter[] {
     return this.filters.map(
       (filter: IEntityCrudFilter) =>
         ({field: filter.name, value: filter.default ? filter.default : null, operator: (filter.operator ? filter.operator : 'eq')})
-    ) as IEntityCrudFormFilter[]
+    ) as IDraxFieldFilter[]
   }
 
   get refs(): IEntityCrudRefs {
@@ -138,7 +139,7 @@ class EntityCrud implements IEntityCrud {
 
   getRef(ref: string): IEntityCrud {
     if (!this.refs.hasOwnProperty(ref)) {
-      throw new Error("Ref not found: " + ref)
+      throw new Error("Ref not found: " + ref + " Refs Available: " + Object.getOwnPropertyNames(this.refs).join(", "))
     }
 
     return this.refs[ref] as IEntityCrud
@@ -238,6 +239,14 @@ class EntityCrud implements IEntityCrud {
     return true
   }
 
+   get filtersEnable(){
+    return true
+  }
+
+  get dynamicFiltersEnable(){
+    return true
+  }
+
   get filterButtons() {
     return true
   }

package/src/components/Crud.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
-import {onBeforeMount, type PropType} from "vue";
+import {computed, onBeforeMount, type PropType} from "vue";
 import type {IEntityCrud} from "@drax/crud-share";
-import CrudList from "./CrudList.vue";
+import CrudListTable from "./CrudListTable.vue";
+import CrudListGallery from "./CrudListGallery.vue";
 import CrudForm from "./CrudForm.vue";
 import CrudNotify from "./CrudNotify.vue";
 import CrudDialog from "./CrudDialog.vue";
 import {useCrud} from "../composables/UseCrud";
+import {useDisplay} from 'vuetify'
 
 const {entity} = defineProps({
   entity: {type: Object as PropType<IEntityCrud>, required: true},
@@ -24,6 +26,22 @@ onBeforeMount(() => {
 
 const emit = defineEmits(['created', 'updated', 'deleted', 'viewed', 'canceled'])
 
+const listComponent = computed(() => {
+  const listMode = entity?.listMode
+  switch (listMode){
+    case 'responsive':
+      return xs.value ? CrudListGallery : CrudListTable
+    case 'gallery':
+      return CrudListGallery
+    case 'table':
+      return CrudListTable
+    default:
+      return xs.value ? CrudListGallery : CrudListTable
+  }
+})
+
+const {xs} = useDisplay()
+
 
 </script>
 
@@ -31,7 +49,8 @@ const emit = defineEmits(['created', 'updated', 'deleted', 'viewed', 'canceled']
   <v-container :fluid="entity.containerFluid" class="mt-5">
     <v-card :class="entity.cardClass" :density="entity.cardDensity">
 
-      <crud-list
+      <component
+          :is="listComponent"
           :entity="entity"
           @create="onCreate"
           @edit="onEdit"
@@ -66,13 +85,18 @@ const emit = defineEmits(['created', 'updated', 'deleted', 'viewed', 'canceled']
           </slot>
         </template>
 
+        <template  v-slot:item="{item}">
+          <slot name="item" v-bind="{item}">
+          </slot>
+        </template>
+
 
         <template v-slot:item.actions="{item}">
           <slot name="item.actions" v-bind="{item}">
           </slot>
         </template>
 
-      </crud-list>
+      </component>
     </v-card>
 
     <crud-dialog

package/src/components/CrudActiveFilters.vue

@@ -3,7 +3,7 @@ import { computed,  type PropType } from 'vue'
 import type { IEntityCrud } from '@drax/crud-share'
 import { useCrudStore } from '../stores/UseCrudStore'
 import { useI18n } from 'vue-i18n'
-import { useFilterIcon } from '../composables/useFilterIcon'
+import { useFilterIcon } from '../composables/UseFilterIcon'
 import CrudRefDisplay from "./CrudRefDisplay.vue";
 import {formatDate} from "@drax/common-front"
 
@@ -92,7 +92,7 @@ const removeFilter = (index: number) => {
   const filterDef = props.entity.filters[index]
 
   // Resetear al valor por defecto
-  filter.value = filterDef.default
+  filter.value = filterDef?.default
 
   // Emitir evento para aplicar filtros
   emit('filterRemoved')

package/src/components/CrudAutocomplete.vue

@@ -146,14 +146,14 @@ defineEmits(['updateValue'])
           :title="item.raw[itemTitle]"
           :color="item.raw?.color"
           :base-color="item.raw?.color"
-          :prepend-icon="item.raw?.icon"
+          :prepend-icon="typeof item.raw?.icon=== 'string' ? item.raw?.icon : null"
       />
     </template>
 
     <template v-slot:selection="{item}">
       <v-chip tile density="compact"
               :color="item.raw?.color"
-              :prepend-icon="item.raw?.icon"
+              :prepend-icon="typeof item.raw?.icon=== 'string' ? item.raw?.icon : null"
       >
         {{ item.raw[itemTitle] }}
       </v-chip>
@@ -203,14 +203,14 @@ defineEmits(['updateValue'])
           :title="item.raw[itemTitle]"
           :color="item.raw?.color"
           :base-color="item.raw?.color"
-          :prepend-icon="item.raw?.icon"
+          :prepend-icon="typeof item.raw?.icon=== 'string' ? item.raw?.icon : null"
       />
     </template>
 
     <template v-slot:selection="{item}">
       <v-chip tile density="compact"
               :color="item.raw?.color"
-              :prepend-icon="item.raw?.icon"
+              :prepend-icon="typeof item.raw?.icon=== 'string' ? item.raw?.icon : null"
       >
         {{ item.raw[itemTitle] }}
       </v-chip>

package/src/components/CrudFilters.vue

@@ -2,18 +2,16 @@
 import {computed, type PropType} from "vue";
 import CrudFormField from "./CrudFormField.vue";
 import type {IEntityCrud, IEntityCrudFilter} from "@drax/crud-share";
-import {useI18n} from "vue-i18n";
 import {useAuth} from "@drax/identity-vue";
-import {useFilterIcon} from "../composables/useFilterIcon";
+import {useFilterIcon} from "../composables/UseFilterIcon";
 
-const {t} = useI18n()
 const valueModel = defineModel({type: [Object]})
 const {hasPermission} = useAuth()
 const {filterIcon} = useFilterIcon()
 
-const {entity, actionButtons} = defineProps({
+const {entity, autoFilter} = defineProps({
   entity: {type: Object as PropType<IEntityCrud>, required: true},
-  actionButtons: {type: Boolean, default: false},
+  autoFilter: {type: Boolean, default: false}
 })
 
 const aFields = computed(() => {
@@ -24,13 +22,15 @@ function filter() {
   emit('applyFilter')
 }
 
+/*
 function clear() {
   emit('clearFilter')
 }
+*/
 
 function onUpdateValue(){
-  if(!actionButtons){
-    emit('applyFilter')
+  if(autoFilter){
+    filter()
   }
 }
 
@@ -69,14 +69,6 @@ const emit = defineEmits(['applyFilter', 'clearFilter'])
 
         </v-row>
 
-    <v-card-actions v-if="actionButtons" class="pb-0">
-      <v-spacer />
-      <v-btn  variant="text" density="compact" :class="entity.cleanFilterClass" @click="clear">{{ t('action.clear') }}</v-btn>
-      <v-btn variant="flat" density="compact" :class="entity.applyFilterClass"  @click="filter">
-        {{ t('action.filter') }}
-      </v-btn>
-    </v-card-actions>
-
   </v-card>
 </template>
 

package/src/components/CrudFiltersAction.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import {useI18n} from "vue-i18n";
+import type {PropType} from "vue";
+import type {IEntityCrud} from "@drax/crud-share";
+const {t} = useI18n()
+
+const {entity} = defineProps({
+  entity: {type: Object as PropType<IEntityCrud>, required: true},
+})
+
+function filter() {
+  emit('applyFilter')
+}
+
+function clear() {
+  emit('clearFilter')
+}
+
+const emit = defineEmits(['applyFilter', 'clearFilter'])
+
+</script>
+
+<template>
+
+    <v-card-actions  class="pb-0">
+      <v-spacer />
+      <v-btn  variant="text" density="compact" :class="entity.cleanFilterClass" @click="clear">{{ t('action.clear') }}</v-btn>
+      <v-btn variant="flat" density="compact" :class="entity.applyFilterClass"  @click="filter">
+        {{ t('action.filter') }}
+      </v-btn>
+    </v-card-actions>
+
+</template>
+
+<style scoped>
+
+</style>

package/src/components/CrudFiltersDynamic.vue

@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import {computed, type PropType} from "vue";
+import CrudFormField from "./CrudFormField.vue";
+import type {IEntityCrud, IEntityCrudFilter} from "@drax/crud-share";
+import {useI18n} from "vue-i18n";
+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";
+
+const {t, te} = useI18n()
+const valueModel = defineModel({type: [Object]})
+const {hasPermission} = useAuth()
+const {filterIcon} = useFilterIcon()
+
+
+const {entity, autoFilter} = defineProps({
+  entity: {type: Object as PropType<IEntityCrud>, required: true},
+  autoFilter: {type: Boolean, default: false}
+})
+
+const store = useCrudStore(entity?.name)
+const entityStore = useEntityStore();
+const storeEntity = entityStore.entities.find((e: any) => e.name === entity.name)
+
+const aFields = computed(() => {
+  return store.dynamicFilters
+      .filter((field: IEntityCrudFilter) => !field.permission || hasPermission(field.permission))
+})
+
+
+const filtersRef = computed({
+  get: () => store.dynamicFilters,
+  set: v => store.dynamicFilters = v
+})
+
+const {
+  dynamicFilter,
+  selectableFields,
+  getOperations,
+  isValueRequired,
+  onUpdateField,
+  addFilter,
+  removeFilter
+} = useDynamicFilters(
+    computed(() => entity.name),
+    computed(() => storeEntity?.fields || []),
+    filtersRef
+)
+
+function filter() {
+  emit('applyFilter')
+}
+
+/*
+function clear() {
+  emit('clearFilter')
+}
+*/
+
+function onUpdateValue() {
+  if (autoFilter) {
+    filter()
+  }
+}
+
+
+
+const emit = defineEmits(['applyFilter', 'clearFilter'])
+
+</script>
+
+<template>
+  <v-row dense class="mt-4">
+    <v-col v-for="(filter,index) in aFields"
+           :key="filter.name"
+           cols="12" class="tdash"
+    >
+      <v-row >
+        <v-col cols="12" sm="4">
+          <v-select
+              :items="selectableFields"
+              v-model="dynamicFilter(index)!.name"
+              :label="t('crud.field')"
+              density="compact"
+              variant="outlined"
+              hide-details
+              @update:modelValue="(v:string) => onUpdateField(index, true)"
+          />
+        </v-col>
+        <v-col cols="12" sm="3">
+          <v-select
+              :items="getOperations(index)"
+              v-model="dynamicFilter(index)!.operator"
+              :label="t('crud.operator')"
+              density="compact"
+              variant="outlined"
+              hide-details
+              @update:modelValue="(v:string) => onUpdateField(index)"
+          />
+        </v-col>
+        <v-col cols="10" sm="4">
+          <crud-form-field
+              v-if="isValueRequired(index)"
+              :field="filter"
+              :entity="entity"
+              v-model="dynamicFilter(index)!.value"
+              :clearable="true"
+              density="compact"
+              variant="outlined"
+              :prepend-inner-icon="filterIcon(filter)"
+              hide-details
+              @updateValue="onUpdateValue"
+          />
+        </v-col>
+        <v-col cols="2" sm="1">
+          <v-btn @click="removeFilter(index)"
+                 icon="mdi-delete"
+                 class="mr-1"
+                 variant="text"
+                 color="red"
+          >
+          </v-btn>
+        </v-col>
+      </v-row>
+
+
+    </v-col>
+
+    <v-col cols="12">
+      <v-btn size="small" variant="outlined" color="primary" @click="addFilter">+ {{ t('action.addFilter') }}</v-btn>
+    </v-col>
+
+  </v-row>
+
+</template>
+
+<style scoped>
+.tdash{
+  border-bottom-width: 0.5px;
+  border-bottom-color: lightgray;
+  border-bottom-style: dashed;
+  margin-bottom: 10px;
+}
+</style>

package/src/components/CrudList.vue

@@ -16,6 +16,8 @@ import type {IEntityCrud} from "@drax/crud-share";
 import {useI18n} from "vue-i18n";
 import CrudFilters from "./CrudFilters.vue";
 import { useCrudColumns } from "../composables/UseCrudColumns";
+import CrudFiltersDynamic from "./CrudFiltersDynamic.vue";
+import CrudFiltersAction from "./CrudFiltersAction.vue";
 
 const {t, te} = useI18n()
 const {hasPermission} = useAuth()
@@ -133,25 +135,45 @@ 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()"
-          >
-
-            <template v-for="iFilter in entity.filters"
-                      :key="iFilter.name"
-                      v-slot:[`filter.${iFilter.name}`]="{filter, filterIndex}"
+          <v-card variant="flat" v-if="!$slots.filters">
+
+            <crud-filters
+                v-if="entity.filtersEnable"
+                :entity="entity"
+                v-model="filters"
+                :auto-filter="!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>
+
+            <crud-filters-dynamic
+                v-if="entity.dynamicFiltersEnable"
+                :entity="entity"
+                v-model="filters"
+                :auto-filter="!entity.filterButtons"
+                @clearFilter="clearFilters()"
+                @applyFilter="applyFilters()"
             >
-              <slot v-if="$slots[`filter.${iFilter.name}`]"
-                    :name="`filter.${iFilter.name}`"
-                    v-bind="{filter, filterIndex}"
-              />
-            </template>
-          </crud-filters>
+            </crud-filters-dynamic>
+
+            <crud-filters-action v-if="entity.filterButtons"
+                                 :entity="entity"
+                                 @clearFilter="clearFilters()"
+                                 @applyFilter="applyFilters()"
+            ></crud-filters-action>
+          </v-card>
+
         </v-card-text>
 
       </v-card>