alicorn-dev/KintoneAppBuilder
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ボタンクリックイベント対応

Browse Source
This commit is contained in:
maxiaozhe@alicorns.co.jp
2024-03-01 22:47:37 +09:00
parent 72608a8ffd
commit 03904a4e35
19 changed files with 676 additions and 1419 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
frontend/src/components/left/EventTree.vue
View File

@@ -2,13 +2,14 @@
<!-- <div class="q-pa-md q-gutter-sm"> -->
<q-tree
:nodes="store.eventTree.screens"
node-key="label"
node-key="eventId"
children-key="events"
no-connectors
v-model:expanded="store.expandedScreen"
:dense="true"
:ref="tree"
>
<template v-slot:default-header="prop">
<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"
@@ -16,27 +17,78 @@
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> -->
</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>
</template>
</q-tree>
<!-- </div> -->
<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>
</template>
<script lang="ts">
import { defineComponent, computed, ref } from 'vue';
import { IKintoneEvent } from '../../types/KintoneEvents';
import { IKintoneEvent ,IKintoneEventGroup, IKintoneEventNode, kintoneEvent} from '../../types/KintoneEvents';
import { storeToRefs } from 'pinia';
import { useFlowEditorStore } from 'stores/flowEditor';
import { ActionFlow, ActionNode, RootAction } from 'src/types/ActionTypes';
import ShowDialog from '../ShowDialog.vue';
import FieldSelect from '../FieldSelect.vue';
import { QTree } from 'quasar';
export default defineComponent({
name: 'EventTree',
components: {
ShowDialog,
FieldSelect,
},
setup(props, context) {
const appDg = ref();
const store = useFlowEditorStore();
const showDialog = ref(false);
const tree = ref<QTree>();
// const eventTree=ref(kintoneEvents);
// 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 closeDg = (val:string) => {
if (val == 'OK') {
if(!selectedChangeEvent.value){return;}
const field = appDg.value.selected[0];
const eventid = `${selectedChangeEvent.value.eventId}.${field.code}`;
if(store.eventTree.findEventById(eventid)){
return;
}
selectedChangeEvent.value?.events.push(
new kintoneEvent(
field.label,
eventid,
selectedChangeEvent.value.eventId)
);
tree.value?.expanded?.push(selectedChangeEvent.value.eventId);
tree.value?.expandAll();
}
};
const addChangeEvent=(node:IKintoneEventGroup)=>{
if(store.appInfo===undefined){
return;
}
selectedChangeEvent.value=node;
showDialog.value=true;
}
const onSelected=(node:IKintoneEvent)=>{
if(!node.eventId){
return;
@@ -45,24 +97,35 @@ export default defineComponent({
if(store.appInfo===undefined){
return;
}
const screen = store.eventTree.findScreen(node.eventId);
const screen = store.eventTree.findEventById(node.parentId);
let flow =store.findFlowByEventId(node.eventId);
const screenName=screen!==null?screen.label:"";
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,node.label)
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,
// expanded,
appDg,
tree,
showDialog,
isFieldChange,
onSelected,
selectedEvent,
addChangeEvent,
closeDg,
store
}
}
@@ -83,4 +146,6 @@ export default defineComponent({
.event-node:hover{
background-color: $light-blue-1;
}
</style>

44
frontend/src/components/right/ActionProperty.vue
View File

@@ -1,25 +1,27 @@
<template>
<div>
<div v-for="(item, index) in componentData" :key="index">
<component :is="item.component" v-bind="item.props" v-model="item.props.modelValue"></component>
<component :is="item.component" v-bind="item.props" :connectProps="connectProps" v-model="item.props.modelValue"></component>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { defineComponent,computed } from 'vue';
import InputText from '../right/InputText.vue';
import SelectBox from '../right/SelectBox.vue';
import DatePicker from '../right/DatePicker.vue';
import FieldInput from '../right/FieldInput.vue';
import EventSetter from '../right/EventSetter.vue';
import { IActionProperty, IProp } from 'src/types/ActionTypes';
export default defineComponent({
name: 'ActionProperty',
components: {
InputText,
SelectBox,
DatePicker,
FieldInput
FieldInput,
EventSetter
},
props: {
jsonData: {
@@ -31,27 +33,43 @@ export default defineComponent({
required: false,
}
},
computed: {
componentData() {
return this.jsonData.elements.map((element: any) => {
if(this.jsonValue != undefined )
setup(props){
const componentData=computed<Array<IActionProperty>>(()=>{
return props.jsonData.elements.map((element: any) => {
if(props.jsonValue != undefined )
{
if(this.jsonValue.hasOwnProperty(element.props.name))
if(props.jsonValue.hasOwnProperty(element.props.name))
{
element.props.modelValue = this.jsonValue[element.props.name];
element.props.modelValue = props.jsonValue[element.props.name];
}
else
{
element.props.modelValue = '';
}
}
return {
component: element.component,
props: element.props,
};
});
},
},
});
const connectProps=(props:IProp)=>{
const connProps:any={};
if(props && "connectProps" in props && props.connectProps!=undefined){
for(let connProp of props.connectProps){
let targetProp = componentData.value.find((prop)=>prop.props.name===connProp.propName);
if(targetProp){
connProps[connProp.key]=targetProp;
}
}
}
return connProps;
}
return{
componentData,
connectProps
}
}
});
</script>

80
frontend/src/components/right/EventSetter.vue Normal file
View File

@@ -0,0 +1,80 @@
<template>
<q-input :label="displayName" v-model="inputValue" label-color="primary" :placeholder="placeholder" stack-label>
<template v-slot:append>
<q-btn round dense flat icon="add" @click="addButtonEvent()" />
</template>
</q-input>
</template>
<script lang="ts">
import { defineComponent,ref,watchEffect } from 'vue';
import { useFlowEditorStore } from '../../stores/flowEditor';
import { IKintoneEventGroup,kintoneEvent } from 'src/types/KintoneEvents';
export default defineComponent({
name: 'EventSetter',
props: {
displayName:{
type: String,
default: '',
},
name:{
type: String,
default: '',
},
placeholder: {
type: String,
default: '',
},
hint:{
type: String,
default: '',
},
modelValue: {
type: String,
default: '',
},
connectProps:{
type:Object,
default:undefined
}
},
setup(props , { emit }) {
const inputValue = ref(props.modelValue);
const store = useFlowEditorStore();
const addButtonEvent=()=>{
const eventId =store.currentFlow?.getRoot()?.name;
if(eventId===undefined){return;}
let displayName = inputValue.value;
if(props.connectProps!==undefined && "displayName" in props.connectProps){
displayName =props.connectProps["displayName"].props.modelValue;
}
const customButtonId=`${eventId}.customButtonClick`;
const findedEvent = store.eventTree.findEventById(customButtonId);
if(findedEvent && "events" in findedEvent){
const customEvents = findedEvent as IKintoneEventGroup;
const addEventId = customButtonId+"." + inputValue.value;
if(store.eventTree.findEventById(addEventId)){
return;
}
customEvents.events.push(
new kintoneEvent(
displayName,
addEventId,
customButtonId)
);
}
}
watchEffect(() => {
emit('update:modelValue', inputValue.value);
});
return {
inputValue,
addButtonEvent
};
},
});
</script>

25
frontend/src/components/right/PropertyList.vue
View File

@@ -1,7 +1,7 @@
<template>
<div>
<div v-for="(item, index) in properties" :key="index" >
<component :is="item.component" v-bind="item.props" v-model="item.props.modelValue"></component>
<component :is="item.component" v-bind="item.props" :connectProps="connectProps(item.props)" v-model="item.props.modelValue"></component>
</div>
</div>
</template>
@@ -17,7 +17,8 @@ import DatePicker from '../right/DatePicker.vue';
import FieldInput from '../right/FieldInput.vue';
import MuiltInputText from '../right/MuiltInputText.vue';
import ConditionInput from '../right/ConditionInput.vue';
import { IActionNode,IActionProperty } from 'src/types/ActionTypes';
import EventSetter from '../right/EventSetter.vue';
import { IActionNode,IActionProperty,IProp } from 'src/types/ActionTypes';
export default defineComponent({
name: 'PropertyList',
@@ -27,7 +28,8 @@ export default defineComponent({
DatePicker,
FieldInput,
MuiltInputText,
ConditionInput
ConditionInput,
EventSetter
},
props: {
nodeProps: {
@@ -40,9 +42,22 @@ export default defineComponent({
}
},
setup(props, context) {
const properties=ref(props.nodeProps)
const properties=ref(props.nodeProps);
const connectProps=(props:IProp)=>{
const connProps:any={};
if(props && "connectProps" in props && props.connectProps!=undefined){
for(let connProp of props.connectProps){
let targetProp = properties.value.find((prop)=>prop.props.name===connProp.propName);
if(targetProp){
connProps[connProp.key]=targetProp;
}
}
}
return connProps;
}
return {
properties
properties,
connectProps
}
}
});

5
frontend/src/stores/flowEditor.ts
View File

@@ -1,6 +1,6 @@
import { defineStore } from 'pinia';
import { AppInfo ,IActionFlow, IActionNode} from 'src/types/ActionTypes';
import { kintoneEvents,IKintoneEvent,KintoneEventManager } from 'src/types/KintoneEvents';
import { IKintoneEvent,KintoneEventManager } from 'src/types/KintoneEvents';
import {FlowCtrl } from '../control/flowctrl';
export interface FlowEditorState{
@@ -14,6 +14,7 @@ export interface FlowEditorState{
expandedScreen:any[];
}
const flowCtrl=new FlowCtrl();
const eventTree = new KintoneEventManager();
export const useFlowEditorStore = defineStore("flowEditor",{
state: ():FlowEditorState => ({
flowNames1: '',
@@ -21,7 +22,7 @@ export const useFlowEditorStore = defineStore("flowEditor",{
flows:[],
selectedFlow:undefined,
activeNode:undefined,
eventTree:kintoneEvents,
eventTree:eventTree,
selectedEvent:undefined,
expandedScreen:[]
}),

3
frontend/src/types/ActionTypes.ts
View File

@@ -26,6 +26,8 @@ export interface IProp{
placeholder: string;
//入力提示・説明
hint:string;
//関連属性リスト
connectProps:[{key:string,propName:string}]|undefined;
//プロパティ設定値
modelValue: any;
}
@@ -109,6 +111,7 @@ class ActionProperty implements IActionProperty {
displayName: displayName,
placeholder: placeholder,
hint:hint,
connectProps:undefined,
modelValue: modelValue
};
}

221
frontend/src/types/KintoneEvents.ts
View File

@@ -1,112 +1,197 @@
import { publicDecrypt } from 'crypto';
import {IActionFlow} from './ActionTypes';
export interface TreeNode {
export interface IKintoneEventNode {
label: string;
header:string;
eventId:string;
parentId:string;
}
export interface IKintoneEvent extends TreeNode {
eventId: string;
export interface IKintoneEvent extends IKintoneEventNode {
hasFlow: boolean;
flowData?: IActionFlow;
}
export interface IKintoneScreen extends TreeNode {
label: string;
events: IKintoneEvent[];
export interface IKintoneEventGroup extends IKintoneEventNode {
events: IKintoneEventNode[];
}
export class kintoneEvent implements IKintoneEvent{
eventId: string;
get hasFlow(): boolean{
parentId: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}){
get header():string{
return "EVENT";
}
constructor(label:string,eventId:string,parentId:string){
this.eventId=eventId;
this.label=label;
this.parentId=parentId;
}
}
export class KintoneEventManager {
public screens: IKintoneScreen[];
export class kintoneEventGroup implements IKintoneEventGroup{
eventId: string;
parentId:string;
label: string;
events: IKintoneEventNode[];
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(screens: IKintoneScreen[]) {
this.screens = screens;
export class kintoneEventForChange implements IKintoneEventGroup{
eventId: string;
parentId:string;
label: string;
events: IKintoneEventNode[];
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;
}
}
export class KintoneEventManager {
public screens: IKintoneEventGroup[];
constructor() {
this.screens = this.getKintoneEvents();
}
public bindFlows(flows:IActionFlow[]){
for (const screen of this.screens) {
screen.events.forEach((ev)=>ev.flowData=undefined);
}
this.screens=this.getKintoneEvents();
for (const flow of flows){
const eventId =flow.getRoot()?.name;
if(eventId!==undefined){
const event = this.findEventById(eventId);
if(event!==null){
const eventNode = this.findEventById(eventId);
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 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;
groupEvent.events.push(newEvent);
}
}
}
}
}
public findEventById(eventId: string): IKintoneEvent | null {
public findEventById(eventId: string): IKintoneEventNode | null {
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.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):IKintoneScreen|null{
for (const screen of this.screens) {
if(screen.events.some((ev:IKintoneEvent)=>ev.eventId===eventId)){
return screen;
}
}
return null;
public findScreen(eventId:string):IKintoneEventGroup|undefined{
return this.screens.find(screen=>screen.eventId==eventId);
}
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"),
],"")
];
}
}
export const kintoneEvents:KintoneEventManager = new KintoneEventManager([
{
label:'レコード追加画面',
events:[
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:[
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:[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:[
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'}),
]
}
]);
// export const kintoneEvents:KintoneEventManager = new KintoneEventManager([
// 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.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.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.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.customButtonClick','ボタンをクリックした時',[],"app.record.index"),
// ],"")
// ]);