@7365admin1/layer-common 3.2.2-staging.102 → 3.2.2-staging.104

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.
@@ -1,84 +1,73 @@
1
1
  <template>
2
- <v-row no-gutters>
3
- <v-col cols="12" class="mb-2">
4
- <v-row no-gutters align="center" justify="space-between">
5
- <v-row no-gutters class="ga-2">
6
- <v-btn
7
- class="text-none"
8
- rounded="pill"
9
- variant="tonal"
10
- size="large"
2
+ <v-row no-gutters class="qr-tagging">
3
+ <v-col cols="12">
4
+ <!--
5
+ The design opens the screen with its name and the screen's actions on
6
+ that one row. The three buttons used to be `tonal` pills floating above
7
+ the card with no heading at all - and their labels measured 1.74:1
8
+ light / 2.18:1 dark on that fill. As `AppButton` they read from the
9
+ tokens. Same three clicks, same `disabled` rules; the primary action
10
+ sits rightmost, where the design puts it.
11
+ -->
12
+ <PageHeader title="QR Tagging">
13
+ <template #actions>
14
+ <AppButton
15
+ variant="ghost"
11
16
  :disabled="!items.length"
12
17
  @click="handlePrintAll"
13
18
  >
14
19
  Print All
15
- </v-btn>
16
- <v-btn
17
- class="text-none"
18
- rounded="pill"
19
- variant="tonal"
20
- size="large"
21
- :disabled="!qrCodeAccessCards.length"
22
- @click="generateQrCodes"
23
- >
24
- Generate QR Code
25
- </v-btn>
26
- <v-btn
27
- class="text-none"
28
- rounded="pill"
29
- variant="tonal"
30
- size="large"
20
+ </AppButton>
21
+ <AppButton
22
+ variant="ghost"
31
23
  :disabled="!qrCodeAccessCardsToPrint.length"
32
24
  @click="handlePrintQrCode"
33
25
  >
34
26
  Print QR Code
35
- </v-btn>
36
- </v-row>
37
-
38
- <v-row no-gutters class="ga-2" justify="end" style="max-width: 420px">
39
- <v-text-field
40
- v-model="searchText"
41
- placeholder="Search Card..."
42
- variant="outlined"
43
- density="comfortable"
44
- clearable
45
- hide-details
46
- style="max-width: 240px"
47
- />
48
- </v-row>
49
- </v-row>
27
+ </AppButton>
28
+ <AppButton
29
+ :disabled="!qrCodeAccessCards.length"
30
+ @click="generateQrCodes"
31
+ >
32
+ Generate QR Code
33
+ </AppButton>
34
+ </template>
35
+ </PageHeader>
50
36
  </v-col>
51
37
 
52
38
  <v-col cols="12" v-if="canViewAllQrTagging">
53
- <v-card
54
- width="100%"
55
- variant="outlined"
56
- border="thin"
57
- rounded="lg"
58
- :loading="loading"
59
- >
60
- <v-toolbar density="compact" class="px-3 border-b-sm" color="transparent">
61
- <template #prepend>
39
+ <AppCard class="table-card">
40
+ <!--
41
+ ONE toolbar. The refresh button and the search keep their own
42
+ behaviour; the page range is the toolbar's own count rather than a
43
+ `text-fontgray` caption, and the pager keeps its model and its
44
+ `@update:value`.
45
+ -->
46
+ <CardToolbar :count="pageRange">
47
+ <template #left>
62
48
  <v-btn fab icon density="comfortable" @click="fetchItems">
63
49
  <v-icon>mdi-refresh</v-icon>
64
50
  </v-btn>
51
+ <AppField
52
+ v-model="searchText"
53
+ search
54
+ compact
55
+ placeholder="Search Card..."
56
+ klass="qr-tagging__search"
57
+ />
65
58
  </template>
66
59
 
67
- <template #append>
68
- <v-row no-gutters justify="end" align="center">
69
- <span class="mr-2 text-caption text-fontgray">
70
- {{ pageRange }}
71
- </span>
72
- <local-pagination
73
- v-model="page"
74
- :length="pages"
75
- @update:value="fetchItems"
76
- />
77
- </v-row>
60
+ <template #right>
61
+ <local-pagination
62
+ v-model="page"
63
+ :length="pages"
64
+ @update:value="fetchItems"
65
+ />
78
66
  </template>
79
- </v-toolbar>
67
+ </CardToolbar>
80
68
 
81
69
  <v-data-table
70
+ :loading="loading"
82
71
  :headers="tableHeaders"
83
72
  :items="items"
84
73
  item-value="_id"
