add app dialog

frontend/src/components/AppSelect.vue

@@ -8,7 +8,7 @@ import { ref,onMounted,reactive } from 'vue'
 import { api } from 'boot/axios';
 
 export default {
-  name: 'appSelect',
+  name: 'AppSelect',
   props: {
     name: String,
     type: String

frontend/src/components/ShowDialog.vue

@@ -20,7 +20,7 @@
 <script>
 
 export default {
-  name: 'showDialog',
+  name: 'ShowDialog',
   props: {
     name:String,
     visible: Boolean,

frontend/src/components/left/AppSelector.vue

@@ -12,11 +12,9 @@
       color="grey-9"
       style="font-size: 2em"
     />
-
     <div class="col-7 self-center ellipsis">
       {{ selectedApp.name }}
     </div>
-
     <div class="self-center">
       <q-btn
         outline
@@ -24,26 +22,63 @@
         label="変 更"
         padding="none sm"
         color="primary"
+        @click="showAppDialog"
       ></q-btn>
     </div>
   </div>
+  <ShowDialog v-model:visible="showSelectApp" name="アプリ" @close="closeDg">
+      <AppSelect ref="appDg" name="アプリ" type="single"></AppSelect>
+  </ShowDialog>
 </template>
 
 <script lang="ts">
 import { defineComponent,ref } from 'vue';
 import {AppInfo} from '../../types/ActionTypes'
+import ShowDialog from '../../components/ShowDialog.vue';
+import AppSelect from '../../components/AppSelect.vue';
+import { useFlowEditorStore } from 'stores/flowEditor';
 export default defineComponent({
   name: 'AppSelector',
   emits:[
     "appSelected"
   ],
+  components:{
+    AppSelect,
+    ShowDialog
+  },
   setup(props, context) {
+
+    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={
+            appId:data.id ,
+            name:data.name
+          };
+          store.setApp(selectedApp.value);
+          store.setFlow();
+      }
+    }
+    const showAppDialog=()=>{
+      showSelectApp.value=true;
+    }
     return {
-      selectedApp
+      store,
+      selectedApp,
+      showSelectApp,
+      showAppDialog,
+      closeDg,
+      appDg
     }
   }
 });

frontend/src/components/right/FieldInput.vue

@@ -5,7 +5,7 @@
         </template>
 </q-input>
 <show-dialog v-model:visible="show" name="フィールド一覧" @close="closeDg">
-  <field-select ref="appDg" name="フィールド" type="single" :appId="1"></field-select>
+  <field-select ref="appDg" name="フィールド" type="single" :appId="store.appInfo?.appId"></field-select>
 </show-dialog>
 </template>
 
@@ -13,7 +13,7 @@
 import { defineComponent, ref ,watchEffect} from 'vue';
 import ShowDialog from '../ShowDialog.vue';
 import FieldSelect from '../FieldSelect.vue';
-
+import { useFlowEditorStore } from 'stores/flowEditor';
 export default defineComponent({
   name: 'FieldInput',
   components: {
@@ -35,6 +35,7 @@ export default defineComponent({
     const appDg = ref();
     const show = ref(false);
     const selectedField = ref(props.modelValue);
+    const store = useFlowEditorStore();
 
     const showDg = () => {
       show.value = true;
@@ -51,6 +52,7 @@ export default defineComponent({
     });
 
     return {
+      store,
       appDg,
       show,
       showDg,

frontend/src/pages/FlowChart.vue

@@ -28,11 +28,6 @@
 
   <q-page>
     <div class="q-pa-md q-gutter-sm">
-    <!-- <q-layout
-      container
-      class="flow-container shadow-2 rounded-borders"
-    > -->
-
     <div class="flowchart" v-if="store.currentFlow">
         <node-item v-for="(node,) in store.currentFlow.actionNodes" :key="node.id"
          :isSelected="node===state.activeNode" :actionNode="node"
@@ -43,13 +38,12 @@
          @deleteAllNextNodes="onDeleteAllNextNodes"
          ></node-item>
       </div>
-    <!-- </q-layout> -->
   </div>
   </q-page>
   <PropertyPanel :actionNode="state.activeNode" v-model:drawerRight="drawerRight"></PropertyPanel>
-  <show-dialog v-model:visible="showAddAction" name="アクション" @close="closeDg">
+  <ShowDialog v-model:visible="showAddAction" name="アクション" @close="closeDg">
-      <action-select ref="appDg" name="アクション" type="single"></action-select>
+      <action-select ref="appDg" name="model" type="single"></action-select>
-  </show-dialog>
+  </ShowDialog>
 
 </template>
 
@@ -64,7 +58,7 @@ import ActionSelect from 'components/ActionSelect.vue';
 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 {FlowCtrl } from '../control/flowctrl';
 const drawerLeft = ref(true);
 
 const store = useFlowEditorStore();
@@ -76,13 +70,13 @@ const state=reactive({
 })
 const appDg = ref();
 const prevNodeIfo=ref({
-  prevNode:{},
+  prevNode:{} as IActionNode,
   inputPoint:""
 });
 const refFlow = ref<ActionFlow|null>(null);
 const showAddAction=ref(false);
 const drawerRight=ref(false);
-
+const model=ref("");
 const addActionNode=(action:IActionNode)=>{
   // refFlow.value?.actionNodes.push(action);
  store.currentFlow?.actionNodes.push(action);
@@ -128,7 +122,8 @@ const closeDg=(val :any)=>{
 
 const fetchData= async ()=>{
   const flowCtrl = new FlowCtrl();
-  const actionFlows = await flowCtrl.getFlows("1");
+  if(store.appInfo===undefined) return;
+  const actionFlows = await flowCtrl.getFlows(store.appInfo?.appId);
   if(actionFlows && actionFlows.length>0){
     store.setFlows(actionFlows);
   }

frontend/src/stores/flowEditor.ts

@@ -1,5 +1,6 @@
 import { defineStore } from 'pinia';
 import { ActionFlow,AppInfo } from 'src/types/ActionTypes';
+import {FlowCtrl } from '../control/flowCtrl';
 
 export interface FlowEditorState{
   flowNames1:string;
@@ -7,7 +8,7 @@ export interface FlowEditorState{
   flows?:ActionFlow[];
   selectedFlow?:ActionFlow|undefined;
 }
-
+const flowCtrl=new FlowCtrl();
 export const useFlowEditorStore = defineStore("flowEditor",{
   state: ():FlowEditorState =>  ({
       flowNames1: '',
@@ -27,6 +28,19 @@ export const useFlowEditorStore = defineStore("flowEditor",{
     },
     selectFlow(flow:ActionFlow){
       this.selectedFlow=flow;
+    },
+    setApp(app:AppInfo){
+      this.appInfo=app;
+    },
+    async setFlow(){
+        if(this.appInfo===undefined) return;
+        const actionFlows = await flowCtrl.getFlows(this.appInfo?.appId);
+        if(actionFlows && actionFlows.length>0){
+          this.setFlows(actionFlows);
+        }
+        if(actionFlows && actionFlows.length==1){
+          this.selectFlow(actionFlows[0]);
+        }
     }
 
   }

frontend/src/types/ActionTypes.ts

@@ -204,13 +204,18 @@ export class ActionFlow implements IActionFlow {
     if(inputPoint!==undefined){
       newNode.inputPoint=inputPoint;
     }
-    if(prevNode){
+    if(prevNode!==undefined){
       this.connectNodes(prevNode,newNode,inputPoint||'');
     }else{
       prevNode=this.actionNodes[this.actionNodes.length-1];
       this.connectNodes(prevNode,newNode,inputPoint||'');
     }
-    this.actionNodes.push(newNode);
+    const index=this.actionNodes.findIndex(node=>node.id===prevNode?.id)
+    if(index>=0){
+      this.actionNodes.splice(index+1,0,newNode);
+    }else{
+      this.actionNodes.push(newNode);
+    }
     return newNode;
   }
   /**

sample.json

@@ -1,7 +1,8 @@
 {
+    "id": "681ecde3-4439-4210-9fdf-424c6af98f09",
     "actionNodes": [
         {
-            "id": "c9fa2f6a-a05b-4a2b-af8b-00addae2de6f",
+            "id": "34dfd32e-ba1a-440f-bb46-a8a1999109cd",
             "name": "app.record.create.submit",
             "title": "レコード追加画面",
             "subTitle": "保存するとき",
@@ -13,12 +14,12 @@
             "nextNodeIds": [
                 [
                     "",
-                    "4b39f388-f7f2-4ccd-ace2-995e60893fd3"
+                    "ce07775d-9729-4516-a88c-78ee8f2f851e"
                 ]
             ]
         },
         {
-            "id": "4b39f388-f7f2-4ccd-ace2-995e60893fd3",
+            "id": "ce07775d-9729-4516-a88c-78ee8f2f851e",
             "name": "自動採番",
             "title": "文書番号を自動採番する",
             "inputPoint": "",
@@ -52,16 +53,16 @@
                     }
                 }
             ],
-            "prevNodeId": "c9fa2f6a-a05b-4a2b-af8b-00addae2de6f",
+            "prevNodeId": "34dfd32e-ba1a-440f-bb46-a8a1999109cd",
             "nextNodeIds": [
                 [
                     "",
-                    "22cac85a-005b-434a-8ef6-25eb536e0ad3"
+                    "0d18c3c9-abee-44e5-83eb-82074316219b"
                 ]
             ]
         },
         {
-            "id": "22cac85a-005b-434a-8ef6-25eb536e0ad3",
+            "id": "0d18c3c9-abee-44e5-83eb-82074316219b",
             "name": "入力データ取得",
             "title": "電話番号を取得する",
             "inputPoint": "",
@@ -77,16 +78,16 @@
                     }
                 }
             ],
-            "prevNodeId": "4b39f388-f7f2-4ccd-ace2-995e60893fd3",
+            "prevNodeId": "ce07775d-9729-4516-a88c-78ee8f2f851e",
             "nextNodeIds": [
                 [
                     "",
-                    "c39e6d90-0063-4fdb-b3b6-9db396e402fe"
+                    "399d7c04-5345-4bf6-8da3-d745df554524"
                 ]
             ]
         },
         {
-            "id": "c39e6d90-0063-4fdb-b3b6-9db396e402fe",
+            "id": "399d7c04-5345-4bf6-8da3-d745df554524",
             "name": "条件分岐",
             "title": "電話番号入力形式チャック",
             "inputPoint": "",
@@ -105,16 +106,16 @@
                     }
                 }
             ],
-            "prevNodeId": "22cac85a-005b-434a-8ef6-25eb536e0ad3",
+            "prevNodeId": "0d18c3c9-abee-44e5-83eb-82074316219b",
             "nextNodeIds": [
                 [
                     "いいえ",
-                    "e5464858-b536-4cb0-be08-396daf5092f5"
+                    "8173e6bc-3fa2-4403-b973-9368884e2dfa"
                 ]
             ]
         },
         {
-            "id": "e5464858-b536-4cb0-be08-396daf5092f5",
+            "id": "8173e6bc-3fa2-4403-b973-9368884e2dfa",
             "name": "エラー表示",
             "title": "エラー表示して保存しない",
             "inputPoint": "いいえ",
@@ -130,7 +131,7 @@
                     }
                 }
             ],
-            "prevNodeId": "c39e6d90-0063-4fdb-b3b6-9db396e402fe",
+            "prevNodeId": "399d7c04-5345-4bf6-8da3-d745df554524",
             "nextNodeIds": []
         }
     ]