pinia prefix

This commit is contained in:
Thanit Konmek 2023-06-09 11:39:54 +07:00
parent b958dfad20
commit 6febfde058
10 changed files with 916 additions and 7907 deletions

View file

@ -1,41 +0,0 @@
/**
* GLOABL Response Message for User
*
*/
import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
// const $q = useQuasar(); // show dialog Error:runtime-core.esm-bundler.js:40 [Vue warn]: inject() can only be used inside setup() or functional components.
const mixin = useCounterMixin();
const { success, modalConfirm, modalError, modalDelete } = mixin;
/**
*
* @param catchE throw catch error message (e)
* @param q $q quasar dialog
* @returns no values return only pop-up dialog message for user
*/
const manageApiErrorMsg = (catchE: any, q: any) => {
// console.log(catchE);
// console.log(catchE.response);
// console.log(catchE.response.status);
// if (!catchE || !catchE.response || !catchE.response.data) {
// console.error("Invalid error object:", catchE);
// return;
// }
if (catchE.response.status == 401 || catchE.response.data.status == 401) {
modalError(q, "พบข้อผิดพลาด", "กรุณาล็อกอินใหม่อีกครั้ง"); //invalid_token
} else if (
catchE.response.data.status == 400 ||
catchE.response.data.status == 403 ||
catchE.response.data.status == 404
) {
//ใส่เป็น error กลางๆ ถ้ามีเคสให้เห็นมากขึ้น ถึงจะแยกข้อความได้
modalError(q, "พบข้อผิดพลาด", "ไม่พบข้อมูล");
} else {
modalError(q, "พบข้อผิดพลาด", catchE.response.data.message);
}
return;
};
export default manageApiErrorMsg;

View file

