@7365admin1/layer-common 3.2.2-staging.112 → 3.2.2-staging.113
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/components/AccessCardAssignToUnitForm.vue +13 -21
- package/components/AccessCardReplaceForm.vue +27 -23
- package/components/AddEqupmentForm.vue +18 -22
- package/components/BuildingForm.vue +31 -26
- package/components/BulletinBoardForm.vue +18 -23
- package/components/CameraForm.vue +20 -21
- package/components/DocumentForm.vue +14 -21
- package/components/InvitationClientForm.vue +21 -19
- package/components/InvitationForm.vue +15 -21
- package/components/ServiceProviderFormCreate.vue +29 -20
- package/package.json +1 -1
|
@@ -1,11 +1,8 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<v-card width="100%">
|
|
3
|
-
<v-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
</v-row>
|
|
7
|
-
</v-toolbar>
|
|
8
|
-
<v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-0">
|
|
2
|
+
<v-card width="100%" class="screen-modal">
|
|
3
|
+
<v-card-title>Assign Access Card to Unit</v-card-title>
|
|
4
|
+
|
|
5
|
+
<v-card-text class="screen-modal__body pa-0">
|
|
9
6
|
<v-form v-model="validForm" :disabled="loading">
|
|
10
7
|
<v-row no-gutters class="px-6 pt-4 pb-2">
|
|
11
8
|
<!-- Building -->
|
|
@@ -147,10 +144,10 @@
|
|
|
147
144
|
/>
|
|
148
145
|
<div class="text-caption mt-1">
|
|
149
146
|
<template v-if="availableLoading">
|
|
150
|
-
<span class="
|
|
147
|
+
<span class="screen-hint">Loading available count...</span>
|
|
151
148
|
</template>
|
|
152
149
|
<template v-else-if="availableCount !== null">
|
|
153
|
-
<span :class="availableCount === 0 ? 'text-error' : '
|
|
150
|
+
<span :class="availableCount === 0 ? 'text-error' : 'screen-hint'">
|
|
154
151
|
Available: {{ availableCount }}
|
|
155
152
|
</span>
|
|
156
153
|
</template>
|
|
@@ -160,29 +157,24 @@
|
|
|
160
157
|
</v-form>
|
|
161
158
|
</v-card-text>
|
|
162
159
|
|
|
163
|
-
<v-
|
|
160
|
+
<v-card-actions class="screen-modal__footer">
|
|
164
161
|
<v-row no-gutters>
|
|
165
|
-
<v-col cols="6">
|
|
162
|
+
<v-col cols="6" class="pr-2">
|
|
166
163
|
<v-btn
|
|
167
|
-
tile
|
|
168
164
|
block
|
|
169
|
-
variant="
|
|
170
|
-
class="text-none"
|
|
171
|
-
size="48"
|
|
165
|
+
variant="outlined"
|
|
166
|
+
class="text-none screen-btn-ghost"
|
|
172
167
|
@click="cancel"
|
|
173
168
|
:disabled="loading"
|
|
174
169
|
>
|
|
175
170
|
Cancel
|
|
176
171
|
</v-btn>
|
|
177
172
|
</v-col>
|
|
178
|
-
<v-col cols="6">
|
|
173
|
+
<v-col cols="6" class="pl-2">
|
|
179
174
|
<v-btn
|
|
180
|
-
tile
|
|
181
175
|
block
|
|
182
176
|
variant="flat"
|
|
183
|
-
|
|
184
|
-
class="text-none"
|
|
185
|
-
size="48"
|
|
177
|
+
class="text-none screen-btn-primary"
|
|
186
178
|
:disabled="!validForm || loading || availableCount === 0 || (availableCount !== null && form.quantity > availableCount)"
|
|
187
179
|
:loading="loading"
|
|
188
180
|
@click="submit"
|
|
@@ -191,7 +183,7 @@
|
|
|
191
183
|
</v-btn>
|
|
192
184
|
</v-col>
|
|
193
185
|
</v-row>
|
|
194
|
-
</v-
|
|
186
|
+
</v-card-actions>
|
|
195
187
|
</v-card>
|
|
196
188
|
</template>
|
|
197
189
|
<script setup lang="ts">
|
|
@@ -1,21 +1,22 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<v-card width="100%">
|
|
3
|
-
<v-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
</v-row>
|
|
7
|
-
</v-toolbar>
|
|
8
|
-
<v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-0">
|
|
2
|
+
<v-card width="100%" class="screen-modal">
|
|
3
|
+
<v-card-title>Replace Access Card</v-card-title>
|
|
4
|
+
|
|
5
|
+
<v-card-text class="screen-modal__body pa-0">
|
|
9
6
|
<v-form v-model="validForm" :disabled="loading">
|
|
10
7
|
<v-row no-gutters class="px-6 pt-4 pb-6">
|
|
11
8
|
<!-- Card being replaced -->
|
|
12
9
|
<v-col cols="12" class="px-1 mb-4">
|
|
13
|
-
|
|
10
|
+
<!-- `text-grey` is a fixed Vuetify grey - the SAME grey on the dark
|
|
11
|
+
page, where it is the hardest thing on the card to read.
|
|
12
|
+
`.screen-hint` is the design's `--muted`, which follows the theme. -->
|
|
13
|
+
<div class="text-caption screen-hint mb-1 font-weight-bold">
|
|
14
14
|
Card being replaced
|
|
15
15
|
</div>
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
16
|
+
<!-- A card NUMBER, not a status word, so it takes the design's
|
|
17
|
+
dotless tag shape and is given its tone explicitly rather than
|
|
18
|
+
having one guessed from the text. -->
|
|
19
|
+
<StatusChip tone="warn" :dot="false" :label="card.cardNo" />
|
|
19
20
|
</v-col>
|
|
20
21
|
|
|
21
22
|
<!-- Replacement card -->
|
|
@@ -25,8 +26,12 @@
|
|
|
25
26
|
title="Replacement Card"
|
|
26
27
|
required
|
|
27
28
|
/>
|
|
29
|
+
<!-- Both inputs keep their `:rules`: Replace is gated on
|
|
30
|
+
`validForm`. `.filter-field` gives them the design's shape
|
|
31
|
+
without touching the validation. -->
|
|
28
32
|
<v-autocomplete
|
|
29
33
|
v-model="form.replacementCardId"
|
|
34
|
+
class="filter-field"
|
|
30
35
|
density="compact"
|
|
31
36
|
:items="replacementOptions"
|
|
32
37
|
hide-details="auto"
|
|
@@ -48,6 +53,7 @@
|
|
|
48
53
|
/>
|
|
49
54
|
<v-textarea
|
|
50
55
|
v-model="form.remarks"
|
|
56
|
+
class="filter-field"
|
|
51
57
|
density="compact"
|
|
52
58
|
hide-details="auto"
|
|
53
59
|
placeholder="Enter remarks..."
|
|
@@ -61,29 +67,27 @@
|
|
|
61
67
|
</v-form>
|
|
62
68
|
</v-card-text>
|
|
63
69
|
|
|
64
|
-
|
|
70
|
+
<!-- Was a second `v-toolbar` - a grey slab that stayed grey in dark theme,
|
|
71
|
+
with square (`tile`) 48px buttons and a hardcoded `color="black"`
|
|
72
|
+
primary. Same two buttons, same order, on the card's own surface. -->
|
|
73
|
+
<v-card-actions class="screen-modal__footer">
|
|
65
74
|
<v-row no-gutters>
|
|
66
|
-
<v-col cols="6">
|
|
75
|
+
<v-col cols="6" class="pr-2">
|
|
67
76
|
<v-btn
|
|
68
|
-
tile
|
|
69
77
|
block
|
|
70
|
-
variant="
|
|
71
|
-
class="text-none"
|
|
72
|
-
size="48"
|
|
78
|
+
variant="outlined"
|
|
79
|
+
class="text-none screen-btn-ghost"
|
|
73
80
|
@click="cancel"
|
|
74
81
|
:disabled="loading"
|
|
75
82
|
>
|
|
76
83
|
Cancel
|
|
77
84
|
</v-btn>
|
|
78
85
|
</v-col>
|
|
79
|
-
<v-col cols="6">
|
|
86
|
+
<v-col cols="6" class="pl-2">
|
|
80
87
|
<v-btn
|
|
81
|
-
tile
|
|
82
88
|
block
|
|
83
89
|
variant="flat"
|
|
84
|
-
|
|
85
|
-
class="text-none"
|
|
86
|
-
size="48"
|
|
90
|
+
class="text-none screen-btn-primary"
|
|
87
91
|
:disabled="!validForm || loading"
|
|
88
92
|
:loading="loading"
|
|
89
93
|
@click="submit"
|
|
@@ -92,7 +96,7 @@
|
|
|
92
96
|
</v-btn>
|
|
93
97
|
</v-col>
|
|
94
98
|
</v-row>
|
|
95
|
-
</v-
|
|
99
|
+
</v-card-actions>
|
|
96
100
|
</v-card>
|
|
97
101
|
</template>
|
|
98
102
|
<script setup lang="ts">
|
|
@@ -1,15 +1,11 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<v-dialog v-model="showDialog" max-width="450">
|
|
3
|
-
<v-card>
|
|
4
|
-
<v-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
{{ prop.mode === "edit" ? "Edit Equipment" : "Add New Equipment" }}
|
|
8
|
-
</span>
|
|
9
|
-
</v-row>
|
|
10
|
-
</v-toolbar>
|
|
3
|
+
<v-card class="screen-modal">
|
|
4
|
+
<v-card-title class="text-capitalize">
|
|
5
|
+
{{ prop.mode === "edit" ? "Edit Equipment" : "Add New Equipment" }}
|
|
6
|
+
</v-card-title>
|
|
11
7
|
|
|
12
|
-
<v-card-text class="pa-4">
|
|
8
|
+
<v-card-text class="screen-modal__body pa-4">
|
|
13
9
|
<v-form ref="formRef" v-model="valid">
|
|
14
10
|
<v-row no-gutters class="pa-0">
|
|
15
11
|
<v-col cols="12" class="pa-0 mb-2">
|
|
@@ -39,7 +35,7 @@
|
|
|
39
35
|
variant="outlined"
|
|
40
36
|
placeholder="Enter equipment name"
|
|
41
37
|
hide-details="auto"
|
|
42
|
-
class="mb-0"
|
|
38
|
+
class="mb-0 filter-field"
|
|
43
39
|
/>
|
|
44
40
|
</v-col>
|
|
45
41
|
|
|
@@ -58,35 +54,35 @@
|
|
|
58
54
|
variant="outlined"
|
|
59
55
|
placeholder="Select unitOfMeasurement"
|
|
60
56
|
hide-details="auto"
|
|
61
|
-
class="mb-0"
|
|
57
|
+
class="mb-0 filter-field"
|
|
62
58
|
/>
|
|
63
59
|
</v-col>
|
|
64
60
|
</v-row>
|
|
65
61
|
</v-form>
|
|
66
62
|
</v-card-text>
|
|
67
63
|
|
|
68
|
-
|
|
64
|
+
<!-- Was a `v-toolbar` footer: a grey slab holding a bare-text Cancel and
|
|
65
|
+
a `rounded-0`, `color="black"` primary - a square black button that
|
|
66
|
+
ignored the theme. Same two buttons on the card's own surface, with
|
|
67
|
+
the design's radius and accent fill. -->
|
|
68
|
+
<v-card-actions class="screen-modal__footer">
|
|
69
69
|
<v-row no-gutters>
|
|
70
|
-
<v-col cols="6" class="
|
|
70
|
+
<v-col cols="6" class="pr-2">
|
|
71
71
|
<v-btn
|
|
72
72
|
block
|
|
73
|
-
variant="
|
|
74
|
-
class="text-none"
|
|
75
|
-
size="large"
|
|
73
|
+
variant="outlined"
|
|
74
|
+
class="text-none screen-btn-ghost"
|
|
76
75
|
@click="close"
|
|
77
|
-
height="48"
|
|
78
76
|
>
|
|
79
77
|
Cancel
|
|
80
78
|
</v-btn>
|
|
81
79
|
</v-col>
|
|
82
80
|
|
|
83
|
-
<v-col cols="6" class="
|
|
81
|
+
<v-col cols="6" class="pl-2">
|
|
84
82
|
<v-btn
|
|
85
83
|
block
|
|
86
84
|
variant="flat"
|
|
87
|
-
|
|
88
|
-
class="text-none font-weight-bold rounded-0"
|
|
89
|
-
height="48"
|
|
85
|
+
class="text-none screen-btn-primary"
|
|
90
86
|
:loading="submitting"
|
|
91
87
|
@click="submit"
|
|
92
88
|
>
|
|
@@ -94,7 +90,7 @@
|
|
|
94
90
|
</v-btn>
|
|
95
91
|
</v-col>
|
|
96
92
|
</v-row>
|
|
97
|
-
</v-
|
|
93
|
+
</v-card-actions>
|
|
98
94
|
</v-card>
|
|
99
95
|
</v-dialog>
|
|
100
96
|
</template>
|
|
@@ -1,20 +1,17 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<v-card width="100%">
|
|
3
|
-
<v-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
</v-row>
|
|
9
|
-
</v-toolbar>
|
|
10
|
-
<v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-0">
|
|
2
|
+
<v-card width="100%" class="screen-modal">
|
|
3
|
+
<v-card-title class="text-capitalize">
|
|
4
|
+
{{ prop.mode }} Block {{ (prop.mode === "edit" && building.block) ? `- ${building.block}` : "" }}
|
|
5
|
+
</v-card-title>
|
|
6
|
+
|
|
7
|
+
<v-card-text class="screen-modal__body pa-0">
|
|
11
8
|
<v-form v-model="validForm" :disabled="disable">
|
|
12
9
|
<v-row no-gutters class="px-6 pt-4">
|
|
13
10
|
<v-col cols="12" class="mt-2">
|
|
14
11
|
<v-row no-gutters>
|
|
15
12
|
<InputLabel class="text-capitalize font-weight-bold" title="Block Name" required />
|
|
16
13
|
<v-col cols="12">
|
|
17
|
-
<v-text-field v-model="building.name" density="comfortable" :rules="[requiredRule]"></v-text-field>
|
|
14
|
+
<v-text-field v-model="building.name" class="filter-field" density="comfortable" :rules="[requiredRule]"></v-text-field>
|
|
18
15
|
</v-col>
|
|
19
16
|
</v-row>
|
|
20
17
|
</v-col>
|
|
@@ -26,7 +23,7 @@
|
|
|
26
23
|
<InputLabel class="text-capitalize font-weight-bold" title="Block No." required />
|
|
27
24
|
<v-col cols="12">
|
|
28
25
|
<v-select v-model.number="building.block" :items="blocks" item-title="label" item-value="value"
|
|
29
|
-
density="comfortable" :rules="[
|
|
26
|
+
class="filter-field" density="comfortable" :rules="[
|
|
30
27
|
requiredRule,
|
|
31
28
|
() =>
|
|
32
29
|
(building.block && building.block > 0) ||
|
|
@@ -45,7 +42,7 @@
|
|
|
45
42
|
<v-row no-gutters>
|
|
46
43
|
<InputLabel class="text-capitalize font-weight-bold" title="No. of Levels" required />
|
|
47
44
|
<v-col cols="12">
|
|
48
|
-
<v-text-field v-model.number="buildingLevels" density="comfortable" :rules="[requiredRule]"
|
|
45
|
+
<v-text-field v-model.number="buildingLevels" class="filter-field" density="comfortable" :rules="[requiredRule]"
|
|
49
46
|
type="number" @update:model-value="setBuildingLevels()"></v-text-field>
|
|
50
47
|
</v-col>
|
|
51
48
|
</v-row>
|
|
@@ -73,7 +70,7 @@
|
|
|
73
70
|
<v-col cols="12">
|
|
74
71
|
<v-row no-gutters>
|
|
75
72
|
<v-col :cols="prop.mode === 'edit' ? 10 : 12">
|
|
76
|
-
<v-text-field v-model.trim="building.levels[levelIndex].name" density="comfortable"></v-text-field>
|
|
73
|
+
<v-text-field v-model.trim="building.levels[levelIndex].name" class="filter-field" density="comfortable"></v-text-field>
|
|
77
74
|
</v-col>
|
|
78
75
|
<v-col v-if="prop.mode === 'edit'" cols="2" class="d-flex align-center pb-5 justify-end">
|
|
79
76
|
<v-btn icon variant="text" color="error" :disabled="disable"
|
|
@@ -92,7 +89,7 @@
|
|
|
92
89
|
<v-row no-gutters class="px-6 w-100">
|
|
93
90
|
<v-row no-gutters v-for="(newLevelsItem, index) in newLevelsArray" :key="index" :cols="12" class="w-100">
|
|
94
91
|
<v-col :cols="prop.mode === 'edit' ? 10 : 12">
|
|
95
|
-
<v-text-field v-model.trim="newLevelsArray[index]" density="comfortable"></v-text-field>
|
|
92
|
+
<v-text-field v-model.trim="newLevelsArray[index]" class="filter-field" density="comfortable"></v-text-field>
|
|
96
93
|
</v-col>
|
|
97
94
|
<v-col v-if="prop.mode === 'edit'" cols="2" class="d-flex align-center pb-5 justify-end">
|
|
98
95
|
<v-btn icon variant="text" color="error" @click="newLevelsArray.splice(index, 1)">
|
|
@@ -104,7 +101,7 @@
|
|
|
104
101
|
|
|
105
102
|
<v-row v-if="prop.mode === 'edit'" no-gutters class="px-6 w-100">
|
|
106
103
|
<v-col cols="10">
|
|
107
|
-
<v-text-field v-model.trim="activeNewLevelInput"
|
|
104
|
+
<v-text-field v-model.trim="activeNewLevelInput" class="filter-field w-100" density="comfortable"
|
|
108
105
|
placeholder="Add new level" @click="addNewLevelErrorMessage = ''"></v-text-field>
|
|
109
106
|
</v-col>
|
|
110
107
|
<v-col cols="2" class="d-flex align-center pb-5 justify-end">
|
|
@@ -150,22 +147,22 @@
|
|
|
150
147
|
</v-form>
|
|
151
148
|
</v-card-text>
|
|
152
149
|
|
|
153
|
-
<v-
|
|
150
|
+
<v-card-actions class="screen-modal__footer">
|
|
154
151
|
<v-row no-gutters>
|
|
155
|
-
<v-col cols="6">
|
|
156
|
-
<v-btn
|
|
152
|
+
<v-col cols="6" class="pr-2">
|
|
153
|
+
<v-btn block variant="outlined" class="text-none screen-btn-ghost" @click="cancel" :disabled="disable">
|
|
157
154
|
Cancel
|
|
158
155
|
</v-btn>
|
|
159
156
|
</v-col>
|
|
160
157
|
|
|
161
|
-
<v-col cols="6">
|
|
162
|
-
<v-btn
|
|
158
|
+
<v-col cols="6" class="pl-2">
|
|
159
|
+
<v-btn block variant="flat" class="text-none screen-btn-primary" :disabled="!validForm || disable"
|
|
163
160
|
@click="submit" :loading="disable">
|
|
164
161
|
Submit
|
|
165
162
|
</v-btn>
|
|
166
163
|
</v-col>
|
|
167
164
|
</v-row>
|
|
168
|
-
</v-
|
|
165
|
+
</v-card-actions>
|
|
169
166
|
|
|
170
167
|
<ConfirmDialog v-model="confirmDeleteLevelDialog" :loading="loading.deletingLevel" width="450" persistent>
|
|
171
168
|
<template #title>
|
|
@@ -178,16 +175,24 @@
|
|
|
178
175
|
|
|
179
176
|
<template #footer>
|
|
180
177
|
<v-row no-gutters class="w-100">
|
|
181
|
-
<v-col cols="6">
|
|
182
|
-
<v-btn
|
|
178
|
+
<v-col cols="6" class="pr-2">
|
|
179
|
+
<v-btn block variant="outlined" class="text-none screen-btn-ghost" :disabled="loading.deletingLevel"
|
|
183
180
|
@click="closeDeleteLevelPrompt">
|
|
184
181
|
Cancel
|
|
185
182
|
</v-btn>
|
|
186
183
|
</v-col>
|
|
187
184
|
|
|
188
|
-
<v-col cols="6">
|
|
189
|
-
|
|
190
|
-
|
|
185
|
+
<v-col cols="6" class="pl-2">
|
|
186
|
+
<!-- Left on Vuetify's own error fill, deliberately. It must NOT
|
|
187
|
+
take `.screen-btn-primary` - that class sets `background` and
|
|
188
|
+
would repaint a delete button accent blue. And the handoff
|
|
189
|
+
draws no modal, so it specifies no destructive button: making
|
|
190
|
+
one out of `--err` puts white on a token that LIGHTENS in dark
|
|
191
|
+
theme, which measured 2.99:1 - the same fill-used-as-ink trap
|
|
192
|
+
as the Upload button. So this keeps today's appearance and only
|
|
193
|
+
loses the 40px height. A destructive button needs a spec. -->
|
|
194
|
+
<v-btn block variant="flat" color="error" class="text-none"
|
|
195
|
+
:loading="loading.deletingLevel" :disabled="loading.deletingLevel" @click="confirmDeleteLevel">
|
|
191
196
|
Delete
|
|
192
197
|
</v-btn>
|
|
193
198
|
</v-col>
|
|
@@ -1,18 +1,14 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<v-card
|
|
3
|
+
class="screen-modal"
|
|
3
4
|
width="100%"
|
|
4
5
|
:loading="loading.processing"
|
|
5
6
|
:disabled="loading.processing || getAnnouncementByIdPending"
|
|
6
7
|
:key="`form-key-${formKey}`"
|
|
7
8
|
>
|
|
8
|
-
<v-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
{{ prop.mode }} Announcement
|
|
12
|
-
</span>
|
|
13
|
-
</v-row>
|
|
14
|
-
</v-toolbar>
|
|
15
|
-
<v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-6">
|
|
9
|
+
<v-card-title class="text-capitalize">{{ prop.mode }} Announcement</v-card-title>
|
|
10
|
+
|
|
11
|
+
<v-card-text class="screen-modal__body pa-6">
|
|
16
12
|
<v-form
|
|
17
13
|
ref="formRef"
|
|
18
14
|
v-model="validForm"
|
|
@@ -61,7 +57,7 @@
|
|
|
61
57
|
density="compact"
|
|
62
58
|
color="transparent"
|
|
63
59
|
flat
|
|
64
|
-
class="ml-3
|
|
60
|
+
class="ml-3"
|
|
65
61
|
@mousedown.stop
|
|
66
62
|
@click.stop="handleRemoveRecipient(item)"
|
|
67
63
|
/>
|
|
@@ -112,10 +108,14 @@
|
|
|
112
108
|
>Attachments</v-col
|
|
113
109
|
>
|
|
114
110
|
<v-col cols="12">
|
|
111
|
+
<!-- Was `color="primary-button"` on an OUTLINED button, i.e. a
|
|
112
|
+
FILL token used as ink - the exact case `utils/theme.ts`
|
|
113
|
+
warns about. Measured 3.64:1 on the dark card, under AA. It
|
|
114
|
+
is a secondary action, so it takes the design's ghost
|
|
115
|
+
button, whose `--text2` ink is readable in both themes. -->
|
|
115
116
|
<v-btn
|
|
116
117
|
text="Upload"
|
|
117
|
-
class="text-capitalize"
|
|
118
|
-
color="primary-button"
|
|
118
|
+
class="text-capitalize screen-btn-ghost"
|
|
119
119
|
variant="outlined"
|
|
120
120
|
min-width="150"
|
|
121
121
|
@click="handleUpload"
|
|
@@ -161,34 +161,29 @@
|
|
|
161
161
|
{{ errorMessage }}
|
|
162
162
|
</p>
|
|
163
163
|
</v-row>
|
|
164
|
-
<v-
|
|
164
|
+
<v-card-actions class="screen-modal__footer">
|
|
165
165
|
<v-row no-gutters>
|
|
166
|
-
<v-col cols="6">
|
|
166
|
+
<v-col cols="6" class="pr-2">
|
|
167
167
|
<v-btn
|
|
168
|
-
tile
|
|
169
168
|
block
|
|
170
|
-
variant="
|
|
171
|
-
class="text-none"
|
|
172
|
-
size="48"
|
|
169
|
+
variant="outlined"
|
|
170
|
+
class="text-none screen-btn-ghost"
|
|
173
171
|
@click="close"
|
|
174
172
|
text="Close"
|
|
175
173
|
/>
|
|
176
174
|
</v-col>
|
|
177
|
-
<v-col cols="6">
|
|
175
|
+
<v-col cols="6" class="pl-2">
|
|
178
176
|
<v-btn
|
|
179
|
-
tile
|
|
180
177
|
block
|
|
181
178
|
variant="flat"
|
|
182
|
-
|
|
183
|
-
class="text-none"
|
|
184
|
-
size="48"
|
|
179
|
+
class="text-none screen-btn-primary"
|
|
185
180
|
:text="prop.mode === 'add' ? 'Add Bulletin' : 'Save'"
|
|
186
181
|
:disabled="loading.processing || !validForm"
|
|
187
182
|
@click="onSubmit"
|
|
188
183
|
/>
|
|
189
184
|
</v-col>
|
|
190
185
|
</v-row>
|
|
191
|
-
</v-
|
|
186
|
+
</v-card-actions>
|
|
192
187
|
</v-card>
|
|
193
188
|
</template>
|
|
194
189
|
|
|
@@ -1,20 +1,15 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<v-card width="100%">
|
|
3
|
-
<v-
|
|
4
|
-
<v-row no-gutters class="fill-height px-6" align="center">
|
|
5
|
-
<span class="font-weight-bold text-h5 text-capitalize">
|
|
6
|
-
{{ title }}
|
|
7
|
-
</span>
|
|
8
|
-
</v-row>
|
|
9
|
-
</v-toolbar>
|
|
2
|
+
<v-card width="100%" class="screen-modal">
|
|
3
|
+
<v-card-title class="text-capitalize">{{ title }}</v-card-title>
|
|
10
4
|
|
|
11
|
-
<v-card-text
|
|
5
|
+
<v-card-text class="screen-modal__body pa-5">
|
|
12
6
|
<v-form ref="formRef" v-model="validForm" :disabled="disable">
|
|
13
7
|
<v-row no-gutters class="pt-4">
|
|
14
8
|
<v-col v-if="isCCTV" cols="12">
|
|
15
9
|
<InputLabel class="text-capitalize" title="Camera Name" required />
|
|
16
10
|
<v-text-field
|
|
17
11
|
v-model.trim="camera.name"
|
|
12
|
+
class="filter-field"
|
|
18
13
|
density="comfortable"
|
|
19
14
|
:rules="[requiredRule]"
|
|
20
15
|
placeholder="Enter CCTV camera name"
|
|
@@ -24,6 +19,7 @@
|
|
|
24
19
|
<InputLabel class="text-capitalize" title="URL" required />
|
|
25
20
|
<v-text-field
|
|
26
21
|
v-model.trim="camera.host"
|
|
22
|
+
class="filter-field"
|
|
27
23
|
density="comfortable"
|
|
28
24
|
:rules="[requiredRule, hostRule]"
|
|
29
25
|
placeholder="Enter camera URL"
|
|
@@ -35,6 +31,7 @@
|
|
|
35
31
|
<v-select
|
|
36
32
|
v-model="camera.category"
|
|
37
33
|
:items="anprCategoryOptions"
|
|
34
|
+
class="filter-field"
|
|
38
35
|
density="comfortable"
|
|
39
36
|
:rules="[requiredRule]"
|
|
40
37
|
/>
|
|
@@ -45,6 +42,7 @@
|
|
|
45
42
|
<v-select
|
|
46
43
|
v-model="camera.direction"
|
|
47
44
|
:items="anprDirectionOptions"
|
|
45
|
+
class="filter-field"
|
|
48
46
|
density="comfortable"
|
|
49
47
|
:rules="[requiredRule]"
|
|
50
48
|
/>
|
|
@@ -55,6 +53,7 @@
|
|
|
55
53
|
<v-select
|
|
56
54
|
v-model="camera.guardPost"
|
|
57
55
|
:items="guardPostOptions"
|
|
56
|
+
class="filter-field"
|
|
58
57
|
density="comfortable"
|
|
59
58
|
/>
|
|
60
59
|
</v-col> -->
|
|
@@ -63,6 +62,7 @@
|
|
|
63
62
|
<InputLabel class="text-capitalize" title="User" required />
|
|
64
63
|
<v-text-field
|
|
65
64
|
v-model.trim="camera.username"
|
|
65
|
+
class="filter-field"
|
|
66
66
|
density="comfortable"
|
|
67
67
|
:rules="[requiredRule]"
|
|
68
68
|
placeholder="Enter username"
|
|
@@ -74,6 +74,7 @@
|
|
|
74
74
|
<v-text-field
|
|
75
75
|
v-model.trim="camera.password"
|
|
76
76
|
type="password"
|
|
77
|
+
class="filter-field"
|
|
77
78
|
density="comfortable"
|
|
78
79
|
:rules="[requiredRule]"
|
|
79
80
|
placeholder="Enter password"
|
|
@@ -86,6 +87,7 @@
|
|
|
86
87
|
v-model="camera.status"
|
|
87
88
|
hide-details
|
|
88
89
|
inset
|
|
90
|
+
class="filter-field"
|
|
89
91
|
density="comfortable"
|
|
90
92
|
true-value="active"
|
|
91
93
|
false-value="inactive"
|
|
@@ -97,27 +99,24 @@
|
|
|
97
99
|
</v-form>
|
|
98
100
|
</v-card-text>
|
|
99
101
|
|
|
100
|
-
|
|
102
|
+
<!-- Was a `v-toolbar`: a grey slab with square (`tile`) buttons and a
|
|
103
|
+
hardcoded `color="black"` primary. The gate on Submit is unchanged. -->
|
|
104
|
+
<v-card-actions class="screen-modal__footer">
|
|
101
105
|
<v-row no-gutters>
|
|
102
|
-
<v-col cols="6">
|
|
106
|
+
<v-col cols="6" class="pr-2">
|
|
103
107
|
<v-btn
|
|
104
|
-
tile
|
|
105
108
|
block
|
|
106
|
-
variant="
|
|
107
|
-
class="text-none"
|
|
108
|
-
size="48"
|
|
109
|
+
variant="outlined"
|
|
110
|
+
class="text-none screen-btn-ghost"
|
|
109
111
|
@click="back"
|
|
110
112
|
text="Cancel"
|
|
111
113
|
/>
|
|
112
114
|
</v-col>
|
|
113
|
-
<v-col cols="6">
|
|
115
|
+
<v-col cols="6" class="pl-2">
|
|
114
116
|
<v-btn
|
|
115
|
-
tile
|
|
116
117
|
block
|
|
117
118
|
variant="flat"
|
|
118
|
-
|
|
119
|
-
class="text-none"
|
|
120
|
-
size="48"
|
|
119
|
+
class="text-none screen-btn-primary"
|
|
121
120
|
:disabled="!validForm || disable || !hasChanges"
|
|
122
121
|
@click="submit"
|
|
123
122
|
:loading="disable"
|
|
@@ -125,7 +124,7 @@
|
|
|
125
124
|
/>
|
|
126
125
|
</v-col>
|
|
127
126
|
</v-row>
|
|
128
|
-
</v-
|
|
127
|
+
</v-card-actions>
|
|
129
128
|
</v-card>
|
|
130
129
|
</template>
|
|
131
130
|
|
|
@@ -1,13 +1,8 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<v-card width="100%">
|
|
3
|
-
<v-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
{{ prop.mode }} Document
|
|
7
|
-
</span>
|
|
8
|
-
</v-row>
|
|
9
|
-
</v-toolbar>
|
|
10
|
-
<v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-0">
|
|
2
|
+
<v-card width="100%" class="screen-modal">
|
|
3
|
+
<v-card-title class="text-capitalize">{{ prop.mode }} Document</v-card-title>
|
|
4
|
+
|
|
5
|
+
<v-card-text class="screen-modal__body pa-0">
|
|
11
6
|
<v-form v-model="validForm" :disabled="disable">
|
|
12
7
|
<v-col cols="12" class="px-6">
|
|
13
8
|
<InputLabel class="text-capitalize" title="Document Attachment" />
|
|
@@ -24,6 +19,7 @@
|
|
|
24
19
|
<InputLabel class="text-capitalize" title="Document Name" />
|
|
25
20
|
<v-text-field
|
|
26
21
|
v-model.trim="document.name"
|
|
22
|
+
class="filter-field"
|
|
27
23
|
density="comfortable"
|
|
28
24
|
></v-text-field>
|
|
29
25
|
</v-col>
|
|
@@ -42,15 +38,15 @@
|
|
|
42
38
|
</v-form>
|
|
43
39
|
</v-card-text>
|
|
44
40
|
|
|
45
|
-
|
|
41
|
+
<!-- Was a `v-toolbar`: a grey slab with square (`tile`) buttons and a
|
|
42
|
+
hardcoded `color="black"` primary. The gate on Submit is unchanged. -->
|
|
43
|
+
<v-card-actions class="screen-modal__footer">
|
|
46
44
|
<v-row no-gutters>
|
|
47
|
-
<v-col cols="6">
|
|
45
|
+
<v-col cols="6" class="pr-2">
|
|
48
46
|
<v-btn
|
|
49
|
-
tile
|
|
50
47
|
block
|
|
51
|
-
variant="
|
|
52
|
-
class="text-none"
|
|
53
|
-
size="48"
|
|
48
|
+
variant="outlined"
|
|
49
|
+
class="text-none screen-btn-ghost"
|
|
54
50
|
@click="cancel"
|
|
55
51
|
:disabled="disable"
|
|
56
52
|
>
|
|
@@ -58,14 +54,11 @@
|
|
|
58
54
|
</v-btn>
|
|
59
55
|
</v-col>
|
|
60
56
|
|
|
61
|
-
<v-col cols="6">
|
|
57
|
+
<v-col cols="6" class="pl-2">
|
|
62
58
|
<v-btn
|
|
63
|
-
tile
|
|
64
59
|
block
|
|
65
60
|
variant="flat"
|
|
66
|
-
|
|
67
|
-
class="text-none"
|
|
68
|
-
size="48"
|
|
61
|
+
class="text-none screen-btn-primary"
|
|
69
62
|
:disabled="
|
|
70
63
|
!validForm ||
|
|
71
64
|
disable ||
|
|
@@ -79,7 +72,7 @@
|
|
|
79
72
|
</v-btn>
|
|
80
73
|
</v-col>
|
|
81
74
|
</v-row>
|
|
82
|
-
</v-
|
|
75
|
+
</v-card-actions>
|
|
83
76
|
</v-card>
|
|
84
77
|
</template>
|
|
85
78
|
<script setup lang="ts">
|
|
@@ -1,14 +1,8 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<v-card width="100%">
|
|
3
|
-
<v-
|
|
4
|
-
<v-row no-gutters class="fill-height px-6" align="center">
|
|
5
|
-
<span class="font-weight-bold text-h5">
|
|
6
|
-
{{ props.title }}
|
|
7
|
-
</span>
|
|
8
|
-
</v-row>
|
|
9
|
-
</v-toolbar>
|
|
2
|
+
<v-card width="100%" class="screen-modal">
|
|
3
|
+
<v-card-title>{{ props.title }}</v-card-title>
|
|
10
4
|
|
|
11
|
-
<v-card-text
|
|
5
|
+
<v-card-text class="screen-modal__body">
|
|
12
6
|
<v-form v-model="validForm" ref="form" :disabled="disable">
|
|
13
7
|
<v-row no-gutters>
|
|
14
8
|
|
|
@@ -17,6 +11,7 @@
|
|
|
17
11
|
<InputLabel title="Email" required />
|
|
18
12
|
<v-text-field
|
|
19
13
|
v-model="invite.email"
|
|
14
|
+
class="filter-field"
|
|
20
15
|
density="comfortable"
|
|
21
16
|
:rules="[requiredRule, emailRule]"
|
|
22
17
|
:loading="loading.verifyingEmail"
|
|
@@ -37,6 +32,7 @@
|
|
|
37
32
|
multiple
|
|
38
33
|
chips
|
|
39
34
|
closable-chips
|
|
35
|
+
class="filter-field"
|
|
40
36
|
density="comfortable"
|
|
41
37
|
:rules="[requiredRule]"
|
|
42
38
|
@update:model-value="handleUpdateApp"
|
|
@@ -50,8 +46,9 @@
|
|
|
50
46
|
<v-checkbox-btn
|
|
51
47
|
:model-value="invite.app.includes(item.raw.value)"
|
|
52
48
|
:disabled="item.raw.disabled"
|
|
53
|
-
color="
|
|
54
|
-
|
|
49
|
+
color="primary"
|
|
50
|
+
class="filter-field"
|
|
51
|
+
density="comfortable"
|
|
55
52
|
/>
|
|
56
53
|
</template>
|
|
57
54
|
|
|
@@ -79,6 +76,7 @@
|
|
|
79
76
|
:items="roles"
|
|
80
77
|
item-title="name"
|
|
81
78
|
item-value="_id"
|
|
79
|
+
class="filter-field"
|
|
82
80
|
density="comfortable"
|
|
83
81
|
:rules="[requiredRule]"
|
|
84
82
|
/>
|
|
@@ -90,6 +88,7 @@
|
|
|
90
88
|
<v-autocomplete
|
|
91
89
|
v-model="invite.site"
|
|
92
90
|
:items="sites"
|
|
91
|
+
class="filter-field"
|
|
93
92
|
density="comfortable"
|
|
94
93
|
:rules="[requiredRule]"
|
|
95
94
|
@update:model-value="handleUpdateSite"
|
|
@@ -109,21 +108,24 @@
|
|
|
109
108
|
</v-card-text>
|
|
110
109
|
|
|
111
110
|
<!-- ACTION -->
|
|
112
|
-
<v-
|
|
111
|
+
<v-card-actions class="screen-modal__footer">
|
|
113
112
|
<v-row no-gutters>
|
|
114
|
-
<v-col cols="6">
|
|
115
|
-
<v-btn
|
|
113
|
+
<v-col cols="6" class="pr-2">
|
|
114
|
+
<v-btn
|
|
115
|
+
block
|
|
116
|
+
variant="outlined"
|
|
117
|
+
class="text-none screen-btn-ghost"
|
|
118
|
+
@click="cancel"
|
|
119
|
+
>
|
|
116
120
|
Cancel
|
|
117
121
|
</v-btn>
|
|
118
122
|
</v-col>
|
|
119
123
|
|
|
120
|
-
<v-col cols="6">
|
|
124
|
+
<v-col cols="6" class="pl-2">
|
|
121
125
|
<v-btn
|
|
122
126
|
block
|
|
123
127
|
variant="flat"
|
|
124
|
-
|
|
125
|
-
class="text-none"
|
|
126
|
-
size="48"
|
|
128
|
+
class="text-none screen-btn-primary"
|
|
127
129
|
:disabled="!validForm"
|
|
128
130
|
:loading="loading.submittingForm"
|
|
129
131
|
@click="submit"
|
|
@@ -132,7 +134,7 @@
|
|
|
132
134
|
</v-btn>
|
|
133
135
|
</v-col>
|
|
134
136
|
</v-row>
|
|
135
|
-
</v-
|
|
137
|
+
</v-card-actions>
|
|
136
138
|
</v-card>
|
|
137
139
|
</template>
|
|
138
140
|
|
|
@@ -1,13 +1,8 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<v-card width="100%">
|
|
3
|
-
<v-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
{{ props.title }}
|
|
7
|
-
</span>
|
|
8
|
-
</v-row>
|
|
9
|
-
</v-toolbar>
|
|
10
|
-
<v-card-text style="max-height: 100vh; overflow-y: auto">
|
|
2
|
+
<v-card width="100%" class="screen-modal">
|
|
3
|
+
<v-card-title>{{ props.title }}</v-card-title>
|
|
4
|
+
|
|
5
|
+
<v-card-text class="screen-modal__body">
|
|
11
6
|
<v-form v-model="validForm" ref="form" :disabled="disable">
|
|
12
7
|
<v-row no-gutters>
|
|
13
8
|
<v-col cols="12" class="mt-2">
|
|
@@ -16,6 +11,7 @@
|
|
|
16
11
|
<v-col cols="12">
|
|
17
12
|
<v-text-field
|
|
18
13
|
v-model="invite.email"
|
|
14
|
+
class="filter-field"
|
|
19
15
|
density="comfortable"
|
|
20
16
|
:rules="[requiredRule, emailRule]"
|
|
21
17
|
:loading="loading.verifyingEmail"
|
|
@@ -34,6 +30,7 @@
|
|
|
34
30
|
<v-col cols="12">
|
|
35
31
|
<v-autocomplete
|
|
36
32
|
v-model="invite.app"
|
|
33
|
+
class="filter-field"
|
|
37
34
|
density="comfortable"
|
|
38
35
|
:rules="[requiredRule]"
|
|
39
36
|
:items="apps"
|
|
@@ -53,6 +50,7 @@
|
|
|
53
50
|
item-title="name"
|
|
54
51
|
item-value="_id"
|
|
55
52
|
:rules="[requiredRule]"
|
|
53
|
+
class="filter-field"
|
|
56
54
|
density="comfortable"
|
|
57
55
|
></v-autocomplete>
|
|
58
56
|
</v-col>
|
|
@@ -66,6 +64,7 @@
|
|
|
66
64
|
<v-autocomplete
|
|
67
65
|
v-model="invite.site"
|
|
68
66
|
:items="sites"
|
|
67
|
+
class="filter-field"
|
|
69
68
|
density="comfortable"
|
|
70
69
|
:rules="[requiredRule]"
|
|
71
70
|
@update:model-value="handleUpdateSite"
|
|
@@ -99,29 +98,24 @@
|
|
|
99
98
|
</v-form>
|
|
100
99
|
</v-card-text>
|
|
101
100
|
|
|
102
|
-
<v-
|
|
101
|
+
<v-card-actions class="screen-modal__footer">
|
|
103
102
|
<v-row no-gutters>
|
|
104
|
-
<v-col cols="6">
|
|
103
|
+
<v-col cols="6" class="pr-2">
|
|
105
104
|
<v-btn
|
|
106
|
-
tile
|
|
107
105
|
block
|
|
108
|
-
variant="
|
|
109
|
-
class="text-none"
|
|
110
|
-
size="48"
|
|
106
|
+
variant="outlined"
|
|
107
|
+
class="text-none screen-btn-ghost"
|
|
111
108
|
@click="cancel"
|
|
112
109
|
>
|
|
113
110
|
{{ props.cancelText }}
|
|
114
111
|
</v-btn>
|
|
115
112
|
</v-col>
|
|
116
113
|
|
|
117
|
-
<v-col cols="6">
|
|
114
|
+
<v-col cols="6" class="pl-2">
|
|
118
115
|
<v-btn
|
|
119
|
-
tile
|
|
120
116
|
block
|
|
121
117
|
variant="flat"
|
|
122
|
-
|
|
123
|
-
class="text-none"
|
|
124
|
-
size="48"
|
|
118
|
+
class="text-none screen-btn-primary"
|
|
125
119
|
:disabled="!validForm"
|
|
126
120
|
:loading="loading.submittingForm"
|
|
127
121
|
@click="submit"
|
|
@@ -130,7 +124,7 @@
|
|
|
130
124
|
</v-btn>
|
|
131
125
|
</v-col>
|
|
132
126
|
</v-row>
|
|
133
|
-
</v-
|
|
127
|
+
</v-card-actions>
|
|
134
128
|
</v-card>
|
|
135
129
|
</template>
|
|
136
130
|
|
|
@@ -1,21 +1,29 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
<v-card-
|
|
2
|
+
<!--
|
|
3
|
+
A dialog card, so it wears `.screen-modal` (16px corner, the modal shadow,
|
|
4
|
+
the `--card` surface) rather than Vuetify's 4px factory card. The two
|
|
5
|
+
`v-toolbar`s this used to have were grey slabs standing in for a title row
|
|
6
|
+
and a footer; a `v-card-title` and a `v-card-actions` are those two rows
|
|
7
|
+
without the slab, and they follow the theme instead of staying grey in dark.
|
|
8
|
+
-->
|
|
9
|
+
<v-card width="100%" class="screen-modal">
|
|
10
|
+
<v-card-title>{{ props.title }}</v-card-title>
|
|
11
|
+
|
|
12
|
+
<v-card-text class="screen-modal__body">
|
|
11
13
|
<v-form v-model="validForm" :disabled="disable">
|
|
12
14
|
<v-row no-gutters>
|
|
13
15
|
<v-col cols="12" class="mt-2">
|
|
14
16
|
<v-row no-gutters>
|
|
15
17
|
<InputLabel class="text-capitalize" title="Email" required />
|
|
16
18
|
<v-col cols="12">
|
|
19
|
+
<!-- Still a `v-text-field`, not an `AppField`: the Submit
|
|
20
|
+
button is gated on `validForm`, which only exists because
|
|
21
|
+
these `:rules` run. `.filter-field` is the established way
|
|
22
|
+
to give a Vuetify input the design's 40px/10px/13.5px shape
|
|
23
|
+
without taking its validation away. -->
|
|
17
24
|
<v-text-field
|
|
18
25
|
v-model="email"
|
|
26
|
+
class="filter-field"
|
|
19
27
|
density="comfortable"
|
|
20
28
|
:rules="[requiredRule, emailRule]"
|
|
21
29
|
></v-text-field>
|
|
@@ -38,27 +46,28 @@
|
|
|
38
46
|
</v-form>
|
|
39
47
|
</v-card-text>
|
|
40
48
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
49
|
+
<!-- The two-across, full-width footer is kept: the handoff draws no modal,
|
|
50
|
+
so its layout is not specified and changing it would be invention.
|
|
51
|
+
What changes is the chrome - `color="black"` was a hardcoded fill that
|
|
52
|
+
ignored the theme, and the bare text Cancel had no shape at all. -->
|
|
53
|
+
<v-card-actions class="screen-modal__footer">
|
|
54
|
+
<v-row class="px-4" no-gutters>
|
|
55
|
+
<v-col cols="6" class="pr-2">
|
|
44
56
|
<v-btn
|
|
45
57
|
block
|
|
46
|
-
variant="
|
|
47
|
-
class="text-none"
|
|
48
|
-
size="large"
|
|
58
|
+
variant="outlined"
|
|
59
|
+
class="text-none screen-btn-ghost"
|
|
49
60
|
@click="cancel"
|
|
50
61
|
>
|
|
51
62
|
Cancel
|
|
52
63
|
</v-btn>
|
|
53
64
|
</v-col>
|
|
54
65
|
|
|
55
|
-
<v-col cols="6">
|
|
66
|
+
<v-col cols="6" class="pl-2">
|
|
56
67
|
<v-btn
|
|
57
68
|
block
|
|
58
69
|
variant="flat"
|
|
59
|
-
|
|
60
|
-
class="text-none"
|
|
61
|
-
size="large"
|
|
70
|
+
class="text-none screen-btn-primary"
|
|
62
71
|
:disabled="!validForm"
|
|
63
72
|
@click="submit"
|
|
64
73
|
>
|
|
@@ -66,7 +75,7 @@
|
|
|
66
75
|
</v-btn>
|
|
67
76
|
</v-col>
|
|
68
77
|
</v-row>
|
|
69
|
-
</v-
|
|
78
|
+
</v-card-actions>
|
|
70
79
|
</v-card>
|
|
71
80
|
</template>
|
|
72
81
|
|