@7365admin1/layer-common 1.11.51 → 1.11.53

package/components/OnlineFormRenderPreview.vue

@@ -0,0 +1,107 @@
+<template>
+  <v-dialog
+    :model-value="modelValue"
+    @update:model-value="$emit('update:modelValue', $event)"
+    width="560"
+    persistent
+  >
+    <v-card max-height="85vh" class="d-flex flex-column">
+      <v-toolbar color="grey-darken-3" class="flex-grow-0">
+        <v-toolbar-title class="text-subtitle-1 font-weight-bold text-white text-uppercase">
+          {{ form?.formType }}
+        </v-toolbar-title>
+      </v-toolbar>
+
+      <v-card-subtitle class="px-6 pt-3 pb-0 text-caption text-medium-emphasis flex-grow-0">
+        Form preview — fields are read-only
+      </v-card-subtitle>
+
+      <v-card-text class="px-6 py-4 flex-grow-1" style="overflow-y: auto">
+        <template v-for="(input, index) in form?.inputs" :key="index">
+          <v-text-field
+            v-if="input.dataType === 'Text Input'"
+            :label="input.label"
+            density="comfortable"
+            variant="outlined"
+            class="mb-1"
+            :hint="input.required ? 'Required' : ''"
+            persistent-hint
+            readonly
+          />
+          <v-textarea
+            v-else-if="input.dataType === 'Text Area'"
+            :label="input.label"
+            density="comfortable"
+            variant="outlined"
+            rows="3"
+            class="mb-1"
+            :hint="input.required ? 'Required' : ''"
+            persistent-hint
+            readonly
+          />
+          <v-text-field
+            v-else-if="input.dataType === 'Date Input'"
+            :label="input.label"
+            type="date"
+            density="comfortable"
+            variant="outlined"
+            class="mb-1"
+            :hint="input.required ? 'Required' : ''"
+            persistent-hint
+            readonly
+          />
+          <v-select
+            v-else-if="input.dataType === 'Select'"
+            :label="input.label"
+            :items="input.options || []"
+            density="comfortable"
+            variant="outlined"
+            class="mb-1"
+            :hint="input.required ? 'Required' : ''"
+            persistent-hint
+            readonly
+          />
+          <v-checkbox
+            v-else-if="input.dataType === 'Checkbox'"
+            :label="input.label"
+            density="comfortable"
+            class="mb-1"
+            readonly
+          />
+        </template>
+      </v-card-text>
+
+      <v-toolbar density="compact" class="flex-grow-0">
+        <v-row no-gutters>
+          <v-col cols="12">
+            <v-btn
+              tile
+              block
+              variant="flat"
+              color="black"
+              class="text-none"
+              height="48"
+              @click="$emit('update:modelValue', false)"
+            >
+              Close Preview
+            </v-btn>
+          </v-col>
+        </v-row>
+      </v-toolbar>
+    </v-card>
+  </v-dialog>
+</template>
+<script setup lang="ts">
+defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  form: {
+    type: Object as PropType<TOnlineForm | null>,
+    default: null,
+  },
+});
+
+defineEmits(["update:modelValue"]);
+</script>

package/components/OnlineFormsConfiguration.vue

@@ -59,6 +59,9 @@
         >
           <template v-slot:item.createdAt="{ item }">
             {{ formatDateDDMMYYYYLocal(item.createdAt) }}
+          </template>
+          <template v-slot:item.status="{ item }">
+            {{ item.status ? item.status.charAt(0).toUpperCase() + item.status.slice(1) : "N/A" }}
           </template></v-data-table
         >
       </v-card></v-col
@@ -89,12 +92,12 @@
         <v-card-text style="max-height: 100vh; overflow-y: auto" class="pb-0">
           <v-row no-gutters class="mb-4">
             <v-col cols="12">
-              <strong>Name:</strong> {{ selectedOnlineForm?.name ?? "N/A" }}
+              <strong>Name:</strong> {{ selectedOnlineForm?.formType ?? "N/A" }}
             </v-col>
-            <v-col cols="12">
+            <v-col v-if="selectedOnlineForm?.attachment" cols="12">
               <strong>Document: </strong>
               <NuxtLink
-                :to="getFileUrl(selectedOnlineForm?.attachment ?? '')"
+                :to="getFileUrl(selectedOnlineForm.attachment)"
                 external
                 target="_blank"
               >
@@ -102,7 +105,7 @@
               </NuxtLink>
             </v-col>
             <v-col cols="12">
