@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.
- package/package.json +66 -0
- package/src/combobox/DashboardCombobox.vue +41 -0
- package/src/components/DashboardView/DashboardView.vue +41 -0
- package/src/components/GroupByCard/GroupByCard.vue +57 -0
- package/src/components/GroupByCard/renders/GroupByBarsRender.vue +361 -0
- package/src/components/GroupByCard/renders/GroupByGalleryRender.vue +181 -0
- package/src/components/GroupByCard/renders/GroupByPieRender.vue +298 -0
- package/src/components/GroupByCard/renders/GroupByTableRender.vue +91 -0
- package/src/components/PaginateCard/PaginateCard.vue +35 -0
- package/src/components/PaginateCard/renders/PaginateTableRender.vue +65 -0
- package/src/composables/UseDashboardCard.ts +86 -0
- package/src/cruds/DashboardCrud.ts +230 -0
- package/src/i18n/Dashboard-i18n.ts +55 -0
- package/src/index.ts +29 -0
- package/src/pages/DashboardIdentifierPage.vue +45 -0
- package/src/pages/DashboardViewPage.vue +25 -0
- package/src/pages/crud/DashboardCrudPage.vue +19 -0
- package/src/routes/DashboardCrudRoute.ts +38 -0
- package/src/stores/UseDashboardStore.ts +25 -0
|
@@ -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
|
+
})
|