@7365admin1/layer-common 3.0.8 → 3.0.10

package/components/HidServiceSettingsPanel.vue

@@ -0,0 +1,150 @@
+<template>
+  <v-row align="center" class="py-2">
+    <v-col cols="12" md="8">
+      <div class="text-subtitle-1 font-weight-bold">
+        Enable HID biometric reader for this site
+      </div>
+      <div class="text-body-2 text-medium-emphasis mt-1">
+        When enabled, admins can register HID Amico devices and manage reader sync from Access Management.
+      </div>
+    </v-col>
+
+    <v-col cols="12" md="4" class="d-flex justify-md-end">
+      <v-switch
+        v-model="hidEnabled"
+        color="primary"
+        hide-details
+        inset
+        :loading="isSaving"
+        @update:model-value="saveHidService"
+      >
+        <template #label>
+          <span class="text-body-2">
+            {{ hidEnabled ? "Enabled" : "Disabled" }}
+          </span>
+        </template>
+      </v-switch>
+    </v-col>
+
+    <v-col cols="12" class="d-flex justify-end ga-2">
+      <v-btn
+        class="text-none"
+        color="primary"
+        variant="flat"
+        prepend-icon="mdi-card-account-details-star"
+        :disabled="!hidEnabled"
+        @click="goToHidReaders"
+      >
+        Manage HID Readers
+      </v-btn>
+    </v-col>
+
+    <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
+  </v-row>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  site: string;
+  org: string;
+  siteData?: Record<string, any> | null;
+}>();
+
+const emit = defineEmits<{
+  refresh: [];
+}>();
+
+const { updateSitebyId } = useSiteSettings();
+const { getHidServiceEnabled, setHidServiceOverride, hidServiceKeys } = useOptionalServices();
+
+const hidEnabled = ref(false);
+const isSaving = ref(false);
+const message = ref("");
+const messageColor = ref("");
+const messageSnackbar = ref(false);
+
+watch(
+  () => props.siteData,
+  (siteData) => {
+    hidEnabled.value = getHidServiceEnabled(props.site, siteData);
+  },
+  { immediate: true },
+);
+
+function showMessage(text: string, color: string) {
+  message.value = text;
+  messageColor.value = color;
+  messageSnackbar.value = true;
+}
+
+function normalizeServiceKey(value: unknown) {
+  return String(value ?? "")
+    .trim()
+    .toLowerCase()
+    .replace(/[\s-]+/g, "_");
+}
+
+function buildHidServices(enabled: boolean) {
+  const currentServices = Array.isArray(props.siteData?.metadata?.services)
+    ? [...props.siteData.metadata.services]
+    : [];
+
+  const service = {
+    key: "hid_amico",
+    name: "HID Face Reader",
+    enabled,
+    status: enabled ? "active" : "inactive",
+  };
+
+  const index = currentServices.findIndex((item: any) =>
+    hidServiceKeys.includes(normalizeServiceKey(item?.key ?? item?.code ?? item?.name)),
+  );
+
+  if (index >= 0) {
+    currentServices[index] = {
+      ...currentServices[index],
+      ...service,
+    };
+  } else {
+    currentServices.push(service);
+  }
+
+  return currentServices;
+}
+
+async function saveHidService(value: boolean) {
+  const previousValue = !value;
+  isSaving.value = true;
+
+  try {
+    const currentMetadata = {
+      ...(props.siteData?.metadata ?? {}),
+      services: buildHidServices(value),
+    };
+
+    await updateSitebyId(props.site, {
+      metadata: currentMetadata,
+    });
+    setHidServiceOverride(props.site, value);
+    hidEnabled.value = value;
+    emit("refresh");
+    await refreshNuxtData(`layout-selected-site-details-${useRuntimeConfig().public.APP}`);
+    showMessage(`HID Face Reader ${value ? "enabled" : "disabled"} successfully`, "success");
+  } catch (error: any) {
+    hidEnabled.value = previousValue;
+    showMessage(errorConverter(error), "error");
+  } finally {
+    isSaving.value = false;
+  }
+}
+
+function goToHidReaders() {
+  navigateTo({
+    name: "org-site-access-mgmt-hid-readers",
+    params: {
+      org: props.org,
+      site: props.site,
+    },
+  });
+}
+</script>