From 936fd7ebdd10e99efaabe8a0bbc160207f1e0f6c Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Mon, 2 Dec 2024 10:35:50 +0700
Subject: [PATCH] refactor: task order main page & constants

---
 src/i18n/eng.ts                      |   5 ++
 src/i18n/tha.ts                      |   5 ++
 src/pages/09_task-order/MainPage.vue | 125 +++++++++++++++++++++++----
 src/pages/09_task-order/constants.ts |   9 ++
 4 files changed, 127 insertions(+), 17 deletions(-)
 create mode 100644 src/pages/09_task-order/constants.ts

diff --git a/src/i18n/eng.ts b/src/i18n/eng.ts
index d75ef85d..b5d29649 100644
--- a/src/i18n/eng.ts
+++ b/src/i18n/eng.ts
@@ -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: {
diff --git a/src/i18n/tha.ts b/src/i18n/tha.ts
index 31f1d79b..d9ea2c97 100644
--- a/src/i18n/tha.ts
+++ b/src/i18n/tha.ts
@@ -883,6 +883,11 @@ export default {
   taskOrder: {
     title: 'ใบสั่งงาน',
     caption: 'ใบสั่งงานทั้งหมด',
+
+    receiveTaskOrder: 'รับใบสั่งงาน',
+    sendTaskOrder: 'ส่งใบสั่งงาน',
+    payment: 'ขำระเงิน',
+    goodReceipt: 'ใบรับสินค้า',
   },
 
   dialog: {
diff --git a/src/pages/09_task-order/MainPage.vue b/src/pages/09_task-order/MainPage.vue
index 0226987f..4d41368d 100644
--- a/src/pages/09_task-order/MainPage.vue
+++ b/src/pages/09_task-order/MainPage.vue
@@ -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>
diff --git a/src/pages/09_task-order/constants.ts b/src/pages/09_task-order/constants.ts
new file mode 100644
index 00000000..07e2329e
--- /dev/null
+++ b/src/pages/09_task-order/constants.ts
@@ -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' },
+];