@drax/dashboard-vue 2.6.0 → 2.8.0

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "2.6.0",
+  "version": "2.8.0",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "@drax/crud-front": "^2.0.0",
-    "@drax/crud-share": "^2.4.0",
-    "@drax/dashboard-front": "^2.6.0"
+    "@drax/crud-share": "^2.8.0",
+    "@drax/dashboard-front": "^2.8.0"
   },
   "peerDependencies": {
     "pinia": "^3.0.4",
@@ -46,5 +46,5 @@
     "vue-tsc": "^3.2.4",
     "vuetify": "^3.11.8"
   },
-  "gitHead": "57830b50c2c9081b9d7e236d441ed9b2a3aca0ba"
+  "gitHead": "3adeb31ee60eb83c92137dc28162f9226cab06c1"
 }

package/src/components/DashboardConfig/DashboardCardEditor.vue

@@ -0,0 +1,411 @@
+<script setup lang="ts">
+import {ref, watch, computed, type PropType} from 'vue';
+import type {IDashboardCard} from "@drax/dashboard-share";
+import {useEntityStore} from "@drax/crud-vue";
+import type {
+  IDraxFieldFilter,
+  IEntityCrud,
+  IEntityCrudFieldTypes,
+  IEntityCrudFilter,
+  IEntityCrudFilterOperators
+} from "@drax/crud-share";
+import {useI18n} from "vue-i18n"
+import CrudFormField from "@drax/crud-vue/src/components/CrudFormField.vue";
+import {useFilterIcon} from "@drax/crud-vue";
+
+const props = defineProps({
+  modelValue: {type: Object as PropType<IDashboardCard>, required: true}
+});
+const {filterIcon} = useFilterIcon()
+const {t, te} = useI18n()
+
+const emit = defineEmits(['update:modelValue', 'save', 'cancel']);
+
+// Create a local reactive copy
+const form = ref<IDashboardCard>(JSON.parse(JSON.stringify(props.modelValue)));
+
+const entityStore = useEntityStore();
+
+const entitySelected = computed<IEntityCrud>(() => {
+  return entityStore.entities.find((entity: any) => entity.name === form.value.entity)
+})
+
+const entityField = computed(() => {
+  return (fieldName: string) => {
+    if(!entitySelected.value){
+      return null
+    }
+    return entitySelected.value.fields.find(f => f.name === fieldName)
+  }
+})
+
+
+const entities = computed(() => {
+  return entityStore.entities.map((entity: any) => entity.name)
+})
+
+const columns = computed(() => {
+  return entitySelected.value ? entitySelected.value.headers.map((h: any) => ({title: h.title, value: h.key})) : []
+})
+
+
+const filters = ref<IEntityCrudFilter[]>(prepareFilters(form.value.filters));
+
+function prepareFilters(filters: IDraxFieldFilter[] = []): IEntityCrudFilter[] {
+
+  return filters.map((filter: IDraxFieldFilter) => {
+    let theField = entityField.value(filter.field)
+
+    let value = filter.value
+    if(value === 'true'){
+      value = true
+    }
+    if(value === 'false'){
+      value = false
+    }
+
+    return {
+      name: filter.field,
+      operator: filter.operator as IEntityCrudFilterOperators,
+      value: value,
+      type: theField?.type || 'string',
+      label: theField?.label || '',
+      default: '',
+      ref: theField?.ref || '',
+      refDisplay: theField?.refDisplay || '',
+      enum: theField?.enum || []
+    }
+
+  })
+}
+
+watch(() => props.modelValue, (newVal) => {
+  form.value = JSON.parse(JSON.stringify(newVal));
+  ensureStructure();
+}, {deep: true});
+
+// Ensure nested objects exist to avoid v-model errors
+const ensureStructure = () => {
+  if (!form.value.layout) form.value.layout = {cols: 12, sm: 12, md: 12, lg: 12, height: 450, cardVariant: 'elevated'};
+  if (!form.value.groupBy) form.value.groupBy = {fields: [], dateFormat: 'day', render: 'pie'};
+  if (!form.value.paginate) form.value.paginate = {columns: [], orderBy: '', order: ''};
+  if (!form.value.filters) form.value.filters = [];
+};
+ensureStructure();
+
+const save = () => {
+  const payload = form.value
+  payload.filters = filters.value
+      .filter((filter: IEntityCrudFilter) => filter.name && filter.operator)
+      .map((filter: IEntityCrudFilter) => ({
+        field: filter.name,
+        operator: filter.operator as string,
+        value: filter.value == null ? '' : String(filter.value)
+      }))
+  emit('update:modelValue', payload);
+  emit('save');
+};
+
+const cancel = () => {
+  emit('cancel');
+};
+
+
+function onEntityChange() {
+  if (form.value) {
+    if (form.value.paginate) {
+      form.value.paginate.columns = []
+    }
+    if (form.value.groupBy) {
+      form.value.groupBy.fields = []
+    }
+  }
+}
+
+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
+    }
+  }
+}
+
+
+</script>
+
+<template>
+  <v-card class="d-flex flex-column dashboard-card-editor" height="100%" color="surface" variant="flat">
+    <v-card-title class="d-flex align-center bg-primary text-white py-2">
+      <v-icon icon="mdi-pencil-box-outline" class="mr-2"></v-icon>
+      Configuración de Tarjeta
+      <v-spacer></v-spacer>
+      <v-btn icon="mdi-close" variant="text" size="small" @click="cancel"></v-btn>
+    </v-card-title>
+
+    <v-card-text class="pt-4 flex-grow-1 overflow-y-auto">
+      <v-form @submit.prevent>
+        <v-row v-if="form" dense>
+          <!-- Base Config -->
+          <v-col cols="12" md="12">
+            <v-text-field v-model="form.title" label="Título de la tarjeta" variant="outlined" density="compact"
+                          hide-details="auto" class="mb-3"></v-text-field>
+          </v-col>
+          <v-col cols="12" md="6" lg="6">
+            <v-select :items="entities"
+                      v-model="form.entity"
+                      label="Entidad (ej. User, Country)"
+                      variant="outlined"
+                      density="compact"
+                      hide-details="auto"
+                      class="mb-3"
+                      clearable
+                      @update:modelValue="onEntityChange"
+            ></v-select>
+          </v-col>
+          <v-col cols="12" md="6" lg="6">
+            <v-select v-model="form.type" :items="['groupBy' , 'paginate']" label="Tipo de tarjeta" variant="outlined"
+                      density="compact" hide-details="auto" class="mb-3"></v-select>
+          </v-col>
+
+          <v-col cols="12" md="6" lg="6">
+            <v-select v-model="form.layout!.cardVariant" :items="['elevated', 'outlined',  'flat','text','tonal','plain']" label="Tipo de tarjeta" variant="outlined"
+                      density="compact" hide-details="auto" class="mb-3"></v-select>
+          </v-col>
+
+
+          <v-col cols="12" md="6" lg="6">
+            <v-text-field v-if="form.layout" v-model="form.layout!.height" label="Altura" variant="outlined"
+                          density="compact" hide-details="auto" class="mb-3"></v-text-field>
+          </v-col>
+
+
+          <v-divider class="my-2 w-100"></v-divider>
+          <!-- Filters HERE -->
+          <v-row dense class="mt-4">
+            <v-col v-for="(filter,index) in filters"
+                   :key="filter.name"
+                   cols="12"
+            >
+              <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, v)"
+                  />
+                </v-col>
+                <v-col cols="12" sm="3">
+                  <v-select
+                      :items="operations"
+                      v-model="dynamicFilter(index)!.operator"
+                      :label="t('crud.operator')"
+                      density="compact"
+                      variant="outlined"
+                      hide-details
+                  />
+                </v-col>
+                <v-col cols="12" sm="4">
+                  <crud-form-field
+                      v-if="entitySelected"
+                      :field="filter"
+                      :entity="entitySelected"
+                      v-model="dynamicFilter(index)!.value"
+                      :clearable="true"
+                      density="compact"
+                      variant="outlined"
+                      :prepend-inner-icon="filterIcon(filter)"
+                      hide-details
+                  />
+                </v-col>
+                <v-col cols="12" 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 small variant="outlined" color="primary" @click="addFilter">+ {{ t('action.addFilter') }}</v-btn>
+            </v-col>
+
+          </v-row>
+
+          <v-divider class="my-2 w-100" v-if="form.type"></v-divider>
+
+          <!-- Type specific config -->
+          <template v-if="form.type === 'paginate'">
+            <v-col cols="12">
+              <div class="text-subtitle-2 mb-2 text-primary d-flex align-center">
+                <v-icon icon="mdi-table" size="small" class="mr-1"></v-icon>
+                Paginate
+              </div>
+            </v-col>
+            <v-col cols="12">
+              <v-select item-title="title"
+                        item-value="value"
+                        :items="columns"
+                        v-model="form.paginate!.columns"
+                        label="Columnas (presiona enter)"
+                        multiple chips variant="outlined"
+                        density="compact"
+                        hide-details="auto"
+                        class="mb-3">
+
+              </v-select>
+            </v-col>
+            <v-col cols="12" md="6">
+              <v-select
+                  item-title="title"
+                  item-value="value"
+                  :items="columns"
+                  v-model="form.paginate!.orderBy"
+                  label="Ordenar por campo"
+                  variant="outlined"
+                  density="compact"
+                  hide-details="auto"
+                  class="mb-3"
+                  clearable
+              ></v-select>
+            </v-col>
+            <v-col cols="12" md="6">
+              <v-select v-model="form.paginate!.order" clearable :items="['asc', 'desc']" label="Dirección de orden"
+                        variant="outlined" density="compact" hide-details="auto" class="mb-3"></v-select>
+            </v-col>
+          </template>
+
+          <template v-else-if="form.type === 'groupBy'">
+            <v-col cols="12">
+              <div class="text-subtitle-2 mb-2 text-primary d-flex align-center">
+                <v-icon icon="mdi-chart-pie" size="small" class="mr-1"></v-icon>
+                Group By
+              </div>
+            </v-col>
+            <v-col cols="12">
+              <v-select
+                  item-title="title"
+                  item-value="value"
+                  :items="columns"
+                  v-model="form.groupBy!.fields"
+                  label="Campos de agrupación"
+                  multiple chips variant="outlined"
+                  density="compact" hide-details="auto"
+                  class="mb-3"></v-select>
+            </v-col>
+            <v-col cols="12" md="6">
+              <v-select v-model="form.groupBy!.dateFormat" :items="['year', 'month', 'day', 'hour', 'minute', 'second']"
+                        label="Formato de Fecha (opcional)" variant="outlined" density="compact" hide-details="auto"
+                        clearable class="mb-3"></v-select>
+            </v-col>
+            <v-col cols="12" md="6">
+              <v-select v-model="form.groupBy!.render" :items="['pie', 'bars', 'table', 'gallery']"
+                        label="Render visual" variant="outlined" density="compact" hide-details="auto"
+                        class="mb-3"></v-select>
+            </v-col>
+          </template>
+        </v-row>
+      </v-form>
+    </v-card-text>
+
+    <v-card-actions class="bg-grey-lighten-4 py-3">
+      <v-spacer></v-spacer>
+      <v-btn color="grey-darken-1" variant="text" @click="cancel">Cancelar</v-btn>
+      <v-btn color="primary" variant="flat" @click="save" class="px-6">Guardar Cambios</v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<style scoped>
+.dashboard-card-editor {
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
+}
+</style>

