@7365admin1/layer-common 4.97.0 → 4.97.1-staging.501

package/components/HidAccessPermissions.vue

@@ -0,0 +1,532 @@
+<template>
+  <v-dialog v-model="open" max-width="760" scrollable>
+    <v-card class="hid-access-permissions">
+      <v-card-title class="hid-access-permissions__title">
+        <div>
+          <div class="text-h6">Access Permissions</div>
+          <div class="text-caption text-medium-emphasis">{{ readerLabel }}</div>
+        </div>
+      </v-card-title>
+
+      <v-divider />
+
+      <!-- The one precondition the server enforces before it will talk about
+           permissions at all. Saying it here beats letting the first request
+           fail with the same sentence in a snackbar. -->
+      <v-alert
+        v-if="!readerLocation"
+        type="warning"
+        variant="tonal"
+        density="compact"
+        class="ma-4"
+      >
+        Set a location on this HID Face Reader before managing permissions.
+      </v-alert>
+
+      <template v-else>
+        <div class="hid-access-permissions__intro">
+          <p class="text-body-2 text-medium-emphasis mb-0">
+            Everybody enrolled on this reader, by type. Enrolling already grants
+            access — switch somebody off to close the door to them without removing
+            their face, card or PIN.
+          </p>
+        </div>
+
+        <v-card-text class="hid-access-permissions__body">
+          <TableMain
+            :headers="headers"
+            :items="rows"
+            :loading="loading"
+            :items-per-page="-1"
+            :page="page"
+            :pages="pages"
+            :page-range="pageRange"
+            item-value="rowKey"
+            @refresh="loadEnrolled"
+            @update:page="goToPage"
+          >
+            <!-- WHICH OF THE READER'S PEOPLE TO SHOW.
+                 The reader holds residents, members and contractors; each tab is
+                 one `type`, filtered and paged by the server. The strip is
+                 `TableMain`'s own slot and the shared `.app-tab` markup, the same
+                 as every other tabbed table here - not a `v-tabs`, whose selected
+                 state is drawn from Vuetify's `on-surface` rather than the
+                 design's accent underline.
+                 The count beside each label is the whole reader's, from the
+                 draft, so it follows an unsaved tick. -->
+            <template #tabs>
+              <button
+                v-for="tab in TABS"
+                :key="tab.value"
+                type="button"
+                class="app-tab"
+                :class="{ 'app-tab--active': activeTab === tab.value }"
+                :aria-pressed="activeTab === tab.value"
+                @click="selectTab(tab.value)"
+              >
+                {{ tab.label }}
+                <span class="hid-access-permissions__tab-count">{{ tabCount(tab) }}</span>
+              </button>
+            </template>
+
+            <template #extension>
+              <div class="app-filter-row">
+                <AppField
+                  v-model="search"
+                  search
+                  :placeholder="searchPlaceholder"
+                  @keyup.enter="searchFromFirstPage"
+                />
+              </div>
+            </template>
+
+            <template #[`item.name`]="{ item }">
+              <div class="hid-access-permissions__person">
+                <div>{{ item.name || "—" }}</div>
+                <div class="text-caption text-medium-emphasis">{{ item.subtitle || "—" }}</div>
+              </div>
+            </template>
+
+            <template #[`item.selected`]="{ item }">
+              <div v-if="!item.assignable" class="hid-access-permissions__toggle">
+                <span class="text-caption text-medium-emphasis">{{ item.reason }}</span>
+              </div>
+              <div v-else class="hid-access-permissions__toggle">
+                <v-switch
+                  :model-value="item.selected"
+                  :disabled="saving"
+                  color="primary"
+                  density="compact"
+                  hide-details
+                  :aria-label="`Door access for ${item.name}`"
+                  @update:model-value="(value) => toggle(item, value === true)"
+                />
+                <span
+                  class="text-caption"
+                  :class="item.selected ? 'text-success' : 'text-medium-emphasis'"
+                >
+                  {{ item.selected ? "Has access" : "No access" }}
+                </span>
+              </div>
+            </template>
+          </TableMain>
+        </v-card-text>
+      </template>
+
+      <v-divider />
+
+      <v-card-actions class="hid-access-permissions__actions">
+        <span v-if="readerLocation" class="text-caption text-medium-emphasis">
+          {{ assignedTotal }} with access on this reader
+        </span>
+        <v-spacer />
+        <AppButton variant="ghost" :disabled="saving" @click="open = false">Cancel</AppButton>
+        <AppButton
+          icon="mdi-content-save-outline"
+          :loading="saving"
+          :disabled="!readerLocation || !dirty || saving"
+          @click="save"
+        >
+          Save Permissions
+        </AppButton>
+      </v-card-actions>
+    </v-card>
+
+    <v-snackbar v-model="snackbar.show" :color="snackbar.color" timeout="3500">
+      {{ snackbar.message }}
+    </v-snackbar>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import {
+  applySelection,
+  hasChanges,
+  readCandidatePage,
+  seedAssignments,
+  setAssignment,
+  subjectOfIdentity,
+  toAssignmentPayload,
+  type HidAssignmentState,
+} from "../utils/hid-permission-assignments";
+
+/**
+ * WHO MAY PASS THIS READER — a review and revoke screen, not a picker.
+ *
+ * Enrolling somebody now grants them access: `createIdentity` writes the
+ * assignment, and the reconcile puts them in the reader's group in the same
+ * pass. A property manager therefore has ONE thing to do, and this screen
+ * exists for the other direction — taking access away again.
+ *
+ * So it lists the people ENROLLED on this reader rather than everybody at the
+ * site. Switching somebody off removes their assignment, and the reconcile then
+ * deletes their `user_groups` row; their identity, face, card and PIN are left
+ * alone, so they stay recognisable at the door and are simply refused.
+ *
+ * The editing model lives in `utils/hid-permission-assignments.ts`, because the
+ * save is whole-reader while the list is one page at a time — and getting that
+ * wrong silently revokes everybody who is not on screen. See the tests there.
+ */
+const props = defineProps<{
+  modelValue: boolean;
+  site: string;
+  org: string;
+  reader: Record<string, unknown> | null;
+}>();
+
+const emit = defineEmits<{
+  (event: "update:modelValue", value: boolean): void;
+  (event: "saved"): void;
+}>();
+
+const { getSitePermissions, getIdentities, updateSitePermissions } = useHidAmico();
+
+/**
+ * WHO EACH TAB LISTS, AND WHAT A GRANT MADE FROM IT IS FILED UNDER.
+ *
+ * `type` is the identity's own, filtered by the SERVER (`listIdentities` does an
+ * exact match on it), and it is what the enrolment writes and what
+ * `permissionIdentityType` re-confirms on every reconcile. `category` is the
+ * permission category a NEW grant from this tab belongs to.
+ *
+ * The two are a pair rather than one derived from the other, because the tab is
+ * the only thing on this screen that knows which of them the operator means: a
+ * contractor and a property-management member are both a `member` link, and
+ * guessing between them from the record is exactly what went wrong before.
+ */
+const TABS = [
+  { value: "resident", label: "Resident", noun: "Resident", type: "resident", category: "resident" },
+  { value: "member", label: "Member", noun: "Member", type: "staff", category: "property_management" },
+  {
+    value: "provider",
+    label: "Service provider",
+    noun: "Person",
+    type: "contractor",
+    category: "service_provider_member",
+  },
+] as const satisfies ReadonlyArray<{
+  value: string;
+  label: string;
+  noun: string;
+  type: string;
+  category: THidPermissionCategory;
+}>;
+
+const activeTab = ref<(typeof TABS)[number]["value"]>("resident");
+const currentTab = computed(
+  () => TABS.find((tab) => tab.value === activeTab.value) ?? TABS[0],
+);
+
+/** Granted counts per category, for the tab strip. One call, all three. */
+const counts = ref<Record<string, number>>({});
+const tabCount = (tab: (typeof TABS)[number]) => counts.value[tab.category] ?? 0;
+
+/* Name over unit in one cell rather than a "Unit" column — see `subtitleOf`.
+   The first column follows the tab; "Door access" is the same action for all. */
+const headers = computed(() => [
+  { title: currentTab.value.noun, value: "name", sortable: false },
+  { title: "Door access", value: "selected", sortable: false, width: 190 },
+]);
+
+const search = ref("");
+const page = ref(1);
+const pages = ref(1);
+const pageRange = ref("");
+const loading = ref(false);
+const saving = ref(false);
+const enrolled = ref<THidPermissionCandidate[]>([]);
+const snackbar = reactive({ show: false, color: "success", message: "" });
+
+/** What the server holds, and the working copy. The pair drives `dirty`. */
+const savedState = ref<HidAssignmentState>(new Map());
+const draft = ref<HidAssignmentState>(new Map());
+
+const open = computed({
+  get: () => props.modelValue,
+  set: (value: boolean) => emit("update:modelValue", value),
+});
+
+const readerId = computed(() => String(props.reader?._id ?? ""));
+const readerLocation = computed(() => String(props.reader?.location ?? "").trim());
+const readerLabel = computed(() => {
+  const name = String(props.reader?.name ?? "").trim() || "HID Face Reader";
+  return readerLocation.value ? `${name} · ${readerLocation.value}` : name;
+});
+
+/* "unit" only means something for a resident. */
+const searchPlaceholder = computed(() =>
+  activeTab.value === "resident"
+    ? "Search name, unit or registration"
+    : "Search name or registration",
+);
+
+const assignedTotal = computed(() => draft.value.size);
+const dirty = computed(() => hasChanges(savedState.value, draft.value));
+/* The draft is the truth once the dialog is open, so `selected` is recomputed
+   on every render rather than trusted from the row. */
+const rows = computed(() => applySelection(enrolled.value, draft.value));
+
+watch(
+  () => [props.modelValue, readerId.value] as const,
+  ([isOpen]) => {
+    if (!isOpen || !readerId.value) return;
+    search.value = "";
+    page.value = 1;
+    activeTab.value = "resident";
+    void loadAll();
+  },
+  { immediate: true },
+);
+
+async function loadAll() {
+  if (!readerLocation.value) return;
+  await loadAssignments();
+  await loadEnrolled();
+}
+
+/**
+ * `getSitePermissions` returns the reader's assignments across ALL categories.
+ * That is what makes a whole-reader payload possible from a paged view, so it
+ * is loaded once per opening rather than once per page.
+ */
+async function loadAssignments() {
+  try {
+    const response = await getSitePermissions(props.site, props.org, readerId.value);
+    const assignments = response?.data?.assignments ?? [];
+    savedState.value = seedAssignments(assignments);
+    draft.value = seedAssignments(assignments);
+    /*
+     * Counted from the assignments themselves rather than the server's `counts`
+     * block, so the strip follows the DRAFT and a tick updates the number it
+     * sits beside. `countByCategory` is the same helper the candidate screens
+     * use.
+     */
+    counts.value = countByCategory(draft.value);
+  } catch (error) {
+    showToast(getErrorMessage(error, "Unable to load this reader's permissions."), "error");
+  }
+}
+
+function toRecord(value: unknown): Record<string, unknown> {
+  return value && typeof value === "object" ? (value as Record<string, unknown>) : {};
+}
+
+/**
+ * Why a row cannot be switched, in words the reader of the screen can act on.
+ *
+ * The row is still DRAWN. Dropping one silently is what made the pager say
+ * "1-9 of 9" over seven rows: the count comes from the server and the rows came
+ * from a filtered list, so people vanished with nothing to say they had.
+ *
+ * What lands here is a resident identity holding only an account link - no
+ * person, member or service-provider record - which leaves no subject to
+ * assign. Visitors never reach it: they are excluded by the query above,
+ * because their access comes from `user_access_rules` rather than a group and
+ * there would be nothing here to switch.
+ */
+function unassignableReason() {
+  return "Not linked to a person";
+}
+
+/**
+ * The unit, when the enrolment captured one.
+ *
+ * `unitLabel` and NOT `block`/`level`/`unit`: those three hold ObjectIds, and
+ * the enrolment form resolves them through the occupancy tree before storing
+ * the readable label beside them. `buildUnitLabel` carries the warning this
+ * ignored once already — joining the raw values stamps
+ * "665f.../665f.../665f..." into the column.
+ *
+ * Falls back to the registration number, which is what the rows created by an
+ * assignment rather than an enrolment carry instead of a unit.
+ */
+function subtitleOf(identity: Record<string, unknown>) {
+  const metadata = toRecord(identity.metadata);
+  return String(metadata.unitLabel ?? "").trim()
+    || String(identity.registration ?? "").trim();
+}
+
+async function loadEnrolled() {
+  if (!readerId.value || !readerLocation.value) return;
+  loading.value = true;
+  try {
+    const response = await getIdentities(readerId.value, {
+      page: page.value,
+      limit: 10,
+      search: search.value.trim(),
+      // THIS TAB's people, and filtered by the SERVER rather than here. The
+      // pager's count comes back from the same query, so narrowing the list on
+      // this side would print a total that never matched the rows under it.
+      type: currentTab.value.type,
+    });
+    const result = readCandidatePage(response);
+    /*
+     * EVERY row the server returned, including the ones this screen cannot act
+     * on. A visitor's access comes from `user_access_rules` rather than a group,
+     * and an identity linked to nobody has no subject to assign - but both are
+     * still enrolled on this reader, and the count in the pager counts them. They
+     * are drawn with the switch disabled and a reason, instead of disappearing.
+     */
+    enrolled.value = result.items.map((row) => {
+      const identity = toRecord(row);
+      const subject = subjectOfIdentity(identity);
+      const metadata = toRecord(identity.metadata);
+      return {
+        subjectId: subject?.subjectId ?? "",
+        // The record's own category where it has one; otherwise the tab's,
+        // which is the only thing that knows what the operator means.
+        category: subject?.category ?? currentTab.value.category,
+        // The row's own key. `subjectId` is empty for the rows below, and two
+        // empty keys would collapse into one row in the table.
+        rowKey: String(identity._id ?? identity.hidUserId ?? Math.random()),
+        assignable: Boolean(subject),
+        reason: subject ? "" : unassignableReason(),
+        name: String(metadata.name ?? "").trim()
+          || String(identity.registration ?? "").trim()
+          || "—",
+        subtitle: subtitleOf(identity),
+        intercom: false,
+        selected: false,
+      } as THidPermissionCandidate;
+    });
+    // `pages` only. The page number stays whatever the pager set — this
+    // endpoint's `paginate` never echoes it back, so reading one here pinned
+    // the screen to page one on every fetch.
+    pages.value = result.pages;
+    pageRange.value = result.pageRange;
+  } catch (error) {
+    enrolled.value = [];
+    pages.value = 1;
+    pageRange.value = "";
+    showToast(getErrorMessage(error, "Unable to load the people enrolled on this reader."), "error");
+  } finally {
+    loading.value = false;
+  }
+}
+
+/**
+ * Switching tabs refetches, because the filter is the SERVER's.
+ *
+ * The draft is untouched: it is the whole reader's, and the save sends all of it
+ * whatever tab is in front of you. Clearing it here - or building the payload
+ * from the loaded rows - is what would revoke everybody on the other two tabs.
+ *
+ * Search is cleared with the tab. It is a server-side search within one type, so
+ * carrying it across would land on an empty list and look like the tab was empty.
+ */
+function selectTab(value: (typeof TABS)[number]["value"]) {
+  if (activeTab.value === value) return;
+  activeTab.value = value;
+  search.value = "";
+  page.value = 1;
+  void loadEnrolled();
+}
+
+function goToPage(value: number) {
+  page.value = Number(value) || 1;
+  void loadEnrolled();
+}
+
+function searchFromFirstPage() {
+  page.value = 1;
+  void loadEnrolled();
+}
+
+/**
+ * Grant or revoke one person.
+ *
+ * The category comes from the row where the server gave it one, and otherwise
+ * from the TAB - never from re-reading the identity's links on this side. A
+ * contractor and a property-management member are both a `member` link, and the
+ * stale local copy of that reading is what used to file contractors as staff: the
+ * reconcile then derived `staff` from that category and rewrote the person's
+ * type, moving them into the Member tab.
+ *
+ * An ALREADY GRANTED person keeps the category their assignment holds, so merely
+ * visiting a tab and toggling somebody off and on cannot re-file them.
+ */
+function toggle(item: THidPermissionCandidate, selected: boolean) {
+  const subjectId = String(item.subjectId ?? "");
+  if (!subjectId) return;
+  const category = savedState.value.get(subjectId)?.category
+    ?? item.category
+    ?? currentTab.value.category;
+  draft.value = setAssignment(
+    draft.value,
+    savedState.value,
+    subjectId,
+    category,
+    selected,
+  );
+  // The strip sits beside the rows, so it follows the tick rather than the save.
+  counts.value = countByCategory(draft.value);
+}
+
+async function save() {
+  if (!dirty.value || saving.value) return;
+  saving.value = true;
+  try {
+    await updateSitePermissions(
+      props.site,
+      props.org,
+      readerId.value,
+      toAssignmentPayload(draft.value),
+    );
+    // The server reconciles the device inside this call: anybody switched off
+    // loses their `user_groups` row before it returns, so a success here means
+    // the door has already been updated.
+    savedState.value = new Map(draft.value);
+    showToast("HID permissions updated.");
+    emit("saved");
+    open.value = false;
+  } catch (error) {
+    showToast(getErrorMessage(error, "Unable to update HID permissions."), "error");
+  } finally {
+    saving.value = false;
+  }
+}
+
+function showToast(message: string, color = "success") {
+  snackbar.message = message;
+  snackbar.color = color;
+  snackbar.show = true;
+}
+
+function getErrorMessage(error: unknown, fallback: string) {
+  const record = toRecord(error);
+  const data = toRecord(record.data);
+  return String(data.message ?? "") || String(record.message ?? "") || fallback;
+}
+</script>
+
+<style scoped lang="scss">
+/* The granted count beside a tab label. Quieter than the label and set in
+   tabular figures so the three tabs do not shift width as numbers change. */
+.hid-access-permissions__tab-count {
+  margin-left: 6px;
+  color: var(--muted);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+.hid-access-permissions {
+  &__title { padding-block: 16px; }
+
+  &__intro { padding: 12px 16px 0; }
+
+  &__body {
+    padding-top: 8px;
+    min-height: 320px;
+  }
+
+  &__actions { padding: 12px 16px; }
+
+  &__person > div:first-child { font-weight: 500; }
+
+  &__toggle {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+}
+</style>