@drax/crud-vue 3.39.0 → 3.47.0

package/src/components/buttons/CrudGroupByButton.vue

@@ -66,25 +66,29 @@ const totalCount = computed(() => {
 </script>
 
 <template>
-  <div>
+  <div id="crud-group-by-wrapper" class="crud-group-by-wrapper">
     <v-btn
+      id="crud-group-by-button"
+      class="crud-group-by-button"
       icon
       variant="text"
       @click="openDialog"
     >
-      <v-icon>mdi-chart-bar</v-icon>
+      <v-icon id="crud-group-by-button-icon" class="crud-group-by-button__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>
+    <v-dialog id="crud-group-by-dialog" class="crud-group-by-dialog" v-model="dialog" max-width="800" >
+      <v-card id="crud-group-by-card" class="crud-group-by-dialog__card">
+        <v-card-title id="crud-group-by-title" class="crud-group-by-dialog__title d-flex align-center">
+          <v-icon id="crud-group-by-title-icon" class="crud-group-by-dialog__title-icon mr-2">mdi-chart-bar</v-icon>
           {{ t('crud.groupBy.title') }}
           <v-spacer></v-spacer>
           <v-btn
+            id="crud-group-by-close-button"
+            class="crud-group-by-dialog__close-button"
             icon
             variant="text"
             @click="resetAndClose"
@@ -96,11 +100,13 @@ const totalCount = computed(() => {
 
         <v-divider></v-divider>
 
-        <v-card-text>
-          <crud-active-filters :entity="entity"></crud-active-filters>
+        <v-card-text id="crud-group-by-config" class="crud-group-by-dialog__config">
+          <crud-active-filters id="crud-group-by-active-filters" class="crud-group-by-dialog__active-filters" :entity="entity"></crud-active-filters>
           <v-divider></v-divider>
 
           <v-select
+            id="crud-group-by-fields-select"
+            class="crud-group-by-dialog__fields-select"
             v-model="selectedFields"
             :items="availableFields"
             item-title="label"
@@ -116,12 +122,13 @@ const totalCount = computed(() => {
           <!-- Selector de formato de fecha -->
           <v-select
             v-if="hasDateFields"
+            id="crud-group-by-date-format-select"
             v-model="dateFormat"
             :items="dateFormatOptions"
             :label="t('crud.groupBy.dateFormatLabel')"
             density="compact"
             variant="outlined"
-            class="mt-4"
+            class="crud-group-by-dialog__date-format-select mt-4"
             :menu-props="{ zIndex: 3000 }"
           >
             <template v-slot:prepend-inner>
@@ -134,9 +141,11 @@ const totalCount = computed(() => {
 
         <v-divider></v-divider>
 
-        <v-card-actions>
+        <v-card-actions id="crud-group-by-actions" class="crud-group-by-dialog__actions">
           <v-spacer></v-spacer>
           <v-btn
+            id="crud-group-by-apply-button"
+            class="crud-group-by-dialog__apply-button"
             color="primary"
             variant="flat"
             @click="handleGroupBy"
@@ -148,20 +157,22 @@ const totalCount = computed(() => {
         </v-card-actions>
         <v-divider class="mb-4"></v-divider>
         <!-- Tabla de resultados -->
-        <v-card-text v-if="groupByData.length > 0">
+        <v-card-text v-if="groupByData.length > 0" id="crud-group-by-results" class="crud-group-by-dialog__results">
 
 
-          <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>
+          <div id="crud-group-by-results-header" class="crud-group-by-dialog__results-header d-flex align-center mb-3">
+            <v-icon id="crud-group-by-results-icon" class="crud-group-by-dialog__results-icon mr-2">mdi-table</v-icon>
+            <span id="crud-group-by-results-title" class="crud-group-by-dialog__results-title text-h6">{{ t('crud.groupBy.results') }}</span>
             <v-spacer></v-spacer>
-            <v-chip color="primary" variant="flat" size="small">
+            <v-chip id="crud-group-by-total-chip" class="crud-group-by-dialog__total-chip" color="primary" variant="flat" size="small">
               {{ t('crud.groupBy.total') }}: {{ totalCount }}
             </v-chip>
           </div>
 
 
           <v-data-table
+            id="crud-group-by-results-table"
+            class="crud-group-by-dialog__results-table"
             :headers="headers"
             :items="groupByData"
             density="compact"
@@ -191,7 +202,9 @@ const totalCount = computed(() => {
             <!-- Formato especial para el count -->
             <template v-slot:item.count="{ value }">
               <v-chip color="primary" size="small" variant="flat">
+                <span class="crud-group-by-dialog__count-value">
                 {{ value }}
+                </span>
               </v-chip>
             </template>
           </v-data-table>

package/src/components/buttons/CrudImportButton.vue

@@ -37,22 +37,24 @@ function onFileChange(event: Event) {
 </script>
 
 <template>
-  <div v-if="entity.isImportable">
+  <div v-if="entity.isImportable" id="crud-import-button-wrapper" class="crud-import-button-wrapper">
     <input
         ref="fileInput"
-        class="d-none"
+        id="crud-import-file-input"
+        class="crud-import-button__file-input d-none"
         type="file"
         :accept="entity.importFormats.includes('CSV') && entity.importFormats.includes('JSON') ? '.csv,.json,application/json,text/csv' : entity.importFormats.includes('CSV') ? '.csv,text/csv' : '.json,application/json'"
         @change="onFileChange"
     />
-    <v-menu>
+    <v-menu id="crud-import-menu" class="crud-import-menu">
       <template v-slot:activator="{ props: mp }">
-      <v-tooltip location="top">
+      <v-tooltip id="crud-import-button-tooltip" class="crud-import-button__tooltip" location="top">
         <template v-slot:activator="{ props }">
           <v-btn
               v-bind="{...mp, ...props}"
               :disabled="importLoading"
-              class="mr-1"
+              id="crud-import-button"
+              class="crud-import-button mr-1"
               variant="text"
               :loading="importLoading"
               icon="mdi-database-import-outline"
@@ -61,9 +63,9 @@ function onFileChange(event: Event) {
         {{ t('action.import')}}
       </v-tooltip>
       </template>
-      <v-list>
-        <v-list-item v-for="format in entity.importFormats" @click="selectFormat(format)">
-          <v-list-item-title>{{ format }}</v-list-item-title>
+      <v-list id="crud-import-format-list" class="crud-import-menu__list">
+        <v-list-item v-for="format in entity.importFormats" :id="`crud-import-format-${format}`" class="crud-import-menu__item" @click="selectFormat(format)">
+          <v-list-item-title class="crud-import-menu__item-title">{{ format }}</v-list-item-title>
         </v-list-item>
       </v-list>
     </v-menu>

package/src/components/buttons/CrudRefreshButton.vue

@@ -5,12 +5,13 @@ const {t} = useI18n()
 </script>
 
 <template>
-  <v-tooltip location="top">
+  <v-tooltip :id="`${$attrs.id || 'crud-refresh-button'}-tooltip`" class="crud-refresh-button__tooltip" location="top">
     <template v-slot:activator="{ props }">
       <v-btn
           v-bind="{ ...$attrs, ...props }"
           icon="mdi-refresh"
-          class="mr-1"
+          :id="$attrs.id || 'crud-refresh-button'"
+          class="crud-refresh-button mr-1"
           variant="text"
       >
       </v-btn>

package/src/components/buttons/CrudSavedQueriesButton.vue

@@ -216,6 +216,8 @@ function onMenuUpdate(value: boolean) {
 <template>
   <v-menu
       v-if="canViewSavedQueries"
+      id="crud-saved-queries-menu"
+      class="crud-saved-queries-menu"
       :model-value="menu"
       offset-y
       :close-on-content-click="false"
@@ -224,21 +226,25 @@ function onMenuUpdate(value: boolean) {
     <template #activator="{ props: activatorProps }">
       <v-btn
           v-bind="activatorProps"
+          id="crud-saved-queries-button"
+          class="crud-saved-queries-button"
           icon
           variant="text"
       >
-        <v-icon>mdi-content-save-cog</v-icon>
+        <v-icon id="crud-saved-queries-button-icon" class="crud-saved-queries-button__icon">mdi-content-save-cog</v-icon>
         <v-tooltip activator="parent" location="bottom">
           {{ title }}
         </v-tooltip>
       </v-btn>
     </template>
 
-    <v-list min-width="280">
-      <v-list-subheader>{{ title }}</v-list-subheader>
+    <v-list id="crud-saved-queries-list" class="crud-saved-queries-menu__list" min-width="280">
+      <v-list-subheader id="crud-saved-queries-title" class="crud-saved-queries-menu__title">{{ title }}</v-list-subheader>
 
       <v-list-item
           v-if="canCreateSavedQueries"
+          id="crud-saved-queries-save-item"
+          class="crud-saved-queries-menu__save-item"
           @click="openSaveDialog"
       >
         <template #prepend>
@@ -249,17 +255,19 @@ function onMenuUpdate(value: boolean) {
 
       <v-divider />
 
-      <v-list-item v-if="loading">
-        <v-progress-linear indeterminate />
+      <v-list-item v-if="loading" id="crud-saved-queries-loading-item" class="crud-saved-queries-menu__loading-item">
+        <v-progress-linear id="crud-saved-queries-loading" class="crud-saved-queries-menu__loading" indeterminate />
       </v-list-item>
 
-      <v-list-item v-else-if="savedQueries.length === 0">
-        <v-list-item-title class="text-medium-emphasis">{{ noQueriesText }}</v-list-item-title>
+      <v-list-item v-else-if="savedQueries.length === 0" id="crud-saved-queries-empty-item" class="crud-saved-queries-menu__empty-item">
+        <v-list-item-title class="crud-saved-queries-menu__empty-title text-medium-emphasis">{{ noQueriesText }}</v-list-item-title>
       </v-list-item>
 
       <v-list-item
           v-for="query in savedQueries"
           :key="query._id"
+          :id="`crud-saved-query-${query._id}`"
+          class="crud-saved-queries-menu__query-item"
           @click="applyQuery(query)"
       >
         <template #prepend>
@@ -269,6 +277,8 @@ function onMenuUpdate(value: boolean) {
         <template #append>
           <v-btn
               v-if="canDeleteQuery(query)"
+              :id="`crud-saved-query-delete-${query._id}`"
+              class="crud-saved-queries-menu__delete-button"
               icon
               variant="text"
               color="red"
@@ -285,11 +295,13 @@ function onMenuUpdate(value: boolean) {
     </v-list>
   </v-menu>
 
-  <v-dialog v-model="saveDialog" max-width="460">
-    <v-card>
-      <v-card-title>{{ saveTitle }}</v-card-title>
-      <v-card-text>
+  <v-dialog id="crud-saved-query-save-dialog" class="crud-saved-query-save-dialog" v-model="saveDialog" max-width="460">
+    <v-card id="crud-saved-query-save-card" class="crud-saved-query-save-dialog__card">
+      <v-card-title id="crud-saved-query-save-title" class="crud-saved-query-save-dialog__title">{{ saveTitle }}</v-card-title>
+      <v-card-text id="crud-saved-query-save-content" class="crud-saved-query-save-dialog__content">
         <v-text-field
+            id="crud-saved-query-name-field"
+            class="crud-saved-query-save-dialog__name-field"
             v-model="form.name"
             :label="te('crud.savedQueries.name') ? t('crud.savedQueries.name') : 'Name'"
             density="compact"
@@ -297,18 +309,22 @@ function onMenuUpdate(value: boolean) {
             autofocus
         />
         <v-switch
+            id="crud-saved-query-shared-switch"
+            class="crud-saved-query-save-dialog__shared-switch"
             v-model="form.shared"
             :label="te('crud.savedQueries.shared') ? t('crud.savedQueries.shared') : 'Shared'"
             color="primary"
             hide-details
         />
       </v-card-text>
-      <v-card-actions>
+      <v-card-actions id="crud-saved-query-save-actions" class="crud-saved-query-save-dialog__actions">
         <v-spacer />
-        <v-btn variant="text" @click="saveDialog = false">
+        <v-btn id="crud-saved-query-save-cancel-button" class="crud-saved-query-save-dialog__cancel-button" variant="text" @click="saveDialog = false">
           {{ te('action.cancel') ? t('action.cancel') : 'Cancel' }}
         </v-btn>
         <v-btn
+            id="crud-saved-query-save-submit-button"
+            class="crud-saved-query-save-dialog__submit-button"
             color="primary"
             variant="flat"
             :loading="saving"
@@ -321,18 +337,20 @@ function onMenuUpdate(value: boolean) {
     </v-card>
   </v-dialog>
 
-  <v-dialog v-model="deleteDialog" max-width="460">
-    <v-card>
-      <v-card-title>{{ deleteTitle }}</v-card-title>
-      <v-card-text>
+  <v-dialog id="crud-saved-query-delete-dialog" class="crud-saved-query-delete-dialog" v-model="deleteDialog" max-width="460">
+    <v-card id="crud-saved-query-delete-card" class="crud-saved-query-delete-dialog__card">
+      <v-card-title id="crud-saved-query-delete-title" class="crud-saved-query-delete-dialog__title">{{ deleteTitle }}</v-card-title>
+      <v-card-text id="crud-saved-query-delete-content" class="crud-saved-query-delete-dialog__content">
         {{ deleteConfirmText }}
       </v-card-text>
-      <v-card-actions>
+      <v-card-actions id="crud-saved-query-delete-actions" class="crud-saved-query-delete-dialog__actions">
         <v-spacer />
-        <v-btn variant="text" @click="deleteDialog = false">
+        <v-btn id="crud-saved-query-delete-cancel-button" class="crud-saved-query-delete-dialog__cancel-button" variant="text" @click="deleteDialog = false">
           {{ te('action.cancel') ? t('action.cancel') : 'Cancel' }}
         </v-btn>
         <v-btn
+            id="crud-saved-query-delete-confirm-button"
+            class="crud-saved-query-delete-dialog__confirm-button"
             color="red"
             variant="flat"
             :loading="deleting"

package/src/components/buttons/CrudUpdateButton.vue

@@ -4,12 +4,13 @@ const {t} = useI18n()
 </script>
 
 <template>
-  <v-tooltip location="top">
+  <v-tooltip :id="`${$attrs.id || 'crud-update-button'}-tooltip`" class="crud-update-button__tooltip" location="top">
     <template v-slot:activator="{ props}">
       <v-btn
           v-bind="{ ...$attrs, ...props }"
           icon="mdi-pencil"
-          class="mr-1"
+          :id="$attrs.id || 'crud-update-button'"
+          class="crud-update-button mr-1"
           variant="text"
           color="blue"
           slim

package/src/components/buttons/CrudViewButton.vue

@@ -4,12 +4,13 @@ const {t} = useI18n()
 </script>
 
 <template>
-  <v-tooltip location="top">
+  <v-tooltip :id="`${$attrs.id || 'crud-view-button'}-tooltip`" class="crud-view-button__tooltip" location="top">
     <template v-slot:activator="{ props}">
       <v-btn
           v-bind="{ ...$attrs, ...props }"
           icon="mdi-magnify"
-          class="mr-1"
+          :id="$attrs.id || 'crud-view-button'"
+          class="crud-view-button mr-1"
           variant="text"
           color="teal"
           slim

package/src/components/combobox/EntityCombobox.vue

@@ -17,6 +17,8 @@ const getEntityLabel = (entity: IEntityCrud) => {
 <template>
 
   <v-select
+  id="entity-combobox"
+  class="entity-combobox"
   :items="entityStore.entities"
   item-value="name"
   v-model="valueModel"
@@ -28,6 +30,8 @@ const getEntityLabel = (entity: IEntityCrud) => {
     <template v-slot:item="{ props: itemProps, item }">
       <v-list-item
           v-bind="itemProps"
+          :id="`entity-combobox-item-${(item.raw as IEntityCrud).name}`"
+          class="entity-combobox__item"
           density="compact"
           :title="getEntityLabel(item.raw as IEntityCrud)"
 

package/src/composables/useCrudRefDisplay.ts

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

package/src/index.ts

@@ -15,12 +15,14 @@ import CrudFiltersAction from "./components/CrudFiltersAction.vue";
 import CrudNotify from "./components/CrudNotify.vue";
 import CrudSearch from "./components/CrudSearch.vue";
 import CrudAutocomplete from "./components/CrudAutocomplete.vue";
+import CrudRefDisplay from "./components/CrudRefDisplay.vue";
 import CrudSavedQueriesButton from "./components/buttons/CrudSavedQueriesButton.vue";
 import CrudRefreshButton from "./components/buttons/CrudRefreshButton.vue";
 import EntityCombobox from "./components/combobox/EntityCombobox.vue";
 import {useCrudStore} from "./stores/UseCrudStore";
 import {useEntityStore} from "./stores/UseEntityStore";
 import {useCrud} from "./composables/UseCrud";
+import {useCrudRefDisplay} from "./composables/useCrudRefDisplay";
 import {useDynamicFilters} from "./composables/UseDynamicFilters";
 import {useFilterIcon} from "./composables/UseFilterIcon";
 import {useFormUtils} from "./composables/UseFormUtils";
@@ -43,6 +45,7 @@ export {
     CrudNotify,
     CrudSearch,
     CrudAutocomplete,
+    CrudRefDisplay,
     CrudSavedQueriesButton,
     CrudRefreshButton,
     CrudFilters,
@@ -54,6 +57,7 @@ export {
     useCrudStore,
     useInputErrorI18n,
     useFilterIcon,
+    useCrudRefDisplay,
     EntityCrud,
     useEntityStore,
     EntityCombobox