フロー保存の実装

frontend/src/pages/FlowChart.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="q-pa-md q-gutter-sm event-tree">
+    <div class="q-pa-md q-gutter-sm event-tree ">
       <q-drawer
       side="left"
       overlay
@@ -8,21 +8,23 @@
       :show-if-above="false"
       elevated
       >
-      <!-- <q-card class="column full-height" style="width: 300px">
-        <q-card-section> -->
-
-          <div class="flex-center fixd-top" >
+        <q-card class="column full-height" >
+          <q-card-section>
+            <div class="flex-center " >
               <AppSelector  />
             </div>
-
-          <!-- </q-card-section> -->
-        <q-separator />
-          <!-- <q-card-section> -->
+          <!-- </q-card-section>
+          <q-card-section> -->
             <div class="flex-center">
             <EventTree />
             </div>
-          <!-- </q-card-section> -->
-        <!-- </q-card> -->
+          </q-card-section>
+        </q-card>
+        <div class="flex-center fixed-bottom bg-grey-3 q-pa-md row ">
+          <q-btn color="deep-orange" glossy label="デプロイ"  @click="onDeploy" icon="sync"/>
+          <q-space></q-space>
+          <q-btn color="primary" label="保存" @click="onSaveFlow" icon="save" />
+      </div>
       </q-drawer>
     </div>
 
@@ -59,8 +61,9 @@ import PropertyPanel from 'components/right/PropertyPanel.vue';
 import AppSelector from 'components/left/AppSelector.vue';
 import EventTree from 'components/left/EventTree.vue';
 import {FlowCtrl } from '../control/flowctrl';
+import { useQuasar } from 'quasar';
 const drawerLeft = ref(true);
-
+const $q=useQuasar();
 const store = useFlowEditorStore();
 // ref関数を使ってtemplateとバインド
 const state=reactive({
@@ -73,7 +76,7 @@ const prevNodeIfo=ref({
   prevNode:{} as IActionNode,
   inputPoint:""
 });
-const refFlow = ref<ActionFlow|null>(null);
+// const refFlow = ref<ActionFlow|null>(null);
 const showAddAction=ref(false);
 const drawerRight=ref(false);
 const model=ref("");
@@ -120,7 +123,38 @@ const closeDg=(val :any)=>{
   }
 }
 
-const fetchData= async ()=>{
+const onDeploy=()=>{
+  return;
+}
+
+const onSaveFlow = async ()=>{
+  const targetFlow = store.selectedFlow;
+  if(targetFlow===undefined){
+    $q.notify({
+      type: 'negative',
+      caption:"エラー",
+      message: `編集中のフローがありません。`
+    });
+    return;
+  }
+  try{
+    await store.saveFlow(targetFlow);
+    $q.notify({
+      type: 'positive',
+      caption:"通知",
+      message: `${targetFlow.getRoot()?.subTitle}のフロー設定を保存しました。`
+    });
+  }catch(error){
+    $q.notify({
+      type: 'negative',
+      caption:"エラー",
+      message: `${targetFlow.getRoot()?.subTitle}のフローの設定の保存が失敗しました。`
+    })
+  }
+
+}
+
+const fetchData = async ()=>{
   const flowCtrl = new FlowCtrl();
   if(store.appInfo===undefined) return;
   const actionFlows = await flowCtrl.getFlows(store.appInfo?.appId);
@@ -130,8 +164,7 @@ const fetchData= async ()=>{
   if(actionFlows && actionFlows.length==1){
     store.selectFlow(actionFlows[0]);
   }
-  refFlow.value=actionFlows[0];
-  const root =refFlow.value.getRoot();
+  const root =actionFlows[0].getRoot();
   if(root){
     state.activeNode=root;
   }