@7365admin1/layer-common 3.2.1-staging.75 → 3.2.2-staging.100

package/components/Nfc/NFCPatrolRouteMain.vue

@@ -1,85 +1,71 @@
 <template>
   <v-row no-gutters>
     <v-col cols="12">
-      <v-row no-gutters class="mb-4" align="center">
-        <v-col cols="12" md="6">
-          <v-btn
+      <!-- Title row; nav calls this screen "Routes". The Add pill moves onto it
+           and the search onto the card's toolbar, where the design draws them. -->
+      <PageHeader title="Routes">
+        <template #actions>
+          <AppButton
             v-if="props.canCreateNfcPatrol"
-            rounded="pill"
-            variant="outlined"
-  
-            size="large"
-            class="text-none px-8"
+            icon="mdi-plus"
             @click="dialogAdd = true"
           >
             Add Route
-          </v-btn>
-        </v-col>
-        <v-col cols="12" md="6" class="d-flex justify-end">
-          <v-text-field
+          </AppButton>
+        </template>
+      </PageHeader>
+
+      <!--
+        Was `v-card` + `v-data-table` + a `grey-lighten-4` `v-toolbar` BELOW the
+        table holding the page range and pager (a white slab that stayed white in
+        dark mode). `TableMain` draws the same card with that row on top, which
+        is where the design puts it. Same headers, items, page size, row click
+        and item slots; the refresh button is wired to the refresh this screen
+        already calls after add/edit.
+      -->
+      <TableMain
+        :headers="headers"
+        :items="items"
+        :page="page"
+        :pages="pages"
+        :pageRange="pageRange"
+        show-header
+        @refresh="getRoutesRefresh()"
+        @update:page="page = $event"
+        @row-click="(data: any) => handleRowClick(null, data)"
+      >
+        <template #prepend-additional>
+          <AppField
             v-model="searchInput"
-            density="comfortable"
+            search
+            compact
             placeholder="Search"
-            clearable
-            append-inner-icon="mdi-magnify"
-            hide-details
-            variant="outlined"
-            rounded="lg"
-            style="max-width: 400px"
-            bg-color="white"
+            klass="app-toolbar__search"
           />
-        </v-col>
-      </v-row>
-
-      <v-card width="100%" variant="outlined" border="thin" rounded="lg">
-
-        <v-card-text class="pa-0">
-          <v-data-table
-            :headers="headers"
-            :items="items"
-            :items-per-page="20"
-            fixed-header
-            hide-default-footer
-            @click:row="handleRowClick"
-            style="max-height: calc(100vh - 300px)"
-            class="nfc-route-table"
-            hover
-          >
-            <template #item.numberOfCheckpoints="{ value }">
-              <div class="text-center">{{ value || "--" }}</div>
-            </template>
-
-            <template #item.tolerance="{ item }">
-              <div class="text-center">
-                <div>{{ item.tolerance ? `${item.tolerance} mins` : "--" }}</div>
-                <div class="text-grey">{{ item.totalTravelTime ? `${item.totalTravelTime} mins` : "--" }}</div>
-              </div>
-            </template>
-
-            <template #item.schedules="{ value }">
-              <span v-if="Array.isArray(value) && value.length > 0">
-                {{ value.map(s => `${s.start}-${s.end}`).join(", ") }}
-              </span>
-              <span v-else>--</span>
-            </template>
-
-            <template #item.repeatDays="{ value }">
-              <span>{{ value || "--" }} </span>
-            </template>
-          </v-data-table>
-        </v-card-text>
-
-        <v-toolbar density="compact" color="grey-lighten-4">
-          <template #append>
-            <v-row no-gutters justify="end" align="center">
-              <span class="mr-2 text-caption text-fontgray">
-                {{ pageRange }}
-              </span>
-              <local-pagination v-model="page" :length="pages" />
-            </v-row>
-          </template>
-        </v-toolbar>
-      </v-card>
+        </template>
+
+        <template #item.numberOfCheckpoints="{ value }">
+          <div class="text-center">{{ value || "--" }}</div>
+        </template>
+
+        <template #item.tolerance="{ item }">
+          <div class="text-center">
+            <div>{{ item.tolerance ? `${item.tolerance} mins` : "--" }}</div>
+            <div class="text-grey">{{ item.totalTravelTime ? `${item.totalTravelTime} mins` : "--" }}</div>
+          </div>
+        </template>
+
+        <template #item.schedules="{ value }">
+          <span v-if="Array.isArray(value) && value.length > 0">
+            {{ value.map((s: any) => `${s.start}-${s.end}`).join(", ") }}
+          </span>
+          <span v-else>--</span>
+        </template>
+
+        <template #item.repeatDays="{ value }">
+          <span>{{ value || "--" }} </span>
+        </template>
+      </TableMain>
     </v-col>
 
     <!-- Add Dialog -->
