From a7078b54c593da7ab53c29337fe595ff40d19be0 Mon Sep 17 00:00:00 2001 From: Mouriya Date: Mon, 13 May 2024 01:16:09 +0900 Subject: [PATCH 01/18] =?UTF-8?q?=E3=82=A4=E3=83=99=E3=83=B3=E3=83=88?= =?UTF-8?q?=E3=81=AB=E5=89=8A=E9=99=A4=E9=96=A2=E6=95=B0=E3=82=92=E8=BF=BD?= =?UTF-8?q?=E5=8A=A0=E3=81=97=E3=80=81=E5=8D=B3=E5=BA=A7=E3=81=AB=E9=81=A9?= =?UTF-8?q?=E7=94=A8=E3=81=99=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/left/EventTree.vue | 205 ++++++------ frontend/src/control/flowctrl.ts | 68 ++-- frontend/src/stores/flowEditor.ts | 170 +++++----- frontend/src/types/KintoneEvents.ts | 346 +++++++++++++++------ 4 files changed, 495 insertions(+), 294 deletions(-) diff --git a/frontend/src/components/left/EventTree.vue b/frontend/src/components/left/EventTree.vue index f704c44..4cbe294 100644 --- a/frontend/src/components/left/EventTree.vue +++ b/frontend/src/components/left/EventTree.vue @@ -1,48 +1,55 @@ - diff --git a/frontend/src/control/flowctrl.ts b/frontend/src/control/flowctrl.ts index df5970d..ff8bb04 100644 --- a/frontend/src/control/flowctrl.ts +++ b/frontend/src/control/flowctrl.ts @@ -1,44 +1,49 @@ import { api } from 'boot/axios'; import { ActionFlow } from 'src/types/ActionTypes'; -export class FlowCtrl -{ - - async getFlows(appId:string):Promise - { - 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 { + 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 - { - const result = await api.post('api/flow',jsonData); - console.info(result.data) - return true; + async SaveFlow(jsonData: any): Promise { + const result = await api.post('api/flow', jsonData); + console.info(result.data); + return true; } /** * フローを更新する * @param jsonData * @returns */ - async UpdateFlow(jsonData:any):Promise - { - const result = await api.put('api/flow/' + jsonData.flowid,jsonData); - console.info(result.data) + async UpdateFlow(jsonData: any): Promise { + const result = await api.put('api/flow/' + jsonData.flowid, jsonData); + console.info(result.data); + return true; + } + /** + * フローを消去する + * @param flowId + * @returns + */ + async DeleteFlow(flowId: string): Promise { + 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 - { + async depoly(appid: string): Promise { const result = await api.post(`api/v1/createjstokintone?app=${appid}`); console.info(result.data); return true; } - } - diff --git a/frontend/src/stores/flowEditor.ts b/frontend/src/stores/flowEditor.ts index 27e6630..009756d 100644 --- a/frontend/src/stores/flowEditor.ts +++ b/frontend/src/stores/flowEditor.ts @@ -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{ - if(this.appInfo===undefined){ + async deploy(): Promise { + if (this.appInfo === undefined) { return false; } return await flowCtrl.depoly(this.appInfo?.appId); - } - - } + }, + }, }); diff --git a/frontend/src/types/KintoneEvents.ts b/frontend/src/types/KintoneEvents.ts index 3f06d96..975e929 100644 --- a/frontend/src/types/KintoneEvents.ts +++ b/frontend/src/types/KintoneEvents.ts @@ -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 + ) { + 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' + ), + ], + '' + ), ]; } } From 371e2ee0730e065864e68493546856a03fdb15d5 Mon Sep 17 00:00:00 2001 From: Mouriya Date: Mon, 13 May 2024 06:56:03 +0900 Subject: [PATCH 02/18] add vueuse dependencies --- frontend/package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/frontend/package.json b/frontend/package.json index 5016fbf..3343684 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -17,8 +17,9 @@ }, "dependencies": { "@quasar/extras": "^1.16.4", + "@vueuse/core": "^10.9.0", "axios": "^1.4.0", - "pinia": "^2.1.6", + "pinia": "^2.1.7", "quasar": "^2.6.0", "uuid": "^9.0.0", "vue": "^3.0.0", From 64d2cadd826ec41a91e486f58cdd9c8fa39e5920 Mon Sep 17 00:00:00 2001 From: Mouriya Date: Mon, 13 May 2024 06:56:44 +0900 Subject: [PATCH 03/18] =?UTF-8?q?2=E3=81=A4=E3=81=AE=E3=83=87=E3=83=BC?= =?UTF-8?q?=E3=82=BF=E8=A8=88=E7=AE=97=E3=82=B3=E3=83=B3=E3=83=9D=E3=83=BC?= =?UTF-8?q?=E3=83=8D=E3=83=B3=E3=83=88=E3=82=92=E8=BF=BD=E5=8A=A0=E3=81=99?= =?UTF-8?q?=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/ConditionObjects.vue | 11 +- frontend/src/components/FieldList.vue | 60 +++--- .../src/components/right/AppFieldSelect.vue | 8 +- .../src/components/right/ConditionInput.vue | 185 ++++++++++-------- .../src/components/right/DataProcessing.vue | 95 +++++++++ .../src/components/right/PropertyList.vue | 8 +- 6 files changed, 247 insertions(+), 120 deletions(-) create mode 100644 frontend/src/components/right/DataProcessing.vue diff --git a/frontend/src/components/ConditionObjects.vue b/frontend/src/components/ConditionObjects.vue index 3719bab..9939b08 100644 --- a/frontend/src/components/ConditionObjects.vue +++ b/frontend/src/components/ConditionObjects.vue @@ -19,7 +19,7 @@ - + @@ -30,7 +30,7 @@ + } +}; + + +export default defineComponent({ + name: 'FieldInput', + inheritAttrs: false, + components: { + ConditionEditor + }, + props: { + context: { + type: Array, + default: '', + }, + displayName: { + type: String, + default: '', + }, + name: { + type: String, + default: '', + }, + placeholder: { + type: String, + default: '', + }, + hint: { + type: String, + default: '', + }, + modelValue: { + type: String, + default: null + }, + }, + + setup(props, { emit }) { + const source = props.context.find(element => element?.props?.name === 'sources') + + if (source) { + provide('sourceFields', computed( () => source.props?.modelValue?.fields ?? [])); + } + + const appDg = ref(); + const show = ref(false); + const tree = reactive(new ConditionTree()); + if (props.modelValue && props.modelValue !== '') { + tree.fromJson(props.modelValue); + } else { + const newNode = new ConditionNode({}, Operator.Equal, '', tree.root); + tree.addNode(tree.root, newNode); + } + + const isSetted = ref(props.modelValue && props.modelValue !== ''); + + const conditionString = computed(() => { + return tree.buildConditionString(tree.root); + }); + + const showDg = () => { + show.value = true; + }; + + const onClosed = (val: string) => { + if (val == 'OK') { + const conditionJson = tree.toJson(); + isSetted.value = true; + emit('update:modelValue', conditionJson); + } + }; + + watchEffect(() => { + const conditionJson = tree.toJson(); + emit('update:modelValue', conditionJson); + }); + + return { + appDg, + isSetted, + show, + showDg, + onClosed, + tree, + conditionString + }; + } +}); + diff --git a/frontend/src/components/right/DataProcessing.vue b/frontend/src/components/right/DataProcessing.vue new file mode 100644 index 0000000..87ceb24 --- /dev/null +++ b/frontend/src/components/right/DataProcessing.vue @@ -0,0 +1,95 @@ + + + + \ No newline at end of file diff --git a/frontend/src/components/right/PropertyList.vue b/frontend/src/components/right/PropertyList.vue index 1c7357c..f19bf98 100644 --- a/frontend/src/components/right/PropertyList.vue +++ b/frontend/src/components/right/PropertyList.vue @@ -1,7 +1,7 @@ @@ -21,6 +21,7 @@ import ConditionInput from '../right/ConditionInput.vue'; import EventSetter from '../right/EventSetter.vue'; import ColorPicker from './ColorPicker.vue'; import NumInput from './NumInput.vue'; +import DataProcessing from './DataProcessing.vue'; import { IActionNode,IActionProperty,IProp } from 'src/types/ActionTypes'; export default defineComponent({ @@ -35,7 +36,8 @@ export default defineComponent({ ConditionInput, EventSetter, ColorPicker, - NumInput + NumInput, + DataProcessing }, props: { nodeProps: { @@ -50,7 +52,7 @@ export default defineComponent({ setup(props, context) { const properties=ref(props.nodeProps); const connectProps=(props:IProp)=>{ - const connProps:any={}; + const connProps:any={context:properties}; 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); From b25c17ab53a848f5692f113c6c3c1177e310d87f Mon Sep 17 00:00:00 2001 From: Mouriya Date: Mon, 13 May 2024 16:11:52 +0900 Subject: [PATCH 04/18] =?UTF-8?q?css=E3=81=A8js=E3=82=921=E3=81=A4?= =?UTF-8?q?=E3=81=AE=E3=83=95=E3=82=A1=E3=82=A4=E3=83=AB=E3=81=AB=E3=81=BE?= =?UTF-8?q?=E3=81=A8=E3=82=81=E3=82=8B=E3=81=9F=E3=82=81=E3=81=AEvite?= =?UTF-8?q?=E3=83=97=E3=83=A9=E3=82=B0=E3=82=A4=E3=83=B3=E3=82=92=E8=BF=BD?= =?UTF-8?q?=E5=8A=A0=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- plugin/kintone-addins/package.json | 13 +++++---- .../src/actions/auto-numbering.css | 24 ++++++++++++++++ .../src/actions/auto-numbering.ts | 2 ++ .../kintone-addins/src/actions/button-add.css | 0 .../kintone-addins/src/actions/button-add.ts | 27 ++---------------- plugin/kintone-addins/vite.config.js | 28 +++++++++++++------ 6 files changed, 56 insertions(+), 38 deletions(-) create mode 100644 plugin/kintone-addins/src/actions/auto-numbering.css create mode 100644 plugin/kintone-addins/src/actions/button-add.css diff --git a/plugin/kintone-addins/package.json b/plugin/kintone-addins/package.json index c3e25c8..cca566d 100644 --- a/plugin/kintone-addins/package.json +++ b/plugin/kintone-addins/package.json @@ -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" } } diff --git a/plugin/kintone-addins/src/actions/auto-numbering.css b/plugin/kintone-addins/src/actions/auto-numbering.css new file mode 100644 index 0000000..573550c --- /dev/null +++ b/plugin/kintone-addins/src/actions/auto-numbering.css @@ -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; +} \ No newline at end of file diff --git a/plugin/kintone-addins/src/actions/auto-numbering.ts b/plugin/kintone-addins/src/actions/auto-numbering.ts index 93b0bc9..715cb1d 100644 --- a/plugin/kintone-addins/src/actions/auto-numbering.ts +++ b/plugin/kintone-addins/src/actions/auto-numbering.ts @@ -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); } diff --git a/plugin/kintone-addins/src/actions/button-add.css b/plugin/kintone-addins/src/actions/button-add.css new file mode 100644 index 0000000..e69de29 diff --git a/plugin/kintone-addins/src/actions/button-add.ts b/plugin/kintone-addins/src/actions/button-add.ts index 27e974a..81a3bbf 100644 --- a/plugin/kintone-addins/src/actions/button-add.ts +++ b/plugin/kintone-addins/src/actions/button-add.ts @@ -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 = $(" diff --git a/frontend/src/components/ConditionEditor/NodeCondition.vue b/frontend/src/components/ConditionEditor/NodeCondition.vue index c684992..943fdab 100644 --- a/frontend/src/components/ConditionEditor/NodeCondition.vue +++ b/frontend/src/components/ConditionEditor/NodeCondition.vue @@ -66,7 +66,7 @@
-
+
- +
- \ No newline at end of file + diff --git a/frontend/src/components/right/SelectBox.vue b/frontend/src/components/right/SelectBox.vue index 70f991c..21b4738 100644 --- a/frontend/src/components/right/SelectBox.vue +++ b/frontend/src/components/right/SelectBox.vue @@ -1,11 +1,12 @@