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

482
src/pages/03_customer-management/components/CustomerBranch.vue Normal file
View file

@ -0,0 +1,482 @@
<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
import useCustomerStore from 'stores/customer';
import useFlowStore from 'stores/flow';
import useOptionStore from 'stores/options';
import { Status } from 'stores/types';
import { CustomerBranch, CustomerType } from 'stores/customer/types';
import BranchCardCustomer from 'components/03_customer-management/BranchCardCustomer.vue';
import PaginationComponent from 'components/PaginationComponent.vue';
import NoData from 'components/NoData.vue';
import { QTableProps } from 'quasar';
const flowStore = useFlowStore();
const userCustomer = useCustomerStore();
const { fetchListCustomeBranch } = userCustomer;
const inputSearch = ref<string>('');
const branch = defineModel<CustomerBranch[]>('branch');
const currentCustomerName = defineModel<string>('currentCustomerName');
const modeView = defineModel<boolean>('modeView');
const currentCustomerUrlImage = defineModel<string | null>(
'currentCustomerUrlImage',
);
const currentStatus = ref<Status | 'All'>('All');
const totalBranch = ref(0);
const currentPageBranch = ref<number>(1);
const maxPageBranch = ref<number>(1);
const pageSizeBranch = ref<number>(30);
const prop = withDefaults(
defineProps<{
color?: 'purple' | 'green';
customerId: string;
customerType: CustomerType;
}>(),
{
color: 'green',
},
);
defineEmits<{
(e: 'back'): void;
(e: 'viewDetail', branch: CustomerBranch, index: number): void;
(e: 'dialog'): void;
}>();
onMounted(async () => {
await fetchList();
});
const columns = [
{
name: 'branchLabelName',
align: 'left',
label: 'office',
field: 'name',
sortable: true,
},
{
name: 'branchLabelAddress',
align: 'left',
label: 'address',
field: 'address',
sortable: true,
},
{
name: 'branchLabelTel',
align: 'left',
label: 'formDialogInputTelephone',
field: 'telephoneNo',
},
] satisfies QTableProps['columns'];
const fieldDisplay = ref<
(
| 'branchName'
| 'customerBranchFormTab'
| 'address'
| 'telephone'
| 'businessTypePure'
| 'totalEmployee'
)[]
>([
'branchName',
'customerBranchFormTab',
'address',
'telephone',
'businessTypePure',
'totalEmployee',
]);
const branchFieldSelected = ref<
(
| 'customerBranchFormTab'
| 'branchName'
| 'address'
| 'telephone'
| 'businessTypePure'
| 'totalEmployee'
)[]
>(fieldDisplay.value);
async function fetchList() {
const result = await fetchListCustomeBranch({
customerId: prop.customerId,
query: !!inputSearch.value ? inputSearch.value : undefined,
page: currentPageBranch.value,
pageSize: pageSizeBranch.value,
includeCustomer: true,
status:
currentStatus.value === 'All'
? undefined
: currentStatus.value === 'ACTIVE'
? 'ACTIVE'
: 'INACTIVE',
});
if (result) {
totalBranch.value = result.total;
maxPageBranch.value = Math.ceil(result.total / pageSizeBranch.value);
branch.value = result.result;
}
}
watch([inputSearch, currentStatus], async () => {
await fetchList();
});
</script>
<template>
<div
class="row justify-between bordered-b surface-3 full-width"
style="z-index: 1"
>
<div class="row items-center col-12 col-md">
<q-btn
round
icon="mdi-arrow-left"
flat
dense
@click="$emit('back')"
class="q-mr-md"
/>
<q-card-section
class="q-pa-sm q-pt-md q-mr-md q-mb-sm"
:class="{
color__purple: customerType === 'CORP',
color__green: customerType === 'PERS',
}"
style="border-radius: 0 0 40px 40px; position: relative"
>
<q-avatar no-padding size="50px">
<img :src="currentCustomerUrlImage ?? '/no-profile.png'" />
</q-avatar>
</q-card-section>
<div>
<div>{{ currentCustomerName }}</div>
<div class="row items-center">
<i
class="isax isax-frame5"
style="font-size: 1rem; color: var(--stone-6)"
/>
<div class="q-px-sm">
{{ '10' }}
</div>
<q-icon name="mdi-home" size="16px" style="color: var(--stone-6)" />
<div class="q-px-sm">
{{ '2' }}
</div>
</div>
</div>
</div>
<div
class="row items-center justify-end q-px-md col-12 col-sm q-py-sm no-wrap"
>
<q-input
lazy-rules="ondemand"
outlined
dense
class="col-6"
:label="$t('search')"
:bg-color="$q.dark.isActive ? 'dark' : 'white'"
v-model="inputSearch"
debounce="500"
>
<template v-slot:prepend>
<q-icon name="mdi-magnify" />
</template>
</q-input>
<q-select
lazy-rules="ondemand"
id="select-status"
for="select-status"
v-model="currentStatus"
outlined
dense
option-value="value"
option-label="label"
class="col q-pl-sm"
map-options
emit-value
:hide-dropdown-icon="$q.screen.lt.sm"
:options="[
{ label: $t('all'), value: 'All' },
{ label: $t('statusACTIVE'), value: 'ACTIVE' },
{ label: $t('statusINACTIVE'), value: 'INACTIVE' },
]"
></q-select>
<q-btn-toggle
id="btn-mode"
v-model="modeView"
dense
class="no-shadow bordered rounded surface-1 q-ml-sm"
:toggle-color="$q.dark.isActive ? 'grey-9' : 'grey-2'"
size="xs"
:options="[
{ value: true, slot: 'folder' },
{ value: false, slot: 'list' },
]"
>
<template v-slot:folder>
<q-icon
id="icon-mode-grid"
name="mdi-view-grid-outline"
size="16px"
class="q-px-sm q-py-sm rounded"
:style="{
color: $q.dark.isActive
? modeView
? '#C9D3DB'
: '#787B7C'
: modeView
? '#787B7C'
: '#C9D3DB',
}"
/>
</template>
<template v-slot:list>
<q-icon
id="icon-mode-list"
name="mdi-format-list-bulleted"
class="q-px-sm q-py-xs rounded"
size="16px"
:style="{
color: $q.dark.isActive
? modeView === true
? '#C9D3DB'
: '#787B7C'
: modeView === false
? '#787B7C'
: '#C9D3DB',
}"
/>
</template>
</q-btn-toggle>
</div>
</div>
<div
class="row q-pa-md col scroll full-width surface-2"
:class="{
'justify-center': totalBranch === 0,
'items-center': totalBranch === 0,
}"
>
<NoData v-if="totalBranch === 0" :not-found="!!inputSearch" />
<div style="width: 100%" v-else>
<q-table
v-if="branch"
flat
class="full-width"
bordered
:rows-per-page-options="[0]"
:rows="branch"
:columns="columns"
:grid="modeView"
card-container-class="row q-col-gutter-md"
row-key="name"
hide-pagination
:visible-columns="branchFieldSelected"
>
<template #header>
<q-tr style="background-color: hsla(var(--info-bg) / 0.07)">
<q-th
v-for="(v, i) in fieldDisplay"
:key="v"
:class="{ 'text-left': i === 0 }"
>
{{ $t(v) }}
</q-th>
<q-th auto-width />
</q-tr>
</template>
<template #body="props">
<q-tr
:class="{
'app-text-muted': props.row.status === 'INACTIVE',
'cursor-pointer': props.row._count?.branch !== 0,
}"
:props="props"
@click="$emit('viewDetail', props.row, props.rowIndex)"
>
<q-td v-if="branchFieldSelected.includes('branchName')">
<div class="row items-center no-wrap">
<div
:class="{
'status-active': props.row.status !== 'INACTIVE',
'status-inactive': props.row.status === 'INACTIVE',
}"
class="q-mr-md"
style="display: flex; margin-bottom: var(--size-2)"
>
<div
class="branch-card__icon"
:class="{ 'branch-card__dark': $q.dark.isActive }"
>
<q-icon
size="md"
style="scale: 0.8"
name="mdi-office-building-outline"
/>
</div>
</div>
<div class="col" style="min-width: fit-content">
<div class="col">
{{
$i18n.locale === 'en-US'
? props.row.nameEN
: props.row.name
}}
</div>
<div class="col app-text-muted">
{{ props.row.code }}
</div>
</div>
</div>
</q-td>
<q-td
v-if="branchFieldSelected.includes('customerBranchFormTab')"
class="text-center"
>
{{ props.row.branchNo || '-' }}
</q-td>
<q-td
v-if="branchFieldSelected.includes('address')"
class="text-center"
>
{{
$i18n.locale === 'en-US'
? `${props.row.addressEN || ''} ${props.row.subDistrict?.nameEN || ''} ${props.row.district?.nameEN || ''} ${props.row.province?.nameEN || ''}`
: `${props.row.address || ''} ${props.row.subDistrict?.name || ''} ${props.row.district?.name || ''} ${props.row.province?.name || ''}`
}}
</q-td>
<q-td
v-if="branchFieldSelected.includes('telephone')"
class="text-center"
>
{{ props.row.telephoneNo || '-' }}
</q-td>
<q-td
v-if="branchFieldSelected.includes('businessTypePure')"
class="text-center"
>
{{ useOptionStore().mapOption(props.row.bussinessType) || '-' }}
</q-td>
<q-td
v-if="branchFieldSelected.includes('totalEmployee')"
class="text-center"
>
{{ props.row._count?.employee }}
</q-td>
<q-td>
<q-btn
icon="mdi-eye-outline"
:id="`btn-eye-${props.row.customerName}`"
size="sm"
dense
round
flat
@click="$emit('viewDetail', props.row, props.rowIndex)"
/>
</q-td>
</q-tr>
</template>
<template #item="props">
<div class="col-12 col-md-6">
<BranchCardCustomer
class="surface-1"
:inactive="props.row.status === 'INACTIVE'"
:color="customerType === 'CORP' ? 'corp' : 'pers'"
:badgeField="['status']"
:data="{
customerBranchFormTab: props.row.branchNo,
branchName: props.row.name,
address:
$i18n.locale === 'en-US'
? `${props.row.addressEN || ''} ${props.row.subDistrict?.nameEN || ''} ${props.row.district?.nameEN || ''} ${props.row.province?.nameEN || ''}`
: `${props.row.address || ''} ${props.row.subDistrict?.name || ''} ${props.row.district?.name || ''} ${props.row.province?.name || ''}`,
telephone: props.row.telephoneNo,
businessTypePure: useOptionStore().mapOption(
props.row.bussinessType,
),
totalEmployee: props.row._count?.employee,
}"
:visible-columns="branchFieldSelected"
@view-detail="$emit('viewDetail', props.row, props.rowIndex)"
/>
</div>
</template>
</q-table>
</div>
</div>
<div class="row justify-between items-center q-px-md q-py-sm surface-2">
<div class="col"></div>
<div class="app-text-muted col text-center">
{{
$t('recordsPage', {
resultcurrentPage: branch?.length,
total: totalBranch,
})
}}
</div>
<div class="col-4 flex justify-end">
<PaginationComponent
v-model:current-page="currentPageBranch"
v-model:max-page="maxPageBranch"
:fetch-data="
async () => {
await fetchList();
flowStore.rotate();
}
"
/>
</div>
</div>
</template>
<style scoped>
.branch-card__icon {
--_branch-card-bg: var(--pink-6-hsl);
background-color: hsla(var(--_branch-card-bg) / 0.15);
border-radius: 50%;
padding: var(--size-1);
position: relative;
transform: rotate(45deg);
&.branch-card__dark {
--_branch-card-bg: var(--pink-5-hsl);
}
&::after {
content: ' ';
display: block;
block-size: 0.5rem;
aspect-ratio: 1;
position: absolute;
border-radius: 50%;
right: -0.25rem;
top: calc(50% - 0.25rem);
bottom: calc(50% - 0.25rem);
background-color: hsla(var(--_branch-status-color) / 1);
}
& :deep(.q-icon) {
transform: rotate(-45deg);
color: hsla(var(--_branch-card-bg) / 1);
}
}
</style>

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>