Mauve/mgm-daylight-mcrm-cms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add calendar page

Browse Source
This commit is contained in:
Mauve
2026-09-15 17:05:27 +08:00
parent 277e7f0117
commit bc7f28b0f8
12 changed files with 1903 additions and 776 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/router/index.ts
+871 -766
View File
File diff suppressed because it is too large Load Diff
src/views/appSetting/calendarSetting/Index.vue
+368
View File
@@ -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
+16 -1
View File
@@ -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
+38
View File
@@ -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
+46
View File
@@ -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
+46
View File
@@ -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
+1 -1
View File
@@ -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
+368
View File
@@ -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
+15
View File
@@ -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
+42 -8
View File
@@ -158,23 +158,19 @@
</el-form-item>
<!--end::Input-->
</div>
<div class="col-md-6 fv-row">
<!--begin::Label-->
<!-- <div class="col-md-6 fv-row">
<label class="required fs-6 fw-semobold mb-2"
>Status</label
>
<!--end::Label-->
<!--begin::Input-->
<!-- <el-form-item prop="status">
<el-form-item prop="status">
<el-switch
v-model="propertyData.status"
:active-value="1"
:inactive-value="0"
:disabled="!enableEdit"
/>
</el-form-item> -->
<!--end::Input-->
</div>
</el-form-item>
</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
+46
View File
@@ -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
+46
View File
@@ -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"