From 93d7aa4eb71d5788648d0dfe60bd42ebe891bec4 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 17 Oct 2024 13:23:53 +0700
Subject: [PATCH] refactor(05): receipt dialog

---
 public/images/upload.png                 | Bin 0 -> 9655 bytes
 src/pages/05_quotation/MainPage.vue      |  10 +-
 src/pages/05_quotation/ReceiptDialog.vue | 326 +++++++++++++++++++++++
 3 files changed, 335 insertions(+), 1 deletion(-)
 create mode 100644 public/images/upload.png
 create mode 100644 src/pages/05_quotation/ReceiptDialog.vue

diff --git a/public/images/upload.png b/public/images/upload.png
new file mode 100644
index 0000000000000000000000000000000000000000..e735a946e5c03c030f4efe541f9275b82209d3da
GIT binary patch
literal 9655
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

literal 0
HcmV?d00001

diff --git a/src/pages/05_quotation/MainPage.vue b/src/pages/05_quotation/MainPage.vue
index ac627068..e0997d25 100644
--- a/src/pages/05_quotation/MainPage.vue
+++ b/src/pages/05_quotation/MainPage.vue
@@ -16,6 +16,7 @@ import { CustomerBranchCreate } from 'stores/customer/types';
 import { Employee } from 'src/stores/employee/types';
 
 // NOTE: Import Components
+import ReceiptDialog from './ReceiptDialog.vue';
 import QuotationCard from 'src/components/05_quotation/QuotationCard.vue';
 import PaginationComponent from 'src/components/PaginationComponent.vue';
 import StatCardComponent from 'src/components/StatCardComponent.vue';
