@7365admin1/layer-common 1.11.27 → 1.11.29

package/components/SiteSettings.vue

@@ -5,47 +5,57 @@
       <v-expansion-panel color="primary">
         <v-expansion-panel-title>
           <v-icon class="mr-2">mdi-cog</v-icon>
-          Site Settings
+          Site Information
         </v-expansion-panel-title>
 
         <v-expansion-panel-text>
-          <v-row no-gutters class="d-flex justify-center">
-            <v-col cols="12">
-              <v-row no-gutters>
-                <v-col cols="12">
-                  <span class="text-h4 font-weight-bold"> Site Settings </span>
+          <v-row no-gutters class="d-flex justify-center py-10">
+            <v-form class="w-100">
+              <v-row>
+                <!-- Cover Photo + Preview -->
+                <v-col cols="12" lg="5" class="pt-0">
+                  <InputLabel title="Cover Photo (displayed in resident app)" class="d-block mb-2" />
+                  <InputFileV2 v-model="coverPhoto" accept="image/*" title="Upload cover photo" :height="120" />
+                </v-col>
+                <v-col cols="12" lg="7" class="pl-lg-4 pt-4 pt-lg-0">
+                  <InputLabel title="Preview" class="d-block mb-2" />
+                  <v-img v-if="coverPhotoUrl" :src="coverPhotoUrl" aspect-ratio="16/9" cover rounded="lg"
+                    class="w-100 border" />
+                  <div v-else
+                    class="w-100 d-flex align-center justify-center rounded-lg bg-grey-lighten-4 border border-dashed"
+                    style="aspect-ratio: 16/9">
+                    <span class="text-caption text-medium-emphasis">No cover photo uploaded</span>
+                  </div>
                 </v-col>
 
-                <v-col cols="12">
-                  <v-row no-gutters>
-                    <v-col cols="12" lg="4" class="mt-2">
-                      <NumberSettingField
-                        v-model="blocks"
-                        title="No. of blocks"
-                        type="blocks"
-                        :read-only="!canManageSiteSettings"
-                        :existing-block-number="existingBlockNumber"
-                        :site-id="siteId"
-                        :disabled="existingBlockNumber === blocks"
-                        @success="refreshSiteData"
-                      />
-                    </v-col>
-                  </v-row>
+                <!-- Description + Site Documents -->
+                <v-col cols="12" lg="6" class="mt-2">
+                  <InputLabel title="Description" class="d-block mb-1" />
+                  <v-textarea v-model="description" variant="outlined" density="compact" rows="4" hide-details no-resize
+                    style="height: 119px" />
+                </v-col>
+                <v-col cols="12" lg="6" class="mt-2 pl-lg-2">
+                  <InputLabel title="Site Documents" class="d-block mb-1" />
+                  <InputFileV2 v-model="siteDocuments" :multiple="true" accept="*/*" title="Upload documents"
+                    :height="104" />
+                </v-col>
+
+                <!-- Submit -->
+                <v-col cols="12" class="pt-0 d-flex justify-end">
+                  <v-btn color="primary-button" class="text-none" size="large" variant="flat" text="Save"
+                    :loading="savingSiteInfo" @click="saveSiteInfo" />
+                </v-col>
+
+                <!-- Divider -->
+                <v-col cols="12" class="my-2">
+                  <v-divider />
                 </v-col>
 
                 <v-col cols="12">
                   <v-row no-gutters>
                     <v-col cols="12" lg="4" class="mt-2">
-                      <NumberSettingField
-                        v-model="guardPosts"
-                        title="No. of guard posts"
-                        type="guard_posts"
-                        :read-only="!canManageSiteSettings"
-                        :existing-guard-posts-number="existingGuardPostNumber"
-                        :site-id="siteId"
-                        :disabled="existingGuardPostNumber === guardPosts"
-                        @success="refreshSiteData"
-                      />
+                      <NumberSettingField v-model="blocks" title="No. of blocks" type="blocks" :site-id="siteId"
+                        :disabled="existingBlockNumber === blocks" @success="refreshSiteData" />
                     </v-col>
                   </v-row>
                 </v-col>
