@7365admin1/layer-common 1.8.0

package/components/AccessCardAddForm.vue

@@ -0,0 +1,363 @@
+<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 text-capitalize">
+          {{ prop.mode }} 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="disable">
+        <v-row no-gutters class="px-6 pt-4">
+          <v-col cols="12" class="px-1">
+            <InputLabel
+              class="text-capitalize font-weight-bold"
+              title="Types of Access Card"
+              required
+            />
+            <v-select
+              v-model.number="card.accessCardType"
+              :items="accessCardTypes"
+              density="comfortable"
+              :rules="[requiredRule]"
+              type="text"
+            ></v-select>
+          </v-col>
+          <v-col cols="12" class="px-1 pb-5">
+            <InputLabel
+              class="text-capitalize font-weight-bold"
+              :title="`Card No (${cardNoMaxLength} digits)`"
+              required
+            />
+            <v-text-field
+              v-model="card.cardNumber"
+              density="compact"
+              hide-details
+              :rules="[requiredRule]"
+              maxlength="10"
+              type="number"
+              hide-spin-buttons
+            >
+            </v-text-field>
+          </v-col>
+          <v-col cols="12" class="px-1">
+            <InputLabel
+              class="text-capitalize font-weight-bold"
+              title="Start Date"
+              required
+            />
+            <InputDateTimePicker
+              ref="startDateRef"
+              v-model="card.startDate"
+              placeholder="Start Date"
+              :rules="[requiredRule]"
+            />
+          </v-col>
+          <v-col cols="12" class="px-1 pb-4">
+            <InputLabel
+              class="text-capitalize font-weight-bold"
+              title="End Date"
+              required
+            />
+            <InputDateTimePicker
+              ref="endDateRef"
+              v-model="card.endDate"
+              placeholder="End Date"
+              :rules="[requiredRule]"
+            />
+          </v-col>
+          <v-divider />
+          <v-row class="py-8 px-0">
+            <v-col cols="12">
+              <InputLabel
+                class="text-capitalize font-weight-bold"
+                title="Doors Location"
+                required
+              />
+              <v-select
+                v-model="card.door"
+                density="compact"
+                :items="accessLevelItems"
+                item-title="name"
+                item-value="no"
+                hide-details
+                :rules="[requiredRule]"
+              >
+              </v-select>
+            </v-col>
+            <v-col cols="12">
+              <InputLabel
+                class="text-capitalize font-weight-bold"
+                title="Access Group"
+                required
+              />
+              <v-select
+                v-model="card.accessGroup"
+                density="compact"
+                :items="accessGroupItems"
+                hide-details
+                :rules="[requiredRule]"
+                multiple
+              >
+              </v-select>
+            </v-col>
+            <v-col cols="12">
+              <InputLabel
+                class="text-capitalize font-weight-bold"
+                title="Card Type"
+                required
+              />
+              <v-select
+                v-model="card.cardType"
+                density="compact"
+                :items="cardTypeItems"
+                hide-details
+                :rules="[requiredRule]"
+                item-title="name"
+                item-value="value"
+              >
+              </v-select>
+            </v-col>
+            <v-col cols="12">
+              <InputLabel
+                class="text-capitalize font-weight-bold"
+                :title="`Pin No (${cardPinMaxLength} digits)`"
+                required
+              />
+              <v-text-field
+                v-model="card.pinNo"
+                density="compact"
+                hide-details
+                :rules="[requiredRule]"
+                maxlength="10"
+                type="number"
+                hide-spin-buttons
+              >
+              </v-text-field>
+            </v-col>
+            <v-col cols="12" class="pt-5">
+              <v-btn
+                block
+                color="primary"
+                variant="text"
+                class="text-none font-weight-bold"
+                text="Use as lift Card"
+                @click="card.useAsLiftCard = !card.useAsLiftCard"
+              ></v-btn>
+            </v-col>
+            <v-col cols="12" v-if="card.useAsLiftCard">
+              <InputLabel
+                class="text-capitalize font-weight-bold"
+                title="Lift Access Label"
+                :required="card.useAsLiftCard"
+              />
+              <v-select
+                v-model="card.liftAccessLevel"
+                density="compact"
+                :items="liftAccessLevelItems"
+                hide-details
+                :rules="card.useAsLiftCard ? [requiredRule] : []"
+                item-title="name"
+                item-value="value"
+              />
+            </v-col>
+            <v-col cols="12">
+              <div
+                class="d-flex justify-space-between align-center rounded px-0"
+              >
+                <span class="d-flex align-center"
+                  >Activate
+                  <v-checkbox
+                    v-model="card.isActivate"
+                    label="Yes"
+                    class="d-flex align-center"
+                  ></v-checkbox
+                ></span>
+                <span class="d-flex align-center">
+                  Anti Pass Back
+                  <v-icon class="ml-1" color="grey" size="small"
+                    >mdi-help-circle</v-icon
+                  >
+                  <v-checkbox
+                    v-model="card.isAntiPassBack"
+                    label="Yes"
+                    class="d-flex align-center"
+                  ></v-checkbox>
+                </span>
+              </div>
+            </v-col>
+          </v-row>
+        </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="disable"
+          >
+            Cancel
+          </v-btn>
+        </v-col>
+
+        <v-col cols="6">
+          <v-btn
+            tile
+            block
+            variant="flat"
+            color="black"
+            class="text-none"
+            size="48"
+            :disabled="!validForm || disable"
+            @click="submit"
+            :loading="disable"
+          >
+            Submit
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-toolbar>
+  </v-card>
+</template>
+<script setup lang="ts">
+const prop = defineProps({
+  mode: {
+    type: String,
+    default: "add",
+  },
+  card: {
+    type: Object as PropType<TCard>,
+    default: () => ({
+      name: "",
+      accessCardType: "",
+      // visitorType: "",
+      status: "active",
+    }),
+  },
+});
+
+const { add: _addCard, updateById: _updateCardById } = useCard();
+const emit = defineEmits(["cancel", "success"]);
+
+const validForm = ref(false);
+const disable = ref(false);
+const message = ref("");
+
+const { requiredRule } = useUtils();
+
+const card = ref<Record<string, any>>({
+  accessCardType: "",
+  type: "door-setup",
+  cardNumber: "",
+  startDate: "",
+  endDate: "",
+  door: "",
+  accessGroup: [],
+  cardType: "",
+  pinNo: "",
+  isActivate: true,
+  isAntiPassBack: false,
+  useAsLiftCard: false,
+  status: "active",
+  liftAccessLevel: "",
+  org: "",
+  site: "",
+  unit: "",
+  assign: "",
+});
+
+if (prop.mode === "edit") {
+  card.value.accessCardType = prop.card.accessCardType;
+  card.value.type = prop.card.type;
+  card.value.cardNumber = prop.card.cardNumber;
+  card.value.startDate = prop.card.startDate;
+  card.value.endDate = prop.card.endDate;
+  card.value.door = prop.card.door;
+  card.value.accessGroup = prop.card.accessGroup;
+  card.value.cardType = prop.card.cardType;
+  card.value.pinNo = prop.card.pinNo;
+  card.value.isActivate = prop.card.isActivate;
+  card.value.isAntiPassBack = prop.card.isAntiPassBack;
+  card.value.useAsLiftCard = prop.card.useAsLiftCard;
+  card.value.status = prop.card.status;
+  card.value.liftAccessLevel = prop.card.liftAccessLevel;
+  card.value.org = prop.card.org;
+  card.value.site = prop.card.site;
+  card.value.unit = prop.card.unit;
+  card.value.assign = prop.card.assign;
+}
+
+const accessCardTypes = ["Physical Access Card", "Non Physical Access Card"];
+const typeOfVisitors = ["Contractor", "Visitor"];
+
+const accessLevelItems = ref<{ name: string; no: string }[]>([
+  { name: "All access", no: "1" },
+]);
+const accessGroupItems = ref(["All Access", "Glass Door 1"]);
+const cardTypeItems = ref([
+  {
+    name: "Normal - Access Card",
+    value: "Normal",
+  },
+  {
+    name: "Special - Arm/Disarm Card",
+    value: "Special",
+  },
+  {
+    name: "Master - Master Card",
+    value: "Master",
+  },
+  {
+    name: "Maintenance - Maintenance Card",
+    value: "Maintenance",
+  },
+]);
+const cardNoMaxLength = ref(10);
+const cardPinMaxLength = ref(6);
+const startDateRef = ref<HTMLInputElement | null>(null);
+const endDateRef = ref<HTMLInputElement | null>(null);
+const liftAccessLevelItems = ref<{ name: string; no: string }[]>([]);
+
+const route = useRoute();
+const siteId = route.params.site as string;
+const orgId = route.params.org as string;
+
+function cancel() {
+  //   createMore.value = false;
+  message.value = "";
+  emit("cancel");
+}
+
+async function submit() {
+  disable.value = true;
+  try {
+    if (prop.mode === "add") {
+      const payload = {
+        ...card.value,
+        site: siteId,
+        org: orgId,
+      };
+      await _addCard(payload);
+    }
+
+    if (prop.mode === "edit") {
+      const payload = {
+        ...card.value,
+      };
+      await _updateCardById(prop.card._id ?? "", payload);
+    }
+    emit("success");
+  } catch (error: any) {
+    message.value = error.response?._data?.message || "Failed to create card";
+  } finally {
+    disable.value = false;
+  }
+}
+</script>