refactor: request list => meta data display

src/i18n/eng.ts

@@ -861,6 +861,7 @@ export default {
     localEmployee: 'Local Employee',
     nonLocalEmployee: 'Non Local Employee',
     noWorkflowTemplate: 'A workflow template has not been selected.',
+    ref: 'Reference',
     status: {
       work: {
         Pending: 'Await for order',

src/i18n/tha.ts

@@ -853,6 +853,7 @@ export default {
     localEmployee: 'พนักงานในพื้นที่',
     nonLocalEmployee: 'พนักงานนอกพื้นที่',
     noWorkflowTemplate: 'คุณไม่ได้เลือกแม่แบบขั้นตอนการทำงาน',
+    ref: 'อ้างอิง',
     status: {
       work: {
         Pending: 'รอสั่งงาน',

src/pages/08_request-list/RequestListView.vue

@@ -8,6 +8,7 @@ import DataDisplay from 'src/components/08_request-list/DataDisplay.vue';
 import DocumentExpansion from './DocumentExpansion.vue';
 import FormExpansion from './FormExpansion.vue';
 import PropertiesExpansion from './PropertiesExpansion.vue';
+import FormGroupHead from './FormGroupHead.vue';
 
 // NOTE: Store
 import { dateFormatJS } from 'src/utils/datetime';
@@ -369,9 +370,9 @@ const successAll = computed(() => {
           </nav>
 
           <!-- meta data -->
-          <article class="surface-1 rounded q-pa-sm">
+          <article class="surface-1 rounded">
             <div
-              class="text-weight-bold row items-center no-wrap"
+              class="text-weight-bold row items-center no-wrap q-pa-sm"
               style="gap: 16px"
             >
               <q-img src="/images/quotation-avatar.png" width="42px" />
@@ -394,10 +395,85 @@ const successAll = computed(() => {
             <transition name="slide">
               <section
                 v-if="!pageState.hideMetaData"
-                class="q-pt-md"
+                class=""
                 :class="{ row: $q.screen.gt.sm, column: $q.screen.lt.md }"
               >
+                <FormGroupHead class="col-12">
+                  {{ $t('requestList.ref') }}
+                </FormGroupHead>
                 <div
+                  class="col-12 q-pa-sm"
+                  :class="{
+                    row: $q.screen.gt.sm,
+                    'column q-gutter-y-sm': $q.screen.lt.md,
+                  }"
+                >
+                  <DataDisplay
+                    class="col"
+                    icon="mdi-file-document-outline"
+                    :label="$t('requestList.quotationCode')"
+                    :value="data.quotation.code || '-'"
+                  />
+                  <DataDisplay
+                    class="col"
+                    icon="mdi-file-document-outline"
+                    tooltip
+                    :label="$t('requestList.invoiceCode')"
+                    :value="
+                      data.quotation?.invoice
+                        ?.map((i: Invoice) => i.code)
+                        .join(', ') || '-'
+                    "
+                  />
+                  <DataDisplay
+                    class="col"
+                    icon="mdi-file-document-outline"
+                    tooltip
+                    :label="$t('requestList.receiptCode')"
+                    :value="
+                      data.quotation?.invoice
+                        ?.flatMap((i: Invoice) => i.payment?.code || [])
+                        .join(', ') || '-'
+                    "
+                  />
+                  <div v-if="$q.screen.gt.sm" class="col"></div>
+                </div>
+                <FormGroupHead class="col-12">
+                  {{ $t('quotation.employee') }}
+                </FormGroupHead>
+                <div
+                  class="col-12 q-pa-sm"
+                  :class="{
+                    row: $q.screen.gt.sm,
+                    'column q-gutter-y-sm': $q.screen.lt.md,
+                  }"
+                >
+                  <DataDisplay
+                    class="col"
+                    icon="mdi-account-settings-outline"
+                    :label="$t('customer.employer')"
+                    :value="
+                      getCustomerName(data, { locale: locale, noCode: true }) ||
+                      '-'
+                    "
+                  />
+                  <DataDisplay
+                    class="col"
+                    icon="mdi-account-settings-outline"
+                    :label="$t('customer.employee')"
+                    :value="
+                      getEmployeeName(data, { locale: $i18n.locale }) || '-'
+                    "
+                  />
+                  <DataDisplay
+                    class="col"
+                    icon="mdi-passport"
+                    :label="$t('customerEmployee.form.passportNo')"
+                    :value="data.employee.employeePassport?.[0]?.number || '-'"
+                  />
+                  <div v-if="$q.screen.gt.sm" class="col"></div>
+                </div>
+                <!-- <div
                   class="col q-gutter-y-md"
                   :class="{ column: $q.screen.gt.sm, row: $q.screen.lt.md }"
                 >
@@ -491,7 +567,7 @@ const successAll = computed(() => {
                     :label="$t('flow.responsiblePerson')"
                     :value="'-'"
                   />
-                </div>
+                </div> -->
               </section>
             </transition>
           </article>