add calendar page

src/views/appSetting/calendarSetting/Index.vue

@@ -0,0 +1,368 @@
+<template>
+    <!--begin::Toolbar-->
+    <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
+        <!--begin::Toolbar container-->
+        <div
+        id="kt_app_toolbar_container"
+        class="d-flex flex-stack"
+        :class="{
+            'container-fluid': toolbarWidthFluid,
+            'container-xxl': !toolbarWidthFluid,
+        }"
+        style="padding:0px;"
+        >
+        <KTPageTitle />
+        </div>
+        <!--end::Toolbar container-->
+    </div>
+    <!--end::Toolbar-->
+	<!-- begin:: Content -->
+	<div class="kt-content kt-grid__item kt-grid__item--fluid" id="kt_content">
+		<!--Begin::Section-->
+		<div class="row">
+			<div class="kt-portlet kt-portlet--mobile">
+				<el-form
+				  @submit.prevent="submit()"
+				  :model="configData"
+				  :rules="rules"
+				  ref="formRef"
+				>
+				<div class="kt-portlet__body">
+					<div class="form-group row" style="border-top:1px solid #ddd;"></div>
+					<div class="form-group row" style="margin-top:30px;">
+						<h5>Room Calendar Setting</h5>
+					</div>
+					<div class="form-group row">
+						<label class="col-lg-3 col-form-label  kt-font-bolder">Previous days:</label>
+						<div class="col-lg-6">
+							<el-form-item prop="CALENDAR_VIEW_PREVIOUS_DAYS">
+							<div class="input-group bootstrap-touchspin bootstrap-touchspin-injected">
+								<el-input-number :disabled="!enableModify" v-model="configData.CALENDAR_VIEW_PREVIOUS_DAYS" :min="0" :precision="0" />
+							</div>
+							</el-form-item>
+						</div>
+					</div>
+					<div class="form-group row">
+						<label class="col-lg-3 col-form-label  kt-font-bolder">Visible days:</label>
+						<div class="col-lg-6">
+							<el-form-item prop="CALENDAR_VIEW_VISIBLE_DAYS">
+							<div class="input-group bootstrap-touchspin bootstrap-touchspin-injected">
+								<el-input-number :disabled="!enableModify" v-model="configData.CALENDAR_VIEW_VISIBLE_DAYS" :min="0" :precision="0" />
+							</div>
+							</el-form-item>
+						</div>
+					</div>
+					<div class="form-group row">
+						<label class="col-lg-3 col-form-label  kt-font-bolder">Selection Limit:</label>
+						<div class="col-lg-6">
+							<el-form-item prop="MAX_SELECTED_ROOM_TYPES">
+							<div class="input-group bootstrap-touchspin bootstrap-touchspin-injected">
+								<el-input-number :disabled="!enableModify" v-model="configData.MAX_SELECTED_ROOM_TYPES" :min="0" :precision="0" />
+							</div>
+							</el-form-item>
+						</div>
+					</div>
+					<div class="form-group row">
+						<label class="col-lg-3 col-form-label  kt-font-bolder">View yesterday time range:</label>
+						<div class="col-lg-6">
+							<el-form-item>
+							<div class="input-group bootstrap-touchspin bootstrap-touchspin-injected">
+								<el-time-picker :disabled="!enableModify" v-model="calendarTimeRange" is-range format="HH:mm" value-format="HH:mm" start-placeholder="Start time"
+                                    end-placeholder="End time" style="width: 150px"/>
+							</div>
+							</el-form-item>
+						</div>
+					</div>
+				</div>
+				<div class="kt-portlet__foot">
+					<div class="form-group row" style="border-top:1px solid #ddd;margin-top:20px;margin-bottom:12px;"></div>
+					<div class="row">
+						<div class="col-lg-3"></div>
+						<div class="col-lg-6">
+							<!--begin::Button-->
+							<button v-if="enableModify"
+							  :disabled="loading"
+							  :data-kt-indicator="loading ? 'on' : null"
+							  class="btn btn-sm btn-primary me-3"
+							  type="submit"
+							>
+							  <span v-if="!loading" class="indicator-label">
+							   <i class="fa fa-save"></i>&nbsp; Save
+							  </span>
+							  <span v-if="loading" class="indicator-progress">
+							    Please wait...
+							    <span
+							      class="spinner-border spinner-border-sm align-middle ms-2"
+							    ></span>
+							  </span>
+							</button>
+							<!--end::Button-->
+							<button v-if="enableModify" type="button" @click="onResetClickHandle" class="btn btn-sm btn-secondary text-primary"><i class="fa fa-redo text-primary"></i> Reset</button>
+						</div>
+					</div>
+				</div>
+				</el-form>
+			</div>
+		</div>
+		<!--End::Section-->
+	</div>
+	<!-- end:: Content -->
+
+	<div v-loading.fullscreen.lock="pageLoading" element-loading-text="Loading..."></div>
+  </template>
+
+  <script lang="ts">
+	import { defineComponent, onMounted, ref } from "vue";
+	import KTPageTitle from "@/layouts/main-layout/toolbar/PageTitle.vue";
+	import { toolbarWidthFluid } from "@/core/helpers/config";
+	import ApiService from "@/core/services/ApiService";
+	import type { ResponseData } from "@/core/data/AjaxData";
+	import Swal from "sweetalert2";
+	import { ElNotification } from "element-plus";
+	import { useAuthStore } from "@/stores/auth";
+
+	type CalendarConfig = {
+		CALENDAR_VIEW_PREVIOUS_DAYS: number | null;
+		CALENDAR_VIEW_VISIBLE_DAYS: number | null;
+		CALENDAR_VIEW_YESTERDAY_START: string;
+		CALENDAR_VIEW_YESTERDAY_END: string;
+		MAX_SELECTED_ROOM_TYPES:number | null;
+	};
+
+	type AppSettingItem = {
+		keys: keyof CalendarConfig;
+		keyValues: CalendarConfig[keyof CalendarConfig] | "";
+	};
+
+	type AppSettingResponseItem = {
+		keys: string;
+		keyValues: string | number | null;
+	};
+
+  export default defineComponent({
+    name: "calendar-setting",
+    components: {
+        KTPageTitle,
+	},
+    setup() {
+		const defaultConfigData = (): CalendarConfig => ({
+			CALENDAR_VIEW_PREVIOUS_DAYS: null,
+			CALENDAR_VIEW_VISIBLE_DAYS: null,
+			CALENDAR_VIEW_YESTERDAY_START: "00:05",
+			CALENDAR_VIEW_YESTERDAY_END: "05:59",
+			MAX_SELECTED_ROOM_TYPES:2,
+		});
+		const numberConfigAttrs: Array<keyof CalendarConfig> = [
+			"CALENDAR_VIEW_PREVIOUS_DAYS",
+			"CALENDAR_VIEW_VISIBLE_DAYS",
+			"MAX_SELECTED_ROOM_TYPES",
+		];
+		const configAttrs: Array<keyof CalendarConfig> = [
+			...numberConfigAttrs,
+			"CALENDAR_VIEW_YESTERDAY_START",
+			"CALENDAR_VIEW_YESTERDAY_END",
+		];
+		const configData = ref<CalendarConfig>(defaultConfigData());
+		const calendarTimeRange = ref<[string, string] | null>([
+			configData.value.CALENDAR_VIEW_YESTERDAY_START,
+			configData.value.CALENDAR_VIEW_YESTERDAY_END,
+		]);
+		const pageRouterId = "00330";
+		const authStore = useAuthStore();
+		const enableModify = authStore.hasPermission(pageRouterId, "MODIFY");
+		const formRef = ref<any>(null);
+		const pageLoading = ref<boolean>(true);
+		const loading = ref<boolean>(false);
+		const rules = ref({
+		  CALENDAR_VIEW_PREVIOUS_DAYS: [
+		    {
+		      required: true,
+		      message: "Previous days is required",
+		      trigger: "change",
+		    },
+		  ],
+		  CALENDAR_VIEW_VISIBLE_DAYS: [
+		    {
+		      required: true,
+		      message: "Visible days is required",
+		      trigger: "change",
+		    },
+		  ],
+		});
+
+        onMounted(() => {
+			loadAppSetting();
+        });
+
+		const resetForm=()=>{
+			if(formRef.value){
+				formRef.value.resetFields();
+			}
+		};
+		const loadAppSetting=()=>{
+			resetForm();
+			pageLoading.value = true;
+			let reqParas = {};
+			ApiService.processPostRequest("/app/appsetting/get", reqParas,
+			(resData:ResponseData)=>{
+				pageLoading.value=false;
+				parseConfigData(resData.data);
+				calendarTimeRange.value = [
+					configData.value.CALENDAR_VIEW_YESTERDAY_START,
+					configData.value.CALENDAR_VIEW_YESTERDAY_END,
+				];
+			},
+			(resData:ResponseData)=>{
+				pageLoading.value=false;
+				Swal.fire({
+				  text: "Read App Setting error!["+resData.message+"]",
+				  icon: "error",
+				  buttonsStyling: false,
+				  confirmButtonText: "Ok, got it!",
+				  heightAuto: false,
+				  customClass: {
+				    confirmButton: "btn btn-primary",
+				  },
+				});
+			},
+			()=>{
+				pageLoading.value=false;
+			});
+		};
+		const saveAppSetting=(appSettingObj:Array<AppSettingItem>)=>{
+			if(appSettingObj && appSettingObj.length>0){
+				let postUrl = "/app/appsetting/save_calendar_setting";
+				ApiService.processPostRequest(postUrl, appSettingObj,
+				()=>{
+					loading.value = false;
+					ElNotification({ position: "bottom-right",
+						title: "Success",
+						message: "App Setting has been saved!",
+						type: "success",
+					});
+				},
+				(resData:ResponseData)=>{
+					loading.value = false;
+					ElNotification({ position: "bottom-right",
+						title: "Fail",
+						message: "Save data failed!["+resData.message+"]",
+						type: "error",
+					});
+				},
+				(error)=>{
+					loading.value = false;
+					Swal.fire({
+					  text: "Update App Setting error!["+error+"]",
+					  icon: "error",
+					  buttonsStyling: false,
+					  confirmButtonText: "Ok, got it!",
+					  heightAuto: false,
+					  customClass: {
+					    confirmButton: "btn btn-primary",
+					  },
+					});
+				});
+			}else{
+				Swal.fire({
+				  text: "Empty Setting info",
+				  icon: "error",
+				  buttonsStyling: false,
+				  confirmButtonText: "Ok, got it!",
+				  heightAuto: false,
+				  customClass: {
+				    confirmButton: "btn btn-primary",
+				  },
+				});
+			}
+		};
+		const buildSettingList=()=>{
+			const timeRange = calendarTimeRange.value || ["", ""];
+			configData.value.CALENDAR_VIEW_YESTERDAY_START = timeRange[0];
+			configData.value.CALENDAR_VIEW_YESTERDAY_END = timeRange[1];
+
+			return configAttrs.map((attrName) => {
+				return {
+					keys: attrName,
+					keyValues: configData.value[attrName] != null ? configData.value[attrName] : "",
+				} as AppSettingItem;
+			});
+		};
+		const parseConfigData=(pData:Array<AppSettingResponseItem>)=>{
+			const settingMap = new Map<string, string | number | null>();
+			if(pData){
+				for(let i=0;i<pData.length;i++){
+					if(pData[i] && pData[i].keys){
+						settingMap.set(pData[i].keys, pData[i].keyValues);
+					}
+				}
+			}
+
+			let cfgData = defaultConfigData();
+			for(let i=0;i<configAttrs.length;i++){
+				let attrName = configAttrs[i];
+				let cfgVal = settingMap.get(attrName);
+				if(cfgVal==null || cfgVal===""){
+					continue;
+				}
+				if(numberConfigAttrs.includes(attrName)){
+					cfgData[attrName]=parseInt(String(cfgVal), 10);
+				}else{
+					cfgData[attrName]=String(cfgVal);
+				}
+			}
+			configData.value = cfgData;
+		};
+		const submit = () => {
+		  if (!formRef.value) {
+		    return;
+		  }
+		  if(!calendarTimeRange.value || calendarTimeRange.value.length!==2 || !calendarTimeRange.value[0] || !calendarTimeRange.value[1]){
+			ElNotification({ position: "bottom-right",
+				title: "Fail",
+				message: "View yesterday time range is required",
+				type: "error",
+			});
+			return;
+		  }
+		  formRef.value.validate((valid: boolean) => {
+		    if (valid) {
+				loading.value = true;
+				let settingObj = buildSettingList();
+				saveAppSetting(settingObj);
+		    } else {
+				return false;
+		    }
+		  });
+		};
+		const onResetClickHandle = ()=>{
+			loadAppSetting();
+		};
+        return {
+            toolbarWidthFluid,
+			pageLoading,
+			loading,
+			configData,
+			formRef,
+			submit,
+			rules,
+			onResetClickHandle,
+			enableModify,
+			calendarTimeRange,
+        };
+    },
+  });
+  </script>
+
+  <style>
+  .custom-loading {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: rgba(255, 255, 255, 0.5);
+  }
+  </style>