@@ -53,135 +63,76 @@
                 <v-col cols="12">
                   <v-row no-gutters>
                     <v-col cols="12" lg="4" class="mt-2">
-                      <v-row no-gutters>
-                        <v-form v-model="gracePeriodValid">
-                          <v-row>
-                            <v-col cols="6">
-                              <InputLabel
-                                class="text-capitalize font-weight-bold"
-                                title="Grace Period"
-                                required
-                              />
-                              <v-text-field
-                                v-model="gracePeriod"
-                                type="number"
-                                density="comfortable"
-                                :readonly="!canManageSiteSettings"
-                                :rules="[requiredRule]"
-                              />
-                            </v-col>
-
-                            <v-col cols="6">
-                              <v-btn
-                                v-if="canManageSiteSettings"
-                                color="primary"
-                                class="text-none mt-6"
-                                size="large"
-                                variant="flat"
-                                :disabled="
-                                  !gracePeriodValid ||
-                                  existingGracePeriodNumber === gracePeriod
-                                "
-                                :loading="gracePeriodLoading"
-                                text="Save"
-                                @click="handleSaveGracePeriod"
-                              />
-                            </v-col>
-                          </v-row>
-                        </v-form>
-                      </v-row>
+                      <NumberSettingField v-model="guardPosts" title="No. of guard posts" type="guard_posts"
+                        :site-id="siteId" :disabled="existingGuardPostNumber === guardPosts"
+                        @success="refreshSiteData" />
                     </v-col>
                   </v-row>
                 </v-col>
               </v-row>
-            </v-col>
+            </v-form>
           </v-row>
         </v-expansion-panel-text>
       </v-expansion-panel>
 
       <!-- ANPR CAMERA -->
-      <v-expansion-panel color="primary">
+      <v-expansion-panel v-if="showAnprCamera" color="primary">
         <v-expansion-panel-title>
           <v-icon class="mr-2">mdi-camera</v-icon>
           ANPR Camera
         </v-expansion-panel-title>
 
         <v-expansion-panel-text>
-          <CameraMain
-            :site="siteId"
-            :read-only="!canManageSiteSettings"
-            :guard-posts="siteData?.metadata?.guardPosts"
-          />
+          <CameraMain :site="siteId" :read-only="!canManageSiteSettings"
+            :guard-posts="siteData?.metadata?.guardPosts" />
         </v-expansion-panel-text>
       </v-expansion-panel>
 
       <!-- CCTV CAMERA -->
-      <v-expansion-panel color="primary">
+      <v-expansion-panel v-if="showCctvCamera" color="primary">
         <v-expansion-panel-title>
           <v-icon class="mr-2">mdi-cctv</v-icon>
           CCTV Camera
         </v-expansion-panel-title>
 
         <v-expansion-panel-text>
-          <CameraMain
-            :site="siteId"
-            type="ip"
-            :read-only="!canManageSiteSettings"
-          />
+          <CameraMain :site="siteId" type="ip" :read-only="!canManageSiteSettings" />
         </v-expansion-panel-text>
       </v-expansion-panel>
 
-      <v-expansion-panel color="primary">
+      <v-expansion-panel v-if="showWorkOrderSettings" color="primary" class="">
         <v-expansion-panel-title>
           <v-icon class="mr-2">mdi-format-list-numbered</v-icon>
           Work Order Settings
         </v-expansion-panel-title>
 
         <v-expansion-panel-text>
