floweditorの動き修正

2023-10-12 09:23:19 +09:00
parent 461cd26690
commit 52f4af759e
4 changed files with 122 additions and 105 deletions
--- a/frontend/src/components/left/EventTree.vue
+++ b/frontend/src/components/left/EventTree.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="q-pa-md q-gutter-sm">
    <q-tree
-      :nodes="eventTree.screens"
+      :nodes="store.eventTree.screens"
      node-key="label"
      children-key="events"
      no-connectors
@@ -24,28 +24,45 @@

 <script lang="ts">
 import { defineComponent, computed, ref } from 'vue';
-import { kintoneEvents,KintoneEvent } from '../../types/KintoneEvents';
+import { IKintoneEvent } from '../../types/KintoneEvents';
 import { storeToRefs } from 'pinia';
 import { useFlowEditorStore } from 'stores/flowEditor';
+import { ActionFlow, ActionNode, RootAction } from 'src/types/ActionTypes';
+import { S } from 'app/dist/spa/assets/QTable.50486f7c';
 export default defineComponent({
  name: 'EventTree',
  setup(props, context) {
    const store = useFlowEditorStore();
-    const eventTree=ref(kintoneEvents);
-    const selectedFlow = store.currentFlow;
+    // const eventTree=ref(kintoneEvents);
+    // const selectedFlow = store.currentFlow;

    const expanded=ref([
-      selectedFlow?.getRoot()?.title
+        store.currentFlow?.getRoot()?.title
    ]);
-    const selectedEvent = ref<KintoneEvent|null>(null);
-    const onSelected=(node:KintoneEvent)=>{
+    const selectedEvent = ref<IKintoneEvent|null>(null);
+    const onSelected=(node:IKintoneEvent)=>{
        if(!node.eventId){
          return;
        }
        selectedEvent.value=node;
+        if(store.appInfo===undefined){
+          return;
+        }
+        const screen = store.eventTree.findScreen(node.eventId);
+        let flow =store.findFlowByEventId(node.eventId);
+        const screenName=screen!==null?screen.label:"";
+        if(flow!==undefined && flow!==null ){
+          store.selectFlow(flow);
+        }else{
+          const root = new RootAction(node.eventId,screenName,node.label)
+            const flow =new ActionFlow(root);
+            store.flows?.push(flow);
+            store.selectFlow(flow);
+            selectedEvent.value.flowData=flow;
+        }
    }
    return {
-      eventTree,
+      // eventTree,
      expanded,
      onSelected,
      selectedEvent,
--- a/frontend/src/stores/flowEditor.ts
+++ b/frontend/src/stores/flowEditor.ts
@@ -1,32 +1,54 @@
 import { defineStore } from 'pinia';
-import { ActionFlow,AppInfo } from 'src/types/ActionTypes';
-import {FlowCtrl } from '../control/flowCtrl';
+import { AppInfo ,IActionFlow} from 'src/types/ActionTypes';
+import { kintoneEvents,IKintoneEvent,KintoneEventManager } from 'src/types/KintoneEvents';
+import {FlowCtrl } from '../control/flowctrl';

 export interface FlowEditorState{
  flowNames1:string;
  appInfo?:AppInfo;
-  flows?:ActionFlow[];
-  selectedFlow?:ActionFlow|undefined;
+  flows?:IActionFlow[];
+  selectedFlow?:IActionFlow|undefined;
+  eventTree:KintoneEventManager;
+  selectedEvent:IKintoneEvent|undefined;
 }
 const flowCtrl=new FlowCtrl();
 export const useFlowEditorStore = defineStore("flowEditor",{
  state: ():FlowEditorState =>  ({
      flowNames1: '',
      appInfo:undefined,
-      flows:undefined,
-      selectedFlow:undefined
+      flows:[],
+      selectedFlow:undefined,
+      eventTree:kintoneEvents,
+      selectedEvent:undefined
    }),
  getters: {
-    currentFlow():ActionFlow|undefined{
+    /**
+     *
+     * @returns 現在編集しているフロー
+     */
+    currentFlow():IActionFlow|undefined{
        return this.selectedFlow;
+    },
+    /**
+     * KintoneイベントIDから、バンドしているフローを検索する
+     * @param state
+     * @returns
+     */
+    findFlowByEventId(state){
+      return (eventId:string)=>{
+          return state.flows?.find((flow)=>{
+              const root=flow.getRoot();
+              return root?.name===eventId
+          });
+      }
    }
  },

  actions: {
-    setFlows(flows:ActionFlow[]){
+    setFlows(flows:IActionFlow[]){
      this.flows=flows;
    },
-    selectFlow(flow:ActionFlow){
+    selectFlow(flow:IActionFlow){
      this.selectedFlow=flow;
    },
    setApp(app:AppInfo){
@@ -35,6 +57,8 @@ export const useFlowEditorStore = defineStore("flowEditor",{
    async setFlow(){
        if(this.appInfo===undefined) return;
        const actionFlows = await flowCtrl.getFlows(this.appInfo?.appId);
+        //eventTreeにバンドする
+        this.eventTree.bindFlows(actionFlows);
        if(actionFlows && actionFlows.length>0){
          this.setFlows(actionFlows);
        }
--- a/frontend/src/types/ActionTypes.ts
+++ b/frontend/src/types/ActionTypes.ts
@@ -50,7 +50,8 @@ export interface IActionNode{
 */
 export interface IActionFlow {
  id:string;
-  actionNodes:Array<IActionNode>
+  actionNodes:Array<IActionNode>;
+  getRoot():IActionNode|undefined;
 }

 /**
@@ -394,6 +395,7 @@ reconnectOrRemoveNextNodes(targetNode: IActionNode): void {
                                      :new RootAction(node.name,node.title,node.subTitle);
      nodeClass.nextNodeIds=new Map(node.nextNodeIds);
      nodeClass.prevNodeId=node.prevNodeId;
+      nodeClass.id=node.id;
      return nodeClass;
    });
    const actionFlow = new ActionFlow(actionNodes);
--- a/frontend/src/types/KintoneEvents.ts
+++ b/frontend/src/types/KintoneEvents.ts
@@ -1,28 +1,58 @@
+import { publicDecrypt } from 'crypto';
 import {IActionFlow} from './ActionTypes';
 export interface TreeNode {
  label: string;
 }

-export interface KintoneEvent extends TreeNode {
+export interface IKintoneEvent extends TreeNode {
  eventId: string;
  hasFlow: boolean;
  flowData?: IActionFlow;
 }

-export interface KintoneScreen extends TreeNode {
+export interface IKintoneScreen extends TreeNode {
  label: string;
-  events: KintoneEvent[];
+  events: IKintoneEvent[];
 }

+export class kintoneEvent implements IKintoneEvent{
+  eventId: string;
+  get hasFlow(): boolean{
+    return this.flowData!==undefined && this.flowData.actionNodes.length>1
+  };
+  flowData?: IActionFlow | undefined;
+  label: string;
+  constructor({eventId,label}:{eventId:string,label:string}){
+    this.eventId=eventId;
+    this.label=label;
+
+  }
+
+}

 export class KintoneEventManager {
-  public screens: KintoneScreen[];
+  public screens: IKintoneScreen[];

-  constructor(screens: KintoneScreen[]) {
+  constructor(screens: IKintoneScreen[]) {
    this.screens = screens;
  }

-  public findEventById(eventId: string): KintoneEvent | null {
+  public bindFlows(flows:IActionFlow[]){
+    for (const screen of this.screens) {
+      screen.events.forEach((ev)=>ev.flowData=undefined);
+    }
+    for (const flow of flows){
+      const eventId =flow.getRoot()?.name;
+      if(eventId!==undefined){
+        const event = this.findEventById(eventId);
+        if(event!==null){
+          event.flowData=flow;
+        }
+      }
+    }
+  }
+
+  public findEventById(eventId: string): IKintoneEvent | null {
    for (const screen of this.screens) {
      for (const event of screen.events) {
        if (event.eventId === eventId) {
@@ -32,107 +62,51 @@ export class KintoneEventManager {
    }
    return null;
  }
+
+  public findScreen(eventId:string):IKintoneScreen|null{
+    for (const screen of this.screens) {
+      if(screen.events.some((ev:IKintoneEvent)=>ev.eventId===eventId)){
+        return screen;
+      }
+    }
+    return null;
+  }
 }

 export const kintoneEvents:KintoneEventManager = new KintoneEventManager([
  {
    label:"レコード追加画面",
    events:[
-      {
-        label:"レコード追加画面を表示した後",
-        eventId:"app.record.create.show",
-        hasFlow:false
-      },
-      {
-        label:"保存をクリックしたとき",
-        eventId:"app.record.create.submit",
-        hasFlow:true
-      },
-      {
-        label:"保存が成功したとき",
-        eventId:"app.record.create.submit.success	",
-        hasFlow:false
-      },
-      {
-        label:"フィールドの値を変更したとき",
-        eventId:"app.record.create.change",
-        hasFlow:false
-      },
+      new kintoneEvent({label:"レコード追加画面を表示した後",eventId:"app.record.create.show"}),
+      new kintoneEvent({label:"保存をクリックしたとき",eventId:"app.record.create.submit"}),
+      new kintoneEvent({label:"保存が成功したとき",eventId:"app.record.create.submit.success"}),
+      new kintoneEvent({label:"フィールドの値を変更したとき",eventId:"app.record.create.change"}),
    ]
  },
  {
    label:"レコード詳細画面",
    events:[
-      {
-        label:"レコード詳細画面を表示した後",
-        eventId:"app.record.detail.show",
-        hasFlow:false
-      },
-      {
-        label:"レコードを削除するとき",
-        eventId:"app.record.detail.delete.submit",
-        hasFlow:false
-      },
-      {
-        label:"プロセス管理のアクションを実行したとき",
-        eventId:"app.record.detail.process.proceed",
-        hasFlow:false
-      },
+      new kintoneEvent({label:"レコード詳細画面を表示した後",eventId:"app.record.detail.show"}),
+      new kintoneEvent({label:"レコードを削除するとき",eventId:"app.record.detail.delete.submit"}),
+      new kintoneEvent({label:"プロセス管理のアクションを実行したとき",eventId:"app.record.detail.process.proceed"}),
    ]
  },
  {
    label:"レコード編集画面",
-    events:[
-      {
-        label:"レコード編集画面を表示した後",
-        eventId:"app.record.edit.show",
-        hasFlow:false
-      },
-      {
-        label:"保存をクリックしたとき",
-        eventId:"app.record.edit.submit",
-        hasFlow:false
-      },
-      {
-        label:"保存が成功したとき",
-        eventId:"app.record.edit.submit.success",
-        hasFlow:false
-      },
-      {
-        label:"フィールドの値を変更したとき",
-        eventId:"app.record.edit.change",
-        hasFlow:false
-      },
+    events:[new kintoneEvent({label:"レコード編集画面を表示した後",eventId:"app.record.edit.show"}),
+      new kintoneEvent({label:"保存をクリックしたとき",eventId:"app.record.edit.submit"}),
+      new kintoneEvent({label:"保存が成功したとき",eventId:"app.record.edit.submit.success"}),
+      new kintoneEvent({label:"フィールドの値を変更したとき",eventId:"app.record.edit.change"}),
    ]
  },
  {
    label:"レコード一覧画面",
    events:[
-      {
-        label:"一覧画面を表示した後",
-        eventId:"app.record.index.show",
-        hasFlow:false
-      },
-      {
-        label:"インライン編集を開始したとき",
-        eventId:"app.record.index.edit.show",
-        hasFlow:false
-      },
-      {
-        label:"インライン編集のフィールド値を変更したとき",
-        eventId:"app.record.index.edit.change",
-        hasFlow:false
-      },
-      {
-        label:"インライン編集の【保存】をクリックしたとき",
-        eventId:"app.record.index.edit.submit",
-        hasFlow:false
-      },
-      {
-        label:"インライン編集の保存が成功したとき",
-        eventId:"app.record.index.edit.submit.success",
-        hasFlow:false
-      },
+      new kintoneEvent({label:"一覧画面を表示した後", eventId:"app.record.index.show"}),
+      new kintoneEvent({label:"インライン編集を開始したとき",eventId:"app.record.index.edit.show"}),
+      new kintoneEvent({label:"インライン編集のフィールド値を変更したとき", eventId:"app.record.index.edit.change"}),
+      new kintoneEvent({label:"インライン編集の【保存】をクリックしたとき",eventId:"app.record.index.edit.submit"}),
+      new kintoneEvent({label:"インライン編集の保存が成功したとき", eventId:"app.record.index.edit.submit.success"}),
    ]
  }
 ]);