@7365admin1/layer-common 1.11.22 → 1.11.24

package/components/PassInformation.vue

@@ -1,171 +1,224 @@
 <template>
-    <v-row no-gutters class="w-100">
-        <v-card class="w-100">
-            <v-card-text>
-                <v-btn block color="primary-button" :height="40" text="Scan QR Code" class="text-capitalize" disabled
-                    prepend-icon="mdi-qrcode" />
-                <v-autocomplete v-model="selectedPass" v-model:search="passInput" :hide-no-data="false" class="mt-3"
-                    :items="passItems" :rules="props.passRules" item-title="prefixAndName" item-value="_id" label="Pass"
-                    variant="outlined" hide-details density="compact" persistent-hint small-chips>
-
-                    <template v-slot:chip="{ props, item }">
-                        <v-chip v-if="selectedPass" v-bind="props" prepend-icon="mdi-card-bulleted-outline"
-                            :text="item.raw?.prefixAndName"></v-chip>
-                    </template>
-                </v-autocomplete>
-
-
-                <template v-if="!props.hideKeys">
-                    <v-autocomplete v-model="selectedKeys" v-model:search="keyInput" :hide-no-data="false" class="mt-3"
-                        :items="keyItems" :rules="props.passRules" item-title="prefixAndName" item-value="_id"
-                        label="Keys" multiple variant="outlined" hide-details density="compact" persistent-hint
-                        small-chips>
-
-                        <template v-slot:chip="{ props, item }">
-                            <v-chip v-if="selectedKeys.length > 0" v-bind="props" prepend-icon="mdi-key"
-                                :text="item.raw?.prefixAndName"></v-chip>
-                        </template>
-                    </v-autocomplete>
-                </template>
-
-                <v-divider class="my-4 w-100" />
-
-
-                <template v-if="selectedType">
-                    <v-number-input v-model="count" variant="outlined" :min="1" :precision="0" density="compact"
-                        :rules="countRules" />
-                </template>
-            </v-card-text>
-        </v-card>
-    </v-row>
+  <v-row no-gutters class="w-100">
+    <v-card class="w-100">
+      <v-card-text>
+        <v-btn
+          block
+          color="primary-button"
+          :height="40"
+          text="Scan QR Code"
+          class="text-capitalize"
+          disabled
+          prepend-icon="mdi-qrcode"
+        />
+        <v-autocomplete
+          v-model="selectedPass"
+          v-model:search="passInput"
+          :hide-no-data="false"
+          class="mt-3"
+          :items="passItems"
+          :rules="props.passRules"
+          item-title="prefixAndName"
+          item-value="_id"
+          label="Pass"
+          variant="outlined"
+          hide-details
+          density="compact"
+          persistent-hint
+          small-chips
+          :clearable="props.clearable"
+        >
+          <template v-slot:chip="{ props, item }">
+            <v-chip
+              v-if="selectedPass"
+              v-bind="props"
+              prepend-icon="mdi-card-bulleted-outline"
+              :text="item.raw?.prefixAndName"
+            ></v-chip>
+          </template>
+        </v-autocomplete>
+
+        <template v-if="!props.hideKeys">
+          <v-autocomplete
+            v-model="selectedKeys"
+            v-model:search="keyInput"
+            :hide-no-data="false"
+            class="mt-3"
+            :items="keyItems"
+            :rules="props.passRules"
+            item-title="prefixAndName"
+            item-value="_id"
+            label="Keys"
+            multiple
+            variant="outlined"
+            hide-details
+            density="compact"
+            persistent-hint
+            small-chips
+            :clearable="props.clearable"
+          >
+            <template v-slot:chip="{ props, item }">
+              <v-chip
+                v-if="selectedKeys.length > 0"
+                v-bind="props"
+                prepend-icon="mdi-key"
+                :text="item.raw?.prefixAndName"
+              ></v-chip>
+            </template>
+          </v-autocomplete>
+        </template>
+
+        <v-divider class="my-4 w-100" />
+
+        <template v-if="selectedType">
+          <v-number-input
+            v-model="count"
+            variant="outlined"
+            :min="1"
+            :precision="0"
+            density="compact"
+            :rules="countRules"
+          />
+        </template>
+      </v-card-text>
+    </v-card>
+  </v-row>
 </template>
 
 <script setup lang="ts">