-              <strong>Status:</strong> {{ selectedOnlineForm?.status ?? "N/A" }}
+              <strong>Status:</strong> {{ selectedOnlineForm?.status ? selectedOnlineForm.status.charAt(0).toUpperCase() + selectedOnlineForm.status.slice(1) : "N/A" }}
             </v-col>
             <v-col cols="12">
               <strong>Inputs:</strong>
@@ -158,12 +161,18 @@
                   </v-btn>
                 </template>
                 <v-list class="pa-0">
+                  <v-list-item @click="previewDialog = false; formRenderPreviewDialog = true">
+                    <v-list-item-title class="text-subtitle-2">
+                      Preview
+                    </v-list-item-title>
+                  </v-list-item>
+
                   <v-list-item
                     v-if="canUpdateOnlineFormConfiguration"
                     @click="openEditDialog()"
                   >
                     <v-list-item-title class="text-subtitle-2">
-                      Edit Online Form
+                      Edit
                     </v-list-item-title>
                   </v-list-item>
 
@@ -173,7 +182,7 @@
                     @click="openDeleteDialog()"
                   >
                     <v-list-item-title class="text-subtitle-2">
-                      Delete Online Form
+                      Delete
                     </v-list-item-title>
                   </v-list-item>
                 </v-list>
@@ -184,6 +193,12 @@
       </v-card>
     </v-dialog>
 
+    <!-- Form Render Preview Dialog -->
+    <OnlineFormRenderPreview
+      v-model="formRenderPreviewDialog"
+      :form="selectedOnlineForm"
+    />
+
     <!-- Delete Dialog -->
     <v-dialog
       v-model="confirmDialog"
@@ -247,6 +262,7 @@
 </template>
 <script setup lang="ts">
 import OnlineFormConfigurationForm from "./OnlineFormConfigurationForm.vue";