-          <v-text-field
-            v-model="prefix"
-            label="Prefix"
-            :disabled="isLoading || !canManageSiteSettings"
-            @input="handleInput"
-          />
-
-          <v-select
-            v-model="noOfDigits"
-            :items="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
-            label="No. of Digits"
-            :disabled="isLoading || !canManageSiteSettings"
-          />
+          <v-text-field v-model="prefix" label="Prefix" :disabled="isLoading || !canManageSiteSettings"
+            @input="handleInput" />
+
+          <v-select v-model="noOfDigits" :items="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]" label="No. of Digits"
+            :disabled="isLoading || !canManageSiteSettings" />
 
           <v-text-field v-model="orderNumberPreview" label="Preview" readonly />
 
-          <v-btn
-            v-if="canManageSiteSettings"
-            class="mt-2"
-            :loading="isLoading"
-            @click="save"
-          >
+          <v-btn v-if="canManageSiteSettings" class="mt-2" :loading="isLoading" @click="save">
             Save
           </v-btn>
         </v-expansion-panel-text>
       </v-expansion-panel>
 
-      <v-expansion-panel color="primary">
+      <v-expansion-panel v-if="showDeliveryCompanies" color="primary">
         <v-expansion-panel-title>
           <v-icon class="mr-2">mdi-truck</v-icon>
           Delivery Companies
         </v-expansion-panel-title>
         <v-expansion-panel-text class="">
-          <DeliveryCompany
-            :site="siteId"
-            v-model:initial="deliveryCompanies"
-            @refresh-site="refreshSiteData"
-            @update:companiesValue="handleUpdateCompanies"
-            :read-only="!canManageSiteSettings"
-          />
+          <DeliveryCompany :site="siteId" v-model:initial="deliveryCompanies" @refresh-site="refreshSiteData"
+            @update:companiesValue="handleUpdateCompanies" :read-only="!canManageSiteSettings" />
         </v-expansion-panel-text>
       </v-expansion-panel>
 
-      <v-expansion-panel color="primary">
+      <v-expansion-panel v-if="showResidentVisitors" color="primary">
         <v-expansion-panel-title>
           <v-icon class="mr-2">mdi-car</v-icon>
           Resident Visitors
@@ -190,6 +141,8 @@
           <OvernightParkingAvailability :site="siteId" />
         </v-expansion-panel-text>
       </v-expansion-panel>
+
+      <slot name="panels" :can-manage="canManageSiteSettings" :site-id="siteId" />
     </v-expansion-panels>
 
     <Snackbar v-model="toast.show" :text="toast.message" :color="toast.color" />
@@ -197,14 +150,25 @@
 </template>
 
 <script setup lang="ts">
+import useFile from '../composables/useFile';
+import useSiteSettings from '../composables/useSiteSettings';
+import useUtils from '../composables/useUtils';
+import useWorkOrder from '../composables/useWorkOrder';
+
 const props = defineProps({
   siteId: { type: String, required: true },
   canManageSiteSettings: { type: Boolean, default: false },
+  showAnprCamera: { type: Boolean, default: false },
+  showCctvCamera: { type: Boolean, default: false },
+  showWorkOrderSettings: { type: Boolean, default: false },
+  showDeliveryCompanies: { type: Boolean, default: false },
+  showResidentVisitors: { type: Boolean, default: false },
 });
 
-const openPanels = ref([0]); // default open first
 
-const { getSiteById, updateSitebyId } = useSiteSettings();
+const openPanels = ref([]); // default open first
+
+const { getSiteById, updateSitebyId, updateSiteInformation } = useSiteSettings();
 const { requiredRule } = useUtils();
 const { getFileUrl } = useFile();
 const { getWorkOrderSettings, createWorkOrderSettings } = useWorkOrder();
@@ -228,12 +192,30 @@ const prefix = ref("");
 const noOfDigits = ref(1);
 const isLoading = ref(false);
 
