fix: remark handling

src/pages/12_debit-note/expansion/RemarkExpansion.vue

@@ -1,9 +1,21 @@
 <script lang="ts" setup>
+import { ref } from 'vue';
+import { convertTemplate } from 'src/utils/string-template';
+import { RequestWork } from 'src/stores/request-list';
+import { Employee } from 'src/stores/employee/types';
+
 defineProps<{
   readonly?: boolean;
+  items?: {
+    product: RequestWork['productService']['product'];
+    list: RequestWork[];
+  }[];
+  finalPrice?: number;
+  selectedWorker?: Employee[];
 }>();
 
 const remark = defineModel<string>('remark', { default: '' });
+const remarkWrite = ref<boolean>(false);
 </script>
 <template>
   <q-expansion-item
@@ -24,7 +36,23 @@ const remark = defineModel<string>('remark', { default: '' });
       <q-editor
         dense
         :readonly="readonly"
-        :model-value="remark"
+        :model-value="
+          !remarkWrite || readonly
+            ? convertTemplate(remark || '', {
+                'quotation-payment': {
+                  paymentType: 'Full',
+                  amount: finalPrice,
+                },
+                'quotation-labor': {
+                  name: selectedWorker.map(
+                    (v, i) =>
+                      `${i + 1}. ` +
+                      `${v.employeePassport.length !== 0 ? v.employeePassport[0].number + '_' : ''}  ${v.namePrefix}.${v.firstNameEN ? `${v.firstNameEN} ${v.lastNameEN}` : `${v.firstName} ${v.lastName}`}  `.toUpperCase(),
+                  ),
+                },
+              })
+            : remark || ''
+        "
         min-height="5rem"
         class="full-width"
         toolbar-bg="input-border"
@@ -48,7 +76,36 @@ const remark = defineModel<string>('remark', { default: '' });
             remark = v;
           }
         "
-      />
+      >
+        <template v-if="!readonly" v-slot:toggle>
+          <div class="text-caption row no-wrap q-px-sm">
+            <MainButton
+              :solid="!remarkWrite"
+              icon="mdi-eye-outline"
+              color="0 0% 40%"
+              @click="remarkWrite = false"
+              style="padding: 0 var(--size-2); cursor: pointer"
+              :style="{
+                color: remarkWrite ? 'hsl(0 0% 40%)' : undefined,
+              }"
+            >
+              {{ $t('general.view', { msg: $t('general.example') }) }}
+            </MainButton>
+            <MainButton
+              :solid="remarkWrite"
+              icon="mdi-pencil-outline"
+              color="0 0% 40%"
+              @click="remarkWrite = true"
+              style="padding: 0 var(--size-2); cursor: pointer"
+              :style="{
+                color: !remarkWrite ? 'hsl(0 0% 40%)' : undefined,
+              }"
+            >
+              {{ $t('general.edit') }}
+            </MainButton>
+          </div>
+        </template>
+      </q-editor>
     </main>
   </q-expansion-item>
 </template>