-import type { PropType } from 'vue'
-import type { ValidationRule } from 'vuetify/lib/types.mjs'
-import usePassKey from '../composables/usePassKey'
-import useKey from '../composables/useKey'
+import type { PropType } from "vue";
+import type { ValidationRule } from "vuetify/lib/types.mjs";
+import usePassKey from "../composables/usePassKey";
+import useKey from "../composables/useKey";
 
 const props = defineProps({
-    passRules: {
-        type: Array as PropType<ValidationRule[]>,
-        default: []
-    },
-    countRules: {
-        type: Array as PropType<ValidationRule[]>,
-        default: []
-    },
-    site: {
-        type: String,
-        required: true
-    },
-    type: {
-        type: String as PropType<TVisitorType>,
-        required: true
-    },
-    contractorType: {
-        type: String,
-        default: ""
-    },
-    hideKeys: {
-        type: Boolean,
-        default: false
-    }
-})
-
-const pass = defineModel<TPassKeyPayload[]>("pass", { default: [] })
-const keys = defineModel<TPassKeyPayload[]>("keys", { default: [] })
-const selectedPass = ref<string>('')
-const selectedKeys = ref<string[]>([])
-const passInput = ref('')
-const keyInput = ref('')
-const passItems = ref<TPassKey[]>([])
-const keyItems = ref<any[]>([])
-const selectedType = ref<'qr-pass' | 'nfc-card'>()
-const count = ref(1)
-
-const { getPassKeysByPageSearch } = usePassKey()
+  passRules: {
+    type: Array as PropType<ValidationRule[]>,
+    default: [],
+  },
+  countRules: {
+    type: Array as PropType<ValidationRule[]>,
+    default: [],
+  },
+  site: {
+    type: String,
+    required: true,
+  },
+  type: {
+    type: String as PropType<TVisitorType>,
+    required: true,
+  },
+  contractorType: {
+    type: String,
+    default: "",
+  },
+  hideKeys: {
+    type: Boolean,
+    default: false,
+  },
+  clearable: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const pass = defineModel<TPassKeyPayload[]>("pass", { default: [] });
+const keys = defineModel<TPassKeyPayload[]>("keys", { default: [] });
+const selectedPass = ref<string>("");
+const selectedKeys = ref<string[]>([]);
+const passInput = ref("");
+const keyInput = ref("");
+const passItems = ref<TPassKey[]>([]);
+const keyItems = ref<any[]>([]);
+const selectedType = ref<"qr-pass" | "nfc-card">();
+const count = ref(1);
+
+const { getPassKeysByPageSearch } = usePassKey();
 
 const typeItems = [
-    {
-        label: "QR Pass",
-        value: "qr-pass"
-    },
-    {
-        label: "NFC Card",
-        value: "nfc-card"
-    }
-]
+  {
+    label: "QR Pass",
+    value: "qr-pass",
+  },
+  {
+    label: "NFC Card",
+    value: "nfc-card",
+  },
+];
 
 const passTypesComputed = computed(() => {
-    if (props.type === 'contractor') {
-        if (props.contractorType === 'property-agent') {
-            return ["agent-pass"]
-        } else {
-            return ["contractor-pass"]
-        }
+  if (props.type === "contractor") {
+    if (props.contractorType === "property-agent") {
+      return ["agent-pass"];
     } else {
-        return ["visitor-pass"]
+      return ["contractor-pass"];
     }
-})
-
-const { data: passesData, refresh: refreshPassesData, pending: fetchPassesPending } = await useLazyAsyncData('get-pass-keys', () => {
-    return getPassKeysByPageSearch({
-        search: passInput.value,
-        page: 1,
-        limit: 500,
-        passTypes: passTypesComputed.value,
-        sites: [props.site],
-        statuses: ["Available"]
-    })
-})
+  } else {
+    return ["visitor-pass"];
+  }
+});
+
+const {
+  data: passesData,
+  refresh: refreshPassesData,
+  pending: fetchPassesPending,
+} = await useLazyAsyncData("get-pass-keys", () => {
+  return getPassKeysByPageSearch({
+    search: passInput.value,
+    page: 1,
+    limit: 500,
+    passTypes: passTypesComputed.value,
+    sites: [props.site],
+    statuses: ["Available"],
+  });
+});
 
 watch(passesData, (data: any) => {
-    passItems.value = data?.items || []
-})
-
-const { data: keysData, refresh: refreshKeysData, pending: fetchKeysPending } = await useLazyAsyncData('get-keys', () => {
-    return getPassKeysByPageSearch({
-        search: keyInput.value,
-        statuses: ["Available"],
-        passTypes: ['pass-key'],
-        page: 1,
-        limit: 500,
-        sites: [props.site],
-    })
-})
+  passItems.value = data?.items || [];
+});
+
+const {
+  data: keysData,
+  refresh: refreshKeysData,
+  pending: fetchKeysPending,
+} = await useLazyAsyncData("get-keys", () => {
+  return getPassKeysByPageSearch({
+    search: keyInput.value,
+    statuses: ["Available"],
+    passTypes: ["pass-key"],
+    page: 1,
+    limit: 500,
+    sites: [props.site],
+  });
+});
 
 watch(keysData, (data: any) => {
-    keyItems.value = data?.items || []
-})
+  keyItems.value = data?.items || [];
+});
 
 watch(selectedPass, (newVal) => {
-    pass.value = [{ keyId: newVal }]
-})
+  pass.value = [{ keyId: newVal }];
+});
 
 watch(selectedKeys, (newVal) => {
-    keys.value = newVal.map(key => ({ keyId: key }))
-})
-
-
-
+  keys.value = newVal.map((key) => ({ keyId: key }));
+});
 
 //prevent negative value;
 watch(count, (newCount) => {
-    if (newCount < 1) {
-        count.value = 1
-    }
-})
+  if (newCount < 1) {
+    count.value = 1;
+  }
+});
 
 onMounted(() => {
-    if (pass.value.length > 0) {
-        selectedPass.value = pass.value[0].keyId
-    }
-    if (keys.value.length > 0) {
-        selectedKeys.value = keys.value.map(k => k.keyId)
-    }
-})
-
+  if (pass.value.length > 0) {
+    selectedPass.value = pass.value[0].keyId;
+  }
+  if (keys.value.length > 0) {
+    selectedKeys.value = keys.value.map((k) => k.keyId);
+  }
+});
 </script>
 
