@7365admin1/layer-common 3.2.2-staging.158 → 3.2.2-staging.160

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.
Files changed (12) hide show
  1. package/components/AccessCardAddForm.vue +42 -42
  2. package/components/AccessCardPreviewDialog.vue +58 -84
  3. package/components/ClientDetailForm.vue +81 -56
  4. package/components/EntryPassInformation.vue +8 -6
  5. package/components/HidReaderForm.vue +17 -50
  6. package/components/IncidentReport/IncidentInformation.vue +10 -10
  7. package/components/OnlineFormConfigurationForm.vue +96 -73
  8. package/components/OnlineFormFill.vue +165 -96
  9. package/components/OnlineFormRenderPreview.vue +25 -30
  10. package/components/OnlineFormsConfiguration.vue +66 -65
  11. package/package.json +1 -1
  12. package/utils/status.ts +5 -0
package/components/AccessCardAddForm.vue CHANGED
@@ -1,8 +1,8 @@
1
1
  <template>
2
- <v-card width="100%">
3
- <v-toolbar>
2
+ <v-card width="100%" class="screen-modal">
3
+ <v-toolbar class="screen-dialog-bar">
4
4
  <v-row no-gutters class="fill-height px-6" align="center" justify="space-between">
5
- <span class="font-weight-bold text-h5 text-capitalize">
5
+ <span class="screen-card-title text-capitalize">
6
6
  {{ prop.mode }} Access Card
7
7
  </span>
8
8
  <v-btn-toggle
@@ -19,7 +19,10 @@
19
19
  </v-btn-toggle>
20
20
  </v-row>
21
21
  </v-toolbar>
22
- <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-0">
22
+ <!-- The height cap stays ON THE BODY. `.screen-modal` caps the CARD, which
23
+ only reaches the glass inside a dialog's flex column; mounted on its own
24
+ the footer would fall below the fold. -->
25
+ <v-card-text class="screen-modal__body pa-0" style="max-height: 100vh">
23
26
  <!-- Bulk Upload Mode -->
24
27
  <template v-if="uploadMode === 'bulk'">
25
28
  <v-row no-gutters class="px-6 pt-4 pb-2">
@@ -63,12 +66,12 @@
63
66
 
64
67
  <!-- Column Guide -->
65
68
  <div class="mt-3">
66
- <p class="text-caption font-weight-bold text-grey-darken-2 mb-1 text-uppercase">
69
+ <p class="text-caption font-weight-bold text-fontgray mb-1 text-uppercase">
67
70
  Template Column Guide
68
71
  </p>
69
72
  <v-table density="compact" class="text-caption rounded border">
70
73
  <thead>
71
- <tr class="bg-grey-lighten-4">
74
+ <tr class="template-guide-head">
72
75
  <th class="text-left text-caption font-weight-bold py-1 px-2">Column</th>
73
76
  <th class="text-left text-caption font-weight-bold py-1 px-2">Format / Accepted Values</th>
74
77
  <th class="text-left text-caption font-weight-bold py-1 px-2">Example</th>
@@ -77,8 +80,8 @@
77
80
  <tbody>
78
81
  <tr v-for="col in templateColumnGuide" :key="col.name">
79
82
  <td class="py-1 px-2 font-weight-medium" style="white-space: nowrap">{{ col.name }}</td>
80
- <td class="py-1 px-2 text-grey-darken-1">{{ col.format }}</td>
81
- <td class="py-1 px-2 text-grey-darken-2">{{ col.example }}</td>
83
+ <td class="py-1 px-2 text-fontgray">{{ col.format }}</td>
84
+ <td class="py-1 px-2 text-fontgray">{{ col.example }}</td>
82
85
  </tr>
83
86
  </tbody>
84
87
  </v-table>
@@ -306,7 +309,7 @@
306
309
  ></span>
307
310
  <span class="d-flex align-center">
308
311
  Anti Pass Back
309
- <v-icon class="ml-1" color="grey" size="small"
312
+ <v-icon class="ml-1 text-fontgray" size="small"
310
313
  >mdi-help-circle</v-icon
311
314
  >
312
315
  <v-checkbox
@@ -382,39 +385,25 @@
382
385
  </v-row>
383
386
  </v-form>
384
387
  </v-card-text>
