@7365admin1/layer-common 1.8.0

package/components/EntryPassMain.vue

@@ -0,0 +1,518 @@
+<template>
+  <v-skeleton-loader
+    type="card"
+    :width="'100%'"
+    :height="'200px'"
+    v-if="loading"
+  />
+  <v-row no-gutters class="" v-if="!loading">
+    <v-col cols="12" elevation="3" class="border">
+      <v-row no-gutters class="px-6 pt-4">
+        <div class="d-flex mt-7 pb-5">
+          <p class="mr-6 font-weight-medium flex-grow-1">
+            Physical / Key Pass
+            <span class="d-block text-caption text-grey-darken-1 mt-1">
+              A Physical Pass Card is a tangible identification or access card
+              used for entry and verification purposes at a specific site or
+              property. Its primary functions include granting authorized
+              access, enhancing security, and tracking attendance or movement.
+            </span>
+          </p>
+          <v-switch
+            color="success"
+            hide-details
+            v-model="currentEntryPassSettings.physicalPass"
+            @update:modelValue="updateEntryPassSettingsPhysicalPass()"
+          ></v-switch>
+        </div>
+        <v-divider thickness="1"></v-divider>
+        <div class="d-flex mt-7 pb-5">
+          <p class="mr-6 font-weight-medium flex-grow-1">
+            NFC / QR Code Pass
+            <span class="d-block text-caption text-grey-darken-1 mt-1">
+              NFC Card Pass is a type of access card that uses Near Field
+              Communication (NFC) technology to enable secure and convenient
+              entry to a site or property. This technology facilitates wireless
+              communication between the card and an NFC reader when they are
+              placed in close proximity (typically within 4 cm).
+            </span>
+          </p>
+          <v-switch
+            color="success"
+            hide-details
+            v-model="currentEntryPassSettings.nfcPass"
+            @update:modelValue="updateEntryPassSettingsNfcPass()"
+          ></v-switch>
+        </div>
+        <v-divider thickness="1"></v-divider>
+        <div class="d-flex w-100 mt-7 pb-10">
+          <p class="mr-6 font-weight-medium flex-grow-1">
+            Upload Access Cards Template
+            <span class="d-block text-caption text-grey-darken-1 mt-1">
+              <a
+                target="_blank"
+                class="text-truncate d-flex items-center text-decoration-none"
+                href=""
+              >
+                <v-icon class="mr-2" size="24px"> mdi-paperclip </v-icon>
+                template
+              </a>
+            </span>
+          </p>
+          <v-btn
+            variant="flat"
+            color="error"
+            size="small"
+            style="height: 40px; margin-left: auto"
+            prepend-icon="mdi-file-document-remove-outline"
+          >
+            Remove
+          </v-btn>
+        </div>
+        <v-divider thickness="1"></v-divider>
+        <div class="d-flex w-100 mt-7 pb-10">
+          <p class="mr-6 font-weight-medium flex-grow-1">
+            Printer Setup
+            <v-col cols="12">
+              <v-row>
+                <v-col cols="3">
+                  <v-text-field
+                    label="Vendor ID"
+                    hide-details
+                    clearable
+                    v-model="currentEntryPassSettings.printerVendorId"
+                  ></v-text-field>
+                </v-col>
+                <v-col cols="3">
+                  <v-text-field
+                    label="Product ID"
+                    hide-details
+                    clearable
+                    v-model="currentEntryPassSettings.printerProductId"
+                  ></v-text-field>
+                </v-col>
+                <v-col cols="3">
+                  <v-btn
+                    color="primary"
+                    variant="outlined"
+                    prepend-icon="mdi-magnify"
+                    block
+                  >
+                    Scan Printer
+                  </v-btn>
+                </v-col>
+                <v-col cols="3">
+                  <v-btn
+                    color="success"
+                    variant="outlined"
+                    prepend-icon="mdi-printer-check"
+                    block
+                  >
+                    Test & Print
+                  </v-btn>
+                </v-col>
+              </v-row>
+              <v-row class="mt-4">
+                <v-col cols="12" sm="6" md="4">
+                  <v-btn
+                    color="primary"
+                    variant="flat"
+                    prepend-icon="mdi-content-save"
+                    block
+                    @click="savePrinterSettings()"
+                  >
+                    Save Settings
+                  </v-btn>
+                </v-col>
+              </v-row>
+            </v-col>
+          </p>
+        </div>
+
+        <v-divider thickness="1"></v-divider>
+
+        <div class="d-flex w-100 mt-7 pb-10">
+          <p class="mr-6 font-weight-medium flex-grow-1">
+            QR Code Template
+            <span class="d-block text-caption text-grey-darken-1 mt-1">
+              <v-col cols="12">
+                <v-row>
+                  <v-col cols="12">
+                    <v-text-field
+                      label="Header"
+                      placeholder="Enter qr code header eg. Welcome to Company Name"
+                      hide-details
+                      density="comfortable"
+                      clearable
+                      v-model="currentEntryPassSettings.qrCodeTemplateHeader"
+                    ></v-text-field>
+                  </v-col>
+                  <v-col cols="12">
+                    <v-text-field
+                      label="Subtext"
+                      placeholder="Enter qr code sub header"
+                      hide-details
+                      density="comfortable"
+                      clearable
+                      class="mb-2"
+                      v-model="
+                        currentEntryPassSettings.qrCodeTemplateHeaderSubText
+                      "
+                    ></v-text-field>
+                  </v-col>
+                  <v-row class="mt-3">
+                    <v-col cols="12" md="2">
+                      <v-btn color="primary" variant="flat" block>
+                        Preview
+                      </v-btn>
+                    </v-col>
+                    <v-col cols="12" md="2">
+                      <v-btn
+                        color="primary"
+                        variant="flat"
+                        block
+                        @click="saveQrCodeTemplate()"
+                      >
+                        Save
+                      </v-btn>
+                    </v-col>
+                  </v-row>
+                </v-row>
+              </v-col>
+            </span>
+          </p>
+        </div>
+
+        <v-divider thickness="1"></v-divider>
+
+        <div class="d-flex w-100 mt-7 pb-10">
+          <p class="mr-6 font-weight-medium flex-grow-1">
+            Resident-app Disclaimer Message
+            <span class="d-block text-caption text-grey-darken-1 mt-1">
+              <v-col cols="12">
+                <v-row no-gutters>
+                  <v-col cols="12" class="mb-5">
+                    <v-textarea
+                      label="Disclaimer Message"
+                      placeholder="Enter disclaimer message for resident app"
+                      hide-details
+                      density="comfortable"
+                      clearable
+                      rows="5"
+                      auto-grow
+                      v-model="currentEntryPassSettings.disclaimerMessage"
+                    ></v-textarea>
+                  </v-col>
+                  <v-row class="mt-3">
+                    <v-col cols="12" md="2">
+                      <v-btn
+                        color="primary"
+                        variant="flat"
+                        block
+                        @click="saveResidentAppDisclaimerMsg()"
+                      >
+                        Save
+                      </v-btn>
+                    </v-col>
+                  </v-row>
+                </v-row>
+              </v-col>
+            </span>
+          </p>
+        </div>
+
+        <v-divider thickness="1"></v-divider>
+
+        <div class="d-flex w-100 mt-7 pb-10">
+          <p class="mr-6 font-weight-medium flex-grow-1">
+            Entrypass URL
+            <span class="d-block text-caption text-grey-darken-1 mt-1">
+              <v-col>
+                <v-text-field
+                  label="Enter entrypass URL"
+                  placeholder="https://example.com"
+                  outlined
+                  clearable
+                  hide-details
+                  v-model="currentEntryPassSettings.url"
+                />
+              </v-col>
+              <v-col>
+                <v-btn color="primary" @click="saveEntryPassUrl()">Save</v-btn>
+              </v-col>
+            </span>
+          </p>
+        </div>
+      </v-row>
+    </v-col>
+
+    <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
+  </v-row>
+</template>
+<script lang="ts" setup>
+definePageMeta({
+  middleware: ["01-auth", "02-org"],
+  memberOnly: true,
+});
+const prop = defineProps({
+  site: {
+    type: String,
+    required: true,
+  },
+  siteName: {
+    type: String,
+    required: true,
+  },
+
+  orgId: {
+    type: String,
+    required: true,
+  },
+});
+
+const currentEntryPassSettings = ref<Record<string, any>>({
+  _id: "",
+  site: "",
+  org: "",
+  isEnabled: true,
+  physicalPass: false,
+  nfcPass: false,
+  printerVendorId: "",
+  printerProductId: "",
+  qrCodeTemplateHeader: "",
+  qrCodeTemplateHeaderSubText: "",
+  qrCodeTemplateDate: "",
+  disclaimerMessage: "",
+  url: "",
+  status: "",
+  createdBy: "",
+  updatedBy: "",
+  createdAt: "",
+  updatedAt: "",
+  deletedAt: "",
+});
+
+const entryPassSettingsPayload = ref<Record<string, any>>({
+  site: "",
+  org: "",
+  isEnabled: true,
+  physicalPass: false,
+  nfcPass: false,
+  printerVendorId: "",
+  printerProductId: "",
+  qrCodeTemplateHeader: "",
+  qrCodeTemplateHeaderSubText: "",
+  qrCodeTemplateDate: "",
+  disclaimerMessage: "",
+  url: "",
+  status: "",
+});
+
+const {
+  getBySiteId: _getSiteEntryPassSettings,
+  add: _add,
+  updateBySiteId: _updateBySiteId,
+} = useSiteEntryPassSettings();
+
+const route = useRoute();
+const siteId = route.params.site as string;
+const orgId = route.params.org as string;
+
+const message = ref("");
+const messageSnackbar = ref(false);
+const messageColor = ref("");
+
+const {
+  data: getSiteEntryPassSettingsReq,
+  refresh: getSiteEntryPassSettings,
+  status: getSiteEntryPassSettingsReqStatus,
+} = useLazyAsyncData("get-site-entry-pass-settings", () =>
+  _getSiteEntryPassSettings(prop.site as string)
+);
+
+const loading = computed(
+  () => getSiteEntryPassSettingsReqStatus.value === "pending"
+);
+
+watchEffect(() => {
+  if (getSiteEntryPassSettingsReq.value) {
+    currentEntryPassSettings.value = getSiteEntryPassSettingsReq.value;
+    // console.log("currentEntryPassSettings", currentEntryPassSettings.value);
+    // console.log(currentEntryPassSettings.value._id);
+  }
+});
+
+async function addPayload() {
+  const payload = {
+    site: siteId,
+    org: orgId,
+    isEnabled: true,
+    physicalPass: currentEntryPassSettings.value.physicalPass,
+    nfcPass: currentEntryPassSettings.value.nfcPass,
+    printerVendorId: currentEntryPassSettings.value.printerVendorId,
+    printerProductId: currentEntryPassSettings.value.printerProductId,
+    qrCodeTemplateHeader: currentEntryPassSettings.value.qrCodeTemplateHeader,
+    qrCodeTemplateHeaderSubText:
+      currentEntryPassSettings.value.qrCodeTemplateHeaderSubText,
+    qrCodeTemplateDate: currentEntryPassSettings.value.qrCodeTemplateDate,
+    disclaimerMessage: currentEntryPassSettings.value.disclaimerMessage,
+    url: currentEntryPassSettings.value.url,
+    status: "Active",
+  };
+  entryPassSettingsPayload.value = payload;
+}
+
+async function updatePayload() {
+  const payload = {
+    isEnabled: true,
+    physicalPass: currentEntryPassSettings.value.physicalPass,
+    nfcPass: currentEntryPassSettings.value.nfcPass,
+    printerVendorId: currentEntryPassSettings.value.printerVendorId,
+    printerProductId: currentEntryPassSettings.value.printerProductId,
+    qrCodeTemplateHeader: currentEntryPassSettings.value.qrCodeTemplateHeader,
+    qrCodeTemplateHeaderSubText:
+      currentEntryPassSettings.value.qrCodeTemplateHeaderSubText,
+    qrCodeTemplateDate: currentEntryPassSettings.value.qrCodeTemplateDate,
+    disclaimerMessage: currentEntryPassSettings.value.disclaimerMessage,
+    url: currentEntryPassSettings.value.url,
+    status: "Active",
+  };
+  entryPassSettingsPayload.value = payload;
+}
+
+async function updateEntryPassSettingsPhysicalPass() {
+  if (!currentEntryPassSettings.value._id) {
+    addPayload();
+    entryPassSettingsPayload.value.physicalPass =
+      currentEntryPassSettings.value.physicalPass;
+    await _add(entryPassSettingsPayload.value);
+    showMessage("Entry Pass Settings added successfully!", "success");
+  } else {
+    updatePayload();
+    entryPassSettingsPayload.value.physicalPass =
+      currentEntryPassSettings.value.physicalPass;
+    await _updateBySiteId(
+      entryPassSettingsPayload.value,
+      currentEntryPassSettings.value.site
+    );
+    showMessage("Entry Pass Settings updated successfully!", "success");
+  }
+  getSiteEntryPassSettings();
+}
+
+async function updateEntryPassSettingsNfcPass() {
+  if (!currentEntryPassSettings.value._id) {
+    addPayload();
+    entryPassSettingsPayload.value.nfcPass =
+      currentEntryPassSettings.value.nfcPass;
+    await _add(entryPassSettingsPayload.value);
+    showMessage("Entry Pass Settings added successfully!", "success");
+  } else {
+    updatePayload();
+    entryPassSettingsPayload.value.nfcPass =
+      currentEntryPassSettings.value.nfcPass;
+    await _updateBySiteId(
+      entryPassSettingsPayload.value,
+      currentEntryPassSettings.value.site
+    );
+    showMessage("Entry Pass Settings updated successfully!", "success");
+  }
+  getSiteEntryPassSettings();
+}
+
+async function savePrinterSettings() {
+  if (!currentEntryPassSettings.value._id) {
+    addPayload();
+    entryPassSettingsPayload.value.printerVendorId =
+      currentEntryPassSettings.value.printerVendorId;
+    entryPassSettingsPayload.value.printerProductId =
+      currentEntryPassSettings.value.printerProductId;
+    await _add(entryPassSettingsPayload.value);
+    showMessage("Entry Pass Settings added successfully!", "success");
+  } else {
+    updatePayload();
+    entryPassSettingsPayload.value.printerVendorId =
+      currentEntryPassSettings.value.printerVendorId;
+    entryPassSettingsPayload.value.printerProductId =
+      currentEntryPassSettings.value.printerProductId;
+    console.log(
+      "entryPassSettingsPayload.value",
+      entryPassSettingsPayload.value
+    );
+    await _updateBySiteId(
+      entryPassSettingsPayload.value,
+      currentEntryPassSettings.value.site
+    );
+    showMessage("Entry Pass Settings updated successfully!", "success");
+  }
+  getSiteEntryPassSettings();
+}
+
+async function saveQrCodeTemplate() {
+  if (!currentEntryPassSettings.value._id) {
+    addPayload();
+    entryPassSettingsPayload.value.qrCodeTemplateHeader =
+      currentEntryPassSettings.value.qrCodeTemplateHeader;
+    entryPassSettingsPayload.value.qrCodeTemplateHeaderSubText =
+      currentEntryPassSettings.value.qrCodeTemplateHeaderSubText;
+    await _add(entryPassSettingsPayload.value);
+    showMessage("Entry Pass Settings added successfully!", "success");
+  } else {
+    updatePayload();
+    entryPassSettingsPayload.value.qrCodeTemplateHeader =
+      currentEntryPassSettings.value.qrCodeTemplateHeader;
+    entryPassSettingsPayload.value.qrCodeTemplateHeaderSubText =
+      currentEntryPassSettings.value.qrCodeTemplateHeaderSubText;
+    await _updateBySiteId(
+      entryPassSettingsPayload.value,
+      currentEntryPassSettings.value.site
+    );
+    showMessage("Entry Pass Settings updated successfully!", "success");
+  }
+  getSiteEntryPassSettings();
+}
+
+async function saveResidentAppDisclaimerMsg() {
+  if (!currentEntryPassSettings.value._id) {
+    addPayload();
+    entryPassSettingsPayload.value.disclaimerMessage =
+      currentEntryPassSettings.value.disclaimerMessage;
+    await _add(entryPassSettingsPayload.value);
+    showMessage("Entry Pass Settings added successfully!", "success");
+  } else {
+    updatePayload();
+    entryPassSettingsPayload.value.disclaimerMessage =
+      currentEntryPassSettings.value.disclaimerMessage;
+    await _updateBySiteId(
+      entryPassSettingsPayload.value,
+      currentEntryPassSettings.value.site
+    );
+    showMessage("Entry Pass Settings updated successfully!", "success");
+  }
+  getSiteEntryPassSettings();
+}
+
+async function saveEntryPassUrl() {
+  if (!currentEntryPassSettings.value._id) {
+    addPayload();
+    entryPassSettingsPayload.value.url = currentEntryPassSettings.value.url;
+    await _add(entryPassSettingsPayload.value);
+    showMessage("Entry Pass Settings added successfully!", "success");
+  } else {
+    updatePayload();
+    entryPassSettingsPayload.value.url = currentEntryPassSettings.value.url;
+    await _updateBySiteId(
+      entryPassSettingsPayload.value,
+      currentEntryPassSettings.value.site
+    );
+    showMessage("Entry Pass Settings updated successfully!", "success");
+  }
+  getSiteEntryPassSettings();
+}
+
+function showMessage(msg: string, color: string) {
+  message.value = msg;
+  messageColor.value = color;
+  messageSnackbar.value = true;
+}
+</script>

