@drax/dashboard-vue 2.8.0 → 2.11.0

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "2.8.0",
+  "version": "2.11.0",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -22,9 +22,9 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@drax/crud-front": "^2.0.0",
-    "@drax/crud-share": "^2.8.0",
-    "@drax/dashboard-front": "^2.8.0"
+    "@drax/crud-front": "^2.11.0",
+    "@drax/crud-share": "^2.11.0",
+    "@drax/dashboard-front": "^2.11.0"
   },
   "peerDependencies": {
     "pinia": "^3.0.4",
@@ -46,5 +46,5 @@
     "vue-tsc": "^3.2.4",
     "vuetify": "^3.11.8"
   },
-  "gitHead": "3adeb31ee60eb83c92137dc28162f9226cab06c1"
+  "gitHead": "8919d31d4d9512e48ac461b0876dc85a5849daea"
 }

package/src/components/DashboardConfig/DashboardCardEditor.vue

@@ -12,12 +12,13 @@ import type {
 import {useI18n} from "vue-i18n"
 import CrudFormField from "@drax/crud-vue/src/components/CrudFormField.vue";
 import {useFilterIcon} from "@drax/crud-vue";
+import {useDynamicFilters} from "@drax/crud-vue/src/composables/UseDynamicFilters.ts";
 
 const props = defineProps({
   modelValue: {type: Object as PropType<IDashboardCard>, required: true}
 });
 const {filterIcon} = useFilterIcon()
-const {t, te} = useI18n()
+const {t} = useI18n()
 
 const emit = defineEmits(['update:modelValue', 'save', 'cancel']);
 
@@ -122,92 +123,19 @@ function onEntityChange() {
   }
 }
 
-const fieldI18n = computed(() => {
-  return (field: IEntityCrudFilter) => {
-    return te(entitySelected.value?.name?.toLowerCase() + ".field." + field.name) ? t(entitySelected.value?.name?.toLowerCase() + ".field." + field.name) : field.label
-  }
-})
-
-const selectableFields = computed(() => {
-  return entitySelected.value ?
-      entitySelected.value.fields
-          .filter((f: any) => !['fullFile', 'object', 'array.object'].includes(f.type))
-          .map((f: any) => ({title: fieldI18n.value(f), value: f.name}))
-      : []
-})
-
-const dynamicFilter = computed(() => {
-  return (index: number) => {
-    return filters.value[index]
-  }
-})
-
-const operations = [
-  {title: t('operation.equals'), value: 'eq'},
-  {title: t('operation.notEquals'), value: 'ne'},
-  {title: t('operation.contains'), value: 'like'},
-  {title: t('operation.greaterThan'), value: 'gt'},
-  {title: t('operation.lessThan'), value: 'lt'},
-  {title: t('operation.greaterThanOrEqual'), value: 'gte'},
-  {title: t('operation.lessThanOrEqual'), value: 'lte'},
-]
-
-function removeFilter(index: number) {
-  if (filters.value) {
-    filters.value.splice(index, 1)
-  }
-}
-
-function addFilter() {
-  const filter: IEntityCrudFilter = {
-    default: undefined,
-    label: "",
-    name: '',
-    operator: 'eq',
-    type: 'string',
-    permission: '',
-    value: ''
-  }
-  if (filters.value) {
-    filters.value.push(filter)
-  }
-}
-
-function normalizeFieldType(type: string): IEntityCrudFieldTypes {
-  if (type === 'array.ref') return 'ref';
-  if (type === 'array.string') return 'string';
-  if (type === 'longString') return 'string';
-  if (type === 'array.number') return 'number';
-  if (type === 'array.enum') return 'enum';
-  return type as IEntityCrudFieldTypes;
-}
-
-function onUpdateField(index: number, val: string) {
-  const field = entitySelected.value.fields.find((e: any) => e.name === val)
-  let filter = dynamicFilter.value(index)
-  if (!filter) {
-    return
-  }
-  filter.value = null
-  if (!field) return
-
-  if (field.ref) {
-    filter.ref = field.ref
-  }
-  if (field.refDisplay) {
-    filter.refDisplay = field.refDisplay
-  }
-  if (field.enum) {
-    filter.enum = field.enum
-  }
-  if (field.type) {
-    filter.type = normalizeFieldType(field.type)
-    if(field.type === 'boolean'){
-      filter.value = false
-    }
-  }
-}
-
+const {
+  dynamicFilter,
+  selectableFields,
+  getOperations,
+  isValueRequired,
+  onUpdateField,
+  addFilter,
+  removeFilter
+} = useDynamicFilters(
+    computed(() => form.value.entity),
+    computed(() => entitySelected.value.fields || []),
+    filters
+)
 
 </script>
 
