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

refactor: quotation table width & clear warning

Browse source
This commit is contained in:
puriphatt 2024-11-08 10:55:58 +07:00
parent e48f2a66ee
commit 28b48e6c6f
2 changed files with 91 additions and 95 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/components/05_quotation/TableQuotation.vue
View file

@ -55,6 +55,7 @@ defineEmits<{
flat
hide-pagination
card-container-class="q-col-gutter-sm"
class="full-width"
>
<template v-slot:header="props">
<q-tr
@ -62,7 +63,7 @@ defineEmits<{
:props="props"
>
<q-th v-for="col in props.cols" :key="col.name" :props="props">
{{ $t(col.label) }}
{{ col.label && $t(col.label) }}
</q-th>
</q-tr>
</template>
@ -106,7 +107,7 @@ defineEmits<{
<q-td v-if="visibleColumns.includes('status')">
<BadgeComponent
:title-i18n="$t(quotationStatus(props.row.quotationStatus))"
:title="$t(quotationStatus(props.row.quotationStatus))"
/>
</q-td>
@ -120,7 +121,7 @@ defineEmits<{
</span>
</q-td>
<q-td>
<q-td class="text-right">
<q-btn
:id="`btn-eye-${props.row.firstName}`"
icon="mdi-eye-outline"
@ -132,6 +133,8 @@ defineEmits<{
/>
<KebabAction
:idName="`btn-kebab-${props.row.firstName}`"
status="'ACTIVE'"
hide-toggle
@view="$emit('view', props.row)"
@edit="$emit('edit', props.row)"

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

@ -271,7 +271,6 @@ onMounted(async () => {
async function fetchQuotationList() {
{
console.log(pageState.currentTab);
const ret = await quotationStore.getQuotationList({
page: quotationPage.value,
pageSize: quotationPageSize.value,
@ -473,7 +472,7 @@ async function storeDataLocal(id: string) {
:options="
fieldSelectedOption.map((v) => ({
...v,
label: $t(v.label),
label: v.label && $t(v.label),
}))
"
:display-value="$t('general.displayField')"
@ -591,101 +590,95 @@ async function storeDataLocal(id: string) {
/>
</article>
<article v-else class="col surface-2 full-width scroll">
<div class="row">
<div style="overflow-x: auto" class="q-pa-md">
<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: item.id,
branchId: item.customerBranch.customer.registeredBranchId,
});
}
"
@edit="
(item) =>
triggerQuotationDialog({
statusDialog: 'edit',
quotationId: item.id,
branchId: item.customerBranch.customer.registeredBranchId,
})
"
@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', {
<div class="q-pa-md">
<TableQuotation
:columns="columnQuotation"
:rows="quotationData"
:visible-columns="pageState.fieldSelected"
:grid="pageState.gridView"
@preview="(id: any) => storeDataLocal(id)"
@view="
(item) => {
triggerQuotationDialog({
statusDialog: 'info',
quotationId: item.id,
branchId: item.customerBranch.customer.registeredBranchId,
});
}
"
@edit="
(item) =>
triggerQuotationDialog({
statusDialog: 'edit',
quotationId: item.id,
branchId: item.customerBranch.customer.registeredBranchId,
})
"
@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,
})
"
: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="
});
})()
"
: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: 'edit',
statusDialog: 'info',
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>
});
}
"
@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>
</article>