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

package/components/HidIntercomManagement.vue

@@ -162,11 +162,8 @@
             />
             <v-list-item class="screen-menu__item" title="Call Settings" prepend-icon="mdi-cog" @click="openCallDialog(item)" />
             <v-list-item class="screen-menu__item" title="Dial Code" prepend-icon="mdi-dialpad" @click="openDialCodeDialog(item)" />
-            <v-list-item class="screen-menu__item" title="Make a call" prepend-icon="mdi-phone" @click="openMakeCallDialog(item)" />
-            <v-list-item class="screen-menu__item" title="Web call" prepend-icon="mdi-headset" @click="openWebPhoneDialog(item)" />
           </v-list>
           <v-list v-else density="compact" class="screen-menu">
-            <v-list-item class="screen-menu__item" title="Call" prepend-icon="mdi-phone" @click="openContactCall(item)" />
             <v-list-item class="screen-menu__item" title="Check reader SIP status" prepend-icon="mdi-lan-check" @click="testContactSipStatus(item)" />
             <v-list-item class="screen-menu__item" title="View" prepend-icon="mdi-eye" @click="openContactView(item)" />
             <v-list-item class="screen-menu__item" title="Edit" prepend-icon="mdi-pencil" @click="openContactDialog(item)" />
@@ -589,9 +586,36 @@
             :disabled="Boolean(contactForm.id)"
           />
           <FieldLabel text="Name" required />
-          <AppField v-model="contactForm.name" placeholder="Name shown on calls" class="my-3" />
+          <!-- The name is picked from the site's SIP accounts (`hid-sip-accounts`)
+               rather than typed, so a contact always names a person who holds an
+               extension. The model stays the plain name string the reader stores,
+               so `saveContact` is unchanged; an existing contact whose name is not
+               in the list still displays it (AppSelect falls back to the raw value). -->
+          <!-- Searchable: this is the one list on the screen that grows with
+               the estate, and the unit is part of every option's text, so the
+               box finds a person by name or by where they live. -->
+          <AppSelect
+            v-model="contactForm.name"
+            :items="sipAccountOptions"
+            :disabled="sipAccountsLoading"
+            :placeholder="sipAccountsLoading ? 'Loading SIP accounts…' : 'Name shown on calls'"
+            searchable
+            search-placeholder="Search name or unit"
+            class="my-3"
+            @update:model-value="applySipAccountToContact"
+          />
+          <p v-if="sipAccountsError" class="field-hint field-hint--error">{{ sipAccountsError }}</p>
+          <p v-else-if="!sipAccountsLoading && !sipAccounts.length" class="field-hint">
+            No SIP accounts on this site yet. An account is created the first time a user opens Web Call.
+          </p>
           <FieldLabel text="Address" required />
-          <AppField v-model="contactForm.serverAddress" :placeholder="contactAddressPlaceholder" />
+          <!-- Always read-only: it shows the extension of the chosen SIP account
+               and is never typed into. -->
+          <AppField
+            v-model="contactForm.serverAddress"
+            :placeholder="contactAddressPlaceholder"
+            disabled
+          />
           <p class="field-hint">{{ contactAddressHint }}</p>
         </v-card-text>
         <v-card-actions class="dialog-actions pa-0">
@@ -636,6 +660,8 @@
 </template>
 
 <script setup lang="ts">