@@ -273,22 +201,23 @@ function onUpdateField(index: number, val: string) {
                       density="compact"
                       variant="outlined"
                       hide-details
-                      @update:modelValue="(v:string) => onUpdateField(index, v)"
+                      @update:modelValue="() => onUpdateField(index, true)"
                   />
                 </v-col>
                 <v-col cols="12" sm="3">
                   <v-select
-                      :items="operations"
+                      :items="getOperations(index)"
                       v-model="dynamicFilter(index)!.operator"
                       :label="t('crud.operator')"
                       density="compact"
                       variant="outlined"
                       hide-details
+                      @update:modelValue="() => onUpdateField(index)"
                   />
                 </v-col>
                 <v-col cols="12" sm="4">
                   <crud-form-field
-                      v-if="entitySelected"
+                      v-if="entitySelected && isValueRequired(index)"
                       :field="filter"
                       :entity="entitySelected"
                       v-model="dynamicFilter(index)!.value"
@@ -314,7 +243,7 @@ function onUpdateField(index: number, val: string) {
             </v-col>
 
             <v-col cols="12">
-              <v-btn small variant="outlined" color="primary" @click="addFilter">+ {{ t('action.addFilter') }}</v-btn>
+              <v-btn size="small" variant="outlined" color="primary" @click="addFilter">+ {{ t('action.addFilter') }}</v-btn>
             </v-col>
 
           </v-row>

package/src/components/DashboardConfig/DashboardConfig.vue

@@ -59,8 +59,8 @@ const deleteCard = (index: number) => {
     valueModel.value.cards?.splice(index, 1);
     if (editingCardIndex.value === index) {
       editingCardIndex.value = null;
-      emit("dashboardUpdated")
     }
+    emit("dashboardUpdated")
   }
 };
 

package/src/components/GroupByCard/renders/GroupByTableRender.vue

@@ -46,11 +46,17 @@ const getPercentage = (count: number) => {
           v-slot:[`item.${field.name}`]="{ value }"
       >
         <template v-if="['ref','object'].includes(field.type) && field.refDisplay">
-          {{value[field.refDisplay]}}
+          {{value ? value[field.refDisplay] : '-' }}
         </template>
+
         <template v-else-if="field.type === 'date'">
           {{ formatDateByUnit(value, dateFormat) }}
         </template>
+
+        <template v-else-if="field.type === 'number'">
+          {{ value.toLocaleString('es-ar') }}
+        </template>
+
         <template v-else>
           {{ value }}
         </template>

package/src/components/GroupByCard/renders/GroupByGalleryRenderbkp.vue

@@ -1,181 +0,0 @@
-<script setup lang="ts">
-import type {PropType} from "vue";
-import {computed} from "vue";
-import {useDateFormat} from "@drax/common-vue"
-import type {IDraxDateFormatUnit} from "@drax/common-share";
-import type {IEntityCrudField} from "@drax/crud-share";
-
-const {formatDateByUnit} = useDateFormat()
-
-const {data,  fields, dateFormat} = defineProps({
-  data: {type: Array as PropType<any[]>, required: false},
-  headers: {type: Array as PropType<any[]>, required: false},
-  fields: {type: Array as PropType<IEntityCrudField[]>, required: false},
-  dateFormat: {type: String as PropType<IDraxDateFormatUnit>, required: false, default:'day'},
-})
-
-// Paleta de colores para las tarjetas
-const colors = [
-  'purple', 'indigo', 'teal', 'orange', 'pink',
-  'cyan', 'lime', 'amber', 'deep-purple', 'light-blue',
-  'deep-orange', 'blue-grey', 'brown', 'red', 'green'
-]
-
-// Calcular el total de todos los counts
-const totalCount = computed(() => {
-  if (!data || data.length === 0) return 0
-  return data.reduce((sum, item) => sum + (item.count || 0), 0)
-})
-
-// Preparar datos para las tarjetas
-const cardData = computed(() => {
-  if (!data || data.length === 0) return []
-
-  return data.map((item, index) => {
-    const percentage = totalCount.value > 0 ? (item.count / totalCount.value) * 100 : 0
-
-    // Obtener el label combinando todos los campos excepto count
-    const labelParts: string[] = []
-
-    // Iterar sobre las claves del item excepto count
-    Object.keys(item).forEach(key => {
-      if (key === 'count') return
-
-      // Buscar el campo correspondiente en fields
-      const field = fields?.find(f => f.name === key)
-      const value = item[key]
-
-      if (!field || value === null || value === undefined) return
-
-      let formattedValue = ''
-
-      if (['ref','object'].includes(field.type) && field.refDisplay && value) {
-        formattedValue = value[field.refDisplay]
-      } else if (field.type === 'date' && value) {
-        formattedValue = formatDateByUnit(value, dateFormat)
-      } else if (field.type === 'enum' && value) {
-        formattedValue = value.toString()
-      } else if (typeof value === 'object' && !Array.isArray(value)) {
-        formattedValue = JSON.stringify(value)
-      } else {
-        formattedValue = value?.toString() || ''
-      }
-
-      if (formattedValue) {
-        labelParts.push(formattedValue)
-      }
-    })
-
-    const label = labelParts.length > 0 ? labelParts.join(' - ') : 'N/A'
-
-    return {
-      label,
-      value: item.count || 0,
-      percentage,
-      color: colors[index % colors.length]
-    }
-  })
-})
-</script>
-
-<template>
-  <div class="gallery-container">
-    <div v-if="!data || data.length === 0" class="empty-state">
-      <v-icon size="64" color="grey-lighten-1">mdi-view-grid</v-icon>
-      <p class="text-grey-lighten-1 mt-4">No hay datos para mostrar</p>
-    </div>
-
-    <template v-else>
-      <v-row dense class="ma-0">
-        <v-col
-            v-for="(card, index) in cardData"
-            :key="index"
-            cols="6"
-            sm="4"
-            md="3"
-            lg="2"
-            class="pa-1"
-        >
-          <v-card
-              :color="card.color"
-              variant="tonal"
-              class="gallery-card"
-              hover
-          >
-            <v-card-text class="pa-2">
-              <div class="d-flex flex-column align-center text-center">
-                <div class="card-value text-h5 font-weight-bold mb-1">
-                  {{ card.value }}
-                </div>
-                <div class="card-label text-caption text-truncate" :title="card.label">
-                  {{ card.label }}
-                </div>
-                <v-chip
-                    :color="card.color"
-                    size="x-small"
-                    variant="flat"
-                    class="mt-1"
-                >
-                  {{ card.percentage.toFixed(1) }}%
-                </v-chip>
-              </div>
-            </v-card-text>
-          </v-card>
-        </v-col>
-      </v-row>
-
-      <v-divider class="my-2"></v-divider>
-
-      <div class="total-section pa-2">
-        <v-card variant="flat" color="grey-lighten-4">
-          <v-card-text class="pa-2 d-flex align-center justify-space-between">
-            <span class="text-subtitle-2 font-weight-bold">Total</span>
-            <v-chip color="primary" size="small" variant="flat">
-              {{ totalCount }}
-            </v-chip>
-          </v-card-text>
-        </v-card>
-      </div>
-    </template>
-  </div>
-</template>
-
-<style scoped>
-.gallery-container {
-  width: 100%;
-  padding: 4px;
-}
-
-.empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 32px 16px;
-  min-height: 200px;
-}
-
-.gallery-card {
-  height: 100%;
-  transition: transform 0.2s, box-shadow 0.2s;
-  cursor: pointer;
-}
-
-.gallery-card:hover {
-  transform: translateY(-2px);
-}
-
-.card-value {
-  line-height: 1.2;
-}
-
-.card-label {
-  width: 100%;
-  line-height: 1.2;
-  max-width: 100%;
-}
-
-.total-section {
-  padding: 0 4px;
-}
-</style>