@drax/crud-vue 0.35.0 → 0.37.0

package/package.json

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

package/src/EntityCrud.ts

@@ -16,13 +16,17 @@ class EntityCrud implements IEntityCrud {
     throw new Error('EntityCrud instance not found')
   }
 
-
   get headers(): IEntityCrudHeader[] {
     return [
       {title: 'ID', key: '_id'},
     ]
   }
 
+  get selectedHeaders(): string[] {
+    // Retrocompatibilidad: si no se define, retorna todas las keys de headers
+    return this.headers.map(header => header.key)
+  }
+
   get actionHeaders(): IEntityCrudHeader[] {
     return [
       {
@@ -54,11 +58,11 @@ class EntityCrud implements IEntityCrud {
   }
 
   get createFields() {
-    return this.fields
+    return this.fields.filter(field => !['_id','createdAt','updatedAt'].includes(field.name))
   }
 
   get updateFields() {
-    return this.fields
+    return this.fields.filter(field => !['_id','createdAt','updatedAt'].includes(field.name))
   }
 
   get deleteFields() {
@@ -190,6 +194,14 @@ class EntityCrud implements IEntityCrud {
     return ['CSV', 'JSON']
   }
 
+  get isColumnSelectable() {
+    return true
+  }
+
+  get isGroupable() {
+    return false
+  }
+
   get dialogFullscreen() {
     return false
   }

package/src/components/CrudActiveFilters.vue

@@ -0,0 +1,176 @@
+<script setup lang="ts">
+import { computed, watch, onMounted,  type PropType } from 'vue'
+import type { IEntityCrud, IEntityCrudFilter } from '@drax/crud-share'
+import { useCrudStore } from '../stores/UseCrudStore'
+import { useI18n } from 'vue-i18n'
+import { useFilterIcon } from '../composables/useFilterIcon'
+import { useCrudRefDisplay } from '../composables/useCrudRefDisplay'
+import dayjs from "dayjs";
+import CrudRefDisplay from "./CrudRefDisplay.vue";
+
+const { t, d } = useI18n()
+const store = useCrudStore()
+const { filterIcon } = useFilterIcon()
+const { refDisplay } = useCrudRefDisplay()
+
+const props = defineProps({
+  entity: {
+    type: Object as PropType<IEntityCrud>,
+    required: true
+  }
+})
+
+const activeFilters = computed<any[]>(() => {
+  return store.filters
+    .map((filter:any, index: any) => {
+      const filterDef = props.entity.filters[index]
+      if (!filterDef) return null
+
+      // Solo mostrar si tiene valor
+      if (filter.value === null || filter.value === undefined || filter.value === '') {
+        return null
+      }
+
+      // Para arrays vacíos
+      if (Array.isArray(filter.value) && filter.value.length === 0) {
+        return null
+      }
+
+      return {
+        ...filterDef,
+        value: filter.value,
+        index
+      }
+    })
+    .filter((f: any) => f !== null)
+})
+
+const getFilterLabel = (filter: any) => {
+  const label = t(`${props.entity.name.toLowerCase()}.field.${filter.label}`, filter.label)
+  return label
+}
+
+
+
+const getFilterValue = (filter: any) => {
+  switch (filter.type) {
+    case 'date':
+      return dayjs(filter.value).format('YYYY-MM-DD')
+
+    case 'boolean':
+      return filter.value ? t('common.yes') : t('common.no')
+
+    case 'ref':
+      return  filter.value
+
+    case 'array.ref':
+      if (Array.isArray(filter.value)) {
+        return filter.value.map((v: any) => v[filter.refDisplay] || v).join(', ')
+      }
+      return filter.value
+
+    case 'enum':
+      return filter.value
+
+    case 'array.enum':
+      if (Array.isArray(filter.value)) {
+        return filter.value.join(', ')
+      }
+      return filter.value
+
+    case 'number':
+      return filter.value.toString()
+
+    case 'string':
+    default:
+      return filter.value
+  }
+}
+
+// watch(activeFilters, async (filters) => {
+//   for (const filter of filters) {
+//     filter.display = await getFilterValue(filter)
+//   }
+// }, { immediate: true, deep: true })
+//
+// const renegerateDisplay = async () => {
+//   for (const filter of activeFilters.value) {
+//     filter.display = await getFilterValue(filter)
+//   }
+// }
+//
+// onMounted(() => {
+//   renegerateDisplay()
+// })
+
+const removeFilter = (index: number) => {
+  const filter = store.filters[index]
+  const filterDef = props.entity.filters[index]
+
+  // Resetear al valor por defecto
+  filter.value = filterDef.default
+
+  // Emitir evento para aplicar filtros
+  emit('filterRemoved')
+}
+
+const clearAllFilters = () => {
+  store.filters.forEach((filter: any, index: any) => {
+    const filterDef = props.entity.filters[index]
+    filter.value = filterDef.default
+  })
+
+  emit('filtersCleared')
+}
+
+const emit = defineEmits(['filterRemoved', 'filtersCleared'])
+</script>
+
+<template>
+  <v-card v-if="activeFilters.length > 0" flat class="mb-2">
+    <v-card-text class="py-2">
+      <div class="d-flex align-center flex-wrap ga-2">
+        <span class="text-caption text-medium-emphasis">
+          <v-icon size="x-small">mdi-filter</v-icon> {{ t('crud.activeFilters') }}:
+        </span>
+
+        <v-chip
+          v-for="filter in activeFilters"
+          :key="filter.index"
+          closable
+          size="small"
+          color="primary"
+          variant="tonal"
+          @click:close="removeFilter(filter.index)"
+        >
+
+          <span class="font-weight-medium">{{ getFilterLabel(filter) }}</span>
+          <v-icon :icon="filterIcon(filter)" size="x-small" class="mx-1" />
+<!--          <span>{{ getFilterValue(filter) }}</span>-->
+          <span v-if="['ref','array.ref'].includes(filter.type)">
+            <crud-ref-display
+                :ref-display="filter.refDisplay"
+                :value="filter.value"
+                :entity="entity.getRef(filter.ref)" />
+          </span>
+          <span v-else>{{ getFilterValue(filter) }}</span>
+
+          <v-tooltip
+            v-if="filter.endOfDay"
+            activator="parent"
+            location="top"
+          >
+            {{ t('crud.endOfDayFilter') }}
+          </v-tooltip>
+        </v-chip>
+
+      </div>
+    </v-card-text>
+  </v-card>
+</template>
+
+<style scoped>
+.v-chip {
+  max-width: 300px;
+}
+</style>

package/src/components/CrudFilters.vue

@@ -4,10 +4,12 @@ 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";
 
 const {t} = useI18n()
 const valueModel = defineModel({type: [Object]})
 const {hasPermission} = useAuth()
+const {filterIcon} = useFilterIcon()
 
 const {entity, actionButtons} = defineProps({
   entity: {type: Object as PropType<IEntityCrud>, required: true},
@@ -18,39 +20,11 @@ const aFields = computed(() => {
   return entity.filters.filter((field:IEntityCrudFilter) => !field.permission || hasPermission(field.permission))
 })
 
-const icon = computed(() => {
-  return (field: IEntityCrudFilter) => {
-    switch(field.operator){
-      case 'eq':
-        return 'mdi-equal'
-      case 'ne':
-        return 'mdi-not-equal'
-      case 'gt':
-        return 'mdi-greater-than'
-      case 'gte':
-        return 'mdi-greater-than-or-equal'
-      case 'lt':
-        return 'mdi-less-than'
-      case 'lte':
-        return 'mdi-less-than-or-equal'
-      case 'in':
-        return 'mdi-code-array'
-      case 'nin':
-        return 'mdi-not-equal'
-      case 'like':
-        return 'mdi-contain'
-      default:
-        return 'eq'
-    }
-  }
-})
-
-
- function filter() {
+function filter() {
   emit('applyFilter')
 }
 
- function clear() {
+function clear() {
   emit('clearFilter')
 }
 
@@ -60,7 +34,6 @@ function onUpdateValue(){
   }
 }
 
-
 const emit = defineEmits(['applyFilter', 'clearFilter'])
 
 </script>
@@ -85,7 +58,7 @@ const emit = defineEmits(['applyFilter', 'clearFilter'])
                   :clearable="true"
                   density="compact"
                   variant="outlined"
-                  :prepend-inner-icon="icon(filter)"
+                  :prepend-inner-icon="filterIcon(filter)"
                   hide-details  disable-rules
                   @updateValue="onUpdateValue"
               />

package/src/components/CrudList.vue

@@ -9,18 +9,19 @@ import CrudCreateButton from "./buttons/CrudCreateButton.vue";
 import CrudUpdateButton from "./buttons/CrudUpdateButton.vue";
 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 CrudExportList from "./CrudExportList.vue";
 import type {IEntityCrud} from "@drax/crud-share";
 import {useI18n} from "vue-i18n";
-import type {IEntityCrudHeader} from "@drax/crud-share";
 import CrudFilters from "./CrudFilters.vue";
+import { useCrudColumns } from "../composables/UseCrudColumns";
 
 const {t, te} = useI18n()
 const {hasPermission} = useAuth()
 
 const {entity} = defineProps({
   entity: {type: Object as PropType<IEntityCrud>, required: true},
-
 })
 
 const {
@@ -28,19 +29,8 @@ const {
   doPaginate, filters, applyFilters, clearFilters
 } = useCrud(entity)
 
-const actions: IEntityCrudHeader[] = entity.actionHeaders.map(header => ({
-  ...header,
-  title: te(header.title) ? t(header.title) : header.title,
-}))
-
-const tHeaders: IEntityCrudHeader[] = entity.headers
-    .filter(header => !header.permission || hasPermission(header.permission))
-    .map(header => ({
-      ...header,
-      title: te(`${entity.name.toLowerCase()}.field.${header.title}`) ? t(`${entity.name.toLowerCase()}.field.${header.title}`) : header.title
-    }))
-
-const headers: IEntityCrudHeader[] = [...tHeaders, ...actions]
+// Usar el composable de columnas
+const { filteredHeaders } = useCrudColumns(entity)
 
 
 defineExpose({
@@ -61,7 +51,7 @@ defineEmits(['import', 'export', 'create', 'update', 'delete', 'view', 'edit'])
       :items-per-page-options="[5, 10, 20, 50]"
       v-model:page="page"
       v-model:sort-by="sortBy"
-      :headers="headers"
+      :headers="filteredHeaders"
       :items="items"
       :items-length="totalItems"
       :loading="loading"
@@ -98,6 +88,16 @@ defineEmits(['import', 'export', 'create', 'update', 'delete', 'view', 'edit'])
             @export="v => $emit('export',v)"
         />
 
+        <crud-group-by-button
+            v-if="entity.isGroupable"
+            :entity="entity"
+        />
+
+        <crud-columns-button
+            v-if="entity.isColumnSelectable"
+            :entity="entity"
+        />
+
         <crud-create-button
             v-if="entity.isCreatable"
             :entity="entity"
@@ -144,6 +144,9 @@ defineEmits(['import', 'export', 'create', 'update', 'delete', 'view', 'edit'])
       </v-card>
 
       <v-divider></v-divider>
+
+
+
     </template>
 
 

package/src/components/CrudRefDisplay.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import {onMounted, ref, computed} from "vue";
+import type {PropType} from "vue";
+import type {IEntityCrud} from "@drax/crud-share";
+import type {IDraxFieldFilter} from "@drax/crud-share/dist";
+
+const {entity, value, refDisplay} = defineProps({
+  entity: {type: Object as PropType<IEntityCrud | undefined>, required: true},
+  value: {type: Array as PropType<any[]>, required: true},
+  refDisplay: {type: String as PropType<String>, required: true},
+})
+
+const loading = ref(false)
+const items = ref<any[]>([])
+
+onMounted(()=> {
+  console.log('onMounted',entity, value, refDisplay)
+  fetch()
+})
+
+async function fetch() {
+  try{
+    loading.value = true
+    if(entity?.provider?.find){
+      const ids = Array.isArray(value) ? value : [value]
+      const filters: IDraxFieldFilter[] = [{field: '_id', operator: 'in', value: ids}]
+      items.value = await entity.provider.find({filters})
+    }
+  }catch (e){
+    console.error(e)
+  }finally{
+    loading.value = false
+  }
+}
+
+const display = computed(() => {
+  return items.value.map(item => item[refDisplay as any]).join(', ')
+})
+
+
+</script>
+
+<template>
+  {{display}}
+
+</template>
+

package/src/components/buttons/CrudColumnsButton.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import type { IEntityCrud } from '@drax/crud-share'
+import { useI18n } from 'vue-i18n'
+import { useCrudColumns } from '../../composables/UseCrudColumns'
+
+const { t } = useI18n()
+
+const props = defineProps({
+  entity: { type: Object as PropType<IEntityCrud>, required: true },
+})
+
+const {
+  availableColumns,
+  toggleColumn,
+  allSelected,
+  someSelected,
+  selectAll,
+  deselectAll
+} = useCrudColumns(props.entity)
+</script>
+
+<template>
+  <v-menu offset-y :close-on-content-click="false">
+    <template v-slot:activator="{ props }">
+      <v-btn
+        v-bind="props"
+        icon
+        variant="text"
+      >
+        <v-icon>mdi-view-column</v-icon>
+        <v-tooltip activator="parent" location="bottom">
+          {{ t('crud.columns.select') }}
+        </v-tooltip>
+      </v-btn>
+    </template>
+    <v-list>
+      <v-list-subheader>
+        {{ t('crud.columns.title') }}
+      </v-list-subheader>
+
+      <v-list-item>
+        <div class="d-flex gap-2">
+          <v-btn
+            size="small"
+            variant="text"
+            color="primary"
+            @click="selectAll"
+            :disabled="allSelected"
+          >
+            {{ t('crud.columns.selectAll') }}
+          </v-btn>
+          <v-btn
+            size="small"
+            variant="text"
+            color="primary"
+            @click="deselectAll"
+            :disabled="!someSelected"
+          >
+            {{ t('crud.columns.deselectAll') }}
+          </v-btn>
+        </div>
+      </v-list-item>
+
+      <v-divider></v-divider>
+
+      <v-list-item
+        v-for="column in availableColumns"
+        :key="column.key"
+        @click="toggleColumn(column.key)"
+      >
+        <template v-slot:prepend>
+          <v-checkbox-btn
+            :model-value="column.visible"
+            @click.stop="toggleColumn(column.key)"
+          ></v-checkbox-btn>
+        </template>
+        <v-list-item-title>{{ column.title }}</v-list-item-title>
+      </v-list-item>
+    </v-list>
+  </v-menu>
+</template>

package/src/components/buttons/CrudGroupByButton.vue

@@ -0,0 +1,203 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import { computed } from 'vue'
+import type { IEntityCrud } from "@drax/crud-share"
+import { useDateFormat } from "@drax/common-vue"
+import { useI18n } from "vue-i18n"
+import { useCrudGroupBy } from '../../composables/UseCrudGroupBy'
+import CrudActiveFilters from "../CrudActiveFilters.vue";
+
+const { t, te } = useI18n()
+
+const {formatDateByUnit} = useDateFormat()
+
+const props = defineProps({
+  entity: { type: Object as PropType<IEntityCrud>, required: true }
+})
+
+const emit = defineEmits(['groupBy'])
+
+const {
+  dialog,
+  selectedFields,
+  loading,
+  groupByData,
+  availableFields,
+  dateFormat,
+  hasDateFields,
+  dateFormatOptions,
+  openDialog,
+  resetAndClose,
+  handleGroupBy
+} = useCrudGroupBy(props.entity)
+
+
+
+// Generar headers dinámicamente basados en los campos seleccionados
+const headers = computed(() => {
+  if (!groupByData.value.length || !selectedFields.value.length) return []
+
+  const fieldHeaders = selectedFields.value.map(field => {
+    const label = field.name
+
+    return {
+      title: te(`${props.entity.name.toLowerCase()}.field.${label}`)
+        ? t(`${props.entity.name.toLowerCase()}.field.${label}`)
+        : label,
+      key: field.name,
+      align: 'start' as const
+    }
+  })
+
+  return [
+    ...fieldHeaders,
+    {
+      title: t('crud.groupBy.count'),
+      key: 'count',
+      align: 'end' as const
+    }
+  ]
+})
+
+// Calcular total de registros
+const totalCount = computed(() => {
+  return groupByData.value.reduce((sum: Number, item: any) => sum + (item.count || 0), 0)
+})
+</script>
+
+<template>
+  <div>
+    <v-btn
+      icon
+      variant="text"
+      @click="openDialog"
+    >
+      <v-icon>mdi-chart-bar</v-icon>
+      <v-tooltip activator="parent" location="bottom">
+        {{ t('crud.groupBy.button') }}
+      </v-tooltip>
+    </v-btn>
+
+    <v-dialog v-model="dialog" max-width="800" >
+      <v-card>
+        <v-card-title class="d-flex align-center">
+          <v-icon class="mr-2">mdi-chart-bar</v-icon>
+          {{ t('crud.groupBy.title') }}
+          <v-spacer></v-spacer>
+          <v-btn
+            icon
+            variant="text"
+            @click="resetAndClose"
+            :disabled="loading"
+          >
+            <v-icon>mdi-close</v-icon>
+          </v-btn>
+        </v-card-title>
+
+        <v-divider></v-divider>
+
+        <v-card-text>
+          <crud-active-filters :entity="entity"></crud-active-filters>
+          <v-divider></v-divider>
+
+          <v-select
+            v-model="selectedFields"
+            :items="availableFields"
+            item-title="label"
+            :label="t('crud.groupBy.selectFields')"
+            multiple
+            chips
+            closable-chips
+            return-object
+          >
+          </v-select>
+
+          <!-- Selector de formato de fecha -->
+          <v-select
+            v-if="hasDateFields"
+            v-model="dateFormat"
+            :items="dateFormatOptions"
+            :label="t('crud.groupBy.dateFormatLabel')"
+            density="compact"
+            variant="outlined"
+            class="mt-4"
+          >
+            <template v-slot:prepend-inner>
+              <v-icon>mdi-calendar-clock</v-icon>
+            </template>
+          </v-select>
+
+
+        </v-card-text>
+
+        <v-divider></v-divider>
+
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn
+            color="primary"
+            variant="flat"
+            @click="handleGroupBy"
+            :disabled="selectedFields.length === 0"
+            :loading="loading"
+          >
+            {{ t('action.apply') }}
+          </v-btn>
+        </v-card-actions>
+        <v-divider class="mb-4"></v-divider>
+        <!-- Tabla de resultados -->
+        <v-card-text v-if="groupByData.length > 0">
+
+
+          <div class="d-flex align-center mb-3">
+            <v-icon class="mr-2">mdi-table</v-icon>
+            <span class="text-h6">{{ t('crud.groupBy.results') }}</span>
+            <v-spacer></v-spacer>
+            <v-chip color="primary" variant="flat" size="small">
+              {{ t('crud.groupBy.total') }}: {{ totalCount }}
+            </v-chip>
+          </div>
+
+
+          <v-data-table
+            :headers="headers"
+            :items="groupByData"
+            density="compact"
+            :items-per-page="-1"
+            hide-default-footer
+          >
+            <template v-slot:bottom></template>
+
+            <!-- Slot para personalizar la visualización de cada campo -->
+            <template
+              v-for="field in selectedFields"
+              :key="field.name"
+              v-slot:[`item.${field.name}`]="{ value }"
+            >
+                <template v-if="field.type === 'ref' && field.refDisplay">
+                  {{value[field.refDisplay]}}
+                </template>
+              <template v-else-if="field.type === 'date'">
+                {{ formatDateByUnit(value, dateFormat) }}
+              </template>
+                <template v-else>
+                   {{ value }}
+                </template>
+
+            </template>
+
+            <!-- Formato especial para el count -->
+            <template v-slot:item.count="{ value }">
+              <v-chip color="primary" size="small" variant="flat">
+                {{ value }}
+              </v-chip>
+            </template>
+          </v-data-table>
+        </v-card-text>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<style scoped>
+</style>

package/src/composables/UseCrudColumns.ts

@@ -0,0 +1,174 @@
+
+import { computed } from 'vue'
+import type { IEntityCrud, IEntityCrudHeader } from '@drax/crud-share'
+import { useAuth } from '@drax/identity-vue'
+import { useI18n } from 'vue-i18n'
+import { useCrudStore } from '../stores/UseCrudStore'
+
+export function useCrudColumns(entity: IEntityCrud) {
+  const { hasPermission } = useAuth()
+  const { t, te } = useI18n()
+  const crudStore = useCrudStore()
+
+  // Clave única para localStorage basada en el nombre de la entidad
+  const storageKey = `crud_visible_columns_${entity.name.toLowerCase()}`
+
+  // Cargar columnas desde localStorage
+  const loadColumnsFromStorage = (): string[] | null => {
+    try {
+      const stored = localStorage.getItem(storageKey)
+      return stored ? JSON.parse(stored) : null
+    } catch (error) {
+      console.error('Error loading columns from localStorage:', error)
+      return null
+    }
+  }
+
+  // Guardar columnas en localStorage
+  const saveColumnsToStorage = (columns: string[]) => {
+    try {
+      localStorage.setItem(storageKey, JSON.stringify(columns))
+    } catch (error) {
+      console.error('Error saving columns to localStorage:', error)
+    }
+  }
+
+  // Inicializar columnas visibles si no existen en el store
+  const initializeVisibleColumns = () => {
+    if (crudStore.visibleColumns.length === 0) {
+      const availableHeaders = entity.headers
+        .filter(header => !header.permission || hasPermission(header.permission))
+        .map(header => header.key)
+
+      // Intentar cargar desde localStorage primero
+      const storedColumns = loadColumnsFromStorage()
+      
+      let initialColumns: string[]
+      
+      if (storedColumns) {
+        // Filtrar columnas almacenadas para asegurar que aún existen y tienen permisos
+        initialColumns = storedColumns.filter(key => availableHeaders.includes(key))
+        
+        // Si no quedaron columnas válidas, usar las predeterminadas
+        if (initialColumns.length === 0) {
+          initialColumns = entity.selectedHeaders?.filter(key => 
+            availableHeaders.includes(key)
+          ) || availableHeaders
+        }
+      } else {
+        // Si no hay columnas guardadas, usar selectedHeaders o todas las disponibles
+        initialColumns = entity.selectedHeaders?.filter(key => 
+          availableHeaders.includes(key)
+        ) || availableHeaders
+      }
+
+      crudStore.setVisibleColumns(initialColumns)
+      // Guardar la configuración inicial en localStorage
+      saveColumnsToStorage(initialColumns)
+    }
+  }
+
+  // Inicializar al crear el composable
+  initializeVisibleColumns()
+
+  // Obtener columnas visibles del store
+  const visibleColumns = computed(() => crudStore.visibleColumns)
+
+  // Headers traducidos y filtrados por permisos
+  const translatedHeaders = computed<IEntityCrudHeader[]>(() => {
+    return entity.headers
+      .filter(header => !header.permission || hasPermission(header.permission))
+      .map(header => ({
+        ...header,
+        title: te(`${entity.name.toLowerCase()}.field.${header.title}`) 
+          ? t(`${entity.name.toLowerCase()}.field.${header.title}`) 
+          : header.title
+      }))
+  })
+
+  // Headers filtrados por columnas visibles
+  const filteredHeaders = computed<IEntityCrudHeader[]>(() => {
+    const filtered = translatedHeaders.value.filter(header => 
+      visibleColumns.value.includes(header.key)
+    )
+    const actions = entity.actionHeaders.map(header => ({
+      ...header,
+      title: te(header.title) ? t(header.title) : header.title,
+    }))
+    return [...filtered, ...actions]
+  })
+
+  // Lista de columnas disponibles para el menú
+  const availableColumns = computed(() => {
+    return translatedHeaders.value.map(header => ({
+      key: header.key,
+      title: header.title,
+      visible: visibleColumns.value.includes(header.key)
+    }))
+  })
+
+  // Toggle de visibilidad de columna
+  const toggleColumn = (columnKey: string) => {
+    const currentColumns = [...visibleColumns.value]
+    const index = currentColumns.indexOf(columnKey)
+    
+    if (index > -1) {
+      currentColumns.splice(index, 1)
+    } else {
+      currentColumns.push(columnKey)
+    }
+    
+    crudStore.setVisibleColumns(currentColumns)
+    // Guardar cambios en localStorage
+    saveColumnsToStorage(currentColumns)
+  }
+
+  const allSelected = computed(() => 
+    availableColumns.value.every(col => col.visible)
+  )
+
+  const someSelected = computed(() =>
+    availableColumns.value.some(col => col.visible)
+  )
+
+  const selectAll = () => {
+    const allColumns = availableColumns.value.map(col => col.key)
+    crudStore.setVisibleColumns(allColumns)
+    // Guardar cambios en localStorage
+    saveColumnsToStorage(allColumns)
+  }
+
+  const deselectAll = () => {
+    crudStore.setVisibleColumns([])
+    // Guardar cambios en localStorage
+    saveColumnsToStorage([])
+  }
+
+  // Función para resetear a las columnas predeterminadas
+  const resetToDefault = () => {
+    const availableHeaders = entity.headers
+      .filter(header => !header.permission || hasPermission(header.permission))
+      .map(header => header.key)
+
+    const defaultColumns = entity.selectedHeaders?.filter(key => 
+      availableHeaders.includes(key)
+    ) || availableHeaders
+
+    crudStore.setVisibleColumns(defaultColumns)
+    saveColumnsToStorage(defaultColumns)
+  }
+
+  return {
+    visibleColumns,
+    translatedHeaders,
+    filteredHeaders,
+    availableColumns,
+    toggleColumn,
+    initializeVisibleColumns,
+    allSelected,
+    someSelected,
+    selectAll,
+    deselectAll,
+    resetToDefault,
+  }
+}

package/src/composables/UseCrudGroupBy.ts

@@ -0,0 +1,91 @@
+import { computed } from 'vue'
+import type {IEntityCrud, IEntityCrudField, IDraxGroupByDateFormat} from "@drax/crud-share"
+import { useI18n } from "vue-i18n"
+import { useGroupByStore } from '../stores/UseGroupByStore'
+import {useCrudStore} from '../stores/UseCrudStore'
+
+
+export const useCrudGroupBy = (entity: IEntityCrud) => {
+  const { t, te } = useI18n()
+  const groupBystore = useGroupByStore()
+  const crudStore = useCrudStore()
+  const entityName = entity.name.toLowerCase()
+
+  const availableFields = computed<IEntityCrudField[]>(() => {
+    return entity.fields
+        .filter(field => {
+          // Excluir campos que no son apropiados para agrupar
+          const excludedTypes = ['password', 'longString', 'array.string','array.number','array.ref','array.object', 'object', 'file', 'fullFile']
+          return !excludedTypes.includes(field.type)
+        }).map(field => ({...field, label: te(`${entityName}.field.${field?.name}`) ? t(`${entityName}.field.${field?.name}`) : field?.label}))
+  })
+
+  const handleGroupBy = async (callback: (fields: string[]) => void | Promise<void>) => {
+    if (groupBystore.selectedFields.length === 0) return
+
+
+    groupBystore.setLoading(true)
+    try {
+      if(entity?.provider?.groupBy){
+        const data = await entity.provider.groupBy({
+          fields: groupBystore.selectedFields.map(sf => sf.name),
+          filters: crudStore.filters
+        })
+        groupBystore.setGroupByData(data)
+      }
+    } finally {
+      groupBystore.setLoading(false)
+    }
+  }
+
+  // Verificar si hay campos de tipo fecha seleccionados
+  const hasDateFields = computed(() => {
+    return groupBystore.selectedFields.some(field => {
+      return field?.type === 'date'
+    })
+  })
+
+  // Opciones de formato de fecha
+  const dateFormatOptions = computed(() => [
+    { value: 'year', title: t('crud.groupBy.dateFormat.year') },
+    { value: 'month', title: t('crud.groupBy.dateFormat.month') },
+    { value: 'day', title: t('crud.groupBy.dateFormat.day') },
+    { value: 'hour', title: t('crud.groupBy.dateFormat.hour') },
+    { value: 'minute', title: t('crud.groupBy.dateFormat.minute') },
+    { value: 'second', title: t('crud.groupBy.dateFormat.second') }
+  ])
+
+
+
+  return {
+    // Store state
+    dialog: computed(() => groupBystore.dialog),
+    selectedFields: computed({
+      get: () => groupBystore.selectedFields,
+      set: (value: IEntityCrudField[]) => {
+        groupBystore.clearGroupByData()
+        groupBystore.setSelectedFields(value)
+      }
+    }),
+    groupByData: computed(() => groupBystore.groupByData),
+    loading: computed(() => groupBystore.loading),
+    // Computed
+    availableFields,
+    // Methods
+    openDialog: groupBystore.openDialog,
+    closeDialog: groupBystore.closeDialog,
+    resetAndClose: groupBystore.resetAndClose,
+    clearGroupByData: groupBystore.clearGroupByData,
+    handleGroupBy,
+
+    dateFormat: computed({
+      get: () => groupBystore.dateFormat,
+      set: (value: IDraxGroupByDateFormat) => {
+        groupBystore.clearGroupByData()
+        groupBystore.setDateFormat(value)
+      }
+    }),
+    hasDateFields,
+    dateFormatOptions,
+  }
+}

package/src/composables/useCrudRefDisplay.ts

@@ -0,0 +1,23 @@
+import type {IEntityCrud} from '@drax/crud-share'
+
+export function useCrudRefDisplay() {
+
+  async function refDisplay(entity: IEntityCrud, value: any, refDisplay: string) {
+    try{
+      if(entity?.provider?.findByIds){
+        // Asegurar que value sea un array
+        const ids = Array.isArray(value) ? value : [value]
+        const items = await entity.provider.findByIds(ids)
+        return items.map(item => item[refDisplay as any]).join(', ')
+      }
+      return value
+    }catch (e){
+      console.error(e)
+      return value
+    }
+  }
+
+  return {
+    refDisplay
+  }
+}

package/src/composables/useFilterIcon.ts

@@ -0,0 +1,36 @@
+
+import { computed } from 'vue'
+import type { IEntityCrudFilter } from '@drax/crud-share'
+
+export function useFilterIcon() {
+  const filterIcon = computed(() => {
+    return (field: IEntityCrudFilter) => {
+      switch(field.operator){
+        case 'eq':
+          return 'mdi-equal'
+        case 'ne':
+          return 'mdi-not-equal'
+        case 'gt':
+          return 'mdi-greater-than'
+        case 'gte':
+          return 'mdi-greater-than-or-equal'
+        case 'lt':
+          return 'mdi-less-than'
+        case 'lte':
+          return 'mdi-less-than-or-equal'
+        case 'in':
+          return 'mdi-code-array'
+        case 'nin':
+          return 'mdi-not-equal'
+        case 'like':
+          return 'mdi-contain'
+        default:
+          return 'mdi-equal'
+      }
+    }
+  })
+
+  return {
+    filterIcon
+  }
+}

package/src/stores/UseCrudStore.ts

@@ -1,5 +1,5 @@
 import {defineStore} from "pinia";
-import type {IEntityCrudOperation} from "@drax/crud-share";
+import type {IEntityCrudOperation, IDraxFieldFilter} from "@drax/crud-share";
 
 export const useCrudStore = defineStore('CrudStore', {
     state: () => (
@@ -11,7 +11,7 @@ export const useCrudStore = defineStore('CrudStore', {
             notify: false as boolean,
             message: '' as string,
             error: '' as string,
-            filters: [] as any[],
+            filters: [] as IDraxFieldFilter[],
             items: [] as any[],
             totalItems: 0 as number,
             itemsPerPage: 10 as number,
@@ -23,7 +23,8 @@ export const useCrudStore = defineStore('CrudStore', {
             exportLoading: false,
             exportFiles: [] as string[],
             exportListVisible: false,
-            exportError: false
+            exportError: false,
+            visibleColumns: []
         }
     ),
     getters: {
@@ -123,7 +124,7 @@ export const useCrudStore = defineStore('CrudStore', {
         setExportError(error: boolean){
             this.exportError = error
         },
-        setFilters(filters: any[]) {
+        setFilters(filters: IDraxFieldFilter[]) {
             this.filters = filters
         },
         setFilterValue(name:string, value:any) {
@@ -131,6 +132,13 @@ export const useCrudStore = defineStore('CrudStore', {
             if (index >= 0) {
                 this.filters[index].value = value
             }
+        },
+        setVisibleColumns(columns: string[]) {
+            this.visibleColumns = columns
+        },
+
+        clearVisibleColumns() {
+            this.visibleColumns = []
         }
     }
 

package/src/stores/UseGroupByStore.ts

@@ -0,0 +1,105 @@
+
+import { defineStore } from 'pinia'
+import type {IDraxGroupByDateFormat, IEntityCrudField} from "@drax/crud-share";
+
+export const useGroupByStore = defineStore('useGroupByStore', {
+  state: () => ({
+    dialog: false as boolean,
+    selectedFields: [] as IEntityCrudField[],
+    dateFormat: 'day' as IDraxGroupByDateFormat,
+    loading: false as boolean,
+    groupByData: [] as any[],
+    groupByError: '' as string
+  }),
+
+  getters: {
+    hasSelectedFields(state): boolean {
+      return state.selectedFields.length > 0
+    },
+
+    selectedFieldsCount(state): number {
+      return state.selectedFields.length
+    },
+
+    isFieldSelected(state) {
+      return (field: IEntityCrudField): boolean => {
+        return state.selectedFields.some(sf => sf.name === field.name)
+      }
+    },
+
+    hasGroupByData(state): boolean {
+      return state.groupByData.length > 0
+    },
+
+    groupByDataCount(state): number {
+      return state.groupByData.length
+    },
+
+    getGroupByDataByField(state) {
+      return (fieldName: string, fieldValue: any): any | undefined => {
+        return state.groupByData.find((result: any) => result[fieldName] === fieldValue)
+      }
+    }
+  },
+
+  actions: {
+    openDialog() {
+      this.dialog = true
+    },
+
+    closeDialog() {
+      this.dialog = false
+    },
+
+    resetFields() {
+      this.selectedFields = []
+    },
+
+    resetAndClose() {
+      this.resetFields()
+      this.closeDialog()
+    },
+
+    setLoading(value: boolean) {
+      this.loading = value
+    },
+
+    setSelectedFields(fields: IEntityCrudField[]) {
+      this.selectedFields = fields
+    },
+
+    addField(field: IEntityCrudField) {
+      if (!this.selectedFields.some(f => f.name === field.name)) {
+        this.selectedFields.push(field)
+      }
+    },
+
+    removeField(field: IEntityCrudField) {
+      const index = this.selectedFields.findIndex((f) => f.name === field.name)
+      if (index > -1) {
+        this.selectedFields.splice(index, 1)
+      }
+    },
+
+    setGroupByData(data: any[]) {
+      this.groupByData = data
+    },
+
+    clearGroupByData() {
+      this.groupByData = []
+    },
+
+    setGroupByError(error: string) {
+      this.groupByError = error
+    },
+
+    clearGroupByError() {
+      this.groupByError = ''
+    },
+
+    setDateFormat(dateFormat: IDraxGroupByDateFormat) {
+      this.dateFormat = dateFormat
+    }
+
+  }
+})