-<style scoped></style>
+<style scoped></style>

package/components/ScanVisitorQRCode.vue

@@ -32,7 +32,7 @@
           <!-- This is where the QR code scanner will be displayed -->
         </div>
         <!-- Show Error Messages -->
-        <div v-if="showNotFoundMessage" class="text-error mt-8">
+        <div v-if="showNotFoundMessage" class="text-error mt-4 text-h5">
           <p>{{ errorMessage }}</p>
         </div>
         <!-- Switch camera button inside the reader box -->
@@ -52,9 +52,20 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  site: {
+    type: String,
+    default: null,
+  },
 });
 
-const emit = defineEmits(["closeDialog"]);
+const { standardFormatDate } = useUtils();
+
+const { validateVisitorQrCode } = useVisitor();
+
+const emits = defineEmits([
+  "closeDialog",
+  "openVisitorDataFromScannedQrCodeDialog",
+]);
 
 const message = ref("");
 const messageColor = ref("");
@@ -86,31 +97,62 @@ const handleScanVisitorQRCode = async () => {
         showNotFoundMessage.value = false;
         // Automatically navigate to the scanned URL if it's a valid link
         if (isValidUrl(qrCodeMessage)) {
-          console.log(`QR Code value: ${qrCodeMessage}`);
-          window.location.href = qrCodeMessage;
+          console.log("QR Code value", qrCodeMessage);
+          console.log("Last _id", qrCodeMessage.split("/").pop());
+          // get the last _id in the url
+          const id = qrCodeMessage.split("/").pop();
+          // check if it's a valid mongodb _id
+          if (/^[0-9a-fA-F]{24}$/.test(id as string)) {
+            // validate visitor's QR code
+            const response = await validateVisitorQrCode(
+              props.site as string,
+              id as string
+            );
+            console.log("validateVisitorQrCode", response);
+            if (response.errorMessage) {
+              showNotFoundMessage.value = true;
+              errorMessage.value =
+                response.errorMessage +
+                (response.scheduledDate
+                  ? standardFormatDate(response.scheduledDate)
+                  : "");
+              showMessage(errorMessage.value, "error");
+            } else {
+              closeDialog();
+              emits("openVisitorDataFromScannedQrCodeDialog", response);
+            }
+          } else {
+            showNotFoundMessage.value = true;
+            errorMessage.value = "Invalid mongodb _id.";
+            showMessage(errorMessage.value, "error");
+          }
+
+          // window.location.href = qrCodeMessage;
         } else {
           showNotFoundMessage.value = true;
-          errorMessage.value = "Invalid url";
-          showMessage("Invalid url", "error");
+          errorMessage.value = "Invalid url.";
+          showMessage(errorMessage.value, "error");
         }
       },
       (msg: string) => {
-        if (msg === "QR Code no longer in front") {
+        if (msg === "QR Code no longer in front.") {
           showNotFoundMessage.value = true;
           errorMessage.value = msg;
-          showMessage(msg, "error");
+          showMessage(errorMessage.value, "error");
         }
       }
     )
     .catch((err: any) => {
+      closeDialog();
       showMessage(`Unable to start scanning, error: ${err}`, "error");
     });
 };
 
