From d833ebb086afde45fdc1b7ebb011fefe4f0cb1c5 Mon Sep 17 00:00:00 2001
From: xue jiahao <hsuehchiahao@gmail.com>
Date: Mon, 18 Nov 2024 18:47:25 +0800
Subject: [PATCH] [feature] Add id field in FlowChart page

---
 frontend/src/pages/AppManagement.vue | 21 ++-------------------
 frontend/src/pages/FlowChart.vue     | 25 ++++++++++++++++++++++++-
 frontend/src/router/routes.ts        |  2 +-
 frontend/src/types/AppTypes.ts       | 14 ++++++++++++++
 4 files changed, 41 insertions(+), 21 deletions(-)
 create mode 100644 frontend/src/types/AppTypes.ts

diff --git a/frontend/src/pages/AppManagement.vue b/frontend/src/pages/AppManagement.vue
index 38ca627..19b10d3 100644
--- a/frontend/src/pages/AppManagement.vue
+++ b/frontend/src/pages/AppManagement.vue
@@ -45,21 +45,7 @@ import { useAuthStore } from 'stores/useAuthStore';
 import { useFlowEditorStore } from 'stores/flowEditor';
 import { router } from 'src/router';
 import { date } from 'quasar'
-
-interface IUser{
-   first_name:string;
-   last_name:string;
-   email:string;
-}
-
-interface IManagedApp{
-  appid:string;
-  appname:string;
-  domainurl:string;
-  version:string;
-  user:IUser;
-  update_time:string;
-}
+import { IManagedApp } from 'src/types/AppTypes';
 
 interface IAppDisplay{
   id:string;
@@ -70,7 +56,6 @@ interface IAppDisplay{
   updatetime:string;
 }
 
-
 const authStore = useAuthStore();
 
 const columns = [
@@ -89,8 +74,6 @@ const filter = ref('');
 const rows = ref<IAppDisplay[]>([]);
 const store = useFlowEditorStore();
 
-const tenantid = ref(authStore.currentDomain.id);
-
 const getApps = async () => {
   loading.value = true;
   const result = await api.get('api/apps');
@@ -133,6 +116,6 @@ const editFlow = (app:IAppDisplay) => {
     appId: app.id,
     name: app.name
   });
-  router.push('/FlowChart');
+  router.push('/FlowChart/' + app.id);
 };
 </script>
diff --git a/frontend/src/pages/FlowChart.vue b/frontend/src/pages/FlowChart.vue
index bdef9d1..225740b 100644
--- a/frontend/src/pages/FlowChart.vue
+++ b/frontend/src/pages/FlowChart.vue
@@ -62,16 +62,22 @@
       </template>
       <action-select ref="appDg" name="model" :filter="filter"  type="single" @clearFilter="onClearFilter" ></action-select>
     </ShowDialog>
-
+    <q-inner-loading
+      :showing="initLoading"
+      label="読み込み中..."
+    />
   </q-page>
 </template>
 
 <script setup lang="ts">
 import { ref, reactive, computed, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
 import { IActionNode, ActionNode, IActionFlow, ActionFlow, RootAction, IActionProperty } from 'src/types/ActionTypes';
+import { IManagedApp } from 'src/types/AppTypes';
 import { storeToRefs } from 'pinia';
 import { useFlowEditorStore } from 'stores/flowEditor';
 import { useAuthStore } from 'stores/useAuthStore';
+import { api } from 'boot/axios';
 
 import NodeItem from 'src/components/main/NodeItem.vue';
 import ShowDialog from 'components/ShowDialog.vue';
@@ -81,12 +87,15 @@ import AppDisplay from 'components/left/AppDisplay.vue';
 import EventTree from 'components/left/EventTree.vue';
 import { FlowCtrl } from '../control/flowctrl';
 import { useQuasar } from 'quasar';
+
 const deployLoading = ref(false);
 const saveLoading = ref(false);
+const initLoading = ref(true);
 const drawerLeft = ref(false);
 const $q = useQuasar();
 const store = useFlowEditorStore();
 const authStore = useAuthStore();
+const route = useRoute()
 
 const appDg = ref();
 const prevNodeIfo = ref({
@@ -289,10 +298,24 @@ const onSaveAllFlow= async ()=>{
 }
 
 const fetchData = async () => {
+  initLoading.value = true;
+  if (store.appInfo === undefined && route?.params?.id !== undefined) {
+    const { appid, appname } = await fetchAppById(route.params.id as string);
+    store.setApp({
+      appId: appid,
+      name: appname
+    });
+  };
   await store.loadFlow();
+  initLoading.value = false
   drawerLeft.value = true;
 }
 
+const fetchAppById = async(id: string) => {
+  const result = await api.get('api/apps');
+  return result.data.find((item: IManagedApp) => item.appid === id ) as IManagedApp;
+}
+
 const onClearFilter=()=>{
   filter.value='';
 }
diff --git a/frontend/src/router/routes.ts b/frontend/src/router/routes.ts
index 66b2b26..95e5cbd 100644
--- a/frontend/src/router/routes.ts
+++ b/frontend/src/router/routes.ts
@@ -6,7 +6,7 @@ const routes: RouteRecordRaw[] = [
     component: () => import('pages/LoginPage.vue')
   },
   {
-    path:'/FlowChart',
+    path:'/FlowChart/:id',
     component:()=>import('layouts/MainLayout.vue'),
     children:[
       {path:'',component:()=>import('pages/FlowChart.vue')}
diff --git a/frontend/src/types/AppTypes.ts b/frontend/src/types/AppTypes.ts
new file mode 100644
index 0000000..97c084f
--- /dev/null
+++ b/frontend/src/types/AppTypes.ts
@@ -0,0 +1,14 @@
+interface IUser {
+  first_name: string;
+  last_name: string;
+  email: string;
+}
+
+export interface IManagedApp {
+  appid: string;
+  appname: string;
+  domainurl: string;
+  version: string;
+  user: IUser;
+  update_time: string;
+}