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,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>
|
||||
|
||||
<!-- โครงเว็บ -->
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue