@7365admin1/layer-common 1.11.23 → 1.11.26

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @iservice365/layer-common
 
+## 1.11.26
+
+### Patch Changes
+
+- d418c67: Update builing management image upload
+
+## 1.11.25
+
+### Patch Changes
+
+- 949ad2b: Update Layer-common version
+
+## 1.11.24
+
+### Patch Changes
+
+- 68d57fd: Update Enhancement in VMS
+
 ## 1.11.23
 
 ### Patch Changes

package/components/AreaChecklistHistoryMain.vue

@@ -97,7 +97,7 @@ const props = defineProps({
   site: { type: String, required: true, default: "" },
   scheduleAreaId: { type: String, required: true, default: "" },
   type: { type: String, required: true, default: "cleaner" },
-  scheduleRoute: { type: String, default: "cleaning-schedule" },
+  scheduleRoute: { type: String, default: "pest-schedule" },
 });
 
 const { formatDate, back, debounce } = useUtils();

package/components/AttachmentsViewer.vue

@@ -0,0 +1,266 @@
+<template>
+    <v-col cols="12" v-if="files?.length > 0" class="mb-5">
+        <v-row no-gutters>
+            <v-col v-if="showTitle" class="font-weight-bold">{{ title }}</v-col>
+            <v-col cols="12" class="">
+
+                <!-- Loading Skeleton -->
+                <template v-if="loading && files?.length > 0">
+                    <v-card v-for="(file, index) in files" :key="index" height="50px" flat border="sm black" class="mb-2">
+                        <v-skeleton-loader type="list-item" class="mb-2" />
+                    </v-card>
+                </template>
+
+                <!-- Files Content -->
+                <template v-else>
+
+                    <!-- Videos -->
+                    <template v-if="videosArray.length > 0">
+                        <div v-if="showFileTypeTitle" class="text-caption text-medium-emphasis mb-1">Videos ({{
+                            videosArray.length }})</div>
+                        <v-list density="compact" class="pa-0 rounded-lg border mb-2">
+                            <template v-for="(item, i) in videosArray" :key="item._id">
+                                <v-divider v-if="i > 0" />
+                                <v-list-item :prepend-icon="getFileIcon(item.mimeType)" :title="item.file.name"
+                                    :subtitle="item.mimeType" class="cursor-pointer"
+                                    @click="openMediaViewer(item._id, item.mimeType)">
+                                    <template #prepend>
+                                        <v-icon :color="getFileIconColor(item.mimeType)" class="mr-3">{{
+                                            getFileIcon(item.mimeType) }}</v-icon>
+                                    </template>
+                                    <template #append>
+                                        <v-icon size="16" color="grey-lighten-1">mdi-play-circle-outline</v-icon>
+                                    </template>
+                                </v-list-item>
+                            </template>
+                        </v-list>
+                    </template>
+
+                    <!-- Photos -->
+                    <template v-if="photosArray.length > 0">
+                        <div v-if="showFileTypeTitle" class="text-caption text-medium-emphasis mb-1"
+                            :class="{ 'mt-3': videosArray.length > 0 }">
+                            Photos ({{ photosArray.length }})</div>
+                        <v-list density="compact" class="pa-0 rounded-lg border mb-2">
+                            <template v-for="(item, i) in photosArray" :key="item._id">
+                                <v-divider v-if="i > 0" />
+                                <v-list-item class="cursor-pointer" @click="openMediaViewer(item._id, item.mimeType)">
+                                    <template #prepend>
+                                        <v-avatar size="36" rounded="sm" class="mr-3">
+                                            <v-img :src="getFileUrl(item._id)" cover>
+                                                <template #error>
+                                                    <v-icon color="green" size="20">mdi-image</v-icon>
+                                                </template>
+                                            </v-img>
+                                        </v-avatar>
+                                    </template>
+                                    <v-list-item-title class="text-body-2">{{ item.file.name }}</v-list-item-title>
+                                    <v-list-item-subtitle class="text-caption">{{ item.mimeType
+                                    }}</v-list-item-subtitle>
+                                    <template #append>
+                                        <v-icon size="16" color="grey-lighten-1">mdi-eye-outline</v-icon>
+                                    </template>
+                                </v-list-item>
+                            </template>
+                        </v-list>
+                    </template>
+
+                    <!-- Documents & Other Files -->
+                    <template v-if="filesArray.length > 0">
+                        <div v-if="showFileTypeTitle" class="text-caption text-medium-emphasis mb-1"
+                            :class="{ 'mt-3': videosArray.length > 0 || photosArray.length > 0 }">Files ({{
+                                filesArray.length }})</div>
+                        <v-list density="compact" class="pa-0 rounded-lg border mb-2">
+                            <template v-for="(item, i) in filesArray" :key="item._id">
+                                <v-divider v-if="i > 0" />
+                                <v-list-item class="cursor-pointer"
+                                    @click="openDocumentViewer(item._id, item.file.name, item.mimeType)">
+                                    <template #prepend>
+                                        <v-icon :color="getFileIconColor(item.mimeType)" class="mr-3">{{
+                                            getFileIcon(item.mimeType) }}</v-icon>
+                                    </template>
+                                    <v-list-item-title class="text-body-2">{{ item.file.name }}</v-list-item-title>
+                                    <v-list-item-subtitle class="text-caption">{{ item.mimeType
+                                    }}</v-list-item-subtitle>
+                                    <template #append>
+                                        <v-icon size="16" color="grey-lighten-1">mdi-open-in-new</v-icon>
+                                    </template>
+                                </v-list-item>
+                            </template>
+                        </v-list>
+                    </template>
+
+                </template>
+
+            </v-col>
+        </v-row>
+
+        <!-- Media Carousel (images + videos) -->
+        <ImageCarousel v-model="showCarousel" :active-file-id="activeFileId" :files="carouselFiles" />
+
+        <!-- Document Viewer -->
+        <DocumentViewer v-model="showDocumentViewer" :file-id="activeFileId" :file-name="activeFileName"
+            :mime-type="activeFileMimeType" />
+    </v-col>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+    files: {
+        type: Array as PropType<{ id: string, name: string }[]>,
+        required: true,
+    },
+    title: {
+        type: String,
+        default: "Attachments",
+    },
+    showTitle: {
+        type: Boolean,
+        default: false,
+    },
+
+    showFileTypeTitle: {
+        type: Boolean,
+        default: false,
+    }
+});
+
+const { getFileUrl, urlToFile, getFileById } = useFile();
+
+const rawFileArray = ref<{ file: File, _id: string, preview: boolean, mimeType: string }[]>([]);
+const loading = ref(true);
+
+const photosArray = getByType('image/');
+const videosArray = getByType('video/');
+const filesArray = getByType('other');
+
+/* Viewer state */
+const showCarousel = ref(false);
+const showDocumentViewer = ref(false);
+const activeFileId = ref('');
+const activeFileName = ref('');
+const activeFileMimeType = ref('application/octet-stream');
+const carouselFiles = ref<string[]>([]);
+
+function openMediaViewer(id: string, mimeType: string) {
+    activeFileId.value = id;
+    carouselFiles.value = [
+        ...photosArray.value.map(x => x._id),
+        ...videosArray.value.map(x => x._id),
+    ];
+    showCarousel.value = true;
+}
+
+function openDocumentViewer(id: string, name: string, mimeType: string) {
+    activeFileId.value = id;
+    activeFileName.value = name;
+    activeFileMimeType.value = mimeType;
+    showDocumentViewer.value = true;
+}
+
+function getFileIcon(mimeType: string): string {
+    if (mimeType.startsWith('image/')) return 'mdi-image';
+    if (mimeType.startsWith('video/')) return 'mdi-video';
+    if (mimeType === 'application/pdf') return 'mdi-file-pdf-box';
+    if (mimeType.includes('word') || mimeType.includes('document')) return 'mdi-file-word-box';
+    if (mimeType.includes('excel') || mimeType.includes('spreadsheet')) return 'mdi-file-excel-box';
+    if (mimeType.includes('powerpoint') || mimeType.includes('presentation')) return 'mdi-file-powerpoint-box';
+    if (mimeType === 'text/plain') return 'mdi-file-document-outline';
+    if (mimeType.includes('zip') || mimeType.includes('compressed') || mimeType.includes('archive')) return 'mdi-folder-zip-outline';
+    return 'mdi-file-outline';
+}
+
+function getFileIconColor(mimeType: string): string {
+    if (mimeType === 'application/pdf') return 'red';
+    if (mimeType.includes('word') || mimeType.includes('document')) return 'blue';
+    if (mimeType.includes('excel') || mimeType.includes('spreadsheet')) return 'green';
+    if (mimeType.includes('powerpoint') || mimeType.includes('presentation')) return 'orange';
+    if (mimeType.startsWith('video/')) return 'purple';
+    return 'grey';
+}
+
+function getByType(prefix: 'image/' | 'video/' | 'other') {
+    return computed(() => {
+        return rawFileArray.value.filter(x => {
+            const type = x?.mimeType || x?.file?.type;
+            if (typeof type !== 'string') return false;
+
+            if (prefix === 'other') {
+                return !type.startsWith('image/') && !type.startsWith('video/');
+            }
+            return type.startsWith(prefix);
+        });
+    });
+}
+
+watchEffect(async () => {
+    loading.value = true;
+    const processedFiles: typeof rawFileArray.value = [];
+
+    for (const item of (props.files || [])) {
+        // Handle building files format: { id, name }
+        if (item.id && item.name && !item.file) {
+            let mimeType = 'application/octet-stream';
+            try {
+                const fileMeta = await getFileById(item.id) as any;
+                const apiMimeType = fileMeta?.data?.mimeType || fileMeta?.mimeType;
+                // Use API mime type only if it's not generic
+                if (apiMimeType && apiMimeType !== 'application/octet-stream') {
+                    mimeType = apiMimeType;
+                } else {
+                    // Fallback to filename-based detection
+                    const ext = item.name?.split('.').pop()?.toLowerCase();
+                    mimeType = inferMimeType(ext);
+                }
+            } catch {
+                // Fallback: infer MIME type from file name
+                const ext = item.name?.split('.').pop()?.toLowerCase();
+                mimeType = inferMimeType(ext);
+            }
+            processedFiles.push({
+                _id: item.id,
+                file: new File([], item.name, { type: mimeType }),
+                preview: item.preview ?? false,
+                mimeType
+            });
+        }
+        // Handle announcement files format: { file, _id, ... }
+        else if (item.file && item._id) {
+            processedFiles.push({
+                ...item,
+                preview: item.preview ?? false,
+                mimeType: item.file.type || 'application/octet-stream'
+            });
+        }
+    }
+
+    rawFileArray.value = processedFiles;
+    loading.value = false;
+});
+
+function inferMimeType(ext?: string): string {
+    if (!ext) return 'application/octet-stream';
+    const mimeMap: Record<string, string> = {
+        'pdf': 'application/pdf',
+        'doc': 'application/msword',
+        'docx': 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+        'xls': 'application/vnd.ms-excel',
+        'xlsx': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+        'ppt': 'application/vnd.ms-powerpoint',
+        'pptx': 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+        'txt': 'text/plain',
+        'jpg': 'image/jpeg',
+        'jpeg': 'image/jpeg',
+        'png': 'image/png',
+        'gif': 'image/gif',
+        'webp': 'image/webp',
+        'mp4': 'video/mp4',
+        'webm': 'video/webm',
+        'ogv': 'video/ogg',
+        'zip': 'application/zip',
+        'rar': 'application/x-rar-compressed',
+        '7z': 'application/x-7z-compressed',
+    };
+    return mimeMap[ext] || 'application/octet-stream';
+}
+</script>

