refactor: handle mode edit

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

@@ -2,6 +2,7 @@
 // NOTE: Library
 import { computed, onMounted, reactive, watch, ref } from 'vue';
 import { storeToRefs } from 'pinia';
+import { useI18n } from 'vue-i18n';
 
 // NOTE:  Components
 import StatCardComponent from 'src/components/StatCardComponent.vue';
@@ -23,9 +24,10 @@ import { useTaskOrderStore } from 'src/stores/task-order';
 import { useTaskOrderForm } from './form';
 import useFlowStore from 'src/stores/flow';
 import { pageTabs, column, pageTabsReceive } from './constants';
-import { isRoleInclude } from 'src/stores/utils';
+import { dialogWarningClose, isRoleInclude } from 'src/stores/utils';
 import { PaginationResult } from 'src/types';
 
+const { t } = useI18n();
 const taskOrderFormStore = useTaskOrderForm();
 const navigatorStore = useNavigator();
 const flowStore = useFlowStore();
@@ -42,7 +44,6 @@ const pageState = reactive({
   gridView: false,
   total: 0,
   isMessenger: isRoleInclude(['messenger']),
-
   receiveDialog: false,
   isReceiveScan: false,
 });
@@ -92,6 +93,14 @@ async function triggerTaskOrder(opts: {
     window.location.origin,
   );
 
+  if (opts.statusDialog === 'edit') {
+    taskOrderFormStore.state.mode = 'edit';
+  }
+
+  console.log(taskOrderFormStore.state.mode);
+
+  url.searchParams.append('edit', String(opts.statusDialog === 'edit'));
+
   window.open(url.toString(), '_blank');
 }
 
@@ -101,6 +110,8 @@ async function triggerTaskReceive(opts: {
 }) {
   const url = new URL(`/task-order/${opts.id}`, window.location.origin);
 
+  url.searchParams.append('edit', String(opts.statusDialog === 'edit'));
+
   window.open(url.toString(), '_blank');
 }
 
@@ -116,8 +127,18 @@ function openReceiveDialog(scan?: boolean) {
   pageState.receiveDialog = true;
 }
 
-async function deleteTaskOrder() {
+async function deleteTaskOrder(id: string) {
-  console.log('delete');
+  dialogWarningClose(t, {
+    message: t('dialog.message.confirmDelete'),
+    actionText: t('dialog.action.ok'),
+    action: async () => {
+      const res = await taskOrderStore.deleteTaskOrder(id);
+      if (!!res) {
+        fetchTaskOrderList();
+      }
+    },
+    cancel: () => {},
+  });
 }
 
 onMounted(async () => {
@@ -445,8 +466,14 @@ watch(
                   : triggerTaskOrder({ statusDialog: 'info', id: v.id });
               }
             "
-            @edit="console.log('edit')"
+            @edit="
-            @delete="deleteTaskOrder"
+              (v) => {
+                pageState.isMessenger
+                  ? triggerTaskReceive({ statusDialog: 'edit', id: v.id })
+                  : triggerTaskOrder({ statusDialog: 'edit', id: v.id });
+              }
+            "
+            @delete="(v) => deleteTaskOrder(v.id)"
           />
         </article>
 

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

@@ -447,8 +447,19 @@ onMounted(async () => {
     state.value.mode = 'create';
   }
 
+  if (route.query['edit'] === 'true') {
+    state.value.mode = 'edit';
+
+    router.push({
+      path: route.path,
+    });
+  }
+
   if (currentId !== undefined && typeof currentId === 'string') {
-    await taskOrderFormStore.assignFormData(currentId);
+    await taskOrderFormStore.assignFormData(
+      currentId,
+      state.value.mode === 'edit' ? 'edit' : 'info',
+    );
     await fetchStatus();
 
     if (fullTaskOrder.value) {