refactor(form-quotation): layout

src/pages/05_quotation/QuotationForm.vue

@@ -59,6 +59,7 @@ import {
 } from 'src/pages/03_customer-management/constant';
 import { precisionRound } from 'src/utils/arithmetic';
 import { useConfigStore } from 'src/stores/config';
+import QuotationFormMetadata from './QuotationFormMetadata.vue';
 
 // defineProps<{
 //   readonly?: boolean;
@@ -570,26 +571,6 @@ onMounted(async () => {
     sessionData.value = parsed;
   }
 
-  // get query string
-  // const urlParams = new URLSearchParams(window.location.search);
-  //
-  // const price = urlParams.get('agentPrice');
-  // agentPrice.value = price === 'true' ? true : false;
-  //
-  // date.value = Date.now();
-  //
-  // currentQuotationId.value = urlParams.get('quotationId') || undefined;
-  //
-  // quotationFormData.value.registeredBranchId = urlParams.get('branchId') || '';
-  //
-  // quotationFormData.value.customerBranchId =
-  //   urlParams.get('customerBranchId') || '';
-  //
-  // quotationFormState.value.mode = urlParams.get('statusDialog') as
-  //   | 'info'
-  //   | 'edit'
-  //   | 'create';
-
   // fetch option
   const resultOption = await fetch('/option/option.json');
   const rawOption = await resultOption.json();
@@ -693,7 +674,7 @@ function storeDataLocal() {
       <div class="gray-segment"></div>
     </div>
 
-    <header class="row q-px-md q-py-sm items-center full-width">
+    <header class="row q-px-md q-py-sm items-center full">
       <div style="flex: 1" class="row items-center">
         <q-img src="/icons/favicon-512x512.png" width="3rem" />
         <span class="column text-h6 text-bold q-ml-md">
@@ -710,31 +691,124 @@ function storeDataLocal() {
           </span>
         </span>
       </div>
-      <FormAbout
-        class="col-4"
-        input-only
-        v-model:branch-id="quotationFormData.registeredBranchId"
-        v-model:customer-branch-id="quotationFormData.customerBranchId"
-        :readonly="readonly"
-        @add-customer=""
-      />
     </header>
 
     <article
-      class="row col full-width q-pa-md"
+      class="col full-width q-pa-md"
       style="flex-grow: 1; overflow-y: hidden"
       :style="{
         overflowY: $q.screen.gt.xs ? 'hidden' : 'auto',
       }"
     >
       <section
-        class="col-sm col-12 row scroll"
+        class="col-sm col-12 scroll"
         :class="{
           'full-height q-mr-md': $q.screen.gt.xs,
           'q-mb-md': $q.screen.lt.md,
         }"
       >
         <div class="col q-gutter-y-md">
+          <q-expansion-item
+            for="item-up"
+            id="item-up"
+            dense
+            class="overflow-hidden"
+            switch-toggle-side
+            default-opened
+            style="border-radius: var(--radius-2)"
+            expand-icon="mdi-chevron-down-circle"
+            header-class="surface-1"
+          >
+            <template v-slot:header>
+              <section class="row items-center full-width">
+                <div class="row items-center q-pr-md q-py-sm">
+                  <span
+                    class="text-weight-medium q-mr-md"
+                    style="font-size: 18px"
+                  >
+                    {{ $t('general.document') }}
+                  </span>
+                </div>
+
+                <q-checkbox
+                  v-model="quotationFormData.urgent"
+                  class="q-ml-auto"
+                  size="xs"
+                  :label="$t('general.urgent')"
+                  :disable="readonly"
+                />
+              </section>
+            </template>
+
+            <div class="surface-1 q-pa-md full-width">
+              <QuotationFormMetadata
+                class="q-mb-md"
+                :readonly
+                :actor="quotationFormState.createdBy?.($i18n.locale) || ''"
+                :quotation-no="(quotationFull && quotationFull.code) || ''"
+                v-model:urgent="quotationFormData.urgent"
+                v-model:work-name="quotationFormData.workName"
+                v-model:contactor="quotationFormData.contactName"
+                v-model:telephone="quotationFormData.contactTel"
+                v-model:document-receive-point="
+                  quotationFormData.documentReceivePoint
+                "
+                v-model:due-date="quotationFormData.dueDate"
+              >
+                <template #issue-info>
+                  <FormAbout
+                    class="col-12 col-md-8"
+                    input-only
+                    v-model:branch-id="quotationFormData.registeredBranchId"
+                    v-model:customer-branch-id="
+                      quotationFormData.customerBranchId
+                    "
+                    :readonly="readonly"
+                    @add-customer=""
+                  />
+                </template>
+              </QuotationFormMetadata>
+
+              <span
+                class="text-weight-medium q-mt-md q-mr-md"
+                style="font-size: 18px"
+              >
+                {{ $t('general.remark') }}
+              </span>
+              <hr
+                style="border: 1px solid var(--border-color)"
+                class="q-mb-md"
+              />
+              <q-editor
+                dense
+                :readonly
+                :model-value="quotationFormData.remark || ''"
+                min-height="5rem"
+                class="full-width"
+                toolbar-bg="input-border"
+                style="cursor: auto; color: var(--foreground)"
+                :flat="!readonly"
+                :style="`width: ${$q.screen.gt.xs ? '100%' : '63vw'}`"
+                :toolbar="[['left', 'center', 'justify'], ['clip']]"
+                :toolbar-toggle-color="readonly ? 'disabled' : 'primary'"
+                :toolbar-color="
+                  readonly ? 'disabled' : $q.dark.isActive ? 'white' : ''
+                "
+                :definitions="{
+                  clip: {
+                    icon: 'mdi-paperclip',
+                    tip: 'Upload',
+                    handler: () => console.log('upload'),
+                  },
+                }"
+                @update:model-value="
+                  (v) => {
+                    quotationFormData.remark = v;
+                  }
+                "
+              />
+            </div>
+          </q-expansion-item>
           <q-expansion-item
             for="item-up"
             id="item-up"