+const coverPhoto = ref<string[]>([]);
+const description = ref<string>("");
+const siteDocuments = ref<string[]>([]);
+const siteDocumentsNames = ref<Record<string, string>>({});
+const savingSiteInfo = ref<boolean>(false);
+
+
+const coverPhotoUrl = computed(() =>
+  coverPhoto.value.length > 0 ? getFileUrl(coverPhoto.value[0]) : "",
+);
+
 const toast = reactive({
   show: false,
   message: "",
   color: "",
 });
 
+function showSnackbar(text: string, color = "success") {
+  toast.message = text;
+  toast.color = color;
+  toast.show = true;
+}
+
+
 const { data: siteData, refresh: refreshSiteData } = await useLazyAsyncData(
   `site-${props.siteId}`,
   () => getSiteById(props.siteId)
@@ -242,24 +224,35 @@ const { data: siteData, refresh: refreshSiteData } = await useLazyAsyncData(
 watch(
   siteData,
   (val: TSite) => {
-    if (!val) return;
-
-    blocks.value = val.metadata?.block || 0;
-    guardPosts.value = val.metadata?.guardPosts || 0;
-    gracePeriod.value = val.metadata?.gracePeriod || 0;
-
-    existingBlockNumber.value = blocks.value;
-    existingGuardPostNumber.value = guardPosts.value;
-    existingGracePeriodNumber.value = gracePeriod.value;
-    deliveryCompanies.value = Array.isArray(val.deliveryCompanyList)
-      ? [...val.deliveryCompanyList]
-      : [];
-
-    uploadedSiteLogo.value = val.metadata?.incidentLogo || "";
+    const siteDataValue = val as any;
+    if (siteDataValue) {
+      blocks.value = siteDataValue.metadata?.block || 0;
+      existingBlockNumber.value = blocks.value;
+
+      guardPosts.value = siteDataValue.metadata?.guardPosts || 0;
+      existingGuardPostNumber.value = guardPosts.value;
+      deliveryCompanies.value = Array.isArray(
+        siteDataValue?.deliveryCompanyList,
+      )
+        ? [...siteDataValue.deliveryCompanyList]
+        : [];
+
+      const info = siteDataValue.siteInformation;
+      if (info) {
+        coverPhoto.value = info.bgImage ? [info.bgImage] : [];
+        description.value = info.description ?? "";
+        const docs: { id: string; name: string }[] = info.docs ?? [];
+        siteDocuments.value = docs.map((d) => d.id);
+        docs.forEach((d) => {
+          siteDocumentsNames.value[d.id] = d.name;
+        });
+      }
+    }
   },
   { immediate: true }
 );
 
+
 async function handleSaveGracePeriod() {
   gracePeriodLoading.value = true;
   try {
@@ -276,6 +269,29 @@ async function handleSaveGracePeriod() {
   }
 }
 
+async function saveSiteInfo() {
+  savingSiteInfo.value = true;
+  try {
+    await updateSiteInformation(props.siteId, {
+      bgImage: coverPhoto.value[0] ?? "",
+      description: description.value,
+      docs: siteDocuments.value.map((id) => ({
+        id,
+        name: siteDocumentsNames.value[id] ?? "",
+      })),
+    });
+    showSnackbar("Site information updated successfully.");
+  } catch (err: any) {
+    const msg =
+      err?.response?._data?.message ??
+      err?.message ??
+      "Failed to update site information.";
+    showSnackbar(msg, "error");
+  } finally {
+    savingSiteInfo.value = false;
+  }
+}
+
 async function handleLogo(action: string) {
   try {
     await updateSitebyId(props.siteId, {
@@ -303,8 +319,8 @@ const { data: workOrderSetting } = await useLazyAsyncData(
 
 watchEffect(() => {
   if (workOrderSetting.value) {
-    prefix.value = workOrderSetting.value.prefix;
-    noOfDigits.value = workOrderSetting.value.noOfDigits;
+    prefix.value = workOrderSetting.value?.prefix;
+    noOfDigits.value = workOrderSetting.value?.noOfDigits;
   }
 });