フロー保存の実装

frontend/src/components/left/AppSelector.vue

@@ -1,11 +1,5 @@
 <template>
-  <div
-    class="row"
-    style="
-      border-radius: 2px;
-      box-shadow: rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset,
-        rgba(0, 0, 0, 0.3) 0px 0px 0px 1px;
-    ">
+  <div class="row app-box">
     <q-icon
       class="self-center q-ma-sm"
       name="widgets"
@@ -13,7 +7,7 @@
       style="font-size: 2em"
     />
     <div class="col-7 self-center ellipsis">
-      {{ selectedApp.name }}
+      {{ store.appInfo?.name }}
     </div>
     <div class="self-center">
       <q-btn
@@ -51,22 +45,19 @@ export default defineComponent({
     const store = useFlowEditorStore();
     const appDg = ref();
     const showSelectApp=ref(false);
-    const selectedApp =ref<AppInfo>({
-      appId:"",
-      name:"",
-    });
+
     const closeDg=(val :any)=>{
       showSelectApp.value=false;
       console.log("Dialog closed->",val);
       if (val == 'OK') {
           const data  = appDg.value.selected[0];
           console.log(data);
-          selectedApp.value={
+          const appInfo={
             appId:data.id ,
             name:data.name
           };
-          store.setApp(selectedApp.value);
-          store.setFlow();
+          store.setApp(appInfo);
+          store.loadFlow();
       }
     }
     const showAppDialog=()=>{
@@ -74,7 +65,6 @@ export default defineComponent({
     }
     return {
       store,
-      selectedApp,
       showSelectApp,
       showAppDialog,
       closeDg,
@@ -83,3 +73,9 @@ export default defineComponent({
   }
 });
 </script>
+<style lang="scss">
+  .app-box{
+    border-radius: 2px;
+    box-shadow: rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset,rgba(0, 0, 0, 0.3) 0px 0px 0px 1px;
+  }
+</style>

frontend/src/components/left/EventTree.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="q-pa-md q-gutter-sm">
+  <!-- <div class="q-pa-md q-gutter-sm"> -->
     <q-tree
       :nodes="store.eventTree.screens"
       node-key="label"
       children-key="events"
       no-connectors
-      v-model:expanded="expanded"
+      v-model:expanded="store.expandedScreen"
       :dense="true"
     >
       <template v-slot:default-header="prop">
@@ -19,7 +19,7 @@
         </div>
       </template>
     </q-tree>
-  </div>
+  <!-- </div> -->
 </template>
 
 <script lang="ts">
@@ -36,9 +36,7 @@ export default defineComponent({
     // const eventTree=ref(kintoneEvents);
     // const selectedFlow = store.currentFlow;
 
-    const expanded=ref([
-        store.currentFlow?.getRoot()?.title
-    ]);
+    // const expanded=ref();
     const selectedEvent = ref<IKintoneEvent|null>(null);
     const onSelected=(node:IKintoneEvent)=>{
         if(!node.eventId){
@@ -63,7 +61,7 @@ export default defineComponent({
     }
     return {
       // eventTree,
-      expanded,
+      // expanded,
       onSelected,
       selectedEvent,
       store