@drax/dashboard-vue 0.38.0 → 0.40.0

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.38.0",
+  "version": "0.40.0",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -24,8 +24,8 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@drax/crud-front": "^0.38.0",
-    "@drax/crud-share": "^0.38.0"
+    "@drax/crud-front": "^0.40.0",
+    "@drax/crud-share": "^0.40.0"
   },
   "peerDependencies": {
     "pinia": "^2.2.2",
@@ -62,5 +62,5 @@
     "vue-tsc": "^2.0.11",
     "vuetify": "^3.7.1"
   },
-  "gitHead": "43c90f3c12165e7527edefbc80dd327a59236dd5"
+  "gitHead": "269ec7921d83364dfba091cd74bd3f45a8135c26"
 }

package/src/components/DashboardView/DashboardView.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import type {PropType} from "vue";
-import type {IDashboard} from "@drax/dashboard-share";
+import type {IDashboardBase} from "@drax/dashboard-share";
 import GroupByCard from "../GroupByCard/GroupByCard.vue";
 import PaginateCard from "../PaginateCard/PaginateCard.vue";
 
 const {dashboard} = defineProps({
-  dashboard: {type: Object as PropType<IDashboard>, required: true},
+  dashboard: {type: Object as PropType<IDashboardBase>, required: true},
 })
 
 </script>
@@ -13,7 +13,6 @@ const {dashboard} = defineProps({
 <template>
   <v-card v-if="dashboard" class="mt-3" >
     <v-card-title>{{dashboard.title}}</v-card-title>
-    <v-card-subtitle>{{dashboard.identifier}}</v-card-subtitle>
     <v-card-text>
       <v-row>
         <v-col v-for="(card,i) in dashboard.cards" :key="i"

package/src/components/GroupByCard/GroupByCard.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type {PropType} from "vue";
+import {type PropType, watch} from "vue";
 import type {IDashboardCard} from "@drax/dashboard-share";
 import {useDashboardCard} from "../../composables/UseDashboardCard";
 import GroupByTableRender from "./renders/GroupByTableRender.vue";
@@ -17,10 +17,20 @@ const {fetchGroupByData, groupByHeaders, cardEntityFields} = useDashboardCard(ca
 
 const data = ref<any[]>()
 
-onMounted(async ()=> {
+const loadData = async () => {
   data.value = await fetchGroupByData()
+}
+
+onMounted(async ()=> {
+  await loadData()
 })
 
+watch(() => card, async () => {
+  await loadData()
+}, { deep: true })
+
+
+
 </script>
 
 <template>

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

@@ -58,7 +58,7 @@ const chartData = computed(() => {
 
       let formattedValue = ''
 
-      if (field.type === 'ref' && field.refDisplay && value) {
+      if (['ref','object'].includes(field.type) && field.refDisplay && value) {
         formattedValue = value[field.refDisplay]
       } else if (field.type === 'date' && value) {
         formattedValue = formatDateByUnit(value, dateFormat)

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

@@ -49,7 +49,7 @@ const cardData = computed(() => {
 
       let formattedValue = ''
 
-      if (field.type === 'ref' && field.refDisplay && value) {
+      if (['ref','object'].includes(field.type) && field.refDisplay && value) {
         formattedValue = value[field.refDisplay]
       } else if (field.type === 'date' && value) {
         formattedValue = formatDateByUnit(value, dateFormat)

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

@@ -51,7 +51,7 @@ const chartData = computed(() => {
 
       let formattedValue = ''
 
-      if (field.type === 'ref' && field.refDisplay && value) {
+      if (['ref','object'].includes(field.type) && field.refDisplay && value) {
         formattedValue = value[field.refDisplay]
       } else if (field.type === 'date' && value) {
         formattedValue = formatDateByUnit(value, dateFormat)

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

@@ -45,7 +45,7 @@ const getPercentage = (count: number) => {
           :key="field.name"
           v-slot:[`item.${field.name}`]="{ value }"
       >
-        <template v-if="field.type === 'ref' && field.refDisplay">
+        <template v-if="['ref','object'].includes(field.type) && field.refDisplay">
           {{value[field.refDisplay]}}
         </template>
         <template v-else-if="field.type === 'date'">

package/src/composables/UseDashboardCard.ts

@@ -12,7 +12,14 @@ export function useDashboardCard(card: IDashboardCard) {
     const {t, te} = useI18n()
 
     const cardEntity = computed<IEntityCrud>(() => {
-        return store.getEntities.find((entity: IEntityCrud) => entity.name === card.entity)
+        if(card.entityInstance){
+            return card.entityInstance
+        }
+        const entityInstance =  store.getEntities.find((entity: IEntityCrud) => entity.name === card.entity)
+        if(!entityInstance){
+            throw new Error(`Entity "${card.entity}" not found in entities DashboardStore`)
+        }
+        return entityInstance
     })
 
     const cardEntityFields = computed<IEntityCrudField[]>(() => {

package/src/index.ts

@@ -2,12 +2,15 @@ import {DashboardCrudRoute} from './routes/DashboardCrudRoute'
 import DashboardCrudPage from './pages/crud/DashboardCrudPage.vue'
 import DashboardViewPage from './pages/DashboardViewPage.vue'
 import DashboardView from './components/DashboardView/DashboardView.vue'
+import GroupByCard from './components/GroupByCard/GroupByCard.vue'
+import PaginateCard from './components/PaginateCard/PaginateCard.vue'
 import DashboardCombobox from './combobox/DashboardCombobox.vue'
 import {useDashboardCard} from './composables/UseDashboardCard'
 import {useDashboardStore} from './stores/UseDashboardStore'
 import DashboardCrud from './cruds/DashboardCrud'
 
 
+
 export {
     //ROUTES
     DashboardCrudRoute,
@@ -17,6 +20,8 @@ export {
     //COMPONENTS
     DashboardView,
     DashboardCombobox,
+    GroupByCard,
+    PaginateCard,
     //CRUD
     DashboardCrud,
     //STORES