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 flat
hide-pagination hide-pagination
card-container-class="q-col-gutter-sm" card-container-class="q-col-gutter-sm"
class="full-width"
> >
<template v-slot:header="props"> <template v-slot:header="props">
<q-tr <q-tr
@ -62,7 +63,7 @@ defineEmits<{
:props="props" :props="props"
> >
<q-th v-for="col in props.cols" :key="col.name" :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-th>
</q-tr> </q-tr>
</template> </template>
@ -106,7 +107,7 @@ defineEmits<{
<q-td v-if="visibleColumns.includes('status')"> <q-td v-if="visibleColumns.includes('status')">
<BadgeComponent <BadgeComponent
:title-i18n="$t(quotationStatus(props.row.quotationStatus))" :title="$t(quotationStatus(props.row.quotationStatus))"
/> />
</q-td> </q-td>
@ -120,7 +121,7 @@ defineEmits<{
</span> </span>
</q-td> </q-td>
<q-td> <q-td class="text-right">
<q-btn <q-btn
:id="`btn-eye-${props.row.firstName}`" :id="`btn-eye-${props.row.firstName}`"
icon="mdi-eye-outline" icon="mdi-eye-outline"
@ -132,6 +133,8 @@ defineEmits<{
/> />
<KebabAction <KebabAction
:idName="`btn-kebab-${props.row.firstName}`"
status="'ACTIVE'"
hide-toggle hide-toggle
@view="$emit('view', props.row)" @view="$emit('view', props.row)"
@edit="$emit('edit', 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() { async function fetchQuotationList() {
{ {
console.log(pageState.currentTab);
const ret = await quotationStore.getQuotationList({ const ret = await quotationStore.getQuotationList({
page: quotationPage.value, page: quotationPage.value,
pageSize: quotationPageSize.value, pageSize: quotationPageSize.value,
@ -473,7 +472,7 @@ async function storeDataLocal(id: string) {
:options=" :options="
fieldSelectedOption.map((v) => ({ fieldSelectedOption.map((v) => ({
...v, ...v,
label: $t(v.label), label: v.label && $t(v.label),
})) }))
" "
:display-value="$t('general.displayField')" :display-value="$t('general.displayField')"
@ -591,101 +590,95 @@ async function storeDataLocal(id: string) {
/> />
</article> </article>
<article v-else class="col surface-2 full-width scroll"> <article v-else class="col surface-2 full-width scroll">
<div class="row"> <div class="q-pa-md">
<div style="overflow-x: auto" class="q-pa-md"> <TableQuotation
<TableQuotation :columns="columnQuotation"
style="max-width: 100%" :rows="quotationData"
:columns="columnQuotation" :visible-columns="pageState.fieldSelected"
:rows="quotationData" :grid="pageState.gridView"
:visible-columns="pageState.fieldSelected" @preview="(id: any) => storeDataLocal(id)"
:grid="pageState.gridView" @view="
@preview="(id: any) => storeDataLocal(id)" (item) => {
@view=" triggerQuotationDialog({
(item) => { statusDialog: 'info',
triggerQuotationDialog({ quotationId: item.id,
statusDialog: 'info', branchId: item.customerBranch.customer.registeredBranchId,
quotationId: item.id, });
branchId: item.customerBranch.customer.registeredBranchId, }
}); "
} @edit="
" (item) =>
@edit=" triggerQuotationDialog({
(item) => statusDialog: 'edit',
triggerQuotationDialog({ quotationId: item.id,
statusDialog: 'edit', branchId: item.customerBranch.customer.registeredBranchId,
quotationId: item.id, })
branchId: item.customerBranch.customer.registeredBranchId, "
}) @delete="(id) => triggerDialogDeleteQuottaion(id)"
" >
@delete="(id) => triggerDialogDeleteQuottaion(id)" <template #grid="{ item }">
> <div class="col-md-4 col-sm-6 col-12">
<template #grid="{ item }"> <QuotationCard
<div class="col-md-4 col-sm-6 col-12"> :urgent="item.row.urgent"
<QuotationCard :code="item.row.code"
:urgent="item.row.urgent" :title="item.row.workName"
:code="item.row.code" :created-at="
:title="item.row.workName" new Date(item.row.createdAt).toLocaleString('th-TH', {
:created-at=" hour12: false,
new Date(item.row.createdAt).toLocaleString('th-TH', { })
"
:valid-until="
(() => {
const date = new Date(item.row.dueDate);
date.setHours(23, 59, 59, 0);
return date.toLocaleString('th-TH', {
hour12: false, hour12: false,
}) });
" })()
:valid-until=" "
(() => { :status="$t(`quotation.status.${item.row.quotationStatus}`)"
const date = new Date(item.row.dueDate); :worker-count="item.row._count.worker"
date.setHours(23, 59, 59, 0); :worker-max="item.row.workerMax || item.row._count.worker"
return date.toLocaleString('th-TH', { :customer-name="
hour12: false, item.row.customerBranch.registerName ||
}); `${item.row.customerBranch.firstName || '-'} ${item.row.customerBranch.lastName || ''}`
})() "
" :reporter="
:status=" $i18n.locale === 'eng'
$t(`quotation.status.${item.row.quotationStatus}`) ? item.row.createdBy.firstNameEN +
" ' ' +
:worker-count="item.row._count.worker" item.row.createdBy.lastNameEN
:worker-max="item.row.workerMax || item.row._count.worker" : item.row.createdBy.firstName +
:customer-name=" ' ' +
item.row.customerBranch.registerName || item.row.createdBy.lastName
`${item.row.customerBranch.firstName || '-'} ${item.row.customerBranch.lastName || ''}` "
" :total-price="item.row.finalPrice"
:reporter=" @preview="storeDataLocal(item.row.id)"
$i18n.locale === 'eng' @view="
? 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({ triggerQuotationDialog({
statusDialog: 'edit', statusDialog: 'info',
quotationId: item.row.id, quotationId: item.row.id,
branchId: branchId:
item.row.customerBranch.customer.registeredBranchId, item.row.customerBranch.customer.registeredBranchId,
}) });
" }
@link="triggerReceiptDialog(item.row)" "
@upload="console.log('upload')" @edit="
@delete="triggerDialogDeleteQuottaion(item.row.id)" triggerQuotationDialog({
/> statusDialog: 'edit',
</div> quotationId: item.row.id,
</template> branchId:
</TableQuotation> item.row.customerBranch.customer.registeredBranchId,
</div> })
"
@link="triggerReceiptDialog(item.row)"
@upload="console.log('upload')"
@delete="triggerDialogDeleteQuottaion(item.row.id)"
/>
</div>
</template>
</TableQuotation>
</div> </div>
</article> </article>