@7365admin1/layer-common 3.0.18 → 3.0.19

package/components/HidReaderForm.vue

@@ -17,16 +17,18 @@
           class="mb-3"
         />
 
-        <div class="field-label">Base URL / IP address <span>*</span></div>
-        <v-text-field
-          v-model="draft.baseUrl"
-          aria-label="Base URL / IP address"
-          placeholder="http://192.168.0.129"
-          variant="outlined"
-          density="compact"
-          hide-details="auto"
-          class="mb-3"
-        />
+        <template v-if="mode === 'add'">
+          <div class="field-label">Base URL / IP address <span>*</span></div>
+          <v-text-field
+            v-model="draft.baseUrl"
+            aria-label="Base URL / IP address"
+            placeholder="http://192.168.x.x."
+            variant="outlined"
+            density="compact"
+            hide-details="auto"
+            class="mb-3"
+          />
+        </template>
 
         <div class="field-label">Device ID <span>*</span></div>
         <v-text-field
@@ -166,12 +168,18 @@ function close() {
 }
 
 function submit() {
-  emit("submit", {
+  const payload: Record<string, any> = {
     ...draft,
     monitorPath: monitorEnabled.value ? "api/notifications" : "",
     enabled: monitorEnabled.value,
     status: monitorEnabled.value ? "active" : "inactive",
-  });
+  };
+
+  if (props.mode === "edit") {
+    delete payload.baseUrl;
+  }
+
+  emit("submit", payload);
 }
 </script>
 

package/components/HidReaderManagement.vue

@@ -38,31 +38,26 @@
         <v-btn icon="mdi-refresh" variant="text" density="comfortable" :loading="loading" @click="loadReaders" />
       </div>
 
-      <v-table>
+      <v-table class="reader-table">
         <thead>
           <tr>
-            <th>Name</th>
-            <th>Location</th>
-            <th>Base URL</th>
-            <th>Device ID</th>
-            <th>Status</th>
-            <th>Last sync at</th>
-            <th>Last sync message</th>
-            <th class="text-right"></th>
+            <th class="name-column">Name</th>
+            <th class="location-column">Location</th>
+            <th class="device-column">Device ID</th>
+            <th class="status-column">Status</th>
+            <th class="sync-at-column">Last sync at</th>
+            <th class="message-column">Last sync message</th>
+            <th class="action-column"></th>
           </tr>
         </thead>
         <tbody>
           <tr v-for="reader in filteredReaders" :key="reader._id">
-            <td>{{ reader.name || "N/A" }}</td>
-            <td>{{ reader.location || "N/A" }}</td>
-            <td>
-              <a v-if="reader.baseUrl" :href="reader.baseUrl" target="_blank" rel="noopener">
-                {{ reader.baseUrl }}
-              </a>
-              <span v-else>N/A</span>
+            <td class="name-cell">
+              <span class="cell-strong">{{ reader.name || "N/A" }}</span>
             </td>
-            <td>{{ reader.deviceId || "N/A" }}</td>
-            <td>
+            <td class="location-cell">{{ reader.location || "N/A" }}</td>
+            <td class="device-cell">{{ reader.deviceId || "N/A" }}</td>
+            <td class="status-cell">
               <v-chip
                 size="small"
                 variant="flat"
@@ -72,12 +67,22 @@
                 {{ formatReaderStatus(resolveReaderStatus(reader)) }}
               </v-chip>
             </td>
-            <td>{{ formatDate(reader.lastSyncAt) }}</td>
-            <td>{{ reader.lastSyncMessage || "N/A" }}</td>
-            <td class="text-right">
+            <td class="sync-at-cell">{{ formatDate(reader.lastSyncAt) }}</td>
+            <td class="message-cell">
+              <span class="message-text" :title="reader.lastSyncMessage || 'N/A'">
+                {{ reader.lastSyncMessage || "N/A" }}
+              </span>
+            </td>
+            <td class="action-cell">
               <v-menu>
                 <template #activator="{ props: menuProps }">
-                  <v-btn v-bind="menuProps" icon="mdi-dots-vertical" variant="text" density="comfortable" />
+                  <v-btn
+                    v-bind="menuProps"
+                    icon="mdi-dots-vertical"
+                    variant="text"
+                    density="comfortable"
+                    class="action-menu-button"
+                  />
                 </template>
 
                 <v-list density="compact" min-width="180">
@@ -112,7 +117,6 @@
         <v-card-text>
           <div class="detail-grid">
             <span>HID reader name</span><strong>{{ selectedReader?.name || "N/A" }}</strong>
-            <span>Base URL / IP address</span><strong>{{ selectedReader?.baseUrl || "N/A" }}</strong>
             <span>Device ID</span><strong>{{ selectedReader?.deviceId || "N/A" }}</strong>
             <span>Location</span><strong>{{ selectedReader?.location || "N/A" }}</strong>
             <span>Monitor Path</span><strong>{{ selectedReader?.monitorPath || "N/A" }}</strong>
@@ -140,10 +144,6 @@
           <v-icon icon="mdi-database-sync-outline" color="#1976d2" size="48" />
           <h3>Test Device Connection</h3>
           <p>You are about to test the connection for {{ selectedReader?.name || "this HID Reader" }}.</p>
-          <div class="reader-action-meta">
-            <span>IP Address:</span>
-            <strong>{{ readerIpAddress }}</strong>
-          </div>
         </v-card-text>
 
         <v-card-text v-else-if="pendingAction === 'sync' && actionStage === 'confirm'" class="reader-action-content">
