@7365admin1/layer-common 1.11.22 → 1.11.23

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @iservice365/layer-common
 
+## 1.11.23
+
+### Patch Changes
+
+- 6d68511: Update layer-comon qr code package
+
 ## 1.11.22
 
 ### Patch Changes

package/components/AttendanceMain.vue

@@ -61,20 +61,20 @@
 
 <script setup lang="ts">
 import useAttendance from "../composables/useAttendance";
-import { useAttendancePermission } from "../composables/useAttendancePermission";
 import useUtils from "../composables/useUtils";
 
 const props = defineProps({
   orgId: { type: String, default: "" },
   site: { type: String, default: "" },
   serviceType: { type: String, default: "" },
+  canViewAllAttendance: { type: Boolean, default: true },
+  canViewAttendanceDetails: { type: Boolean, default: true },
+  canManageAttendanceSettings: { type: Boolean, default: false },
 });
 
-const {
-  canViewAllAttendance,
-  canViewAttendanceDetails,
-  canManageAttendanceSettings,
-} = useAttendancePermission();
+const canViewAllAttendance = computed(() => props.canViewAllAttendance);
+const canViewAttendanceDetails = computed(() => props.canViewAttendanceDetails);
+const canManageAttendanceSettings = computed(() => props.canManageAttendanceSettings);
 
 const submitting = ref(false);
 const page = ref(1);

package/components/CleaningScheduleMain.vue

@@ -102,7 +102,6 @@
 </template>
 
 <script lang="ts" setup>
-import { useCleaningSchedulePermission } from "../composables/useCleaningSchedulePermission";
 import useCleaningSchedules from "../composables/useCleaningSchedules";
 import useUtils from "../composables/useUtils";
 
@@ -112,6 +111,10 @@ const props = defineProps({
   type: { type: String, required: true },
   serviceType: { type: String, default: "" },
   scheduleRoute: { type: String, default: "cleaning-schedule" },
+  canViewSchedules: { type: Boolean, default: true },
+  canViewScheduleDetails: { type: Boolean, default: true },
+  canDownloadSchedule: { type: Boolean, default: false },
+  canManageScheduleTasks: { type: Boolean, default: false },
 });
 
 const startDate = ref("");
@@ -172,12 +175,10 @@ const getCloseInColor = (id: string): string => {
   return "primary";
 };
 