-const isValidUrl = (string: string) => {
+const isValidUrl = (url: string) => {
   try {
-    new URL(string);
-    return true;
+    if (typeof url == "string") {
+      return true;
+    }
   } catch (_) {
     return false;
   }
@@ -130,7 +172,7 @@ const switchCamera = async () => {
 };
 
 const closeDialog = () => {
-  emit("closeDialog");
+  emits("closeDialog");
   stopScanner();
 };
 

package/components/ScheduleAreaMain.vue

@@ -163,7 +163,6 @@
 </template>
 
 <script setup lang="ts">
-import { useCleaningSchedulePermission } from "../composables/useCleaningSchedulePermission";
 import useCleaningSchedules from "../composables/useCleaningSchedules";
 import useUtils from "../composables/useUtils";
 
@@ -174,6 +173,9 @@ const props = defineProps({
   type: { type: String, required: true, default: "cleaner" },
   serviceType: { type: String, default: "" },
   scheduleRoute: { type: String, default: "cleaning-schedule" },
+  canGenerateChecklist: { type: Boolean, default: false },
+  canViewHistory: { type: Boolean, default: true },
+  canManageScheduleTasks: { type: Boolean, default: false },
 });
 
 const submitting = ref(false);
@@ -190,13 +192,13 @@ const headers = [
   { title: "Status", value: "status" },
   { title: "Type", value: "type" },
   { title: "No. of Visits", value: "set" },
-  { title: "Created By", value: "createdByName" },
 ];
 
 const { formatDate, back } = useUtils();
 
-const { canGenerateChecklist, canViewHistory, canManageScheduleTasks } =
-  useCleaningSchedulePermission();
+const canGenerateChecklist = computed(() => props.canGenerateChecklist);
+const canViewHistory = computed(() => props.canViewHistory);
+const canManageScheduleTasks = computed(() => props.canManageScheduleTasks);
 
 const selectedScheduleStatus = useState<string>(
   "selectedScheduleStatus",

package/components/ScheduleTaskMain.vue

@@ -257,24 +257,27 @@
 
 <script lang="ts" setup>
 import useScheduleTask from "../composables/useScheduleTask";
-import useScheduleTaskPermission from "../composables/useScheduleTaskPermission";
 
 const props = defineProps({
   orgId: { type: String, required: true },
   site: { type: String, required: true },
   type: { type: String, default: "toilet" },
   serviceType: { type: String, default: "" },
+  canViewScheduleTasks: { type: Boolean, default: true },
+  canCreateScheduleTask: { type: Boolean, default: false },
+  canUpdateScheduleTask: { type: Boolean, default: false },
+  canDeleteScheduleTask: { type: Boolean, default: false },
+  canViewScheduleTaskDetails: { type: Boolean, default: true },
 });
 
 const { formatDate, debounce } = useUtils();
 const { getScheduleTasks, getScheduleTaskById, deleteScheduleTask } = useScheduleTask();
-const {
-  canViewScheduleTasks,
-  canCreateScheduleTask,
-  canUpdateScheduleTask,
-  canDeleteScheduleTask,
-  canViewScheduleTaskDetails,
-} = useScheduleTaskPermission();
+
+const canViewScheduleTasks = computed(() => props.canViewScheduleTasks);
+const canCreateScheduleTask = computed(() => props.canCreateScheduleTask);
+const canUpdateScheduleTask = computed(() => props.canUpdateScheduleTask);
+const canDeleteScheduleTask = computed(() => props.canDeleteScheduleTask);
+const canViewScheduleTaskDetails = computed(() => props.canViewScheduleTaskDetails);
 
 const page = ref(1);
 const pages = ref(0);