@drax/dashboard-vue 0.37.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,86 @@
1
+ import {computed} from 'vue'
2
+ import {useDashboardStore} from "../stores/UseDashboardStore";
3
+ import type {IDashboardCard} from "@drax/dashboard-share";
4
+ import type {IDraxCrudProvider, IEntityCrud, IEntityCrudField} from "@drax/crud-share";
5
+ import {useI18n} from "vue-i18n";
6
+
7
+
8
+ export function useDashboardCard(card: IDashboardCard) {
9
+
10
+
11
+ const store = useDashboardStore()
12
+ const {t, te} = useI18n()
13
+
14
+ const cardEntity = computed<IEntityCrud>(() => {
15
+ return store.getEntities.find((entity: IEntityCrud) => entity.name === card.entity)
16
+ })
17
+
18
+ const cardEntityFields = computed<IEntityCrudField[]>(() => {
19
+ return cardEntity.value?.fields
20
+ })
21
+
22
+ const cardEntityProvider = computed<IDraxCrudProvider<any,any,any>>(() => {
23
+ return cardEntity.value?.provider || null
24
+ })
25
+
26
+ const groupByHeaders = computed(() => {
27
+ const headers = card?.groupBy?.fields.map((field: string) => {
28
+ return {
29
+ title: te(`${card.entity.toLowerCase()}.field.${field}`)
30
+ ? t(`${card.entity.toLowerCase()}.field.${field}`)
31
+ : field,
32
+ key: field,
33
+ align: 'start' as const
34
+ }
35
+ }) || []
36
+ return [
37
+ ...headers,
38
+ {title: t('crud.groupBy.count'), key: 'count', align: 'end' as const }
39
+ ]
40
+ })
41
+
42
+
43
+ const paginateHeaders = computed(() => {
44
+ return card?.paginate?.columns.map((field: string) => {
45
+ return {
46
+ title: te(`${card.entity.toLowerCase()}.field.${field}`)
47
+ ? t(`${card.entity.toLowerCase()}.field.${field}`)
48
+ : field,
49
+ key: field,
50
+ align: 'start' as const
51
+ }
52
+ }) || []
53
+ })
54
+
55
+ const fetchGroupByData = async function () {
56
+ if(cardEntityProvider && cardEntityProvider?.value?.groupBy){
57
+ const filters = card.filters
58
+ const fields = card.groupBy?.fields
59
+ const dateFormat = card.groupBy?.dateFormat
60
+ const data = await cardEntityProvider.value.groupBy({filters, fields, dateFormat})
61
+ return data
62
+ }
63
+ }
64
+
65
+ const fetchPaginateData = async function () {
66
+ if(cardEntityProvider?.value?.paginate){
67
+ const filters = card.filters
68
+ const page = 1
69
+ const limit = 10
70
+ const data = await cardEntityProvider.value.paginate({page, limit, filters})
71
+ return data
72
+ }
73
+ }
74
+
75
+
76
+
77
+ return {
78
+ fetchGroupByData,
79
+ fetchPaginateData,
80
+ groupByHeaders,
81
+ paginateHeaders,
82
+ cardEntity,
83
+ cardEntityFields,
84
+ cardEntityProvider
85
+ }
86
+ }
@@ -0,0 +1,230 @@
1
+ import {EntityCrud} from "@drax/crud-vue";
2
+ import type {
3
+ IDraxCrudProvider,
4
+ IEntityCrud,
5
+ IEntityCrudField,
6
+ IEntityCrudFilter,
7
+ IEntityCrudHeader,
8
+ IEntityCrudPermissions,
9
+ IEntityCrudRefs,
10
+ IEntityCrudRules
11
+ } from "@drax/crud-share";
12
+ import {DashboardProvider} from "@drax/dashboard-front";
13
+ import {useDashboardStore} from "../stores/UseDashboardStore";
14
+
15
+ //Import EntityCrud Refs
16
+
17
+
18
+ class DashboardCrud extends EntityCrud implements IEntityCrud {
19
+
20
+ static singleton: DashboardCrud
21
+
22
+ constructor() {
23
+ super();
24
+ this.name = 'Dashboard'
25
+ }
26
+
27
+ static get instance(): DashboardCrud {
28
+ if (!DashboardCrud.singleton) {
29
+ DashboardCrud.singleton = new DashboardCrud()
30
+ }
31
+ return DashboardCrud.singleton
32
+ }
33
+
34
+ get permissions(): IEntityCrudPermissions {
35
+ return {
36
+ manage: 'dashboard:manage',
37
+ view: 'dashboard:view',
38
+ create: 'dashboard:create',
39
+ update: 'dashboard:update',
40
+ delete: 'dashboard:delete'
41
+ }
42
+ }
43
+
44
+ get headers(): IEntityCrudHeader[] {
45
+ return [
46
+ {title: 'identifier', key: 'identifier', align: 'start'},
47
+ {title: 'title', key: 'title', align: 'start'}
48
+ ]
49
+ }
50
+
51
+ get selectedHeaders(): string[] {
52
+ return this.headers.map(header => header.key)
53
+ }
54
+
55
+ get actionHeaders(): IEntityCrudHeader[] {
56
+ return [
57
+ {
58
+ title: 'action.actions',
59
+ key: 'actions',
60
+ sortable: false,
61
+ align: 'center',
62
+ minWidth: '190px'
63
+ },
64
+ ]
65
+ }
66
+
67
+ get provider(): IDraxCrudProvider<any, any, any> {
68
+ return DashboardProvider.instance
69
+ }
70
+
71
+ get refs(): IEntityCrudRefs {
72
+ return {}
73
+ }
74
+
75
+ get rules(): IEntityCrudRules {
76
+ return {
77
+ identifier: [(v: any) => !!v || 'validation.required'],
78
+ title: [(v: any) => !!v || 'validation.required'],
79
+ cards: []
80
+ }
81
+ }
82
+
83
+ get entities(){
84
+ const dashboardStore = useDashboardStore();
85
+ return dashboardStore.entities.map((entity: any) => entity.name)
86
+ }
87
+
88
+ get fields(): IEntityCrudField[] {
89
+ return [
90
+ {name: 'identifier', type: 'string', label: 'identifier', default: ''},
91
+ {name: 'title', type: 'string', label: 'title', default: ''},
92
+ {
93
+ name: 'cards',
94
+ type: 'array.object',
95
+ label: 'cards',
96
+ default: [],
97
+ objectFields: [
98
+ {name: 'title', type: 'string', label: 'title', default: ''},
99
+ {name: 'entity', type: 'enum', enum: this.entities, label: 'entity', default: ''},
100
+ {name: 'type', type: 'enum', label: 'type', default: null, enum: ['paginate', 'groupBy']},
101
+ {
102
+ name: 'filters',
103
+ type: 'array.object',
104
+ label: 'filters',
105
+ default: [],
106
+ objectFields: [
107
+ {name: 'field', type: 'string', label: 'field', default: ''},
108
+ {name: 'operator', type: 'string', label: 'operator', default: ''},
109
+ {name: 'value', type: 'string', label: 'value', default: ''}]
110
+ },
111
+ {
112
+ name: 'layout',
113
+ type: 'object',
114
+ label: 'layout',
115
+ default: {"cols": 12, "sm": 12, "md": 12, "lg": 12, "height": 350, "cardVariant": "elevated"},
116
+ objectFields: [
117
+ {name: 'cols', type: 'number', label: 'cols', default: 12, sm: 3, md: 3, lg: 3},
118
+ {name: 'sm', type: 'number', label: 'sm', default: 12, sm: 3, md: 3, lg: 3},
119
+ {name: 'md', type: 'number', label: 'md', default: 12, sm: 3, md: 3, lg: 3},
120
+ {name: 'lg', type: 'number', label: 'lg', default: 12, sm: 3, md: 3, lg: 3},
121
+ {name: 'height', type: 'number', label: 'height', default: 350},
122
+ {
123
+ name: 'cardVariant',
124
+ type: 'enum',
125
+ label: 'cardVariant',
126
+ default: 'elevated',
127
+ enum: ['text', 'flat', 'elevated', 'tonal', 'outlined', 'plain']
128
+ }]
129
+ },
130
+ {
131
+ name: 'groupBy',
132
+ type: 'object',
133
+ label: 'groupBy',
134
+ default: {"fields": [], "dateFormat": "day", "render": "table"},
135
+ objectFields: [{name: 'fields', type: 'array.string', label: 'fields', default: []},
136
+ {
137
+ name: 'dateFormat',
138
+ type: 'enum',
139
+ label: 'dateFormat',
140
+ default: 'day',
141
+ enum: ['year', 'month', 'day', 'hour', 'minute', 'second']
142
+ },
143
+ {
144
+ name: 'render',
145
+ type: 'enum',
146
+ label: 'render',
147
+ default: 'table',
148
+ enum: ['table', 'gallery', 'pie', 'bars']
149
+ }]
150
+ },
151
+ {
152
+ name: 'paginate',
153
+ type: 'object',
154
+ label: 'paginate',
155
+ default: {"columns": [], "orderBy": "", "order": null},
156
+ objectFields: [{name: 'columns', type: 'array.string', label: 'columns', default: []},
157
+ {name: 'orderBy', type: 'string', label: 'orderBy', default: ''},
158
+ {name: 'order', type: 'enum', label: 'order', default: null, enum: ['asc', 'desc']}]
159
+ }]
160
+ }
161
+ ]
162
+ }
163
+
164
+ get filters(): IEntityCrudFilter[] {
165
+ return [
166
+ //{name: '_id', type: 'string', label: 'ID', default: '', operator: 'eq' },
167
+ ]
168
+ }
169
+
170
+ get isViewable() {
171
+ return true
172
+ }
173
+
174
+ get isEditable() {
175
+ return true
176
+ }
177
+
178
+ get isCreatable() {
179
+ return true
180
+ }
181
+
182
+ get isDeletable() {
183
+ return true
184
+ }
185
+
186
+ get isExportable() {
187
+ return true
188
+ }
189
+
190
+ get exportFormats() {
191
+ return ['CSV', 'JSON']
192
+ }
193
+
194
+ get exportHeaders() {
195
+ return ['_id']
196
+ }
197
+
198
+ get isImportable() {
199
+ return true
200
+ }
201
+
202
+ get isColumnSelectable() {
203
+ return true
204
+ }
205
+
206
+ get isGroupable() {
207
+ return true
208
+ }
209
+
210
+ get importFormats() {
211
+ return ['CSV', 'JSON']
212
+ }
213
+
214
+ get dialogFullscreen() {
215
+ return false
216
+ }
217
+
218
+ get tabs() {
219
+ return []
220
+ }
221
+
222
+ get menus() {
223
+ return []
224
+ }
225
+
226
+
227
+ }
228
+
229
+ export default DashboardCrud
230
+
@@ -0,0 +1,55 @@
1
+ const messages = {
2
+ en: {
3
+
4
+ dashboard: {
5
+ entity: 'Dashboard',
6
+ menu: 'Dashboard',
7
+ crud: 'Manage Dashboard',
8
+ field: {
9
+ identifier: 'identifier',
10
+ title: 'title',
11
+ cards: 'cards',
12
+ entity: 'entity',
13
+ type: 'type',
14
+ filters: 'filters',
15
+ layout: 'layout',
16
+ groupBy: 'groupBy',
17
+ paginate: 'paginate'
18
+ }
19
+ },
20
+ permission: {
21
+ 'dashboard:view': 'View Dashboard',
22
+ 'dashboard:create': 'Create Dashboard',
23
+ 'dashboard:update': 'Edit Dashboard',
24
+ 'dashboard:delete': 'Delete Dashboard',
25
+ 'dashboard:manage': 'Manage Dashboard',
26
+ }
27
+ },
28
+ es: {
29
+ dashboard: {
30
+ entity: 'Dashboard',
31
+ menu: 'Dashboard',
32
+ crud: 'Gestionar Dashboard',
33
+ field: {
34
+ identifier: 'identifier',
35
+ title: 'title',
36
+ cards: 'cards',
37
+ entity: 'entity',
38
+ type: 'type',
39
+ filters: 'filters',
40
+ layout: 'layout',
41
+ groupBy: 'groupBy',
42
+ paginate: 'paginate'
43
+ }
44
+ },
45
+ permission: {
46
+ 'dashboard:view': 'Ver Dashboard',
47
+ 'dashboard:create': 'Crear Dashboard',
48
+ 'dashboard:update': 'Editar Dashboard',
49
+ 'dashboard:delete': 'Eliminar Dashboard',
50
+ 'dashboard:manage': 'Gestionar Dashboard',
51
+ }
52
+ }
53
+ }
54
+
55
+ export default messages;
package/src/index.ts ADDED
@@ -0,0 +1,29 @@
1
+ import {DashboardCrudRoute} from './routes/DashboardCrudRoute'
2
+ import DashboardCrudPage from './pages/crud/DashboardCrudPage.vue'
3
+ import DashboardViewPage from './pages/DashboardViewPage.vue'
4
+ import DashboardView from './components/DashboardView/DashboardView.vue'
5
+ import DashboardCombobox from './combobox/DashboardCombobox.vue'
6
+ import {useDashboardCard} from './composables/UseDashboardCard'
7
+ import {useDashboardStore} from './stores/UseDashboardStore'
8
+ import DashboardCrud from './cruds/DashboardCrud'
9
+ import DashboardI18n from './i18n/Dashboard-i18n'
10
+
11
+
12
+ export {
13
+ //ROUTES
14
+ DashboardCrudRoute,
15
+ //PAGES
16
+ DashboardCrudPage,
17
+ DashboardViewPage,
18
+ //COMPONENTS
19
+ DashboardView,
20
+ DashboardCombobox,
21
+ //CRUD
22
+ DashboardCrud,
23
+ //I18N
24
+ DashboardI18n,
25
+ //STORES
26
+ useDashboardStore,
27
+ //COMPOSABLES
28
+ useDashboardCard
29
+ }
@@ -0,0 +1,45 @@
1
+ <script setup lang="ts">
2
+ import type {IDashboard} from "@drax/dashboard-share";
3
+ import {onMounted, ref} from "vue";
4
+ import DashboardView from "../components/DashboardView/DashboardView.vue";
5
+ import {useRoute} from "vue-router";
6
+ import {DashboardProvider} from "@drax/dashboard-front";
7
+
8
+ const route = useRoute()
9
+
10
+ const identifier = route.params.identifier
11
+
12
+ const dashboardSelected = ref<IDashboard>()
13
+
14
+ const loading = ref(false)
15
+
16
+ const findDashboard = async () => {
17
+ try {
18
+ loading.value = true
19
+ const filters = [{field:'identifier', operator:'eq', value: identifier}]
20
+ dashboardSelected.value = await DashboardProvider.instance.findOne({filters})
21
+ } catch (error) {
22
+ console.error('Error fetching dashboards:', error)
23
+ }finally {
24
+ loading.value = false
25
+ }
26
+ }
27
+
28
+ onMounted(() => {
29
+ findDashboard()
30
+ })
31
+ </script>
32
+
33
+ <template>
34
+ <v-container >
35
+
36
+ <v-skeleton-loader :loading="loading" />
37
+ <dashboard-view v-if="dashboardSelected" :dashboard="dashboardSelected"></dashboard-view>
38
+
39
+ </v-container>
40
+
41
+ </template>
42
+
43
+ <style scoped>
44
+
45
+ </style>
@@ -0,0 +1,25 @@
1
+ <script setup lang="ts">
2
+
3
+ import DashboardCombobox from "../combobox/DashboardCombobox.vue";
4
+ import type {IDashboard} from "@drax/dashboard-share";
5
+ import {ref} from "vue";
6
+ import DashboardView from "../components/DashboardView/DashboardView.vue";
7
+
8
+ const dashboardSelected = ref<IDashboard>()
9
+ </script>
10
+
11
+ <template>
12
+ <v-container >
13
+ <v-toolbar>
14
+ <dashboard-combobox v-model="dashboardSelected"></dashboard-combobox>
15
+ </v-toolbar>
16
+
17
+ <dashboard-view v-if="dashboardSelected" :dashboard="dashboardSelected"></dashboard-view>
18
+
19
+ </v-container>
20
+
21
+ </template>
22
+
23
+ <style scoped>
24
+
25
+ </style>
@@ -0,0 +1,19 @@
1
+ <script setup lang="ts">
2
+ import DashboardCrud from '../../cruds/DashboardCrud'
3
+ import {Crud} from "@drax/crud-vue";
4
+
5
+ </script>
6
+
7
+ <template>
8
+ <crud :entity="DashboardCrud.instance">
9
+ <template v-slot:item.actions="{ item }">
10
+ <v-btn size="small" icon="mdi-view-dashboard" :href="'/dashboard/identifier/'+ item?.identifier">
11
+ </v-btn>
12
+ </template>
13
+ </crud>
14
+ </template>
15
+
16
+ <style scoped>
17
+
18
+ </style>
19
+
@@ -0,0 +1,38 @@
1
+
2
+ import DashboardCrudPage from "../pages/crud/DashboardCrudPage.vue";
3
+ import DashboardViewPage from "../pages/DashboardViewPage.vue";
4
+ import DashboardIdentifierPage from "../pages/DashboardIdentifierPage.vue";
5
+
6
+
7
+ const DashboardCrudRoute = [
8
+ {
9
+ name: 'DashboardCrudPage',
10
+ path: '/crud/dashboard',
11
+ component: DashboardCrudPage,
12
+ meta: {
13
+ auth: true,
14
+ permission: 'dashboard:manage',
15
+ }
16
+ },
17
+ {
18
+ name: 'DashboardPage',
19
+ path: '/dashboard/view',
20
+ component: DashboardViewPage,
21
+ meta: {
22
+ auth: true,
23
+ permission: 'dashboard:manage',
24
+ }
25
+ },
26
+ {
27
+ name: 'DashboardIdentifierPage',
28
+ path: '/dashboard/identifier/:identifier',
29
+ component: DashboardIdentifierPage,
30
+ meta: {
31
+ auth: true,
32
+ permission: 'dashboard:manage',
33
+ }
34
+ },
35
+ ]
36
+
37
+ export default DashboardCrudRoute
38
+ export { DashboardCrudRoute }
@@ -0,0 +1,25 @@
1
+ import {defineStore} from "pinia";
2
+ import type { IEntityCrud} from "@drax/crud-share";
3
+
4
+ export const useDashboardStore = defineStore('DashboardStore', {
5
+ state: () => (
6
+ {
7
+ entities: [] as IEntityCrud[],
8
+
9
+ }
10
+ ),
11
+ getters: {
12
+ getEntities(state: any) {
13
+ return state.entities
14
+ }
15
+ },
16
+ actions: {
17
+ setEntities(entities: IEntityCrud) {
18
+ this.entities = entities
19
+ },
20
+ addEntity(entity: IEntityCrud) {
21
+ this.entities.push(entity)
22
+ }
23
+ }
24
+
25
+ })