package/components/BuildingForm.vue

@@ -12,17 +12,9 @@
         <v-row no-gutters class="px-6 pt-4">
           <v-col cols="12" class="mt-2">
             <v-row no-gutters>
-              <InputLabel
-                class="text-capitalize font-weight-bold"
-                title="Name"
-                required
-              />
+              <InputLabel class="text-capitalize font-weight-bold" title="Name" required />
               <v-col cols="12">
-                <v-text-field
-                  v-model="building.name"
-                  density="comfortable"
-                  :rules="[requiredRule]"
-                ></v-text-field>
+                <v-text-field v-model="building.name" density="comfortable" :rules="[requiredRule]"></v-text-field>
               </v-col>
             </v-row>
           </v-col>
@@ -31,51 +23,30 @@
             <v-row>
               <v-col cols="6" class="mt-2">
                 <v-row no-gutters>
-                  <InputLabel
-                    class="text-capitalize font-weight-bold"
-                    title="Block"
-                    required
-                  />
+                  <InputLabel class="text-capitalize font-weight-bold" title="Block" required />
                   <v-col cols="12">
-                    <v-select
-                      v-model.number="building.block"
-                      :items="blocks"
-                      item-title="label"
-                      item-value="value"
-                      density="comfortable"
-                      :disabled="prop.mode === 'edit'"
-                      :rules="[
+                    <v-select v-model.number="building.block" :items="blocks" item-title="label" item-value="value"
+                      density="comfortable" :disabled="prop.mode === 'edit'" :rules="[
                         requiredRule,
                         () =>
                           (building.block && building.block > 0) ||
                           'Block is required',
