Merge commit 'b25c17ab53a848f5692f113c6c3c1177e310d87f' into feature-data-mapping
This commit is contained in:
Mouriya
@@ -1,48 +1,55 @@
|
||||
<template>
|
||||
<!-- <div class="q-pa-md q-gutter-sm"> -->
|
||||
<q-tree
|
||||
:nodes="store.eventTree.screens"
|
||||
node-key="eventId"
|
||||
children-key="events"
|
||||
no-connectors
|
||||
v-model:expanded="store.expandedScreen"
|
||||
:dense="true"
|
||||
:ref="tree"
|
||||
>
|
||||
<template v-slot:header-EVENT="prop">
|
||||
<div class="row col items-start no-wrap event-node" @click="onSelected(prop.node)">
|
||||
<q-icon v-if="prop.node.eventId"
|
||||
name="play_circle"
|
||||
:color="prop.node.hasFlow?'green':'grey'"
|
||||
size="16px" class="q-mr-sm">
|
||||
</q-icon>
|
||||
<div class="no-wrap" :class="selectedEvent && prop.node.eventId===selectedEvent.eventId?'selected-node':''">{{ prop.node.label }}</div>
|
||||
<q-space></q-space>
|
||||
<!-- <q-icon v-if="prop.node.hasFlow" name="delete" color="negative" size="16px" class="q-mr-sm"></q-icon> -->
|
||||
<q-tree :nodes="store.eventTree.screens" node-key="eventId" children-key="events" no-connectors
|
||||
v-model:expanded="store.expandedScreen" :dense="true" :ref="tree">
|
||||
<template v-slot:header-EVENT="prop">
|
||||
<div :ref="prop.node.eventId" class="row col items-center no-wrap event-node">
|
||||
<q-icon v-if="prop.node.eventId" name="play_circle" :color="prop.node.hasFlow ? 'green' : 'grey'" size="16px"
|
||||
class="q-mr-sm">
|
||||
</q-icon>
|
||||
<div class="no-wrap" @click="onSelected(prop.node)"
|
||||
:class="selectedEvent && prop.node.eventId === selectedEvent.eventId ? 'selected-node' : ''">{{
|
||||
prop.node.label }}</div>
|
||||
<q-space></q-space>
|
||||
<!-- <q-icon v-if="prop.node.hasFlow" name="delete" color="negative" size="16px" class="q-mr-sm"></q-icon> -->
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:header-CHANGE="prop">
|
||||
<div class="row col items-center no-wrap event-node">
|
||||
<div class="no-wrap">{{ prop.node.label }}</div>
|
||||
<q-space></q-space>
|
||||
<q-icon name="add_circle" color="primary" size="16px" class="q-mr-sm"
|
||||
@click="addChangeEvent(prop.node)"></q-icon>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:header-DELETABLE="prop">
|
||||
<div class="row col items-center event-node">
|
||||
<div class="row col items-center" @click="onSelected(prop.node)">
|
||||
<q-icon v-if="prop.node.eventId" name="play_circle" :color="prop.node.hasFlow ? 'green' : 'grey'" size="16px"
|
||||
class="q-mr-sm">
|
||||
</q-icon>
|
||||
<div>{{ prop.node.label }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:header-CHANGE="prop" >
|
||||
<div class="row col items-start no-wrap event-node" >
|
||||
<div class="no-wrap">{{ prop.node.label }}</div>
|
||||
<q-space></q-space>
|
||||
<q-icon name="add_circle" color="primary" size="16px" class="q-mr-sm" @click="addChangeEvent(prop.node)"></q-icon>
|
||||
<div>
|
||||
<q-btn class="q-mr-sm delete-btn" flat fab-mini icon="delete_forever" padding="none" color="negative"
|
||||
@click="deleteEvent(prop.node)"></q-btn>
|
||||
</div>
|
||||
</template>
|
||||
</q-tree>
|
||||
<show-dialog v-model:visible="showDialog" name="フィールド選択" @close="closeDg" widht="400px">
|
||||
<field-select ref="appDg" name="フィールド" type="single" :appId="store.appInfo?.appId"></field-select>
|
||||
</show-dialog>
|
||||
</div>
|
||||
</template>
|
||||
</q-tree>
|
||||
<show-dialog v-model:visible="showDialog" name="フィールド選択" @close="closeDg">
|
||||
<field-select ref="appDg" name="フィールド" type="single" :appId="store.appInfo?.appId"></field-select>
|
||||
</show-dialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, computed, ref } from 'vue';
|
||||
import { IKintoneEvent ,IKintoneEventGroup, IKintoneEventNode, kintoneEvent} from '../../types/KintoneEvents';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { QTree, useQuasar } from 'quasar';
|
||||
import { ActionFlow, RootAction } from 'src/types/ActionTypes';
|
||||
import { useFlowEditorStore } from 'stores/flowEditor';
|
||||
import { ActionFlow, ActionNode, RootAction } from 'src/types/ActionTypes';
|
||||
import ShowDialog from '../ShowDialog.vue';
|
||||
import { defineComponent, ref } from 'vue';
|
||||
import { IKintoneEvent, IKintoneEventGroup, IKintoneEventNode } from '../../types/KintoneEvents';
|
||||
import FieldSelect from '../FieldSelect.vue';
|
||||
import { QTree } from 'quasar';
|
||||
import ShowDialog from '../ShowDialog.vue';
|
||||
export default defineComponent({
|
||||
name: 'EventTree',
|
||||
components: {
|
||||
@@ -50,6 +57,7 @@ export default defineComponent({
|
||||
FieldSelect,
|
||||
},
|
||||
setup(props, context) {
|
||||
const $q = useQuasar();
|
||||
const appDg = ref();
|
||||
const store = useFlowEditorStore();
|
||||
const showDialog = ref(false);
|
||||
@@ -58,62 +66,79 @@ export default defineComponent({
|
||||
// const selectedFlow = store.currentFlow;
|
||||
|
||||
// const expanded=ref();
|
||||
const selectedEvent = ref<IKintoneEvent|null>(null);
|
||||
const selectedChangeEvent=ref<IKintoneEventGroup|null>(null);
|
||||
const isFieldChange = (node:IKintoneEventNode)=>{
|
||||
return node.header=='EVENT' && node.eventId.indexOf(".change.")>-1;
|
||||
const selectedEvent = ref<IKintoneEvent | null>(null);
|
||||
const selectedChangeEvent = ref<IKintoneEventGroup | null>(null);
|
||||
const isFieldChange = (node: IKintoneEventNode) => {
|
||||
return node.header == 'EVENT' && node.eventId.indexOf(".change.") > -1;
|
||||
}
|
||||
//フィールド値変更イベント追加
|
||||
const closeDg = (val:string) => {
|
||||
const closeDg = (val: string) => {
|
||||
if (val == 'OK') {
|
||||
if(!selectedChangeEvent.value){return;}
|
||||
if (!selectedChangeEvent.value) { return; }
|
||||
const field = appDg.value.selected[0];
|
||||
const eventid = `${selectedChangeEvent.value.eventId}.${field.code}`;
|
||||
if(store.eventTree.findEventById(eventid)){
|
||||
if (store.eventTree.findEventById(eventid)) {
|
||||
return;
|
||||
}
|
||||
selectedChangeEvent.value?.events.push(
|
||||
new kintoneEvent(
|
||||
field.label,
|
||||
eventid,
|
||||
selectedChangeEvent.value.eventId)
|
||||
);
|
||||
selectedChangeEvent.value?.events.push({
|
||||
eventId: eventid,
|
||||
label: field.name,
|
||||
parentId: selectedChangeEvent.value.eventId,
|
||||
header: 'DELETABLE'
|
||||
});
|
||||
tree.value?.expanded?.push(selectedChangeEvent.value.eventId);
|
||||
tree.value?.expandAll();
|
||||
}
|
||||
};
|
||||
const addChangeEvent=(node:IKintoneEventGroup)=>{
|
||||
if(store.appInfo===undefined){
|
||||
return;
|
||||
const addChangeEvent = (node: IKintoneEventGroup) => {
|
||||
if (store.appInfo === undefined) {
|
||||
return;
|
||||
}
|
||||
selectedChangeEvent.value=node;
|
||||
showDialog.value=true;
|
||||
selectedChangeEvent.value = node;
|
||||
showDialog.value = true;
|
||||
}
|
||||
const onSelected=(node:IKintoneEvent)=>{
|
||||
if(!node.eventId){
|
||||
return;
|
||||
}
|
||||
selectedEvent.value=node;
|
||||
if(store.appInfo===undefined){
|
||||
return;
|
||||
}
|
||||
const screen = store.eventTree.findEventById(node.parentId);
|
||||
let flow =store.findFlowByEventId(node.eventId);
|
||||
let screenName=screen!==null?screen.label:"";
|
||||
let nodeLabel = node.label;
|
||||
// if(isFieldChange(node)){
|
||||
// screenName=nodeLabel;
|
||||
// nodeLabel=`${node.label}の値を変更したとき`;
|
||||
// }
|
||||
if(flow!==undefined && flow!==null ){
|
||||
store.selectFlow(flow);
|
||||
}else{
|
||||
const root = new RootAction(node.eventId,screenName,nodeLabel)
|
||||
const flow =new ActionFlow(root);
|
||||
store.flows?.push(flow);
|
||||
store.selectFlow(flow);
|
||||
selectedEvent.value.flowData=flow;
|
||||
}
|
||||
|
||||
const deleteEvent = (node: IKintoneEvent) => {
|
||||
if (!node.eventId) {
|
||||
return;
|
||||
}
|
||||
store.deleteEvent(node);
|
||||
store.selectFlow(undefined)
|
||||
|
||||
$q.notify({
|
||||
type: 'positive',
|
||||
caption: "通知",
|
||||
message: `イベント ${node.label} 削除`
|
||||
})
|
||||
}
|
||||
|
||||
const onSelected = (node: IKintoneEvent) => {
|
||||
if (!node.eventId) {
|
||||
return;
|
||||
}
|
||||
selectedEvent.value = node;
|
||||
if (store.appInfo === undefined) {
|
||||
return;
|
||||
}
|
||||
const screen = store.eventTree.findEventById(node.parentId);
|
||||
|
||||
let flow = store.findFlowByEventId(node.eventId);
|
||||
let screenName = screen !== null ? screen.label : "";
|
||||
let nodeLabel = node.label;
|
||||
// if(isFieldChange(node)){
|
||||
// screenName=nodeLabel;
|
||||
// nodeLabel=`${node.label}の値を変更したとき`;
|
||||
// }
|
||||
|
||||
if (flow !== undefined && flow !== null) {
|
||||
store.selectFlow(flow);
|
||||
} else {
|
||||
const root = new RootAction(node.eventId, screenName, nodeLabel)
|
||||
const flow = new ActionFlow(root);
|
||||
store.flows?.push(flow);
|
||||
store.selectFlow(flow);
|
||||
selectedEvent.value.flowData = flow;
|
||||
}
|
||||
};
|
||||
return {
|
||||
// eventTree,
|
||||
@@ -125,6 +150,7 @@ export default defineComponent({
|
||||
onSelected,
|
||||
selectedEvent,
|
||||
addChangeEvent,
|
||||
deleteEvent,
|
||||
closeDg,
|
||||
store
|
||||
}
|
||||
@@ -132,20 +158,25 @@ export default defineComponent({
|
||||
});
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.nowrap{
|
||||
flex-wrap:nowarp;
|
||||
text-wrap:nowarp;
|
||||
.nowrap {
|
||||
flex-wrap: nowarp;
|
||||
text-wrap: nowarp;
|
||||
}
|
||||
.event-node{
|
||||
cursor:pointer;
|
||||
|
||||
.event-node {
|
||||
cursor: pointer;
|
||||
}
|
||||
.selected-node{
|
||||
|
||||
.selected-node {
|
||||
color: $primary;
|
||||
font-weight: bolder;
|
||||
}
|
||||
.event-node:hover{
|
||||
|
||||
.event-node:hover {
|
||||
background-color: $light-blue-1;
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -1,44 +1,49 @@
|
||||
import { api } from 'boot/axios';
|
||||
import { ActionFlow } from 'src/types/ActionTypes';
|
||||
|
||||
export class FlowCtrl
|
||||
{
|
||||
|
||||
async getFlows(appId:string):Promise<ActionFlow[]>
|
||||
{
|
||||
const flows:ActionFlow[]=[];
|
||||
try{
|
||||
const result = await api.get(`api/flows/${appId}`);
|
||||
//console.info(result.data);
|
||||
if(!result.data || !Array.isArray(result.data)){
|
||||
return [];
|
||||
}
|
||||
|
||||
for(const flow of result.data){
|
||||
flows.push(ActionFlow.fromJSON(flow.content));
|
||||
}
|
||||
return flows;
|
||||
}catch(error){
|
||||
console.error(error);
|
||||
return flows;
|
||||
export class FlowCtrl {
|
||||
async getFlows(appId: string): Promise<ActionFlow[]> {
|
||||
const flows: ActionFlow[] = [];
|
||||
try {
|
||||
const result = await api.get(`api/flows/${appId}`);
|
||||
//console.info(result.data);
|
||||
if (!result.data || !Array.isArray(result.data)) {
|
||||
return [];
|
||||
}
|
||||
|
||||
for (const flow of result.data) {
|
||||
flows.push(ActionFlow.fromJSON(flow.content));
|
||||
}
|
||||
return flows;
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
return flows;
|
||||
}
|
||||
}
|
||||
|
||||
async SaveFlow(jsonData:any):Promise<boolean>
|
||||
{
|
||||
const result = await api.post('api/flow',jsonData);
|
||||
console.info(result.data)
|
||||
return true;
|
||||
async SaveFlow(jsonData: any): Promise<boolean> {
|
||||
const result = await api.post('api/flow', jsonData);
|
||||
console.info(result.data);
|
||||
return true;
|
||||
}
|
||||
/**
|
||||
* フローを更新する
|
||||
* @param jsonData
|
||||
* @returns
|
||||
*/
|
||||
async UpdateFlow(jsonData:any):Promise<boolean>
|
||||
{
|
||||
const result = await api.put('api/flow/' + jsonData.flowid,jsonData);
|
||||
console.info(result.data)
|
||||
async UpdateFlow(jsonData: any): Promise<boolean> {
|
||||
const result = await api.put('api/flow/' + jsonData.flowid, jsonData);
|
||||
console.info(result.data);
|
||||
return true;
|
||||
}
|
||||
/**
|
||||
* フローを消去する
|
||||
* @param flowId
|
||||
* @returns
|
||||
*/
|
||||
async DeleteFlow(flowId: string): Promise<boolean> {
|
||||
const result = await api.delete('api/flow/' + flowId);
|
||||
console.info(result.data);
|
||||
return true;
|
||||
}
|
||||
/**
|
||||
@@ -46,12 +51,9 @@ export class FlowCtrl
|
||||
* @param appid
|
||||
* @returns
|
||||
*/
|
||||
async depoly(appid:string):Promise<boolean>
|
||||
{
|
||||
async depoly(appid: string): Promise<boolean> {
|
||||
const result = await api.post(`api/v1/createjstokintone?app=${appid}`);
|
||||
console.info(result.data);
|
||||
return true;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@@ -1,118 +1,142 @@
|
||||
import { defineStore } from 'pinia';
|
||||
import { AppInfo ,IActionFlow, IActionNode} from 'src/types/ActionTypes';
|
||||
import { IKintoneEvent,KintoneEventManager } from 'src/types/KintoneEvents';
|
||||
import {FlowCtrl } from '../control/flowctrl';
|
||||
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[];
|
||||
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 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:[]
|
||||
}),
|
||||
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;
|
||||
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
|
||||
});
|
||||
}
|
||||
}
|
||||
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;
|
||||
setFlows(flows: IActionFlow[]) {
|
||||
this.flows = flows;
|
||||
},
|
||||
selectFlow(flow:IActionFlow){
|
||||
this.selectedFlow=flow;
|
||||
selectFlow(flow: IActionFlow | undefined) {
|
||||
this.selectedFlow = flow;
|
||||
},
|
||||
setActiveNode(node:IActionNode){
|
||||
this.activeNode=node;
|
||||
setActiveNode(node: IActionNode) {
|
||||
this.activeNode = node;
|
||||
},
|
||||
setApp(app:AppInfo){
|
||||
this.appInfo=app;
|
||||
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;
|
||||
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,
|
||||
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)
|
||||
}
|
||||
content: JSON.stringify(flow),
|
||||
};
|
||||
|
||||
if(isNew){
|
||||
if (isNew) {
|
||||
return await flowCtrl.SaveFlow(jsonData);
|
||||
}else{
|
||||
} else {
|
||||
return await flowCtrl.UpdateFlow(jsonData);
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
deleteEvent(event: IKintoneEvent) {
|
||||
const store = useFlowEditorStore();
|
||||
if (event.flowData) {
|
||||
const flow = event.flowData;
|
||||
if (flow.id === '') {
|
||||
return;
|
||||
}
|
||||
flowCtrl.DeleteFlow(flow.id)
|
||||
eventTree.deleteEvent(event, store);
|
||||
if(this.flows){
|
||||
this.flows = this.flows.filter((f) => f.id !== flow.id);
|
||||
}
|
||||
} else {
|
||||
eventTree.deleteEvent(event, store);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* デプロイする
|
||||
*/
|
||||
async deploy():Promise<boolean>{
|
||||
if(this.appInfo===undefined){
|
||||
async deploy(): Promise<boolean> {
|
||||
if (this.appInfo === undefined) {
|
||||
return false;
|
||||
}
|
||||
return await flowCtrl.depoly(this.appInfo?.appId);
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
import {IActionFlow} from './ActionTypes';
|
||||
import { useFlowEditorStore } from 'src/stores/flowEditor';
|
||||
import { IActionFlow } from './ActionTypes';
|
||||
export interface IKintoneEventNode {
|
||||
label: string;
|
||||
header:string;
|
||||
eventId:string;
|
||||
parentId:string;
|
||||
header: string;
|
||||
eventId: string;
|
||||
parentId: string;
|
||||
}
|
||||
|
||||
export interface IKintoneEvent extends IKintoneEventNode {
|
||||
@@ -15,60 +16,64 @@ export interface IKintoneEventGroup extends IKintoneEventNode {
|
||||
events: IKintoneEventNode[];
|
||||
}
|
||||
|
||||
|
||||
export class kintoneEvent implements IKintoneEvent{
|
||||
export class kintoneEvent implements IKintoneEvent {
|
||||
eventId: string;
|
||||
parentId:string;
|
||||
get hasFlow(): boolean{
|
||||
return this.flowData!==undefined && this.flowData.actionNodes.length>1
|
||||
};
|
||||
parentId: string;
|
||||
get hasFlow(): boolean {
|
||||
return this.flowData !== undefined && this.flowData.actionNodes.length > 1;
|
||||
}
|
||||
flowData?: IActionFlow | undefined;
|
||||
label: string;
|
||||
get header():string{
|
||||
return "EVENT";
|
||||
}
|
||||
constructor(label:string,eventId:string,parentId:string){
|
||||
this.eventId=eventId;
|
||||
this.label=label;
|
||||
this.parentId=parentId;
|
||||
header = 'EVENT';
|
||||
constructor(label: string, eventId: string, parentId: string) {
|
||||
this.eventId = eventId;
|
||||
this.label = label;
|
||||
this.parentId = parentId;
|
||||
}
|
||||
}
|
||||
|
||||
export class kintoneEventGroup implements IKintoneEventGroup{
|
||||
export class kintoneEventGroup implements IKintoneEventGroup {
|
||||
eventId: string;
|
||||
parentId:string;
|
||||
parentId: string;
|
||||
label: string;
|
||||
events: IKintoneEventNode[];
|
||||
get header():string{
|
||||
return "EVENTGROUP";
|
||||
get header(): string {
|
||||
return 'EVENTGROUP';
|
||||
}
|
||||
constructor(eventId:string,label:string,events:IKintoneEventNode[],parentId:string){
|
||||
this.eventId=eventId;
|
||||
this.label=label;
|
||||
this.events=events;
|
||||
this.parentId=parentId;
|
||||
constructor(
|
||||
eventId: string,
|
||||
label: string,
|
||||
events: IKintoneEventNode[],
|
||||
parentId: string
|
||||
) {
|
||||
this.eventId = eventId;
|
||||
this.label = label;
|
||||
this.events = events;
|
||||
this.parentId = parentId;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export class kintoneEventForChange implements IKintoneEventGroup{
|
||||
export class kintoneEventForChange implements IKintoneEventGroup {
|
||||
eventId: string;
|
||||
parentId:string;
|
||||
parentId: string;
|
||||
label: string;
|
||||
events: IKintoneEventNode[];
|
||||
get header():string{
|
||||
return "CHANGE";
|
||||
get header(): string {
|
||||
return 'CHANGE';
|
||||
}
|
||||
constructor(eventId:string,label:string,events:IKintoneEventNode[],parentId:string){
|
||||
this.eventId=eventId;
|
||||
this.label=label;
|
||||
this.events=events;
|
||||
this.parentId=parentId;
|
||||
constructor(
|
||||
eventId: string,
|
||||
label: string,
|
||||
events: IKintoneEventNode[],
|
||||
parentId: string
|
||||
) {
|
||||
this.eventId = eventId;
|
||||
this.label = label;
|
||||
this.events = events;
|
||||
this.parentId = parentId;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
export class KintoneEventManager {
|
||||
public screens: IKintoneEventGroup[];
|
||||
|
||||
@@ -76,28 +81,35 @@ export class KintoneEventManager {
|
||||
this.screens = this.getKintoneEvents();
|
||||
}
|
||||
|
||||
public bindFlows(flows:IActionFlow[]){
|
||||
this.screens=this.getKintoneEvents();
|
||||
for (const flow of flows){
|
||||
const eventId =flow.getRoot()?.name;
|
||||
if(eventId!==undefined){
|
||||
public bindFlows(flows: IActionFlow[]) {
|
||||
this.screens = this.getKintoneEvents();
|
||||
for (const flow of flows) {
|
||||
const eventId = flow.getRoot()?.name;
|
||||
if (eventId !== undefined) {
|
||||
const eventNode = this.findEventById(eventId);
|
||||
if(eventNode!==null && eventNode.header==="EVENT"){
|
||||
const event =eventNode as kintoneEvent;
|
||||
event.flowData=flow;
|
||||
}else{
|
||||
if (eventNode !== null && eventNode.header === 'EVENT') {
|
||||
const event = eventNode as kintoneEvent;
|
||||
event.flowData = flow;
|
||||
} else {
|
||||
//EventGroupのIDを取得
|
||||
const lastIndex = eventId.lastIndexOf(".");
|
||||
const groupId=eventId.substring(0,lastIndex);
|
||||
const lastIndex = eventId.lastIndexOf('.');
|
||||
const groupId = eventId.substring(0, lastIndex);
|
||||
const eventNode = this.findEventById(groupId);
|
||||
if(eventNode && (eventNode.header==="EVENTGROUP" || eventNode.header==="CHANGE")){
|
||||
const groupEvent=eventNode as kintoneEventGroup;
|
||||
const newEvent =new kintoneEvent(
|
||||
flow.getRoot()?.subTitle || "",
|
||||
eventId,
|
||||
groupEvent.parentId
|
||||
);
|
||||
newEvent.flowData=flow;
|
||||
if (
|
||||
eventNode &&
|
||||
(eventNode.header === 'EVENTGROUP' || eventNode.header === 'CHANGE')
|
||||
) {
|
||||
const groupEvent = eventNode as kintoneEventGroup;
|
||||
|
||||
const newEvent = {
|
||||
label: flow.getRoot()?.subTitle || '',
|
||||
eventId: eventId,
|
||||
parentId: groupId,
|
||||
header: 'DELETABLE',
|
||||
hasFlow: true,
|
||||
flowData: flow,
|
||||
};
|
||||
|
||||
groupEvent.events.push(newEvent);
|
||||
}
|
||||
}
|
||||
@@ -106,61 +118,193 @@ export class KintoneEventManager {
|
||||
}
|
||||
|
||||
public findEventById(eventId: string): IKintoneEventNode | null {
|
||||
const screen=this.findScreen(eventId);
|
||||
if(screen) {return screen;}
|
||||
const screen = this.findScreen(eventId);
|
||||
if (screen) {
|
||||
return screen;
|
||||
}
|
||||
for (const screen of this.screens) {
|
||||
for (const event of screen.events) {
|
||||
if (event.eventId === eventId) {
|
||||
return event;
|
||||
}
|
||||
if(event.header==="EVENTGROUP"||event.header==="CHANGE"){
|
||||
const eventGroup = event as IKintoneEventGroup;
|
||||
const targetEvent = eventGroup.events.find((ev)=>{
|
||||
return ev.eventId===eventId;
|
||||
})
|
||||
if(targetEvent){
|
||||
return targetEvent;
|
||||
}
|
||||
if (event.eventId === eventId) {
|
||||
return event;
|
||||
}
|
||||
if (event.header === 'EVENTGROUP' || event.header === 'CHANGE') {
|
||||
const eventGroup = event as IKintoneEventGroup;
|
||||
const targetEvent = eventGroup.events.find((ev) => {
|
||||
return ev.eventId === eventId;
|
||||
});
|
||||
if (targetEvent) {
|
||||
return targetEvent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
public findScreen(eventId:string):IKintoneEventGroup|undefined{
|
||||
return this.screens.find(screen=>screen.eventId==eventId);
|
||||
public findScreen(eventId: string): IKintoneEventGroup | undefined {
|
||||
return this.screens.find((screen) => screen.eventId == eventId);
|
||||
}
|
||||
|
||||
public getKintoneEvents():IKintoneEventGroup[]{
|
||||
public deleteEvent(
|
||||
event: kintoneEvent,
|
||||
store: ReturnType<typeof useFlowEditorStore>
|
||||
) {
|
||||
if (event.header !== 'DELETABLE') {
|
||||
return;
|
||||
}
|
||||
|
||||
const parent = store.findEventById(event.parentId);
|
||||
if (parent?.header !== 'CHANGE' && parent?.header !== 'EVENTGROUP') {
|
||||
return;
|
||||
}
|
||||
const realParent = parent as kintoneEventForChange;
|
||||
|
||||
const index = realParent.events.findIndex(
|
||||
(e) => e.eventId === event.eventId
|
||||
);
|
||||
|
||||
if (index !== -1) {
|
||||
realParent.events.splice(index, 1);
|
||||
}
|
||||
}
|
||||
|
||||
public getKintoneEvents(): IKintoneEventGroup[] {
|
||||
return [
|
||||
new kintoneEventGroup("app.record.create","レコード追加画面",[
|
||||
new kintoneEvent('レコード追加画面を表示した後','app.record.create.show',"app.record.create"),
|
||||
new kintoneEvent('保存をクリックしたとき','app.record.create.submit',"app.record.create"),
|
||||
new kintoneEvent('保存が成功したとき','app.record.create.submit.success',"app.record.create"),
|
||||
new kintoneEventForChange('app.record.create.change','フィールドの値を変更したとき',[],"app.record.create"),
|
||||
new kintoneEventGroup('app.record.create.show.customButtonClick','ボタンをクリックした時',[],"app.record.create")
|
||||
],""),
|
||||
new kintoneEventGroup("app.record.detail","レコード詳細画面",[
|
||||
new kintoneEvent('レコード詳細画面を表示した後','app.record.detail.show',"app.record.detail"),
|
||||
new kintoneEvent('レコードを削除するとき','app.record.detail.delete.submit',"app.record.detail"),
|
||||
new kintoneEvent('プロセス管理のアクションを実行したとき','app.record.detail.process.proceed',"app.record.detail"),
|
||||
new kintoneEventGroup('app.record.detail.show.customButtonClick','ボタンをクリックした時',[],"app.record.detail"),
|
||||
],""),
|
||||
new kintoneEventGroup("app.record.edit","レコード編集画面",[
|
||||
new kintoneEvent('レコード編集画面を表示した後','app.record.edit.show',"app.record.edit"),
|
||||
new kintoneEvent('保存をクリックしたとき','app.record.edit.submit',"app.record.edit"),
|
||||
new kintoneEvent('保存が成功したとき','app.record.edit.submit.success',"app.record.edit"),
|
||||
new kintoneEventForChange('app.record.edit.change','フィールドの値を変更したとき',[],"app.record.edit"),
|
||||
new kintoneEventGroup('app.record.edit.show.customButtonClick','ボタンをクリックした時',[],"app.record.edit"),
|
||||
],""),
|
||||
new kintoneEventGroup("app.record.index","レコード一覧画面",[
|
||||
new kintoneEvent('一覧画面を表示した後', 'app.record.index.show',"app.record.index"),
|
||||
new kintoneEvent('インライン編集を開始したとき','app.record.index.edit.show',"app.record.index"),
|
||||
new kintoneEvent('インライン編集の【保存】をクリックしたとき','app.record.index.edit.submit',"app.record.index"),
|
||||
new kintoneEvent('インライン編集の保存が成功したとき', 'app.record.index.edit.submit.success',"app.record.index"),
|
||||
new kintoneEventForChange('app.record.index.edit.change','インライン編集のフィールド値を変更したとき' ,[],"app.record.index"),
|
||||
new kintoneEventGroup('app.record.detail.show.customButtonClick','ボタンをクリックした時',[],"app.record.index"),
|
||||
],"")
|
||||
new kintoneEventGroup(
|
||||
'app.record.create',
|
||||
'レコード追加画面',
|
||||
[
|
||||
new kintoneEvent(
|
||||
'レコード追加画面を表示した後',
|
||||
'app.record.create.show',
|
||||
'app.record.create'
|
||||
),
|
||||
new kintoneEvent(
|
||||
'保存をクリックしたとき',
|
||||
'app.record.create.submit',
|
||||
'app.record.create'
|
||||
),
|
||||
new kintoneEvent(
|
||||
'保存が成功したとき',
|
||||
'app.record.create.submit.success',
|
||||
'app.record.create'
|
||||
),
|
||||
new kintoneEventForChange(
|
||||
'app.record.create.change',
|
||||
'フィールドの値を変更したとき',
|
||||
[],
|
||||
'app.record.create'
|
||||
),
|
||||
new kintoneEventGroup(
|
||||
'app.record.create.show.customButtonClick',
|
||||
'ボタンをクリックした時',
|
||||
[],
|
||||
'app.record.create'
|
||||
),
|
||||
],
|
||||
''
|
||||
),
|
||||
new kintoneEventGroup(
|
||||
'app.record.detail',
|
||||
'レコード詳細画面',
|
||||
[
|
||||
new kintoneEvent(
|
||||
'レコード詳細画面を表示した後',
|
||||
'app.record.detail.show',
|
||||
'app.record.detail'
|
||||
),
|
||||
new kintoneEvent(
|
||||
'レコードを削除するとき',
|
||||
'app.record.detail.delete.submit',
|
||||
'app.record.detail'
|
||||
),
|
||||
new kintoneEvent(
|
||||
'プロセス管理のアクションを実行したとき',
|
||||
'app.record.detail.process.proceed',
|
||||
'app.record.detail'
|
||||
),
|
||||
new kintoneEventGroup(
|
||||
'app.record.detail.show.customButtonClick',
|
||||
'ボタンをクリックした時',
|
||||
[],
|
||||
'app.record.detail'
|
||||
),
|
||||
],
|
||||
''
|
||||
),
|
||||
new kintoneEventGroup(
|
||||
'app.record.edit',
|
||||
'レコード編集画面',
|
||||
[
|
||||
new kintoneEvent(
|
||||
'レコード編集画面を表示した後',
|
||||
'app.record.edit.show',
|
||||
'app.record.edit'
|
||||
),
|
||||
new kintoneEvent(
|
||||
'保存をクリックしたとき',
|
||||
'app.record.edit.submit',
|
||||
'app.record.edit'
|
||||
),
|
||||
new kintoneEvent(
|
||||
'保存が成功したとき',
|
||||
'app.record.edit.submit.success',
|
||||
'app.record.edit'
|
||||
),
|
||||
new kintoneEventForChange(
|
||||
'app.record.edit.change',
|
||||
'フィールドの値を変更したとき',
|
||||
[],
|
||||
'app.record.edit'
|
||||
),
|
||||
new kintoneEventGroup(
|
||||
'app.record.edit.show.customButtonClick',
|
||||
'ボタンをクリックした時',
|
||||
[],
|
||||
'app.record.edit'
|
||||
),
|
||||
],
|
||||
''
|
||||
),
|
||||
new kintoneEventGroup(
|
||||
'app.record.index',
|
||||
'レコード一覧画面',
|
||||
[
|
||||
new kintoneEvent(
|
||||
'一覧画面を表示した後',
|
||||
'app.record.index.show',
|
||||
'app.record.index'
|
||||
),
|
||||
new kintoneEvent(
|
||||
'インライン編集を開始したとき',
|
||||
'app.record.index.edit.show',
|
||||
'app.record.index'
|
||||
),
|
||||
new kintoneEvent(
|
||||
'インライン編集の【保存】をクリックしたとき',
|
||||
'app.record.index.edit.submit',
|
||||
'app.record.index'
|
||||
),
|
||||
new kintoneEvent(
|
||||
'インライン編集の保存が成功したとき',
|
||||
'app.record.index.edit.submit.success',
|
||||
'app.record.index'
|
||||
),
|
||||
new kintoneEventForChange(
|
||||
'app.record.index.edit.change',
|
||||
'インライン編集のフィールド値を変更したとき',
|
||||
[],
|
||||
'app.record.index'
|
||||
),
|
||||
new kintoneEventGroup(
|
||||
'app.record.detail.show.customButtonClick',
|
||||
'ボタンをクリックした時',
|
||||
[],
|
||||
'app.record.index'
|
||||
),
|
||||
],
|
||||
''
|
||||
),
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,19 +6,22 @@
|
||||
"scripts": {
|
||||
"dev": "tsc && set \"SOURCE_MAP=true\" && vite build && vite preview",
|
||||
"build": "tsc && vite build && xcopy dist\\*.js ..\\..\\backend\\Temp\\ /E /I /Y",
|
||||
"build:dev":"tsc && set \"SOURCE_MAP=true\" && vite build && xcopy dist\\*.js ..\\..\\backend\\Temp\\ /E /I /Y",
|
||||
"build:linux": "tsc && vite build && cp -ur dist/*.js ../../backend/Temp",
|
||||
"build:dev": "tsc && set \"SOURCE_MAP=true\" && vite build && xcopy dist\\*.js ..\\..\\backend\\Temp\\ /E /I /Y",
|
||||
"preview": "vite preview",
|
||||
"ngrok":"ngrok http http://localhost:4173/",
|
||||
"vite":"vite dev"
|
||||
"ngrok": "ngrok http http://localhost:4173/",
|
||||
"vite": "vite dev"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/jquery": "^3.5.24",
|
||||
"@types/node": "^20.8.9",
|
||||
"sass": "^1.69.5",
|
||||
"typescript": "^5.0.2",
|
||||
"vite": "^4.4.5"
|
||||
"vite": "^4.4.5",
|
||||
"vite-plugin-checker": "^0.6.4"
|
||||
},
|
||||
"dependencies": {
|
||||
"jquery": "^3.7.1"
|
||||
"jquery": "^3.7.1",
|
||||
"vite-plugin-css-injected-by-js": "^3.5.1"
|
||||
}
|
||||
}
|
||||
|
||||
24
plugin/kintone-addins/src/actions/auto-numbering.css
Normal file
24
plugin/kintone-addins/src/actions/auto-numbering.css
Normal file
@@ -0,0 +1,24 @@
|
||||
.alc-button-normal {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
padding: 0 16px;
|
||||
margin-left: 16px;
|
||||
margin-top: 8px;
|
||||
min-width: 100px;
|
||||
outline: none;
|
||||
border: 1px solid #e3e7e8;
|
||||
background-color: #f7f9fa;
|
||||
box-shadow: 1px 1px 1px #fff inset;
|
||||
color: #3498db;
|
||||
text-align: center;
|
||||
line-height: 32px;
|
||||
}
|
||||
.alc-button-normal:hover {
|
||||
background-color: #c8d6dd;
|
||||
box-shadow: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.alc-button-normal:active {
|
||||
color: #f7f9fa;
|
||||
background-color: #54b8eb;
|
||||
}
|
||||
@@ -2,6 +2,7 @@
|
||||
import { actionAddins } from ".";
|
||||
import { IField, IAction,IActionResult, IActionNode, IActionProperty, IContext } from "../types/ActionTypes";
|
||||
import { Formatter } from "../util/format";
|
||||
import "./auto-numbering.css";
|
||||
|
||||
declare global {
|
||||
interface Window { $format: any; }
|
||||
@@ -84,6 +85,7 @@ export class AutoNumbering implements IAction{
|
||||
|
||||
execEval(match:string,expr:string):string{
|
||||
console.log(match);
|
||||
// @ts-ignore
|
||||
return eval(expr);
|
||||
}
|
||||
|
||||
|
||||
0
plugin/kintone-addins/src/actions/button-add.css
Normal file
0
plugin/kintone-addins/src/actions/button-add.css
Normal file
@@ -2,6 +2,8 @@
|
||||
import { actionAddins } from ".";
|
||||
import $ from 'jquery';
|
||||
import { IAction, IActionProperty, IActionNode, IActionResult } from "../types/ActionTypes";
|
||||
import "./button-add.css";
|
||||
|
||||
/**
|
||||
* ボタン配置属性定義
|
||||
*/
|
||||
@@ -51,30 +53,7 @@ export class ButtonAddAction implements IAction {
|
||||
if(!menuSpace) return result;
|
||||
if($("style#alc-button-add").length===0){
|
||||
const css=`
|
||||
.alc-button-normal {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
padding: 0 16px;
|
||||
margin-left: 16px;
|
||||
margin-top: 8px;
|
||||
min-width: 100px;
|
||||
outline: none;
|
||||
border: 1px solid #e3e7e8;
|
||||
background-color: #f7f9fa;
|
||||
box-shadow: 1px 1px 1px #fff inset;
|
||||
color: #3498db;
|
||||
text-align: center;
|
||||
line-height: 32px;
|
||||
}
|
||||
.alc-button-normal:hover {
|
||||
background-color: #c8d6dd;
|
||||
box-shadow: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.alc-button-normal:active {
|
||||
color: #f7f9fa;
|
||||
background-color: #54b8eb;
|
||||
}`;
|
||||
`;
|
||||
const style = $("<style id='alc-button-add'>/<style>");
|
||||
style.text(css);
|
||||
$("head").append(style);
|
||||
|
||||
@@ -1,16 +1,26 @@
|
||||
// vite.config.js
|
||||
import { defineConfig } from 'vite'
|
||||
const sourcemap = process.env.SOURCE_MAP==='true';
|
||||
import { defineConfig } from "vite";
|
||||
import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";
|
||||
import checker from "vite-plugin-checker";
|
||||
|
||||
const sourcemap = process.env.SOURCE_MAP === "true";
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
checker({
|
||||
typescript: true,
|
||||
}),
|
||||
cssInjectedByJsPlugin(),
|
||||
],
|
||||
build: {
|
||||
cssCodeSplit: false,
|
||||
rollupOptions: {
|
||||
input: 'src/index.ts', // entry file
|
||||
output:{
|
||||
entryFileNames:'alc_runtime.js',
|
||||
input: "src/index.ts", // entry file
|
||||
output: {
|
||||
entryFileNames: "alc_runtime.js",
|
||||
// assetFileNames:'alc_kintone_style.css'
|
||||
}
|
||||
},
|
||||
},
|
||||
sourcemap:sourcemap
|
||||
}
|
||||
})
|
||||
sourcemap: sourcemap,
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user