@@ -76,6 +77,7 @@ const pageState = reactive({
   addModal: false,
   quotationModal: false,
   employeeModal: false,
+  receiptModal: false,
 });
 
 const CUSTOMER_BRANCH_DEFAULT: CustomerBranchCreate & {
@@ -208,6 +210,10 @@ function triggerQuotationDialog(opts: {
   window.open(url.toString(), '_blank');
 }
 
+function triggerReceiptDialog() {
+  pageState.receiptModal = true;
+}
+
 const quotationStore = useQuotationStore();
 const {
   data: quotationData,
@@ -544,7 +550,7 @@ watch(() => pageState.currentTab, fetchQuotationList);
                     branchId: v.customerBranch.customer.registeredBranchId,
                   })
                 "
-                @link="console.log('link')"
+                @link="triggerReceiptDialog()"
                 @upload="console.log('upload')"
                 @delete="triggerDialogDeleteQuottaion(v.id)"
                 @change-status="console.log('change')"
@@ -911,6 +917,8 @@ watch(() => pageState.currentTab, fetchQuotationList);
       </div>
     </div>
   </DialogForm>
+
+  <ReceiptDialog v-model="pageState.receiptModal"></ReceiptDialog>
 </template>
 
 <style scoped></style>
diff --git a/src/pages/05_quotation/ReceiptDialog.vue b/src/pages/05_quotation/ReceiptDialog.vue
new file mode 100644
index 00000000..2d052067
--- /dev/null
+++ b/src/pages/05_quotation/ReceiptDialog.vue
@@ -0,0 +1,326 @@
+<script setup lang="ts">
+import { storeToRefs } from 'pinia';
+import { useConfigStore } from 'stores/config';
+import { formatNumberDecimal, commaInput } from 'stores/utils';
+import DialogForm from 'src/components/DialogForm.vue';
+import { reactive, ref } from 'vue';
+
+const configStore = useConfigStore();
+const { data: config } = storeToRefs(configStore);
+
+defineEmits<{
+  (e: 'upload', index: number): void;
+}>();
+
+const model = defineModel<boolean>({ default: false, required: true });
+
+const state = reactive({
+  waitExpansion: true,
+  payExpansion: [] as boolean[],
+});
+
+defineProps<{
+  urgent?: boolean;
+}>();
+</script>
+<template>
+  <DialogForm
+    :title="$t('quotation.receipt')"
+    v-model:modal="model"
+    width="65%"
+  >
+    <div
+      class="col column"
+      :class="{
+        'q-mx-lg q-my-md': $q.screen.gt.sm,
+        'q-mx-md q-my-sm': !$q.screen.gt.sm,
+      }"
+    >
+      <section class="bordered rounded surface-1" style="overflow: hidden">
+        <q-expansion-item
+          hide-expand-icon
+          v-model="state.waitExpansion"
+          header-style="padding:0px"
+        >
+          <template v-slot:header>
+            <div class="column full-width bordered-b">
+              <header class="bg-color-orange text-bold text-body1 q-pa-sm">
+                <q-avatar class="surface-1 q-mr-sm" size="10px" />
+                รอชำระเงิน
+              </header>
+              <span class="q-pa-md row items-center">
+                <q-img
+                  src="/images/quotation-avatar.png"
+                  width="3rem"
+                  class="q-mr-lg"
+                />
+                <div class="column col">
+                  <span class="text-bold text-body1">
+                    MOU Myanmar (Re-turn)
+                  </span>
+                  <span
+                    class="row items-center"
+                    :class="urgent ? 'urgent' : 'app-text-muted'"
+                  >
+                    QT240120S0002
+                    <q-icon
+                      v-if="urgent"
+                      class="q-pl-sm"
+                      name="mdi-fire"
+                      size="xs"
+                    />
+                    <span class="q-ml-auto" style="color: var(--foreground)">
+                      ฿ {{ 0 }}
+                    </span>
+                  </span>
+                </div>
+              </span>
+            </div>
+          </template>
+
+          <span class="app-text-muted-2 q-px-md q-py-sm column">
+            <span class="row">
+              {{ $t('general.total') }}
+              <span class="q-ml-auto" style="color: var(--foreground)">
+                ฿ {{ 0 }}
+              </span>
+            </span>
+            <span class="row">
+              {{ $t('quotation.discountList') }}
+              <span class="q-ml-auto" style="color: var(--foreground)">
+                ฿ {{ 0 }}
+              </span>
+            </span>
+            <span class="row">
+              {{ $t('general.totalAfterDiscount') }}
+              <span class="q-ml-auto" style="color: var(--foreground)">
+                ฿ {{ 0 }}
+              </span>
+            </span>
+            <span class="row">
+              {{ $t('general.totalVatExcluded') }}
+              <span class="q-ml-auto" style="color: var(--foreground)">
+                ฿ {{ 0 }}
+              </span>
+            </span>
+            <span class="row">
+              {{
+                $t('general.vat', {
+                  msg: `${config && Math.round(config.vat * 100)}%`,
+                })
+              }}
+              <span class="q-ml-auto" style="color: var(--foreground)">
+                ฿ {{ 0 }}
+              </span>
+            </span>
+            <span class="row">
+              {{ $t('general.totalVatIncluded') }}
+              <span class="q-ml-auto" style="color: var(--foreground)">
+                ฿ {{ 0 }}
+              </span>
+            </span>
+            <span class="row">
+              {{ $t('general.discountAfterVat') }}
+              <span class="q-ml-auto" style="color: var(--foreground)">
+                ฿ {{ 0 }}
+              </span>
+            </span>
+          </span>
+        </q-expansion-item>
+        <q-separator inset v-if="state.waitExpansion" />
+        <div
+          class="q-py-sm q-px-md row items-center justify-end app-text-muted-2"
+        >
+          {{ $t('quotation.totalPriceBaht') }}:
+          <span class="q-px-sm" style="color: var(--foreground)">
+            {{ 0 }}
+          </span>
+          <q-btn
+            dense
+            flat
+            rounded
+            padding="0"
+            :icon="`mdi-chevron-${state.waitExpansion ? 'down' : 'up'}`"
+            @click.stop="state.waitExpansion = !state.waitExpansion"
+          />
+        </div>
+      </section>
+
+      <section
+        class="surface-1 rounded bordered column q-mt-md q-pa-md col scroll no-wrap"
+      >
+        <span class="text-weight-bold text-body1">การชำระ</span>
+        <div class="row items-center">
+          <span class="app-text-muted-2">วิธีการชำระเงิน</span>
+          <q-btn
+            dense
+            unelevated
+            padding="2px 8px"
+            label="เงินสดแบ่งจ่าย"
+            class="q-ml-auto rounded"
+            style="background: var(--blue-8); color: var(--surface-1)"
+          />
+        </div>
+
+        <div class="row items-center q-pt-md q-pb-sm">
+          <span class="app-text-muted-2">จำนวนงวด</span>
+          <span class="q-ml-auto">ทั้งหมด</span>
+          <span class="bordered rounded surface-2 number-box q-mx-sm">2</span>
+          งวด จ่ายไปแล้ว
+          <span class="bordered rounded surface-2 number-box q-mx-sm">1</span>
+          งวด คงเหลือ
+          <span class="bordered rounded surface-2 number-box q-mx-sm">1</span>
+          งวด
+        </div>
+        <div class="row items-center">
+          <span
+            class="row col rounded q-px-sm q-py-md"
+            style="border: 1px solid hsl(var(--info-bg))"
+          >
+            ยอดทั้งหมด
+            <span class="q-ml-auto">1,0000.00</span>
+          </span>
+          <span
+            class="row col rounded q-px-sm q-py-md q-mx-md"
+            style="border: 1px solid hsl(var(--positive-bg))"
+          >
+            ชำระไปแล้ว
+            <span class="q-ml-auto">1,0000.00</span>
+          </span>
+          <span
+            class="row col rounded q-px-sm q-py-md"
+            style="border: 1px solid hsl(var(--warning-bg))"
+          >
+            คงเหลือ
+            <span class="q-ml-auto">1,0000.00</span>
+          </span>
+        </div>
+
+        <span class="app-text-muted-2 q-pt-md">บิลการชำระ</span>
+        <q-checkbox size="xs" :model-value="false" label="จ่ายเงินทั้งหมด" />
+
+        <section class="row">
+          <div
+            v-for="i in 3"
+            :key="i"
+            class="bordered rounded surface-1 q-mb-md col-12"
+            style="overflow: hidden"
+          >
+            <q-expansion-item
+              hide-expand-icon
+              v-model="state.payExpansion[i]"
+              header-style="padding:0px"
+            >
+              <template v-slot:header>
+                <div class="column full-width">
+                  <section
+                    class="row full-width items-center surface-2 bordered-b q-px-md q-py-sm"
+                  >
+                    <span class="text-weight-medium column">
+                      งวดทั้งหมด กันยายน 2567
+                      <span class="text-caption app-text-muted-2">
+                        วันครบกำหนดชำระเงิน วันที่ 1 ตุลาคม 2567
+                      </span>
+                    </span>
+                    <div
+                      class="q-ml-auto items-center flex bg-color-orange-light q-py-xs q-px-sm rounded"
+                      style="color: var(--orange-6)"
+                    >
+                      <q-avatar size="5px" class="bg-color-orange q-mr-sm" />
+                      ยังไม่ได้ชำระเงิน
+                    </div>
+                  </section>
+                  <section class="row items-center q-px-md q-py-sm">
+                    ยอดเงินที่ต้องชำระ
+                    <span
+                      class="q-px-sm q-ml-auto"
+                      style="color: var(--foreground)"
+                    >
+                      {{ 0 }}
+                    </span>
+                    <q-btn
+                      dense
+                      flat
+                      rounded
+                      padding="0"
+                      :icon="`mdi-chevron-${state.payExpansion[i] ? 'down' : 'up'}`"
+                      @click.stop="
+                        state.payExpansion[i] = !state.payExpansion[i]
+                      "
+                    />
+                  </section>
+                </div>
+              </template>
+
+              <div
+                class="q-px-md q-py-xs text-weight-medium row items-center"
+                style="background-color: hsla(var(--info-bg) / 0.1)"
+              >
+                งานที่ดำเนินการในงวดนี้
+                <q-btn
+                  dense
+                  flat
+                  padding="0px 8px"
+                  label="เพิ่มงาน"
+                  class="q-ml-auto app-text-info"
+                ></q-btn>
+              </div>
+              <div class="q-px-md q-py-sm">
+                <span class="app-text-muted">ยังไม่พบงาน</span>
+              </div>
+
+              <div
+                class="q-px-md q-py-xs text-weight-medium row items-center"
+                style="background-color: hsla(var(--info-bg) / 0.1)"
+              >
+                อัปโหลดใบเสร็จ
+              </div>
+              <div class="surface-2" style="height: 200px">
+                <div class="column full-height items-center justify-center">
+                  <q-img src="/images/upload.png" width="150px" />
+                  อัปโหลด E-Slip หรือ อัปโหลดเอกสารการชำระเงิน
+                  <q-btn
+                    unelevated
+                    :label="$t('general.upload')"
+                    rounded
+                    class="app-bg-info q-mt-sm"
+                    @click.stop="$emit('upload', i)"
+                  />
+                </div>
+              </div>
+            </q-expansion-item>
+          </div>
+        </section>
+      </section>
+    </div>
+  </DialogForm>
+</template>
+<style scoped>
+.bg-color-orange {
+  --_color: var(--yellow-7-hsl);
+  color: white;
+  background: hsla(var(--_color));
+}
+
+.dark .bg-color-orange {
+  --_color: var(--orange-6-hsl);
+}
+
+.bg-color-orange-light {
+  --_color: var(--yellow-7-hsl);
+  background: hsla(var(--_color) / 0.2);
+}
+.dark .bg-color-orange {
+  --_color: var(--orange-6-hsl / 0.2);
+}
+
+.urgent {
+  color: hsl(var(--red-6-hsl));
+}
+
+.number-box {
+  text-align: center;
+  width: 25px;
+  height: 25px;
+}
+</style>