Refactoring code dashboard
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
bb476051f2
commit
d41a2516c3
4 changed files with 265 additions and 231 deletions
|
|
@ -1,18 +1,20 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, watch } from "vue";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { ref } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
import { useQuasar } from "quasar";
|
||||
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
|
||||
|
||||
const $q = useQuasar();
|
||||
const { showLoader, hideLoader, success, messageError, dialogConfirm } =
|
||||
useCounterMixin(); //เรียกฟังก์ชันกลาง
|
||||
|
||||
const { showLoader, hideLoader, success, messageError } = mixin;
|
||||
|
||||
const myForm = ref<any>();
|
||||
/**
|
||||
* props จาก components Dashborad
|
||||
*/
|
||||
const props = defineProps({
|
||||
modal: {
|
||||
type: Boolean,
|
||||
|
|
@ -28,29 +30,30 @@ const props = defineProps({
|
|||
},
|
||||
});
|
||||
|
||||
const subject = ref<string>("");
|
||||
const body = ref<string>("");
|
||||
async function submit() {
|
||||
myForm.value.validate().then(async (result: boolean) => {
|
||||
if (result) {
|
||||
// props.savaForm(reason.value);
|
||||
showLoader();
|
||||
await http
|
||||
.put(config.API.replyMessage(props.idInbox), {
|
||||
subject: subject.value,
|
||||
body: body.value,
|
||||
})
|
||||
.then((res) => {
|
||||
props.clickClose()
|
||||
success($q, "ส่งข้อความสำเร็จ");
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
const subject = ref<string>(""); // หัวข้อ
|
||||
const body = ref<string>(""); //ข้อความ
|
||||
|
||||
/**
|
||||
* ยืนยันการจตอบกลับการส่งข้อความ
|
||||
*/
|
||||
function onSubmit() {
|
||||
dialogConfirm($q, async () => {
|
||||
showLoader();
|
||||
await http
|
||||
.put(config.API.replyMessage(props.idInbox), {
|
||||
subject: subject.value,
|
||||
body: body.value,
|
||||
})
|
||||
.then(() => {
|
||||
props.clickClose();
|
||||
success($q, "ส่งข้อความสำเร็จ");
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
|
@ -58,7 +61,7 @@ async function submit() {
|
|||
<template>
|
||||
<q-dialog v-model="props.modal" persistent>
|
||||
<q-card style="width: 40vw; max-width: 40vw">
|
||||
<q-form ref="myForm">
|
||||
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
||||
<DialogHeader tittle="ส่งข้อความ" :close="clickClose" />
|
||||
<q-separator />
|
||||
<q-card-section class="q-pa-sm bg-grey-1">
|
||||
|
|
@ -71,7 +74,7 @@ async function submit() {
|
|||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
:rules="[(val) => !!val || 'กรุณากรอกหัวข้อ']"
|
||||
:rules="[(val:string) => !!val || 'กรุณากรอกหัวข้อ']"
|
||||
v-model="subject"
|
||||
label="หัวข้อ"
|
||||
/>
|
||||
|
|
@ -83,7 +86,7 @@ async function submit() {
|
|||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
:rules="[(val) => !!val || 'กรุณากรอกข้อความ']"
|
||||
:rules="[(val:string) => !!val || 'กรุณากรอกข้อความ']"
|
||||
v-model="body"
|
||||
label="ข้อความ"
|
||||
/>
|
||||
|
|
@ -93,15 +96,7 @@ async function submit() {
|
|||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-actions align="right">
|
||||
<q-btn
|
||||
dense
|
||||
unelevated
|
||||
label="ส่งข้อความ"
|
||||
color="public"
|
||||
@click="submit"
|
||||
class="q-px-md"
|
||||
>
|
||||
<!-- icon="mdi-content-save-outline" -->
|
||||
<q-btn label="ส่งข้อความ" color="public" type="submit">
|
||||
<q-tooltip>บันทึก</q-tooltip>
|
||||
</q-btn>
|
||||
</q-card-actions>
|
||||
|
|
|
|||
|
|
@ -6,12 +6,13 @@ import { useCounterMixin } from "@/stores/mixin";
|
|||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
import PopupReplyInbox from "@/components/Dialogs/PopupReplyInbox.vue";
|
||||
import type {
|
||||
ResponseInbox,
|
||||
DataInbox,
|
||||
} from "@/interface/response/dashboard/dashboard";
|
||||
|
||||
import PopupReplyInbox from "@/components/Dialogs/PopupReplyInbox.vue";
|
||||
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
|
||||
const {
|
||||
|
|
@ -23,25 +24,35 @@ const {
|
|||
dialogRemove,
|
||||
} = mixin;
|
||||
|
||||
const splitterModel = ref<number>(30);
|
||||
const link = ref<string>("0");
|
||||
const inboxList = ref<DataInbox[]>([]);
|
||||
const data = ref<DataInbox[]>([]);
|
||||
const splitterModel = ref<number>(30); // ขนาดของกล่องข้อความ
|
||||
const link = ref<string>("0"); // รายการกล่องข้อความ
|
||||
const inboxList = ref<DataInbox[]>([]); //ข้อมูลรายการกล่องข้อความ
|
||||
const data = ref<DataInbox[]>([]); //ข้อมูลกล่องข้อความ
|
||||
const totalInbox = ref<number>(0); // จำนวนกล่องข้อความ
|
||||
const scrollTargetRef = ref<any>(null);
|
||||
//กำหนดรูปแบบแสดงวนเวลา
|
||||
const thaiOptions: Intl.DateTimeFormatOptions = {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
};
|
||||
const isLoadInbox = ref<boolean>(false); // สถานะการโหลด
|
||||
const modalReply = ref<boolean>(false); // ตอบกลับข้อความ
|
||||
|
||||
onMounted(async () => {
|
||||
await getData(1);
|
||||
});
|
||||
|
||||
const isLoadInbox = ref<boolean>(false);
|
||||
const getData = async (index: number) => {
|
||||
/**
|
||||
* โหลดรายการกล่องข้องความ
|
||||
* เมื่อ index = 1 โชว์โหลด ถ้าไม่ไม่แสดง
|
||||
*
|
||||
* @param index หน้าที่ต้องการโหลด
|
||||
*/
|
||||
async function getData(index: number) {
|
||||
isLoadInbox.value = false;
|
||||
index === 1 && showLoader();
|
||||
index != 0 &&
|
||||
(await http
|
||||
.get(config.API.msgInbox + `?page=${index}&pageSize=${10}`)
|
||||
.then((res: any) => {
|
||||
const data = res.data.result.data;
|
||||
totalInbox.value = res.data.result.total;
|
||||
.then(async (res) => {
|
||||
const data = await res.data.result.data;
|
||||
totalInbox.value = await res.data.result.total;
|
||||
|
||||
let list: DataInbox[] = [];
|
||||
data.map((e: ResponseInbox) => {
|
||||
|
|
@ -66,15 +77,19 @@ const getData = async (index: number) => {
|
|||
}
|
||||
})
|
||||
.catch((e) => {
|
||||
// messageError($q, e);
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
isLoadInbox.value = true;
|
||||
hideLoader();
|
||||
}));
|
||||
};
|
||||
}
|
||||
|
||||
const selectInbox = (id: string) => {
|
||||
/**
|
||||
* เลือกแสดงกล่องข้อความ
|
||||
* @param id ข้อความ
|
||||
*/
|
||||
function selectInbox(id: string) {
|
||||
http
|
||||
.get(config.API.msgInboxDelete(id))
|
||||
.then(() => {
|
||||
|
|
@ -84,54 +99,71 @@ const selectInbox = (id: string) => {
|
|||
item.isOpen = true;
|
||||
}
|
||||
})
|
||||
.catch((err) => {});
|
||||
};
|
||||
const deleteData = (id: string) => {
|
||||
dialogRemove($q, () => removeData(id));
|
||||
};
|
||||
|
||||
//รอ api ลบ
|
||||
const removeData = async (id: string) => {
|
||||
showLoader();
|
||||
await http
|
||||
.delete(config.API.msgInboxDelete(id))
|
||||
.then(() => {
|
||||
success($q, "ลบข้อมูลสำเร็จ");
|
||||
const position = inboxList.value.findIndex((item) => item.no === id);
|
||||
if (position !== -1) {
|
||||
inboxList.value.splice(position, 1);
|
||||
data.value = [];
|
||||
}
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
if (inboxList.value.length === 6) {
|
||||
inboxList.value = [];
|
||||
getData(1);
|
||||
}
|
||||
hideLoader();
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
});
|
||||
};
|
||||
const fileOpen = (url: string) => {
|
||||
window.open(url, "_blank");
|
||||
};
|
||||
}
|
||||
|
||||
// Dialog Reply
|
||||
const modalReply = ref<boolean>(false);
|
||||
/**
|
||||
* ยืนยันการลบกล่องข้อความ
|
||||
* @param id
|
||||
*/
|
||||
function deleteData(id: string) {
|
||||
dialogRemove($q, async () => {
|
||||
showLoader();
|
||||
await http
|
||||
.delete(config.API.msgInboxDelete(id))
|
||||
.then(() => {
|
||||
// เมื่แ ข้อความเหลือ 6 เรียกโหลดรายการกล่องข้องความใหม่
|
||||
if (inboxList.value.length === 6) {
|
||||
inboxList.value = [];
|
||||
getData(1);
|
||||
}
|
||||
const position = inboxList.value.findIndex((item) => item.no === id);
|
||||
if (position !== -1) {
|
||||
inboxList.value.splice(position, 1);
|
||||
data.value = [];
|
||||
}
|
||||
success($q, "ลบข้อมูลสำเร็จ");
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* ดาวน์โหลดเอกสารแนบ
|
||||
* @param url ลิงก์โหลดเอกสาร
|
||||
*/
|
||||
function fileOpen(url: string) {
|
||||
window.open(url, "_blank");
|
||||
}
|
||||
|
||||
/**
|
||||
* เปิด popup การตอบกลับข้อความ
|
||||
*/
|
||||
function dialogRepleOpen() {
|
||||
modalReply.value = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* ปิด popup การตอบกลับข้อความ
|
||||
*/
|
||||
function modalReplyClose() {
|
||||
modalReply.value = false;
|
||||
}
|
||||
|
||||
const scrollTargetRef = ref<any>(null);
|
||||
const totalInbox = ref<number>(0);
|
||||
|
||||
function onLoad(index: number, done: any) {
|
||||
/**
|
||||
* ฟังก์ชัน onLoad ทำงานเมื่อโหลดข้อมูลเพิ่มเติมในรายการแจ้งเตือน
|
||||
*
|
||||
* @param index - ของรายการที่กำลังโหลด
|
||||
* @param done - ฟังก์ชันที่เรียกเมื่อการโหลดเสร็จสิ้น
|
||||
*/
|
||||
function onLoad(index: number, done: Function) {
|
||||
const num = index === 1 ? 0 : index++;
|
||||
if (inboxList.value.length < totalInbox.value && isLoadInbox) {
|
||||
setTimeout(() => {
|
||||
|
|
@ -140,10 +172,10 @@ function onLoad(index: number, done: any) {
|
|||
}, 3000);
|
||||
}
|
||||
}
|
||||
const thaiOptions: Intl.DateTimeFormatOptions = {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
await getData(1);
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- page:หน้าแรก -->
|
||||
|
|
@ -308,14 +340,6 @@ const thaiOptions: Intl.DateTimeFormatOptions = {
|
|||
color="red"
|
||||
@click="deleteData(d.no)"
|
||||
/>
|
||||
<!-- <q-btn
|
||||
flat
|
||||
round
|
||||
dense
|
||||
icon="mdi-dots-vertical"
|
||||
size="10px"
|
||||
color="grey-7"
|
||||
/> -->
|
||||
</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
|
|
@ -355,14 +379,6 @@ const thaiOptions: Intl.DateTimeFormatOptions = {
|
|||
</q-list>
|
||||
</q-menu>
|
||||
</div>
|
||||
|
||||
<!-- <q-btn
|
||||
unelevated
|
||||
size="12px"
|
||||
dense
|
||||
class="q-ml-md q-px-sm bg-blue-1 text-blue-7"
|
||||
label="ดาวน์โหลดทั้งหมด"
|
||||
/> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,15 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, watch, onBeforeMount } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import { useDataStore } from "@/stores/data";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { scroll, useQuasar } from "quasar";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { logout, tokenParsed } from "@/plugins/auth";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import { useRoute } from "vue-router";
|
||||
import config from "@/app.config";
|
||||
import http from "@/plugins/http";
|
||||
import { logout, tokenParsed } from "@/plugins/auth";
|
||||
import checkPermission from "@/plugins/checkPermission";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useDataStore } from "@/stores/data";
|
||||
|
||||
import type {
|
||||
ScrollType,
|
||||
|
|
@ -16,15 +17,12 @@ import type {
|
|||
optionType,
|
||||
} from "../interface/request/main/main";
|
||||
import { menuList } from "../interface/request/main/main";
|
||||
import checkPermission from "@/plugins/checkPermission";
|
||||
|
||||
// import { useroleUserDataStore } from "@/stores/roleUser";
|
||||
|
||||
const { setVerticalScrollPosition } = scroll;
|
||||
const $q = useQuasar();
|
||||
const store = useDataStore();
|
||||
const route = useRoute();
|
||||
const link = ref<string>("");
|
||||
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
|
||||
const { loader } = storeToRefs(store);
|
||||
const { changeTab } = store;
|
||||
const {
|
||||
showLoader,
|
||||
hideLoader,
|
||||
|
|
@ -33,22 +31,16 @@ const {
|
|||
messageError,
|
||||
date2Thai,
|
||||
dialogConfirm,
|
||||
} = mixin;
|
||||
} = useCounterMixin();
|
||||
|
||||
// const DataStore = useroleUserDataStore();
|
||||
// const { fetchroleUser } = DataStore;
|
||||
|
||||
const id = ref<string>("");
|
||||
const $q = useQuasar();
|
||||
const { loader } = storeToRefs(store);
|
||||
const { changeTab } = store;
|
||||
const miniState = ref<boolean>(false);
|
||||
const drawerR = ref<boolean>(false);
|
||||
const rightActive = ref<boolean>(false);
|
||||
const fullname = ref<string>(""); // ชื่อผู้ใช้งาน
|
||||
const link = ref<string>("");
|
||||
const miniState = ref<boolean>(false); // ย่อเมนูหลัก
|
||||
const drawerR = ref<boolean>(false); //ปุ่มย่อขวา
|
||||
const rightActive = ref<boolean>(false); // แสดงแถบด้านขวา
|
||||
const resize = ref<number>(0);
|
||||
const active = ref<number>(0);
|
||||
const drawerL = ref<boolean>(false);
|
||||
const fullname = ref<string>("");
|
||||
const role = ref<string[]>([]);
|
||||
const reles = ref<any[]>([]);
|
||||
const notiTrigger = ref<boolean>(false);
|
||||
|
|
@ -75,6 +67,9 @@ const options = ref<optionType[]>([
|
|||
},
|
||||
]);
|
||||
|
||||
/**
|
||||
* fetch จำนวนของกาแจ้งเตือน
|
||||
*/
|
||||
async function fetchmsgNoread() {
|
||||
await http
|
||||
.get(config.API.msgNoread())
|
||||
|
|
@ -86,8 +81,17 @@ async function fetchmsgNoread() {
|
|||
});
|
||||
}
|
||||
|
||||
const statusLoad = ref<boolean>(false);
|
||||
const getDataNotification = async (index: number, type: string) => {
|
||||
const statusLoad = ref<boolean>(false); // สถานการโหลด
|
||||
|
||||
/**
|
||||
* fetch ข้อมูลรายการแจ้งเตือน
|
||||
* ุ ถ้า type === 'DEL' notiList = [] แล้วจำโหลดข่อมูลรายการใหม่
|
||||
* แต่ถ่าไม่ notiList จะ เพิ่มข้อมูลรายการไปเรื่อยๆ
|
||||
*
|
||||
* @param index รายการแจ้งเตือน
|
||||
* @param type ประเภทรายการโหลด โหลดหลัง Delete, โหลดปกติ
|
||||
*/
|
||||
async function getDataNotification(index: number, type: string) {
|
||||
const thaiOptions: Intl.DateTimeFormatOptions = {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
|
|
@ -97,7 +101,6 @@ const getDataNotification = async (index: number, type: string) => {
|
|||
.then((res: any) => {
|
||||
const response = res.data.result.data;
|
||||
totalInbox.value = res.data.result.total;
|
||||
|
||||
let list: notiType[] = [];
|
||||
if (type === "DEL") {
|
||||
notiList.value = [];
|
||||
|
|
@ -121,58 +124,45 @@ const getDataNotification = async (index: number, type: string) => {
|
|||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {});
|
||||
};
|
||||
|
||||
onBeforeMount(async () => {
|
||||
reles.value = await tokenParsed();
|
||||
// ดิงชื่อผู้ใช้งานจาก keycloak
|
||||
const tokenParsedData: any = await tokenParsed();
|
||||
if (tokenParsedData != null) {
|
||||
fullname.value = tokenParsedData.name;
|
||||
role.value = tokenParsedData.role;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* toggleBtnRight ปุ่มย่อ ขยาย drawer ขวา
|
||||
*/
|
||||
const toggleBtnRight = () => {
|
||||
function toggleBtnRight() {
|
||||
drawerR.value = !drawerR.value;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* toggleBtnLeft ปุ่มย่อ ขยาย drawer ซ้าย เมื่อหน้าจอ ย่อถึงขนาด 1024 px
|
||||
* ปกติเป็นการย่อโดยใช้ Ministate
|
||||
*/
|
||||
const toggleBtnLeft = () => {
|
||||
function toggleBtnLeft() {
|
||||
if (window.innerWidth < 1024) {
|
||||
drawerL.value = !drawerL.value;
|
||||
} else {
|
||||
miniState.value = !miniState.value;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Event onScroll นำ ตำแหน่ง top ที่ scroll
|
||||
* ใช้ function updateScroll
|
||||
*/
|
||||
const onScroll = (scroll: ScrollType) => {
|
||||
function onScroll(scroll: ScrollType) {
|
||||
const { position } = scroll;
|
||||
|
||||
updateScroll(position);
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* updateScroll เป็น function active แทปด้านขวา
|
||||
*/
|
||||
const updateScroll = (position: number) => {
|
||||
function updateScroll(position: number) {
|
||||
// เมื่อ position เป็น undifind ให้ position เป็น ตำแหน่ง top ที่ scroll
|
||||
if (position === void 0) {
|
||||
position = document.documentElement.scrollTop || document.body.scrollTop;
|
||||
}
|
||||
|
||||
let last;
|
||||
|
||||
/**
|
||||
|
|
@ -187,38 +177,14 @@ const updateScroll = (position: number) => {
|
|||
tocEl.scrollIntoView({ block: "nearest" });
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* ให้แสดง แทปด้านขวา เมื่อเข้าหน้า รายละเอียดทะเบียนประวัติ และ rightActive เท่ากับ true
|
||||
*/
|
||||
const activeBtn = () => {
|
||||
function activeBtn() {
|
||||
return route.name == "registryDetail" && rightActive.value;
|
||||
};
|
||||
|
||||
/**
|
||||
* เมื่อเริ่มต้นโปรแกรมให้ฟัง event resize และ function myEventHandler
|
||||
* set function myEventHandler เพราะ state ยังไม่เซ็ท , state เซ็ทเมื่อ หน้าจอเริ่ม ขยับหน้าจอ
|
||||
* เริ่มเข้ามา state rightActive เป็น state ที่โชว์ ปุ่มขวา
|
||||
* ยังจับ boolean ผิด จึงต้อง set
|
||||
*/
|
||||
onMounted(async () => {
|
||||
await fetchmsgNoread();
|
||||
// await getDataNotification(1, "NOMAL");
|
||||
myEventHandler(null, false);
|
||||
window.addEventListener("resize", (e: any) => {
|
||||
myEventHandler(e, true);
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* เมื่อออกจากโปรแกรม ให้ ยกเลิกการฟัง event resize
|
||||
*/
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener("resize", (e: any) => {
|
||||
myEventHandler(e, true);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @param e event ของ resize
|
||||
|
|
@ -230,7 +196,7 @@ onUnmounted(() => {
|
|||
* rightActive = true ; แสดงปุ่ม drawer ด้าน ขวา
|
||||
* rightActive = false; ไม่แสดงปุ่ม drawer ด้าน ขวา
|
||||
*/
|
||||
const myEventHandler = (e: any, setSCroll: boolean) => {
|
||||
function myEventHandler(e: any, setSCroll: boolean) {
|
||||
if (setSCroll) {
|
||||
resize.value = e.target.innerWidth;
|
||||
} else {
|
||||
|
|
@ -249,7 +215,7 @@ const myEventHandler = (e: any, setSCroll: boolean) => {
|
|||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* ตรวจสอบ path นั้นๆ ว่ายังอยู่ที่ path นั้น แม้จะเป็น path ที่มี child แท็ปก็ยังจะ active อยู่เช่น
|
||||
|
|
@ -257,60 +223,63 @@ const myEventHandler = (e: any, setSCroll: boolean) => {
|
|||
* แต่จะไม่ active เมื่อ path นั้น มี child path /main/อื่นๆ
|
||||
* @param path string
|
||||
*/
|
||||
const activeMenu = (path: string) => {
|
||||
function activeMenu(path: string) {
|
||||
const bool = route.name === path;
|
||||
|
||||
return bool;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* logout keycloak
|
||||
* confirm ก่อนออกจากระบบ
|
||||
*/
|
||||
const doLogout = () => {
|
||||
function doLogout() {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
logout();
|
||||
},
|
||||
// keycloak.logout({
|
||||
// redirectUri: `${window.location.protocol}//${window.location.host}/`,
|
||||
// })
|
||||
// authen with keycloak client
|
||||
"ยืนยันการออกจากระบบ",
|
||||
"ต้องการออกจากระบบใช่หรือไม่?"
|
||||
);
|
||||
};
|
||||
|
||||
function deleteCookie(name: string) {
|
||||
document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
|
||||
}
|
||||
|
||||
const clickDelete = async (id: string, index: number) => {
|
||||
/**
|
||||
* ยืนยีนการลบรายการข้อความแจ้งเตือน
|
||||
*
|
||||
* @param id ข้อความแจ้งเตือน
|
||||
* @param index ตำแหน่งของข้อมูล
|
||||
*/
|
||||
async function clickDelete(id: string, index: number) {
|
||||
dialogRemove($q, async () => {
|
||||
showLoader();
|
||||
await http
|
||||
.delete(config.API.msgId(id))
|
||||
.then(() => {
|
||||
.then(async () => {
|
||||
notiList.value.length === 7 && (await getDataNotification(1, "DEL"));
|
||||
notiList.value.splice(index, 1);
|
||||
success($q, "ลบข้อมูลสำเร็จ");
|
||||
totalInbox.value--;
|
||||
await success($q, "ลบข้อมูลสำเร็จ");
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
notiList.value.length === 7 && getDataNotification(1, "DEL");
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
const totalInbox = ref<number>(0);
|
||||
const totalNoti = ref<number>(0);
|
||||
const page = ref<number>(0);
|
||||
const totalInbox = ref<number>(0); //จำนวนของรายการแจ้งเตือน
|
||||
const totalNoti = ref<number>(0); //จำนวนของการแจ้งเตือน
|
||||
const page = ref<number>(0); // หน้า
|
||||
|
||||
function onLoad(index: any, done: any) {
|
||||
/**
|
||||
* ฟังก์ชัน onLoad ทำงานเมื่อโหลดข้อมูลเพิ่มเติมในรายการแจ้งเตือน
|
||||
*
|
||||
* @param index - ของรายการที่กำลังโหลด
|
||||
* @param done - ฟังก์ชันที่เรียกเมื่อการโหลดเสร็จสิ้น
|
||||
*/
|
||||
function onLoad(index: any, done: Function) {
|
||||
if (
|
||||
notiList.value.length < totalInbox.value ||
|
||||
(notiList.value.length === 0 && totalInbox.value === 0)
|
||||
|
|
@ -322,14 +291,20 @@ function onLoad(index: any, done: any) {
|
|||
}, 1500);
|
||||
}
|
||||
}
|
||||
const handleButtonClick = () => {
|
||||
|
||||
/**
|
||||
*
|
||||
* ใช้เพื่อสร้างและเปิดหน้าต่างคู่มือการใช้งาน
|
||||
* ถ้า config.generatePopupPath() ส่งคืน URL ที่เป็นฐาน, จะทำการเปิดหน้าต่างใหม่ด้วยเส้นทางและ query string ที่สร้างขึ้น
|
||||
* ถ้าไม่มีเส้นทางที่จะใช้ จะพิมพ์ข้อความลงใน console เพื่อแจ้งว่าไม่มีคู่มือสำหรับหน้านี้
|
||||
*/
|
||||
function handleButtonClick() {
|
||||
const currentPath = route.name;
|
||||
const queryParams = { role: "admin" }; // Replace with your query parameters
|
||||
const queryString = new URLSearchParams(queryParams).toString();
|
||||
|
||||
// Assuming config.generatePopupPath() returns a base URL
|
||||
const popupBasePath = config.generatePopupPath(currentPath);
|
||||
console.log(currentPath);
|
||||
|
||||
if (popupBasePath) {
|
||||
const popupPath = `${popupBasePath}?${queryString}`;
|
||||
|
|
@ -337,8 +312,14 @@ const handleButtonClick = () => {
|
|||
} else {
|
||||
console.log("No manual available for this page:", currentPath);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชัน watch การเปลี่ยนแปลงของค่า notiTrigger
|
||||
* เมื่อค่า notiTrigger เปลี่ยนเป็น false,
|
||||
* ฟังก์ชันนี้จะทำการอัปเดตรายการแจ้งเตือนทั้งหมดให้เป็นสถานะ "เปิดอ่านแล้ว"
|
||||
* จากนั้นจะเรียกฟังก์ชัน fetchmsgNoread เพื่อดึงข้อมูลข้อความที่ยังไม่ได้อ่าน
|
||||
*/
|
||||
watch(
|
||||
() => notiTrigger.value,
|
||||
() => {
|
||||
|
|
@ -352,6 +333,44 @@ watch(
|
|||
}
|
||||
}
|
||||
);
|
||||
|
||||
/**
|
||||
* ฮุกนี้จะถูกเรียกก่อนที่คอมโพเนนต์จะถูก onMounted
|
||||
* กำหนดบทบาทและชื่อผู้ใช้งานจาก Keycloak
|
||||
*/
|
||||
onBeforeMount(async () => {
|
||||
reles.value = await tokenParsed();
|
||||
|
||||
// ดิงชื่อผู้ใช้งานจาก keycloak
|
||||
const tokenParsedData: any = await tokenParsed();
|
||||
if (tokenParsedData != null) {
|
||||
fullname.value = tokenParsedData.name;
|
||||
role.value = tokenParsedData.role;
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* เมื่อเริ่มต้นโปรแกรมให้ฟัง event resize และ function myEventHandler
|
||||
* set function myEventHandler เพราะ state ยังไม่เซ็ท , state เซ็ทเมื่อ หน้าจอเริ่ม ขยับหน้าจอ
|
||||
* เริ่มเข้ามา state rightActive เป็น state ที่โชว์ ปุ่มขวา
|
||||
* ยังจับ boolean ผิด จึงต้อง set
|
||||
*/
|
||||
onMounted(async () => {
|
||||
await fetchmsgNoread();
|
||||
myEventHandler(null, false);
|
||||
window.addEventListener("resize", (e: any) => {
|
||||
myEventHandler(e, true);
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* เมื่อออกจากโปรแกรม ให้ ยกเลิกการฟัง event resize
|
||||
*/
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener("resize", (e: any) => {
|
||||
myEventHandler(e, true);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- โครงเว็บ -->
|
||||
|
|
|
|||
|
|
@ -1,30 +1,31 @@
|
|||
<!-- authen with keycloak client -->
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
import axios from "axios";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useQuasar } from "quasar";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import CustomComponent from "@/components/CustomDialog.vue";
|
||||
import { setAuthen, authenticated, tokenParsed } from "@/plugins/auth";
|
||||
import axios from "axios";
|
||||
|
||||
import { useRouter } from "vue-router";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { setAuthen, authenticated, tokenParsed } from "@/plugins/auth";
|
||||
import CustomComponent from "@/components/CustomDialog.vue";
|
||||
|
||||
const $q = useQuasar();
|
||||
const router = useRouter();
|
||||
const mixin = useCounterMixin();
|
||||
const $q = useQuasar(); //ใช้ noti quasar
|
||||
|
||||
const { showLoader, hideLoader, messageError } = mixin;
|
||||
const isDisplay = ref<boolean>(true); // check display login page
|
||||
|
||||
const username = ref<string>("");
|
||||
const password = ref<string>("");
|
||||
const username = ref<string>(""); // ผู้ใช้
|
||||
const password = ref<string>(""); // รหัสผ่าน
|
||||
|
||||
/**
|
||||
* @description ฟังก์ชั่นเข้าสู่ระบบ
|
||||
* ฟังก์ชั่นเข้าสู่ระบบ
|
||||
*/
|
||||
async function onSubmit() {
|
||||
showLoader();
|
||||
const formdata = new URLSearchParams();
|
||||
|
||||
const formdata = new URLSearchParams();
|
||||
formdata.append("username", username.value);
|
||||
formdata.append("password", password.value);
|
||||
|
||||
|
|
@ -54,8 +55,11 @@ async function onSubmit() {
|
|||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* ทำงานเมื่อ components ถูกเรียกใช้งาน
|
||||
*/
|
||||
onMounted(async () => {
|
||||
// check authen and role of system
|
||||
//ตรวจสอบการยืนยันตัวตนของผู้ใช้งาน
|
||||
const checkAuthen = await authenticated();
|
||||
if (checkAuthen) {
|
||||
isDisplay.value = false;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue