Files
KintoneAppBuilder/frontend/src/stores/flowEditor.ts

143 lines
3.8 KiB
TypeScript

import { defineStore } from 'pinia';
import { AppInfo, IActionFlow, IActionNode } from 'src/types/ActionTypes';
import { IKintoneEvent, KintoneEventManager } from 'src/types/KintoneEvents';
import { FlowCtrl } from '../control/flowctrl';
export interface FlowEditorState {
flowNames1: string;
appInfo?: AppInfo;
flows?: IActionFlow[];
selectedFlow?: IActionFlow | undefined;
activeNode: IActionNode | undefined;
eventTree: KintoneEventManager;
selectedEvent: IKintoneEvent | undefined;
expandedScreen: any[];
}
const flowCtrl = new FlowCtrl();
const eventTree = new KintoneEventManager();
export const useFlowEditorStore = defineStore('flowEditor', {
state: (): FlowEditorState => ({
flowNames1: '',
appInfo: undefined,
flows: [],
selectedFlow: undefined,
activeNode: undefined,
eventTree: eventTree,
selectedEvent: undefined,
expandedScreen: [],
}),
getters: {
/**
*
* @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;
});
};
},
findEventById(state) {
return (eventId: string) => {
return state.eventTree.findEventById(eventId);
};
},
},
actions: {
setFlows(flows: IActionFlow[]) {
this.flows = flows;
},
selectFlow(flow: IActionFlow | undefined) {
this.selectedFlow = flow;
},
setActiveNode(node: IActionNode) {
this.activeNode = node;
},
setApp(app: AppInfo) {
this.appInfo = app;
},
/**
* DBからフルーを保存する
* @returns
*/
async loadFlow() {
if (this.appInfo === undefined) return;
const actionFlows = await flowCtrl.getFlows(this.appInfo?.appId);
//eventTreeにバンドする
this.eventTree.bindFlows(actionFlows);
if (actionFlows === undefined || actionFlows.length === 0) {
this.flows = [];
this.selectedFlow = undefined;
return;
}
this.setFlows(actionFlows);
if (actionFlows && actionFlows.length > 0) {
this.selectFlow(actionFlows[0]);
}
const expandNames = actionFlows.map((flow) => flow.getRoot()?.title);
// const expandName =actionFlows[0].getRoot()?.title;
this.expandedScreen = expandNames;
},
/**
* フローをDBに保存及び更新する
*/
async saveFlow(flow: IActionFlow) {
const root = flow.getRoot();
const isNew = flow.id === '';
const jsonData = {
flowid: isNew ? flow.createNewId() : flow.id,
appid: this.appInfo?.appId,
eventid: root?.name,
name: root?.subTitle,
content: JSON.stringify(flow),
};
if (isNew) {
return await flowCtrl.SaveFlow(jsonData);
} else {
return await flowCtrl.UpdateFlow(jsonData);
}
},
async deleteEvent(event: IKintoneEvent) {
const store = useFlowEditorStore();
if (event.flowData) {
const flow = event.flowData;
if (flow.id !== '') {
await flowCtrl.DeleteFlow(flow.id)
if (this.flows) {
this.flows = this.flows.filter((f) => f.id !== flow.id);
}
}
eventTree.deleteEvent(event, store);
}
else {
eventTree.deleteEvent(event, store);
}
},
/**
* デプロイする
*/
async deploy(): Promise<boolean> {
if (this.appInfo === undefined) {
return false;
}
return await flowCtrl.depoly(this.appInfo?.appId);
},
},
});