remove checkin out of project & Refactoring code module 01_dashboard
This commit is contained in:
parent
ec80361a81
commit
75c0e27880
9 changed files with 105 additions and 1069 deletions
34
src/modules/01_dashboard/interface/Main.ts
Normal file
34
src/modules/01_dashboard/interface/Main.ts
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
interface InboxList {
|
||||
id: string;
|
||||
subject: string;
|
||||
body: string;
|
||||
receiverUserId: string;
|
||||
payload: Object | null;
|
||||
isOpen: boolean;
|
||||
receiveDate: Date | null;
|
||||
openDate: Date | null;
|
||||
createdFullName?: string;
|
||||
createdAt?: Date;
|
||||
}
|
||||
|
||||
interface InboxDetail {
|
||||
no: string;
|
||||
sender: string;
|
||||
subject: string;
|
||||
body: string;
|
||||
ratingModel: number;
|
||||
receiveDate?: string;
|
||||
payload: Object | null;
|
||||
isOpen: boolean;
|
||||
}
|
||||
|
||||
interface MenuMainList {
|
||||
icon: string;
|
||||
title: string;
|
||||
sub: string;
|
||||
color: string;
|
||||
path: string;
|
||||
active: boolean;
|
||||
}
|
||||
|
||||
export type { InboxList, InboxDetail, MenuMainList };
|
||||
|
|
@ -1,6 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted, Static } from "vue";
|
||||
const link = ref<number>(1);
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import router from "@/router";
|
||||
import http from "@/plugins/http";
|
||||
|
|
@ -9,23 +8,21 @@ import { useCounterMixin } from "@/stores/mixin";
|
|||
import PopupReplyInbox from "@/components/PopupReplyInbox.vue";
|
||||
import PopupDetailInbox from "@/components/PopupDetailInbox.vue";
|
||||
import { tokenParsed } from "@/plugins/auth";
|
||||
import {
|
||||
InboxDetail,
|
||||
InboxList,
|
||||
MenuMainList,
|
||||
} from "@/modules/01_dashboard/interface/Main";
|
||||
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const { showLoader, hideLoader, date2Thai, messageError } = mixin;
|
||||
|
||||
const fullname = ref<string>("");
|
||||
const inboxList = ref<any>([
|
||||
// {
|
||||
// no: 1,
|
||||
// sender: "เจ้าหน้าที่ทะเบียนประวัติ",
|
||||
// subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
|
||||
// timereceive: "13/12/2565",
|
||||
// body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล",
|
||||
// ratingModel: 0,
|
||||
// },
|
||||
]);
|
||||
const items = ref<any>([
|
||||
const fullname = ref<string>(""); // ชื่อผู้ใช้
|
||||
const inboxList = ref<InboxDetail[]>([]); // รายการกล่องข้อความ
|
||||
const idInboxActive = ref<string>(); // Id ข้อความที่เลือก
|
||||
// รายการเมนูหลักของระบบ
|
||||
const items = ref<MenuMainList[]>([
|
||||
{
|
||||
icon: "mdi-account-group-outline",
|
||||
title: "แผนผังองค์กร",
|
||||
|
|
@ -74,14 +71,6 @@ const items = ref<any>([
|
|||
path: "/transfer",
|
||||
active: false,
|
||||
},
|
||||
/*{
|
||||
icon: "mdi-account-remove-outline",
|
||||
title: "ลาออก",
|
||||
sub: "ทำเรื่องลาออก",
|
||||
color: "orange-3",
|
||||
path: "/retire",
|
||||
active: false,
|
||||
},*/
|
||||
{
|
||||
icon: "mdi-scale-balance",
|
||||
title: "อุทธรณ์ร้องทุกข์",
|
||||
|
|
@ -114,44 +103,41 @@ const items = ref<any>([
|
|||
path: "/scholarship",
|
||||
active: false,
|
||||
},
|
||||
// {
|
||||
// icon: "mdi-school",
|
||||
// title: "ทดลองงาน",
|
||||
// sub: "รายการงานที่ได้รับมอบหมาย",
|
||||
// color: "teal-2",
|
||||
// path: "/probation",
|
||||
// active: false,
|
||||
// },
|
||||
]);
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchlistInbox(1);
|
||||
await fetchlistInbox(1); // ดึงข้อมูลกล่องข้อความ
|
||||
// ดึงข้อมูลผู้ใช้
|
||||
const user = await tokenParsed();
|
||||
if (user) {
|
||||
fullname.value = user.name;
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* ฟังก์ชั่นดึงข้อมูลกล่องข้อความ
|
||||
* @param index หน้าที่โหลดข้อมูล
|
||||
*/
|
||||
const fetchlistInbox = async (index: number) => {
|
||||
index === 1 && showLoader();
|
||||
index != 0 &&
|
||||
(await http
|
||||
.get(config.API.msgInbox + `?page=${index}&pageSize=${10}`)
|
||||
.then((res) => {
|
||||
let data = res.data.result.data;
|
||||
let data: InboxList[] = res.data.result.data;
|
||||
totalInbox.value = res.data.result.total;
|
||||
let listItem: any = [];
|
||||
let listItem: InboxDetail[] = [];
|
||||
if (data && data.length > 0) {
|
||||
data.map((e: any) => {
|
||||
console.log(data);
|
||||
|
||||
data.map((e: InboxList) => {
|
||||
listItem.push({
|
||||
no: e.id ?? "",
|
||||
sender:
|
||||
e.createdFullName == "" || e.createdFullName == null
|
||||
? "เจ้าหน้าที่"
|
||||
: e.createdFullName,
|
||||
sender: !e.createdFullName ? "เจ้าหน้าที่" : e.createdFullName,
|
||||
subject: e.subject ?? "",
|
||||
timereceive: date2Thai(e.createdAt),
|
||||
body: e.body ?? "-",
|
||||
ratingModel: 0,
|
||||
receiveDate: e.receiveDate,
|
||||
receiveDate: date2Thai(e.receiveDate, false, true),
|
||||
payload: e.payload,
|
||||
isOpen: e.isOpen,
|
||||
});
|
||||
|
|
@ -159,44 +145,57 @@ const fetchlistInbox = async (index: number) => {
|
|||
inboxList.value.push(...listItem);
|
||||
}
|
||||
})
|
||||
// .catch((err) => {
|
||||
// console.log(err);
|
||||
// })
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
}));
|
||||
};
|
||||
|
||||
const transferToPage = (path?: string) => {
|
||||
/**
|
||||
* ฟังก์ชั่น redirect ไปหน้าระบบ
|
||||
* @param path ที่อยู่หน้า
|
||||
*/
|
||||
const goToPage = (path?: string) => {
|
||||
router.push(`${path}`);
|
||||
};
|
||||
|
||||
// Dialog Reply
|
||||
const modalReply = ref<boolean>(false);
|
||||
const contactNo = ref<string>();
|
||||
const modalReply = ref<boolean>(false); // เปิด/ปิด dialog ตอบกลับข้อความ/ส่งข้อความ
|
||||
const contactNo = ref<string>(); // id ข้อความที่ต้องการตอบกลับ
|
||||
/**
|
||||
* ฟังก์ชั่นเปิด dialog ตอบกลับข้อความ
|
||||
* @param id id ข้อความ
|
||||
*/
|
||||
function dialogRepleOpen(id: string) {
|
||||
contactNo.value = id;
|
||||
modalReply.value = true;
|
||||
contactNo.value = id; // กำหนด id ข้อความ
|
||||
modalReply.value = true; // เปิด dialog ตอบกลับข้อความ
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชั่นปิด dialog ตอบกลับข้อความ
|
||||
*/
|
||||
function modalReplyClose() {
|
||||
contactNo.value = "";
|
||||
modalReply.value = false;
|
||||
contactNo.value = ""; // ล้าง id ข้อความ
|
||||
modalReply.value = false; // ปิด dialog ตอบกลับข้อความ
|
||||
}
|
||||
|
||||
const dataInbox = ref<any>();
|
||||
const modalDetial = ref<boolean>(false);
|
||||
async function onClickOpenPopupDetail(data: any) {
|
||||
const dataInbox = ref<InboxDetail>(); // รายละเอียดข้อความ
|
||||
const modalDetial = ref<boolean>(false); // เปิด/ปิด dialog รายละเอียดข้อความ
|
||||
/**
|
||||
* ฟังก์ชั่นเปิด dialog รายละเอียดข้อความ
|
||||
* @param data รายละเอียดข้อความ
|
||||
*/
|
||||
async function onClickOpenPopupDetail(data: InboxDetail) {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.msgInboxRead(data.no))
|
||||
.then(() => {
|
||||
const filterDate = inboxList.value.filter((r: any) => r.no == data.no);
|
||||
const filterDate = inboxList.value.filter(
|
||||
(r: InboxDetail) => r.no == data.no
|
||||
);
|
||||
for (const item of filterDate) {
|
||||
item.isOpen = true;
|
||||
}
|
||||
dataInbox.value = data;
|
||||
link.value = data.no;
|
||||
idInboxActive.value = data.no;
|
||||
modalDetial.value = !modalDetial.value;
|
||||
})
|
||||
.catch((err) => {
|
||||
|
|
@ -207,13 +206,21 @@ async function onClickOpenPopupDetail(data: any) {
|
|||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชั่นกำหนดรายละเอียดข้อความ ส่งไปยัง dialog
|
||||
*/
|
||||
function updateModalDetail(val: boolean) {
|
||||
modalDetial.value = val;
|
||||
modalDetial.value = val; // กำหนดรายละเอียดข้อความที่เลือก
|
||||
}
|
||||
|
||||
const scrollTargetRef = ref<any>(null);
|
||||
const totalInbox = ref<number>(0);
|
||||
async function onLoad(index: number, done: any) {
|
||||
const scrollTargetRef = ref<any>(null); // เช็คการ scroll ของกล่องข้อความ
|
||||
const totalInbox = ref<number>(0); // จำนวนข้อความทั้งหมด
|
||||
/**
|
||||
* ฟังก์ชั่นโหลดข้อมูลกล่องข้อความ
|
||||
* @param index หน้าที่โหลดข้อมูล
|
||||
* @param done ฟังก์ชั่นเมื่อโหลดข้อมูลเสร็จ
|
||||
*/
|
||||
async function onLoad(index: number, done: Function) {
|
||||
const num = index === 1 ? 0 : index++;
|
||||
if (inboxList.value.length < totalInbox.value) {
|
||||
setTimeout(() => {
|
||||
|
|
@ -222,10 +229,6 @@ async function onLoad(index: number, done: any) {
|
|||
}, 3000);
|
||||
}
|
||||
}
|
||||
const thaiOptions: Intl.DateTimeFormatOptions = {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -245,11 +248,7 @@ const thaiOptions: Intl.DateTimeFormatOptions = {
|
|||
v-for="(item, j) in items"
|
||||
:key="j"
|
||||
>
|
||||
<q-card
|
||||
bordered
|
||||
@click="transferToPage(item.path)"
|
||||
class="noactive col-12"
|
||||
>
|
||||
<q-card bordered @click="goToPage(item.path)" class="noactive col-12">
|
||||
<div class="col-12">
|
||||
<q-avatar
|
||||
:color="item.color"
|
||||
|
|
@ -312,20 +311,14 @@ const thaiOptions: Intl.DateTimeFormatOptions = {
|
|||
clickable
|
||||
v-ripple
|
||||
class="'q-py-md q-mb-sm my-menu'"
|
||||
:active="link === item.no"
|
||||
:active="idInboxActive === item.no"
|
||||
active-class="my-menu-link"
|
||||
@click.stop.prevent="onClickOpenPopupDetail(item)"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label caption class="text-weight-light">
|
||||
{{ date2Thai(item.receiveDate) }}
|
||||
{{
|
||||
new Date(item.receiveDate).toLocaleTimeString(
|
||||
"th-TH",
|
||||
thaiOptions
|
||||
)
|
||||
}}
|
||||
น. <q-space />
|
||||
{{ item.receiveDate }}
|
||||
<q-space />
|
||||
</q-item-label>
|
||||
<q-item-label
|
||||
:class="!item.isOpen ? 'text-weight-medium' : 'text-grey-7'"
|
||||
|
|
@ -345,10 +338,6 @@ const thaiOptions: Intl.DateTimeFormatOptions = {
|
|||
>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section side top>
|
||||
<q-item-label caption>{{ item.timereceive }}</q-item-label>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section side top>
|
||||
<q-btn
|
||||
flat
|
||||
|
|
@ -375,54 +364,6 @@ const thaiOptions: Intl.DateTimeFormatOptions = {
|
|||
</q-infinite-scroll>
|
||||
</div>
|
||||
|
||||
<!-- <q-scroll-area style="height: 64vh" v-if="inboxList.length > 0">
|
||||
<q-list
|
||||
v-for="(contact, index) in inboxList"
|
||||
:key="index"
|
||||
class="q-px-md"
|
||||
>
|
||||
<q-item
|
||||
clickable
|
||||
v-ripple
|
||||
class="q-py-md q-mb-sm my-menu"
|
||||
:active="link === contact.no"
|
||||
active-class="my-menu-link"
|
||||
@click="onClickOpenPopupDetail(contact)"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label>
|
||||
{{ contact.sender }}
|
||||
<q-icon
|
||||
v-if="contact.payload"
|
||||
name="mdi-paperclip"
|
||||
color="grey-6"
|
||||
size="18px"
|
||||
/></q-item-label>
|
||||
<q-item-label caption class="text-grey-6" lines="2">{{
|
||||
contact.subject
|
||||
}}</q-item-label>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section side top>
|
||||
<q-item-label caption>{{ contact.timereceive }}</q-item-label>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section side top>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
dense
|
||||
icon="mdi-reply"
|
||||
size="10px"
|
||||
color="grey-7"
|
||||
@click="dialogRepleOpen(contact.no)"
|
||||
>
|
||||
<q-tooltip>ตอบกลับข้อความ</q-tooltip>
|
||||
</q-btn>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-scroll-area> -->
|
||||
<q-banner rounded class="bg-amber-1 text-center q-mx-sm" v-else>
|
||||
<div class="text-yellow-10">
|
||||
<q-icon
|
||||
|
|
|
|||
|
|
@ -1,61 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import Child from "@/components/TestUpgrade.vue";
|
||||
import { ref, computed, watchEffect } from "vue";
|
||||
|
||||
const count = ref<number>(0);
|
||||
const total = ref<number>(0);
|
||||
const first = ref<string>("firstName");
|
||||
const last = ref<string>("lastName");
|
||||
|
||||
const isEven = computed(() => count.value % 2 === 0);
|
||||
|
||||
// watchEffect(() => isEven.value && submit()); // logs true
|
||||
|
||||
const inputValue = ref<string>("");
|
||||
function submit() {
|
||||
console.log("test");
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-card class="q-pa-md">
|
||||
<!-- Parent.vue -->
|
||||
<div class="q-mb-md">
|
||||
<div>Parent count is: {{ count }}</div>
|
||||
<q-btn @click="count = 0">Reset count</q-btn>
|
||||
</div>
|
||||
|
||||
<q-separator />
|
||||
|
||||
<div class="q-mb-md">
|
||||
<Child
|
||||
v-model="count"
|
||||
v-model:total="total"
|
||||
v-model:firstname.lastNameModifiers="first"
|
||||
v-model:lastname.uppercase="last"
|
||||
:name2="inputValue"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- <div class="q-mb-md">
|
||||
<q-btn @click="refs.update">count ++</q-btn>
|
||||
</div> -->
|
||||
</q-card>
|
||||
|
||||
<q-separator />
|
||||
|
||||
<q-card class="q-pa-md">
|
||||
<!-- Parent.vue -->
|
||||
<div class="q-mb-md q-gutter-sm">
|
||||
<div><h4>Test Vue</h4></div>
|
||||
<div>
|
||||
<q-input outlined dense type="text" v-model="inputValue"></q-input>
|
||||
</div>
|
||||
<q-btn @click="submit">submit</q-btn>
|
||||
</div>
|
||||
|
||||
<!-- <div class="q-mb-md">
|
||||
<Child :name="first" />
|
||||
</div> -->
|
||||
</q-card>
|
||||
</template>
|
||||
Loading…
Add table
Add a link
Reference in a new issue