@7365admin1/layer-common 3.2.2-staging.78 → 3.2.2-staging.79

package/.changeset/notification-preferences.md

@@ -0,0 +1,17 @@
+---
+"@7365admin1/layer-common": patch
+---
+
+Add a Notification Settings screen, shared by every web app.
+
+A person can now choose, per module and per delivery route, what they hear
+about: in the app, on their phone, or by email. The screen only lists modules
+their role actually gives them, and a route a module cannot use is shown dimmed
+with the reason in plain words rather than hidden.
+
+Modules are collapsed by default with a one-line summary of what is on, so
+somebody with many modules gets a short list instead of thirty switches. There
+is a master control for everything and one per module.
+
+The choices are enforced where notifications are sent, in `@7365admin1/core` and
+in the API, so a switch here actually stops the message.

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/composables/useNotificationPreference.ts

@@ -0,0 +1,87 @@
+/**
+ * A person's own notification settings.
+ *
+ * The server decides everything that matters here: which categories this person
+ * is offered, which channels each one can actually reach them on, and what the
+ * words are. Nothing on this side maintains a second list — a screen that made
+ * up its own module names is how the previous version came to show three
+ * switches that governed nothing.
+ *
+ * There is no user id in either call. Whose settings these are comes from the
+ * session, so a person can only ever see and change their own.
+ */
+
+export type TNotificationChannelSetting = {
+  key: string;
+  label: string;
+  /** false = this category cannot reach them this way; drawn, dimmed, explained */
+  supported: boolean;
+  /** the plain-English reason, present only when unsupported */
+  note?: string;
+  enabled: boolean;
+};
+
+export type TNotificationCategorySetting = {
+  key: string;
+  label: string;
+  description: string;
+  safety: boolean;
+  channels: TNotificationChannelSetting[];
+};
+
+export type TNotificationPreferences = {
+  channels: Array<{ key: string; label: string }>;
+  categories: TNotificationCategorySetting[];
+};
+
+const EMPTY: TNotificationPreferences = { channels: [], categories: [] };
+
+export default function useNotificationPreference() {
+  function getPreferences() {
+    return useNuxtApp().$api<{ data: TNotificationPreferences }>(
+      "/api/notification-preferences",
+      { method: "GET" },
+    );
+  }
+
+  /**
+   * Save the whole screen at once.
+   *
+   * What is sent is the list of switches that are OFF, which is also how the
+   * server stores it: somebody who has changed nothing has no stored row at
+   * all, and behaves exactly as they did before this screen existed.
+   */
+  function savePreferences(preferences: TNotificationPreferences) {
+    const off = preferences.categories.flatMap((category) =>
+      category.channels
+        .filter((channel) => channel.supported && !channel.enabled)
+        .map((channel) => ({ category: category.key, channel: channel.key })),
+    );
+
+    return useNuxtApp().$api<{ data: TNotificationPreferences }>(
+      "/api/notification-preferences",
+      { method: "PUT", body: { off } },
+    );
+  }
+
+  return { getPreferences, savePreferences, EMPTY_PREFERENCES: EMPTY };
+}
+
+/**
+ * The sentence shown when somebody switches a safety or security alert off.
+ *
+ * It says what will stop arriving and how to undo it, and it does not argue —
+ * the owner's decision is that these can be switched off, so the job here is to
+ * make sure nobody does it by accident, not to talk them out of it.
+ */
+export function safetyOffConfirmation(categoryLabel: string, channelLabel: string) {
+  return {
+    title: `Turn off ${categoryLabel}?`,
+    body:
+      `You will stop getting ${categoryLabel.toLowerCase()} alerts under "${channelLabel}". ` +
+      `These are safety and security alerts, so they are on for everyone by default. ` +
+      `You can turn them back on here at any time.`,
+    confirm: "Turn it off",
+    cancel: "Keep it on",
+  };
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.2.2-staging.78",
+  "version": "3.2.2-staging.79",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "publishConfig": {

package/pages/notification-settings.vue

@@ -0,0 +1,19 @@
+<template>
+  <NotificationSettings />
+</template>
+
+<script setup lang="ts">
+/**
+ * Notification settings, reachable from Profile.
+ *
+ * The page lives in the shared layer so every web app has the route and there
+ * is only one screen to keep correct; the link to it sits in Profile, in the
+ * account app, which is where "Manage Account" already sends everybody.
+ */
+definePageMeta({
+  middleware: ["01-auth"],
+});
+
+const { authenticate } = useLocalAuth();
+authenticate();
+</script>