385
- <v-toolbar density="compact">
386
- <v-row no-gutters>
387
- <v-col cols="6">
388
- <v-btn
389
- tile
390
- block
391
- variant="text"
392
- class="text-none"
393
- size="48"
394
- @click="cancel"
395
- :disabled="disable"
396
- >
397
- Cancel
398
- </v-btn>
399
- </v-col>
400
-
401
- <v-col cols="6">
402
- <v-btn
403
- tile
404
- block
405
- variant="flat"
406
- color="black"
407
- class="text-none"
408
- size="48"
409
- :disabled="(uploadMode === 'single' ? !validForm : !bulkFile || !entryPassTemplate.id || templateLoading) || disable"
410
- @click="submit"
411
- :loading="disable"
412
- >
413
- Submit
414
- </v-btn>
415
- </v-col>
416
- </v-row>
417
- </v-toolbar>
388
+ <v-card-actions class="screen-modal__footer">
389
+ <v-btn
390
+ variant="flat"
391
+ class="text-none screen-btn-ghost"
392
+ :disabled="disable"
393
+ @click="cancel"
394
+ >
395
+ Cancel
396
+ </v-btn>
397
+ <v-btn
398
+ variant="flat"
399
+ class="text-none screen-btn-primary"
400
+ :disabled="(uploadMode === 'single' ? !validForm : !bulkFile || !entryPassTemplate.id || templateLoading) || disable"
401
+ :loading="disable"
402
+ @click="submit"
403
+ >
404
+ Submit
405
+ </v-btn>
406
+ </v-card-actions>
418
407
  </v-card>
419
408
  </template>
420
409
  <script setup lang="ts">
@@ -813,3 +802,14 @@ async function submit() {
813
802
  }
814
803
  }
815
804
  </script>
805
+
806
+ <style scoped>
807
+ /*
808
+ * The template guide's header row. `bg-grey-lighten-4` was a fixed near-white,
809
+ * i.e. a bright band across a dark card; `--thead` is the design's own table
810
+ * head wash and is defined per theme.
811
+ */
812
+ .template-guide-head {
813
+ background: var(--thead);
814
+ }
815
+ </style>
package/components/AccessCardPreviewDialog.vue CHANGED
@@ -9,16 +9,16 @@
9
9
 
10
10
  <!-- Assign to Person Dialog -->
11
11
  <v-dialog :model-value="showAssignForm" width="420" persistent>
12
- <v-card width="100%">
13
- <v-toolbar density="compact" color="surface">
12
+ <v-card width="100%" class="screen-modal">
13
+ <v-toolbar density="compact" class="screen-dialog-bar">
14
14
  <v-row no-gutters class="fill-height px-4" align="center">
15
15
  <span class="font-weight-bold">Assign Card to Person</span>
16
16
  </v-row>
17
17
  </v-toolbar>
18
18
 
19
19
  <v-card-text class="pa-4">
20
- <div class="text-caption text-grey mb-4">
21
- Card: <strong class="text-body-2 text-black">{{ selectedCardInUnit?.cardNo }}</strong>
20
+ <div class="text-caption text-fontgray mb-4">
21
+ Card: <strong class="text-body-2">{{ selectedCardInUnit?.cardNo }}</strong>
22
22
  </div>
23
23
 
24
24
  <!-- Person Type Filter -->
@@ -38,9 +38,7 @@
38
38
  </v-btn-toggle> -->
39
39
 
40
40
  <!-- Person Selector -->
41
- <div class="text-caption font-weight-bold mb-1 text-uppercase text-grey-darken-1">
42
- Person <span class="text-error">*</span>
43
- </div>
41
+ <InputLabel title="Person" required class="mb-1" />
44
42
  <v-select
45
43
  v-model="assignPerson"
46
44
  :items="filteredPeopleItems"
@@ -59,7 +57,7 @@
59
57
  </template>
60
58
  <template #selection="{ item }">
61
59
  <span>{{ item.raw.name }}</span>
62
- <v-chip size="x-small" class="ml-2" color="grey" variant="tonal">
60
+ <v-chip size="x-small" class="ml-2" variant="tonal">
63
61
  {{ personTypeLabel(item.raw) }}
64
62
  </v-chip>
65
63
  </template>
@@ -67,41 +65,30 @@
67
65
  <p v-if="assignError" class="text-error text-caption mt-2">{{ assignError }}</p>
68
66
  </v-card-text>
69
67
 