@@ -149,7 +138,7 @@
149
138
  />
150
139
  </template>
151
140
  </v-data-table>
152
- </v-card>
141
+ </AppCard>
153
142
  </v-col>
154
143
 
155
144
  <!-- Hidden QR canvases for generation -->
@@ -468,3 +457,11 @@ function showMessage(msg: string, color: string) {
468
457
  messageSnackbar.value = true;
469
458
  }
470
459
  </script>
460
+
461
+ <style scoped>
462
+ /* The search kept its old 240px ceiling; `.app-field--search` is `flex:1` so
463
+ it would otherwise fill the toolbar row. */
464
+ .qr-tagging__search {
465
+ max-width: 240px;
466
+ }
467
+ </style>
@@ -363,14 +363,18 @@ function setBuildingUnit() {
363
363
  buildingUnit.value.companyRegistrationNumber = "";
364
364
  buildingUnit.value.leaseStart = "";
365
365
  buildingUnit.value.leaseEnd = "";
366
+ unitLabels.value = ["Unit 1"];
366
367
  }
367
368
 
368
369
  async function submit() {
369
370
  disable.value = true;
370
371
  const { buildingUnitFiles, companyName, companyRegistrationNumber, leaseStart, leaseEnd, ...rest } = buildingUnit.value;
372
+ const labels = unitLabels.value.map((label) => label.trim());
373
+ rest.name = labels[0] || rest.name;
374
+
371
375
  try {
372
376
  await add({
373
- labels: unitLabels.value,
377
+ labels,
374
378
  unit: rest,
375
379
  qty: buildingUnitQty.value,
376
380
  });
@@ -1,6 +1,11 @@
1
1
  <template>
2
2
  <v-row no-gutters>
3
- <TableMain :headers="headers" :items="items" :loading="loading" :page="page" :pages="pages" :pageRange="pageRange"
3
+ <!--
4
+ The screen had no heading at all - the page name lived only in the
5
+ navigation rail. `TableMain` draws the design's 22px/800 title row with
6
+ the create button on that same line, so the title is all this needs.
7
+ -->
8
+ <TableMain title="Overnight Parking" :headers="headers" :items="items" :loading="loading" :page="page" :pages="pages" :pageRange="pageRange"
4
9
  :createLabel="createLabel" :show-header="true" :extension-height="extensionHeight" :offset="offset"
5
10
  v-model:search="searchInput" @refresh="emits('refresh')" @create="emits('create')" @row-click="handleRowClick"
6
11
  @update:page="handleUpdatePage">
@@ -37,10 +42,15 @@
37
42
  {{ formatDateDDMMYYYYLocal(value) }}
38
43
  </template>
39
44
 
45
+ <!--
46
+ The same four words, the same four meanings - approved/expired/
47
+ rejected/pending map to ok/neutral/err/warn in `utils/status.ts`,
48
+ which is the exact pairing `formatStatus` already made. The shared
49
+ chip's tones are the measured ones, so the label reads at AA in both
50
+ themes; a `flat` `v-chip` painted a Vuetify colour does not.
51
+ -->
40
52
  <template #item.status="{ value }">
41
- <v-chip class="text-capitalize" :color="formatStatus(value).color" density="compact" variant="flat" pill>
42
- {{ formatStatus(value).label }}
43
- </v-chip>
53
+ <StatusChip :status="value" :label="formatStatus(value).label" />
44
54
  </template>
45
55
 
46
56
  <template #item.action="{ item }">
@@ -1,5 +1,17 @@
1
1
  <template>
2
2
  <v-row no-gutters>
3
+ <!--
4
+ The accordion was tokenised in an earlier batch but the screen still
5
+ opened with no name on it. "Settings" is the two apps' OWN navigation
6
+ label, and both wrappers (`-property-management` and `-security`
7
+ `settings.vue`) are bare mounts with no heading of their own, so the
8
+ title belongs here. No action on this row - the screen's saves live
9
+ inside their own sections.
10
+ -->
11
+ <v-col cols="12">
12
+ <PageHeader title="Settings" />
13
+ </v-col>
14
+
3
15
  <!--
4
16
  The design draws settings as a stack of bordered sections with one open
5
17
  at a time. `multiple` is BEHAVIOUR - which sections a user may have open
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@7365admin1/layer-common",
3
3
  "license": "MIT",
4
4
  "type": "module",
5
- "version": "3.2.2-staging.102",
5
+ "version": "3.2.2-staging.104",
6
6
  "author": "7365admin1",
7
7
  "main": "./nuxt.config.ts",
8
8
  "publishConfig": {