From de8178118e5be3994ee93f3f9b9c6b1cc01c75bb Mon Sep 17 00:00:00 2001
From: Thanaphon Frappet <thanaphon@frappet.com>
Date: Tue, 28 Jan 2025 11:32:33 +0700
Subject: [PATCH] refactor: edit hint

---
 src/pages/05_quotation/QuotationForm.vue      | 26 +++----------------
 .../expansion/RemarkExpansion.vue             |  5 ++--
 .../09_task-order/order_view/MainPage.vue     |  8 +++++-
 src/pages/11_credit-note/FormPage.vue         | 11 +++++++-
 4 files changed, 22 insertions(+), 28 deletions(-)

diff --git a/src/pages/05_quotation/QuotationForm.vue b/src/pages/05_quotation/QuotationForm.vue
index 0825ce10..ce4fd1ba 100644
--- a/src/pages/05_quotation/QuotationForm.vue
+++ b/src/pages/05_quotation/QuotationForm.vue
@@ -1298,7 +1298,6 @@ async function formDownload() {
 </script>
 
 <template>
-  {{ console.log(productService) }}
   <ImportWorker
     v-model:open="pageState.importWorker"
     v-model:data="importWorkerCriteria"
@@ -1898,36 +1897,17 @@ async function formDownload() {
                       >
                         {{ $t('general.edit') }}
                       </MainButton>
-
-                      <MainButton
-                        push
-                        :disabled="readonly"
-                        icon="mdi-help-circle-outline"
-                        color="0 0% 40%"
-                        style="padding: 0 var(--size-2)"
-                        :style="{
-                          color: 'hsl(0 0% 40%)',
-                        }"
-                      >
-                        <q-popup-proxy
-                          class="q-pa-sm"
-                          style="white-space: nowrap"
-                        >
-                          <div v-html="DEFAULT_DATA.remark"></div>
-                        </q-popup-proxy>
-                      </MainButton>
                     </div>
                   </template>
                 </q-editor>
 
-                <p
-                  class="app-text-muted"
-                  v-if="quotationFormState.mode === 'edit'"
-                >
+                <p class="app-text-muted text-caption">
                   {{ $t('general.hintRemark') }}
                   <code>#[quotation-labor]</code>
+                  {{ $t('general.quotationLabor') }}
                   {{ $t('general.or') }}
                   <code>#[quotation-payment]</code>
+                  {{ $t('general.quotationPayment') }}
                 </p>
               </div>
             </q-expansion-item>
diff --git a/src/pages/09_task-order/expansion/RemarkExpansion.vue b/src/pages/09_task-order/expansion/RemarkExpansion.vue
index 275c2b6d..2fe12e0d 100644
--- a/src/pages/09_task-order/expansion/RemarkExpansion.vue
+++ b/src/pages/09_task-order/expansion/RemarkExpansion.vue
@@ -117,9 +117,8 @@ const getToolbarConfig = computed(() => {
         </template>
       </q-editor>
 
-      <p class="app-text-muted" v-if="!readonly">
-        {{ $t('general.hintRemark') }}
-        <code v-html="defaultRemark" />
+      <p class="app-text-muted text-caption">
+        <slot name="hint" />
       </p>
     </main>
   </q-expansion-item>
diff --git a/src/pages/09_task-order/order_view/MainPage.vue b/src/pages/09_task-order/order_view/MainPage.vue
index 217f3bf8..f89f3222 100644
--- a/src/pages/09_task-order/order_view/MainPage.vue
+++ b/src/pages/09_task-order/order_view/MainPage.vue
@@ -983,7 +983,13 @@ watch(
             :items="taskListGroup"
             :items-discount="taskProduct"
             :default-remark="DEFAULT_DATA.remark"
-          />
+          >
+            <template #hint>
+              {{ $t('general.hintRemark') }}
+              <code>#[order-detail]</code>
+              {{ $t('general.orderDetail') }}
+            </template>
+          </RemarkExpansion>
 
           <template
             v-if="
diff --git a/src/pages/11_credit-note/FormPage.vue b/src/pages/11_credit-note/FormPage.vue
index b9163ed7..dc305bf5 100644
--- a/src/pages/11_credit-note/FormPage.vue
+++ b/src/pages/11_credit-note/FormPage.vue
@@ -755,7 +755,16 @@ onMounted(async () => {
             :readonly="readonly"
             v-model:remark="formData.remark"
             :default-remark="defaultRemark"
-          />
+          >
+            <template #hint>
+              {{ $t('general.hintRemark') }}
+              <code>#[quotation-labor]</code>
+              {{ $t('general.quotationLabor') }}
+              {{ $t('general.or') }}
+              <code>#[quotation-payment]</code>
+              {{ $t('general.quotationPayment') }}
+            </template>
+          </RemarkExpansion>
 
           <QuotationFormReceipt
             v-if="creditNoteData && view === CreditNoteStatus.Success"