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(null);
- const onSelected=(node:KintoneEvent)=>{
+ const selectedEvent = ref(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,
diff --git a/frontend/src/stores/flowEditor.ts b/frontend/src/stores/flowEditor.ts
index 85f68ef..9f412b7 100644
--- 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);
}
diff --git a/frontend/src/types/ActionTypes.ts b/frontend/src/types/ActionTypes.ts
index 8462e3c..46e4738 100644
--- 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
+ actionNodes:Array;
+ 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);
diff --git a/frontend/src/types/KintoneEvents.ts b/frontend/src/types/KintoneEvents.ts
index 48025fc..c988031 100644
--- 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"}),
]
}
]);