@@ -558,27 +544,9 @@ async function submitDelete() {
   }
 }
 </script>
-
-<style scoped>
-.nfc-route-table :deep(.v-data-table__th) {
-  background-color: rgb(250, 250, 250);
-  font-weight: 500;
-  white-space: pre-line;
-  padding: 16px 12px !important;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-}
-
-.nfc-route-table :deep(.v-data-table__td) {
-  padding: 16px 12px !important;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-}
-
-.nfc-route-table :deep(tbody tr:hover) {
-  background-color: rgba(0, 0, 0, 0.02) !important;
-  cursor: pointer;
-}
-
-.nfc-route-table :deep(.v-data-table__tr) {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-}
-</style>
+<!--
+  The screen's own table CSS is gone with the `v-data-table` it styled: it
+  hardcoded an `rgb(250,250,250)` header fill and black-alpha borders, which
+  stay light in dark mode. `TableMain` draws the design's header row and
+  borders from the theme tokens instead.
+-->

package/components/NotificationSettings.vue

@@ -0,0 +1,361 @@
+<template>
+  <v-row no-gutters class="pa-8" justify="center">
+    <v-col cols="12" md="10">
+      <v-row no-gutters>
+        <v-col cols="12" class="text-h5">Notifications</v-col>
+
+        <v-col cols="12" md="8" class="mt-4 font-weight-light">
+          Choose what you want to hear about, and how. These settings are yours
+          alone and apply everywhere you use iService — on this site and on your
+          phone.
+        </v-col>
+
+        <!-- loading -->
+        <v-col v-if="loading" cols="12" class="mt-8">
+          <v-skeleton-loader type="list-item-two-line@4" />
+        </v-col>
+
+        <!-- could not load -->
+        <v-col v-else-if="loadError" cols="12" class="mt-8">
+          <v-alert type="error" variant="tonal" rounded="lg">
+            {{ loadError }}
+          </v-alert>
+        </v-col>
+
+        <!-- nothing to offer -->
+        <v-col v-else-if="!categories.length" cols="12" class="mt-8">
+          <v-alert type="info" variant="tonal" rounded="lg">
+            You are not set up to receive any notifications yet. Once you are
+            given access to a part of the system, its settings will appear here.
+          </v-alert>
+        </v-col>
+
+        <template v-else>
+          <!-- everything, at once -->
+          <v-col cols="12" class="mt-8">
+            <v-card
+              width="100%"
+              border="grey-darken-3 sm"
+              variant="outlined"
+              rounded="lg"
+            >
+              <v-row no-gutters align="center" class="pa-6">
+                <v-col cols="12" sm="8">
+                  <div class="text-h6">Everything</div>
+                  <div class="text-body-2 text-medium-emphasis mt-1">
+                    {{ everythingSummary }}
+                  </div>
+                </v-col>
+                <v-col cols="12" sm="4" class="d-flex justify-sm-end mt-3 mt-sm-0">
+                  <v-btn
+                    variant="tonal"
+                    rounded="xl"
+                    class="text-none"
+                    :disabled="saving"
+                    @click="setAll(!allOn)"
+                  >
+                    {{ allOn ? "Turn everything off" : "Turn everything on" }}
+                  </v-btn>
+                </v-col>
+              </v-row>
+            </v-card>
+          </v-col>
+
+          <!-- one panel per module, collapsed by default so a person with many
+               modules gets a short list rather than a wall of switches -->
+          <v-col cols="12" class="mt-4">
+            <v-expansion-panels variant="accordion" multiple>
+              <v-expansion-panel
+                v-for="category in categories"
+                :key="category.key"
+                :value="category.key"
+                elevation="0"
+                class="border-sm rounded-lg mb-2"
+              >
+                <v-expansion-panel-title>
+                  <v-row no-gutters align="center">
+                    <v-col cols="12" sm="6">
+                      <span class="text-subtitle-1 font-weight-medium">
+                        {{ category.label }}
+                      </span>
+                      <v-chip
+                        v-if="category.safety"
+                        size="x-small"
+                        class="ml-2"
+                        variant="tonal"
+                        color="info"
+                      >
+                        Safety
+                      </v-chip>
+                    </v-col>
+                    <v-col
+                      cols="12"
+                      sm="6"
+                      class="text-body-2 text-medium-emphasis"
+                    >
+                      {{ summaryFor(category) }}
+                    </v-col>
+                  </v-row>
+                </v-expansion-panel-title>
+
+                <v-expansion-panel-text>
+                  <div class="text-body-2 text-medium-emphasis mb-4">
+                    {{ category.description }}
+                  </div>
+
+                  <v-btn
+                    size="small"
+                    variant="outlined"
+                    rounded="xl"
+                    class="text-none mb-4"
+                    :disabled="saving || !switchableIn(category).length"
+                    @click="setCategory(category, !categoryAllOn(category))"
+                  >
+                    {{
+                      categoryAllOn(category)
+                        ? "Turn all off for " + category.label
+                        : "Turn all on for " + category.label
+                    }}
+                  </v-btn>
+
+                  <!-- one channel per row: a switch must never sit beside the
+                       NEXT channel's label, which is what a three-up grid does -->
+                  <v-row no-gutters>
+                    <v-col
+                      v-for="(channel, index) in category.channels"
+                      :key="channel.key"
+                      cols="12"
+                      :class="index < category.channels.length - 1 ? 'border-b-thin' : ''"
+                    >
+                      <div
+                        class="d-flex align-center justify-space-between py-2"
+                        :class="{ 'channel-unavailable': !channel.supported }"
+                      >
+                        <div class="pr-4">
+                          <div class="text-body-1">{{ channel.label }}</div>
+                          <div v-if="!channel.supported" class="text-caption mt-1">
+                            {{ channel.note }}
+                          </div>
+                        </div>
+
+                        <v-switch
+                          :model-value="channel.enabled"
+                          :disabled="!channel.supported || saving"
+                          color="primary"
+                          hide-details
+                          density="compact"
+                          :aria-label="`${channel.label} for ${category.label}`"
+                          @update:model-value="
+                            (value) => onToggle(category, channel, !!value)
+                          "
+                        />
+                      </div>
+                    </v-col>
+                  </v-row>
+                </v-expansion-panel-text>
+              </v-expansion-panel>
+            </v-expansion-panels>
+          </v-col>
+        </template>
+      </v-row>
+    </v-col>
+
+    <!-- switching a safety alert off: say plainly what stops arriving -->
+    <v-dialog v-model="confirmOpen" max-width="460" persistent>
+      <v-card rounded="lg" class="pa-2">
+        <v-card-title class="text-h6">{{ confirmText.title }}</v-card-title>
+        <v-card-text class="text-body-1">{{ confirmText.body }}</v-card-text>
+        <v-card-actions class="justify-end">
+          <v-btn variant="text" class="text-none" @click="cancelConfirm">
+            {{ confirmText.cancel }}
+          </v-btn>
+          <v-btn
+            color="primary"
+            variant="tonal"
+            class="text-none"
+            @click="acceptConfirm"
+          >
+            {{ confirmText.confirm }}
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <v-snackbar v-model="noticeOpen" :timeout="4000" location="bottom">
+      {{ notice }}
+    </v-snackbar>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+import type {
+  TNotificationCategorySetting,
+  TNotificationChannelSetting,
+} from "../composables/useNotificationPreference";
+
+const { getPreferences, savePreferences } = useNotificationPreference();
+
+const categories = ref<TNotificationCategorySetting[]>([]);
+const loading = ref(true);
+const saving = ref(false);
+const loadError = ref("");
+const notice = ref("");
+const noticeOpen = ref(false);
+
+const confirmOpen = ref(false);
+const confirmText = ref({ title: "", body: "", confirm: "", cancel: "" });
+let confirmAccept: (() => void) | null = null;
+
+/** the channels a person can actually move on this category */
+const switchableIn = (category: TNotificationCategorySetting) =>
+  category.channels.filter((c) => c.supported);
+
+const categoryAllOn = (category: TNotificationCategorySetting) =>
+  switchableIn(category).every((c) => c.enabled);
+
+const allOn = computed(
+  () =>
+    categories.value.length > 0 &&
+    categories.value.every((category) => categoryAllOn(category)),
+);
+
+/** what is on, in words — so a collapsed panel still says what it is doing */
+function summaryFor(category: TNotificationCategorySetting) {
+  const on = switchableIn(category).filter((c) => c.enabled);
+  if (!on.length) return "Off";
+  if (on.length === switchableIn(category).length) return "On everywhere";
+  return `On: ${on.map((c) => c.label).join(", ")}`;
+}
+
+const everythingSummary = computed(() => {
+  const total = categories.value.length;
+  const on = categories.value.filter((c) => categoryAllOn(c)).length;
+  if (on === total) return "Everything is on.";
+  if (on === 0) return "Everything is off.";
+  return `${on} of ${total} fully on.`;
+});
+
+async function load() {
+  loading.value = true;
+  loadError.value = "";
+  try {
+    const res = await getPreferences();
+    categories.value = res.data.categories;
+  } catch {
+    loadError.value =
+      "We could not load your notification settings. Please refresh the page and try again.";
+  } finally {
+    loading.value = false;
+  }
+}
+
+/**
+ * Save the whole screen after any change, and put it back the way it was if the
+ * save fails — so what is on screen is never a setting the server did not take.
+ */
+async function persist(previous: TNotificationCategorySetting[]) {
+  saving.value = true;
+  try {
+    const res = await savePreferences({ channels: [], categories: categories.value });
+    categories.value = res.data.categories;
+    notice.value = "Saved.";
+  } catch {
+    categories.value = previous;
+    notice.value = "We could not save that change. Please try again.";
+  } finally {
+    noticeOpen.value = true;
+    saving.value = false;
+  }
+}
+
+const snapshot = () =>
+  JSON.parse(JSON.stringify(categories.value)) as TNotificationCategorySetting[];
+
+function apply(mutate: () => void) {
+  const previous = snapshot();
+  mutate();
+  void persist(previous);
+}
+
+function onToggle(
+  category: TNotificationCategorySetting,
+  channel: TNotificationChannelSetting,
+  value: boolean,
+) {
+  if (!channel.supported) return;
+
+  const commit = () => apply(() => (channel.enabled = value));
+
+  // switching a safety alert OFF is the only thing worth stopping to confirm
+  if (category.safety && !value) {
+    confirmText.value = safetyOffConfirmation(category.label, channel.label);
+    confirmAccept = commit;
+    confirmOpen.value = true;
+    return;
+  }
+
+  commit();
+}
+
+function setCategory(category: TNotificationCategorySetting, value: boolean) {
+  const commit = () =>
+    apply(() => {
+      for (const channel of switchableIn(category)) channel.enabled = value;
+    });
+
+  if (category.safety && !value) {
+    confirmText.value = safetyOffConfirmation(category.label, "every channel");
+    confirmAccept = commit;
+    confirmOpen.value = true;
+    return;
+  }
+
+  commit();
+}
+
+function setAll(value: boolean) {
+  const commit = () =>
+    apply(() => {
+      for (const category of categories.value) {
+        for (const channel of switchableIn(category)) channel.enabled = value;
+      }
+    });
+
+  if (!value && categories.value.some((c) => c.safety)) {
+    confirmText.value = safetyOffConfirmation("safety and security", "every channel");
+    confirmAccept = commit;
+    confirmOpen.value = true;
+    return;
+  }
+
+  commit();
+}
+
+function acceptConfirm() {
+  confirmOpen.value = false;
+  confirmAccept?.();
+  confirmAccept = null;
+}
+
+function cancelConfirm() {
+  confirmOpen.value = false;
+  confirmAccept = null;
+}
+
+onMounted(load);
+</script>
+
+<style scoped>
+/* Unavailable channels are shown and explained, never hidden.
+ *
+ * They are NOT faded. The disabled switch already says the control cannot be
+ * moved, and the sentence beside it is the only place a person is told why —
+ * dimming that sentence is dimming the explanation. A blanket opacity here
+ * measured 2.3:1 against the card, which is unreadable; the row is now marked
+ * by a rule down its edge instead, and every word stays at full strength. */
+.channel-unavailable {
+  border-left: 2px solid rgb(var(--v-border-color));
+  padding-left: 12px;
+  opacity: 1;
+}
+</style>

