chamomind/jws-frontend
chamomind/jws-frontend
7
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

refactor: extract navigator into store instead

Browse source
This commit is contained in:
Methapon Metanipat 2024-10-30 11:55:43 +07:00
parent caa3e59777
commit 6b29d3b017
10 changed files with 68 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

24
src/layouts/MainLayout.vue
View file

@ -14,9 +14,9 @@ import { CanvasComponent, DialogForm } from 'components/index';
import useOptionStore from 'stores/options';
import { dialog } from 'stores/utils';
import { setLocale } from 'src/utils/datetime';
import useUtilsStore from 'stores/utils';
import useMyBranchStore from 'stores/my-branch';
import { useConfigStore } from 'src/stores/config';
import { useNavigator } from 'src/stores/navigator';
const useMyBranch = useMyBranchStore();
const { fetchListMyBranch } = useMyBranch;
@ -37,7 +37,7 @@ interface Notification {
const $q = useQuasar();
const loaderStore = useLoader();
const utilsStore = useUtilsStore();
const navigatorStore = useNavigator();
const optionStore = useOptionStore();
const configStore = useConfigStore();
@ -88,12 +88,6 @@ const notification = ref<Notification[]>([
content: 'Unread',
read: false,
},
{
id: '2',
title: 'test',
content: 'test',
read: false,
},
{
id: '3',
title: 'Read',
@ -268,8 +262,8 @@ onMounted(async () => {
}"
>
{{
utilsStore.currentTitle?.title
? $t(utilsStore.currentTitle?.title)
navigatorStore.current?.title
? $t(navigatorStore.current?.title)
: $q.screen.gt.xs
? 'Welcome to Jobs Worker Service'
: 'Jobs Worker Service'
@ -277,15 +271,15 @@ onMounted(async () => {
</span>
<div class="flex items-center" style="gap: var(--size-1)">
<template
v-for="(item, i) in utilsStore.currentTitle.path"
v-for="(item, i) in navigatorStore.current.path"
:key="i"
>
<span
class="text-caption cursor-pointer"
@click="item.handler?.()"
:class="{
'text-info': i !== utilsStore.currentTitle.path.length - 1,
'hover-item': i !== utilsStore.currentTitle.path.length - 1,
'text-info': i !== navigatorStore.current.path.length - 1,
'hover-item': i !== navigatorStore.current.path.length - 1,
}"
>
{{
@ -300,10 +294,10 @@ onMounted(async () => {
</span>
<q-icon
:class="{
'text-info': i !== utilsStore.currentTitle.path.length - 1,
'text-info': i !== navigatorStore.current.path.length - 1,
}"
name="mdi-chevron-right"
v-if="i + 1 !== utilsStore.currentTitle.path.length"
v-if="i + 1 !== navigatorStore.current.path.length"
/>
</template>
</div>

13
src/pages/01_branch-management/MainPage.vue
View file

@ -20,7 +20,7 @@ import {
import NoData from 'src/components/NoData.vue';
import QrCodeUploadDialog from 'src/components/QrCodeUploadDialog.vue';
import ItemCard from 'src/components/ItemCard.vue';
import useUtilsStore, { dialog, baseUrl } from 'stores/utils';
import { dialog, baseUrl } from 'stores/utils';
import EmptyAddButton from 'components/AddButton.vue';
import TooltipComponent from 'components/TooltipComponent.vue';
import StatCard from 'components/StatCardComponent.vue';
@ -49,10 +49,11 @@ import {
SaveButton,
UndoButton,
} from 'components/button';
import { useNavigator } from 'src/stores/navigator';
const $q = useQuasar();
const { t } = useI18n();
const utilsStore = useUtilsStore();
const navigatorStore = useNavigator();
const modelCreateTypeBranch = ref<boolean>(false);
const typeBranchItem = [
{
@ -230,8 +231,8 @@ async function calculateStats(headOfficeId?: string) {
}
onMounted(async () => {
utilsStore.currentTitle.title = 'menu.branch';
utilsStore.currentTitle.path = [
navigatorStore.current.title = 'menu.branch';
navigatorStore.current.path = [
{
text: 'branch.page.captionManage',
i18n: true,
@ -914,7 +915,7 @@ watch(
);
watch(currentHq, () => {
const tmp: typeof utilsStore.currentTitle.path = [
const tmp: typeof navigatorStore.current.path = [
{
text: 'branch.page.captionManage',
i18n: true,
@ -940,7 +941,7 @@ watch(currentHq, () => {
selectedSubBranche(currentHq.value.id);
utilsStore.currentTitle.path = tmp;
navigatorStore.current.path = tmp;
});
</script>

9
src/pages/02_personnel-management/MainPage.vue
View file

@ -11,7 +11,8 @@ import useAddressStore from 'stores/address';
import useMyBranch from 'src/stores/my-branch';
import { calculateAge } from 'src/utils/datetime';
import { useQuasar, type QTableProps } from 'quasar';
import useUtilsStore, { dialog, baseUrl } from 'stores/utils';
import { dialog, baseUrl } from 'stores/utils';
import { useNavigator } from 'src/stores/navigator';
import { isRoleInclude, resetScrollBar } from 'src/stores/utils';
import { BranchUserStats } from 'stores/branch/types';
@ -53,7 +54,7 @@ const $q = useQuasar();
const userStore = useUserStore();
const flowStore = useFlowStore();
const utilsStore = useUtilsStore();
const navigatorStore = useNavigator();
const optionStore = useOptionStore();
const branchStore = useBranchStore();
const adrressStore = useAddressStore();
@ -662,8 +663,8 @@ async function fetchUserList() {
}
onMounted(async () => {
utilsStore.currentTitle.title = 'personnel.title';
utilsStore.currentTitle.path = [{ text: 'personnel.caption', i18n: true }];
navigatorStore.current.title = 'personnel.title';
navigatorStore.current.path = [{ text: 'personnel.caption', i18n: true }];
modeView.value = $q.screen.lt.md ? true : false;
await fetchUserList();

11
src/pages/03_customer-management/MainPage.vue
View file

@ -12,7 +12,8 @@ import useOcrStore from 'stores/ocr';
import useCustomerStore from 'stores/customer';
import useEmployeeStore from 'stores/employee';
import useMyBranchStore from 'stores/my-branch';
import useUtilsStore, { dialog, notify, resetScrollBar } from 'stores/utils';
import { dialog, notify, resetScrollBar } from 'stores/utils';
import { useNavigator } from 'src/stores/navigator';
import useFlowStore from 'stores/flow';
import { Status } from 'stores/types';
import {
@ -81,7 +82,7 @@ const $q = useQuasar();
const route = useRoute();
const router = useRouter();
const flowStore = useFlowStore();
const utilsStore = useUtilsStore();
const navigatorStore = useNavigator();
const customerStore = useCustomerStore();
const userBranchStore = useMyBranchStore();
const employeeStore = useEmployeeStore();
@ -112,8 +113,8 @@ const { state: employeeFormState, currentFromDataEmployee } =
storeToRefs(employeeFormStore);
async function init() {
utilsStore.currentTitle.title = 'menu.customer';
utilsStore.currentTitle.path = [
navigatorStore.current.title = 'menu.customer';
navigatorStore.current.path = [
{
text: 'menu.customerCaption',
i18n: true,
@ -133,7 +134,7 @@ async function init() {
if (_data) {
currentCustomer.value = _data;
utilsStore.currentTitle.path.push({
navigatorStore.current.path.push({
text: `${
_data.customerType === 'CORP'
? _data.branch[0].registerName

17
src/pages/04_product-service/MainPage.vue
View file

@ -48,7 +48,8 @@ const { currentMyBranch } = storeToRefs(userBranchStore);
import { Status } from 'stores/types';
import useUtilsStore, { dialog, dialogWarningClose } from 'stores/utils';
import { dialog, dialogWarningClose } from 'stores/utils';
import { useNavigator } from 'src/stores/navigator';
import useProductServiceStore from 'stores/product-service';
import {
@ -66,7 +67,7 @@ import { computed } from 'vue';
import { WorkflowTemplate } from 'src/stores/workflow-template/types';
const flowStore = useFlowStore();
const utilsStore = useUtilsStore();
const navigatorStore = useNavigator();
const productServiceStore = useProductServiceStore();
const optionStore = useOptionStore();
@ -1463,8 +1464,8 @@ async function fetchImageList(
}
onMounted(async () => {
utilsStore.currentTitle.title = 'productService.title';
utilsStore.currentTitle.path = [
navigatorStore.current.title = 'productService.title';
navigatorStore.current.path = [
{
text: 'productService.caption',
i18n: true,
@ -1489,7 +1490,7 @@ watch(
inputSearch.value = '';
currentStatus.value = 'All';
let tmp: typeof utilsStore.currentTitle.path = [
let tmp: typeof navigatorStore.current.path = [
{
text: 'productService.caption',
i18n: true,
@ -1521,12 +1522,12 @@ watch(
filterStat.value = [];
productMode.value = 'group';
expandedTree.value.pop();
utilsStore.currentTitle.path.pop();
navigatorStore.current.path.pop();
}
},
});
if (expandedTree.value.length === 0) {
utilsStore.currentTitle.path = [
navigatorStore.current.path = [
{ text: 'productService.caption', i18n: true },
];
return;
@ -1546,7 +1547,7 @@ watch(
});
}
utilsStore.currentTitle.path = tmp;
navigatorStore.current.path = tmp;
},
{ deep: true },
);

9
src/pages/05_quotation/MainPage.vue
View file

@ -6,7 +6,8 @@ import { storeToRefs } from 'pinia';
// NOTE: Import stores
import { useQuotationStore } from 'src/stores/quotations';
import useUtilsStore, { isRoleInclude } from 'stores/utils';
import { isRoleInclude } from 'stores/utils';
import { useNavigator } from 'src/stores/navigator';
import useFlowStore from 'src/stores/flow';
import useMyBranch from 'stores/my-branch';
import { useQuotationForm } from './form';
@ -44,7 +45,7 @@ const quotationFormStore = useQuotationForm();
const customerFormStore = useCustomerForm();
const flowStore = useFlowStore();
const userBranch = useMyBranch();
const utilsStore = useUtilsStore();
const navigatorStore = useNavigator();
const {
currentFormData: quotationFormData,
@ -220,8 +221,8 @@ const {
} = storeToRefs(quotationStore);
onMounted(async () => {
utilsStore.currentTitle.title = 'quotation.title';
utilsStore.currentTitle.path = [
navigatorStore.current.title = 'quotation.title';
navigatorStore.current.path = [
{
text: 'quotation.caption',
i18n: true,

8
src/pages/06_edm/MainPage.vue
View file

@ -1,13 +1,13 @@
<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';
import { getInstance } from 'src/services/keycloak';
import useUtilsStore from 'stores/utils';
import { useNavigator } from 'src/stores/navigator';
import { useI18n } from 'vue-i18n';
import { useQuasar } from 'quasar';
const $q = useQuasar();
const { locale } = useI18n();
const utilsStore = useUtilsStore();
const navigatorStore = useNavigator();
const EDM_SERVICE = import.meta.env.VITE_EDM_MICRO_FRONTEND_URL;
const kc = getInstance();
const at = ref(kc.token);
@ -25,8 +25,8 @@ function sendMessage() {
}
onMounted(() => {
utilsStore.currentTitle.title = 'menu.dms';
utilsStore.currentTitle.path = [
navigatorStore.current.title = 'menu.dms';
navigatorStore.current.path = [
{
text: '',
i18n: true,

8
src/pages/MainPage.vue
View file

@ -1,16 +1,16 @@
<script setup lang="ts">
import MenuItem from 'components/00_home/MenuItem.vue';
import useUtilsStore from 'stores/utils';
import { useNavigator } from 'src/stores/navigator';
import { onMounted, ref } from 'vue';
import { getRole } from 'src/services/keycloak';
const utilsStore = useUtilsStore();
const navigatorStore = useNavigator();
const menu = ref<InstanceType<typeof MenuItem>['$props']['list']>([]);
const role = ref();
onMounted(() => {
utilsStore.currentTitle.title = '';
utilsStore.currentTitle.path = [{ text: '' }];
navigatorStore.current.title = '';
navigatorStore.current.path = [{ text: '' }];
role.value = getRole();
menu.value = [

19
src/stores/navigator/index.ts Normal file
View file

@ -0,0 +1,19 @@
import { defineStore } from 'pinia';
import { ref } from 'vue';
export const useNavigator = defineStore('navigator-store', () => {
const current = ref<{
title: string;
path: {
text: string;
i18n?: boolean;
argsi18n?: Record<string, string>;
handler?: () => unknown;
}[];
}>({
title: '',
path: [{ text: '', handler: () => {} }],
});
return { current };
});

26
src/stores/utils/index.ts
View file

@ -207,30 +207,6 @@ export function checkTabBeforeAdd(data: unknown[], except?: string[]) {
return canAdd;
}
const useUtilsStore = defineStore('utilsStore', () => {
const currentTitle = ref<{
title: string;
path: {
text: string;
i18n?: boolean;
argsi18n?: Record<string, string>;
handler?: () => unknown;
}[];
}>({
title: '',
path: [
{
text: '',
handler: () => {},
},
],
});
return {
currentTitle,
};
});
export function isRoleInclude(role2check: string[]): boolean {
const roles = getRole() ?? [];
const isIncluded = role2check.some((r) => roles.includes(r));
@ -521,5 +497,3 @@ export function createDataRefBase<T>(
pageSize: ref<number>(defaultPageSize),
};
}
export default useUtilsStore;