@@ -312,7 +312,7 @@ const confirmMessage = computed(() => {
     return `You're about to sync data with ${selectedReader.value?.name || "this HID Reader"}.`;
   }
   if (pendingAction.value === "test") {
-    return `You are about to test the connection to ${selectedReader.value?.baseUrl || "this HID Reader"}.`;
+    return `You are about to test the connection for ${selectedReader.value?.name || "this HID Reader"}.`;
   }
   return "Are you sure you want to permanently delete reader?";
 });
@@ -325,8 +325,6 @@ const confirmActionLabel = computed(() => {
   return "Confirm";
 });
 
-const readerIpAddress = computed(() => getReaderHost(selectedReader.value?.baseUrl));
-
 watch(
   () => props.site,
   () => loadReaders(),
@@ -830,15 +828,6 @@ function countFacialData(users: Record<string, any>[]) {
   return users.filter((user) => user.face || user.photo || user.image || user.imageUrl || user.faceImage).length;
 }
 
-function getReaderHost(value?: string) {
-  if (!value) return "N/A";
-  try {
-    return new URL(value).hostname || value;
-  } catch {
-    return value.replace(/^https?:\/\//, "").split("/")[0] || value;
-  }
-}
-
 function getFriendlyHidError(error: any) {
   const message = getHidErrorMessage(error);
   const lowerMessage = message.toLowerCase();
@@ -863,7 +852,7 @@ function getFriendlyHidError(error: any) {
     lowerMessage.includes("network error") ||
     lowerMessage.includes("no route to host")
   ) {
-    return "Unable to connect to the HID device. Please check that the reader is online, reachable from the server, and the Base URL/IP address is correct.";
+    return "Unable to connect to the HID device. Please check that the reader is online and reachable from the server.";
   }
 
   if (lowerMessage.includes("login failed") || lowerMessage.includes("session")) {
@@ -972,63 +961,119 @@ function formatReaderStatus(value?: string) {
   overflow-y: hidden;
 }
 
-.table-card :deep(table) {
+.reader-table :deep(table) {
   table-layout: fixed;
   width: 100%;
-  min-width: 1120px;
+  min-width: 920px;
+  border-collapse: separate;
+  border-spacing: 0;
+}
+
+.reader-table :deep(th) {
+  height: 44px;
+  background: #f8fafc;
+  color: #344054;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0;
+  text-transform: none;
+  border-bottom: 1px solid #e7ebef;
+}
+
+.reader-table :deep(td) {
+  height: 64px;
+  color: #1f2937;
+  font-size: 13px;
+  border-bottom: 1px solid #edf0f3;
+  vertical-align: middle;
+}
+
+.reader-table :deep(tbody tr) {
+  transition: background-color 0.15s ease;
 }
 
-.table-card :deep(th),
-.table-card :deep(td) {
+.reader-table :deep(tbody tr:hover) {
+  background: #fbfcfe;
+}
+
+.reader-table :deep(th),
+.reader-table :deep(td) {
+  padding: 0 14px !important;
   white-space: nowrap;
 }
 
-.table-card :deep(th:nth-child(1)),
-.table-card :deep(td:nth-child(1)) {
+.name-column,
+.name-cell {
+  width: 19%;
+}
+
+.location-column,
+.location-cell {
   width: 14%;
 }
 
-.table-card :deep(th:nth-child(2)),
-.table-card :deep(td:nth-child(2)) {
+.device-column,
+.device-cell {
+  width: 15%;
+}
+
+.status-column,
+.status-cell {
   width: 12%;
 }
 
-.table-card :deep(th:nth-child(3)),
-.table-card :deep(td:nth-child(3)) {
-  width: 18%;
+.sync-at-column,
+.sync-at-cell {
+  width: 15%;
 }
 
-.table-card :deep(th:nth-child(4)),
-.table-card :deep(td:nth-child(4)) {
-  width: 12%;
+.message-column,
+.message-cell {
+  width: 20%;
+  min-width: 0;
 }
 
-.table-card :deep(th:nth-child(5)),
-.table-card :deep(td:nth-child(5)) {
-  width: 10%;
+.action-column,
+.action-cell {
+  width: 5%;
+  text-align: right;
 }
 
-.table-card :deep(th:nth-child(6)),
-.table-card :deep(td:nth-child(6)) {
-  width: 14%;
+.cell-strong {
+  display: block;
+  overflow: hidden;
+  color: #111827;
+  font-weight: 600;
+  text-overflow: ellipsis;
 }
 
-.table-card :deep(th:nth-child(7)),
-.table-card :deep(td:nth-child(7)) {
-  width: 14%;
+.location-cell,
+.device-cell,
+.sync-at-cell {
+  overflow: hidden;
+  color: #475467;
+  text-overflow: ellipsis;
+}
+
+.message-text {
+  display: block;
+  max-width: 100%;
   overflow: hidden;
+  color: #475467;
+  line-height: 1.35;
   text-overflow: ellipsis;
 }
 
-.table-card :deep(th:nth-child(8)),
-.table-card :deep(td:nth-child(8)) {
-  width: 6%;
+.action-menu-button {
+  color: #344054;
 }
 
 .table-refresh {
   display: flex;
-  padding: 8px 10px;
-  border-bottom: 1px solid #eeeeee;
+  justify-content: flex-start;
+  padding: 10px 14px;
+  border-bottom: 1px solid #e7ebef;
+  background: #ffffff;
 }
 
 .empty-state {
@@ -1116,18 +1161,6 @@ function formatReaderStatus(value?: string) {
   line-height: 1.45;
 }
 
-.reader-action-meta {
-  display: inline-flex;
-  gap: 8px;
-  align-items: center;
-  color: #344054;
-  font-size: 13px;
-}
-
-.reader-action-meta strong {
-  font-weight: 700;
-}
-
 .reader-sync-review {
   justify-items: stretch;
   text-align: left;