package/src/components/DashboardConfig/DashboardConfig.vue

@@ -0,0 +1,253 @@
+<script setup lang="ts">
+import {ref} from "vue";
+import type {IDashboardBase, IDashboardCard} from "@drax/dashboard-share";
+import GroupByCard from "../GroupByCard/GroupByCard.vue";
+import PaginateCard from "../PaginateCard/PaginateCard.vue";
+import DashboardCardEditor from "./DashboardCardEditor.vue";
+import {debounce} from "@drax/common-front"
+
+const valueModel = defineModel<IDashboardBase>({required: true})
+
+const editingCardIndex = ref<number | null>(null);
+
+// Drag and drop state
+const dragCardIndex = ref<number | null>(null);
+const dropTargetIndex = ref<number | null>(null);
+
+const onDragStart = (e: DragEvent, index: number) => {
+  dragCardIndex.value = index;
+  if (e.dataTransfer) {
+    e.dataTransfer.effectAllowed = 'move';
+  }
+};
+
+const onDragEnter = (e: DragEvent, index: number) => {
+  e.preventDefault();
+  if (dragCardIndex.value !== index) {
+    dropTargetIndex.value = index;
+  }
+};
+
+const onDragOver = (e: DragEvent) => {
+  e.preventDefault();
+};
+
+const onDrop = (e: DragEvent, index: number) => {
+  e.preventDefault();
+  dropTargetIndex.value = null;
+  if (dragCardIndex.value !== null && dragCardIndex.value !== index) {
+    const cards = valueModel.value.cards || [];
+    const movedItem = cards.splice(dragCardIndex.value, 1)[0] as IDashboardCard;
+    cards.splice(index, 0, movedItem);
+    emit("dashboardUpdated")
+  }
+  dragCardIndex.value = null;
+};
+
+const onDragEnd = () => {
+  dragCardIndex.value = null;
+  dropTargetIndex.value = null;
+};
+
+// Actions
+const editCard = (index: number) => {
+  editingCardIndex.value = index;
+};
+
+const deleteCard = (index: number) => {
+  if (confirm('¿Estás seguro de eliminar esta tarjeta?')) {
+    valueModel.value.cards?.splice(index, 1);
+    if (editingCardIndex.value === index) {
+      editingCardIndex.value = null;
+      emit("dashboardUpdated")
+    }
+  }
+};
+
+const contractCard = (index: number) => {
+  const card = valueModel.value.cards?.[index];
+  if (card && card.layout) {
+    card.layout.md = Math.max(3, (card.layout.md || 12) - 1);
+    card.layout.lg = Math.max(3, (card.layout.lg || 12) - 1);
+    emit("dashboardUpdated")
+  }
+};
+
+const expandCard = (index: number) => {
+  const card = valueModel.value.cards?.[index];
+  if (card && card.layout) {
+    card.layout.md = Math.min(12, (card.layout.md || 12) + 1);
+    card.layout.lg = Math.min(12, (card.layout.lg || 12) + 1);
+    emit("dashboardUpdated")
+  }
+};
+
+const addNewCard = () => {
+  if (!valueModel.value.cards) {
+    valueModel.value.cards = [];
+  }
+  valueModel.value.cards.push({
+    title: 'Nueva Tarjeta',
+    entity: '',
+    filters: [],
+    type: 'groupBy',
+    layout: {cols: 12, sm: 12, md: 6, lg: 6, height: 450, cardVariant: 'elevated'}
+  });
+  editingCardIndex.value = valueModel.value.cards.length - 1;
+};
+
+
+
+const onSaveCard = () => {
+  emit("dashboardUpdated")
+  editingCardIndex.value = null;
+};
+
+const debouncedSave = debounce(onSaveCard, 500)
+
+const onCancelCard = () => {
+  editingCardIndex.value = null;
+};
+
+const emit = defineEmits(["dashboardUpdated"])
+
+</script>
+
+<template>
+  <v-card v-if="valueModel" class="mt-3 valueModel-config-wrapper" variant="flat" >
+    <v-card-title class="px-0 d-flex align-center">
+        <v-text-field
+            variant="solo-filled"
+            class="font-weight-semibold"
+            v-model="valueModel.title"
+            @update:modelValue="debouncedSave"
+        ></v-text-field>
+      <v-spacer></v-spacer>
+      <slot name="buttons"></slot>
+      <v-btn color="primary" prepend-icon="mdi-plus" @click="addNewCard" elevation="2">Añadir Tarjeta</v-btn>
+    </v-card-title>
+
+    <v-card-text class="px-0">
+      <div v-if="!valueModel.cards?.length"
+           class="text-center pa-10 text-grey border-dashed rounded-lg bg-surface mt-4">
+        <v-icon icon="mdi-view-valueModel-variant-outline" size="64" color="grey-lighten-1" class="mb-4"></v-icon>
+        <h3 class="text-h6">Dashboard Vacío</h3>
+        <p class="mb-4">No hay tarjetas configuradas todavía.</p>
+        <v-btn color="primary" variant="tonal" prepend-icon="mdi-plus" @click="addNewCard">Añadir primera tarjeta
+        </v-btn>
+      </div>
+
+      <v-row v-else class="mt-2">
+        <v-col v-for="(card, i) in valueModel.cards" :key="i"
+               :cols="card?.layout?.cols || 12"
+               :sm="card?.layout?.sm || 12"
+               :md="card?.layout?.md || 12"
+               :lg="card?.layout?.lg || 12"
+               class="transition-swing drop-zone"
+               :class="{ 'drop-target': dropTargetIndex === i }"
+               @dragenter="onDragEnter($event, i)"
+               @dragover="onDragOver"
+               @drop="onDrop($event, i)"
+        >
+          <!-- Vista Edición -->
+          <template v-if="editingCardIndex === i">
+            <dashboard-card-editor
+                v-if="valueModel.cards[i]"
+                v-model="valueModel.cards[i]"
+                @save="onSaveCard"
+                @cancel="onCancelCard()"
+            />
+          </template>
+
+          <!-- Vista Card -->
+          <v-card v-else
+                  :variant="card?.layout?.cardVariant || 'outlined'"
+                  :height="card?.layout?.height || 300"
+                  class="hover-card d-flex flex-column"
+                  draggable="true"
+                  @dragstart="onDragStart($event, i)"
+                  @dragend="onDragEnd"
+          >
+            <!-- Toolbar oculta en hover -->
+            <div class="card-toolbar d-flex align-center px-2 py-1 bg-grey-lighten-4">
+              <v-icon icon="mdi-drag" class="cursor-move text-grey" title="Arrastrar para mover"></v-icon>
+              <span class="text-caption text-grey ml-2">{{ card?.layout?.md || 12 }} cols</span>
+              <v-spacer></v-spacer>
+              <v-btn icon="mdi-arrow-collapse-horizontal" variant="text" size="x-small" density="comfortable"
+                     color="grey-darken-1" title="Contraer" @click="contractCard(i)"
+                     :disabled="(card?.layout?.md || 12) <= 3"></v-btn>
+              <v-btn icon="mdi-arrow-expand-horizontal" variant="text" size="x-small" density="comfortable"
+                     color="grey-darken-1" title="Expandir" @click="expandCard(i)"
+                     :disabled="(card?.layout?.md || 12) >= 12"></v-btn>
+              <v-divider vertical class="mx-1"></v-divider>
+              <v-btn icon="mdi-pencil" variant="text" size="x-small" density="comfortable" color="primary"
+                     title="Editar" @click="editCard(i)"></v-btn>
+              <v-btn icon="mdi-delete" variant="text" size="x-small" density="comfortable" color="error"
+                     title="Eliminar" @click="deleteCard(i)"></v-btn>
+            </div>
+
+            <v-card-title class="text-subtitle-1 font-weight-bold pb-1">{{ card?.title }}</v-card-title>
+            <v-card-text class="flex-grow-1 overflow-y-auto pt-0 relative">
+              <paginate-card v-if="card?.type === 'paginate'" :card="card"/>
+              <group-by-card v-else-if="card?.type === 'groupBy'" :card="card"/>
+            </v-card-text>
+          </v-card>
+        </v-col>
+      </v-row>
+    </v-card-text>
+  </v-card>
+</template>
+
+<style scoped>
+.hover-card {
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+  border: 1px solid rgba(0, 0, 0, 0.12);
+}
+
+.hover-card:hover {
+  box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2) !important;
+  transform: translateY(-2px);
+  border-color: rgba(0, 0, 0, 0.0);
+}
+
+.card-toolbar {
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.hover-card:hover .card-toolbar {
+  opacity: 1;
+}
+
+.cursor-move {
+  cursor: grab;
+}
+
+.cursor-move:active {
+  cursor: grabbing;
+}
+
+.border-dashed {
+  border: 2px dashed rgba(0, 0, 0, 0.12);
+}
+
+.drop-zone {
+  transition: padding 0.2s ease-in-out;
+}
+
+.drop-target {
+  padding-left: 20px;
+  position: relative;
+}
+
+.drop-target::before {
+  content: '';
+  position: absolute;
+  left: 4px;
+  top: 12px;
+  bottom: 12px;
+  width: 4px;
+  border-radius: 4px;
+}
+</style>