@7365admin1/layer-common 4.0.0 → 4.0.2

package/components/HidReaderUserRoster.vue

@@ -0,0 +1,376 @@
+<template>
+  <section class="hid-reader-user-roster">
+    <TableMain
+      title="HID Reader Users"
+      :headers="headers"
+      :items="users"
+      :loading="loading"
+      :items-per-page="-1"
+      :page="page"
+      :pages="pages"
+      :page-range="pageRange"
+      item-value="_rowKey"
+      show-header
+      @refresh="loadUsers"
+      @update:page="goToPage"
+    >
+      <template #actions>
+        <AppButton icon="mdi-account-switch-outline" @click="openMapping">
+          HID User Mapping
+        </AppButton>
+      </template>
+
+      <template #extension>
+        <div class="app-filter-row hid-reader-user-roster__filters">
+          <AppSelect
+            v-if="readers.length"
+            v-model="selectedReaderId"
+            class="reader-select"
+            :items="readerOptions"
+            @update:model-value="reloadFromFirstPage"
+          />
+          <AppField
+            v-model="search"
+            search
+            placeholder="Search Amico user, UID or registration"
+            @keyup.enter="reloadFromFirstPage"
+          />
+        </div>
+      </template>
+
+      <template #[`item.name`]="{ item }">
+        <span class="app-cell--strong">{{ getRawName(item) }}</span>
+      </template>
+
+      <template #[`item.hidUserId`]="{ item }">
+        <span class="app-cell--num">{{ formatUid(item.hidUserId) }}</span>
+      </template>
+
+      <template #[`item.registration`]="{ item }">
+        <span class="app-cell--num">{{ item.registration || "N/A" }}</span>
+      </template>
+
+      <template #[`item.facialData`]="{ item }">
+        <v-avatar
+          v-if="getUserImageSrc(item)"
+          size="34"
+          rounded="lg"
+          class="hid-face-avatar"
+        >
+          <v-img :src="getUserImageSrc(item)" cover />
+        </v-avatar>
+        <span v-else :class="hasFacialData(item) ? 'facial-data--available' : 'app-cell--muted'">
+          <v-icon
+            :icon="hasFacialData(item) ? 'mdi-face-recognition' : 'mdi-face-man-shimmer-outline'"
+            size="19"
+          />
+          {{ hasFacialData(item) ? "Enrolled" : "Not enrolled" }}
+        </span>
+      </template>
+
+      <template #[`item.isAdministrator`]="{ item }">
+        <v-icon
+          :icon="item.isAdministrator ? 'mdi-check-circle' : 'mdi-close-circle'"
+          :class="item.isAdministrator ? 'admin-rule--enabled' : 'admin-rule--disabled'"
+          :aria-label="item.isAdministrator ? 'Administrator' : 'Not administrator'"
+          size="22"
+        />
+      </template>
+
+      <template #[`item.mappingStatus`]="{ item }">
+        <StatusChip :status="isMapped(item) ? 'Mapped' : 'Unmapped'" />
+      </template>
+
+      <template #no-data>
+        <div class="table-card__empty">
+          <v-icon icon="mdi-account-off-outline" size="32" />
+          <span>No users found on this HID reader.</span>
+        </div>
+      </template>
+    </TableMain>
+
+    <v-snackbar v-model="snackbar.show" :color="snackbar.color" timeout="3500">
+      {{ snackbar.message }}
+    </v-snackbar>
+  </section>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  site: {
+    type: String,
+    required: true,
+  },
+});
+
+type HidMetadata = Record<string, unknown> & { name?: string };
+type HidReader = Record<string, unknown> & {
+  _id: string;
+  name?: string;
+  deviceId?: string;
+  portalName?: string;
+};
+type HidReaderUser = Record<string, unknown> & {
+  _rowKey?: string;
+  hidUserId?: string;
+  registration?: string;
+  name?: string;
+  metadata?: HidMetadata;
+  person?: string;
+  member?: string;
+  serviceProvider?: string;
+  visitor?: string;
+  isAdministrator?: boolean;
+};
+
+const { getReaders, getReaderUsers, getUserImage } = useHidAmico();
+const route = useRoute();
+const router = useRouter();
+const readers = ref<HidReader[]>([]);
+const users = ref<HidReaderUser[]>([]);
+const userImages = ref<Record<string, string>>({});
+const selectedReaderId = ref("");
+const search = ref("");
+const page = ref(1);
+const pages = ref(1);
+const total = ref(0);
+const serverPageRange = ref("");
+const loading = ref(false);
+const snackbar = reactive({ show: false, color: "success", message: "" });
+
+const headers = [
+  { title: "Amico Name", value: "name", sortable: false },
+  { title: "UID", value: "hidUserId", sortable: false },
+  { title: "Registration No.", value: "registration", sortable: false },
+  { title: "Facial Data", value: "facialData", sortable: false },
+  { title: "Admin", value: "isAdministrator", sortable: false },
+  { title: "iService Mapping", value: "mappingStatus", sortable: false },
+];
+
+const readerOptions = computed(() => readers.value.map((reader) => ({
+  title: `${reader.name || reader.deviceId || reader._id} - ${reader.portalName || "Portal not configured"}`,
+  value: reader._id,
+})));
+
+const pageRange = computed(() => {
+  if (serverPageRange.value) return serverPageRange.value;
+  if (!total.value) return "0-0 of 0";
+  const start = (page.value - 1) * 10 + 1;
+  return `${start}-${Math.min(page.value * 10, total.value)} of ${total.value}`;
+});
+
+watch(() => props.site, init, { immediate: true });
+
+async function init() {
+  await loadReaders();
+  await loadUsers();
+}
+
+async function loadReaders() {
+  if (!props.site) return;
+  try {
+    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 : [])
+      .map(toReader)
+      .filter((reader): reader is HidReader => reader !== null);
+    if (!selectedReaderId.value && readers.value.length) selectedReaderId.value = readers.value[0]._id;
+  } catch (error: unknown) {
+    readers.value = [];
+    showToast(getErrorMessage(error), "error");
+  }
+}
+
+async function loadUsers() {
+  if (!selectedReaderId.value) {
+    users.value = [];
+    total.value = 0;
+    return;
+  }
+
+  loading.value = true;
+  try {
+    const response = toRecord(await getReaderUsers(selectedReaderId.value, {
+      page: page.value,
+      limit: 10,
+      search: search.value.trim(),
+    }));
+    const data = toRecord(response.data);
+    const items = response.items ?? data.items ?? [];
+    users.value = (Array.isArray(items) ? items : []).map(toReaderUser);
+    await loadUserImages(users.value);
+    total.value = toNumber(response.total ?? data.total, users.value.length);
+    pages.value = Math.max(1, toNumber(response.pages ?? data.pages, 1));
+    serverPageRange.value = toText(response.pageRange ?? data.pageRange);
+  } catch (error: unknown) {
+    users.value = [];
+    total.value = 0;
+    pages.value = 1;
+    serverPageRange.value = "";
+    showToast(getErrorMessage(error), "error");
+  } finally {
+    loading.value = false;
+  }
+}
+
+function goToPage(nextPage: number) {
+  page.value = nextPage;
+  loadUsers();
+}
+
+function reloadFromFirstPage() {
+  page.value = 1;
+  userImages.value = {};
+  loadUsers();
+}
+
+function openMapping() {
+  router.push({
+    name: "org-site-access-mgmt-hid-user-mapping",
+    params: { org: route.params.org, site: props.site },
+  });
+}
+
+function isMapped(user: HidReaderUser) {
+  return Boolean(user.person || user.member || user.serviceProvider || user.visitor);
+}
+
+function hasFacialData(user: HidReaderUser) {
+  return user.metadata?.facialEnrolled === true || Boolean(toText(user.metadata?.facialData));
+}
+
+async function loadUserImages(items: HidReaderUser[]) {
+  if (!selectedReaderId.value) return;
+
+  await Promise.all(items.map(async (user) => {
+    const hidUserId = toHidNumericId(user.hidUserId);
+    const key = String(hidUserId || "");
+    if (!hidUserId || key in userImages.value) return;
+
+    try {
+      const response = toRecord(await getUserImage(selectedReaderId.value, hidUserId));
+      const image = toRecord(response.data ?? response);
+      const base64 = toText(image.base64);
+      userImages.value[key] = base64
+        ? `data:${toText(image.contentType) || "image/jpeg"};base64,${base64}`
+        : "";
+    } catch {
+      userImages.value[key] = "";
+    }
+  }));
+}
+
+function getUserImageSrc(user: HidReaderUser) {
+  const hidUserId = toHidNumericId(user.hidUserId);
+  return toText(user.metadata?.photo) || (hidUserId ? userImages.value[String(hidUserId)] : "") || "";
+}
+
+function getRawName(user: HidReaderUser) {
+  return toText(user.metadata?.name) || toText(user.name) || "Unknown";
+}
+
+function formatUid(value: unknown) {
+  const text = toText(value);
+  if (!text) return "N/A";
+  const numeric = Number(text);
+  return Number.isSafeInteger(numeric) && numeric > 0 ? `UID${String(numeric).padStart(6, "0")}` : text;
+}
+
+function toHidNumericId(value: unknown) {
+  const numeric = Number(toText(value));
+  return Number.isSafeInteger(numeric) && numeric > 0 ? numeric : undefined;
+}
+
+function showToast(message: string, color = "success") {
+  snackbar.message = message;
+  snackbar.color = color;
+  snackbar.show = true;
+}
+
+function getErrorMessage(error: unknown) {
+  const record = toRecord(error);
+  const data = toRecord(record.data);
+  return toText(data.message) || toText(record.message) || "Unable to load HID reader users.";
+}
+
+function toReader(value: unknown): HidReader | null {
+  const reader = toRecord(value);
+  const id = toText(reader._id);
+  return id ? { ...reader, _id: id, name: toText(reader.name) || undefined } : null;
+}
+
+function toReaderUser(value: unknown): HidReaderUser {
+  const user = toRecord(value);
+  return {
+    ...user,
+    _rowKey: toText(user._rowKey) || toText(user.id) || toText(user.hidUserId),
+    hidUserId: toText(user.hidUserId) || toText(user.id) || undefined,
+    registration: toText(user.registration) || undefined,
+    name: toText(user.name) || undefined,
+    metadata: toMetadata(user.metadata),
+    person: toText(user.person) || undefined,
+    member: toText(user.member) || undefined,
+    serviceProvider: toText(user.serviceProvider) || undefined,
+    visitor: toText(user.visitor) || undefined,
+    isAdministrator: user.isAdministrator === true,
+  };
+}
+
+function toMetadata(value: unknown): HidMetadata {
+  return toRecord(value) as HidMetadata;
+}
+
+function toRecord(value: unknown): Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value)
+    ? value as Record<string, unknown>
+    : {};
+}
+
+function toText(value: unknown) {
+  if (typeof value === "string") return value.trim();
+  if (typeof value === "number") return String(value);
+  return "";
+}
+
+function toNumber(value: unknown, fallback: number) {
+  const number = Number(value);
+  return Number.isFinite(number) ? number : fallback;
+}
+</script>
+
+<style scoped>
+.hid-reader-user-roster {
+  padding: 24px 0;
+  min-width: 0;
+}
+
+.hid-reader-user-roster__filters {
+  margin: 0;
+  padding: 10px 14px;
+}
+
+.hid-reader-user-roster__filters :deep(.app-field) {
+  max-width: 320px;
+}
+
+.admin-rule--enabled {
+  color: var(--success, #16855f);
+}
+
+.admin-rule--disabled {
+  color: var(--err, #d94a4a);
+}
+
+.hid-face-avatar {
+  border: 1px solid var(--border-color, #e0e3e8);
+}
+
+.facial-data--available {
+  align-items: center;
+  color: var(--success, #16855f);
+  display: inline-flex;
+  gap: 6px;
+  white-space: nowrap;
+}
+</style>

package/components/HidUserEnrollment.vue

@@ -936,7 +936,7 @@ async function loadSubjectCandidates() {
       page: 1,
       limit: 500,
     });
-    permissionCandidates.value = response.items || [];
+    permissionCandidates.value = response.items ?? response.data?.items ?? [];
   } finally {
     loadingSubjects.value = false;
   }
@@ -1892,6 +1892,12 @@ function toRecord(value: unknown): Record<string, unknown> {
     : {};
 }
 
+function toText(value: unknown, fallback = "") {
+  if (typeof value === "string") return value.trim() || fallback;
+  if (typeof value === "number") return String(value);
+  return fallback;
+}
+
 function toHidReader(value: unknown): HidReader | null {
   const reader = toRecord(value);
   const id = toText(reader._id);