From 91ecf7cf8f69b898432cc1569819585f1aba3840 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Wed, 27 Nov 2024 15:02:35 +0700
Subject: [PATCH] refactor: quotation remark toggle

---
 src/pages/05_quotation/QuotationForm.vue | 62 +++++++++++++++---------
 1 file changed, 39 insertions(+), 23 deletions(-)

diff --git a/src/pages/05_quotation/QuotationForm.vue b/src/pages/05_quotation/QuotationForm.vue
index 2c297893..b6eb9220 100644
--- a/src/pages/05_quotation/QuotationForm.vue
+++ b/src/pages/05_quotation/QuotationForm.vue
@@ -245,7 +245,7 @@ const pageState = reactive({
   quotationModal: false,
   employeeModal: false,
   productServiceModal: false,
-  remarkWrite: false,
+  remarkWrite: true,
 });
 
 const productList = ref<Partial<Record<ProductGroupId, Product[]>>>({});
@@ -1425,12 +1425,6 @@ async function getWorkerFromCriteria(
 
               <div class="surface-1 q-pa-md full-width">
                 <template v-if="true">
-                  <!-- TODO: -->
-                  <!-- {{ tempPaySplit }}
-                  {{ tempPaySplitCount }}
-                  <br />
-                  {{ quotationFormData.paySplit }}
-                  {{ quotationFormData.paySplitCount }} -->
                   <QuotationFormInfo
                     :view="view"
                     :installment-no="selectedInstallmentNo"
@@ -1558,7 +1552,7 @@ async function getWorkerFromCriteria(
                   :style="`width: ${$q.screen.gt.xs ? '100%' : '63vw'}`"
                   :toolbar="[
                     ['left', 'center', 'justify'],
-                    ['preview', 'write'],
+                    ['toggle'],
                     ['clip'],
                   ]"
                   :toolbar-toggle-color="readonly ? 'disabled' : 'primary'"
@@ -1569,29 +1563,51 @@ async function getWorkerFromCriteria(
                     clip: {
                       icon: 'mdi-paperclip',
                       tip: 'Upload',
+                      disable: readonly,
                       handler: () => console.log('upload'),
                     },
-                    preview: {
-                      icon: 'mdi-eye-outline',
-                      label: 'Preview',
-                      tip: 'Preview',
-                      highlight: !pageState.remarkWrite,
-                      handler: () => (pageState.remarkWrite = false),
-                    },
-                    write: {
-                      icon: 'mdi-pencil-outline',
-                      label: 'Write',
-                      tip: 'Write',
-                      highlight: pageState.remarkWrite,
-                      handler: () => (pageState.remarkWrite = true),
-                    },
                   }"
                   @update:model-value="
                     (v) => {
                       quotationFormData.remark = v;
                     }
                   "
-                />
+                >
+                  <template v-slot:toggle>
+                    <div class="text-caption row no-wrap">
+                      <MainButton
+                        :disabled="readonly"
+                        :solid="!pageState.remarkWrite"
+                        icon="mdi-eye-outline"
+                        color="0 0% 40%"
+                        @click="pageState.remarkWrite = false"
+                        style="padding: 0 var(--size-2)"
+                        :style="{
+                          color: pageState.remarkWrite
+                            ? 'hsl(0 0% 40%)'
+                            : undefined,
+                        }"
+                      >
+                        {{ $t('general.view', { msg: $t('general.example') }) }}
+                      </MainButton>
+                      <MainButton
+                        :disabled="readonly"
+                        :solid="pageState.remarkWrite"
+                        icon="mdi-pencil-outline"
+                        color="0 0% 40%"
+                        @click="pageState.remarkWrite = true"
+                        style="padding: 0 var(--size-2)"
+                        :style="{
+                          color: !pageState.remarkWrite
+                            ? 'hsl(0 0% 40%)'
+                            : undefined,
+                        }"
+                      >
+                        {{ $t('general.edit') }}
+                      </MainButton>
+                    </div>
+                  </template>
+                </q-editor>
               </div>
             </q-expansion-item>
           </template>