package/components/OnlineFormsConfiguration.vue

@@ -22,7 +22,7 @@
         rounded="lg"
         :loading="loading"
       >
-        <v-toolbar density="compact" color="grey-lighten-4">
+        <v-toolbar density="compact" class="px-3 border-b-sm" color="transparent">
           <template #prepend>
             <v-btn
               fab

package/components/PageHeader.vue

@@ -0,0 +1,43 @@
+<!--
+  THE PAGE TITLE ROW.
+
+  The design opens EVERY screen with this row: the page's name at 22px/800,
+  and the screen's primary action on the right of the same line. The product
+  has never had it - the page name lived only in the browser tab and in the
+  navigation rail - which is the single most visible difference between the
+  staging site and the handoff.
+
+  It is a label and a slot. It fetches nothing, decides nothing and navigates
+  nowhere; the action passed into it is the screen's own button.
+-->
+<template>
+  <div class="app-page-head">
+    <!-- A caller with actions but no page name (the shared table card, when the
+         screen has not given it a title) gets just the action group, at the
+         left, rather than an empty heading holding a line of blank space. -->
+    <div v-if="title || $slots.title || subtitle || $slots.subtitle">
+      <h1 class="app-page-head__title">
+        <slot name="title">{{ title }}</slot>
+      </h1>
+
+      <!-- The design's second line: a location, a count, a date range. Only
+           drawn when a screen supplies one. -->
+      <div v-if="subtitle || $slots.subtitle" class="app-page-head__sub">
+        <v-icon v-if="subtitleIcon" :icon="subtitleIcon" size="15" />
+        <slot name="subtitle">{{ subtitle }}</slot>
+      </div>
+    </div>
+
+    <div v-if="$slots.actions" class="app-page-head__actions">
+      <slot name="actions" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  title: { type: String, default: "" },
+  subtitle: { type: String, default: "" },
+  subtitleIcon: { type: String, default: "" },
+});
+</script>