@iservice365/layer-common 1.5.7 → 1.7.0

package/components/ImageCarousel.vue

@@ -1,19 +1,43 @@
 <template>
   <v-dialog v-model="overlay" v-if="overlay" width="100%" height="100%" opacity="50">
     <v-row align="center" justify="center" class="fill-height" style="position: relative;">
-      <v-carousel hide-delimiters width="100%" height="100%" :show-arrows="images.length > 1 ? 'hover' : false"
+      <v-carousel hide-delimiters width="100%" height="100%" :show-arrows="files.length > 1 ? 'hover' : false"
         v-model="activeIndex">
-        <template v-for="x, index in images" :key="x._id">
-          <v-carousel-item  height="100%" width="100%" rounded="lg">
-            <v-row no-gutters class="w-100 h-100" align="center">
-              <v-img :lazy-src="getFileUrl(x)" :src="getFileUrl(x)" width="70%" height="70%" :alt="'Image Viewer Card -' + index"></v-img>
-            </v-row>
-            <template v-slot:placeholder>
-              <div class="d-flex align-center justify-center fill-height">
-                <v-progress-circular color="grey-lighten-4" indeterminate></v-progress-circular>
-              </div>
-            </template>
-          </v-carousel-item>
+        <template v-for="x, index in files" :key="x || index">
+          <template v-if="fileTypes?.[x] === 'image'">
+            <v-carousel-item height="100%" width="100%" rounded="lg">
+              <v-row no-gutters class="w-100 h-100" align="center">
+                <v-img :lazy-src="getFileUrl(x)" :src="getFileUrl(x)" width="70%" height="70%"
+                  :alt="'Image Viewer Card -' + index"></v-img>
+              </v-row>
+              <template v-slot:placeholder>
+                <div class="d-flex align-center justify-center fill-height">
+                  <v-progress-circular color="grey-lighten-4" indeterminate></v-progress-circular>
+                </div>
+              </template>
+            </v-carousel-item>
+          </template>
+          <template v-else-if="fileTypes?.[x] === 'video'">
+            <v-carousel-item>
+              <v-row no-gutters class="h-100 w-100" align="center" justify="center">
+                <video width="80%" height="80%" controls>
+                  <source :src="getFileUrl(x)" />
+                </video>
+              </v-row>
+              <template v-slot:placeholder>
+                <div class="d-flex align-center justify-center fill-height">
+                  <v-progress-circular color="grey-lighten-4" indeterminate></v-progress-circular>
+                </div>
+              </template>
+            </v-carousel-item>
+          </template>
+          <template v-else>
+            <v-carousel-item>
+              <v-row no-gutters class="h-100 w-100" align="center" justify="center">
+                <v-icon size="100" color="white">mdi-file</v-icon>
+              </v-row>
+            </v-carousel-item>
+          </template>
         </template>
 
         <template v-slot:prev="{ props }">
@@ -29,15 +53,17 @@
         class="cursor-pointer text-white text-h6 custom-shadow d-flex justify-space-between" @click="overlay = false">
         <v-row no-gutters style="position: relative">
           <v-col cols="8" xs="6" sm="2" md="2" lg="2">
-          <v-btn prepend-icon="mdi-close" text="Close" rounded="lg" color="secondary" class="ml-2"
-            style="position: absolute;"></v-btn>
-            </v-col>
+            <v-btn prepend-icon="mdi-close" text="Close" rounded="lg" color="secondary" class="ml-2"
+              style="position: absolute;"></v-btn>
+          </v-col>
 
         </v-row>
 
       </div>
-      <span class="text-white text-16px d-flex w-100 mt-2 justify-center" style="position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);">{{ `${activeIndex + 1}/${images.length}`
-            }}</span>
+      <span class="text-white text-16px d-flex w-100 mt-2 justify-center"
+        style="position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);">{{ `${activeIndex +
+          1}/${files.length}`
+        }}</span>
 
     </v-row>
   </v-dialog>
