refactor: edit remark

src/pages/09_task-order/expansion/RemarkExpansion.vue

@@ -1,9 +1,33 @@
 <script lang="ts" setup>
-defineProps<{
+import { RequestWork } from 'src/stores/request-list';
+import { convertTemplate } from 'src/utils/string-template';
+import { computed } from 'vue';
+import { ref } from 'vue';
+
+const props = defineProps<{
   readonly?: boolean;
+  itemsDiscount?: {
+    productId: string;
+    discount?: number;
+  }[];
+  items: {
+    product: RequestWork['productService']['product'];
+    list: RequestWork[];
+  }[];
 }>();
 
 const remark = defineModel<string>('remark', { default: '' });
+
+const remarkWrite = ref<boolean>(false);
+
+const getToolbarConfig = computed(() => {
+  const toolbar = [['left', 'center', 'justify'], ['toggle'], ['clip']];
+  if (props.readonly) {
+    return toolbar.filter((item) => !item.includes('toggle'));
+  }
+
+  return toolbar;
+});
 </script>
 <template>
   <q-expansion-item
@@ -23,16 +47,28 @@ const remark = defineModel<string>('remark', { default: '' });
     <main class="surface-1 q-pa-md full-width">
       <q-editor
         dense
-        :readonly="readonly"
-        :model-value="remark"
+        :readonly="readonly || !remarkWrite"
+        :model-value="
+          !remarkWrite || readonly
+            ? convertTemplate(remark || '', {
+                'order-detail': {
+                  items,
+                  itemsDiscount,
+                },
+              })
+            : remark || ''
+        "
         min-height="5rem"
         class="full-width"
+        :content-class="{
+          'q-my-sm rounded': true,
+          bordered: !readonly && remarkWrite,
+        }"
         toolbar-bg="input-border"
         style="cursor: auto; color: var(--foreground)"
-        :content-class="readonly ? 'q-mt-sm' : 'bordered q-mt-sm rounded'"
         :flat="!readonly"
         :style="`width: ${$q.screen.gt.xs ? '100%' : '63vw'}`"
-        :toolbar="[['left', 'center', 'justify'], ['clip']]"
+        :toolbar="getToolbarConfig"
         :toolbar-toggle-color="readonly ? 'disabled' : 'primary'"
         :toolbar-color="readonly ? 'disabled' : $q.dark.isActive ? 'white' : ''"
         :definitions="{
@@ -48,7 +84,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>

src/pages/09_task-order/order_view/MainPage.vue

@@ -970,6 +970,8 @@ watch([currentFormData.value.taskStatus], () => {
             "
             v-model:remark="currentFormData.remark"
             :readonly="!['create', 'edit'].includes(state.mode || '')"
+            :items="taskListGroup"
+            :items-discount="taskProduct"
           />
 
           <template