-                      ]"
-                      type="number"
-                    >
-                  <template v-slot:item="{ props: itemProps, item}">
-                    <v-list-item v-bind="itemProps" :disabled="item?.raw?.disabled" ></v-list-item>
-                  </template>
-                  
-                  </v-select>
+                      ]" type="number">
+                      <template v-slot:item="{ props: itemProps, item }">
+                        <v-list-item v-bind="itemProps" :disabled="item?.raw?.disabled"></v-list-item>
+                      </template>
+
+                    </v-select>
                   </v-col>
                 </v-row>
               </v-col>
 
               <v-col cols="6" class="mt-2">
                 <v-row no-gutters>
-                  <InputLabel
-                    class="text-capitalize font-weight-bold"
-                    title="Levels"
-                    required
-                  />
+                  <InputLabel class="text-capitalize font-weight-bold" title="Levels" required />
                   <v-col cols="12">
-                    <v-text-field
-                      v-model.number="buildingLevels"
-                      density="comfortable"
-                      :rules="[requiredRule]"
-                      type="number"
-                      @update:model-value="setBuildingLevels()"
-                    ></v-text-field>
+                    <v-text-field v-model.number="buildingLevels" density="comfortable" :rules="[requiredRule]"
+                      type="number" @update:model-value="setBuildingLevels()"></v-text-field>
                   </v-col>
                 </v-row>
               </v-col>
