@7365admin1/layer-common 1.10.3 → 1.10.5

package/components/AccessCardQrTagging.vue

@@ -0,0 +1,183 @@
+<template>
+  <v-row no-gutters>
+    <v-col cols="12" class="mb-2">
+      <v-row no-gutters align="center" justify="space-between">
+        <v-row no-gutters class="ga-2">
+          <v-btn
+            class="text-none"
+            rounded="pill"
+            variant="tonal"
+            size="large"
+            :disabled="!items.length"
+          >
+            Print All
+          </v-btn>
+          <v-btn
+            class="text-none"
+            rounded="pill"
+            variant="tonal"
+            size="large"
+            :disabled="!selected.length"
+          >
+            Generate QR Code
+          </v-btn>
+          <v-btn
+            class="text-none"
+            rounded="pill"
+            variant="tonal"
+            size="large"
+            :disabled="!selected.length"
+          >
+            Print QR Code
+          </v-btn>
+        </v-row>
+
+        <v-row no-gutters class="ga-2" justify="end" style="max-width: 420px">
+          <v-select
+            v-model="typeFilter"
+            :items="typeOptions"
+            placeholder="Type"
+            variant="outlined"
+            density="comfortable"
+            hide-details
+            clearable
+            style="max-width: 160px"
+          />
+          <v-text-field
+            v-model="searchText"
+            placeholder="Search Card..."
+            variant="outlined"
+            density="comfortable"
+            clearable
+            hide-details
+            style="max-width: 240px"
+          />
+        </v-row>
+      </v-row>
+    </v-col>
+
+    <v-col cols="12">
+      <v-card
+        width="100%"
+        variant="outlined"
+        border="thin"
+        rounded="lg"
+        :loading="loading"
+      >
+        <v-toolbar density="compact" color="grey-lighten-4">
+          <template #prepend>
+            <v-btn fab icon density="comfortable" @click="fetchItems">
+              <v-icon>mdi-refresh</v-icon>
+            </v-btn>
+          </template>
+
+          <template #append>
+            <v-row no-gutters justify="end" align="center">
+              <span class="mr-2 text-caption text-fontgray">
+                {{ pageRange }}
+              </span>
+              <local-pagination
+                v-model="page"
+                :length="pages"
+                @update:value="fetchItems"
+              />
+            </v-row>
+          </template>
+        </v-toolbar>
+
+        <v-data-table
+          v-model="selected"
+          :headers="tableHeaders"
+          :items="items"
+          item-value="_id"
+          items-per-page="10"
+          fixed-header
+          hide-default-footer
+          show-select
+          style="max-height: calc(100vh - 200px)"
+        >
+          <template #item.card="{ item }">
+            <v-row no-gutters align="center" class="ga-2">
+              <v-icon size="18" color="grey-darken-1">mdi-card-account-details</v-icon>
+              <span>{{ item.hid ?? "N/A" }}</span>
+            </v-row>
+          </template>
+
+          <template #item.qrCode="{ item }">
+            <v-icon
+              :color="item.qrCode ? 'success' : 'grey-lighten-1'"
+              size="22"
+            >
+              {{ item.qrCode ? "mdi-check-circle" : "mdi-circle-outline" }}
+            </v-icon>
+          </template>
+        </v-data-table>
+      </v-card>
+    </v-col>
+
+    <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
+  </v-row>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  middleware: ["01-auth", "02-org"],
+  memberOnly: true,
+});
+
+const tableHeaders = [
+  { title: "Card", key: "card", sortable: false },
+  { title: "Location", key: "location", sortable: false },
+  { title: "Card No.", key: "cardNo", sortable: false },
+  { title: "HID", key: "hid", sortable: false },
+  { title: "QR Code", key: "qrCode", sortable: false },
+];
+
+const typeOptions = ["Physical", "Non-Physical"];
+
+const route = useRoute();
+const siteId = computed(() => route.params.site as string);
+const orgId = computed(() => route.params.org as string);
+
+const page = ref(1);
+const pages = ref(0);
+const pageRange = ref("-- - -- of --");
+
+const message = ref("");
+const messageSnackbar = ref(false);
+const messageColor = ref("");
+
+const items = ref<Record<string, any>[]>([]);
+const selected = ref<string[]>([]);
+const searchText = ref("");
+const typeFilter = ref<string | null>(null);
+
+const {
+  data: qrTaggingReq,
+  refresh: fetchItems,
+  status: fetchStatus,
+} = useLazyAsyncData(
+  "get-qr-tagging",
+  () => {
+    // TODO: wire up QR tagging API
+    return Promise.resolve({ data: { items: [], pages: 0, pageRange: "0 - 0 of 0" } });
+  },
+  { watch: [page, searchText, typeFilter] }
+);
+
+const loading = computed(() => fetchStatus.value === "pending");
+
+watchEffect(() => {
+  if (qrTaggingReq.value?.data) {
+    items.value = qrTaggingReq.value.data.items;
+    pages.value = qrTaggingReq.value.data.pages;
+    pageRange.value = qrTaggingReq.value.data.pageRange;
+  }
+});
+
+function showMessage(msg: string, color: string) {
+  message.value = msg;
+  messageColor.value = color;
+  messageSnackbar.value = true;
+}
+</script>