+import OnlineFormRenderPreview from "./OnlineFormRenderPreview.vue";
 
 definePageMeta({
   middleware: ["01-auth", "02-org"],
@@ -258,7 +274,7 @@ const props = defineProps({
     default: () => [
       {
         title: "Name",
-        value: "name",
+        value: "formType",
       },
       { title: "Date Created", value: "createdAt" },
       { title: "Status", value: "status" },
@@ -291,10 +307,7 @@ const props = defineProps({
 });
 
 const { headerSearch } = useLocal();
-const {
-  getAllBySiteId: _getOnlineFormConfigurationsBySiteId,
-  deleteOnlineFormById: _deleteById,
-} = useOnlineForm();
+const { getAll: _getAll, deleteById: _deleteById } = useOnlineFormConfiguration();
 const { getFileUrl } = useFile();
 
 const page = ref(1);
@@ -318,9 +331,11 @@ const {
   refresh: getOnlineFormConfigurations,
   status: getAllReqStatus,
 } = useLazyAsyncData("get-all-online-form-configuration", () =>
-  _getOnlineFormConfigurationsBySiteId(siteId, {
+  _getAll({
     page: page.value,
     search: headerSearch.value,
+    org: orgId,
+    site: siteId,
   })
 );
 
@@ -337,6 +352,7 @@ watchEffect(() => {
 const createDialog = ref(false);
 const editDialog = ref(false);
 const previewDialog = ref(false);
+const formRenderPreviewDialog = ref(false);
 const selectedOnlineForm = ref<TOnlineForm>({
   _id: "",
   name: "",
@@ -356,20 +372,22 @@ const deleteLoading = ref(false);
 const confirmDialog = ref(false);
 const selectedOnlineFormId = ref<string | null>(null);
 
-watchEffect(() => {
-  // initial data
-  items.value = [
-    {
-      _id: "1",
-      name: "Bicycle Application Form",
-      createdAt: "2025/12/30",
-      status: "active",
-    },
-  ];
-});
+function parseFieldsToInputs(fields: Record<string, string>): any[] {
+  return Object.keys(fields)
+    .filter((key) => key !== "attachment")
+    .sort((a, b) => Number(a) - Number(b))
+    .map((key) => {
+      try { return JSON.parse(fields[key]); } catch { return fields[key]; }
+    });
+}
 
 function tableRowClickHandler(_: any, data: any) {
-  selectedOnlineForm.value = data.item as TOnlineForm;
+  const item = data.item;
+  selectedOnlineForm.value = {
+    ...item,
+    inputs: parseFieldsToInputs(item.fields ?? {}),
+    attachment: item.fields?.["attachment"] ?? "",
+  } as TOnlineForm;
   previewDialog.value = true;
 }
 
@@ -418,10 +436,12 @@ async function handleDeleteOnlineFormConfiguration() {
     selectedOnlineFormId.value = null;
     confirmDialog.value = false;
     previewDialog.value = false;
+    showMessage("Online form configuration deleted successfully!", "success");
   } catch (error: any) {
-    message.value =
-      error?.response?._data?.message ||
-      "Failed to delete online form configuration";
+    showMessage(
+      error?.response?._data?.message || "Failed to delete online form configuration",
+      "error"
+    );
   } finally {
     deleteLoading.value = false;
   }

package/components/SiteSettings.vue

@@ -205,51 +205,6 @@
         </v-expansion-panel-text>
       </v-expansion-panel>
 
-      <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-autocomplete
-            v-if="!props.service"
-            v-model="selectedServiceProvider"
-            :items="serviceProviders"
-            :loading="isFetchingServiceProviders"
-            :disabled="!canManageSiteSettings"
-            label="Select Service Provider"
-            @click="fetchServiceProvidersBySiteService"
-            class="mt-4"
-          />
-
-          <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"
-          >
-            Save
-          </v-btn>
-        </v-expansion-panel-text>
-      </v-expansion-panel>
-
       <v-expansion-panel v-if="showDeliveryCompanies" color="primary">
         <v-expansion-panel-title>
           <v-icon class="mr-2">mdi-truck</v-icon>
@@ -291,7 +246,6 @@
 import useFile from "../composables/useFile";
 import useSiteSettings from "../composables/useSiteSettings";
 import useUtils from "../composables/useUtils";
-import useWorkOrder from "../composables/useWorkOrder";
 import useANPRSettings from "../composables/useANPRSettings";
 
 const props = defineProps({
@@ -300,10 +254,8 @@ const props = defineProps({
   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 },
-  service: { type: String, default: false },
 });
 
 const openPanels = ref([]); // default open first
@@ -312,7 +264,6 @@ const { getSiteById, updateSitebyId, updateSiteInformation } =
   useSiteSettings();
 const { requiredRule } = useUtils();
 const { getFileUrl } = useFile();
-const { getWorkOrderSettings, createWorkOrderSettings } = useWorkOrder();
 
 const blocks = ref(0);
 const guardPosts = ref(0);
@@ -329,10 +280,6 @@ const deliveryCompanies = ref<string[]>([]);
 const siteLogo = ref<any[]>([]);
 const uploadedSiteLogo = ref("");
 
-const prefix = ref("");
-const noOfDigits = ref(1);
-const isLoading = ref(false);
-
 const coverPhoto = ref<string[]>([]);
 const description = ref<string>("");
 const siteDocuments = ref<string[]>([]);
@@ -450,88 +397,12 @@ const onUploadedLogoPreview = () => {
   return getFileUrl(uploadedSiteLogo.value);
 };
 
-const { data: workOrderSetting } = await useLazyAsyncData(
-  `work-${props.siteId}`,
-  () => getWorkOrderSettings({ site: props.siteId, service: "Security" })
-);
-
-watchEffect(() => {
-  if (workOrderSetting.value) {
-    selectedServiceProvider.value = workOrderSetting.value?.service;
-    prefix.value = workOrderSetting.value?.prefix;
-    noOfDigits.value = workOrderSetting.value?.noOfDigits;
-  }
-});
-
-function handleInput(e: any) {
-  prefix.value = e.target.value.replace(/[^A-Z]/g, "").toUpperCase();
-}
-
 function handleUpdateCompanies(value: string[]) {
   deliveryCompanies.value = value;
 }
 
-const orderNumberPreview = computed(() => {
-  return `${prefix.value}${"0".repeat(noOfDigits.value - 1)}1`;
-});
-
 const route = useRoute();
 
-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;
-}
-
-const { getAll: getAllServiceProvider } = useServiceProvider();
-
-const serviceProviders = ref<TServiceProvider[]>([]);
-const isFetchingServiceProviders = ref(false);
-let selectedServiceProvider = ref<string>("");
-let providersArray = ref<string[]>([]);
-
-async function fetchServiceProvidersBySiteService() {
-  isFetchingServiceProviders.value = true;
-
-  try {
-    const response = await getAllServiceProvider({
-      siteId: route.params.site as string,
-      limit: 1000,
-    });
-
-    providersArray.value = [];
-    serviceProviders.value = response.items.map((i: any) => {
-      providersArray.value.push(i);
-      return i.name;
-    });
-  } catch (error: any) {
-    return showMessage(errorConverter(error), "error");
-  } finally {
-    isFetchingServiceProviders.value = false;
-  }
-}
-
-async function save() {
-  try {
-    isLoading.value = true;
-    await createWorkOrderSettings({
-      site: props.siteId,
-      service: props.service || selectedServiceProvider.value,
-      prefix: prefix.value,
-      noOfDigits: noOfDigits.value,
-    });
-    show("Saved successfully", "success");
-  } catch {
-    show("Error saving", "error");
-  } finally {
-    isLoading.value = false;
-  }
-}
-
 function show(message: string, color: string) {
   toast.show = true;
   toast.message = message;

package/composables/useCustomerSite.ts

@@ -56,12 +56,44 @@ export default function useCustomerSite() {
       }
     )
   }
+  async function getById(id: string) {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/customer-sites/${id}`,
+      {
+        method: "GET",
+      }
+    );
+  }
+  async function updateById(
+  id: string,
+  payload: Partial<TCustomerSite>,
+) {
+  return useNuxtApp().$api<Record<string, any>>(
+    `/api/customer-sites/${id}`,
+    {
+      method: "PUT",
+      body: payload,
+    }
+  );
+}
+
+async function deleteById(id: string) {
+  return useNuxtApp().$api<Record<string, any>>(
+    `/api/customer-sites/${id}`,
+    {
+      method: "DELETE",
+    }
+  );
+}
 
   return {
     add,
     getAll,
     addViaInvite,
     getBySiteAsServiceProvider,
-    getCustomerSites
+    getCustomerSites,
+    getById,
+    updateById,
+    deleteById,
   };
 }

package/composables/useFacility.ts

@@ -13,6 +13,7 @@ export default function usetFacility() {
       endTime: string;
       breakTimes: { startTime: string; endTime: string }[];
       peakTimes: { startTime: string; endTime: string }[];
+      timeSlotsManual: { startTime: string; endTime: string }[] | null;
     };
     tuesday: {
       isEnabled: boolean;
@@ -20,6 +21,7 @@ export default function usetFacility() {
       endTime: string;
       breakTimes: { startTime: string; endTime: string }[];
       peakTimes: { startTime: string; endTime: string }[];
+      timeSlotsManual: { startTime: string; endTime: string }[] | null;
     };
     wednesday: {
       isEnabled: boolean;
@@ -27,6 +29,7 @@ export default function usetFacility() {
       endTime: string;
       breakTimes: { startTime: string; endTime: string }[];
       peakTimes: { startTime: string; endTime: string }[];
+      timeSlotsManual: { startTime: string; endTime: string }[] | null;
     };
     thursday: {
       isEnabled: boolean;
@@ -34,6 +37,7 @@ export default function usetFacility() {
       endTime: string;
       breakTimes: { startTime: string; endTime: string }[];
       peakTimes: { startTime: string; endTime: string }[];
+      timeSlotsManual: { startTime: string; endTime: string }[] | null;
     };
     friday: {
       isEnabled: boolean;
@@ -41,6 +45,7 @@ export default function usetFacility() {
       endTime: string;
       breakTimes: { startTime: string; endTime: string }[];
       peakTimes: { startTime: string; endTime: string }[];
+      timeSlotsManual: { startTime: string; endTime: string }[] | null;
     };
     saturday: {
       isEnabled: boolean;
@@ -48,6 +53,7 @@ export default function usetFacility() {
       endTime: string;
       breakTimes: { startTime: string; endTime: string }[];
       peakTimes: { startTime: string; endTime: string }[];
+      timeSlotsManual: { startTime: string; endTime: string }[] | null;
     };
     sunday: {
       isEnabled: boolean;
@@ -55,6 +61,7 @@ export default function usetFacility() {
       endTime: string;
       breakTimes: { startTime: string; endTime: string }[];
       peakTimes: { startTime: string; endTime: string }[];
+      timeSlotsManual: { startTime: string; endTime: string }[] | null;
     };
     description: string;
     about: string;
@@ -88,6 +95,12 @@ export default function usetFacility() {
       count: number;
       permanentRemarks: string;
     }[] = [];
+    isBookingUnitLimitEnabled: boolean;
+    bookingUnitLimit: number | null;
+    isMaxNumberGuestLimitEnabled: boolean;
+    maxNumberGuestLimit: number | null;
+    isCancelAllowedLimitEnabled: boolean;
+    daysAllowedCancel: number | null;
 
     constructor(
       {
@@ -102,6 +115,7 @@ export default function usetFacility() {
           endTime: "",
           breakTimes: [],
           peakTimes: [],
+          timeSlotsManual: null,
         },
         tuesday = {
           isEnabled: false,
@@ -109,6 +123,7 @@ export default function usetFacility() {
           endTime: "",
           breakTimes: [],
           peakTimes: [],
+          timeSlotsManual: null,
         },
         wednesday = {
           isEnabled: false,
@@ -116,6 +131,7 @@ export default function usetFacility() {
           endTime: "",
           breakTimes: [],
           peakTimes: [],
+          timeSlotsManual: null,
         },
         thursday = {
           isEnabled: false,
@@ -123,6 +139,7 @@ export default function usetFacility() {
           endTime: "",
           breakTimes: [],
           peakTimes: [],
+          timeSlotsManual: null,
         },
         friday = {
           isEnabled: false,
@@ -130,6 +147,7 @@ export default function usetFacility() {
           endTime: "",
           breakTimes: [],
           peakTimes: [],
+          timeSlotsManual: null,
         },
         saturday = {
           isEnabled: false,
@@ -137,6 +155,7 @@ export default function usetFacility() {
           endTime: "",
           breakTimes: [],
           peakTimes: [],
+          timeSlotsManual: null,
         },
         sunday = {
           isEnabled: false,
@@ -144,6 +163,7 @@ export default function usetFacility() {
           endTime: "",
           breakTimes: [],
           peakTimes: [],
+          timeSlotsManual: null,
         },
         description = "",
         about = "",
@@ -171,6 +191,12 @@ export default function usetFacility() {
         isBookingPolicyEnabled = false,
         bookingPolicy = "",
         securityCheckList = [],
+        isBookingUnitLimitEnabled = false,
+        bookingUnitLimit = null,
+        isMaxNumberGuestLimitEnabled = false,
+        maxNumberGuestLimit = null,
+        isCancelAllowedLimitEnabled = false,
+        daysAllowedCancel = null,
       } = {} as TFacility
     ) {
       this._id = _id;
@@ -181,24 +207,30 @@ export default function usetFacility() {
       this.monday = monday;
       this.monday.breakTimes = monday?.breakTimes ?? [];
       this.monday.peakTimes = monday?.peakTimes ?? [];
+      this.monday.timeSlotsManual = monday?.timeSlotsManual ?? [];
       this.tuesday = tuesday;
       this.tuesday.breakTimes = tuesday?.breakTimes ?? [];
       this.tuesday.peakTimes = tuesday?.peakTimes ?? [];
       this.wednesday = wednesday;
       this.wednesday.breakTimes = wednesday?.breakTimes ?? [];
       this.wednesday.peakTimes = wednesday?.peakTimes ?? [];
+      this.wednesday.timeSlotsManual = wednesday?.timeSlotsManual ?? null;
       this.thursday = thursday;
       this.thursday.breakTimes = thursday?.breakTimes ?? [];
       this.thursday.peakTimes = thursday?.peakTimes ?? [];
+      this.thursday.timeSlotsManual = thursday?.timeSlotsManual ?? null;
       this.friday = friday;
       this.friday.breakTimes = friday?.breakTimes ?? [];
       this.friday.peakTimes = friday?.peakTimes ?? [];
+      this.friday.timeSlotsManual = friday?.timeSlotsManual ?? null;
       this.saturday = saturday;
       this.saturday.breakTimes = saturday?.breakTimes ?? [];
       this.saturday.peakTimes = saturday?.peakTimes ?? [];
+      this.saturday.timeSlotsManual = saturday?.timeSlotsManual ?? null;
       this.sunday = sunday;
       this.sunday.breakTimes = sunday?.breakTimes ?? [];
       this.sunday.peakTimes = sunday?.peakTimes ?? [];
+      this.sunday.timeSlotsManual = sunday?.timeSlotsManual ?? null;
       this.description = description;
       this.about = about;
       this.maintenanceDatesWithTimes = maintenanceDatesWithTimes ?? [];
@@ -224,6 +256,12 @@ export default function usetFacility() {
       this.isCancellationAutoRefundEnabled = isCancellationAutoRefundEnabled;
       this.bookingPolicy = bookingPolicy;
       this.securityCheckList = securityCheckList ?? [];
+      this.isBookingUnitLimitEnabled = isBookingUnitLimitEnabled || false;
+      this.bookingUnitLimit = bookingUnitLimit ?? null;
+      this.isMaxNumberGuestLimitEnabled = isMaxNumberGuestLimitEnabled || false;
+      this.maxNumberGuestLimit = maxNumberGuestLimit ?? null;
+      this.isCancelAllowedLimitEnabled = isCancelAllowedLimitEnabled || false;
+      this.daysAllowedCancel = daysAllowedCancel ?? null;
       this.isBookingPolicyEnabled = isBookingPolicyEnabled || false;
     }
   }