-const {
-  canDownloadSchedule,
-  canViewSchedules,
-  canViewScheduleDetails,
-  canManageScheduleTasks,
-} = useCleaningSchedulePermission();
+const canDownloadSchedule = computed(() => props.canDownloadSchedule);
+const canViewSchedules = computed(() => props.canViewSchedules);
+const canViewScheduleDetails = computed(() => props.canViewScheduleDetails);
+const canManageScheduleTasks = computed(() => props.canManageScheduleTasks);
 
 const {
   data: getCleanerChecklistReq,

package/components/ManageChecklistMain.vue

@@ -300,7 +300,6 @@
 </template>
 
 <script setup lang="ts">
-import { useCleaningSchedulePermission } from "../composables/useCleaningSchedulePermission";
 import useCleaningSchedules from "../composables/useCleaningSchedules";
 import useCustomerSite from "../composables/useCustomerSite";
 import useFile from "../composables/useFile";
@@ -313,13 +312,15 @@ const props = defineProps({
   scheduleAreaId: { type: String, default: "" },
   type: { type: String, default: "cleaner" },
   serviceType: { type: String, default: "" },
+  canAddRemarks: { type: Boolean, default: false },
+  canManageScheduleTasks: { type: Boolean, default: false },
 });
 
 const { getUnitCleanerChecklist, updateUnitChecklist } = useCleaningSchedules();
 const { getBySiteAsServiceProvider } = useCustomerSite();
 const { back } = useUtils();
-const { canAddRemarks, canManageScheduleTasks } =
-  useCleaningSchedulePermission();
+const canAddRemarks = computed(() => props.canAddRemarks);
+const canManageScheduleTasks = computed(() => props.canManageScheduleTasks);
 
 const selectedScheduleStatus = useState<string>(
   "selectedScheduleStatus",

package/components/MemberInformation.vue

@@ -2,9 +2,9 @@
     <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-form ref="formRef" v-model="validForm" :disabled="processing" @click="errorMessage = ''">
+                <v-btn block color="primary-button" :height="40" text="Scan QR Code" class="text-capitalize"
+                    prepend-icon="mdi-qrcode" @click="handleScanQRPass" />
+                <v-form ref="formRef" v-model="validForm" :disabled="processing" @click="errorScanPassMessage = ''">
                     <v-row no-gutters class="pt-5 ga-2">
                         <v-col cols="12">
                             <InputLabel class="text-capitalize" title="Full Name" required />
@@ -19,10 +19,10 @@
                         </v-col>
 
                         <v-col cols="12">
-                            <v-autocomplete v-model="selectedPass" v-model:search="passInput"
-                                :hide-no-data="false" class="mt-3" :items="passItemsFilteredFinal"
-                                item-title="prefixAndName" item-value="_id" label="Pass (optional)" variant="outlined"
-                                hide-details density="compact" persistent-hint small-chips>
+                            <v-autocomplete v-model="selectedPass" v-model:search="passInput" :hide-no-data="false"
+                                class="mt-3" :items="passItemsFilteredFinal" item-title="prefixAndName" item-value="_id"
+                                label="Pass (optional)" variant="outlined"  density="compact" :error-messages="errorScanPassMessage"
+                                persistent-hint small-chips>
                                 <template v-slot:no-data>
                                     <v-list-item density="compact">
                                         <v-list-item-title v-if="passInput">
@@ -35,8 +35,7 @@
                                 </template>
 
                                 <template v-slot:chip="{ props, item }">
-                                    <v-chip v-if="selectedPass" v-bind="props"
-                                        prepend-icon="mdi-card-bulleted-outline"
+                                    <v-chip v-if="selectedPass" v-bind="props" prepend-icon="mdi-card-bulleted-outline"
                                         :text="item.raw?.prefixAndName"></v-chip>
                                 </template>
                             </v-autocomplete>
@@ -62,12 +61,15 @@
                 </v-form>
             </v-card-text>
         </v-card>
+        <visitor-pass-key-q-r-scanner :dialog="dialog.scanQRCode" v-model:scannedValue="scannedPassValue"
+        @close-dialog="dialog.scanQRCode = false" />
         <v-divider class="my-3" />
         <v-row v-if="committedMembers.length > 0" no-gutters class="w-100 mt-5 ga-3">
             <template v-for="member, index in committedMembers" :key="member.nric">
                 <CardMemberInfoSummary :member="membersDisplayed[index]" @remove="handleRemoveMember(index)" />
             </template>
         </v-row>
+        <!-- <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" /> -->
     </v-row>
 </template>
 
@@ -103,18 +105,33 @@ const { getPassKeysByPageSearch } = usePassKey()
 const memberForm = reactive<TMemberInfo>({
     name: "",
     nric: "",
-    visitorPass: "",
+    visitorPass: [] as { keyId: string }[],
     contact: ""
 })
 
 const validForm = ref(false)
 const formRef = ref<HTMLFormElement>()
 const processing = ref(false);
-const errorMessage = ref('')
+const errorScanPassMessage = ref('')
+
+const message = ref("");
+const messageColor = ref("");
+const messageSnackbar = ref(false);
+
+function showMessage(msg: string, color: string) {
+    message.value = msg;
+    messageColor.value = color;
+    messageSnackbar.value = true;
+}
 
 // pass
 const passInput = ref('')
 const passItems = ref<TPassKey[]>([])
+const scannedPassValue = ref<string>("")
+
+const dialog = reactive({
+    scanQRCode: false,
+})
 
 const selectedPass = ref<string>('')
 
@@ -160,7 +177,7 @@ watch(passesData, (data: any) => {
 
 const passItemsFilteredFinal = computed(() => {
     return passItems.value.filter((item: TPassKey) => {
-        return !props.selectedVisitorPass.some((pass: TPassKeyPayload) => pass.keyId === item._id) && !committedMembers.value.some((member: TMemberInfo) => member.visitorPass === item._id)
+        return !props.selectedVisitorPass.some((pass: TPassKeyPayload) => pass.keyId === item._id) && !committedMembers.value.some((member: TMemberInfo) => member.visitorPass?.some((pass) => pass.keyId === item._id))
     })
 })
 
@@ -168,15 +185,34 @@ const membersDisplayed = computed(() => {
     return committedMembers.value.map((member: TMemberInfo) => {
         return {
             ...member,
-            visitorPass: passItems.value.find((item: TPassKey) => item._id === member.visitorPass)?.prefixAndName || ""
+            visitorPass: passItems.value.find((item: TPassKey) => item._id === member.visitorPass?.[0]?.keyId)?.prefixAndName || ""
         }
     })
 })
 
+function handleScanQRPass() {
+    errorScanPassMessage.value = ""
+    dialog.scanQRCode = true
+}
+
 watch(selectedPass, (newVal) => {
     memberForm.visitorPass = [{ keyId: newVal }]
 })
 
+watch(scannedPassValue, (newVal) => {
+    if (!newVal) return
+
+    const matchedPass = passItemsFilteredFinal.value.find((p) => p.prefixAndName === newVal)
+
+    if (matchedPass) {
+        selectedPass.value = matchedPass._id ?? ""
+        return
+    }
+
+    errorScanPassMessage.value = "Scanned pass not available"
+    showMessage("Scanned pass not available", "error")
+})
+
 
 
 function handleClearForm() {

package/components/MyAttendanceMain.vue

@@ -79,16 +79,19 @@
 
 <script setup lang="ts">
 import useAttendance from "../composables/useAttendance";
-import { useAttendancePermission } from "../composables/useAttendancePermission";
 
 const props = defineProps({
   orgId: { type: String, default: "" },
   site: { type: String, default: "" },
   serviceType: { type: String, default: "" },
+  canViewOwnAttendance: { type: Boolean, default: true },
+  canCheckInOut: { type: Boolean, default: false },
+  canViewAttendanceDetails: { type: Boolean, default: true },
 });
 
-const { canViewOwnAttendance, canCheckInOut, canViewAttendanceDetails } =
-  useAttendancePermission();
+const canViewOwnAttendance = computed(() => props.canViewOwnAttendance);
+const canCheckInOut = computed(() => props.canCheckInOut);
+const canViewAttendanceDetails = computed(() => props.canViewAttendanceDetails);
 
 const searchInput = ref("");
 const dialogShowForm = ref(false);

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>