@7365admin1/layer-common 4.119.0 → 4.121.0

package/components/HandoverChecklistSetup.vue

@@ -0,0 +1,224 @@
+<template>
+  <div data-test="handover-setup">
+    <div class="d-flex flex-wrap align-center ga-2 mb-4">
+      <p class="text-body-2 text-medium-emphasis mb-0 flex-grow-1">
+        One checklist per room or inspection. The site team uses it to hand the room over (before use) and take it back (after
+        use).
+      </p>
+      <template v-if="canEdit">
+        <v-menu>
+          <template #activator="{ props: menu }">
+            <v-btn v-bind="menu" variant="outlined" class="screen-btn-ghost" prepend-icon="mdi-file-document-outline"
+              text="Use a ready-made template" />
+          </template>
+          <v-list density="compact">
+            <v-list-item v-for="s in HANDOVER_STARTERS" :key="s.name" :title="s.name" @click="openEditor(s.template)" />
+          </v-list>
+        </v-menu>
+        <v-btn class="screen-btn-primary" color="primary-button" variant="flat" prepend-icon="mdi-plus"
+          text="Add checklist" @click="openEditor()" />
+      </template>
+    </div>
+
+    <v-progress-linear v-if="loading" indeterminate class="mb-2" />
+    <p v-else-if="!templates.length" class="text-body-2 text-medium-emphasis">
+      No checklists yet. The site team will not see room handover until you add one.
+    </p>
+
+    <AppCard v-for="t in templates" :key="t._id" class="mb-3 pa-4">
+      <div class="d-flex align-start ga-2">
+        <div class="flex-grow-1">
+          <div class="text-subtitle-1 font-weight-bold">{{ t.title }}</div>
+          <div v-if="t.description" class="text-body-2 text-medium-emphasis">{{ t.description }}</div>
+          <div class="text-caption text-medium-emphasis">{{ t.items.length }} item{{ t.items.length === 1 ? "" : "s" }}</div>
+        </div>
+        <template v-if="canEdit">
+          <v-btn icon="mdi-pencil" variant="text" size="small" aria-label="Edit" @click="openEditor(t)" />
+          <v-btn icon="mdi-delete" variant="text" size="small" aria-label="Remove" @click="remove(t)" />
+        </template>
+      </div>
+    </AppCard>
+
+    <v-dialog v-model="editor.show" max-width="760" scrollable>
+      <v-card>
+        <v-card-title>{{ editor.id ? "Edit checklist" : "New checklist" }}</v-card-title>
+        <v-card-text>
+          <v-form ref="form">
+            <v-text-field v-model.trim="editor.title" label="Room or inspection name" placeholder="e.g. Function room 1"
+              :rules="[required]" density="comfortable" variant="outlined" />
+            <v-textarea v-model.trim="editor.description" label="Instructions for the guard (optional)" rows="2"
+              auto-grow density="comfortable" variant="outlined" />
+
+            <div class="text-subtitle-2 mb-2">Items to check</div>
+            <div v-for="(item, i) in editor.items" :key="i" class="handover-item mb-3 pa-3">
+              <v-row dense>
+                <v-col cols="12" sm="6">
+                  <v-text-field v-model.trim="item.label" label="Description" :rules="[required]" density="compact"
+                    variant="outlined" hide-details="auto" />
+                </v-col>
+                <v-col cols="4" sm="2">
+                  <v-text-field v-model.number="item.quantity" label="Qty" type="number" min="0" density="compact"
+                    variant="outlined" hide-details />
+                </v-col>
+                <v-col cols="8" sm="4">
+                  <v-text-field v-model.trim="item.tagNo" label="Serial / tag no." placeholder="e.g. Chair 1-8"
+                    density="compact" variant="outlined" hide-details />
+                </v-col>
+              </v-row>
+              <div class="d-flex align-center ga-2 mt-2">
+                <v-img v-if="item.referencePhotoId" :src="getFileUrl(item.referencePhotoId)" width="56" height="56"
+                  max-width="56" cover class="rounded" />
+                <v-btn size="small" variant="text" prepend-icon="mdi-camera" :loading="uploading === i"
+                  :text="item.referencePhotoId ? 'Change reference photo' : 'Add reference photo'"
+                  @click="pickPhoto(i)" />
+                <v-btn v-if="item.referencePhotoId" size="small" variant="text" text="Remove photo"
+                  @click="item.referencePhotoId = null" />
+                <v-spacer />
+                <v-btn icon="mdi-close" size="small" variant="text" aria-label="Remove item"
+                  :disabled="editor.items.length === 1" @click="editor.items.splice(i, 1)" />
+              </div>
+            </div>
+            <v-btn variant="text" prepend-icon="mdi-plus" text="Add item" @click="editor.items.push(blankItem())" />
+          </v-form>
+          <input ref="fileInput" type="file" accept="image/*" hidden @change="uploadPhoto" />
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn text="Cancel" @click="editor.show = false" />
+          <v-btn class="screen-btn-primary" color="primary-button" variant="flat" text="Save" :loading="saving"
+            @click="save" />
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <Snackbar v-model="toast.show" :text="toast.message" :color="toast.color" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import useFile from "../composables/useFile";
+import useHandoverChecklist, {
+  HANDOVER_STARTERS,
+  type THandoverItem,
+  type THandoverTemplate,
+} from "../composables/useHandoverChecklist";
+
+const props = defineProps({
+  site: { type: String, required: true },
+  canEdit: { type: Boolean, default: false },
+});
+
+const { getTemplates, addTemplate, updateTemplate, deleteTemplate } = useHandoverChecklist();
+const { addFile, getFileUrl } = useFile();
+
+const templates = ref<THandoverTemplate[]>([]);
+const loading = ref(false);
+const saving = ref(false);
+const uploading = ref<number | null>(null);
+const form = ref<any>(null);
+const fileInput = ref<HTMLInputElement | null>(null);
+const toast = reactive({ show: false, message: "", color: "" });
+const required = (v: string) => !!v || "Required";
+const blankItem = (): THandoverItem => ({ label: "", quantity: null, tagNo: "", referencePhotoId: null });
+
+const editor = reactive({
+  show: false,
+  id: "" as string | undefined,
+  title: "",
+  description: "",
+  items: [] as THandoverItem[],
+});
+
+function notify(message: string, color = "success") {
+  Object.assign(toast, { show: true, message, color });
+}
+
+async function load() {
+  loading.value = true;
+  try {
+    templates.value = (await getTemplates(props.site)) ?? [];
+  } catch (e: any) {
+    notify(e?.data?.message || "Could not load the checklists.", "error");
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** A stored checklist to edit, a starter to copy, or nothing for a blank one. */
+function openEditor(t?: THandoverTemplate) {
+  editor.id = t?._id;
+  editor.title = t?.title ?? "";
+  editor.description = t?.description ?? "";
+  editor.items = t?.items?.length ? t.items.map((i) => ({ ...blankItem(), ...i })) : [blankItem()];
+  editor.show = true;
+}
+
+let photoIndex = -1;
+function pickPhoto(i: number) {
+  photoIndex = i;
+  fileInput.value?.click();
+}
+
+async function uploadPhoto(e: Event) {
+  const input = e.target as HTMLInputElement;
+  const file = input.files?.[0];
+  input.value = "";
+  if (!file || photoIndex < 0) return;
+  uploading.value = photoIndex;
+  try {
+    const res = await addFile(file);
+    editor.items[photoIndex].referencePhotoId = res?.id ?? null;
+  } catch (err: any) {
+    notify(err?.data?.message || "Could not upload the photo.", "error");
+  } finally {
+    uploading.value = null;
+  }
+}
+
+async function save() {
+  const { valid } = await form.value.validate();
+  if (!valid) return;
+  const body: THandoverTemplate = {
+    title: editor.title,
+    description: editor.description || null,
+    items: editor.items.map((i) => ({
+      label: i.label,
+      quantity: typeof i.quantity === "number" && !Number.isNaN(i.quantity) ? i.quantity : null,
+      tagNo: i.tagNo || null,
+      referencePhotoId: i.referencePhotoId || null,
+    })),
+  };
+  saving.value = true;
+  try {
+    if (editor.id) await updateTemplate(editor.id, body);
+    else await addTemplate(props.site, body);
+    editor.show = false;
+    notify("Checklist saved.");
+    await load();
+  } catch (err: any) {
+    notify(err?.data?.message || "Could not save the checklist.", "error");
+  } finally {
+    saving.value = false;
+  }
+}
+
+async function remove(t: THandoverTemplate) {
+  if (!t._id || !window.confirm(`Remove "${t.title}"? Records already submitted are kept.`)) return;
+  try {
+    await deleteTemplate(t._id);
+    notify("Checklist removed.");
+    await load();
+  } catch (err: any) {
+    notify(err?.data?.message || "Could not remove the checklist.", "error");
+  }
+}
+
+watch(() => props.site, load, { immediate: true });
+</script>
+
+<style scoped>
+.handover-item {
+  border: 1px solid var(--border, #e0e0e0);
+  border-radius: 8px;
+}
+</style>

package/components/IncidentReportEmailsSettings.vue

@@ -0,0 +1,88 @@
+<template>
+  <div data-test="incident-report-emails">
+    <p class="text-body-2 mb-3">For people who do not use the app, e.g. your HQ or insurer.</p>
+    <v-combobox
+      v-model="emails"
+      label="Also email every incident report to"
+      placeholder="Type an email address and press Enter"
+      multiple
+      chips
+      closable-chips
+      hide-no-data
+      :readonly="readOnly"
+      :rules="[validRule]"
+      :hint="`Up to ${MAX} addresses.`"
+      persistent-hint
+      density="comfortable"
+      variant="outlined"
+    />
+    <v-btn
+      v-if="!readOnly"
+      class="screen-btn-primary mt-4"
+      color="primary-button"
+      variant="flat"
+      text="Save"
+      :loading="saving"
+      :disabled="!loaded || validRule(emails) !== true"
+      @click="save"
+    />
+    <Snackbar v-model="toast.show" :text="toast.message" :color="toast.color" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import useSiteFeatureSettings from "../composables/useSiteFeatureSettings";
+
+/**
+ * Site setting `metadata.incidentReportEmails` (core site-feature-settings).
+ * Empty = today: only app users who switched on incident report emails get one.
+ */
+const props = defineProps({
+  siteId: { type: String, required: true },
+  saved: { type: Array as PropType<string[]>, default: () => [] },
+  readOnly: { type: Boolean, default: false },
+  /** The site has been read; Save stays off until then. */
+  loaded: { type: Boolean, default: false },
+});
+const emit = defineEmits(["saved"]);
+
+const MAX = 10;
+const EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+const emails = ref<string[]>([]);
+watch(
+  () => props.saved,
+  (v) => (emails.value = Array.isArray(v) ? [...v] : []),
+  { immediate: true },
+);
+
+function validRule(list: string[]) {
+  const clean = (list ?? []).map((e) => String(e).trim());
+  if (clean.length > MAX) return `Up to ${MAX} addresses.`;
+  const bad = clean.find((e) => !EMAIL.test(e));
+  return bad ? `"${bad}" is not a valid email address.` : true;
+}
+
+const { saveSiteFeature } = useSiteFeatureSettings();
+const saving = ref(false);
+const toast = reactive({ show: false, message: "", color: "" });
+
+async function save() {
+  if (!props.loaded) return;
+  saving.value = true;
+  try {
+    const value = [...new Set(emails.value.map((e) => String(e).trim().toLowerCase()))];
+    await saveSiteFeature(props.siteId, "incidentReportEmails", value);
+    Object.assign(toast, { show: true, message: "Incident report emails saved.", color: "success" });
+    emit("saved");
+  } catch (e: any) {
+    Object.assign(toast, {
+      show: true,
+      message: e?.data?.message || "Could not save the incident report emails.",
+      color: "error",
+    });
+  } finally {
+    saving.value = false;
+  }
+}
+</script>

package/components/KeyPressFilter.vue

@@ -0,0 +1,43 @@
+<template>
+  <!-- Shown only when the site has key presses. Tells the list whether it
+       has any (`available`), so the list can add its Key press column. -->
+  <v-select
+    v-if="cabinets.length"
+    :model-value="modelValue"
+    :items="items"
+    item-title="name"
+    item-value="id"
+    label="Filter by key press"
+    multiple
+    clearable
+    hide-details
+    density="compact"
+    menu-icon="mdi-chevron-down"
+    style="max-width: 220px; min-width: 150px"
+    data-test="key-press-filter"
+    @update:model-value="(v: string[] | null) => emit('update:modelValue', v ?? [])"
+  />
+</template>
+
+<script setup lang="ts">
+import type { PropType } from "vue";
+import useKeyPresses from "../composables/useKeyPresses";
+
+const props = defineProps({
+  site: { type: String, required: true },
+  modelValue: { type: Array as PropType<string[]>, default: () => [] },
+});
+const emit = defineEmits<{
+  (e: "update:modelValue", value: string[]): void;
+  (e: "update:available", value: boolean): void;
+}>();
+
+const { cabinets } = useKeyPresses(() => props.site);
+// "" = keys kept in no named press.
+const items = computed(() => [...cabinets.value, { id: "", name: "No key press" }]);
+watch(
+  () => cabinets.value.length > 0,
+  (has) => emit("update:available", has),
+  { immediate: true },
+);
+</script>

package/components/KeyPressName.vue

@@ -0,0 +1,14 @@
+<template>
+  <span>{{ nameOf(id) }}</span>
+</template>
+
+<script setup lang="ts">
+import useKeyPresses from "../composables/useKeyPresses";
+
+// The key's press name in a list cell. One site read per page, shared.
+const props = defineProps({
+  site: { type: String, required: true },
+  id: { type: String, default: "" },
+});
+const { nameOf } = useKeyPresses(() => props.site);
+</script>

package/components/KeyPressSelect.vue

@@ -0,0 +1,31 @@
+<template>
+  <!-- Shown only when the site has key presses; otherwise nothing changes. -->
+  <div v-if="cabinets.length">
+    <div class="text-subtitle-1 text-medium-emphasis">Key press</div>
+    <v-select
+      :model-value="modelValue || null"
+      :items="cabinets"
+      item-title="name"
+      item-value="id"
+      placeholder="Choose a key press"
+      density="comfortable"
+      hint="Where this key is kept."
+      persistent-hint
+      clearable
+      data-test="key-press-select"
+      @update:model-value="(v: string | null) => emit('update:modelValue', v ?? '')"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import useKeyPresses from "../composables/useKeyPresses";
+
+const props = defineProps({
+  site: { type: String, required: true },
+  modelValue: { type: String, default: "" },
+});
+const emit = defineEmits<{ (e: "update:modelValue", value: string): void }>();
+
+const { cabinets } = useKeyPresses(() => props.site);
+</script>

package/components/KeySettingsPanel.vue

@@ -0,0 +1,156 @@
+<template>
+  <!--
+    Passes & keys site switches (TLR B8 / D2). Saved as one value,
+    `metadata.keySettings`, through the shared one-switch save
+    (`useSiteFeatureSettings`).
+    Every switch starts off, so a site that never opens this behaves as before.
+  -->
+  <div class="key-settings" data-test="key-settings-panel">
+    <InputLabel title="Key presses" class="d-block mb-1" />
+    <p class="text-caption text-medium-emphasis mb-2">
+      Add one per key press, e.g. Management office and Guardhouse, so an unreturned key shows which press it came
+      from.
+    </p>
+    <div v-for="(row, i) in rows" :key="row.id || `new-${i}`" class="d-flex align-center ga-2 mb-2">
+      <v-text-field
+        v-model="row.name"
+        placeholder="Key press name"
+        density="compact"
+        hide-details
+        maxlength="60"
+        :readonly="readOnly"
+        :data-test="`key-press-name-${i}`"
+      />
+      <v-btn
+        v-if="!readOnly"
+        icon="mdi-delete-outline"
+        variant="text"
+        density="comfortable"
+        :aria-label="`Remove ${row.name || 'key press'}`"
+        @click="rows.splice(i, 1)"
+      />
+    </div>
+    <v-btn
+      v-if="!readOnly && rows.length < 20"
+      variant="text"
+      color="primary"
+      prepend-icon="mdi-plus"
+      class="mb-4"
+      data-test="key-press-add"
+      @click="rows.push({ name: '' })"
+    >
+      Add key press
+    </v-btn>
+
+    <v-divider class="my-3" />
+
+    <v-switch
+      v-model="dailyUnreturnedAlert"
+      label="Daily list of unreturned keys"
+      color="primary"
+      hide-details
+      :disabled="readOnly"
+      data-test="key-daily-alert-switch"
+    />
+    <p class="text-caption text-medium-emphasis mb-2">
+      Once a day, people who look after Passes &amp; Keys get a list of keys still out, by key press.
+    </p>
+    <v-text-field
+      v-if="dailyUnreturnedAlert"
+      v-model="alertTime"
+      type="time"
+      label="Send at (site time)"
+      density="compact"
+      hide-details
+      style="max-width: 200px"
+      :readonly="readOnly"
+      data-test="key-daily-alert-time"
+    />
+
+    <v-switch
+      v-model="blockCheckoutWithKeys"
+      label="Stop check-out while a key is still out"
+      color="primary"
+      hide-details
+      class="mt-3"
+      :disabled="readOnly"
+      data-test="key-block-checkout-switch"
+    />
+    <p class="text-caption text-medium-emphasis mb-4">
+      The guard cannot check a visitor out until their key is returned or marked lost/damaged.
+    </p>
+
+    <v-btn
+      v-if="!readOnly"
+      color="primary"
+      :loading="saving"
+      :disabled="!siteData || !alertTimeValid"
+      data-test="key-settings-save"
+      @click="save"
+    >
+      Save
+    </v-btn>
+  </div>
+</template>
+
+<script setup lang="ts">
+import useSiteFeatureSettings from "../composables/useSiteFeatureSettings";
+import useKeyPresses from "../composables/useKeyPresses";
+import { cleanKeyPresses, readKeySettings } from "../utils/key-presses";
+
+const props = defineProps({
+  site: { type: String, required: true },
+  siteData: { type: Object, default: null },
+  readOnly: { type: Boolean, default: false },
+});
+const emit = defineEmits<{
+  (e: "saved"): void;
+  (e: "message", text: string, color: string): void;
+}>();
+
+const { saveSiteFeature } = useSiteFeatureSettings();
+// Not `useKeyPresses(site)`: that would read the site again on open.
+const { forget } = useKeyPresses(() => "");
+
+const rows = ref<Array<{ id?: string; name: string }>>([]);
+const dailyUnreturnedAlert = ref(false);
+const alertTime = ref("18:00");
+const blockCheckoutWithKeys = ref(false);
+const saving = ref(false);
+
+watch(
+  () => props.siteData,
+  (site) => {
+    const s = readKeySettings(site);
+    rows.value = s.cabinets.map((c) => ({ ...c }));
+    dailyUnreturnedAlert.value = s.dailyUnreturnedAlert;
+    alertTime.value = s.alertTime;
+    blockCheckoutWithKeys.value = s.blockCheckoutWithKeys;
+  },
+  { immediate: true },
+);
+
+const alertTimeValid = computed(() => /^([01]\d|2[0-3]):[0-5]\d$/.test(alertTime.value || ""));
+
+async function save() {
+  if (!props.siteData) return;
+  saving.value = true;
+  try {
+    const cabinets = cleanKeyPresses(rows.value);
+    await saveSiteFeature(props.site, "keySettings", {
+      cabinets,
+      dailyUnreturnedAlert: dailyUnreturnedAlert.value,
+      alertTime: alertTime.value,
+      blockCheckoutWithKeys: blockCheckoutWithKeys.value,
+    });
+    rows.value = cabinets.map((c) => ({ ...c }));
+    forget(props.site);
+    emit("message", "Passes & keys settings saved", "success");
+    emit("saved");
+  } catch (e: any) {
+    emit("message", e?.data?.message || "Could not save Passes & keys settings", "error");
+  } finally {
+    saving.value = false;
+  }
+}
+</script>

package/components/ListCsvExport.vue

@@ -0,0 +1,71 @@
+<template>
+  <!--
+    "Download CSV" for a list screen: the same list API and filters the screen
+    uses, every page, as one CSV file. Reads only what the list already shows.
+  -->
+  <v-btn
+    variant="text"
+    size="small"
+    class="text-none"
+    prepend-icon="mdi-download"
+    :loading="busy"
+    data-test="list-csv-export"
+    @click="download"
+  >
+    {{ label }}
+  </v-btn>
+  <Snackbar v-model="toast.show" :text="toast.message" :color="toast.color" />
+</template>
+
+<script setup lang="ts">
+import { collectAllPages, EXPORT_MAX_ROWS, listCsv, type TExportColumn } from "../utils/list-export";
+
+const props = defineProps({
+  /** `(page, limit) => list API result` with the screen's current filters. */
+  fetchPage: {
+    type: Function as PropType<(page: number, limit: number) => Promise<any>>,
+    required: true,
+  },
+  columns: { type: Array as PropType<TExportColumn[]>, required: true },
+  /** File name without the date or extension, e.g. "feedback". */
+  fileName: { type: String, required: true },
+  label: { type: String, default: "Download CSV" },
+});
+
+const busy = ref(false);
+const toast = reactive({ show: false, message: "", color: "" });
+
+async function download() {
+  busy.value = true;
+  try {
+    const { rows, truncated } = await collectAllPages(props.fetchPage);
+    if (!rows.length) {
+      Object.assign(toast, { show: true, message: "Nothing to download for these filters.", color: "info" });
+      return;
+    }
+    const blob = new Blob([listCsv(props.columns, rows)], { type: "text/csv;charset=utf-8" });
+    const link = document.createElement("a");
+    link.href = URL.createObjectURL(blob);
+    link.download = `${props.fileName}-${new Date().toISOString().slice(0, 10)}.csv`;
+    link.click();
+    // Revoked a moment later: some browsers start the download after click() returns.
+    const href = link.href;
+    setTimeout(() => URL.revokeObjectURL(href), 1000);
+    if (truncated) {
+      Object.assign(toast, {
+        show: true,
+        message: `Only the first ${EXPORT_MAX_ROWS} rows were downloaded. Narrow the dates to get the rest.`,
+        color: "warning",
+      });
+    }
+  } catch (error: any) {
+    Object.assign(toast, {
+      show: true,
+      message: error?.data?.message || "Could not download the list.",
+      color: "error",
+    });
+  } finally {
+    busy.value = false;
+  }
+}
+</script>