@@ -866,7 +940,6 @@ function storeDataLocal() {
               />
             </div>
           </q-expansion-item>
-
           <q-expansion-item
             for="item-up"
             id="item-up"
@@ -879,61 +952,20 @@ function storeDataLocal() {
             header-class="surface-1"
           >
             <template v-slot:header>
-              <div class="row full-width items-center q-pr-md q-py-sm">
+              <section class="row items-center full-width">
-                <span class="text-weight-medium" style="font-size: 18px">
+                <div class="row items-center q-pr-md q-py-sm">
-                  {{ $t('general.remark') }}
+                  <span
+                    class="text-weight-medium q-mr-md"
+                    style="font-size: 18px"
+                  >
+                    {{ $t('general.payment') }}
                   </span>
                 </div>
-            </template>
-            <div class="surface-1 q-pa-md full-width">
-              <q-editor
-                dense
-                :readonly
-                :model-value="quotationFormData.remark || ''"
-                min-height="5rem"
-                class="full-width"
-                toolbar-bg="input-border"
-                style="cursor: auto; color: var(--foreground)"
-                :flat="!readonly"
-                :style="`width: ${$q.screen.gt.xs ? '100%' : '63vw'}`"
-                :toolbar="[['left', 'center', 'justify'], ['clip']]"
-                :toolbar-toggle-color="readonly ? 'disabled' : 'primary'"
-                :toolbar-color="
-                  readonly ? 'disabled' : $q.dark.isActive ? 'white' : ''
-                "
-                :definitions="{
-                  clip: {
-                    icon: 'mdi-paperclip',
-                    tip: 'Upload',
-                    handler: () => console.log('upload'),
-                  },
-                }"
-                @update:model-value="
-                  (v) => {
-                    quotationFormData.remark = v;
-                  }
-                "
-              />
-            </div>
-          </q-expansion-item>
-        </div>
               </section>
+            </template>
 
-      <div
+            <div class="surface-1 q-pa-md full-width">
-        class="col-12 col-md-3 col-sm-4 scroll"
-        :class="{ 'full-height': $q.screen.gt.xs }"
-      >
               <QuotationFormInfo
-          :quotation-no="(quotationFull && quotationFull.code) || ''"
-          v-model:urgent="quotationFormData.urgent"
-          :actor="quotationFormState.createdBy?.($i18n.locale) || ''"
-          v-model:work-name="quotationFormData.workName"
-          v-model:contactor="quotationFormData.contactName"
-          v-model:telephone="quotationFormData.contactTel"
-          v-model:document-receive-point="
-            quotationFormData.documentReceivePoint
-          "
-          v-model:due-date="quotationFormData.dueDate"
                 v-model:pay-type="quotationFormData.payCondition"
                 v-model:pay-bank="payBank"
                 v-model:pay-split-count="quotationFormData.paySplitCount"
@@ -944,6 +976,9 @@ function storeDataLocal() {
                 v-model:summary-price="summaryPrice"
               />
             </div>
+          </q-expansion-item>
+        </div>
+      </section>
     </article>
 
     <footer class="surface-1 q-pa-md full-width">

src/pages/05_quotation/QuotationFormInfo.vue

@@ -28,22 +28,9 @@ defineProps<{
 const { t } = useI18n();
 const configStore = useConfigStore();
 const { data: config } = storeToRefs(configStore);
-
-const urgent = defineModel<boolean>('urgent', {
-  required: true,
-  default: false,
-});
-const actor = defineModel<string>('actor', { required: false });
 const payBillDate = defineModel<Date | null | undefined>('payBillDate', {
   required: false,
 });
-const workName = defineModel<string>('workName', { required: true });
-const contactor = defineModel<string>('contactor', { required: true });
-const telephone = defineModel<string>('telephone', { required: true });
-const documentReceivePoint = defineModel<string>('documentReceivePoint', {
-  required: true,
-});
-const dueDate = defineModel<Date | string>('dueDate', { required: true });
 const payType = defineModel<'Full' | 'Split' | 'BillFull' | 'BillSplit'>(
   'payType',
   { required: true },
@@ -224,93 +211,8 @@ watch(
 </script>
 
 <template>
-  <AppBox no-padding bordered class="column">
+  <AppBox no-padding bordered class="row">
-    <div
+    <div class="col bordered-r">
-      class="bordered-b q-px-md q-py-sm row bg-color-orange-light items-center"
-    >
-      <div class="icon-wrapper bg-color-orange q-mr-sm">
-        <q-icon name="mdi-file-outline" />
-      </div>
-      <span class="text-weight-bold">
-        {{ $t('general.information', { msg: $t('general.attachment') }) }}
-      </span>
-
-      <q-checkbox
-        v-model="urgent"
-        class="q-ml-auto"
-        size="xs"
-        :label="$t('general.urgent')"
-        :disable="readonly"
-      />
-    </div>
-
-    <div class="q-pa-sm">
-      <div class="row q-col-gutter-sm">
-        <q-input
-          for="input-quotation"
-          :label="$t('general.itemNo', { msg: $t('quotation.title') })"
-          :readonly
-          :model-value="!quotationNo ? $t('general.generated') : quotationNo"
-          :disable="!readonly"
-          class="col-12"
-          dense
-          outlined
-        />
-        <q-input
-          for="input-actor"
-          :label="$t('quotation.actor')"
-          :readonly
-          v-model="actor"
-          :disable="!readonly"
-          class="col-12"
-          dense
-          outlined
-        />
-        <q-input
-          for="input-work-name"
-          :label="$t('quotation.workName')"
-          :readonly
-          v-model="workName"
-          class="col-12"
-          dense
-          outlined
-        />
-        <q-input
-          for="input-contact-name"
-          :label="$t('quotation.contactName')"
-          :readonly
-          v-model="contactor"
-          class="col-12"
-          dense
-          outlined
-        />
-        <q-input
-          for="input-telephone"
-          :label="$t('general.telephone')"
-          :readonly="readonly"
-          v-model="telephone"
-          class="col-12"
-          dense
-          outlined
-        />
-        <q-input
-          for="input-docs-receive-point"
-          :label="$t('quotation.documentReceivePoint')"
-          :readonly
-          v-model="documentReceivePoint"
-          class="col-12"
-          dense
-          outlined
-        />
-        <DatePicker
-          id="select-due-date"
-          :label="$t('quotation.dueDate')"
-          :readonly
-          v-model="dueDate"
-          class="col-12"
-        />
-      </div>
-    </div>
       <div
         class="bordered-b q-px-md q-py-sm row bg-color-orange-light items-center"
       >
@@ -323,8 +225,9 @@ watch(
       </div>
       <div class="q-pa-sm">
         <div class="row q-col-gutter-sm">
+          <section class="row q-col-gutter-sm col-12 items-center">
             <SelectInput
-          class="col-12"
+              class="col-6"
               :label="$t('quotation.payType')"
               :option="payTypeOpion"
               :readonly
@@ -332,11 +235,8 @@ watch(
               v-model="payType"
             />
 
-        <q-field
+            <div
-          dense
+              class="col-6"
-          :readonly
-          outlined
-          class="col-12"
               v-if="payType === 'Split' || payType === 'BillSplit'"
             >
               <div class="row full-width items-center justify-between q-py-xs">
@@ -367,7 +267,8 @@ watch(
                   @update:model-value="(i) => (paySplitCount = Number(i))"
                 />
               </div>
-        </q-field>
+            </div>
+          </section>
 
           <section
             v-if="payType === 'Split' || payType === 'BillSplit'"
@@ -439,82 +340,10 @@ watch(
             :label="$t('quotation.callDueDate')"
             v-model="payBillDate"
           />
-
-        <!-- <q-select
-          outlined
-          clearable
-          use-input
-          emit-value
-          fill-input
-          map-options
-          hide-bottom-space
-          option-value="value"
-          input-debounce="0"
-          option-label="label"
-          class="col-12"
-          autocomplete="off"
-          for="select-bankbook"
-          dense
-          :label="$t('quotation.bank')"
-          :options="bankBookOptions"
-          :readonly
-          :hide-dropdown-icon="readonly"
-          v-model="payBank"
-          @filter="bankBoookFilter"
-        >
-          <template v-slot:option="scope">
-            <q-item
-              v-if="scope.opt"
-              v-bind="scope.itemProps"
-              class="row items-center"
-            >
-              <q-item-section avatar>
-                <q-img
-                  :src="`/img/bank/${scope.opt.value}.png`"
-                  class="bordered"
-                  style="
-                    border-radius: 50%;
-                    aspect-ratio: 1;
-                    height: 2rem;
-                    width: 2rem;
-                  "
-                />
-              </q-item-section>
-              <q-item-section>
-                {{ scope.opt.label }}
-              </q-item-section>
-            </q-item>
-          </template>
-
-          <template v-slot:selected-item="scope">
-            <q-item-section
-              v-if="scope.opt && !!payBank"
-              avatar
-              class="q-py-sm row"
-            >
-              <q-img
-                :src="`/img/bank/${scope.opt.value}.png`"
-                class="bordered"
-                style="
-                  border-radius: 50%;
-                  aspect-ratio: 1;
-                  height: 2rem;
-                  width: 2rem;
-                "
-              />
-            </q-item-section>
-          </template>
-
-          <template v-slot:no-option>
-            <q-item>
-              <q-item-section class="text-grey">
-                {{ $t('general.noData') }}
-              </q-item-section>
-            </q-item>
-          </template>
-        </q-select> -->
         </div>
       </div>
+    </div>
+    <div class="col">
       <div
         class="bordered-b q-px-md q-py-sm row bg-color-orange-light items-center"
       >
@@ -525,7 +354,7 @@ watch(
           {{ $t('quotation.summary') }}
         </span>
       </div>
-    <div class="q-pa-sm">
+      <div class="q-pa-sm price-container">
         <div class="row">
           {{ $t('general.total') }}
           <span class="q-ml-auto">
@@ -589,6 +418,7 @@ watch(
             dense
             outlined
             class="q-ml-auto price-tag"
+            style="padding-inline: none !important"
             input-class="text-right"
             debounce="500"
             :model-value="commaInput(finalDiscount.toString() || '0')"
@@ -611,10 +441,13 @@ watch(
         {{ $t('quotation.totalPriceBaht') }}
 
         <span class="q-ml-auto" style="color: var(--brand-1)">
-        {{ formatNumberDecimal(Math.max(summaryPrice.finalPrice, 0), 2) || 0 }}
+          {{
+            formatNumberDecimal(Math.max(summaryPrice.finalPrice, 0), 2) || 0
+          }}
           ฿
         </span>
       </div>
+    </div>
   </AppBox>
 </template>
 
@@ -648,9 +481,13 @@ watch(
 
 .bg-color-orange-light {
   --_color: var(--yellow-7-hsl);
-  background: hsla(var(--_color) / 0.2);
+  background: hsla(var(--_color) / 0.1);
 }
 .dark .bg-color-orange {
   --_color: var(--orange-6-hsl / 0.2);
 }
+
+.price-container > * {
+  padding: var(--size-2);
+}
 </style>

src/pages/05_quotation/QuotationFormMetadata.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import DatePicker from 'src/components/shared/DatePicker.vue';
+
+defineProps<{
+  readonly: boolean;
+  quotationNo?: string;
+}>();
+
+const actor = defineModel<string>('actor', { required: false });
+const workName = defineModel<string>('workName', { required: true });
+const contactor = defineModel<string>('contactor', { required: true });
+const telephone = defineModel<string>('telephone', { required: true });
+const documentReceivePoint = defineModel<string>('documentReceivePoint', {
+  required: true,
+});
+const dueDate = defineModel<Date | string>('dueDate', { required: true });
+const createdAt = defineModel<Date | string>('createdAt');
+</script>
+
+<template>
+  <div class="row q-col-gutter-sm">
+    <slot name="issue-info" />
+    <DatePicker
+      id="select-due-date"
+      :label="$t('general.createdAt')"
+      :model-value="createdAt || new Date()"
+      class="col-6 col-md-2"
+      :readonly
+      :disabled="!readonly"
+    />
+    <DatePicker
+      id="select-due-date"
+      :label="$t('quotation.dueDate')"
+      :readonly
+      v-model="dueDate"
+      class="col-6 col-md-2"
+    />
+    <q-input
+      for="input-quotation"
+      :label="$t('general.itemNo', { msg: $t('quotation.title') })"
+      :readonly
+      :model-value="!quotationNo ? $t('general.generated') : quotationNo"
+      :disable="!readonly"
+      class="col-12 col-md-2"
+      dense
+      outlined
+    />
+    <q-input
+      for="input-actor"
+      :label="$t('quotation.actor')"
+      :readonly
+      v-model="actor"
+      :disable="!readonly"
+      class="col-12 col-md-2"
+      dense
+      outlined
+    />
+    <q-input
+      for="input-work-name"
+      :label="$t('quotation.workName')"
+      :readonly
+      v-model="workName"
+      class="col-12 col-md-2"
+      dense
+      outlined
+    />
+    <q-input
+      for="input-contact-name"
+      :label="$t('quotation.contactName')"
+      :readonly
+      v-model="contactor"
+      class="col-12 col-md-2"
+      dense
+      outlined
+    />
+    <q-input
+      for="input-telephone"
+      :label="$t('general.telephone')"
+      :readonly="readonly"
+      v-model="telephone"
+      class="col-12 col-md-2"
+      dense
+      outlined
+    />
+    <q-input
+      for="input-docs-receive-point"
+      :label="$t('quotation.documentReceivePoint')"
+      :readonly
+      v-model="documentReceivePoint"
+      class="col-12 col-md-2"
+      dense
+      outlined
+    />
+  </div>
+</template>

src/pages/05_quotation/form.ts

@@ -71,10 +71,12 @@ export const useQuotationForm = defineStore('form-quotation', () => {
   const currentFormState = ref<{
     mode: null | 'info' | 'create' | 'edit';
     source?: QuotationFull;
+    createdAt: string | Date;
     createdBy: (locale: string) => string;
   }>({
     mode: null,
     createdBy: (_) => getName() || '',
+    createdAt: '',
   });
 
   function isFormDataDifferent() {
@@ -137,6 +139,8 @@ export const useQuotationForm = defineStore('form-quotation', () => {
         ? data.createdBy.firstNameEN + ' ' + data.createdBy.lastNameEN
         : data.createdBy.firstName + ' ' + data.createdBy.lastName;
 
+    currentFormState.value.createdAt = data.createdAt;
+
     if (mode === 'assign') return;
 
     currentFormState.value.mode = mode;