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