@@ -45,33 +71,29 @@
 
 <script setup lang="ts">
 const props = defineProps({
-  activeImageId: {
+  activeFileId: {
     type: String,
     required: false,
   },
-  isFavorite: {
-    type: Boolean,
-    default: false,
-    required: false
-  },
-  images: {
+  files: {
     type: Array as PropType<string[]>,
     default: []
   }
 });
 
 
-const { getFileUrl } = useFile()
+const { getFileUrl, urlToFile } = useFile()
 const overlay = defineModel({ required: true, default: false });
 const activeIndex = ref(0);
-const { currentUser} = useLocalAuth();
+const fileTypes = ref<Record<string, "image" | "video" | "other">>({});
+
 
 const emit = defineEmits(['share', 'like'])
 
 watchEffect(() => {
-  if (props.activeImageId && props.images.length > 0) {
+  if (props.activeFileId && props.files.length > 0) {
     const index =
-      props.images?.findIndex((x) => x == props.activeImageId) || 0;
+      props.files?.findIndex((x) => x == props.activeFileId) || 0;
     if (index !== -1) {
       activeIndex.value = index;
     } else activeIndex.value = 0;
@@ -80,15 +102,33 @@ watchEffect(() => {
   }
 });
 
+async function resolveFileTypes() {
+  fileTypes.value = {}; // reset
 
-const handleShare = () => {
-  overlay.value = false;
-  emit('share')
-}
+  for (const x of props.files) {
+    try {
+      const url = getFileUrl(x);
+      const file = await urlToFile(url, x);
+      const type = file?.type;
+     
+
+      if (type?.startsWith("video")) fileTypes.value[x] = "video";
+      else if (type?.startsWith("image")) fileTypes.value[x] = "image";
+      else fileTypes.value[x] = "other";
 
-const handleLike = () => {
-  emit('like')
+    } catch (err) {
+      fileTypes.value[x] = "other";
+    }
+  }
 }
+
+watch(
+  () => props.files,
+  () => resolveFileTypes(),
+  { immediate: true }
+);
+
+
 </script>
 
 <style scoped>

package/components/Input/FileV2.vue

@@ -42,7 +42,7 @@
       <p class="text-error w-100 text-center text-subtitle-2">{{ errorMessage }}</p>
     </v-row>
 
-    <ImageCarousel v-model="showImageCarousel" :images="idsArray" :active-image-id="activeImageId" />
+    <ImageCarousel v-model="showImageCarousel" :files="idsArray" :active-file-id="activeImageId" />
   </v-row>
 </template>
 

package/components/Input/InputPhoneNumberV2.vue

@@ -21,6 +21,7 @@
 <script setup lang="ts">
 import { ref, computed, type PropType } from 'vue'
 import type { ValidationRule } from 'vuetify/lib/types.mjs'
+//@ts-ignore
 import phoneMasks from '~/utils/phoneMasks'
 
 const props = defineProps({

package/components/Input/NRICNumber.vue

@@ -35,7 +35,7 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue'])
 
-const model = defineModel({required: true, default: ""})
+const model = defineModel({required: true})
 
 function onInput(event) {
   const value = typeof event === 'string' ? event : event?.target?.value || ''
@@ -43,7 +43,7 @@ function onInput(event) {
   let formatted = value.replace(/[^A-Za-z0-9]/g, '')
   formatted = formatted.toUpperCase()
 
-  model.value = formatted
+  model.value = formatted || ""
 }
 
 

package/components/Input/VehicleNumber.vue

@@ -36,7 +36,7 @@ const props = defineProps({
   }
 })
 
-const model = defineModel({required: true, default: ""})
+const model = defineModel({required: true })
 
 function onInput(event) {
   const value = typeof event === 'string' ? event : event?.target?.value || ''

package/components/Nfc/NFCTagForm.vue

@@ -0,0 +1,210 @@
+<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">
+          {{ title }}
+        </span>
+      </v-row>
+    </v-toolbar>
+
+    <v-card-text
+      style="max-height: 100vh; overflow-y: auto"
+      class="pa-5 my-5 px-7"
+    >
+      <v-form ref="formRef" v-model="valid" @submit.prevent="submit">
+        <v-row no-gutters>
+          <v-col cols="12" class="mb-4">
+            <label class="text-subtitle-2 font-weight-medium mb-2">
+              Name <span class="text-red">*</span>
+            </label>
+            <v-text-field
+              v-model="form.name"
+              placeholder="Enter name"
+              variant="outlined"
+              density="comfortable"
+              :rules="[rules.required]"
+              hide-details="auto"
+            />
+          </v-col>
+
+          <v-col cols="12" class="mb-4">
+            <label class="text-subtitle-2 font-weight-medium mb-2">
+              Tag ID <span class="text-red">*</span>
+            </label>
+            <v-text-field
+              v-model="form.tagID"
+              placeholder="Enter tag id"
+              variant="outlined"
+              density="comfortable"
+              :rules="[rules.required, rules.noSpaces]"
+              hide-details="auto"
+              @input="handleTagIDInput"
+            />
+          </v-col>
+
+          <v-col cols="12" class="mb-4" v-if="mode === 'edit'">
+            <label class="text-subtitle-2 font-weight-medium mb-2">
+              Status
+            </label>
+            <v-select
+              v-model="form.status"
+              :items="statusOptions"
+              variant="outlined"
+              density="comfortable"
+              hide-details="auto"
+            />
+          </v-col>
+        </v-row>
+      </v-form>
+    </v-card-text>
+
+    <v-toolbar class="pa-0" density="compact">
+      <v-row no-gutters>
+        <v-col cols="6" class="pa-0">
+          <v-btn
+            block
+            variant="text"
+            class="text-none"
+            size="large"
+            @click="$emit('cancel')"
+            height="48"
+            :disabled="loading"
+          >
+            Cancel
+          </v-btn>
+        </v-col>
+
+        <v-col cols="6" class="pa-0">
+          <v-btn
+            block
+            tile
+            variant="flat"
+            class="text-none"
+            size="large"
+            height="48"
+            color="black"
+            @click="submit"
+            :loading="loading"
+            :disabled="!valid || loading"
+          >
+            Submit
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-toolbar>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+
+import useNFCPatrolTag from "../../composables/useNFCPatrolTag";
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: "Add NFC Tag",
+  },
+  site: {
+    type: String,
+    required: true,
+  },
+  orgId: {
+    type: String,
+    required: true,
+  },
+  mode: {
+    type: String as PropType<"create" | "edit">,
+    default: "create",
+  },
+  nfcTag: {
+    type: Object as PropType<any>,
+    default: () => ({
+      name: "",
+      tagID: "",
+      status: "active",
+    }),
+  },
+});
+
+const emit = defineEmits(["cancel", "success", "error"]);
+
+const formRef = ref();
+const valid = ref(false);
+const loading = ref(false);
+
+const form = ref({
+  name: "",
+  tagID: "",
+  status: "active",
+});
+
+const statusOptions = [
+  { title: "Active", value: "active" },
+  { title: "Inactive", value: "inactive" },
+];
+
+const rules = {
+  required: (v: any) => !!v || "This field is required",
+  noSpaces: (v: any) => !/\s/.test(v) || "Spaces are not allowed",
+};
+
+// Initialize form with existing data in edit mode
+watchEffect(() => {
+  if (props.mode === "edit" && props.nfcTag) {
+    form.value = {
+      name: props.nfcTag.name || "",
+      tagID: props.nfcTag.tagID || "",
+      status: props.nfcTag.status || "active",
+    };
+  }
+});
+
+const { add: addNFCTag, updateById: updateNFCTag } = useNFCPatrolTag();
+
+function handleTagIDInput(event: any) {
+  // Convert to uppercase and remove spaces
+  const value = event.target.value;
+  form.value.tagID = value.toUpperCase().replace(/\s/g, "");
+}
+
+async function submit() {
+  const { valid: isValid } = await formRef.value.validate();
+
+  if (!isValid) return;
+
+  loading.value = true;
+
+  try {
+    
+    const payload: { site: string; tagID: string; name: string } = {
+      site: props.site,
+      tagID: form.value.tagID,
+      name: form.value.name,
+    };
+
+    if (props.mode === "create") {
+      await addNFCTag(payload);
+    } else {
+      await updateNFCTag(props.nfcTag._id, payload);
+    }
+
+    emit("success");
+
+
+    if (props.mode === "create") {
+      form.value = {
+        name: "",
+        tagID: "",
+        status: "active",
+      };
+      formRef.value.reset();
+    }
+  } catch (error: any) {
+    console.error("Error submitting NFC tag:", error);
+    emit("error", error);
+  } finally {
+    loading.value = false;
+  }
+}
+</script>