refactor: q-editor

src/pages/05_quotation/QuotationForm.vue

@@ -244,6 +244,7 @@ const pageState = reactive({
   quotationModal: false,
   employeeModal: false,
   productServiceModal: false,
+  remarkWrite: false,
 });
 
 const productList = ref<Partial<Record<ProductGroupId, Product[]>>>({});
@@ -1422,6 +1423,12 @@ 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"
@@ -1518,15 +1525,23 @@ async function getWorkerFromCriteria(
               <div class="surface-1 q-pa-md full-width">
                 <q-editor
                   dense
-                  :readonly
+                  :readonly="readonly"
                   :model-value="quotationFormData.remark || ''"
                   min-height="5rem"
                   class="full-width"
+                  :content-class="{
+                    'q-my-sm rounded': true,
+                    bordered: pageState.remarkWrite,
+                  }"
                   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="[
+                    ['left', 'center', 'justify'],
+                    ['preview', 'write'],
+                    ['clip'],
+                  ]"
                   :toolbar-toggle-color="readonly ? 'disabled' : 'primary'"
                   :toolbar-color="
                     readonly ? 'disabled' : $q.dark.isActive ? 'white' : ''
@@ -1537,6 +1552,20 @@ async function getWorkerFromCriteria(
                       tip: 'Upload',
                       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) => {