+import type { HidSipAccountListItem } from "../composables/useHidAmico";
+
 const props = defineProps({
   org: {
     type: String,
@@ -732,6 +758,8 @@ const {
   makeIntercomCall,
   finalizeIntercomCall,
   ensureSipAccount,
+  getSipAccounts,
+  notifyIntercomCall,
 } = useHidAmico();
 
 const activeTab = ref<IntercomTab>("intercom");
@@ -760,6 +788,11 @@ const webPhoneActionLoading = ref(false);
 const sipAccount = ref<SipAccount | null>(null);
 const sipAccountLoading = ref(false);
 const sipAccountError = ref("");
+// The site's SIP account list for the contact dialog's name picker. Distinct
+// from `sipAccount` above, which is the CALLER's own account for the web phone.
+const sipAccounts = ref<HidSipAccountListItem[]>([]);
+const sipAccountsLoading = ref(false);
+const sipAccountsError = ref("");
 const remoteVideoEl = ref<HTMLVideoElement | null>(null);
 const remoteAudioEl = ref<HTMLAudioElement | null>(null);
 const webPhone = useSipWebPhone();
@@ -864,6 +897,58 @@ const readerOptions = computed(() => readers.value.map((reader) => ({
   value: reader._id,
 })));
 
+/**
+ * "Harris - Blk 1/Level 1/Unit 1" - the name a contact is stored under.
+ *
+ * The unit belongs in the name itself, not only in the picker's label: the
+ * reader's contact list is what a visitor reads off the door panel, and
+ * "Harris" alone does not say which home it rings. An account whose owner has
+ * no address, and every account until the API ships the `unitLabel` field,
+ * falls back to the bare name rather than trailing a separator.
+ */
+function buildContactName(account: HidSipAccountListItem) {
+  const unit = String(account.unitLabel ?? "").trim();
+  return unit ? `${account.name} - ${unit}` : account.name;
+}
+
+/**
+ * The contact name picker. `value` is the composed name because that is what
+ * the reader stores and what `saveContact` sends; the extension goes into the
+ * Address field, not the label. A name that already sits on the contact being
+ * edited but is no longer in the SIP list is kept as an option so the picker
+ * does not silently drop it.
+ */
+const sipAccountOptions = computed(() => {
+  const options: Array<{ title: string; value: string }> = sipAccounts.value
+    .filter((account: HidSipAccountListItem) => account.name)
+    .map((account: HidSipAccountListItem) => {
+      const name = buildContactName(account);
+      return { title: name, value: name };
+    });
+  const current = contactForm.name.trim();
+  if (current && !options.some((option) => option.value === current)) {
+    options.unshift({ title: current, value: current });
+  }
+  return options;
+});
+
+/**
+ * The SIP account behind a stored contact name, or null when the name is not
+ * one. The bare name is matched as well as the composed one, so a contact
+ * created before the unit was part of the name still resolves to its account
+ * on edit instead of looking unrecognised.
+ */
+function findSipAccount(name: string) {
+  const value = name.trim();
+  if (!value) return null;
+  const match = sipAccounts.value.find((account: HidSipAccountListItem) => buildContactName(account) === value)
+    ?? sipAccounts.value.find((account: HidSipAccountListItem) => account.name === value);
+  return (match ?? null) as HidSipAccountListItem | null;
+}
+
+/** The SIP account behind the picked name, or null for a legacy / unpicked name. */
+const selectedSipAccount = computed(() => findSipAccount(contactForm.name));
+
 const visibleRows = computed(() => activeTab.value === "intercom" ? filteredIntercomRows.value : filteredContacts.value);
 const pages = computed(() => Math.max(1, Math.ceil(visibleRows.value.length / limit)));
 const pageRange = computed(() => {
@@ -976,14 +1061,11 @@ const contactReaderRow = computed(() =>
 );
 const isContactReaderPeerToPeer = computed(() => contactReaderRow.value?.operatingMode === "Peer-to-Peer");
 const contactAddressPlaceholder = computed(() => (isContactReaderPeerToPeer.value ? "192.168.0.129" : "7100"));
-const contactAddressHint = computed(() => {
-  if (!contactReaderRow.value) {
-    return "Extension number (SIP Client) or local IP address (Peer-to-Peer), depending on the reader's operating mode.";
-  }
-  return isContactReaderPeerToPeer.value
-    ? "Peer-to-Peer mode: enter the contact's local IP address."
-    : "SIP Client mode: enter the contact's extension number.";
-});
+const contactAddressHint = computed(() => (
+  selectedSipAccount.value
+    ? "Extension of the selected SIP account."
+    : "Filled from the SIP account of the name selected above."
+));
 const areSipCredentialFieldsDisabled = computed(() => !sipForm.enabled || isPeerToPeerMode.value);
 const intercomDetailSections = computed(() => {
   const row = selectedRow.value;
@@ -1399,6 +1481,40 @@ async function loadSipAccount() {
   }
 }
 
+async function loadSipAccounts() {
+  // Site only. The contact list belongs to the door, not to an organization,
+  // so the picker loads wherever a site is known - including the screens that
+  // are opened without an `org` prop.
+  if (!props.site) return;
+
+  sipAccountsLoading.value = true;
+  sipAccountsError.value = "";
+  try {
+    const response = await getSipAccounts(props.site);
+    const rows = toRecord(response).data;
+    sipAccounts.value = Array.isArray(rows) ? rows as HidSipAccountListItem[] : [];
+    // An existing contact opened before the list arrived: once its name is
+    // matched to an account, show that account's extension in the locked field.
+    applySipAccountToContact(contactForm.name.trim());
+  } catch (error: unknown) {
+    sipAccounts.value = [];
+    sipAccountsError.value = getErrorMessage(error);
+  } finally {
+    sipAccountsLoading.value = false;
+  }
+}
+
+/**
+ * Picking a SIP account sets the address to its extension. The Address field
+ * is always disabled, so this is the only way it gets a value; a name that is
+ * not an account (a legacy contact) leaves whatever address it already had.
+ */
+function applySipAccountToContact(name: string) {
+  const account = findSipAccount(name);
+  if (!account) return;
+  contactForm.serverAddress = account.extension;
+}
+
 async function connectWebPhone() {
   const account = sipAccount.value;
   if (!account) {
@@ -1442,8 +1558,10 @@ async function disconnectWebPhone() {
 
 async function startWebCall() {
   webPhoneActionLoading.value = true;
+  const destination = webPhoneForm.destination;
   try {
-    await webPhone.call(webPhoneForm.destination);
+    await webPhone.call(destination);
+    void ringResidentPhone(destination);
   } catch (error: unknown) {
     showMessage(getErrorMessage(error), "error");
   } finally {
@@ -1451,6 +1569,50 @@ async function startWebCall() {
   }
 }
 
+/**
+ * Wake the called resident's mobile so they are there to answer.
+ *
+ * Deliberately fired AFTER the INVITE and never awaited. The SIP leg is the
+ * call: it is already ringing by the time this runs, and a resident whose
+ * phone is asleep is the only thing this fixes. So a failure here is logged
+ * and dropped rather than shown — telling the operator "call failed" for a
+ * call that is ringing would be worse than a silent miss.
+ *
+ * A destination with no resident behind it (a staff extension, an external SIP
+ * address) comes back `notified: false` with a reason and is not an error.
+ */
+async function ringResidentPhone(destination: string) {
+  if (!props.org || !props.site) return;
+
+  try {
+    // No `readerId`: this call came from the web phone, not a door station.
+    // The reader selected in the table above is whatever the operator happens
+    // to be looking at, and sending it would tell the resident's app the call
+    // arrived at a door it never touched.
+    await notifyIntercomCall(props.site, {
+      orgId: props.org,
+      destination,
+      callId: createCallId(),
+    });
+  } catch (error: unknown) {
+    console.warn("[intercom] could not send the incoming-call push", error);
+  }
+}
+
+/**
+ * A per-call id, so a second push for the same call replaces the first on the
+ * resident's lock screen rather than stacking a second ringing card.
+ * `randomUUID` needs a secure context, which the web phone already requires —
+ * getUserMedia does not run without one — but the fallback keeps a call from
+ * failing on that account alone.
+ */
+function createCallId() {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID();
+  }
+  return `call-${Date.now()}-${Math.random().toString(16).slice(2)}`;
+}
+
 async function answerWebCall() {
   webPhoneActionLoading.value = true;
   try {
@@ -1508,6 +1670,9 @@ function openContactDialog(contact?: ContactRow) {
   contactForm.location = contact?.location === "N/A" ? "" : contact?.location || selectedReader?.location || "";
   contactForm.serverAddress = contact?.serverAddress === "N/A" ? "" : contact?.serverAddress || "";
   contactDialog.value = true;
+  // Fetched on every open, not cached: an account is provisioned the first
+  // time a user opens Web Call, so the list can grow between two dialogs.
+  void loadSipAccounts();
 }
 
 function openContactView(contact: ContactRow) {
@@ -2096,6 +2261,10 @@ export default {
   line-height: 1.4;
 }
 
+.field-hint--error {
+  color: var(--err);
+}
+
 .sip-settings-dialog .field-label {
   margin-top: 14px;
 }

package/components/HidProfileQrCode.vue

@@ -0,0 +1,332 @@
+<!--
+  MY HID QR CODE.
+
+  The signed-in member's own pass for one reader. Every other HID screen acts on
+  somebody else - a resident being enrolled, a visitor being issued a pass. This
+  one has no subject picker at all, because the server takes the caller from the
+  session and there is no user id to send.
+
+  Issuing a code does NOT grant access. A member's door permission comes from the
+  HID permissions screen, and minting an access rule here would let anyone who
+  can press Generate admit themselves. So the screen reports what the permissions
+  screen says (`assigned`) and warns when a code would be refused at the door,
+  rather than handing out something that silently fails.
+-->
+<template>
+  <div class="hid-profile-qr">
+    <div class="hid-profile-qr__header">
+      <h2 class="hid-profile-qr__title">HID QR Code</h2>
+      <AppSelect
+        v-if="readerOptions.length"
+        v-model="selectedReaderId"
+        class="reader-select"
+        :items="readerOptions"
+        @update:model-value="loadProfile"
+      />
+    </div>
+
+    <v-card class="screen-modal hid-profile-qr__card">
+      <v-card-text class="screen-modal__body">
+        <div v-if="loading" class="hid-profile-qr__state">Loading...</div>
+
+        <div v-else-if="!readerOptions.length" class="hid-profile-qr__state">
+          No HID reader is set up for this site yet.
+        </div>
+
+        <template v-else>
+          <p class="hid-profile-qr__reader">
+            {{ profile?.readerName || "HID reader" }}
+            <span>{{ profile?.portalName || "Portal not configured" }}</span>
+          </p>
+
+          <!-- A code this reader cannot read is worse than no code, so the
+               capability is checked before anything is offered. -->
+          <v-alert
+            v-if="profile && !profile.qrEnabled"
+            type="warning"
+            variant="tonal"
+            density="compact"
+            class="mb-4"
+          >
+            This reader is not set up to read QR codes.
+          </v-alert>
+
+          <!-- The honest part: a code opens the door only for a member the
+               permissions screen already admits. `assigned` is null when the
+               lookup failed, which is not the same as "no". -->
+          <v-alert
+            v-else-if="profile && profile.assigned === false"
+            type="warning"
+            variant="tonal"
+            density="compact"
+            class="mb-4"
+          >
+            You are not assigned to this reader, so this code will be refused at
+            the door. Ask a property manager to add you on the HID permissions
+            screen.
+          </v-alert>
+
+          <div v-if="qrImage" class="hid-profile-qr__code">
+            <img :src="qrImage" alt="Your HID QR code" width="220" height="220" />
+            <p class="hid-profile-qr__issued">
+              Issued {{ formatIssuedAt(profile?.issuedAt) }}
+            </p>
+          </div>
+          <p v-else class="hid-profile-qr__state">
+            You have no QR code on this reader yet.
+          </p>
+
+          <div class="hid-profile-qr__actions">
+            <AppButton
+              :disabled="working || !profile?.qrEnabled"
+              @click="generate"
+            >
+              {{ profile?.issued ? "Regenerate" : "Generate QR Code" }}
+            </AppButton>
+            <AppButton
+              v-if="qrImage"
+              variant="ghost"
+              icon="mdi-download"
+              @click="downloadQr"
+            >
+              Download
+            </AppButton>
+            <AppButton
+              v-if="profile?.issued"
+              variant="ghost"
+              :disabled="working"
+              @click="remove"
+            >
+              Remove
+            </AppButton>
+          </div>
+
+          <p class="field-hint">
+            Regenerating replaces the previous code. The old one stops working
+            immediately.
+          </p>
+        </template>
+      </v-card-text>
+    </v-card>
+
+    <v-snackbar v-model="snackbar.show" :color="snackbar.color" timeout="4000">
+      {{ snackbar.message }}
+    </v-snackbar>
+  </div>
+</template>
+
+<script setup lang="ts">
+import QRCode from "qrcode";
+import type { HidProfileQr } from "../composables/useHidAmico";
+
+const props = defineProps<{ site: string }>();
+
+const { getReaders, getProfileQr, issueProfileQr, deleteProfileQr } = useHidAmico();
+
+type HidReaderOption = { _id: string; name?: string; portalName?: string };
+
+const readers = ref<HidReaderOption[]>([]);
+const { selectHidReader, resolveForSite } = useHidReaderSelection();
+const selectedReaderId = ref("");
+const profile = ref<HidProfileQr | null>(null);
+const qrImage = ref("");
+const loading = ref(false);
+const working = ref(false);
+const snackbar = reactive({ show: false, color: "success", message: "" });
+
+const readerOptions = computed(() => readers.value.map((reader) => ({
+  title: `${reader.name || reader._id} — ${reader.portalName || "Portal not configured"}`,
+  value: reader._id,
+})));
+
+function showToast(message: string, color: "success" | "error" = "success") {
+  snackbar.message = message;
+  snackbar.color = color;
+  snackbar.show = true;
+}
+
+function toRecord(value: unknown): Record<string, any> {
+  return value && typeof value === "object" ? (value as Record<string, any>) : {};
+}
+
+function errorMessage(error: unknown) {
+  const record = toRecord(error);
+  return String(toRecord(record.data).message || record.message || "Something went wrong.");
+}
+
+function formatIssuedAt(value?: string) {
+  if (!value) return "";
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? "" : date.toLocaleString();
+}
+
+/**
+ * The image is drawn here, never fetched. The value is the credential itself,
+ * so keeping it on this page and out of any URL is the point.
+ */
+async function renderQr(value: string) {
+  if (!value) {
+    qrImage.value = "";
+    return;
+  }
+  try {
+    qrImage.value = await QRCode.toDataURL(value, { width: 440, margin: 1 });
+  } catch (error) {
+    console.error("Unable to render the HID QR code:", error);
+    qrImage.value = "";
+  }
+}
+
+/**
+ * Saves the rendered code as a PNG.
+ *
+ * Straight off the data URL already in the page - no request, so the credential
+ * never travels again to be downloaded. Same anchor-click approach `VisitorForm`
+ * uses for a visitor pass, and the reader name is in the file name because a
+ * member can hold one code per reader.
+ */
+function downloadQr() {
+  if (!qrImage.value) return;
+  const slug = String(profile.value?.readerName || "reader")
+    .trim()
+    .replace(/[^a-z0-9]+/gi, "-")
+    .replace(/^-|-$/g, "")
+    .toLowerCase();
+  const link = document.createElement("a");
+  link.href = qrImage.value;
+  link.download = `hid-qr-${slug || "reader"}.png`;
+  link.click();
+}
+
+async function loadReaders() {
+  if (!props.site) return;
+  const response = toRecord(await getReaders({ site: props.site, page: 1, limit: 100 }));
+  const data = toRecord(response.data);
+  const items = response.items ?? data.items ?? data.readers ?? [];
+  readers.value = (Array.isArray(items) ? items : []).filter((reader) => reader?._id);
+  /* Shared with every other HID screen — see `useHidReaderSelection`. The
+     resolver refuses a remembered reader that is not this site's, so a site
+     switch or a deleted reader falls back to the first rather than querying
+     an id the site does not own. */
+  selectedReaderId.value = resolveForSite(props.site, readers.value);
+}
+
+async function loadProfile() {
+  if (!selectedReaderId.value) return;
+  loading.value = true;
+  try {
+    const response = await getProfileQr(selectedReaderId.value);
+    profile.value = response?.data ?? null;
+    await renderQr(profile.value?.qrValue || "");
+  } catch (error: unknown) {
+    profile.value = null;
+    qrImage.value = "";
+    showToast(errorMessage(error), "error");
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function generate() {
+  if (!selectedReaderId.value) return;
+  working.value = true;
+  try {
+    const response = await issueProfileQr(selectedReaderId.value);
+    profile.value = response?.data ?? null;
+    await renderQr(profile.value?.qrValue || "");
+    showToast("QR code generated.");
+  } catch (error: unknown) {
+    showToast(errorMessage(error), "error");
+  } finally {
+    working.value = false;
+  }
+}
+
+async function remove() {
+  if (!selectedReaderId.value) return;
+  if (!window.confirm("Remove your QR code from this reader?")) return;
+  working.value = true;
+  try {
+    const response = await deleteProfileQr(selectedReaderId.value);
+    profile.value = response?.data ?? null;
+    await renderQr("");
+    showToast("QR code removed.");
+  } catch (error: unknown) {
+    showToast(errorMessage(error), "error");
+  } finally {
+    working.value = false;
+  }
+}
+
+watch(
+  () => props.site,
+  async () => {
+    await loadReaders();
+    await loadProfile();
+  },
+  { immediate: true },
+);
+
+/* Publish every change, including the seed above: a screen that had to fall
+   back to the first reader should leave the others agreeing with it. */
+watch(selectedReaderId, (value) => {
+  if (value) selectHidReader(props.site, value);
+});
+</script>
+
+<style scoped>
+.hid-profile-qr__header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.hid-profile-qr__title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.hid-profile-qr__card {
+  margin-top: 16px;
+  max-width: 460px;
+}
+
+.hid-profile-qr__reader {
+  margin: 0 0 14px;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.hid-profile-qr__reader span {
+  display: block;
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.hid-profile-qr__code {
+  display: grid;
+  place-items: center;
+  margin-bottom: 14px;
+}
+
+.hid-profile-qr__issued {
+  margin: 8px 0 0;
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.hid-profile-qr__state {
+  color: var(--muted);
+  font-size: 13.5px;
+  padding: 8px 0 14px;
+}
+
+.hid-profile-qr__actions {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+</style>