@7365admin1/layer-common 3.2.7 → 3.2.8-staging.201

package/components/NotificationSettings.vue

@@ -0,0 +1,373 @@
+<template>
+  <v-row no-gutters class="pa-8" justify="center">
+    <v-col cols="12" md="10">
+      <v-row no-gutters>
+        <v-col cols="12">
+          <PageHeader title="Notifications" />
+        </v-col>
+
+        <v-col cols="12" md="8" class="screen-hint intro-copy">
+          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">
+            <AppCard>
+              <v-row no-gutters align="center" class="pa-6">
+                <v-col cols="12" sm="8">
+                  <div class="screen-card-title">Everything</div>
+                  <div class="screen-hint summary-line mt-1">
+                    {{ everythingSummary }}
+                  </div>
+                </v-col>
+                <v-col cols="12" sm="4" class="d-flex justify-sm-end mt-3 mt-sm-0">
+                  <AppButton
+                    variant="ghost"
+                    :disabled="saving"
+                    @click="setAll(!allOn)"
+                  >
+                    {{ allOn ? "Turn everything off" : "Turn everything on" }}
+                  </AppButton>
+                </v-col>
+              </v-row>
+            </AppCard>
+          </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 class="screen-accordion">
+              <v-expansion-panel
+                v-for="category in categories"
+                :key="category.key"
+                :value="category.key"
+                elevation="0"
+              >
+                <v-expansion-panel-title>
+                  <v-row no-gutters align="center">
+                    <v-col cols="12" sm="6">
+                      <span>{{ category.label }}</span>
+                      <!-- "Safety" is a TAG, not a status word, so it takes
+                           the handoff's tag chip - "small 7px-radius label" -
+                           which is the dotless shape, on the `info` tone the
+                           handoff assigns to "Role & info tags". A leading dot
+                           here would draw it as a status the screen does not
+                           have. -->
+                      <StatusChip
+                        v-if="category.safety"
+                        tone="info"
+                        label="Safety"
+                        :dot="false"
+                        class="ml-2"
+                      />
+                    </v-col>
+                    <v-col cols="12" sm="6" class="screen-hint summary-line">
+                      {{ summaryFor(category) }}
+                    </v-col>
+                  </v-row>
+                </v-expansion-panel-title>
+
+                <v-expansion-panel-text>
+                  <div class="screen-hint summary-line mb-4">
+                    {{ category.description }}
+                  </div>
+
+                  <AppButton
+                    variant="ghost"
+                    class="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
+                    }}
+                  </AppButton>
+
+                  <!-- 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="channel-label">{{ channel.label }}</div>
+                          <div v-if="!channel.supported" class="channel-note 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 class="screen-modal pa-2">
+        <v-card-title>{{ confirmText.title }}</v-card-title>
+        <v-card-text class="screen-modal__body">
+          {{ confirmText.body }}
+        </v-card-text>
+        <v-card-actions class="justify-end">
+          <AppButton variant="ghost" @click="cancelConfirm">
+            {{ confirmText.cancel }}
+          </AppButton>
+          <AppButton @click="acceptConfirm">
+            {{ confirmText.confirm }}
+          </AppButton>
+        </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>
+/* The handoff names no type for long-form intro copy or a summary line, so
+   both take the design's own secondary sizes rather than Vuetify's `text-h6`
+   / `text-body-2` scale. */
+.intro-copy {
+  font-size: var(--fs-cell);
+  margin-top: 6px;
+}
+
+.summary-line {
+  font-size: var(--fs-breadcrumb);
+}
+
+.channel-label {
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  font-weight: var(--fw-cell);
+  color: var(--text);
+}
+
+.channel-note {
+  font-family: var(--font-sans);
+  font-size: var(--fs-breadcrumb);
+  color: var(--text2);
+}
+
+/* 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/NumberSettingField.vue

@@ -4,11 +4,18 @@
             <v-row>
                 <v-col cols="6">
                     <InputLabel class="text-capitalize font-weight-bold" :title="title" :required="required" />
-                    <v-text-field v-model.number="count" type="number" density="comfortable" :rules="rules" :readonly="readOnly" />
+                    <v-text-field v-model.number="count" type="number" class="filter-field" density="comfortable" :rules="rules" :readonly="readOnly" />
                 </v-col>
 
                 <v-col cols="6">
-                    <v-btn v-if="!readOnly" color="primary" class="text-none mt-6" size="large" variant="flat"
+                    <!-- Was `color="primary" size="large"`. On a `v-btn`,
+                         `primary` is this theme's FOREGROUND token (links,
+                         icons, text buttons) - the fill is `primary-button`, so
+                         a flat button asking for `primary` painted itself with
+                         an ink colour. `.screen-btn-primary` is the design's
+                         40px primary and carries the correct fill, so the
+                         colour prop and the Vuetify size both go. -->
+                    <v-btn v-if="!readOnly" class="text-none mt-6 screen-btn-primary" variant="flat"
                         :disabled="!valid || disabled" :loading="loading || updating" text="Save" @click="handleSave" />
                 </v-col>
             </v-row>