@@ -85,14 +56,8 @@
           <v-col v-if="buildingLevels" cols="12">
             <v-row justify="center">
               <v-col cols="6">
-                <v-btn
-                  block
-                  color="primary"
-                  variant="text"
-                  class="text-none font-weight-bold"
-                  text="Set level labels"
-                  @click="show = !show"
-                ></v-btn>
+                <v-btn block color="primary" variant="text" class="text-none font-weight-bold" text="Set level labels"
+                  @click="show = !show"></v-btn>
               </v-col>
             </v-row>
           </v-col>
@@ -100,21 +65,12 @@
 
         <v-expand-transition>
           <v-row v-show="show" no-gutters class="px-6">
-            <template
-              v-for="(level, levelIndex) in building.levels"
-              :key="levelIndex"
-            >
+            <template v-for="(level, levelIndex) in building.levels" :key="levelIndex">
               <v-col cols="12">
                 <v-row no-gutters>
-                  <InputLabel
-                    class="text-capitalize font-weight-bold"
-                    :title="`Level ${levelIndex + 1}`"
-                  />
+                  <InputLabel class="text-capitalize font-weight-bold" :title="`Level ${levelIndex + 1}`" />
                   <v-col cols="12">
-                    <v-text-field
-                      v-model.trim="building.levels[levelIndex]"
-                      density="comfortable"
-                    ></v-text-field>
+                    <v-text-field v-model.trim="building.levels[levelIndex]" density="comfortable"></v-text-field>
                   </v-col>
                 </v-row>
               </v-col>
