refactor: task order main page & constants
This commit is contained in:
puriphatt
parent
66fed37183
commit
936fd7ebdd
4 changed files with 127 additions and 17 deletions
|
|
@ -892,6 +892,11 @@ export default {
|
|||
taskOrder: {
|
||||
title: 'Task Order',
|
||||
caption: 'All Task Order',
|
||||
|
||||
receiveTaskOrder: 'Receive Task Order',
|
||||
sendTaskOrder: 'Send Task Order',
|
||||
payment: 'Payment',
|
||||
goodReceipt: 'Good Receipt',
|
||||
},
|
||||
|
||||
dialog: {
|
||||
|
|
|
|||
|
|
@ -883,6 +883,11 @@ export default {
|
|||
taskOrder: {
|
||||
title: 'ใบสั่งงาน',
|
||||
caption: 'ใบสั่งงานทั้งหมด',
|
||||
|
||||
receiveTaskOrder: 'รับใบสั่งงาน',
|
||||
sendTaskOrder: 'ส่งใบสั่งงาน',
|
||||
payment: 'ขำระเงิน',
|
||||
goodReceipt: 'ใบรับสินค้า',
|
||||
},
|
||||
|
||||
dialog: {
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ import PaginationPageSize from 'src/components/PaginationPageSize.vue';
|
|||
// NOTE: Stores & Type
|
||||
import { useNavigator } from 'src/stores/navigator';
|
||||
import useFlowStore from 'src/stores/flow';
|
||||
import { pageTabs } from './constants';
|
||||
|
||||
const navigatorStore = useNavigator();
|
||||
const flowStore = useFlowStore();
|
||||
|
|
@ -19,6 +20,7 @@ const flowStore = useFlowStore();
|
|||
// NOTE: Variable
|
||||
const pageState = reactive({
|
||||
// TODO: replace state
|
||||
currentTab: 'title',
|
||||
hideStat: false,
|
||||
statusFilter: 'None',
|
||||
inputSearch: '',
|
||||
|
|
@ -80,21 +82,33 @@ onMounted(async () => {
|
|||
labelI18n
|
||||
:branch="[
|
||||
{
|
||||
icon: 'icon-park-outline:loading-one',
|
||||
icon: 'material-symbols-light:receipt-long',
|
||||
count: 0,
|
||||
label: 'requestList.status.Pending',
|
||||
color: 'orange',
|
||||
},
|
||||
{
|
||||
icon: 'mdi-timer-sand',
|
||||
count: 0,
|
||||
label: 'requestList.status.InProgress',
|
||||
label: 'taskOrder.title',
|
||||
color: 'blue',
|
||||
},
|
||||
{
|
||||
icon: 'mdi-check-decagram-outline',
|
||||
icon: 'material-symbols-light:receipt-long',
|
||||
count: 0,
|
||||
label: 'requestList.status.Completed',
|
||||
label: 'taskOrder.receiveTaskOrder',
|
||||
color: 'orange',
|
||||
},
|
||||
{
|
||||
icon: 'mdi:email-fast-outline',
|
||||
count: 0,
|
||||
label: 'taskOrder.sendTaskOrder',
|
||||
color: 'pink',
|
||||
},
|
||||
{
|
||||
icon: 'tabler:cash-register',
|
||||
count: 0,
|
||||
label: 'taskOrder.payment',
|
||||
color: 'purple',
|
||||
},
|
||||
{
|
||||
icon: 'fluent:receipt-bag-24-regular',
|
||||
count: 0,
|
||||
label: 'taskOrder.goodReceipt',
|
||||
color: 'light-green',
|
||||
},
|
||||
]"
|
||||
|
|
@ -108,10 +122,12 @@ onMounted(async () => {
|
|||
<div class="column full-height">
|
||||
<!-- SEC: header content -->
|
||||
<header
|
||||
class="row surface-3 justify-between full-width items-center bordered-b"
|
||||
class="row surface-3 justify-between full-width items-center"
|
||||
style="z-index: 1"
|
||||
>
|
||||
<div class="row q-py-sm q-px-md justify-between full-width">
|
||||
<section
|
||||
class="row q-py-sm q-px-md bordered-b justify-between full-width"
|
||||
>
|
||||
<q-input
|
||||
for="input-search"
|
||||
outlined
|
||||
|
|
@ -165,10 +181,6 @@ onMounted(async () => {
|
|||
]"
|
||||
/>
|
||||
<!-- TODO: select -->
|
||||
<!-- fieldSelectedOption.map((v) => ({
|
||||
...v,
|
||||
label: v.label && $t(v.label),
|
||||
})) -->
|
||||
<q-select
|
||||
v-if="!pageState.gridView"
|
||||
id="select-field"
|
||||
|
|
@ -233,8 +245,87 @@ onMounted(async () => {
|
|||
</template>
|
||||
</q-btn-toggle>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<nav class="surface-2 bordered-b q-px-md full-width">
|
||||
<q-tabs
|
||||
inline-label
|
||||
mobile-arrows
|
||||
dense
|
||||
v-model="pageState.currentTab"
|
||||
align="left"
|
||||
class="full-width"
|
||||
active-color="info"
|
||||
>
|
||||
<q-tab
|
||||
v-for="tab in pageTabs"
|
||||
:name="tab.value"
|
||||
:key="tab.value"
|
||||
@click="
|
||||
() => {
|
||||
pageState.currentTab = tab.value;
|
||||
pageState.inputSearch = '';
|
||||
|
||||
flowStore.rotate();
|
||||
}
|
||||
"
|
||||
>
|
||||
<div
|
||||
class="row text-capitalize"
|
||||
:class="
|
||||
pageState.currentTab === tab.value
|
||||
? 'text-bold'
|
||||
: 'app-text-muted'
|
||||
"
|
||||
>
|
||||
{{ $t(`taskOrder.${tab.label}`) }}
|
||||
</div>
|
||||
</q-tab>
|
||||
</q-tabs>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<!-- SEC: body content -->
|
||||
<article
|
||||
v-if="true"
|
||||
class="col surface-2 flex items-center justify-center"
|
||||
>
|
||||
<NoData :not-found="!!pageState.inputSearch" />
|
||||
</article>
|
||||
<article
|
||||
v-else
|
||||
class="col surface-2 full-width scroll q-pa-md"
|
||||
></article>
|
||||
|
||||
<!-- SEC: footer content -->
|
||||
<!-- <footer
|
||||
class="row justify-between items-center q-px-md q-py-sm surface-2"
|
||||
v-if="pageMax > 0"
|
||||
>
|
||||
<div class="col-4">
|
||||
<div class="row items-center no-wrap">
|
||||
<div class="app-text-muted q-mr-sm" v-if="$q.screen.gt.sm">
|
||||
{{ $t('general.recordPerPage') }}
|
||||
</div>
|
||||
<div><PaginationPageSize v-model="pageSize" /></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4 row justify-center app-text-muted">
|
||||
{{
|
||||
$t('general.recordsPage', {
|
||||
resultcurrentPage: data.length,
|
||||
total: pageState.inputSearch ? data.length : pageState.total,
|
||||
})
|
||||
}}
|
||||
</div>
|
||||
<nav class="col-4 row justify-end">
|
||||
<PaginationComponent
|
||||
v-model:current-page="page"
|
||||
v-model:max-page="pageMax"
|
||||
:fetch-data="() => fetchList({ rotateFlowId: true })"
|
||||
/>
|
||||
</nav>
|
||||
</footer> -->
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
|
|
|||
9
src/pages/09_task-order/constants.ts
Normal file
9
src/pages/09_task-order/constants.ts
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
import { QTableProps } from 'quasar';
|
||||
|
||||
export const pageTabs = [
|
||||
{ label: 'title', value: 'title' },
|
||||
{ label: 'receiveTaskOrder', value: 'receiveTaskOrder' },
|
||||
{ label: 'sendTaskOrder', value: 'sendTaskOrder' },
|
||||
{ label: 'payment', value: 'payment' },
|
||||
{ label: 'goodReceipt', value: 'goodReceipt' },
|
||||
];
|
||||
Loading…
Add table
Add a link
Reference in a new issue