70
- <v-toolbar density="compact">
71
- <v-row no-gutters>
72
- <v-col cols="6" class="pa-0">
73
- <v-btn
74
- block
75
- variant="text"
76
- class="text-none"
77
- height="48"
78
- @click="cancelAssign"
79
- >
80
- Cancel
81
- </v-btn>
82
- </v-col>
83
- <v-col cols="6" class="pa-0">
84
- <v-btn
85
- block
86
- variant="flat"
87
- color="black"
88
- class="text-none"
89
- height="48"
90
- :disabled="!assignPerson || assignLoading"
91
- :loading="assignLoading"
92
- @click="confirmAssign"
93
- >
94
- Assign
95
- </v-btn>
96
- </v-col>
97
- </v-row>
98
- </v-toolbar>
68
+ <v-card-actions class="screen-modal__footer">
69
+ <v-btn
70
+ variant="flat"
71
+ class="text-none screen-btn-ghost"
72
+ @click="cancelAssign"
73
+ >
74
+ Cancel
75
+ </v-btn>
76
+ <v-btn
77
+ variant="flat"
78
+ class="text-none screen-btn-primary"
79
+ :disabled="!assignPerson || assignLoading"
80
+ :loading="assignLoading"
81
+ @click="confirmAssign"
82
+ >
83
+ Assign
84
+ </v-btn>
85
+ </v-card-actions>
99
86
  </v-card>
100
87
  </v-dialog>
101
88
 
102
89
  <v-dialog :model-value="modelValue" width="450" persistent>
103
- <v-card width="100%">
104
- <v-card-text style="max-height: 100vh; overflow-y: auto" class="pb-0">
90
+ <v-card width="100%" class="screen-modal">
91
+ <v-card-text class="screen-modal__body pb-0">
105
92
  <v-row no-gutters class="mb-4">
106
93
  <v-col cols="12">
107
94
  <strong>Building:</strong> {{ unit?.block?.name ?? "N/A" }}
@@ -130,7 +117,7 @@
130
117
  {{ card.cardNo }}
131
118
  </v-chip>
132
119
  </div>
133
- <span v-else class="text-caption text-grey ml-1">None</span>
120
+ <span v-else class="text-caption text-fontgray ml-1">None</span>
134
121
  </v-col>
135
122
 
136
123
  <!-- Damage Physical -->
@@ -142,7 +129,7 @@
142
129
  :key="card._id"
143
130
  size="small"
144
131
  class="mr-1 mb-1"
145
- color="deep-orange"
132
+ color="warning"
146
133
  :variant="selectedCardInUnit?._id === card._id ? 'flat' : 'tonal'"
147
134
  style="cursor: pointer"
148
135
  @click="toggleCard(card)"
@@ -150,7 +137,7 @@
150
137
  {{ card.cardNo }}
151
138
  </v-chip>
152
139
  </div>
153
- <span v-else class="text-caption text-grey ml-1">None</span>
140
+ <span v-else class="text-caption text-fontgray ml-1">None</span>
154
141
  </v-col>
155
142
 
156
143
  <!-- Available Non-Physical -->
@@ -170,7 +157,7 @@
170
157
  {{ card.cardNo }}
171
158
  </v-chip>
172
159
  </div>
173
- <span v-else class="text-caption text-grey ml-1">None</span>
160
+ <span v-else class="text-caption text-fontgray ml-1">None</span>
174
161
  </v-col>
175
162
 
176
163
  <!-- Assigned Physical -->
@@ -190,7 +177,7 @@
190
177
  {{ card.cardNo }}
191
178
  </v-chip>
192
179
  </div>
193
- <span v-else class="text-caption text-grey ml-1">None</span>
180
+ <span v-else class="text-caption text-fontgray ml-1">None</span>
194
181
  </v-col>
195
182
 
196
183
  <!-- Assigned Non-Physical -->
@@ -210,7 +197,7 @@
210
197
  {{ card.cardNo }}
211
198
  </v-chip>
212
199
  </div>
213
- <span v-else class="text-caption text-grey ml-1">None</span>
200
+ <span v-else class="text-caption text-fontgray ml-1">None</span>
214
201
  </v-col>
215
202
 
216
203
  <!-- Replaced Physical -->
@@ -222,7 +209,7 @@
222
209
  :key="card._id"
223
210
  size="small"
224
211
  class="mr-1 mb-1"
225
- :color="selectedCardInUnit?._id === card._id ? 'orange' : 'orange'"
212
+ color="warning"
226
213
  :variant="selectedCardInUnit?._id === card._id ? 'flat' : 'tonal'"
227
214
  style="cursor: pointer"
228
215
  @click="toggleCard(card)"
@@ -230,7 +217,7 @@
230
217
  {{ card.cardNo }}
231
218
  </v-chip>
232
219
  </div>
233
- <span v-else class="text-caption text-grey ml-1">None</span>
220
+ <span v-else class="text-caption text-fontgray ml-1">None</span>
234
221
  </v-col>
235
222
 
236
223
  <!-- Replaced Non-Physical -->
