feat: trigger cancel

src/pages/08_request-list/MainPage.vue

@@ -2,6 +2,7 @@
 // NOTE: Library
 import { computed, onMounted, reactive, watch } from 'vue';
 import { storeToRefs } from 'pinia';
+import { useI18n } from 'vue-i18n';
 
 // NOTE: Components
 import StatCardComponent from 'src/components/StatCardComponent.vue';
@@ -16,10 +17,12 @@ import { column } from './constants';
 import useFlowStore from 'src/stores/flow';
 import { useRequestList } from 'src/stores/request-list';
 import { RequestData, RequestDataStatus } from 'src/stores/request-list/types';
+import { dialogWarningClose } from 'src/stores/utils';
 
 const navigatorStore = useNavigator();
 const flowStore = useFlowStore();
 const requestListStore = useRequestList();
+const { t } = useI18n();
 const { data, stats, page, pageMax, pageSize } = storeToRefs(requestListStore);
 
 // NOTE: Variable
@@ -63,6 +66,17 @@ async function fetchStats() {
   if (ret) stats.value = ret;
 }
 
+function triggerCancel(id: string) {
+  dialogWarningClose(t, {
+    action: async () => {
+      const res = await requestListStore.cancelRequest(id);
+      if (res) {
+        fetchList();
+      }
+    },
+  });
+}
+
 function triggerView(opts: { requestData: RequestData }) {
   const url = new URL(
     `/request-list/${opts.requestData.id}`,
@@ -288,6 +302,7 @@ watch([() => pageState.inputSearch, () => pageState.statusFilter], () =>
             :grid="pageState.gridView"
             :visible-columns="pageState.fieldSelected"
             @view="(data) => triggerView({ requestData: data })"
+            @delete="(data) => triggerCancel(data.id)"
           />
         </article>