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

chore: clean more

Browse source
This commit is contained in:
Methapon2001 2024-08-02 16:13:07 +07:00
parent 1b489306bf
commit ae4bf285a0
5 changed files with 157 additions and 127 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,22 +1,17 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, watch } from 'vue'; import { ref, watch, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import { useQuasar } from 'quasar'; import { useQuasar } from 'quasar';
import { getUserId, getRole } from 'src/services/keycloak'; import { getUserId, getRole } from 'src/services/keycloak';
import { Status } from 'stores/types';
import { calculateAge, dateFormat } from 'src/utils/datetime';
import useCustomerStore from 'stores/customer'; import useCustomerStore from 'stores/customer';
import useEmployeeStore from 'stores/employee'; import useEmployeeStore from 'stores/employee';
import useMyBranchStore from 'stores/my-branch'; import useMyBranchStore from 'stores/my-branch';
import useUtilsStore, { dialog } from 'stores/utils';
import ButtonAddComponent from 'src/components/ButtonAddCompoent.vue'; import useFlowStore from 'stores/flow';
import PersonCard from 'components/home/PersonCard.vue'; import { Status } from 'stores/types';
import StatCardComponent from 'components/StatCardComponent.vue';
import TooltipComponent from 'components/TooltipComponent.vue';
import AddButton from 'components/AddButton.vue';
import CustomerInfoComponent from 'src/components/03_customer-management/CustomerInfoComponent.vue';
import NoData from 'components/NoData.vue';
import PaginationComponent from 'src/components/PaginationComponent.vue';
import { import {
CustomerStats, CustomerStats,
Customer, Customer,
@ -24,23 +19,49 @@ import {
CustomerType, CustomerType,
} from 'stores/customer/types'; } from 'stores/customer/types';
import { Employee, EmployeeHistory } from 'stores/employee/types'; import { Employee, EmployeeHistory } from 'stores/employee/types';
import { onMounted } from 'vue';
import useUtilsStore, { dialog } from 'stores/utils'; import ButtonAddComponent from 'components/ButtonAddCompoent.vue';
import { calculateAge, dateFormat } from 'src/utils/datetime'; import PersonCard from 'components/home/PersonCard.vue';
import { useI18n } from 'vue-i18n'; import StatCardComponent from 'components/StatCardComponent.vue';
import useFlowStore from 'stores/flow'; import TooltipComponent from 'components/TooltipComponent.vue';
import AddButton from 'components/AddButton.vue';
import NoData from 'components/NoData.vue';
import PaginationComponent from 'components/PaginationComponent.vue';
import CustomerInfoComponent from './components/CustomerBranch.vue';
import { columnsCustomer, columnsEmployee } from './constant'; import { columnsCustomer, columnsEmployee } from './constant';
import { useRoute, useRouter } from 'vue-router';
const $q = useQuasar();
const { t, locale } = useI18n(); const { t, locale } = useI18n();
const utilsStore = useUtilsStore(); const $q = useQuasar();
const userCustomer = useCustomerStore(); const route = useRoute();
const userBranchStore = useMyBranchStore(); const router = useRouter();
const { getStatsCustomer, fetchList, editById } = userCustomer;
const flowStore = useFlowStore(); const flowStore = useFlowStore();
const utilsStore = useUtilsStore();
const customerStore = useCustomerStore();
const userBranchStore = useMyBranchStore();
const employeeStore = useEmployeeStore(); const employeeStore = useEmployeeStore();
async function init() {
if (route.name === 'CustomerManagement') {
await fetchListCustomer(true);
}
if (
route.name === 'CustomerBranchManagement' &&
typeof route.params.customerId === 'string'
) {
const _data = await customerStore.fetchById(route.params.customerId);
if (_data) currentCustomer.value = _data;
else router.push('/customer-management');
}
flowStore.rotate();
}
watch(() => route.name, init);
onMounted(init);
const { getStatsCustomer, fetchList, editById } = customerStore;
const currentTab = ref('employer'); const currentTab = ref('employer');
const inputSearch = ref<string>(); const inputSearch = ref<string>();
@ -111,8 +132,8 @@ const fieldSelected = ref<
'action', 'action',
]); ]);
const splitterModel = ref(15); const splitPercent = ref(15);
const modeView = ref(false); const gridView = ref(false);
const statsEmployee = ref(0); const statsEmployee = ref(0);
const statsEmployeeGender = ref<{ male: number; female: number }>({ const statsEmployeeGender = ref<{ male: number; female: number }>({
male: 0, male: 0,
@ -121,7 +142,6 @@ const statsEmployeeGender = ref<{ male: number; female: number }>({
const hideStat = ref(false); const hideStat = ref(false);
const branchOption = ref<{ id: string; name: string }[]>(); const branchOption = ref<{ id: string; name: string }[]>();
const indexTab = ref<number>(0);
const statusToggle = ref<boolean>(false); const statusToggle = ref<boolean>(false);
const infoDrawer = ref(false); const infoDrawer = ref(false);
const infoDrawerEdit = ref(false); const infoDrawerEdit = ref(false);
@ -131,7 +151,6 @@ const statsCustomerType = ref<CustomerStats>({
PERS: 0, PERS: 0,
}); });
const currentCustomerId = ref<string>(''); const currentCustomerId = ref<string>('');
const dialogInputCustomerBranchForm = ref<boolean>(false);
const currentCustomer = ref<Customer>(); const currentCustomer = ref<Customer>();
const statBranchNo = ref<number>(0); const statBranchNo = ref<number>(0);
@ -171,18 +190,11 @@ const fieldCustomer = ref([
]); ]);
const infoDrawerBranch = ref<boolean>(false); const infoDrawerBranch = ref<boolean>(false);
const selectorLabel = ref<string>('EMPLOYER'); const selectorLabel = ref<string>('EMPLOYER');
const customerType = ref<CustomerType>('CORP'); const customerType = ref<CustomerType>('CORP');
const employeeHistoryDialog = ref(false); const employeeHistoryDialog = ref(false);
const employeeHistory = ref<EmployeeHistory[]>(); const employeeHistory = ref<EmployeeHistory[]>();
async function triggerCreate(type: CustomerType) {
// TODO: Create customer of type
}
function deleteCustomerById(id: string) { function deleteCustomerById(id: string) {
dialog({ dialog({
color: 'negative', color: 'negative',
@ -192,7 +204,7 @@ function deleteCustomerById(id: string) {
persistent: true, persistent: true,
message: t('deleteConfirmMessage'), message: t('deleteConfirmMessage'),
action: async () => { action: async () => {
await userCustomer.deleteById(id); await customerStore.deleteById(id);
const resultList = await fetchList({ includeBranch: true }); const resultList = await fetchList({ includeBranch: true });
@ -223,7 +235,7 @@ async function fetchListOfOptionBranch() {
// TODO: Assign (first) branch of the user as register branch of the data // TODO: Assign (first) branch of the user as register branch of the data
} }
async function fetchListCustomer() { async function fetchListCustomer(fetchStats = false) {
const resultList = await fetchList({ const resultList = await fetchList({
includeBranch: true, includeBranch: true,
page: currentPageCustomer.value, page: currentPageCustomer.value,
@ -240,9 +252,14 @@ async function fetchListCustomer() {
if (resultList) { if (resultList) {
currentPageCustomer.value = resultList.page; currentPageCustomer.value = resultList.page;
maxPageCustomer.value = Math.ceil(resultList.total / pageSize.value); maxPageCustomer.value = Math.ceil(resultList.total / pageSize.value);
listCustomer.value = resultList.result; listCustomer.value = resultList.result;
} }
if (fetchStats) {
statsCustomerType.value = await getStatsCustomer().then((value) =>
value ? value : { CORP: 0, PERS: 0 },
);
}
} }
async function fetchListEmployee() { async function fetchListEmployee() {
@ -308,7 +325,7 @@ async function toggleStatusCustomer(id: string, status: boolean) {
flowStore.rotate(); flowStore.rotate();
} }
async function onDelete(id: string) { async function deleteEmployeeById(id: string) {
if (!id) return; if (!id) return;
dialog({ dialog({
color: 'negative', color: 'negative',
@ -368,32 +385,7 @@ onMounted(async () => {
}, },
}, },
]; ];
modeView.value = $q.screen.lt.md ? true : false; gridView.value = $q.screen.lt.md ? true : false;
const resultStats = await getStatsCustomer();
const resultList = await fetchList({
includeBranch: true,
page: 1,
pageSize: pageSize.value,
});
if (resultStats) statsCustomerType.value = resultStats;
if (resultList) listCustomer.value = resultList.result;
if (
(statsCustomerType.value?.CORP ?? 0) +
(statsCustomerType.value?.PERS ?? 0) >
0
) {
selectorLabel.value = 'EMPLOYER';
}
if (resultList) {
currentPageCustomer.value = resultList.page;
maxPageCustomer.value = Math.ceil(resultList.total / pageSize.value);
listCustomer.value = resultList.result;
}
const resultStatsEmployee = await employeeStore.getStatsEmployee(); const resultStatsEmployee = await employeeStore.getStatsEmployee();
if (resultStatsEmployee) statsEmployee.value = resultStatsEmployee; if (resultStatsEmployee) statsEmployee.value = resultStatsEmployee;
@ -470,7 +462,7 @@ watch([inputSearch, currentStatus], async () => {
watch( watch(
() => $q.screen.lt.md, () => $q.screen.lt.md,
() => $q.screen.lt.md && (modeView.value = true), () => $q.screen.lt.md && (gridView.value = true),
); );
watch(isMainPage, () => { watch(isMainPage, () => {
@ -500,7 +492,7 @@ watch(isMainPage, () => {
v-if="selectorLabel === 'EMPLOYER' || !selectorLabel" v-if="selectorLabel === 'EMPLOYER' || !selectorLabel"
id="add-customer-legal-entity" id="add-customer-legal-entity"
style="color: white; background-color: hsla(var(--violet-11-hsl))" style="color: white; background-color: hsla(var(--violet-11-hsl))"
@click="triggerCreate('CORP')" @click=""
padding="xs" padding="xs"
icon="mdi-office-building" icon="mdi-office-building"
:label="$t('add') + ' ' + $t('customerLegalEntity')" :label="$t('add') + ' ' + $t('customerLegalEntity')"
@ -513,7 +505,7 @@ watch(isMainPage, () => {
:label="$t('add') + ' ' + $t('customerNaturalPerson')" :label="$t('add') + ' ' + $t('customerNaturalPerson')"
external-label external-label
label-position="left" label-position="left"
@click="triggerCreate('PERS')" @click=""
style="color: white; background-color: hsla(var(--teal-10-hsl))" style="color: white; background-color: hsla(var(--teal-10-hsl))"
padding="xs" padding="xs"
icon="mdi-account-plus" icon="mdi-account-plus"
@ -533,16 +525,14 @@ watch(isMainPage, () => {
<div v-else> <div v-else>
<q-fab-action <q-fab-action
id="add-branch" id="add-branch"
:style="`color: white; background-color: ${customerType === 'CORP' ? 'hsla(var(--violet-11-hsl))' : 'hsla(var(--pink-6-hsl))'}`" :style="{
@click=" color: 'white',
() => { 'background-color':
indexTab = 0; customerType === 'CORP'
? 'hsla(var(--violet-11-hsl))'
console.log(statBranchNo); : 'hsla(var(--pink-6-hsl))',
}"
dialogInputCustomerBranchForm = true; @click=""
}
"
padding="xs" padding="xs"
icon="mdi-office-building" icon="mdi-office-building"
:label="$t('formDialogTitleCreateSubBranch')" :label="$t('formDialogTitleCreateSubBranch')"
@ -553,7 +543,7 @@ watch(isMainPage, () => {
</ButtonAddComponent> </ButtonAddComponent>
<div class="column full-height no-wrap"> <div class="column full-height no-wrap">
<div v-if="isMainPage" class="column full-height"> <div v-if="$route.name === 'CustomerManagement'" class="column full-height">
<div class="text-body-2 text-weight-medium q-mb-xs flex items-center"> <div class="text-body-2 text-weight-medium q-mb-xs flex items-center">
{{ $t('dataSum') }} {{ $t('dataSum') }}
<q-badge <q-badge
@ -668,7 +658,7 @@ watch(isMainPage, () => {
option-value="value" option-value="value"
option-label="label" option-label="label"
class="col" class="col"
:class="{ 'offset-md-5': modeView }" :class="{ 'offset-md-5': gridView }"
map-options map-options
emit-value emit-value
:hide-dropdown-icon="$q.screen.lt.sm" :hide-dropdown-icon="$q.screen.lt.sm"
@ -681,7 +671,7 @@ watch(isMainPage, () => {
<q-select <q-select
lazy-rules="ondemand" lazy-rules="ondemand"
id="select-field" id="select-field"
v-if="modeView === false" v-if="gridView === false"
for="select-field" for="select-field"
class="q-ml-sm col" class="q-ml-sm col"
:options=" :options="
@ -703,7 +693,7 @@ watch(isMainPage, () => {
<q-btn-toggle <q-btn-toggle
id="btn-mode" id="btn-mode"
v-model="modeView" v-model="gridView"
dense dense
class="no-shadow bordered rounded surface-1 q-ml-sm" class="no-shadow bordered rounded surface-1 q-ml-sm"
:toggle-color="$q.dark.isActive ? 'grey-9' : 'grey-2'" :toggle-color="$q.dark.isActive ? 'grey-9' : 'grey-2'"
@ -721,10 +711,10 @@ watch(isMainPage, () => {
class="q-px-sm q-py-xs rounded" class="q-px-sm q-py-xs rounded"
:style="{ :style="{
color: $q.dark.isActive color: $q.dark.isActive
? modeView ? gridView
? '#C9D3DB ' ? '#C9D3DB '
: '#787B7C' : '#787B7C'
: modeView : gridView
? '#787B7C' ? '#787B7C'
: '#C9D3DB', : '#C9D3DB',
}" }"
@ -738,10 +728,10 @@ watch(isMainPage, () => {
size="16px" size="16px"
:style="{ :style="{
color: $q.dark.isActive color: $q.dark.isActive
? modeView === false ? gridView === false
? '#C9D3DB' ? '#C9D3DB'
: '#787B7C' : '#787B7C'
: modeView === false : gridView === false
? '#787B7C' ? '#787B7C'
: '#C9D3DB', : '#C9D3DB',
}" }"
@ -810,7 +800,7 @@ watch(isMainPage, () => {
<!-- body --> <!-- body -->
<q-splitter <q-splitter
v-model="splitterModel" v-model="splitPercent"
:limits="[0, 100]" :limits="[0, 100]"
class="col full-width" class="col full-width"
before-class="overflow-hidden" before-class="overflow-hidden"
@ -880,7 +870,7 @@ watch(isMainPage, () => {
<q-table <q-table
flat flat
bordered bordered
:grid="modeView" :grid="gridView"
:rows="listCustomer" :rows="listCustomer"
:columns="columnsCustomer" :columns="columnsCustomer"
class="full-width" class="full-width"
@ -916,19 +906,9 @@ watch(isMainPage, () => {
:id="`row-table-${props.row.customerName}`" :id="`row-table-${props.row.customerName}`"
:props="props" :props="props"
@click=" @click="
() => { $router.push(
currentCustomerName = props.row.customerName; `/customer-management/${props.row.id}/branch`,
customerType = props.row.customerType; )
currentCustomerUrlImage = props.row.imageUrl;
currentCustomerId = props.row.id;
const { branch, ...payload } = props.row;
currentCustomer = payload;
statBranchNo =
branch[branch.length - 1].branchNo + 1;
isMainPage = false;
}
" "
> >
<q-td v-if="fieldSelected.includes('customerName')"> <q-td v-if="fieldSelected.includes('customerName')">
@ -1341,7 +1321,7 @@ watch(isMainPage, () => {
<q-table <q-table
flat flat
bordered bordered
:grid="modeView" :grid="gridView"
:rows="listEmployee" :rows="listEmployee"
:columns="columnsEmployee" :columns="columnsEmployee"
class="full-width" class="full-width"
@ -1586,7 +1566,7 @@ watch(isMainPage, () => {
props.row.status !== 'CREATED', props.row.status !== 'CREATED',
}" }"
style="white-space: nowrap" style="white-space: nowrap"
@click="onDelete(props.row.id)" @click="deleteEmployeeById(props.row.id)"
> >
<q-icon <q-icon
name="mdi-trash-can-outline" name="mdi-trash-can-outline"
@ -1676,7 +1656,7 @@ watch(isMainPage, () => {
@history="openHistory(props.row.id)" @history="openHistory(props.row.id)"
@update-card="" @update-card=""
@enter-card="" @enter-card=""
@delete-card="onDelete(props.row.id)" @delete-card="deleteEmployeeById(props.row.id)"
@toggle-status=" @toggle-status="
triggerChangeStatus(props.row.id, props.row.status) triggerChangeStatus(props.row.id, props.row.status)
" "
@ -1792,21 +1772,15 @@ watch(isMainPage, () => {
</q-splitter> </q-splitter>
</div> </div>
</div> </div>
<div class="col column" v-else>
<div class="col column" v-if="$route.name === 'CustomerBranchManagement'">
<CustomerInfoComponent <CustomerInfoComponent
:customer-type="customerType" v-if="currentCustomer"
:customer-id="currentCustomerId" :customer-id="currentCustomer.id"
v-model:mode-view="modeView" :customer-type="currentCustomer.customerType"
@back=" v-model:mode-view="gridView"
() => { @back="$router.push('/customer-management')"
isMainPage = true; @view-detail="
statBranchNo = 1;
indexTab = 0;
currentCustomerUrlImage = null;
// clearForm();
}
"
@viewDetail="
async (v) => { async (v) => {
await fetchListOfOptionBranch(); await fetchListOfOptionBranch();
currentBranchId = v.id; currentBranchId = v.id;
@ -1822,8 +1796,8 @@ watch(isMainPage, () => {
} }
" "
v-model:branch="branch" v-model:branch="branch"
v-model:currentCustomerName="currentCustomerName" v-model:current-customer-name="currentCustomer.customerName"
v-model:currentCustomerUrlImage="currentCustomerUrlImage" v-model:current-customer-url-image="currentCustomer.imageUrl"
/> />
</div> </div>
</div> </div>

0
src/pages/03_customer-management/components/Customer.vue Normal file
View file

12
src/components/03_customer-management/CustomerInfoComponent.vue → src/pages/03_customer-management/components/CustomerBranch.vue
View file

@ -1,15 +1,15 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, watch } from 'vue'; import { ref, onMounted, watch } from 'vue';
import useCustomerStore from 'src/stores/customer'; import useCustomerStore from 'stores/customer';
import useFlowStore from 'src/stores/flow'; import useFlowStore from 'stores/flow';
import useOptionStore from 'src/stores/options'; import useOptionStore from 'stores/options';
import { Status } from 'src/stores/types'; import { Status } from 'stores/types';
import { CustomerBranch, CustomerType } from 'src/stores/customer/types'; import { CustomerBranch, CustomerType } from 'stores/customer/types';
import BranchCardCustomer from 'components/03_customer-management/BranchCardCustomer.vue'; import BranchCardCustomer from 'components/03_customer-management/BranchCardCustomer.vue';
import PaginationComponent from 'src/components/PaginationComponent.vue'; import PaginationComponent from 'components/PaginationComponent.vue';
import NoData from 'components/NoData.vue'; import NoData from 'components/NoData.vue';
import { QTableProps } from 'quasar'; import { QTableProps } from 'quasar';

8
src/pages/03_customer-management/form.ts
View file

@ -53,7 +53,7 @@ export const useCustomerForm = defineStore('form-customer', () => {
const currentFormData = ref<CustomerCreate>(structuredClone(defaultFormData)); const currentFormData = ref<CustomerCreate>(structuredClone(defaultFormData));
const state = ref<{ const state = ref<{
dialogType: 'info' | 'edit'; dialogType: 'info' | 'create' | 'edit';
dialogOpen: boolean; dialogOpen: boolean;
branchIndex: number; branchIndex: number;
customerType: 'CORP' | "PERS" customerType: 'CORP' | "PERS"
@ -123,6 +123,8 @@ export const useCustomerForm = defineStore('form-customer', () => {
currentFormData.value = structuredClone(resetCustomerData); currentFormData.value = structuredClone(resetCustomerData);
} }
// TODO: Submit function
return { return {
state, state,
currentFormData, currentFormData,
@ -135,3 +137,7 @@ export const useCustomerForm = defineStore('form-customer', () => {
export const useEmployeeForm = defineStore('form-employee', () => { export const useEmployeeForm = defineStore('form-employee', () => {
return {}; return {};
}); });
export const useCustomerBranchForm = defineStore('form-customer-branch', () => {
})

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

@ -1,12 +1,62 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue'; import { ref } from 'vue';
import QuatationForm from './QuatationForm.vue'; import QuatationForm from './QuatationForm.vue';
import SideMenu from 'src/components/SideMenu.vue';
import ImageUploadDialog from 'src/components/ImageUploadDialog.vue';
import { watch } from 'vue';
const isOpen = ref(true); const isOpen = ref(true);
const imageUploadDialog = ref<InstanceType<typeof ImageUploadDialog>>();
const file = ref<File | null>(null);
</script> </script>
<template> <template>
<QuatationForm v-model:dialogState="isOpen" /> <ImageUploadDialog
v-model:dialog-state="isOpen"
v-model:file="file"
ref="imageUploadDialog"
clear-button
>
<template #error>
<div style="display: flex; align-items: center; justify-content: center">
<h1>Fallback</h1>
</div>
</template>
</ImageUploadDialog>
<button @click="isOpen = !isOpen">Open</button>
<button @click="imageUploadDialog?.browse()">Click Me</button>
<div
style="
height: 100vh;
background: green;
width: 100%;
color: white;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
"
id="aaa"
>
My AAA
</div>
<div
style="
height: 100vh;
background: red;
width: 100%;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
"
id="my-anchor"
>
My Menu
</div>
<QuatationForm v-model:dialog-state="isOpen" />
</template> </template>
<style scoped></style> <style scoped></style>