@7365admin1/layer-common 3.2.7 → 3.2.8-staging.201

package/components/HidReaderForm.vue

@@ -1,12 +1,12 @@
 <template>
   <v-dialog v-model="dialogModel" max-width="430" persistent>
-    <v-card class="hid-reader-form" rounded="lg">
+    <v-card class="hid-reader-form screen-modal">
       <v-card-title class="form-title">
         {{ mode === "edit" ? "Edit Reader" : "Add Reader" }}
       </v-card-title>
 
-      <v-card-text class="form-body">
-        <div class="field-label">HID Reader Name <span>*</span></div>
+      <v-card-text class="form-body screen-modal__body">
+        <InputLabel title="HID Reader Name" required class="mb-1" />
         <v-text-field
           v-model="draft.name"
           aria-label="HID Reader Name"
@@ -17,7 +17,7 @@
           class="mb-3"
         />
 
-        <div class="field-label">Base URL / IP address <span>*</span></div>
+        <InputLabel title="Base URL / IP address" required class="mb-1" />
         <v-text-field
           v-model="draft.baseUrl"
           aria-label="Base URL / IP address"
@@ -28,18 +28,7 @@
           class="mb-3"
         />
 
-        <div class="field-label">Device ID <span>*</span></div>
-        <v-text-field
-          v-model="draft.deviceId"
-          aria-label="Device ID"
-          placeholder="Enter device id"
-          variant="outlined"
-          density="compact"
-          hide-details="auto"
-          class="mb-3"
-        />
-
-        <div class="field-label">Location <span>*</span></div>
+        <InputLabel title="Location" required class="mb-1" />
         <v-text-field
           v-model="draft.location"
           aria-label="Location"
@@ -50,13 +39,13 @@
           class="mb-3"
         />
 
-        <div class="field-label">Monitor Path <span>*</span></div>
+        <InputLabel title="Monitor Path" required class="mb-1" />
         <v-btn-toggle v-model="monitorEnabled" mandatory divided class="monitor-toggle mb-3">
           <v-btn :value="true" class="text-none">Enable</v-btn>
           <v-btn :value="false" class="text-none">Disable</v-btn>
         </v-btn-toggle>
 
-        <div class="field-label">Username <span>*</span></div>
+        <InputLabel title="Username" required class="mb-1" />
         <v-text-field
           v-model="draft.username"
           aria-label="Username"
@@ -67,7 +56,7 @@
           class="mb-3"
         />
 
-        <div class="field-label">Confirm Password <span>*</span></div>
+        <InputLabel title="Confirm Password" required class="mb-1" />
         <v-text-field
           v-model="draft.password"
           :type="showPassword ? 'text' : 'password'"
@@ -79,22 +68,64 @@
           :append-inner-icon="showPassword ? 'mdi-eye-off' : 'mdi-eye'"
           @click:append-inner="showPassword = !showPassword"
         />
+
+        <v-btn
+          v-if="mode === 'add'"
+          block
+          variant="tonal"
+          color="primary"
+          prepend-icon="mdi-lan-connect"
+          class="text-none mt-3"
+          :loading="discovering"
+          :disabled="!canDiscover"
+          @click="connectReader"
+        >
+          Connect &amp; discover reader
+        </v-btn>
+        <v-alert v-if="discoveryError" type="error" density="compact" variant="tonal" class="mt-3">
+          {{ discoveryError }}
+        </v-alert>
+
+        <InputLabel title="Device ID" required class="mt-3 mb-1" />
+        <v-text-field
+          v-model="draft.deviceId"
+          aria-label="Device ID"
+          placeholder="Connect to detect device ID"
+          variant="outlined"
+          density="compact"
+          hide-details="auto"
+          class="mb-3"
+          readonly
+        />
+
+        <InputLabel title="HID Portal" required class="mb-1" />
+        <v-select
+          v-model="draft.portalId"
+          :items="portals"
+          item-title="name"
+          item-value="id"
+          aria-label="HID Portal"
+          placeholder="Connect to load portals"
+          variant="outlined"
+          density="compact"
+          hide-details="auto"
+          :readonly="mode === 'edit'"
+        />
       </v-card-text>
 
-      <v-card-actions class="form-actions pa-0">
+      <v-card-actions class="screen-modal__footer">
         <v-btn
-          class="text-none action-cancel"
+          class="text-none screen-btn-ghost"
           variant="flat"
-          height="48"
           @click="close"
         >
           Cancel
         </v-btn>
         <v-btn
-          class="text-none action-submit"
+          class="text-none screen-btn-primary"
           variant="flat"
-          height="48"
           :loading="loading"
+          :disabled="mode === 'add' && (!draft.deviceId || !draft.portalId)"
           @click="submit"
         >
           Submit