@@ -122,10 +78,10 @@
           </v-row>
         </v-expand-transition>
 
-         <!-- <v-col cols="12" class="px-6">
-            <InputLabel class="text-capitalize" title="Building Floor plan" />
-            <InputFileV2 v-model="building.buildingFloorPlan" :multiple="true" :max-length="10" title="Upload Images" />
-          </v-col> -->
+        <v-col cols="12" class="px-6">
+          <InputLabel class="text-capitalize" title="Building Floor plan" />
+          <InputFileV2 v-model="building.buildingFiles" :multiple="true" accept="*"  :max-length="10" title="Upload Files" />
+        </v-col>
 
         <v-col cols="12" class="mt-2">
           <v-checkbox v-model="createMore" density="comfortable" hide-details>
@@ -140,9 +96,7 @@
         <v-col cols="12">
           <v-row no-gutters>
             <v-col cols="12" class="text-center">
-              <span
-                class="text-none text-subtitle-2 font-weight-medium text-error"
-              >
+              <span class="text-none text-subtitle-2 font-weight-medium text-error">
                 {{ message }}
               </span>
             </v-col>
@@ -154,31 +108,14 @@
     <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"
-          >
+          <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"
-          >
+          <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>
@@ -204,7 +141,7 @@ const prop = defineProps({
       name: "",
       block: null,
       levels: [],
-      buildingFloorPlan: []
+      buildingFiles: []
     }),
   },
   blocks: {
@@ -214,6 +151,7 @@ const prop = defineProps({
 });
 
 const { getSiteById } = useSite();
+const { getFileById } = useFile();
 
 const site = ref<TSite | null>(null);
 
@@ -235,7 +173,7 @@ const blocks = computed(() => {
   const array = Array.from({ length: site.value?.metadata?.block || 0 }, (_, i) => i + 1);
 
   const formattedArray = array.map((num) => {
-    const isDisabled = prop.blocks.some((block) => block.block === num) 
+    const isDisabled = prop.blocks.some((block) => block.block === num)
     return {
       label: num.toString(),
       value: num,
@@ -266,15 +204,43 @@ const building = ref<TBuilding>({
   name: "",
   block: null,
   levels: [],
-  buildingFloorPlan: []
+  buildingFiles: []
 });
 
+// Normalize buildingFiles: extract IDs for InputFileV2, keep names in a separate map
+const buildingFilesNames = ref<Record<string, string>>({});
+
 building.value.site = prop.site;
 if (prop.mode === "edit") {
   building.value = JSON.parse(JSON.stringify(prop.building));
   buildingLevels.value = building.value.levels.length;
+
+  const rawFiles = building.value.buildingFiles as any[];
+  if (rawFiles?.length && typeof rawFiles[0] === 'object') {
+    rawFiles.forEach((f: { id: string; name: string }) => {
+      buildingFilesNames.value[f.id] = f.name ?? "";
+    });
+    building.value.buildingFiles = rawFiles.map((f: { id: string }) => f.id);
+  }
 }
 
+watch(
+  () => building.value.buildingFiles as string[],
+  async (ids) => {
+    for (const id of ids) {
+      if (!buildingFilesNames.value[id]) {
+        try {
+          const meta = await getFileById(id) as any;
+          buildingFilesNames.value[id] = meta?.data?.name ?? meta?.name ?? "";
+        } catch {
+          buildingFilesNames.value[id] = "";
+        }
+      }
+    }
+  },
+  { deep: true }
+);
+
 const createMore = ref(false);
 const disable = ref(false);
 
@@ -289,7 +255,9 @@ async function submit() {
 
   try {
     if (prop.mode === "add") {
-      await createBuilding(building.value);
+      const buildingPayload = { ...building.value };
+      buildingPayload.buildingFiles = (building.value.buildingFiles as string[] || []).map((id) => ({ id, name: buildingFilesNames.value[id] ?? "" }));
+      await createBuilding(buildingPayload);
     }
 
     if (prop.mode === "edit") {
@@ -297,7 +265,7 @@ async function submit() {
         name: building.value.name,
         block: building.value.block,
         levels: building.value.levels,
-        buildingFloorPlan: building.value.buildingFloorPlan
+        buildingFiles: (building.value.buildingFiles as string[] || []).map((id) => ({ id, name: buildingFilesNames.value[id] ?? "" }))
       });
     }
 

package/components/BuildingManagement/buildings.vue

@@ -28,8 +28,7 @@
         </v-toolbar>
 
         <v-data-table :headers="headers" :items="items" item-value="_id" items-per-page="20" fixed-header
-          hide-default-footer  @click:row="tableRowClickHandler"
-          style="max-height: calc(100vh - (200px))">
+          hide-default-footer @click:row="tableRowClickHandler" style="max-height: calc(100vh - (200px))">
           <template #item.createdAt="{ value }">
             {{ new Date(value).toLocaleDateString() }}
           </template>
@@ -70,14 +69,13 @@
               <strong>Levels:</strong>
               {{ selectedBuilding?.levels.length ?? "N/A" }}
             </v-col>
-            <!-- <template v-if="selectedBuilding?.buildingFloorPlan.length > 0">
-              <v-col cols="12">
-                <strong>Building Floor Plan:</strong>
-              </v-col>
-              <v-col cols="12">
-                <InputFileV2 :model-value="selectedBuilding?.buildingFloorPlan" view-mode />
-              </v-col>
-            </template> -->
+            <v-col cols="12">
+              <strong>Files:</strong>
+              <div v-if="selectedBuilding?.buildingFiles?.length" class="">
+                <AttachmentsViewer :files="selectedBuilding.buildingFiles" title="" show-file-type-title />
+              </div>
+              <span v-else> None</span>
+            </v-col>
           </v-row>
         </v-card-text>
 
@@ -153,6 +151,7 @@
             </v-col>
           </v-row>
         </v-toolbar>
+
       </v-card>
     </v-dialog>
 
@@ -270,7 +269,7 @@ const selectedBuilding = ref<TBuilding>({
   name: "",
   block: null,
   levels: [],
-  buildingFloorPlan: [],
+  buildingFiles: [],
 });
 
 function tableRowClickHandler(_: any, data: any) {
@@ -343,7 +342,7 @@ function setBuilding({
 }
 </script>
 <style scoped>
-  .v-data-table :deep(thead th) {
+.v-data-table :deep(thead th) {
   font-weight: bold !important;
 }
 </style>

package/components/CleaningScheduleMain.vue

@@ -76,6 +76,15 @@
             {{ value || "No Status" }}
           </v-chip>
         </template>
+        <template #item.completedAt="{ value }">
+          {{
+            formatDate
+              ? formatDate(value)
+              : value
+              ? new Date(value).toLocaleString()
+              : ""
+          }}
+        </template>
         <template #item.download="{ item }">
           <v-btn
             v-if="canDownloadSchedule"
@@ -136,7 +145,7 @@ const headers = [
   { title: "Created Date", value: "createdAt" },
   { title: "Close in", value: "closeIn" },
   { title: "Status", value: "status" },
-  { title: "Completion Date", value: "completionDate" },
+  { title: "Completion Date", value: "completedAt" },
   { title: "", value: "download" },
 ];
 const remainingTime = ref({} as Record<string, string>);