package/components/Feedback/Form.vue

@@ -0,0 +1,173 @@
+<template>
+  <FormDialog v-model="dialog" @close="closeDialog">
+    <template #title>
+      <span class="text-h6 font-weight-medium pt-1 text-capitalize">
+        {{ isEditMode ? "Edit Feedback" : "Create Feedback" }}
+      </span>
+    </template>
+
+    <InputFile
+      :attachments="displayedAttachments"
+      :errored-images="localErroredImages"
+      :max-files="maxFiles"
+      @add="handleFileAdded"
+      @delete="deleteFile"
+      @errored="onImageError"
+    />
+
+    <v-autocomplete
+      v-model="localFeedback.subject"
+      :items="subjects"
+      item-title="title"
+      item-value="value"
+      item-props
+      variant="outlined"
+      density="compact"
+      class="mb-2"
+      clearable
+      :custom-filter="customFilter"
+      :rules="[requiredRule]"
+    >
+      <template #label> Subject <span class="text-red">*</span> </template>
+    </v-autocomplete>
+
+    <v-autocomplete
+      v-model="localFeedback.category"
+      :items="categories"
+      item-title="title"
+      item-value="value"
+      item-props
+      label="Category"
+      variant="outlined"
+      density="compact"
+      class="mb-2"
+      clearable
+      :rules="[requiredRule]"
+    >
+      <template #label> Category <span class="text-red">*</span> </template>
+    </v-autocomplete>
+
+    <v-text-field
+      label="Location"
+      variant="outlined"
+      density="compact"
+      v-model="localFeedback.location"
+      :rules="[requiredRule]"
+    >
+      <template #label> Location <span class="text-red">*</span> </template>
+    </v-text-field>
+
+    <v-textarea
+      label="Description"
+      variant="outlined"
+      density="compact"
+      auto-grow
+      rows="4"
+      v-model="localFeedback.description"
+      :rules="[requiredRule]"
+    >
+      <template #label> Description <span class="text-red">*</span> </template>
+    </v-textarea>
+
+    <template #footer>
+      <v-btn
+        color="primary-button"
+        class="text-capitalize mb-4"
+        block
+        height="40"
+        :loading="loading"
+        :disabled="loading || !isFormValid"
+        @click="submitFeedback"
+      >
+        Submit
+      </v-btn>
+    </template>
+  </FormDialog>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  modelValue: boolean;
+  feedback: TFeedbackCreate;
+  isEditMode: boolean;
+  loading: boolean;
+  categories: { title: string; value: string }[];
+  erroredImages?: string[];
+  maxFiles?: number;
+}>();
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: boolean): void;
+  (e: "update:feedback", value: TFeedbackCreate): void;
+  (e: "close"): void;
+  (e: "submit", payload: TFeedbackCreate): void;
+  (e: "fileAdded", file: File): void;
+  (e: "fileDeleted", url: string): void;
+}>();
+
+const dialog = computed({
+  get: () => props.modelValue,
+  set: (val) => emit("update:modelValue", val),
+});
+
+const localFeedback = computed({
+  get: () => props.feedback,
+  set: (val) => emit("update:feedback", val),
+});
+
+const localErroredImages = ref<string[]>(props.erroredImages || []);
+
+watch(
+  () => props.erroredImages,
+  (val) => {
+    if (val) localErroredImages.value = val;
+  }
+);
+
+const displayedAttachments = computed(() => {
+  return localFeedback.value.attachments || [];
+});
+
+const { requiredRule } = useUtils();
+
+const isFormValid = computed(() => {
+  return (
+    localFeedback.value.subject &&
+    localFeedback.value.category &&
+    localFeedback.value.location &&
+    localFeedback.value.description
+  );
+});
+
+function handleFileAdded(file: File) {
+  emit("fileAdded", file);
+}
+
+function deleteFile(url: string) {
+  emit("fileDeleted", url);
+}
+
+function onImageError(file: string) {
+  if (!localErroredImages.value.includes(file)) {
+    localErroredImages.value.push(file);
+  }
+}
+
+function closeDialog() {
+  dialog.value = false;
+  emit("close");
+}
+
+function submitFeedback() {
+  emit("submit", { ...localFeedback.value });
+}
+
+const { subjects } = useLocal();
+
+const customFilter = (value: string, query: string, item: any) => {
+  const title = item?.raw?.title?.toLowerCase() || "";
+  const subtitle = item?.raw?.subtitle?.toLowerCase() || "";
+  const search = query.toLowerCase();
+  return title.includes(search) || subtitle.includes(search);
+};
+</script>