add app dialog

2023-09-30 13:12:08 +09:00
parent 4c6b2ea844
commit 461cd26690
8 changed files with 88 additions and 36 deletions
--- a/frontend/src/components/AppSelect.vue
+++ b/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
--- a/frontend/src/components/ShowDialog.vue
+++ b/frontend/src/components/ShowDialog.vue
@@ -20,7 +20,7 @@
 <script>

 export default {
-  name: 'showDialog',
+  name: 'ShowDialog',
  props: {
    name:String,
    visible: Boolean,
--- a/frontend/src/components/left/AppSelector.vue
+++ b/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
    }
  }
 });
--- a/frontend/src/components/right/FieldInput.vue
+++ b/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,
--- a/frontend/src/pages/FlowChart.vue
+++ b/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">
-      <action-select ref="appDg" name="アクション" type="single"></action-select>
-  </show-dialog>
+  <ShowDialog v-model:visible="showAddAction" name="アクション" @close="closeDg">
+      <action-select ref="appDg" name="model" type="single"></action-select>
+  </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);
  }
--- a/frontend/src/stores/flowEditor.ts
+++ b/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]);
+        }
    }

  }
--- a/frontend/src/types/ActionTypes.ts
+++ b/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||'');
    }
+    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;
  }
  /**
--- a/sample.json
+++ b/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": []
        }
    ]