Skip to content

Commit 95a2c37

Browse files
fakouafakoua
committed
introducing dashboard
1 parent 550d25d commit 95a2c37

12 files changed

Lines changed: 7236 additions & 6826 deletions

‎q-manui/package-lock.json‎

Lines changed: 17 additions & 20 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎q-manui/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"dependencies": {
1616
"@quasar/extras": "^1.16.4",
1717
"axios": "^1.2.1",
18+
"lodash": "^4.17.21",
1819
"pinia": "^2.0.11",
1920
"pinia-plugin-persistedstate": "^3.2.1",
2021
"quasar": "^2.8.0",
@@ -23,6 +24,7 @@
2324
},
2425
"devDependencies": {
2526
"@quasar/app-vite": "^1.4.3",
27+
"@types/lodash": "^4.14.202",
2628
"@types/node": "^12.20.21",
2729
"@types/uuid": "^9.0.8",
2830
"@typescript-eslint/eslint-plugin": "^5.10.0",

‎q-manui/src/components/ServerComponent.vue‎

Lines changed: 57 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,57 @@
11
<template>
2-
<q-splitter v-model="splitterModel" class="full-width-vw">
3-
<template v-slot:before>
4-
<div class="q-a-xl no-margin no-padding">
5-
<service-details-component
6-
:service="selectedService"
7-
v-on:on-open-service="
2+
<div class="container fit row wrap justify-start items-start content-start">
3+
<div class="s-left">
4+
<q-tabs v-model="tab" vertical>
5+
<q-tab name="dashboard" icon="dashboard" />
6+
<q-tab name="services" icon="miscellaneous_services" />
7+
</q-tabs>
8+
</div>
9+
<div class="s-right col-grow">
10+
<q-tab-panels v-model="tab">
11+
<q-tab-panel name="dashboard">
12+
<dashboard-component />
13+
</q-tab-panel>
14+
<q-tab-panel name="services" style="padding: 0">
15+
<q-splitter
16+
v-model="splitterModel"
17+
class="full-width-vw"
18+
separator-style="border: 1px solid white;"
19+
>
20+
<template v-slot:before>
21+
<div class="q-a-xl no-margin no-padding">
22+
<service-details-component
23+
:service="selectedService"
24+
v-on:on-open-service="
825
(svr: ServiceType) => {
926
openService(svr);
1027
}
1128
"
12-
/>
13-
</div>
14-
</template>
29+
/>
30+
</div>
31+
</template>
1532

16-
<template v-slot:after>
17-
<div class="q-a-xl no-margin no-padding">
18-
<services-list-component
19-
v-on:on-select-service="
33+
<template v-slot:after>
34+
<div class="q-a-xl no-margin no-padding">
35+
<services-list-component
36+
v-on:on-select-service="
2037
(svr: ServiceType) => {
2138
selectedService = svr;
2239
}
2340
"
24-
v-on:on-open-service="
41+
v-on:on-open-service="
2542
(svr: ServiceType) => {
2643
openService(svr);
2744
}
2845
"
29-
/>
30-
</div>
31-
</template>
32-
</q-splitter>
46+
/>
47+
</div>
48+
</template>
49+
</q-splitter>
50+
</q-tab-panel>
51+
</q-tab-panels>
52+
</div>
53+
</div>
54+
3355
<dialog id="serviceWindow" ref="serviceWindow" class="shadow-24">
3456
<header>
3557
<div class="fit row wrap justify-between items-start content-start">
@@ -57,14 +79,25 @@
5779
</dialog>
5880
</template>
5981

60-
<style lang="css">
82+
<style lang="css" scoped>
83+
div.s-left {
84+
overflow: auto;
85+
min-width: 50px;
86+
max-width: 50px;
87+
}
88+
div.s-right {
89+
overflow: hidden;
90+
width: calc(100vw - 70px);
91+
height: calc(100vh - 100px);
92+
border-left: 1px solid rgba(0, 0, 0, 0.12);
93+
}
6194
.dialog-title {
6295
white-space: nowrap;
6396
overflow: hidden;
6497
max-width: 355px;
6598
}
6699
.full-width-vw {
67-
width: 100vw !important;
100+
/*width: 100vw !important;*/
68101
}
69102
.left {
70103
border-right: 1px solid rgb(230, 229, 229);
@@ -134,6 +167,8 @@ import { bus } from 'boot/bus';
134167
import ServicesListComponent from '../components/ServicesListComponent.vue';
135168
import ServiceDetailsComponent from '../components/ServiceDetailsComponent.vue';
136169
import ServiceWindowComponent from '../components/service-window/ServiceWindowComponent.vue';
170+
import DashboardComponent from '../components/dashboard/DashboardComponent.vue';
171+
137172
import { ServiceModel, ServiceType } from './models';
138173
139174
//import { ServiceModel, ServiceType } from './repo/models';
@@ -144,6 +179,7 @@ export default defineComponent({
144179
ServicesListComponent,
145180
ServiceDetailsComponent,
146181
ServiceWindowComponent,
182+
DashboardComponent,
147183
},
148184
methods: {
149185
openService(service: ServiceType) {
@@ -183,6 +219,7 @@ export default defineComponent({
183219
services: ref<Array<ServiceModel>>([]),
184220
isDialogOpen: isDialogOpen,
185221
serviceWindow,
222+
tab: ref('dashboard'),
186223
};
187224
},
188225
});

‎q-manui/src/components/ServiceDetailsComponent.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@
117117
}
118118
.container {
119119
padding: 16px;
120-
height: 90vh;
120+
height: 88vh;
121121
}
122122
.mb-12 {
123123
margin-bottom: 12px;

‎q-manui/src/components/ServicesListComponent.vue‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -146,11 +146,9 @@
146146
.grid-style-transition {
147147
transition: transform 0.28s, background-color 0.28s;
148148
}
149-
.grid-cell {
150-
}
151149
.my-sticky-header-table {
152-
height: 90vh;
153-
width: -webkit-fill-available;
150+
height: 88vh;
151+
width: calc(100vw - 354px);
154152
}
155153
.my-sticky-header-table .q-table__top,
156154
.my-sticky-header-table .q-table__bottom,

‎q-manui/src/components/dashboard/DCardComponent.vue‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<template>
2+
<q-card flat bordered v-if="$props.loading" class="col-grow q-ma-sm">
3+
<q-item>
4+
<q-item-section avatar>
5+
<q-avatar>
6+
<q-skeleton type="QAvatar" size="38px" />
7+
</q-avatar>
8+
</q-item-section>
9+
10+
<q-item-section>
11+
<q-item-label class="card-value">
12+
<q-skeleton type="text" />
13+
</q-item-label>
14+
<q-item-label class="card-caption">
15+
<q-skeleton type="text" />
16+
</q-item-label>
17+
</q-item-section>
18+
</q-item>
19+
</q-card>
20+
<q-card
21+
v-if="!$props.loading"
22+
flat
23+
bordered
24+
:class="`${$props.class} col-grow q-ma-sm`"
25+
style="height: 73px"
26+
>
27+
<q-item>
28+
<q-item-section avatar>
29+
<q-avatar>
30+
<q-icon :name="$props.icon" size="42px" />
31+
</q-avatar>
32+
</q-item-section>
33+
34+
<q-item-section>
35+
<q-item-label class="card-value">{{ $props.value }}</q-item-label>
36+
<q-item-label class="card-caption">{{ $props.caption }}</q-item-label>
37+
</q-item-section>
38+
</q-item>
39+
</q-card>
40+
</template>
41+
42+
<style lang="css" scoped>
43+
.card-value {
44+
font-size: 28px;
45+
}
46+
</style>
47+
48+
<script lang="ts">
49+
import { defineComponent } from 'vue';
50+
51+
export default defineComponent({
52+
name: 'DCardComponent',
53+
props: {
54+
icon: String,
55+
class: String,
56+
value: String,
57+
caption: String,
58+
loading: {
59+
type: Boolean,
60+
default: true,
61+
},
62+
},
63+
64+
setup() {
65+
return {};
66+
},
67+
});
68+
</script>

0 commit comments

Comments
 (0)