@@ -122,6 +153,13 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  // The site this reader belongs to. Passed down from HidReaderManagement,
+  // which already has it as a prop from the page's route. Reader discovery is
+  // authorized against it server-side.
+  site: {
+    type: String,
+    default: "",
+  },
 });
 
 const emit = defineEmits<{
@@ -135,11 +173,18 @@ const dialogModel = computed({
 });
 
 const showPassword = ref(false);
+const discovering = ref(false);
+const discoveryError = ref("");
+const portals = ref<Array<{ id: number; name: string }>>([]);
+const discoveredConnection = ref("");
+const { discoverReader } = useHidAmico();
 const monitorEnabled = ref(true);
 const draft = reactive({
   name: "",
   baseUrl: "",
   deviceId: "",
+  portalId: null as number | null,
+  portalName: "",
   location: "",
   username: "",
   password: "",
@@ -153,6 +198,13 @@ watch(
     draft.name = props.reader?.name ?? "";
     draft.baseUrl = props.reader?.baseUrl ?? "";
     draft.deviceId = props.reader?.deviceId ?? "";
+    draft.portalId = props.reader?.portalId ?? null;
+    draft.portalName = props.reader?.portalName ?? "";
+    portals.value = draft.portalId
+      ? [{ id: draft.portalId, name: draft.portalName || `Portal ${draft.portalId}` }]
+      : [];
+    discoveryError.value = "";
+    discoveredConnection.value = "";
     draft.location = props.reader?.location ?? "";
     draft.username = props.reader?.username ?? "";
     draft.password = props.reader?.password ?? "";
@@ -165,9 +217,71 @@ function close() {
   emit("update:modelValue", false);
 }
 
+const canDiscover = computed(() => Boolean(
+  draft.baseUrl.trim() && draft.username.trim() && draft.password,
+));
+
+watch(
+  () => [draft.baseUrl, draft.username, draft.password],
+  () => {
+    if (props.mode !== "add" || !discoveredConnection.value) return;
+    const current = [draft.baseUrl.trim(), draft.username.trim(), draft.password].join("\n");
+    if (current !== discoveredConnection.value) {
+      draft.deviceId = "";
+      draft.portalId = null;
+      portals.value = [];
+      discoveredConnection.value = "";
+    }
+  },
+);
+
+async function connectReader() {
+  discovering.value = true;
+  discoveryError.value = "";
+  try {
+    const response = await discoverReader({
+      baseUrl: draft.baseUrl.trim(),
+      username: draft.username.trim(),
+      password: draft.password,
+      site: props.site,
+    });
+    const nestedData = response?.data;
+    const data = typeof nestedData === "object" && nestedData !== null
+      ? nestedData as Record<string, unknown>
+      : response;
+    draft.deviceId = String(data?.deviceId || "");
+    portals.value = Array.isArray(data?.portals)
+      ? data.portals.flatMap((portal: unknown) => {
+          if (typeof portal !== "object" || portal === null) return [];
+          const item = portal as Record<string, unknown>;
+          const id = Number(item.id);
+          const name = String(item.name || "").trim();
+          return Number.isSafeInteger(id) && id > 0 && name ? [{ id, name }] : [];
+        })
+      : [];
+    draft.portalId = portals.value.length === 1 ? portals.value[0].id : null;
+    discoveredConnection.value = [draft.baseUrl.trim(), draft.username.trim(), draft.password].join("\n");
+  } catch (error: unknown) {
+    draft.deviceId = "";
+    draft.portalId = null;
+    portals.value = [];
+    const record = typeof error === "object" && error !== null ? error as Record<string, unknown> : {};
+    const errorData = typeof record.data === "object" && record.data !== null
+      ? record.data as Record<string, unknown>
+      : {};
+    discoveryError.value = String(
+      errorData.message || record.message || "Unable to connect to the HID reader.",
+    );
+  } finally {
+    discovering.value = false;
+  }
+}
+
 function submit() {
+  const portal = portals.value.find((item) => item.id === Number(draft.portalId));
   const payload: Record<string, any> = {
     ...draft,
+    portalName: portal?.name || draft.portalName,
     monitorPath: monitorEnabled.value ? "api/notifications" : "",
     enabled: monitorEnabled.value,
     status: monitorEnabled.value ? "active" : "inactive",
@@ -182,28 +296,18 @@ function submit() {
   overflow: hidden;
 }
 
+/* Type comes from `.screen-modal .v-card-title`; only the header strip's own
+   padding and rule stay here. `#ececec` was a fixed near-white line, i.e.
+   invisible on a light card and a bright scratch across a dark one. */
 .form-title {
-  font-size: 14px;
-  font-weight: 700;
   padding: 12px 16px;
-  border-bottom: 1px solid #ececec;
+  border-bottom: 1px solid var(--border);
 }
 
 .form-body {
   padding: 18px 16px 20px;
 }
 
-.field-label {
-  color: #4f5a66;
-  font-size: 12px;
-  font-weight: 600;
-  margin-bottom: 6px;
-}
-
-.field-label span {
-  color: #e53935;
-}
-
 .monitor-toggle {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -214,32 +318,11 @@ function submit() {
   height: 36px;
 }
 
-.form-actions {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-}
-
-.action-cancel {
-  background: #ffffff;
-  color: #111827;
-  border-radius: 0;
-}
-
-.action-submit {
-  background: #062d42;
-  color: #ffffff;
-  border-radius: 0;
-}
-
 @media (max-width: 600px) {
   .form-body {
     padding: 14px 12px 16px;
   }
 
-  .form-actions {
-    grid-template-columns: 1fr;
-  }
-
   :global(.v-dialog > .v-overlay__content) {
     max-width: calc(100vw - 24px) !important;
     margin: 12px !important;