@@ -242,7 +229,7 @@
242
229
  :key="card._id"
243
230
  size="small"
244
231
  class="mr-1 mb-1"
245
- :color="selectedCardInUnit?._id === card._id ? 'orange' : 'orange'"
232
+ color="warning"
246
233
  :variant="selectedCardInUnit?._id === card._id ? 'flat' : 'tonal'"
247
234
  style="cursor: pointer"
248
235
  @click="toggleCard(card)"
@@ -250,7 +237,7 @@
250
237
  {{ card.cardNo }}
251
238
  </v-chip>
252
239
  </div>
253
- <span v-else class="text-caption text-grey ml-1">None</span>
240
+ <span v-else class="text-caption text-fontgray ml-1">None</span>
254
241
  </v-col>
255
242
 
256
243
  <!-- Deleted Physical -->
@@ -262,7 +249,7 @@
262
249
  :key="card._id"
263
250
  size="small"
264
251
  class="mr-1 mb-1"
265
- :color="selectedCardInUnit?._id === card._id ? 'red' : 'red'"
252
+ color="error"
266
253
  :variant="selectedCardInUnit?._id === card._id ? 'flat' : 'tonal'"
267
254
  style="cursor: pointer"
268
255
  @click="toggleCard(card)"
@@ -270,7 +257,7 @@
270
257
  {{ card.cardNo }}
271
258
  </v-chip>
272
259
  </div>
273
- <span v-else class="text-caption text-grey ml-1">None</span>
260
+ <span v-else class="text-caption text-fontgray ml-1">None</span>
274
261
  </v-col>
275
262
 
276
263
  <!-- Deleted Non-Physical -->
@@ -282,7 +269,7 @@
282
269
  :key="card._id"
283
270
  size="small"
284
271
  class="mr-1 mb-1"
285
- :color="selectedCardInUnit?._id === card._id ? 'red' : 'red'"
272
+ color="error"
286
273
  :variant="selectedCardInUnit?._id === card._id ? 'flat' : 'tonal'"
287
274
  style="cursor: pointer"
288
275
  @click="toggleCard(card)"
@@ -290,40 +277,29 @@
290
277
  {{ card.cardNo }}
291
278
  </v-chip>
292
279
  </div>
293
- <span v-else class="text-caption text-grey ml-1">None</span>
280
+ <span v-else class="text-caption text-fontgray ml-1">None</span>
294
281
  </v-col>
295
282
  </v-row>
296
283
  </v-card-text>
297
284
 
298
- <v-toolbar class="pa-0" density="compact">
299
- <v-row no-gutters>
300
- <v-col cols="6" class="pa-0">
285
+ <v-card-actions class="screen-modal__footer">
286
+ <v-btn
287
+ variant="flat"
288
+ class="text-none screen-btn-ghost"
289
+ @click="emit('update:modelValue', false)"
290
+ >
291
+ Close
292
+ </v-btn>
293
+ <v-menu>
294
+ <template #activator="{ props }">
301
295
  <v-btn
302
- block
303
- variant="text"
304
- class="text-none"
305
- size="large"
306
- height="48"
307
- @click="emit('update:modelValue', false)"
296
+ variant="flat"
297
+ class="text-none screen-btn-primary"
298
+ v-bind="props"
308
299
  >
309
- Close
300
+ More actions
310
301
  </v-btn>
311
- </v-col>
312
- <v-col cols="6" class="pa-0">
313
- <v-menu>
314
- <template #activator="{ props }">
315
- <v-btn
316
- block
317
- variant="flat"
318
- color="black"
319
- class="text-none"
320
- height="48"
321
- v-bind="props"
322
- tile
323
- >
324
- More actions
325
- </v-btn>
326
- </template>
302
+ </template>
327
303
  <v-list class="pa-0">
328
304
  <v-list-item
329
305
  v-if="canAssignToPerson && isSelectedCardAvailable"
@@ -349,7 +325,7 @@
349
325
  </v-list-item>
350
326
  <v-list-item
351
327
  @click="emit('delete')"
352
- class="text-red"
328
+ class="text-error"
353
329
  :disabled="!isSelectedCardDeletable"
354
330
  v-if="canDeleteAccessCard"
355
331
  >
@@ -358,10 +334,8 @@
358
334
  </v-list-item-title>
359
335
  </v-list-item>
360
336
  </v-list>
361
- </v-menu>
362
- </v-col>
363
- </v-row>
364
- </v-toolbar>
337
+ </v-menu>
338
+ </v-card-actions>
365
339
  </v-card>
366
340
  </v-dialog>
367
341
  </template>