@ -1,314 +0,0 @@
/**
*
*/
function date2Thai(srcDate: Date, isFullMonth = false, isTime = false) {
if (srcDate == null) {
return "";
}
const date = new Date(srcDate);
const isValidDate = Boolean(+date);
if (!isValidDate) return srcDate.toString();
if (isValidDate && date.getFullYear() < 1000) return srcDate.toString();
const fullMonthThai = [
"มกราคม",
"กุมภาพันธ์",
"มีนาคม",
"เมษายน",
"พฤษภาคม",
"มิถุนายน",
"กรกฎาคม",
"สิงหาคม",
"กันยายน",
"ตุลาคม",
"พฤศจิกายน",
"ธันวาคม",
];
const abbrMonthThai = [
"ม.ค.",
"ก.พ.",
"มี.ค.",
"เม.ย.",
"พ.ค.",
"มิ.ย.",
"ก.ค.",
"ส.ค.",
"ก.ย.",
"ต.ค.",
"พ.ย.",
"ธ.ค.",
];
let dstYear = 0;
if (date.getFullYear() > 2500) {
dstYear = date.getFullYear();
} else {
dstYear = date.getFullYear() + 543;
}
let dstMonth = "";
if (isFullMonth) {
dstMonth = fullMonthThai[date.getMonth()];
} else {
dstMonth = abbrMonthThai[date.getMonth()];
}
let dstTime = "";
if (isTime) {
const H =
date.getHours().toString().length === 1
? "0" + date.getHours()
: date.getHours();
const M =
date.getMinutes().toString().length === 1
? "0" + date.getMinutes()
: date.getMinutes();
// const S = date.getSeconds().toString().length === 1 ? "0" + date.getSeconds() : date.getSeconds()
// dstTime = " " + H + ":" + M + ":" + S + " น."
dstTime = " " + H + ":" + M + " น.";
}
return date.getDate() + " " + dstMonth + " " + dstYear + dstTime;
}
function dateMonth2Thai(srcDate: Date, isFullMonth = false, isTime = false) {
if (!srcDate) return srcDate;
const date = new Date(srcDate);
const isValidDate = Boolean(+date);
if (!isValidDate) return srcDate;
if (isValidDate && date.getFullYear() < 1000) return srcDate;
const fullMonthThai = [
"มกราคม",
"กุมภาพันธ์",
"มีนาคม",
"เมษายน",
"พฤษภาคม",
"มิถุนายน",
"กรกฎาคม",
"สิงหาคม",
"กันยายน",
"ตุลาคม",
"พฤศจิกายน",
"ธันวาคม",
];
const abbrMonthThai = [
"ม.ค.",
"ก.พ.",
"มี.ค.",
"เม.ย.",
"พ.ค.",
"มิ.ย.",
"ก.ค.",
"ส.ค.",
"ก.ย.",
"ต.ค.",
"พ.ย.",
"ธ.ค.",
];
let dstYear = 0;
if (date.getFullYear() > 2500) {
dstYear = date.getFullYear();
} else {
dstYear = date.getFullYear() + 543;
}
let dstMonth = "";
if (isFullMonth) {
dstMonth = fullMonthThai[date.getMonth()];
} else {
dstMonth = abbrMonthThai[date.getMonth()];
}
let dstTime = "";
if (isTime) {
const H =
date.getHours().toString().length === 1
? "0" + date.getHours()
: date.getHours();
const M =
date.getMinutes().toString().length === 1
? "0" + date.getMinutes()
: date.getMinutes();
// const S = date.getSeconds().toString().length === 1 ? "0" + date.getSeconds() : date.getSeconds()
// dstTime = " " + H + ":" + M + ":" + S + " น."
dstTime = " " + H + ":" + M + " น.";
}
return date.getDate() + " " + dstMonth;
}
function monthYear2Thai(month: number, year: number, isFullMonth = false) {
const date = new Date(`${year}-${month + 1}-1`);
const fullMonthThai = [
"มกราคม",
"กุมภาพันธ์",
"มีนาคม",
"เมษายน",
"พฤษภาคม",
"มิถุนายน",
"กรกฎาคม",
"สิงหาคม",
"กันยายน",
"ตุลาคม",
"พฤศจิกายน",
"ธันวาคม",
];
const abbrMonthThai = [
"ม.ค.",
"ก.พ.",
"มี.ค.",
"เม.ย.",
"พ.ค.",
"มิ.ย.",
"ก.ค.",
"ส.ค.",
"ก.ย.",
"ต.ค.",
"พ.ย.",
"ธ.ค.",
];
let dstYear = 0;
if (date.getFullYear() > 2500) {
dstYear = date.getFullYear();
} else {
dstYear = date.getFullYear() + 543;
}
let dstMonth = "";
if (isFullMonth) {
dstMonth = fullMonthThai[date.getMonth()];
} else {
dstMonth = abbrMonthThai[date.getMonth()];
}
return dstMonth + " " + dstYear;
}
function dateToISO(date: Date) {
return (
date.getFullYear() +
"-" +
appendLeadingZeroes(date.getMonth() + 1) +
"-" +
appendLeadingZeroes(date.getDate())
);
}
function appendLeadingZeroes(n: Number) {
if (n <= 9) return "0" + n;
return n;
}
const success = (q: any, val: string) => {
// useQuasar ไม่สามารถใช้นอกไฟล์ .vue
if (val !== "") {
return q.notify({
message: val,
color: "primary",
icon: "mdi-information",
position: "bottom-right",
multiLine: true,
timeout: 1000,
badgeColor: "positive",
classes: "my-notif-class",
});
}
};
function notify(q: any, val: string) {
if (val !== "") {
q.notify({
color: "teal-10",
message: val,
icon: "mdi-information",
position: "bottom-right",
multiLine: true,
timeout: 7000,
actions: [{ label: "ปิด", color: "white", handler: () => {} }],
});
}
}
function notifyError(q: any, val: string) {
if (val !== "") {
q.notify({
color: "negative",
message: val,
icon: "mdi-alert-circle",
position: "top",
multiLine: true,
timeout: 12000,
actions: [{ label: "ปิด", color: "white", handler: () => {} }],
});
}
}
const dateText = (val: Date) => {
if (val != null) {
return date2Thai(val);
} else {
return "-";
}
};
const weekThai = (val: Number) => {
switch (val) {
case 0:
return "วันอาทิตย์";
case 1:
return "วันจันทร์";
case 2:
return "วันอังคาร";
case 3:
return "วันพุธ";
case 4:
return "วันพฤหัสบดี";
case 5:
return "วันศุกร์";
case 6:
return "วันเสาร์";
default:
return "-";
}
};
const genColor15 = (val: number) => {
val = val % 15;
switch (val) {
case 1:
return "pink";
case 2:
return "purple";
case 3:
return "deep-purple";
case 4:
return "indigo";
case 5:
return "blue";
case 6:
return "light-blue";
case 7:
return "cyan";
case 8:
return "teal";
case 9:
return "green";
case 10:
return "light-green";
case 11:
return "amber";
case 12:
return "orange";
case 13:
return "deep-orange";
case 14:
return "brown";
case 0:
return "blue-grey";
default:
return null;
}
};
export default {
date2Thai,
dateToISO,
notify,
notifyError,
dateText,
monthYear2Thai,
dateMonth2Thai,
success,
weekThai,
genColor15,
};

