@7365admin1/layer-common 3.2.2-staging.116 → 3.2.2-staging.118
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/BulletinBoardView.vue +9 -6
- package/components/CameraMain.vue +35 -47
- package/components/DeliveryCompany.vue +34 -20
- package/components/MemberInformation.vue +23 -16
- package/components/NotificationSettings.vue +66 -54
- package/components/OnlineFormsConfiguration.vue +41 -42
- package/components/OvernightParkingAvailability.vue +49 -26
- package/components/SiteSettings.vue +4 -1
- package/package.json +1 -1
|
@@ -1,14 +1,17 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<v-card width="100%" :loading="processing">
|
|
2
|
+
<v-card width="100%" class="screen-modal" :loading="processing">
|
|
3
3
|
<v-toolbar>
|
|
4
4
|
<v-row no-gutters class="fill-height px-6" align="center">
|
|
5
|
-
<span class="
|
|
5
|
+
<span class="screen-card-title text-capitalize">
|
|
6
6
|
Preview Announcement
|
|
7
7
|
</span>
|
|
8
8
|
</v-row>
|
|
9
9
|
</v-toolbar>
|
|
10
10
|
|
|
11
|
-
<v-card-text
|
|
11
|
+
<v-card-text
|
|
12
|
+
style="max-height: 100vh; overflow-y: auto"
|
|
13
|
+
class="screen-modal__body pb-0 my-3"
|
|
14
|
+
>
|
|
12
15
|
<v-row no-gutters>
|
|
13
16
|
<template v-for="(label, key) in formattedFields" :key="key">
|
|
14
17
|
<v-col cols="12" class="mb-5">
|
|
@@ -39,7 +42,7 @@
|
|
|
39
42
|
<v-col class="font-weight-bold">Attachments:</v-col>
|
|
40
43
|
<v-col cols="9" class="px-10">
|
|
41
44
|
<template v-if="videosArray.length > 0">
|
|
42
|
-
<div class="text-caption
|
|
45
|
+
<div class="text-caption screen-hint mb-1">
|
|
43
46
|
Videos ({{ videosArray.length }})
|
|
44
47
|
</div>
|
|
45
48
|
<v-list density="compact" class="pa-0 rounded-lg border mb-3">
|
|
@@ -71,7 +74,7 @@
|
|
|
71
74
|
|
|
72
75
|
<template v-if="photosArray.length > 0">
|
|
73
76
|
<div
|
|
74
|
-
class="text-caption
|
|
77
|
+
class="text-caption screen-hint mb-1"
|
|
75
78
|
:class="{ 'mt-3': videosArray.length > 0 }"
|
|
76
79
|
>
|
|
77
80
|
Photos ({{ photosArray.length }})
|
|
@@ -110,7 +113,7 @@
|
|
|
110
113
|
|
|
111
114
|
<template v-if="filesArray.length > 0">
|
|
112
115
|
<div
|
|
113
|
-
class="text-caption
|
|
116
|
+
class="text-caption screen-hint mb-1"
|
|
114
117
|
:class="{
|
|
115
118
|
'mt-3': videosArray.length > 0 || photosArray.length > 0,
|
|
116
119
|
}"
|
|
@@ -1,57 +1,45 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<v-row no-gutters>
|
|
3
3
|
<v-col cols="12">
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
class="text-none"
|
|
18
|
-
@click="dialogAdd = true"
|
|
19
|
-
>
|
|
4
|
+
<!-- Two `grey-lighten-4` bars - one above the table, one below - are one
|
|
5
|
+
CardToolbar on the card's own surface. The literal grey stayed white
|
|
6
|
+
on the dark theme's card; measured as four 48px white slabs. -->
|
|
7
|
+
<AppCard class="table-card">
|
|
8
|
+
<CardToolbar :count="pageRange">
|
|
9
|
+
<template #left>
|
|
10
|
+
<AppButton
|
|
11
|
+
variant="icon"
|
|
12
|
+
icon="mdi-refresh"
|
|
13
|
+
aria-label="Refresh"
|
|
14
|
+
@click="getCameraRefresh()"
|
|
15
|
+
/>
|
|
16
|
+
<AppButton v-if="!prop.readOnly" @click="dialogAdd = true">
|
|
20
17
|
Add
|
|
21
|
-
</
|
|
18
|
+
</AppButton>
|
|
22
19
|
</template>
|
|
23
|
-
</v-toolbar>
|
|
24
|
-
|
|
25
|
-
<v-card-text class="pa-0 bg-red">
|
|
26
|
-
<v-data-table
|
|
27
|
-
:headers="computedHeaders"
|
|
28
|
-
:items="items"
|
|
29
|
-
fixed-header
|
|
30
|
-
hide-default-footer
|
|
31
|
-
@click:row="handleRowClick"
|
|
32
|
-
style="max-height: 300px"
|
|
33
|
-
>
|
|
34
|
-
<template #item.host="{ value }">
|
|
35
|
-
{{ maskHostUrl(value) }}
|
|
36
|
-
</template>
|
|
37
|
-
</v-data-table>
|
|
38
|
-
</v-card-text>
|
|
39
20
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
<local-pagination
|
|
47
|
-
v-model="page"
|
|
48
|
-
:length="pages"
|
|
49
|
-
@update:value="$emit('update:value', $event)"
|
|
50
|
-
/>
|
|
51
|
-
</v-row>
|
|
21
|
+
<template #right>
|
|
22
|
+
<local-pagination
|
|
23
|
+
v-model="page"
|
|
24
|
+
:length="pages"
|
|
25
|
+
@update:value="$emit('update:value', $event)"
|
|
26
|
+
/>
|
|
52
27
|
</template>
|
|
53
|
-
</
|
|
54
|
-
|
|
28
|
+
</CardToolbar>
|
|
29
|
+
|
|
30
|
+
<v-data-table
|
|
31
|
+
:headers="computedHeaders"
|
|
32
|
+
:items="items"
|
|
33
|
+
fixed-header
|
|
34
|
+
hide-default-footer
|
|
35
|
+
@click:row="handleRowClick"
|
|
36
|
+
style="max-height: 300px"
|
|
37
|
+
>
|
|
38
|
+
<template #item.host="{ value }">
|
|
39
|
+
{{ maskHostUrl(value) }}
|
|
40
|
+
</template>
|
|
41
|
+
</v-data-table>
|
|
42
|
+
</AppCard>
|
|
55
43
|
</v-col>
|
|
56
44
|
|
|
57
45
|
<!-- dialog -->
|
|
@@ -1,22 +1,27 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<v-row no-gutters class="pa-3">
|
|
3
3
|
<v-col cols="12">
|
|
4
|
-
<
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
4
|
+
<AppCard class="delivery-company__card">
|
|
5
|
+
<!--
|
|
6
|
+
The one toolbar the design puts on top of the card. It was a
|
|
7
|
+
hardcoded grey-lighten-4 bar, which stays light in dark mode
|
|
8
|
+
and painted as a white slab there.
|
|
9
|
+
-->
|
|
10
|
+
<CardToolbar>
|
|
11
|
+
<template #left>
|
|
12
|
+
<span v-if="!hideTitle" class="screen-card-title">
|
|
13
|
+
Delivery Companies
|
|
14
|
+
</span>
|
|
15
|
+
</template>
|
|
10
16
|
|
|
11
|
-
<template #
|
|
12
|
-
<
|
|
13
|
-
@click="handleAdd">
|
|
17
|
+
<template #right>
|
|
18
|
+
<AppButton v-if="!props.readOnly" @click="handleAdd">
|
|
14
19
|
Add
|
|
15
|
-
</
|
|
20
|
+
</AppButton>
|
|
16
21
|
</template>
|
|
17
|
-
</
|
|
22
|
+
</CardToolbar>
|
|
18
23
|
|
|
19
|
-
<
|
|
24
|
+
<div class="pa-0" style="min-height: 100px;">
|
|
20
25
|
<template v-if="companies.length > 0">
|
|
21
26
|
<draggable :list="companies" item-key="index" class="drag-area"
|
|
22
27
|
:disabled="editingIndex !== null">
|
|
@@ -60,11 +65,11 @@
|
|
|
60
65
|
</draggable>
|
|
61
66
|
</template>
|
|
62
67
|
|
|
63
|
-
<div v-else class="text-center py-5">
|
|
68
|
+
<div v-else class="screen-empty text-center py-5">
|
|
64
69
|
No delivery companies added yet.
|
|
65
70
|
</div>
|
|
66
|
-
</
|
|
67
|
-
</
|
|
71
|
+
</div>
|
|
72
|
+
</AppCard>
|
|
68
73
|
</v-col>
|
|
69
74
|
|
|
70
75
|
<v-dialog v-model="dialog.add" persistent width="450">
|
|
@@ -82,12 +87,13 @@
|
|
|
82
87
|
</v-card-text>
|
|
83
88
|
|
|
84
89
|
<v-toolbar>
|
|
85
|
-
<v-row no-gutters justify="end" align="center" class="px-5">
|
|
86
|
-
<
|
|
87
|
-
|
|
88
|
-
|
|
90
|
+
<v-row no-gutters justify="end" align="center" class="px-5 ga-2">
|
|
91
|
+
<AppButton variant="ghost" @click="dialog.add = false">
|
|
92
|
+
Cancel
|
|
93
|
+
</AppButton>
|
|
94
|
+
<AppButton @click="saveEdit(companies.length)">
|
|
89
95
|
Add
|
|
90
|
-
</
|
|
96
|
+
</AppButton>
|
|
91
97
|
</v-row>
|
|
92
98
|
</v-toolbar>
|
|
93
99
|
</v-card>
|
|
@@ -237,4 +243,12 @@ watch(initialCompanies, (val) => {
|
|
|
237
243
|
.drag-handle {
|
|
238
244
|
cursor: grab;
|
|
239
245
|
}
|
|
246
|
+
|
|
247
|
+
/* The size cap the v-card carried as max-width/max-height attributes, kept
|
|
248
|
+
verbatim so the panel does not grow to the full page width. */
|
|
249
|
+
.delivery-company__card {
|
|
250
|
+
max-width: 700px;
|
|
251
|
+
max-height: 500px;
|
|
252
|
+
overflow-y: auto;
|
|
253
|
+
}
|
|
240
254
|
</style>
|
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<v-row no-gutters class="w-100">
|
|
3
|
-
<
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
3
|
+
<AppCard class="w-100 pa-4">
|
|
4
|
+
<!-- GHOST, not primary: the handoff names "Scan QR Code" in its
|
|
5
|
+
ghost/secondary list, alongside Bulk Upload, Download Report and
|
|
6
|
+
Export. Stays a `v-btn` because `block` has no AppButton
|
|
7
|
+
equivalent, so the design's button is applied as a class. -->
|
|
8
|
+
<v-btn block :height="38" text="Scan QR Code" variant="outlined"
|
|
9
|
+
class="screen-btn-ghost" prepend-icon="mdi-qrcode" @click="handleScanQRPass" />
|
|
7
10
|
<v-form ref="formRef" v-model="validForm" :disabled="processing" @click="errorScanPassMessage = ''">
|
|
8
11
|
<v-row no-gutters class="pt-5 ga-2">
|
|
9
12
|
<v-col cols="12">
|
|
@@ -81,22 +84,26 @@
|
|
|
81
84
|
|
|
82
85
|
<v-row class="pt-3" justify="space-between">
|
|
83
86
|
<v-col cols="6">
|
|
84
|
-
|
|
85
|
-
|
|
87
|
+
<!-- The primitive rather than a class on a v-btn: these two
|
|
88
|
+
need nothing Vuetify owns, and AppButton is the only way
|
|
89
|
+
they draw at the handoff's 40px / 38px. -->
|
|
90
|
+
<AppButton icon="mdi-plus" :disabled="!validForm" @click="handleAddMember">
|
|
91
|
+
Add Member
|
|
92
|
+
</AppButton>
|
|
86
93
|
</v-col>
|
|
87
94
|
<v-col cols="6" align="end">
|
|
88
|
-
<
|
|
89
|
-
|
|
95
|
+
<AppButton variant="ghost" icon="mdi-refresh" @click.stop="handleClearForm">
|
|
96
|
+
Clear Form
|
|
97
|
+
</AppButton>
|
|
90
98
|
</v-col>
|
|
91
99
|
</v-row>
|
|
92
100
|
</v-row>
|
|
93
101
|
</v-form>
|
|
94
|
-
|
|
95
|
-
</v-card>
|
|
102
|
+
</AppCard>
|
|
96
103
|
<visitor-pass-key-q-r-scanner :dialog="dialog.scanQRCode" v-model:scannedValue="scannedPassValue"
|
|
97
104
|
@close-dialog="dialog.scanQRCode = false" />
|
|
98
105
|
<v-dialog v-model="dialog.memberAutofillOptions" max-width="430">
|
|
99
|
-
<v-card v-if="memberSelectedSearchResult" class="nric-options-card">
|
|
106
|
+
<v-card v-if="memberSelectedSearchResult" class="nric-options-card screen-modal">
|
|
100
107
|
<v-card-actions class="justify-end pa-1">
|
|
101
108
|
<v-btn icon="mdi-close" variant="text" size="small" @click="memberCloseAutofillOptions" />
|
|
102
109
|
</v-card-actions>
|
|
@@ -127,10 +134,10 @@
|
|
|
127
134
|
</v-card-text>
|
|
128
135
|
|
|
129
136
|
<v-card-actions class="justify-end px-4 pb-4">
|
|
130
|
-
<v-btn variant="
|
|
137
|
+
<v-btn variant="outlined" class="screen-btn-ghost" size="small" @click="memberCloseAutofillOptions">
|
|
131
138
|
Cancel
|
|
132
139
|
</v-btn>
|
|
133
|
-
<v-btn
|
|
140
|
+
<v-btn variant="flat" class="screen-btn-primary px-5" size="small"
|
|
134
141
|
@click="memberConfirmAutofillOptions">
|
|
135
142
|
Select
|
|
136
143
|
</v-btn>
|
|
@@ -626,13 +633,13 @@ function handleRemoveMember(index: number) {
|
|
|
626
633
|
}
|
|
627
634
|
|
|
628
635
|
.nric-options-title {
|
|
629
|
-
color:
|
|
636
|
+
color: var(--text);
|
|
630
637
|
font-size: 1.45rem;
|
|
631
638
|
line-height: 1.2;
|
|
632
639
|
}
|
|
633
640
|
|
|
634
641
|
.nric-options-section-title {
|
|
635
|
-
color:
|
|
642
|
+
color: var(--text);
|
|
636
643
|
font-size: 1.05rem;
|
|
637
644
|
line-height: 1.25;
|
|
638
645
|
}
|
|
@@ -640,7 +647,7 @@ function handleRemoveMember(index: number) {
|
|
|
640
647
|
.nric-selected-person {
|
|
641
648
|
border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
|
642
649
|
border-radius: 12px;
|
|
643
|
-
color:
|
|
650
|
+
color: var(--text);
|
|
644
651
|
font-size: 0.95rem;
|
|
645
652
|
min-height: 52px;
|
|
646
653
|
padding: 10px 14px;
|
|
@@ -2,9 +2,11 @@
|
|
|
2
2
|
<v-row no-gutters class="pa-8" justify="center">
|
|
3
3
|
<v-col cols="12" md="10">
|
|
4
4
|
<v-row no-gutters>
|
|
5
|
-
<v-col cols="12"
|
|
5
|
+
<v-col cols="12">
|
|
6
|
+
<PageHeader title="Notifications" />
|
|
7
|
+
</v-col>
|
|
6
8
|
|
|
7
|
-
<v-col cols="12" md="8" class="
|
|
9
|
+
<v-col cols="12" md="8" class="screen-hint intro-copy">
|
|
8
10
|
Choose what you want to hear about, and how. These settings are yours
|
|
9
11
|
alone and apply everywhere you use iService — on this site and on your
|
|
10
12
|
phone.
|
|
@@ -33,81 +35,69 @@
|
|
|
33
35
|
<template v-else>
|
|
34
36
|
<!-- everything, at once -->
|
|
35
37
|
<v-col cols="12" class="mt-8">
|
|
36
|
-
<
|
|
37
|
-
width="100%"
|
|
38
|
-
border="grey-darken-3 sm"
|
|
39
|
-
variant="outlined"
|
|
40
|
-
rounded="lg"
|
|
41
|
-
>
|
|
38
|
+
<AppCard>
|
|
42
39
|
<v-row no-gutters align="center" class="pa-6">
|
|
43
40
|
<v-col cols="12" sm="8">
|
|
44
|
-
<div class="
|
|
45
|
-
<div class="
|
|
41
|
+
<div class="screen-card-title">Everything</div>
|
|
42
|
+
<div class="screen-hint summary-line mt-1">
|
|
46
43
|
{{ everythingSummary }}
|
|
47
44
|
</div>
|
|
48
45
|
</v-col>
|
|
49
46
|
<v-col cols="12" sm="4" class="d-flex justify-sm-end mt-3 mt-sm-0">
|
|
50
|
-
<
|
|
51
|
-
variant="
|
|
52
|
-
rounded="xl"
|
|
53
|
-
class="text-none"
|
|
47
|
+
<AppButton
|
|
48
|
+
variant="ghost"
|
|
54
49
|
:disabled="saving"
|
|
55
50
|
@click="setAll(!allOn)"
|
|
56
51
|
>
|
|
57
52
|
{{ allOn ? "Turn everything off" : "Turn everything on" }}
|
|
58
|
-
</
|
|
53
|
+
</AppButton>
|
|
59
54
|
</v-col>
|
|
60
55
|
</v-row>
|
|
61
|
-
</
|
|
56
|
+
</AppCard>
|
|
62
57
|
</v-col>
|
|
63
58
|
|
|
64
59
|
<!-- one panel per module, collapsed by default so a person with many
|
|
65
60
|
modules gets a short list rather than a wall of switches -->
|
|
66
61
|
<v-col cols="12" class="mt-4">
|
|
67
|
-
<v-expansion-panels variant="accordion" multiple>
|
|
62
|
+
<v-expansion-panels variant="accordion" multiple class="screen-accordion">
|
|
68
63
|
<v-expansion-panel
|
|
69
64
|
v-for="category in categories"
|
|
70
65
|
:key="category.key"
|
|
71
66
|
:value="category.key"
|
|
72
67
|
elevation="0"
|
|
73
|
-
class="border-sm rounded-lg mb-2"
|
|
74
68
|
>
|
|
75
69
|
<v-expansion-panel-title>
|
|
76
70
|
<v-row no-gutters align="center">
|
|
77
71
|
<v-col cols="12" sm="6">
|
|
78
|
-
<span
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
72
|
+
<span>{{ category.label }}</span>
|
|
73
|
+
<!-- "Safety" is a TAG, not a status word, so it takes
|
|
74
|
+
the handoff's tag chip - "small 7px-radius label" -
|
|
75
|
+
which is the dotless shape, on the `info` tone the
|
|
76
|
+
handoff assigns to "Role & info tags". A leading dot
|
|
77
|
+
here would draw it as a status the screen does not
|
|
78
|
+
have. -->
|
|
79
|
+
<StatusChip
|
|
82
80
|
v-if="category.safety"
|
|
83
|
-
|
|
81
|
+
tone="info"
|
|
82
|
+
label="Safety"
|
|
83
|
+
:dot="false"
|
|
84
84
|
class="ml-2"
|
|
85
|
-
|
|
86
|
-
color="info"
|
|
87
|
-
>
|
|
88
|
-
Safety
|
|
89
|
-
</v-chip>
|
|
85
|
+
/>
|
|
90
86
|
</v-col>
|
|
91
|
-
<v-col
|
|
92
|
-
cols="12"
|
|
93
|
-
sm="6"
|
|
94
|
-
class="text-body-2 text-medium-emphasis"
|
|
95
|
-
>
|
|
87
|
+
<v-col cols="12" sm="6" class="screen-hint summary-line">
|
|
96
88
|
{{ summaryFor(category) }}
|
|
97
89
|
</v-col>
|
|
98
90
|
</v-row>
|
|
99
91
|
</v-expansion-panel-title>
|
|
100
92
|
|
|
101
93
|
<v-expansion-panel-text>
|
|
102
|
-
<div class="
|
|
94
|
+
<div class="screen-hint summary-line mb-4">
|
|
103
95
|
{{ category.description }}
|
|
104
96
|
</div>
|
|
105
97
|
|
|
106
|
-
<
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
rounded="xl"
|
|
110
|
-
class="text-none mb-4"
|
|
98
|
+
<AppButton
|
|
99
|
+
variant="ghost"
|
|
100
|
+
class="mb-4"
|
|
111
101
|
:disabled="saving || !switchableIn(category).length"
|
|
112
102
|
@click="setCategory(category, !categoryAllOn(category))"
|
|
113
103
|
>
|
|
@@ -116,7 +106,7 @@
|
|
|
116
106
|
? "Turn all off for " + category.label
|
|
117
107
|
: "Turn all on for " + category.label
|
|
118
108
|
}}
|
|
119
|
-
</
|
|
109
|
+
</AppButton>
|
|
120
110
|
|
|
121
111
|
<!-- one channel per row: a switch must never sit beside the
|
|
122
112
|
NEXT channel's label, which is what a three-up grid does -->
|
|
@@ -132,8 +122,8 @@
|
|
|
132
122
|
:class="{ 'channel-unavailable': !channel.supported }"
|
|
133
123
|
>
|
|
134
124
|
<div class="pr-4">
|
|
135
|
-
<div class="
|
|
136
|
-
<div v-if="!channel.supported" class="
|
|
125
|
+
<div class="channel-label">{{ channel.label }}</div>
|
|
126
|
+
<div v-if="!channel.supported" class="channel-note mt-1">
|
|
137
127
|
{{ channel.note }}
|
|
138
128
|
</div>
|
|
139
129
|
</div>
|
|
@@ -162,21 +152,18 @@
|
|
|
162
152
|
|
|
163
153
|
<!-- switching a safety alert off: say plainly what stops arriving -->
|
|
164
154
|
<v-dialog v-model="confirmOpen" max-width="460" persistent>
|
|
165
|
-
<v-card
|
|
166
|
-
<v-card-title
|
|
167
|
-
<v-card-text class="
|
|
155
|
+
<v-card class="screen-modal pa-2">
|
|
156
|
+
<v-card-title>{{ confirmText.title }}</v-card-title>
|
|
157
|
+
<v-card-text class="screen-modal__body">
|
|
158
|
+
{{ confirmText.body }}
|
|
159
|
+
</v-card-text>
|
|
168
160
|
<v-card-actions class="justify-end">
|
|
169
|
-
<
|
|
161
|
+
<AppButton variant="ghost" @click="cancelConfirm">
|
|
170
162
|
{{ confirmText.cancel }}
|
|
171
|
-
</
|
|
172
|
-
<
|
|
173
|
-
color="primary"
|
|
174
|
-
variant="tonal"
|
|
175
|
-
class="text-none"
|
|
176
|
-
@click="acceptConfirm"
|
|
177
|
-
>
|
|
163
|
+
</AppButton>
|
|
164
|
+
<AppButton @click="acceptConfirm">
|
|
178
165
|
{{ confirmText.confirm }}
|
|
179
|
-
</
|
|
166
|
+
</AppButton>
|
|
180
167
|
</v-card-actions>
|
|
181
168
|
</v-card>
|
|
182
169
|
</v-dialog>
|
|
@@ -346,6 +333,31 @@ onMounted(load);
|
|
|
346
333
|
</script>
|
|
347
334
|
|
|
348
335
|
<style scoped>
|
|
336
|
+
/* The handoff names no type for long-form intro copy or a summary line, so
|
|
337
|
+
both take the design's own secondary sizes rather than Vuetify's `text-h6`
|
|
338
|
+
/ `text-body-2` scale. */
|
|
339
|
+
.intro-copy {
|
|
340
|
+
font-size: var(--fs-cell);
|
|
341
|
+
margin-top: 6px;
|
|
342
|
+
}
|
|
343
|
+
|
|
344
|
+
.summary-line {
|
|
345
|
+
font-size: var(--fs-breadcrumb);
|
|
346
|
+
}
|
|
347
|
+
|
|
348
|
+
.channel-label {
|
|
349
|
+
font-family: var(--font-sans);
|
|
350
|
+
font-size: var(--fs-cell);
|
|
351
|
+
font-weight: var(--fw-cell);
|
|
352
|
+
color: var(--text);
|
|
353
|
+
}
|
|
354
|
+
|
|
355
|
+
.channel-note {
|
|
356
|
+
font-family: var(--font-sans);
|
|
357
|
+
font-size: var(--fs-breadcrumb);
|
|
358
|
+
color: var(--text2);
|
|
359
|
+
}
|
|
360
|
+
|
|
349
361
|
/* Unavailable channels are shown and explained, never hidden.
|
|
350
362
|
*
|
|
351
363
|
* They are NOT faded. The disabled switch already says the control cannot be
|
|
@@ -1,29 +1,27 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<v-row no-gutters>
|
|
3
|
-
<v-col cols="12"
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
3
|
+
<v-col cols="12">
|
|
4
|
+
<!--
|
|
5
|
+
The screen's name and its one primary action on the same line, which is
|
|
6
|
+
how the design opens every screen. "Configuration" is the app's own nav
|
|
7
|
+
label (Online Forms > Configuration), not invented copy. The page that
|
|
8
|
+
mounts this is a bare mount with no heading of its own.
|
|
9
|
+
-->
|
|
10
|
+
<PageHeader title="Configuration">
|
|
11
|
+
<template #actions>
|
|
12
|
+
<AppButton
|
|
13
|
+
v-if="canCreate && canCreateOnlineFormConfiguration"
|
|
14
|
+
@click="setOnlineForm()"
|
|
15
|
+
>
|
|
16
|
+
Add Online Form
|
|
17
|
+
</AppButton>
|
|
18
|
+
</template>
|
|
19
|
+
</PageHeader>
|
|
16
20
|
</v-col>
|
|
17
21
|
<v-col cols="12">
|
|
18
|
-
<
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
border="thin"
|
|
22
|
-
rounded="lg"
|
|
23
|
-
:loading="loading"
|
|
24
|
-
>
|
|
25
|
-
<v-toolbar density="compact" class="px-3 border-b-sm" color="transparent">
|
|
26
|
-
<template #prepend>
|
|
22
|
+
<AppCard class="table-card">
|
|
23
|
+
<CardToolbar :count="pageRange">
|
|
24
|
+
<template #left>
|
|
27
25
|
<v-btn
|
|
28
26
|
fab
|
|
29
27
|
icon
|
|
@@ -42,32 +40,25 @@
|
|
|
42
40
|
>
|
|
43
41
|
<v-icon>mdi-sort-alphabetical-ascending</v-icon>
|
|
44
42
|
</v-btn>
|
|
45
|
-
<
|
|
43
|
+
<AppField
|
|
46
44
|
v-model="search"
|
|
47
|
-
|
|
48
|
-
|
|
45
|
+
search
|
|
46
|
+
compact
|
|
49
47
|
placeholder="Search..."
|
|
50
|
-
|
|
51
|
-
clearable
|
|
52
|
-
hide-details
|
|
53
|
-
style="width: 220px; margin-left: 12px;"
|
|
48
|
+
klass="online-forms-config__search"
|
|
54
49
|
/>
|
|
55
50
|
</template>
|
|
56
51
|
|
|
57
|
-
<template #
|
|
58
|
-
<
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
v-model="page"
|
|
64
|
-
:length="pages"
|
|
65
|
-
@update:value="getOnlineFormConfigurations"
|
|
66
|
-
/>
|
|
67
|
-
</v-row>
|
|
52
|
+
<template #right>
|
|
53
|
+
<local-pagination
|
|
54
|
+
v-model="page"
|
|
55
|
+
:length="pages"
|
|
56
|
+
@update:value="getOnlineFormConfigurations"
|
|
57
|
+
/>
|
|
68
58
|
</template>
|
|
69
|
-
</
|
|
59
|
+
</CardToolbar>
|
|
70
60
|
<v-data-table
|
|
61
|
+
:loading="loading"
|
|
71
62
|
:headers="headers"
|
|
72
63
|
:items="sortedItems"
|
|
73
64
|
item-value="_id"
|
|
@@ -84,7 +75,7 @@
|
|
|
84
75
|
{{ item.status ? item.status.charAt(0).toUpperCase() + item.status.slice(1) : "N/A" }}
|
|
85
76
|
</template></v-data-table
|
|
86
77
|
>
|
|
87
|
-
</
|
|
78
|
+
</AppCard></v-col
|
|
88
79
|
>
|
|
89
80
|
|
|
90
81
|
<!-- Create Dialog -->
|
|
@@ -435,3 +426,11 @@ function successUpdate() {
|
|
|
435
426
|
}
|
|
436
427
|
|
|
437
428
|
</script>
|
|
429
|
+
|
|
430
|
+
<style scoped>
|
|
431
|
+
/* Same 240px cap the other in-toolbar search fields use, so the field does not
|
|
432
|
+
eat the toolbar's whole left side. */
|
|
433
|
+
.online-forms-config__search {
|
|
434
|
+
max-width: 240px;
|
|
435
|
+
}
|
|
436
|
+
</style>
|
|
@@ -35,8 +35,7 @@
|
|
|
35
35
|
/>
|
|
36
36
|
</span>
|
|
37
37
|
</v-row>
|
|
38
|
-
<
|
|
39
|
-
<v-card-text>
|
|
38
|
+
<AppCard class="mt-2 pa-4">
|
|
40
39
|
<template
|
|
41
40
|
v-for="(slot, index) in overnightParkingSlotsArray"
|
|
42
41
|
:key="slot.day"
|
|
@@ -44,9 +43,12 @@
|
|
|
44
43
|
<v-row no-gutters class="mb-4">
|
|
45
44
|
<v-col
|
|
46
45
|
cols="12"
|
|
47
|
-
class="text-capitalize mb-2
|
|
46
|
+
class="text-capitalize mb-2 d-flex align-center justify-space-between"
|
|
48
47
|
>
|
|
49
|
-
<span class="
|
|
48
|
+
<span class="screen-card-title">{{ slot.day }}</span>
|
|
49
|
+
<!-- `black-lighten-1` is a literal black: on the dark theme
|
|
50
|
+
the off state was a black tick on a #1c1e24 card. Both
|
|
51
|
+
states take a token now. -->
|
|
50
52
|
<v-icon
|
|
51
53
|
:icon="
|
|
52
54
|
slot?.isEnabled
|
|
@@ -54,10 +56,10 @@
|
|
|
54
56
|
: 'mdi-check-circle-outline'
|
|
55
57
|
"
|
|
56
58
|
size="20"
|
|
57
|
-
:class="
|
|
58
|
-
|
|
59
|
-
slot.isEnabled ? '
|
|
60
|
-
"
|
|
59
|
+
:class="[
|
|
60
|
+
{ 'cursor-pointer': !viewMode },
|
|
61
|
+
slot.isEnabled ? 'day-tick--on' : 'day-tick--off',
|
|
62
|
+
]"
|
|
61
63
|
@click="!viewMode && toggleEnabled(slot.day)"
|
|
62
64
|
/>
|
|
63
65
|
</v-col>
|
|
@@ -91,7 +93,7 @@
|
|
|
91
93
|
|
|
92
94
|
<v-col v-if="!viewMode" cols="12" class="mt-1">
|
|
93
95
|
<div
|
|
94
|
-
class="d-flex align-center ga-1 cursor-pointer
|
|
96
|
+
class="d-flex align-center ga-1 cursor-pointer screen-hint apply-link"
|
|
95
97
|
@click="applyToOtherDays(slot.day)"
|
|
96
98
|
>
|
|
97
99
|
<v-icon icon="mdi-content-copy" size="14" />
|
|
@@ -107,10 +109,10 @@
|
|
|
107
109
|
</template>
|
|
108
110
|
|
|
109
111
|
<v-col cols="12" align="end">
|
|
112
|
+
<!-- Stays a `v-btn`: `:loading` is the only in-flight signal on
|
|
113
|
+
this form and AppButton has none. Tokenised instead. -->
|
|
110
114
|
<v-btn
|
|
111
|
-
|
|
112
|
-
class="text-none mt-2"
|
|
113
|
-
size="large"
|
|
115
|
+
class="screen-btn-primary mt-2"
|
|
114
116
|
:loading="loading.updating"
|
|
115
117
|
variant="flat"
|
|
116
118
|
text="Save"
|
|
@@ -118,8 +120,7 @@
|
|
|
118
120
|
@click="handleSave('save')"
|
|
119
121
|
/>
|
|
120
122
|
</v-col>
|
|
121
|
-
|
|
122
|
-
</v-card>
|
|
123
|
+
</AppCard>
|
|
123
124
|
</v-col>
|
|
124
125
|
</v-row>
|
|
125
126
|
</v-form>
|
|
@@ -132,12 +133,10 @@
|
|
|
132
133
|
/>
|
|
133
134
|
|
|
134
135
|
<v-dialog v-model="applyDialog.open" max-width="360" persistent>
|
|
135
|
-
<v-card>
|
|
136
|
-
<v-card-title class="
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
<v-card-text class="px-4 pb-2">
|
|
140
|
-
<p class="text-caption text-medium-emphasis mb-3">
|
|
136
|
+
<v-card class="screen-modal">
|
|
137
|
+
<v-card-title class="pt-4 px-4">Apply to days</v-card-title>
|
|
138
|
+
<v-card-text class="screen-modal__body px-4 pb-2">
|
|
139
|
+
<p class="screen-hint apply-link mb-3">
|
|
141
140
|
Select the days to apply
|
|
142
141
|
<span class="font-weight-bold text-capitalize">{{
|
|
143
142
|
applyDialog.sourceDay
|
|
@@ -154,21 +153,45 @@
|
|
|
154
153
|
class="text-capitalize"
|
|
155
154
|
/>
|
|
156
155
|
</v-card-text>
|
|
157
|
-
|
|
156
|
+
<!-- `ga-2`: v-card-actions only spaces `.v-btn` children, and these are
|
|
157
|
+
the design's own buttons - without it Cancel and Apply touch. -->
|
|
158
|
+
<v-card-actions class="px-4 pb-4 ga-2">
|
|
158
159
|
<v-spacer />
|
|
159
|
-
<
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
160
|
+
<AppButton variant="ghost" @click="applyDialog.open = false">
|
|
161
|
+
Cancel
|
|
162
|
+
</AppButton>
|
|
163
|
+
<AppButton
|
|
163
164
|
:disabled="!applyDialog.targetDays.some((d) => d.selected)"
|
|
164
165
|
@click="confirmApply"
|
|
165
|
-
>Apply</v-btn
|
|
166
166
|
>
|
|
167
|
+
Apply
|
|
168
|
+
</AppButton>
|
|
167
169
|
</v-card-actions>
|
|
168
170
|
</v-card>
|
|
169
171
|
</v-dialog>
|
|
170
172
|
</template>
|
|
171
173
|
|
|
174
|
+
<style scoped>
|
|
175
|
+
/* The prototype names no colour for a per-day enable tick, so it takes the
|
|
176
|
+
design's own success / muted semantics rather than two literal Vuetify
|
|
177
|
+
greys - the off state was `black-lighten-1`, which stayed black on the dark
|
|
178
|
+
theme's card. */
|
|
179
|
+
.day-tick--on {
|
|
180
|
+
/* `--ok`, not `--success`: the token is named for the design's tone, and an
|
|
181
|
+
undefined custom property makes the whole declaration invalid, so the tick
|
|
182
|
+
silently inherited `--text` instead. */
|
|
183
|
+
color: var(--ok);
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
.day-tick--off {
|
|
187
|
+
color: var(--muted);
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
.apply-link {
|
|
191
|
+
font-size: var(--fs-breadcrumb);
|
|
192
|
+
}
|
|
193
|
+
</style>
|
|
194
|
+
|
|
172
195
|
<script setup lang="ts">
|
|
173
196
|
const props = defineProps({
|
|
174
197
|
viewMode: {
|
|
@@ -152,7 +152,10 @@
|
|
|
152
152
|
Delivery Companies
|
|
153
153
|
</v-expansion-panel-title>
|
|
154
154
|
<v-expansion-panel-text class="">
|
|
155
|
-
|
|
155
|
+
<!-- The panel above already names this section, and the component
|
|
156
|
+
prints its own name unless told not to - so without hide-title
|
|
157
|
+
the words "Delivery Companies" appear twice on the open panel. -->
|
|
158
|
+
<DeliveryCompany :site="siteId" hide-title v-model:initial="deliveryCompanies" @refresh-site="refreshSiteData"
|
|
156
159
|
@update:companiesValue="handleUpdateCompanies" :read-only="!canManageSiteSettings" />
|
|
157
160
|
</v-expansion-panel-text>
|
|
158
161
|
</v-expansion-panel>
|