@drax/dashboard-vue 0.39.0 → 0.42.2

package/package.json

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

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

@@ -1,5 +1,5 @@
 import {computed} from 'vue'
-import {useDashboardStore} from "../stores/UseDashboardStore";
+import {useEntityStore} from "@drax/crud-vue";
 import type {IDashboardCard} from "@drax/dashboard-share";
 import type {IDraxCrudProvider, IEntityCrud, IEntityCrudField} from "@drax/crud-share";
 import {useI18n} from "vue-i18n";
@@ -8,11 +8,18 @@ import {useI18n} from "vue-i18n";
 export function useDashboardCard(card: IDashboardCard) {
 
 
-    const store = useDashboardStore()
+    const store = useEntityStore()
     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/cruds/DashboardCrud.ts

@@ -10,7 +10,7 @@ import type {
     IEntityCrudRules
 } from "@drax/crud-share";
 import {DashboardProvider} from "@drax/dashboard-front";
-import {useDashboardStore} from "../stores/UseDashboardStore";
+import {useEntityStore} from "@drax/crud-vue";
 
 //Import EntityCrud Refs
 
@@ -81,7 +81,7 @@ class DashboardCrud extends EntityCrud implements IEntityCrud {
     }
 
     get entities(){
-        const dashboardStore = useDashboardStore();
+        const dashboardStore = useEntityStore();
         return dashboardStore.entities.map((entity: any) => entity.name)
     }
 

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

package/src/stores/UseDashboardStore.ts

@@ -1,24 +1,24 @@
 import {defineStore} from "pinia";
-import type { IEntityCrud} from "@drax/crud-share";
+import type { IDashboardBase} from "@drax/dashboard-share";
 
 export const useDashboardStore = defineStore('DashboardStore', {
     state: () => (
         {
-            entities: [] as IEntityCrud[],
+            dashboards: [] as IDashboardBase[],
 
         }
     ),
     getters: {
-        getEntities(state: any) {
-                return state.entities
+        getDashboards(state: any) {
+                return state.dashboards
         }
     },
     actions: {
-        setEntities(entities: IEntityCrud) {
-            this.entities = entities
+        setDashboards(dashboards: IDashboardBase[]) {
+            this.dashboards = dashboards
         },
-        addEntity(entity: IEntityCrud) {
-            this.entities.push(entity)
+        addEntity(dashboard: IDashboardBase) {
+            this.dashboards.push(dashboard)
         }
     }