package/components/AccessCardReplaceForm.vue

@@ -0,0 +1,179 @@
+<template>
+  <v-card width="100%">
+    <v-toolbar>
+      <v-row no-gutters class="fill-height px-6" align="center">
+        <span class="font-weight-bold text-h5">Replace Access Card</span>
+      </v-row>
+    </v-toolbar>
+    <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-0">
+      <v-form v-model="validForm" :disabled="loading">
+        <v-row no-gutters class="px-6 pt-4 pb-6">
+          <!-- Card being replaced -->
+          <v-col cols="12" class="px-1 mb-4">
+            <div class="text-caption text-grey mb-1 font-weight-bold">
+              Card being replaced
+            </div>
+            <v-chip size="small" variant="tonal" color="warning">
+              {{ card.cardNo }}
+            </v-chip>
+          </v-col>
+
+          <!-- Replacement card -->
+          <v-col cols="12" class="px-1">
+            <InputLabel
+              class="text-capitalize font-weight-bold"
+              title="Replacement Card"
+              required
+            />
+            <v-autocomplete
+              v-model="form.replacementCardId"
+              density="compact"
+              :items="replacementOptions"
+              hide-details="auto"
+              item-title="cardNo"
+              item-value="_id"
+              placeholder="Select replacement card..."
+              persistent-placeholder
+              :rules="[requiredRule]"
+              :no-data-text="noDataText"
+            />
+          </v-col>
+
+          <!-- Remarks -->
+          <v-col cols="12" class="px-1 mt-2">
+            <InputLabel
+              class="text-capitalize font-weight-bold"
+              title="Remarks"
+              required
+            />
+            <v-textarea
+              v-model="form.remarks"
+              density="compact"
+              hide-details="auto"
+              placeholder="Enter remarks..."
+              persistent-placeholder
+              rows="3"
+              auto-grow
+              :rules="[requiredRule]"
+            />
+          </v-col>
+        </v-row>
+      </v-form>
+    </v-card-text>
+
+    <v-toolbar density="compact">
+      <v-row no-gutters>
+        <v-col cols="6">
+          <v-btn
+            tile
+            block
+            variant="text"
+            class="text-none"
+            size="48"
+            @click="cancel"
+            :disabled="loading"
+          >
+            Cancel
+          </v-btn>
+        </v-col>
+        <v-col cols="6">
+          <v-btn
+            tile
+            block
+            variant="flat"
+            color="black"
+            class="text-none"
+            size="48"
+            :disabled="!validForm || loading"
+            :loading="loading"
+            @click="submit"
+          >
+            Replace
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-toolbar>
+  </v-card>
+</template>
+<script setup lang="ts">
+const props = defineProps({
+  card: {
+    type: Object as PropType<Record<string, any>>,
+    required: true,
+  },
+  unit: {
+    type: Object as PropType<Record<string, any>>,
+    required: true,
+  },
+  siteId: {
+    type: String,
+    default: "",
+  },
+});
+const emit = defineEmits(["cancel", "success", "error"]);
+
+const { requiredRule } = useUtils();
+
+const validForm = ref(false);
+const loading = ref(false);
+
+const form = ref({
+  replacementCardId: null as string | null,
+  remarks: "",
+});
+
+const cardType = computed(() => {
+  const id = props.card._id;
+  if (props.unit.available?.physical?.some((c: any) => c._id === id)) return "physical";
+  if (props.unit.assigned?.physical?.some((c: any) => c._id === id)) return "physical";
+  if (props.unit.available?.non_physical?.some((c: any) => c._id === id)) return "non_physical";
+  if (props.unit.assigned?.non_physical?.some((c: any) => c._id === id)) return "non_physical";
+  return null;
+});
+
+const replacementOptions = computed(() => {
+  const id = props.card._id;
+  if (cardType.value === "physical") {
+    return (props.unit.available?.physical ?? []).filter((c: any) => c._id !== id);
+  }
+  if (cardType.value === "non_physical") {
+    return (props.unit.available?.non_physical ?? []).filter((c: any) => c._id !== id);
+  }
+  return [];
+});
+
+const noDataText = computed(() => {
+  if (!cardType.value) return "Unable to determine card type";
+  const label = cardType.value === "physical" ? "physical" : "non-physical";
+  return `No available ${label} cards for replacement`;
+});
+
+function cancel() {
+  emit("cancel");
+}
+
+async function submit() {
+  loading.value = true;
+  try {
+    const { replaceCard } = useCard();
+    const { currentUser } = useLocalAuth();
+    // @TODO: userId should be the ID of the unit owner, not the current user
+    await replaceCard({
+      cardId: props.card._id,
+      issuedCardId: form.value.replacementCardId!,
+      unitId: props.unit._id,
+      remarks: form.value.remarks,
+      userId: currentUser.value?._id ?? "",
+    });
+    emit("success");
+  } catch (error: any) {
+    const msg =
+      error?.response?._data?.message ||
+      error?.data?.message ||
+      "Failed to replace access card.";
+    emit("error", msg);
+  } finally {
+    loading.value = false;
+  }
+}
+</script>