src/views/appSetting/property/Index.vue

@@ -173,7 +173,10 @@
 					propertyEditorRef.value.openDelete(pData.id,actionCallback);
 				}
 			}
-		};		
+		};
+		const formatNullableValue = (pData)=>{
+			return pData.value==null?'':String(pData.value);
+		};	
         // Each Column Definition results in one Column.
         const columnDefs = [
             { headerName:"Property Name" , field: "name", sortable: true,unSortIcon: true, checkboxSelection:false, minWidth:100,  },
@@ -182,6 +185,18 @@
 			{ headerName:"Property Code" , field: "code", sortable: true,unSortIcon: true,  minWidth:140 , resizable: true, },
 			{ headerName:"Category" , field: "category", sortable: true,unSortIcon: true,  minWidth:120, resizable: true, },
 			{ headerName:"Sort Order" , field: "sortOrder", sortable: true,unSortIcon: true,  minWidth:140 , resizable: true, },
+			{ headerName:"Calendar Name" , field: "calendarName", sortable: true,unSortIcon: true,  minWidth:140 , resizable: true, valueFormatter:formatNullableValue, },
+			{ headerName:"Calendar Order" , field: "calendarOrder", sortable: true,unSortIcon: true,  minWidth:140 , resizable: true, valueFormatter:formatNullableValue, },
+			{ headerName:"Show Calendar" , field: "showCalendar", sortable: true,unSortIcon: true,  minWidth:140 , resizable: true,
+				cellRenderer:params=>{
+					if(params.value===1 || params.value==='1'){
+						return 'Yes';
+					}else if(params.value===0 || params.value==='0'){
+						return 'No';
+					}
+					return '';
+				}
+			},
             // { headerName:"Last Update At" , field: "updatedAt", minWidth:160 , resizable: true, 
             //     cellRenderer:params=>{ 
             //         return params.value?moment(params.value).format("YYYY-MM-DD HH:mm:ss"):'';	

src/views/appSetting/property/Modal.vue

@@ -166,6 +166,44 @@
 								</el-form-item>
 								<!--end::Input-->
 							</div>
+							<div class="col-md-6 fv-row">
+								<!--begin::Label-->
+								<label class="fs-6 fw-semobold mb-2">Calendar Name</label>
+								<!--end::Label-->
+								<!--begin::Input-->
+								<el-form-item prop="calendarName">
+									<el-input
+									v-model="propertyData.calendarName"
+									type="text"
+									placeholder=""
+									:readonly="!enableEdit"
+									/>
+								</el-form-item>
+								<!--end::Input-->
+							</div>
+							<div class="col-md-6 fv-row">
+								<!--begin::Label-->
+								<label class="fs-6 fw-semobold mb-2">Calendar Order</label>
+								<!--end::Label-->
+								<!--begin::Input-->
+								<el-form-item prop="calendarOrder">
+									<el-input-number v-model="propertyData.calendarOrder" :min="0" :disabled="!enableEdit" />
+								</el-form-item>
+								<!--end::Input-->
+							</div>
+							<div class="col-md-6 fv-row">
+								<!--begin::Label-->
+								<label class="fs-6 fw-semobold mb-2">Show Calendar</label>
+								<!--end::Label-->
+								<!--begin::Input-->
+								<el-form-item prop="showCalendar">
+									<el-select v-model="propertyData.showCalendar" :disabled="!enableEdit" :teleported="false">
+										<el-option label="Yes" :value="1"></el-option>
+										<el-option label="No" :value="0"></el-option>
+									</el-select>
+								</el-form-item>
+								<!--end::Input-->
+							</div>
 							<div class="row g-9 mb-6" v-if="disabled">
 								<div class="col-md-6 fv-row">
 									<!--begin::Label-->

src/views/appSetting/room/Index.vue

@@ -269,6 +269,9 @@ export default defineComponent({
 			}
 			return res;
 		};
+		const formatNullableValue = (pData) => {
+			return pData.value == null ? "" : String(pData.value);
+		};
 		// Each Column Definition results in one Column.
 		const columnDefs = [
 			{
@@ -311,6 +314,49 @@ export default defineComponent({
 				minWidth: 150,
 				resizable: true,
 			},
+			{
+				headerName: "Calendar Name",
+				field: "calendarName",
+				sortable: true,
+				unSortIcon: true,
+				minWidth: 150,
+				resizable: true,
+				valueFormatter: formatNullableValue,
+			},
+			{
+				headerName: "Calendar Order",
+				field: "calendarOrder",
+				sortable: true,
+				unSortIcon: true,
+				minWidth: 150,
+				resizable: true,
+				valueFormatter: formatNullableValue,
+			},
+			{
+				headerName: "Show Calendar",
+				field: "showCalendar",
+				sortable: true,
+				unSortIcon: true,
+				minWidth: 150,
+				resizable: true,
+				cellRenderer: (params) => {
+					if (params.value === 1 || params.value === "1") {
+						return "Yes";
+					} else if (params.value === 0 || params.value === "0") {
+						return "No";
+					}
+					return "";
+				},
+			},
+			{
+				headerName: "Default Show Calendar",
+				field: "defaultShowCalendar",
+				sortable: true,
+				unSortIcon: true,
+				minWidth: 190,
+				resizable: true,
+				cellRenderer: getYesOrNoStatus,
+			},
 			{
 				headerName: "Room Type for Create Booking",
 				field: "forCreateBooking",

src/views/appSetting/room/Modal.vue

@@ -151,6 +151,52 @@
 								</el-form-item>
 								<!--end::Input-->
 							</div>
+							<div class="fv-row mb-7">
+								<!--begin::Label-->
+								<label class="fs-6 fw-semobold mb-2">Calendar Name</label>
+								<!--end::Label-->
+								<!--begin::Input-->
+								<el-form-item prop="calendarName">
+									<el-input v-model="data.calendarName" type="text" placeholder="" :readonly="!enableEdit" />
+								</el-form-item>
+								<!--end::Input-->
+							</div>
+							<div class="fv-row mb-7">
+								<!--begin::Label-->
+								<label class="fs-6 fw-semobold mb-2">Calendar Order</label>
+								<!--end::Label-->
+								<!--begin::Input-->
+								<el-form-item prop="calendarOrder">
+									<el-input-number v-model="data.calendarOrder" :min="0" :disabled="!enableEdit" />
+								</el-form-item>
+								<!--end::Input-->
+							</div>
+							<div class="fv-row mb-7">
+								<!--begin::Label-->
+								<label class="fs-6 fw-semobold mb-2">Show Calendar</label>
+								<!--end::Label-->
+								<!--begin::Input-->
+								<el-form-item prop="showCalendar">
+									<el-select v-model="data.showCalendar" placeholder="Select" :disabled="!enableEdit" :teleported="false">
+										<el-option :key="1" label="Yes" :value="1" />
+										<el-option :key="0" label="No" :value="0" />
+									</el-select>
+								</el-form-item>
+								<!--end::Input-->
+							</div>
+							<div class="fv-row mb-7">
+								<!--begin::Label-->
+								<label class="fs-6 fw-semobold mb-2">Default Show Calendar</label>
+								<!--end::Label-->
+								<!--begin::Input-->
+								<el-form-item prop="defaultShowCalendar">
+									<el-select v-model="data.defaultShowCalendar" placeholder="Select" :disabled="!enableEdit" :teleported="false">
+										<el-option :key="1" label="Yes" :value="1" />
+										<el-option :key="0" label="No" :value="0" />
+									</el-select>
+								</el-form-item>
+								<!--end::Input-->
+							</div>
 							<div class="fv-row mb-7">
 								<!--begin::Label-->
 								<label class="required fs-6 fw-semobold mb-2"

src/views/approval/approvalRoutingLog/Index.vue

@@ -468,7 +468,7 @@
             { headerName:"Check in Date" , field: "checkinDate",sortable: true,unSortIcon: true,minWidth:100, resizable: true, cellClass: "cell-vertical-align-text-left"},
             { headerName:"Check Out Date" , field: "checkoutDate" ,sortable: true,unSortIcon: true,minWidth:100, resizable: true, cellClass: "cell-vertical-align-text-left"},
             { headerName:"Continuous / Overlap Booking(C/I to C/O)" , field: "overlapBooking",sortable: true,unSortIcon: true, minWidth:150 , resizable: true,hide:!gamingData, cellClass: "cell-vertical-align-text-left"},  
-            { headerName:"Booker Team" , field: "teamName",sortable: true,unSortIcon: true, minWidth:150 , resizable: true,cellClass: "cell-vertical-align-text-left"}, 
+            { headerName:"Booker Team" , field: "sectionName",sortable: true,unSortIcon: true, minWidth:150 , resizable: true,cellClass: "cell-vertical-align-text-left"}, 
             { headerName:"Booker ID" , field: "createdBy",sortable: true,unSortIcon: true, minWidth:150 , resizable: true, cellClass: "cell-vertical-align-text-left"},
             { headerName:"Booker Name" , field: "booker",sortable: true,unSortIcon: true, minWidth:150 , resizable: true, cellClass: "cell-vertical-align-text-left"},
             { headerName:"Sharer" , field: "sharer", minWidth:150 , resizable: true,hide:!isSharer,

src/views/daylightAppSetting/calendarSetting/Index.vue

@@ -0,0 +1,368 @@
+<template>
+    <!--begin::Toolbar-->
+    <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
+        <!--begin::Toolbar container-->
+        <div
+        id="kt_app_toolbar_container"
+        class="d-flex flex-stack"
+        :class="{
+            'container-fluid': toolbarWidthFluid,
+            'container-xxl': !toolbarWidthFluid,
+        }"
+        style="padding:0px;"
+        >
+        <KTPageTitle />
+        </div>
+        <!--end::Toolbar container-->
+    </div>
+    <!--end::Toolbar-->
+	<!-- begin:: Content -->
+	<div class="kt-content kt-grid__item kt-grid__item--fluid" id="kt_content">
+		<!--Begin::Section-->
+		<div class="row">
+			<div class="kt-portlet kt-portlet--mobile">
+				<el-form
+				  @submit.prevent="submit()"
+				  :model="configData"
+				  :rules="rules"
+				  ref="formRef"
+				>
+				<div class="kt-portlet__body">
+					<div class="form-group row" style="border-top:1px solid #ddd;"></div>
+					<div class="form-group row" style="margin-top:30px;">
+						<h5>Room Calendar Setting</h5>
+					</div>
+					<div class="form-group row">
+						<label class="col-lg-3 col-form-label  kt-font-bolder">Previous days:</label>
+						<div class="col-lg-6">
+							<el-form-item prop="CALENDAR_VIEW_PREVIOUS_DAYS">
+							<div class="input-group bootstrap-touchspin bootstrap-touchspin-injected">
+								<el-input-number :disabled="!enableModify" v-model="configData.CALENDAR_VIEW_PREVIOUS_DAYS" :min="0" :precision="0" />
+							</div>
+							</el-form-item>
+						</div>
+					</div>
+					<div class="form-group row">
+						<label class="col-lg-3 col-form-label  kt-font-bolder">Visible days:</label>
+						<div class="col-lg-6">
+							<el-form-item prop="CALENDAR_VIEW_VISIBLE_DAYS">
+							<div class="input-group bootstrap-touchspin bootstrap-touchspin-injected">
+								<el-input-number :disabled="!enableModify" v-model="configData.CALENDAR_VIEW_VISIBLE_DAYS" :min="0" :precision="0" />
+							</div>
+							</el-form-item>
+						</div>
+					</div>
+					<div class="form-group row">
+						<label class="col-lg-3 col-form-label  kt-font-bolder">Selection Limit:</label>
+						<div class="col-lg-6">
+							<el-form-item prop="MAX_SELECTED_ROOM_TYPES">
+							<div class="input-group bootstrap-touchspin bootstrap-touchspin-injected">
+								<el-input-number :disabled="!enableModify" v-model="configData.MAX_SELECTED_ROOM_TYPES" :min="0" :precision="0" />
+							</div>
+							</el-form-item>
+						</div>
+					</div>
+					<div class="form-group row">
+						<label class="col-lg-3 col-form-label  kt-font-bolder">View yesterday time range:</label>
+						<div class="col-lg-6">
+							<el-form-item>
+							<div class="input-group bootstrap-touchspin bootstrap-touchspin-injected">
+								<el-time-picker :disabled="!enableModify" v-model="calendarTimeRange" is-range format="HH:mm" value-format="HH:mm" start-placeholder="Start time"
+                                    end-placeholder="End time" style="width: 150px"/>
+							</div>
+							</el-form-item>
+						</div>
+					</div>
+				</div>
+				<div class="kt-portlet__foot">
+					<div class="form-group row" style="border-top:1px solid #ddd;margin-top:20px;margin-bottom:12px;"></div>
+					<div class="row">
+						<div class="col-lg-3"></div>
+						<div class="col-lg-6">
+							<!--begin::Button-->
+							<button v-if="enableModify"
+							  :disabled="loading"
+							  :data-kt-indicator="loading ? 'on' : null"
+							  class="btn btn-sm btn-primary me-3"
+							  type="submit"
+							>
+							  <span v-if="!loading" class="indicator-label">
+							   <i class="fa fa-save"></i>&nbsp; Save
+							  </span>
+							  <span v-if="loading" class="indicator-progress">
+							    Please wait...
+							    <span
+							      class="spinner-border spinner-border-sm align-middle ms-2"
+							    ></span>
+							  </span>
+							</button>
+							<!--end::Button-->
+							<button v-if="enableModify" type="button" @click="onResetClickHandle" class="btn btn-sm btn-secondary text-primary"><i class="fa fa-redo text-primary"></i> Reset</button>
+						</div>
+					</div>
+				</div>
+				</el-form>
+			</div>
+		</div>
+		<!--End::Section-->
+	</div>
+	<!-- end:: Content -->
+
+	<div v-loading.fullscreen.lock="pageLoading" element-loading-text="Loading..."></div>
+  </template>
+
+  <script lang="ts">
+	import { defineComponent, onMounted, ref } from "vue";
+	import KTPageTitle from "@/layouts/main-layout/toolbar/PageTitle.vue";
+	import { toolbarWidthFluid } from "@/core/helpers/config";
+	import ApiService from "@/core/services/ApiService";
+	import type { ResponseData } from "@/core/data/AjaxData";
+	import Swal from "sweetalert2";
+	import { ElNotification } from "element-plus";
+	import { useAuthStore } from "@/stores/auth";
+
+	type CalendarConfig = {
+		CALENDAR_VIEW_PREVIOUS_DAYS: number | null;
+		CALENDAR_VIEW_VISIBLE_DAYS: number | null;
+		CALENDAR_VIEW_YESTERDAY_START: string;
+		CALENDAR_VIEW_YESTERDAY_END: string;
+		MAX_SELECTED_ROOM_TYPES:number | null;
+	};
+
+	type AppSettingItem = {
+		keys: keyof CalendarConfig;
+		keyValues: CalendarConfig[keyof CalendarConfig] | "";
+	};
+
+	type AppSettingResponseItem = {
+		keys: string;
+		keyValues: string | number | null;
+	};
+
+  export default defineComponent({
+    name: "calendar-setting",
+    components: {
+        KTPageTitle,
+	},
+    setup() {
+		const defaultConfigData = (): CalendarConfig => ({
+			CALENDAR_VIEW_PREVIOUS_DAYS: null,
+			CALENDAR_VIEW_VISIBLE_DAYS: null,
+			CALENDAR_VIEW_YESTERDAY_START: "00:05",
+			CALENDAR_VIEW_YESTERDAY_END: "05:59",
+			MAX_SELECTED_ROOM_TYPES:2,
+		});
+		const numberConfigAttrs: Array<keyof CalendarConfig> = [
+			"CALENDAR_VIEW_PREVIOUS_DAYS",
+			"CALENDAR_VIEW_VISIBLE_DAYS",
+			"MAX_SELECTED_ROOM_TYPES",
+		];
+		const configAttrs: Array<keyof CalendarConfig> = [
+			...numberConfigAttrs,
+			"CALENDAR_VIEW_YESTERDAY_START",
+			"CALENDAR_VIEW_YESTERDAY_END",
+		];
+		const configData = ref<CalendarConfig>(defaultConfigData());
+		const calendarTimeRange = ref<[string, string] | null>([
+			configData.value.CALENDAR_VIEW_YESTERDAY_START,
+			configData.value.CALENDAR_VIEW_YESTERDAY_END,
+		]);
+		const pageRouterId = "00330";
+		const authStore = useAuthStore();
+		const enableModify = authStore.hasPermission(pageRouterId, "MODIFY");
+		const formRef = ref<any>(null);
+		const pageLoading = ref<boolean>(true);
+		const loading = ref<boolean>(false);
+		const rules = ref({
+		  CALENDAR_VIEW_PREVIOUS_DAYS: [
+		    {
+		      required: true,
+		      message: "Previous days is required",
+		      trigger: "change",
+		    },
+		  ],
+		  CALENDAR_VIEW_VISIBLE_DAYS: [
+		    {
+		      required: true,
+		      message: "Visible days is required",
+		      trigger: "change",
+		    },
+		  ],
+		});
+
+        onMounted(() => {
+			loadAppSetting();
+        });
+
+		const resetForm=()=>{
+			if(formRef.value){
+				formRef.value.resetFields();
+			}
+		};
+		const loadAppSetting=()=>{
+			resetForm();
+			pageLoading.value = true;
+			let reqParas = {};
+			ApiService.processPostRequest("/app/appsetting/get", reqParas,
+			(resData:ResponseData)=>{
+				pageLoading.value=false;
+				parseConfigData(resData.data);
+				calendarTimeRange.value = [
+					configData.value.CALENDAR_VIEW_YESTERDAY_START,
+					configData.value.CALENDAR_VIEW_YESTERDAY_END,
+				];
+			},
+			(resData:ResponseData)=>{
+				pageLoading.value=false;
+				Swal.fire({
+				  text: "Read App Setting error!["+resData.message+"]",
+				  icon: "error",
+				  buttonsStyling: false,
+				  confirmButtonText: "Ok, got it!",
+				  heightAuto: false,
+				  customClass: {
+				    confirmButton: "btn btn-primary",
+				  },
+				});
+			},
+			()=>{
+				pageLoading.value=false;
+			});
+		};
+		const saveAppSetting=(appSettingObj:Array<AppSettingItem>)=>{
+			if(appSettingObj && appSettingObj.length>0){
+				let postUrl = "/app/appsetting/save_calendar_setting";
+				ApiService.processPostRequest(postUrl, appSettingObj,
+				()=>{
+					loading.value = false;
+					ElNotification({ position: "bottom-right",
+						title: "Success",
+						message: "App Setting has been saved!",
+						type: "success",
+					});
+				},
+				(resData:ResponseData)=>{
+					loading.value = false;
+					ElNotification({ position: "bottom-right",
+						title: "Fail",
+						message: "Save data failed!["+resData.message+"]",
+						type: "error",
+					});
+				},
+				(error)=>{
+					loading.value = false;
+					Swal.fire({
+					  text: "Update App Setting error!["+error+"]",
+					  icon: "error",
+					  buttonsStyling: false,
+					  confirmButtonText: "Ok, got it!",
+					  heightAuto: false,
+					  customClass: {
+					    confirmButton: "btn btn-primary",
+					  },
+					});
+				});
+			}else{
+				Swal.fire({
+				  text: "Empty Setting info",
+				  icon: "error",
+				  buttonsStyling: false,
+				  confirmButtonText: "Ok, got it!",
+				  heightAuto: false,
+				  customClass: {
+				    confirmButton: "btn btn-primary",
+				  },
+				});
+			}
+		};
+		const buildSettingList=()=>{
+			const timeRange = calendarTimeRange.value || ["", ""];
+			configData.value.CALENDAR_VIEW_YESTERDAY_START = timeRange[0];
+			configData.value.CALENDAR_VIEW_YESTERDAY_END = timeRange[1];
+
+			return configAttrs.map((attrName) => {
+				return {
+					keys: attrName,
+					keyValues: configData.value[attrName] != null ? configData.value[attrName] : "",
+				} as AppSettingItem;
+			});
+		};
+		const parseConfigData=(pData:Array<AppSettingResponseItem>)=>{
+			const settingMap = new Map<string, string | number | null>();
+			if(pData){
+				for(let i=0;i<pData.length;i++){
+					if(pData[i] && pData[i].keys){
+						settingMap.set(pData[i].keys, pData[i].keyValues);
+					}
+				}
+			}
+
+			let cfgData = defaultConfigData();
+			for(let i=0;i<configAttrs.length;i++){
+				let attrName = configAttrs[i];
+				let cfgVal = settingMap.get(attrName);
+				if(cfgVal==null || cfgVal===""){
+					continue;
+				}
+				if(numberConfigAttrs.includes(attrName)){
+					cfgData[attrName]=parseInt(String(cfgVal), 10);
+				}else{
+					cfgData[attrName]=String(cfgVal);
+				}
+			}
+			configData.value = cfgData;
+		};
+		const submit = () => {
+		  if (!formRef.value) {
+		    return;
+		  }
+		  if(!calendarTimeRange.value || calendarTimeRange.value.length!==2 || !calendarTimeRange.value[0] || !calendarTimeRange.value[1]){
+			ElNotification({ position: "bottom-right",
+				title: "Fail",
+				message: "View yesterday time range is required",
+				type: "error",
+			});
+			return;
+		  }
+		  formRef.value.validate((valid: boolean) => {
+		    if (valid) {
+				loading.value = true;
+				let settingObj = buildSettingList();
+				saveAppSetting(settingObj);
+		    } else {
+				return false;
+		    }
+		  });
+		};
+		const onResetClickHandle = ()=>{
+			loadAppSetting();
+		};
+        return {
+            toolbarWidthFluid,
+			pageLoading,
+			loading,
+			configData,
+			formRef,
+			submit,
+			rules,
+			onResetClickHandle,
+			enableModify,
+			calendarTimeRange,
+        };
+    },
+  });
+  </script>
+
+  <style>
+  .custom-loading {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: rgba(255, 255, 255, 0.5);
+  }
+  </style>

src/views/daylightAppSetting/property/Index.vue

@@ -130,6 +130,9 @@ export default defineComponent({
 				}
 			}
 		};
+		const formatNullableValue = (pData)=>{
+			return pData.value==null?'':String(pData.value);
+		};
 		// Each Column Definition results in one Column.
 		const columnDefs = [
 			{ headerName: "Property Name", field: "name", sortable: true, unSortIcon: true, checkboxSelection: false, minWidth: 100, },
@@ -138,6 +141,18 @@ export default defineComponent({
 			{ headerName: "Property Code", field: "code", sortable: true, unSortIcon: true, minWidth: 140, resizable: true, },
 			{ headerName: "Category", field: "category", sortable: true, unSortIcon: true, minWidth: 120, resizable: true, },
 			{ headerName: "Sort Order", field: "sortOrder", sortable: true, unSortIcon: true, minWidth: 140, resizable: true, },
+			{ headerName:"Calendar Name" , field: "calendarName", sortable: true,unSortIcon: true,  minWidth:140 , resizable: true, valueFormatter:formatNullableValue, },
+			{ headerName:"Calendar Order" , field: "calendarOrder", sortable: true,unSortIcon: true,  minWidth:140 , resizable: true, valueFormatter:formatNullableValue, },
+			{ headerName:"Show Calendar" , field: "showCalendar", sortable: true,unSortIcon: true,  minWidth:140 , resizable: true,
+				cellRenderer:params=>{
+					if(params.value===1 || params.value==='1'){
+						return 'Yes';
+					}else if(params.value===0 || params.value==='0'){
+						return 'No';
+					}
+					return '';
+				}
+			},
 			// { headerName:"Last Update At" , field: "updatedAt", minWidth:160 , resizable: true, 
 			//     cellRenderer:params=>{ 
 			//         return params.value?moment(params.value).format("YYYY-MM-DD HH:mm:ss"):'';	

src/views/daylightAppSetting/property/Modal.vue

@@ -158,23 +158,19 @@
 								</el-form-item>
 								<!--end::Input-->
 							</div>
-							<div class="col-md-6 fv-row">
+							<!-- <div class="col-md-6 fv-row">
-								<!--begin::Label-->
 								<label class="required fs-6 fw-semobold mb-2"
 									>Status</label
 								>
-								<!--end::Label-->
+								<el-form-item prop="status">
-								<!--begin::Input-->
-								<!-- <el-form-item prop="status">
 									<el-switch
 										v-model="propertyData.status"
 										:active-value="1"
 										:inactive-value="0"
 										:disabled="!enableEdit"
 									/>
-								</el-form-item> -->
+								</el-form-item>
-								<!--end::Input-->
+							</div> -->
-							</div>
 							<div class="col-md-6 fv-row">
 								<!--begin::Label-->
 								<label class="required fs-6 fw-semobold mb-2"
@@ -190,6 +186,44 @@
 								</el-form-item>
 								<!--end::Input-->
 							</div>
+							<div class="col-md-6 fv-row">
+								<!--begin::Label-->
+								<label class="fs-6 fw-semobold mb-2">Calendar Name</label>
+								<!--end::Label-->
+								<!--begin::Input-->
+								<el-form-item prop="calendarName">
+									<el-input
+									v-model="propertyData.calendarName"
+									type="text"
+									placeholder=""
+									:readonly="!enableEdit"
+									/>
+								</el-form-item>
+								<!--end::Input-->
+							</div>
+							<div class="col-md-6 fv-row">
+								<!--begin::Label-->
+								<label class="fs-6 fw-semobold mb-2">Calendar Order</label>
+								<!--end::Label-->
+								<!--begin::Input-->
+								<el-form-item prop="calendarOrder">
+									<el-input-number v-model="propertyData.calendarOrder" :min="0" :disabled="!enableEdit" />
+								</el-form-item>
+								<!--end::Input-->
+							</div>
+							<div class="col-md-6 fv-row">
+								<!--begin::Label-->
+								<label class="fs-6 fw-semobold mb-2">Show Calendar</label>
+								<!--end::Label-->
+								<!--begin::Input-->
+								<el-form-item prop="showCalendar">
+									<el-select v-model="propertyData.showCalendar" :disabled="!enableEdit" :teleported="false">
+										<el-option label="Yes" :value="1"></el-option>
+										<el-option label="No" :value="0"></el-option>
+									</el-select>
+								</el-form-item>
+								<!--end::Input-->
+							</div>
 							<div class="row g-9 mb-6" v-if="disabled">
 								<div class="col-md-6 fv-row">
 									<!--begin::Label-->

src/views/daylightAppSetting/room/Index.vue

@@ -257,6 +257,9 @@ export default defineComponent({
 			}
 			return res;
 		};
+		const formatNullableValue = (pData)=>{
+            return pData.value==null?'':String(pData.value);
+        };
 		// Each Column Definition results in one Column.
 		const columnDefs = [
 			{
@@ -299,6 +302,49 @@ export default defineComponent({
 				minWidth: 150,
 				resizable: true,
 			},
+			{
+				headerName: "Calendar Name",
+				field: "calendarName",
+				sortable: true,
+				unSortIcon: true,
+				minWidth: 150,
+				resizable: true,
+				valueFormatter: formatNullableValue,
+			},
+			{
+				headerName: "Calendar Order",
+				field: "calendarOrder",
+				sortable: true,
+				unSortIcon: true,
+				minWidth: 150,
+				resizable: true,
+				valueFormatter: formatNullableValue,
+			},
+			{
+				headerName: "Show Calendar",
+				field: "showCalendar",
+				sortable: true,
+				unSortIcon: true,
+				minWidth: 150,
+				resizable: true,
+				cellRenderer: (params) => {
+					if (params.value === 1 || params.value === "1") {
+						return "Yes";
+					} else if (params.value === 0 || params.value === "0") {
+						return "No";
+					}
+					return "";
+				},
+			},
+			{
+				headerName: "Default Show Calendar",
+				field: "defaultShowCalendar",
+				sortable: true,
+				unSortIcon: true,
+				minWidth: 190,
+				resizable: true,
+				cellRenderer: getYesOrNoStatus,
+			},
 			{
 				headerName: "Room Type for Create Booking",
 				field: "forCreateBooking",

src/views/daylightAppSetting/room/Modal.vue

@@ -152,6 +152,52 @@
 								</el-form-item>
 								<!--end::Input-->
 							</div>
+							<div class="fv-row mb-7">
+								<!--begin::Label-->
+								<label class="fs-6 fw-semobold mb-2">Calendar Name</label>
+								<!--end::Label-->
+								<!--begin::Input-->
+								<el-form-item prop="calendarName">
+									<el-input v-model="data.calendarName" type="text" placeholder="" :readonly="!enableEdit" />
+								</el-form-item>
+								<!--end::Input-->
+							</div>
+							<div class="fv-row mb-7">
+								<!--begin::Label-->
+								<label class="fs-6 fw-semobold mb-2">Calendar Order</label>
+								<!--end::Label-->
+								<!--begin::Input-->
+								<el-form-item prop="calendarOrder">
+									<el-input-number v-model="data.calendarOrder" :min="0" :disabled="!enableEdit" />
+								</el-form-item>
+								<!--end::Input-->
+							</div>
+							<div class="fv-row mb-7">
+								<!--begin::Label-->
+								<label class="fs-6 fw-semobold mb-2">Show Calendar</label>
+								<!--end::Label-->
+								<!--begin::Input-->
+								<el-form-item prop="showCalendar">
+									<el-select v-model="data.showCalendar" placeholder="Select" :disabled="!enableEdit" :teleported="false">
+										<el-option :key="1" label="Yes" :value="1" />
+										<el-option :key="0" label="No" :value="0" />
+									</el-select>
+								</el-form-item>
+								<!--end::Input-->
+							</div>
+							<div class="fv-row mb-7">
+								<!--begin::Label-->
+								<label class="fs-6 fw-semobold mb-2">Default Show Calendar</label>
+								<!--end::Label-->
+								<!--begin::Input-->
+								<el-form-item prop="defaultShowCalendar">
+									<el-select v-model="data.defaultShowCalendar" placeholder="Select" :disabled="!enableEdit" :teleported="false">
+										<el-option :key="1" label="Yes" :value="1" />
+										<el-option :key="0" label="No" :value="0" />
+									</el-select>
+								</el-form-item>
+								<!--end::Input-->
+							</div>
 							<div class="fv-row mb-7">
 								<!--begin::Label-->
 								<label class="required fs-6 fw-semobold mb-2"