@drax/crud-vue 3.39.0 → 3.46.0

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "3.39.0",
+  "version": "3.46.0",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -26,8 +26,8 @@
   "dependencies": {
     "@drax/common-front": "^3.29.0",
     "@drax/crud-front": "^3.21.0",
-    "@drax/crud-share": "^3.39.0",
-    "@drax/media-vue": "^3.39.0"
+    "@drax/crud-share": "^3.46.0",
+    "@drax/media-vue": "^3.46.0"
   },
   "peerDependencies": {
     "pinia": "^3.0.4",
@@ -50,5 +50,5 @@
     "vue-tsc": "^3.2.4",
     "vuetify": "^3.11.8"
   },
-  "gitHead": "9490eb0473fe037d100742aa7c21e9478b941eb5"
+  "gitHead": "a90e6d81ea836f1f921c7baf6f149b82a0aced38"
 }

package/src/components/CrudRefDisplay.vue

@@ -1,47 +1,46 @@
 <script setup lang="ts">
-import {onMounted, ref, computed} from "vue";
+import {ref, watch} from "vue";
 import type {PropType} from "vue";
 import type {IEntityCrud} from "@drax/crud-share";
-import type {IDraxFieldFilter} from "@drax/crud-share";
+import {useCrudRefDisplay} from "../composables/useCrudRefDisplay";
 
-const {entity, value, refDisplay} = defineProps({
+const props = 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},
+  value: {type: null, required: true},
+  displayField: {type: String, required: false},
+  refDisplay: {type: String, required: false},
 })
 
+const {refDisplay} = useCrudRefDisplay()
 const loading = ref(false)
-const items = ref<any[]>([])
-
-onMounted(()=> {
-  console.log('onMounted',entity, value, refDisplay)
-  fetch()
-})
+const display = ref<any>('')
 
 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})
+    if(props.entity){
+      display.value = await refDisplay(
+        props.entity,
+        props.value,
+        props.displayField ?? props.refDisplay
+      )
     }
   }catch (e){
     console.error(e)
+    display.value = props.value
   }finally{
     loading.value = false
   }
 }
 
-const display = computed(() => {
-  return items.value.map(item => item[refDisplay as any]).join(', ')
-})
-
-
+watch(
+  () => [props.entity, props.value, props.displayField, props.refDisplay],
+  fetch,
+  {immediate: true}
+)
 </script>
 
 <template>
-  {{display}}
-
+  <span v-if="loading">...</span>
+  <span v-else>{{display}}</span>
 </template>
-

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