@7365admin1/layer-common 3.0.8 → 3.0.9

package/components/HidReaderForm.vue

@@ -0,0 +1,246 @@
+<template>
+  <v-dialog v-model="dialogModel" max-width="430" persistent>
+    <v-card class="hid-reader-form" rounded="lg">
+      <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-text-field
+          v-model="draft.name"
+          aria-label="HID Reader Name"
+          placeholder="HID reader name"
+          variant="outlined"
+          density="compact"
+          hide-details="auto"
+          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"
+        />
+
+        <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>
+        <v-text-field
+          v-model="draft.location"
+          aria-label="Location"
+          placeholder="Enter location"
+          variant="outlined"
+          density="compact"
+          hide-details="auto"
+          class="mb-3"
+        />
+
+        <div class="field-label">Monitor Path <span>*</span></div>
+        <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>
+        <v-text-field
+          v-model="draft.username"
+          aria-label="Username"
+          placeholder="Enter username"
+          variant="outlined"
+          density="compact"
+          hide-details="auto"
+          class="mb-3"
+        />
+
+        <div class="field-label">Confirm Password <span>*</span></div>
+        <v-text-field
+          v-model="draft.password"
+          :type="showPassword ? 'text' : 'password'"
+          aria-label="Confirm Password"
+          placeholder="Enter password"
+          variant="outlined"
+          density="compact"
+          hide-details="auto"
+          :append-inner-icon="showPassword ? 'mdi-eye-off' : 'mdi-eye'"
+          @click:append-inner="showPassword = !showPassword"
+        />
+      </v-card-text>
+
+      <v-card-actions class="form-actions pa-0">
+        <v-btn
+          class="text-none action-cancel"
+          variant="flat"
+          height="48"
+          @click="close"
+        >
+          Cancel
+        </v-btn>
+        <v-btn
+          class="text-none action-submit"
+          variant="flat"
+          height="48"
+          :loading="loading"
+          @click="submit"
+        >
+          Submit
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  mode: {
+    type: String as () => "add" | "edit",
+    default: "add",
+  },
+  reader: {
+    type: Object as () => Record<string, any> | null,
+    default: null,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits<{
+  "update:modelValue": [value: boolean];
+  submit: [payload: Record<string, any>];
+}>();
+
+const dialogModel = computed({
+  get: () => props.modelValue,
+  set: (value: boolean) => emit("update:modelValue", value),
+});
+
+const showPassword = ref(false);
+const monitorEnabled = ref(true);
+const draft = reactive({
+  name: "",
+  baseUrl: "",
+  deviceId: "",
+  location: "",
+  username: "",
+  password: "",
+});
+
+watch(
+  () => [props.modelValue, props.reader],
+  () => {
+    if (!props.modelValue) return;
+
+    draft.name = props.reader?.name ?? "";
+    draft.baseUrl = props.reader?.baseUrl ?? "";
+    draft.deviceId = props.reader?.deviceId ?? "";
+    draft.location = props.reader?.location ?? "";
+    draft.username = props.reader?.username ?? "";
+    draft.password = props.reader?.password ?? "";
+    monitorEnabled.value = props.reader?.enabled ?? true;
+  },
+  { immediate: true },
+);
+
+function close() {
+  emit("update:modelValue", false);
+}
+
+function submit() {
+  emit("submit", {
+    ...draft,
+    monitorPath: monitorEnabled.value ? "api/notifications" : "",
+    enabled: monitorEnabled.value,
+    status: monitorEnabled.value ? "active" : "inactive",
+  });
+}
+</script>
+
+<style scoped>
+.hid-reader-form {
+  overflow: hidden;
+}
+
+.form-title {
+  font-size: 14px;
+  font-weight: 700;
+  padding: 12px 16px;
+  border-bottom: 1px solid #ececec;
+}
+
+.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;
+  width: 100%;
+}
+
+.monitor-toggle :deep(.v-btn) {
+  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;
+  }
+}
+</style>