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

refactor: add table

Browse source
This commit is contained in:
Thanaphon Frappet 2024-11-07 17:53:40 +07:00
parent 3608f8d0fe
commit 55f6a5f84e
2 changed files with 222 additions and 59 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,7 +1,7 @@
<script lang="ts" setup>
import { pageTabs, fieldSelectedOption } from './constants';
import { pageTabs, columnQuotation } from './constants';
import { onMounted, reactive, ref, watch } from 'vue';
import { onMounted, reactive, ref, watch, computed } from 'vue';
import { storeToRefs } from 'pinia';
// NOTE: Import stores
@ -40,6 +40,7 @@ import {
import { useCustomerForm } from 'src/pages/03_customer-management/form';
import { Quotation } from 'src/stores/quotations/types';
import TableQuotation from 'src/components/05_quotation/TableQuotation.vue';
const quotationFormStore = useQuotationForm();
const customerFormStore = useCustomerForm();
@ -55,6 +56,12 @@ const { state: customerFormState, currentFormData: customerFormData } =
storeToRefs(customerFormStore);
const { currentMyBranch } = storeToRefs(userBranch);
const fieldSelectedOption = computed(() => {
return columnQuotation.map((v) => ({
label: v.label,
value: v.name,
}));
});
const special = ref(false);
const branchId = ref('');
const agentPrice = ref<boolean>(false);
@ -68,7 +75,7 @@ const currentQuotationPayment = ref<Quotation>();
const pageState = reactive({
hideStat: false,
inputSearch: '',
fieldSelected: [],
fieldSelected: [''],
gridView: true,
total: 0,
@ -79,6 +86,8 @@ const pageState = reactive({
receiptModal: false,
});
pageState.fieldSelected = [...columnQuotation.map((v) => v.name)];
const CUSTOMER_BRANCH_DEFAULT: CustomerBranchCreate & {
id?: string;
branchCode?: string;
@ -452,7 +461,6 @@ async function storeDataLocal(id: string) {
</q-input>
<div
v-if="false"
class="row col-12 col-md-4 justify-end"
:class="{ 'q-pt-xs': $q.screen.lt.md }"
style="white-space: nowrap"
@ -582,63 +590,101 @@ async function storeDataLocal(id: string) {
:i18n-args="{ text: $t('quotation.title') }"
/>
</article>
<article v-else class="col q-pa-md surface-2 scroll">
<div class="row q-col-gutter-md">
<div
v-for="v in quotationData"
:key="v.id"
class="col-md-4 col-sm-6 col-12"
>
<QuotationCard
:urgent="v.urgent"
:code="v.code"
:title="v.workName"
:created-at="
new Date(v.createdAt).toLocaleString('th-TH', {
hour12: false,
})
"
:valid-until="
(() => {
const date = new Date(v.dueDate);
date.setHours(23, 59, 59, 0);
return date.toLocaleString('th-TH', { hour12: false });
})()
"
:status="$t(`quotation.status.${v.quotationStatus}`)"
:worker-count="v._count.worker"
:worker-max="v.workerMax || v._count.worker"
:customer-name="
v.customerBranch.registerName ||
`${v.customerBranch.firstName || '-'} ${v.customerBranch.lastName || ''}`
"
:reporter="
$i18n.locale === 'eng'
? v.createdBy.firstNameEN + ' ' + v.createdBy.lastNameEN
: v.createdBy.firstName + ' ' + v.createdBy.lastName
"
:total-price="v.finalPrice"
@preview="storeDataLocal(v.id)"
<article v-else class="col q-pa-md surface-2 full-width scroll">
<div class="row">
<div style="overflow-x: auto">
<TableQuotation
style="max-width: 100%"
:columns="columnQuotation"
:rows="quotationData"
:visible-columns="pageState.fieldSelected"
:grid="pageState.gridView"
@preview="(id: any) => storeDataLocal(id)"
@view="
() => {
(item) => {
triggerQuotationDialog({
statusDialog: 'info',
quotationId: v.id,
branchId: v.customerBranch.customer.registeredBranchId,
quotationId: item.id,
branchId: item.customerBranch.customer.registeredBranchId,
});
}
"
@edit="
triggerQuotationDialog({
statusDialog: 'edit',
quotationId: v.id,
branchId: v.customerBranch.customer.registeredBranchId,
})
(item) =>
triggerQuotationDialog({
statusDialog: 'edit',
quotationId: item.id,
branchId: item.customerBranch.customer.registeredBranchId,
})
"
@link="triggerReceiptDialog(v)"
@upload="console.log('upload')"
@delete="triggerDialogDeleteQuottaion(v.id)"
/>
@delete="(id) => triggerDialogDeleteQuottaion(id)"
>
<template #grid="{ item }">
<div class="col-md-4 col-sm-6 col-12">
<QuotationCard
:urgent="item.row.urgent"
:code="item.row.code"
:title="item.row.workName"
:created-at="
new Date(item.row.createdAt).toLocaleString('th-TH', {
hour12: false,
})
"
:valid-until="
(() => {
const date = new Date(item.row.dueDate);
date.setHours(23, 59, 59, 0);
return date.toLocaleString('th-TH', {
hour12: false,
});
})()
"
:status="
$t(`quotation.status.${item.row.quotationStatus}`)
"
:worker-count="item.row._count.worker"
:worker-max="item.row.workerMax || item.row._count.worker"
:customer-name="
item.row.customerBranch.registerName ||
`${item.row.customerBranch.firstName || '-'} ${item.row.customerBranch.lastName || ''}`
"
:reporter="
$i18n.locale === 'eng'
? item.row.createdBy.firstNameEN +
' ' +
item.row.createdBy.lastNameEN
: item.row.createdBy.firstName +
' ' +
item.row.createdBy.lastName
"
:total-price="item.row.finalPrice"
@preview="storeDataLocal(item.row.id)"
@view="
() => {
triggerQuotationDialog({
statusDialog: 'info',
quotationId: item.row.id,
branchId:
item.row.customerBranch.customer
.registeredBranchId,
});
}
"
@edit="
triggerQuotationDialog({
statusDialog: 'edit',
quotationId: item.row.id,
branchId:
item.row.customerBranch.customer.registeredBranchId,
})
"
@link="triggerReceiptDialog(item.row)"
@upload="console.log('upload')"
@delete="triggerDialogDeleteQuottaion(item.row.id)"
/>
</div>
</template>
</TableQuotation>
</div>
</div>
</article>