hrms-bangkok/hrms-admin
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Refactoring code dashboard

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-09-03 10:53:11 +07:00
parent bb476051f2
commit d41a2516c3
4 changed files with 265 additions and 231 deletions
Download patch file Download diff file Expand all files Collapse all files

79
src/components/Dialogs/PopupReplyInbox.vue
View file

@ -1,18 +1,20 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, watch } from "vue"; import { ref } from "vue";
import { useCounterMixin } from "@/stores/mixin"; import { useQuasar } from "quasar";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import DialogHeader from "@/components/DialogHeader.vue"; import DialogHeader from "@/components/DialogHeader.vue";
import { useQuasar } from "quasar";
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
const $q = useQuasar(); const $q = useQuasar();
const { showLoader, hideLoader, success, messageError, dialogConfirm } =
useCounterMixin(); //เรียกฟังก์ชันกลาง
const { showLoader, hideLoader, success, messageError } = mixin; /**
* props จาก components Dashborad
const myForm = ref<any>(); */
const props = defineProps({ const props = defineProps({
modal: { modal: {
type: Boolean, type: Boolean,
@ -28,29 +30,30 @@ const props = defineProps({
}, },
}); });
const subject = ref<string>(""); const subject = ref<string>(""); // หัวข้อ
const body = ref<string>(""); const body = ref<string>(""); //ข้อความ
async function submit() {
myForm.value.validate().then(async (result: boolean) => { /**
if (result) { * ยืนยันการจตอบกลับการส่งข้อความ
// props.savaForm(reason.value); */
showLoader(); function onSubmit() {
await http dialogConfirm($q, async () => {
.put(config.API.replyMessage(props.idInbox), { showLoader();
subject: subject.value, await http
body: body.value, .put(config.API.replyMessage(props.idInbox), {
}) subject: subject.value,
.then((res) => { body: body.value,
props.clickClose() })
success($q, "ส่งข้อความสำเร็จ"); .then(() => {
}) props.clickClose();
.catch((e) => { success($q, "ส่งข้อความสำเร็จ");
messageError($q, e); })
}) .catch((e) => {
.finally(() => { messageError($q, e);
hideLoader(); })
}); .finally(() => {
} hideLoader();
});
}); });
} }
</script> </script>
@ -58,7 +61,7 @@ async function submit() {
<template> <template>
<q-dialog v-model="props.modal" persistent> <q-dialog v-model="props.modal" persistent>
<q-card style="width: 40vw; max-width: 40vw"> <q-card style="width: 40vw; max-width: 40vw">
<q-form ref="myForm"> <q-form greedy @submit.prevent @validation-success="onSubmit">
<DialogHeader tittle="ส่งข้อความ" :close="clickClose" /> <DialogHeader tittle="ส่งข้อความ" :close="clickClose" />
<q-separator /> <q-separator />
<q-card-section class="q-pa-sm bg-grey-1"> <q-card-section class="q-pa-sm bg-grey-1">
@ -71,7 +74,7 @@ async function submit() {
outlined outlined
dense dense
lazy-rules lazy-rules
:rules="[(val) => !!val || 'กรุณากรอกหัวข้อ']" :rules="[(val:string) => !!val || 'กรุณากรอกหัวข้อ']"
v-model="subject" v-model="subject"
label="หัวข้อ" label="หัวข้อ"
/> />
@ -83,7 +86,7 @@ async function submit() {
outlined outlined
dense dense
lazy-rules lazy-rules
:rules="[(val) => !!val || 'กรุณากรอกข้อความ']" :rules="[(val:string) => !!val || 'กรุณากรอกข้อความ']"
v-model="body" v-model="body"
label="ข้อความ" label="ข้อความ"
/> />
@ -93,15 +96,7 @@ async function submit() {
</q-card-section> </q-card-section>
<q-separator /> <q-separator />
<q-card-actions align="right"> <q-card-actions align="right">
<q-btn <q-btn label="ส่งข้อความ" color="public" type="submit">
dense
unelevated
label="ส่งข้อความ"
color="public"
@click="submit"
class="q-px-md"
>
<!-- icon="mdi-content-save-outline" -->
<q-tooltip>บันทึก</q-tooltip> <q-tooltip>บันทึก</q-tooltip>
</q-btn> </q-btn>
</q-card-actions> </q-card-actions>

166
src/views/Dashboard.vue
View file

@ -6,12 +6,13 @@ import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
import PopupReplyInbox from "@/components/Dialogs/PopupReplyInbox.vue";
import type { import type {
ResponseInbox, ResponseInbox,
DataInbox, DataInbox,
} from "@/interface/response/dashboard/dashboard"; } from "@/interface/response/dashboard/dashboard";
import PopupReplyInbox from "@/components/Dialogs/PopupReplyInbox.vue";
const $q = useQuasar(); const $q = useQuasar();
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
const { const {
@ -23,25 +24,35 @@ const {
dialogRemove, dialogRemove,
} = mixin; } = mixin;
const splitterModel = ref<number>(30); const splitterModel = ref<number>(30); // ขนาดของกล่องข้อความ
const link = ref<string>("0"); const link = ref<string>("0"); // รายการกล่องข้อความ
const inboxList = ref<DataInbox[]>([]); const inboxList = ref<DataInbox[]>([]); //ข้อมูลรายการกล่องข้อความ
const data = 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); * โหลดรายการกล่องข้องความ
}); * เมื่อ index = 1 โชว์โหลด ถ้าไม่ไม่แสดง
*
const isLoadInbox = ref<boolean>(false); * @param index หน้าที่ต้องการโหลด
const getData = async (index: number) => { */
async function getData(index: number) {
isLoadInbox.value = false; isLoadInbox.value = false;
index === 1 && showLoader(); index === 1 && showLoader();
index != 0 && index != 0 &&
(await http (await http
.get(config.API.msgInbox + `?page=${index}&pageSize=${10}`) .get(config.API.msgInbox + `?page=${index}&pageSize=${10}`)
.then((res: any) => { .then(async (res) => {
const data = res.data.result.data; const data = await res.data.result.data;
totalInbox.value = res.data.result.total; totalInbox.value = await res.data.result.total;
let list: DataInbox[] = []; let list: DataInbox[] = [];
data.map((e: ResponseInbox) => { data.map((e: ResponseInbox) => {
@ -66,15 +77,19 @@ const getData = async (index: number) => {
} }
}) })
.catch((e) => { .catch((e) => {
// messageError($q, e); messageError($q, e);
}) })
.finally(() => { .finally(() => {
isLoadInbox.value = true; isLoadInbox.value = true;
hideLoader(); hideLoader();
})); }));
}; }
const selectInbox = (id: string) => { /**
* เลือกแสดงกล่องข้อความ
* @param id ข้อความ
*/
function selectInbox(id: string) {
http http
.get(config.API.msgInboxDelete(id)) .get(config.API.msgInboxDelete(id))
.then(() => { .then(() => {
@ -84,54 +99,71 @@ const selectInbox = (id: string) => {
item.isOpen = true; item.isOpen = true;
} }
}) })
.catch((err) => {}); .catch((err) => {
}; messageError($q, 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();
}); });
}; }
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() { function dialogRepleOpen() {
modalReply.value = true; modalReply.value = true;
} }
/**
* ปิด popup การตอบกลับข้อความ
*/
function modalReplyClose() { function modalReplyClose() {
modalReply.value = false; modalReply.value = false;
} }
const scrollTargetRef = ref<any>(null); /**
const totalInbox = ref<number>(0); * ฟังก์ชัน onLoad ทำงานเมื่อโหลดข้อมูลเพิ่มเติมในรายการแจ้งเตือน
*
function onLoad(index: number, done: any) { * @param index - ของรายการที่กำลังโหลด
* @param done - ฟังก์ชันที่เรียกเมื่อการโหลดเสร็จสิ้น
*/
function onLoad(index: number, done: Function) {
const num = index === 1 ? 0 : index++; const num = index === 1 ? 0 : index++;
if (inboxList.value.length < totalInbox.value && isLoadInbox) { if (inboxList.value.length < totalInbox.value && isLoadInbox) {
setTimeout(() => { setTimeout(() => {
@ -140,10 +172,10 @@ function onLoad(index: number, done: any) {
}, 3000); }, 3000);
} }
} }
const thaiOptions: Intl.DateTimeFormatOptions = {
hour: "2-digit", onMounted(async () => {
minute: "2-digit", await getData(1);
}; });
</script> </script>
<!-- page:หน้าแรก --> <!-- page:หน้าแรก -->
@ -308,14 +340,6 @@ const thaiOptions: Intl.DateTimeFormatOptions = {
color="red" color="red"
@click="deleteData(d.no)" @click="deleteData(d.no)"
/> />
<!-- <q-btn
flat
round
dense
icon="mdi-dots-vertical"
size="10px"
color="grey-7"
/> -->
</div> </div>
</q-item-section> </q-item-section>
</q-item> </q-item>
@ -355,14 +379,6 @@ const thaiOptions: Intl.DateTimeFormatOptions = {
</q-list> </q-list>
</q-menu> </q-menu>
</div> </div>
<!-- <q-btn
unelevated
size="12px"
dense
class="q-ml-md q-px-sm bg-blue-1 text-blue-7"
label="ดาวน์โหลดทั้งหมด"
/> -->
</div> </div>
</div> </div>
</div> </div>

225
src/views/MainLayout.vue
View file

@ -1,14 +1,15 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, onUnmounted, watch, onBeforeMount } from "vue"; import { ref, onMounted, onUnmounted, watch, onBeforeMount } from "vue";
import { useRoute } from "vue-router";
import { useDataStore } from "@/stores/data";
import { storeToRefs } from "pinia"; import { storeToRefs } from "pinia";
import { scroll, useQuasar } from "quasar"; import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { logout, tokenParsed } from "@/plugins/auth";
import http from "@/plugins/http"; import { useRoute } from "vue-router";
import config from "@/app.config"; 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 { import type {
ScrollType, ScrollType,
@ -16,15 +17,12 @@ import type {
optionType, optionType,
} from "../interface/request/main/main"; } from "../interface/request/main/main";
import { menuList } from "../interface/request/main/main"; import { menuList } from "../interface/request/main/main";
import checkPermission from "@/plugins/checkPermission";
// import { useroleUserDataStore } from "@/stores/roleUser"; const $q = useQuasar();
const { setVerticalScrollPosition } = scroll;
const store = useDataStore(); const store = useDataStore();
const route = useRoute(); const route = useRoute();
const link = ref<string>(""); const { loader } = storeToRefs(store);
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง const { changeTab } = store;
const { const {
showLoader, showLoader,
hideLoader, hideLoader,
@ -33,22 +31,16 @@ const {
messageError, messageError,
date2Thai, date2Thai,
dialogConfirm, dialogConfirm,
} = mixin; } = useCounterMixin();
// const DataStore = useroleUserDataStore(); const fullname = ref<string>(""); // ชื่อผู้ใช้งาน
// const { fetchroleUser } = DataStore; const link = ref<string>("");
const miniState = ref<boolean>(false); // ย่อเมนูหลัก
const id = ref<string>(""); const drawerR = ref<boolean>(false); //ปุ่มย่อขวา
const $q = useQuasar(); const rightActive = ref<boolean>(false); // แสดงแถบด้านขวา
const { loader } = storeToRefs(store);
const { changeTab } = store;
const miniState = ref<boolean>(false);
const drawerR = ref<boolean>(false);
const rightActive = ref<boolean>(false);
const resize = ref<number>(0); const resize = ref<number>(0);
const active = ref<number>(0); const active = ref<number>(0);
const drawerL = ref<boolean>(false); const drawerL = ref<boolean>(false);
const fullname = ref<string>("");
const role = ref<string[]>([]); const role = ref<string[]>([]);
const reles = ref<any[]>([]); const reles = ref<any[]>([]);
const notiTrigger = ref<boolean>(false); const notiTrigger = ref<boolean>(false);
@ -75,6 +67,9 @@ const options = ref<optionType[]>([
}, },
]); ]);
/**
* fetch จำนวนของกาแจ้งเตือน
*/
async function fetchmsgNoread() { async function fetchmsgNoread() {
await http await http
.get(config.API.msgNoread()) .get(config.API.msgNoread())
@ -86,8 +81,17 @@ async function fetchmsgNoread() {
}); });
} }
const statusLoad = ref<boolean>(false); const statusLoad = ref<boolean>(false); // สถานการโหลด
const getDataNotification = async (index: number, type: string) => {
/**
* fetch ข้อมูลรายการแจ้งเตือน
* ุ ถ้า type === 'DEL' notiList = [] แล้วจำโหลดข่อมูลรายการใหม่
* แต่ถ่าไม่ notiList จะ เพิ่มข้อมูลรายการไปเรื่อยๆ
*
* @param index รายการแจ้งเตือน
* @param type ประเภทรายการโหลด โหลดหลัง Delete, โหลดปกติ
*/
async function getDataNotification(index: number, type: string) {
const thaiOptions: Intl.DateTimeFormatOptions = { const thaiOptions: Intl.DateTimeFormatOptions = {
hour: "2-digit", hour: "2-digit",
minute: "2-digit", minute: "2-digit",
@ -97,7 +101,6 @@ const getDataNotification = async (index: number, type: string) => {
.then((res: any) => { .then((res: any) => {
const response = res.data.result.data; const response = res.data.result.data;
totalInbox.value = res.data.result.total; totalInbox.value = res.data.result.total;
let list: notiType[] = []; let list: notiType[] = [];
if (type === "DEL") { if (type === "DEL") {
notiList.value = []; notiList.value = [];
@ -121,58 +124,45 @@ const getDataNotification = async (index: number, type: string) => {
}) })
.catch((e) => { .catch((e) => {
messageError($q, 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 ขวา * toggleBtnRight ปุ่มย่อ ขยาย drawer ขวา
*/ */
const toggleBtnRight = () => { function toggleBtnRight() {
drawerR.value = !drawerR.value; drawerR.value = !drawerR.value;
}; }
/** /**
* toggleBtnLeft ปุ่มย่อ ขยาย drawer ซ้าย เมื่อหน้าจอ ย่อถึงขนาด 1024 px * toggleBtnLeft ปุ่มย่อ ขยาย drawer ซ้าย เมื่อหน้าจอ ย่อถึงขนาด 1024 px
* ปกติเป็นการย่อโดยใช้ Ministate * ปกติเป็นการย่อโดยใช้ Ministate
*/ */
const toggleBtnLeft = () => { function toggleBtnLeft() {
if (window.innerWidth < 1024) { if (window.innerWidth < 1024) {
drawerL.value = !drawerL.value; drawerL.value = !drawerL.value;
} else { } else {
miniState.value = !miniState.value; miniState.value = !miniState.value;
} }
}; }
/** /**
* Event onScroll นำ ตำแหน่ง top ที่ scroll * Event onScroll นำ ตำแหน่ง top ที่ scroll
* ใช้ function updateScroll * ใช้ function updateScroll
*/ */
const onScroll = (scroll: ScrollType) => { function onScroll(scroll: ScrollType) {
const { position } = scroll; const { position } = scroll;
updateScroll(position); updateScroll(position);
}; }
/** /**
* updateScroll เป็น function active แทปด้านขวา * updateScroll เป็น function active แทปด้านขวา
*/ */
const updateScroll = (position: number) => { function updateScroll(position: number) {
// เมื่อ position เป็น undifind ให้ position เป็น ตำแหน่ง top ที่ scroll // เมื่อ position เป็น undifind ให้ position เป็น ตำแหน่ง top ที่ scroll
if (position === void 0) { if (position === void 0) {
position = document.documentElement.scrollTop || document.body.scrollTop; position = document.documentElement.scrollTop || document.body.scrollTop;
} }
let last; let last;
/** /**
@ -187,38 +177,14 @@ const updateScroll = (position: number) => {
tocEl.scrollIntoView({ block: "nearest" }); tocEl.scrollIntoView({ block: "nearest" });
} }
} }
}; }
/** /**
* ให้แสดง แทปด้านขวา เมื่อเข้าหน้า รายละเอียดทะเบียนประวัติ และ rightActive เท่ากับ true * ให้แสดง แทปด้านขวา เมื่อเข้าหน้า รายละเอียดทะเบียนประวัติ และ rightActive เท่ากับ true
*/ */
const activeBtn = () => { function activeBtn() {
return route.name == "registryDetail" && rightActive.value; 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 * @param e event ของ resize
@ -230,7 +196,7 @@ onUnmounted(() => {
* rightActive = true ; แสดงปุ่ม drawer ด้าน ขวา * rightActive = true ; แสดงปุ่ม drawer ด้าน ขวา
* rightActive = false; ไม่แสดงปุ่ม drawer ด้าน ขวา * rightActive = false; ไม่แสดงปุ่ม drawer ด้าน ขวา
*/ */
const myEventHandler = (e: any, setSCroll: boolean) => { function myEventHandler(e: any, setSCroll: boolean) {
if (setSCroll) { if (setSCroll) {
resize.value = e.target.innerWidth; resize.value = e.target.innerWidth;
} else { } else {
@ -249,7 +215,7 @@ const myEventHandler = (e: any, setSCroll: boolean) => {
} }
} }
} }
}; }
/** /**
* ตรวจสอบ path นั้นๆ ว่ายังอยู่ที่ path นั้น แม้จะเป็น path ที่มี child แท็ปก็ยังจะ active อยู่เช่น * ตรวจสอบ path นั้นๆ ว่ายังอยู่ที่ path นั้น แม้จะเป็น path ที่มี child แท็ปก็ยังจะ active อยู่เช่น
@ -257,60 +223,63 @@ const myEventHandler = (e: any, setSCroll: boolean) => {
* แต่จะไม่ active เมื่อ path นั้น มี child path /main/อื่นๆ * แต่จะไม่ active เมื่อ path นั้น มี child path /main/อื่นๆ
* @param path string * @param path string
*/ */
const activeMenu = (path: string) => { function activeMenu(path: string) {
const bool = route.name === path; const bool = route.name === path;
return bool; return bool;
}; }
/** /**
* logout keycloak * logout keycloak
* confirm ก่อนออกจากระบบ * confirm ก่อนออกจากระบบ
*/ */
const doLogout = () => { function doLogout() {
dialogConfirm( dialogConfirm(
$q, $q,
async () => { async () => {
logout(); 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 () => { dialogRemove($q, async () => {
showLoader(); showLoader();
await http await http
.delete(config.API.msgId(id)) .delete(config.API.msgId(id))
.then(() => { .then(async () => {
notiList.value.length === 7 && (await getDataNotification(1, "DEL"));
notiList.value.splice(index, 1); notiList.value.splice(index, 1);
success($q, "ลบข้อมูลสำเร็จ");
totalInbox.value--; totalInbox.value--;
await success($q, "ลบข้อมูลสำเร็จ");
}) })
.catch((e) => { .catch((e) => {
messageError($q, e); messageError($q, e);
}) })
.finally(async () => { .finally(() => {
notiList.value.length === 7 && getDataNotification(1, "DEL");
hideLoader(); hideLoader();
}); });
}); });
}; }
const totalInbox = ref<number>(0); const totalInbox = ref<number>(0); //จำนวนของรายการแจ้งเตือน
const totalNoti = ref<number>(0); const totalNoti = ref<number>(0); //จำนวนของการแจ้งเตือน
const page = 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 ( if (
notiList.value.length < totalInbox.value || notiList.value.length < totalInbox.value ||
(notiList.value.length === 0 && totalInbox.value === 0) (notiList.value.length === 0 && totalInbox.value === 0)
@ -322,14 +291,20 @@ function onLoad(index: any, done: any) {
}, 1500); }, 1500);
} }
} }
const handleButtonClick = () => {
/**
*
* ใช้เพื่อสร้างและเปิดหน้าต่างคู่มือการใช้งาน
* ถ้า config.generatePopupPath() ส่งคืน URL ที่เป็นฐาน, จะทำการเปิดหน้าต่างใหม่ด้วยเส้นทางและ query string ที่สร้างขึ้น
* ถ้าไม่มีเส้นทางที่จะใช้ จะพิมพ์ข้อความลงใน console เพื่อแจ้งว่าไม่มีคู่มือสำหรับหน้านี้
*/
function handleButtonClick() {
const currentPath = route.name; const currentPath = route.name;
const queryParams = { role: "admin" }; // Replace with your query parameters const queryParams = { role: "admin" }; // Replace with your query parameters
const queryString = new URLSearchParams(queryParams).toString(); const queryString = new URLSearchParams(queryParams).toString();
// Assuming config.generatePopupPath() returns a base URL // Assuming config.generatePopupPath() returns a base URL
const popupBasePath = config.generatePopupPath(currentPath); const popupBasePath = config.generatePopupPath(currentPath);
console.log(currentPath);
if (popupBasePath) { if (popupBasePath) {
const popupPath = `${popupBasePath}?${queryString}`; const popupPath = `${popupBasePath}?${queryString}`;
@ -337,8 +312,14 @@ const handleButtonClick = () => {
} else { } else {
console.log("No manual available for this page:", currentPath); console.log("No manual available for this page:", currentPath);
} }
}; }
/**
* ฟังก์ชัน watch การเปลี่ยนแปลงของค่า notiTrigger
* เมื่อค่า notiTrigger เปลี่ยนเป็น false,
* ฟังก์ชันนี้จะทำการอัปเดตรายการแจ้งเตือนทั้งหมดให้เป็นสถานะ "เปิดอ่านแล้ว"
* จากนั้นจะเรียกฟังก์ชัน fetchmsgNoread เพื่อดึงข้อมูลข้อความที่ยังไม่ได้อ่าน
*/
watch( watch(
() => notiTrigger.value, () => 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> </script>
<!-- โครงเว็บ --> <!-- โครงเว็บ -->

26
src/views/login.vue
View file

@ -1,30 +1,31 @@
<!-- authen with keycloak client --> <!-- authen with keycloak client -->
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted } from "vue"; import { ref, onMounted } from "vue";
import axios from "axios";
import { useRouter } from "vue-router";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin"; import axios from "axios";
import CustomComponent from "@/components/CustomDialog.vue";
import { setAuthen, authenticated, tokenParsed } from "@/plugins/auth";
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 router = useRouter();
const mixin = useCounterMixin(); const mixin = useCounterMixin();
const $q = useQuasar(); //ใช้ noti quasar
const { showLoader, hideLoader, messageError } = mixin; const { showLoader, hideLoader, messageError } = mixin;
const isDisplay = ref<boolean>(true); // check display login page const isDisplay = ref<boolean>(true); // check display login page
const username = ref<string>(""); const username = ref<string>(""); // ผู้ใช้
const password = ref<string>(""); const password = ref<string>(""); // รหัสผ่าน
/** /**
* @description ฟังก์ชั่นเข้าสู่ระบบ * ฟังก์ชั่นเข้าสู่ระบบ
*/ */
async function onSubmit() { async function onSubmit() {
showLoader(); showLoader();
const formdata = new URLSearchParams();
const formdata = new URLSearchParams();
formdata.append("username", username.value); formdata.append("username", username.value);
formdata.append("password", password.value); formdata.append("password", password.value);
@ -54,8 +55,11 @@ async function onSubmit() {
}); });
} }
/**
* ทำงานเมื่อ components ถูกเรียกใช้งาน
*/
onMounted(async () => { onMounted(async () => {
// check authen and role of system //ตรวจสอบการยืนยันตัวตนของผู้ใช้งาน
const checkAuthen = await authenticated(); const checkAuthen = await authenticated();
if (checkAuthen) { if (checkAuthen) {
isDisplay.value = false; isDisplay.value = false;