View file

@ -19,7 +19,7 @@ import { createPinia } from "pinia";
// import './assets/main.css'
// Import GlobalFilters
import filters from "./hooks/filters";
import filters from "./plugins/filters";
const app = createApp(App);
const pinia = createPinia();
@ -54,7 +54,7 @@ app.use(
//** Global Components */
app.component(
"data-table",
defineAsyncComponent(() => import("./components/TableView.vue"))
defineAsyncComponent(() => import("@/components/TableView.vue"))
);
app.component(
"datepicker",
@ -62,12 +62,12 @@ app.component(
);
app.component(
"full-loader",
defineAsyncComponent(() => import("./plugins/FullLoader.vue"))
defineAsyncComponent(() => import("@/components/FullLoader.vue"))
);
app.component(
"selector",
defineAsyncComponent(() => import("./components/Selector.vue"))
defineAsyncComponent(() => import("@/components/Selector.vue"))
);
app.config.globalProperties.$http = http;

View file

@ -205,8 +205,15 @@ const { loaderPage } = dataStore;
const mixin = useCounterMixin();
const { success, dateText, messageError } = mixin;
const store = useManageDataStore();
const { manageData, changeManageColumns } = store;
const rows = ref<RequestItemsHistoryObject[]>([]); //list data table
const {
manageData,
changeManageColumns,
getPrefix,
dataPrefix,
storeIdVersion,
storeVersion,
} = store;
const rows = ref<RequestItemsHistoryObject[]>(dataPrefix); //list data table
const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
const rawHistory = ref<RequestItemsHistoryObject[]>([]); //raw data history
const tittleHistory = ref<string>("ประวัติแก้ไขคำนำหน้า"); //
@ -366,42 +373,48 @@ const $q = useQuasar();
*/
const fetchData = async () => {
await props.fetchDataComponent();
rows.value.splice(0);
loaderPage(true);
await http
.get(config.API.listPrefixHistory)
.then((res) => {
let data = res.data.result;
version.value = data.version; // published= draft=
idVersion.value = data.id; // id mongodb
data.items.map((e: RequestItemsHistoryObject) => {
rows.value.push({
id: e.id,
name: e.name,
createdAt: e.createdAt,
lastUpdatedAt: e.lastUpdatedAt,
lastUpdateFullName: e.lastUpdateFullName,
isActive: e.isActive,
createdFullName: e.createdFullName,
createdUserId: e.createdUserId,
lastUpdateUserId: e.lastUpdateUserId,
});
});
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
updateData.value = false;
loaderPage(false);
});
// rows.value = [];
const result = await getPrefix(false, true);
version.value = result.version; // published= draft=
idVersion.value = result.idversion; // id mongodb
rows.value = result.data;
updateData.value = false;
console.log(result);
// rows.value.splice(0);
// loaderPage(true);
// await http
// .get(config.API.listPrefixHistory)
// .then((res) => {
// let data = res.data.result;
// version.value = data.version; // published= draft=
// idVersion.value = data.id; // id mongodb
// data.items.map((e: RequestItemsHistoryObject) => {
// rows.value.push({
// id: e.id,
// name: e.name,
// createdAt: e.createdAt,
// lastUpdatedAt: e.lastUpdatedAt,
// lastUpdateFullName: e.lastUpdateFullName,
// isActive: e.isActive,
// createdFullName: e.createdFullName,
// createdUserId: e.createdUserId,
// lastUpdateUserId: e.lastUpdateUserId,
// });
// });
// })
// .catch((e) => {
// messageError($q, e);
// })
// .finally(() => {
// updateData.value = false;
// loaderPage(false);
// });
};
/**
* งชนดอมลประวแกไขขอมลทงหมด
*/
const fetchHistory = async () => {
loaderPage(true);
await http
.get(config.API.listPrefixPublishedHistory)
.then((res) => {
@ -427,9 +440,6 @@ const fetchHistory = async () => {
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
loaderPage(false);
});
};
@ -438,7 +448,7 @@ const fetchHistory = async () => {
* เมอเรยก api เสรจแลวจะ get data มาใหม
*/
const clearPublishedData = async () => {
loaderPage(true);
// loaderPage(true);
await http
.delete(config.API.listPrefixHistory)
.then((res) => {
@ -458,7 +468,7 @@ const clearPublishedData = async () => {
* เมอเรยก api เสรจแลวจะ get data มาใหม
*/
const publishedData = async () => {
loaderPage(true);
// loaderPage(true);
await http
.get(config.API.listPrefixPublished)
.then((res) => {
@ -518,7 +528,7 @@ const save = async (publish: boolean) => {
lastUpdateFullName: e.lastUpdateFullName,
lastUpdateUserId: e.lastUpdateUserId,
}));
loaderPage(true);
// loaderPage(true);
await http
.post(config.API.listPrefixHistoryId(idVersion.value), {
id: idVersion.value,

View file

@ -1,7 +1,20 @@
import { ref, computed } from "vue";
import { defineStore } from "pinia";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import type { RequestItemsHistoryObject } from "@/modules/01_metadata/interface/request/person/Prefix";
const $q = useQuasar();
const mixin = useCounterMixin();
const { success, messageError, showLoader, hideLoader } = mixin;
export const useManageDataStore = defineStore("manage", () => {
const dataPrefix = ref<RequestItemsHistoryObject[]>([]); //list data table
const draftPrefix = ref<RequestItemsHistoryObject[]>([]); //list data table
const storeIdVersion = ref<string>(""); //id data ใน mongodb
const storeVersion = ref<string>("published"); //รายการข้อมูลล่าสุดได้เผยแพร่หรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
interface manage {
link: number;
person: {
@ -227,8 +240,88 @@ export const useManageDataStore = defineStore("manage", () => {
}
}
const getPrefix = async (
selector: boolean = false,
newFetch: boolean = false
) => {
if (dataPrefix.value.length === 0) {
await fetchPrefix(true, selector);
return {
data: draftPrefix.value,
version: storeVersion.value,
idversion: storeIdVersion.value,
};
} else {
if (newFetch) {
await fetchPrefix(true, selector);
return {
data: draftPrefix.value,
version: storeVersion.value,
idversion: storeIdVersion.value,
};
} else {
return {
data: draftPrefix.value,
version: storeVersion.value,
idversion: storeIdVersion.value,
};
}
}
};
const fetchPrefix = async (loader: boolean, selector: boolean) => {
let apiPrefix = "";
if (loader) {
showLoader();
}
if (selector) {
apiPrefix = config.API.prefix;
} else {
apiPrefix = config.API.listPrefixHistory;
}
await http
.get(apiPrefix)
.then((res) => {
const data = res.data.result;
let rows: RequestItemsHistoryObject[] = [];
if (selector) {
data.map((e: RequestItemsHistoryObject) => {
rows.push({
...e,
});
});
} else {
storeVersion.value = data.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
storeIdVersion.value = data.id; //เลข id ใน mongodb
data.items.map((e: RequestItemsHistoryObject) => {
rows.push({
...e,
});
});
}
draftPrefix.value = rows;
if (loader) {
dataPrefix.value = rows;
}
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
if (loader) {
hideLoader();
}
});
};
return {
dataPrefix,
storeIdVersion,
storeVersion,
manageData,
getPrefix,
changeManageCurrentTab,
changeManageLink,
changeManageColumns,

View file

@ -630,7 +630,7 @@ const fetchDataSummarySubComponent = async () => {
*/
const fetchDataSummarySub = async (val: number) => {
dataNum.value = [];
loaderPage(true);
// loaderPage(true);
await http
.get(config.API.countDashbordSubHistory(val))
.then((res) => {

View file

@ -419,7 +419,6 @@ export const useCounterMixin = defineStore("mixin", () => {
};
const hideLoader = () => {
// q.loading.hide();
Loading.hide();
};