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

2024-03-01 22:47:37 +09:00
parent 72608a8ffd
commit 03904a4e35
19 changed files with 676 additions and 1419 deletions
--- a/plugin/kintone-addins/src/actions/button-add.ts
+++ b/plugin/kintone-addins/src/actions/button-add.ts
@@ -0,0 +1,107 @@
+
+import { actionAddins } from ".";
+import $ from 'jquery';
+import { IAction, IActionProperty, IActionNode, IActionResult } from "../types/ActionTypes";
+/**
+ * ボタン配置属性定義
+ */
+interface IButtonAddProps {
+    //ボタン表示名
+    buttonName: string;
+    //配置位置
+    position: string;
+    //イベント名
+    eventName:string
+}   
+
+export class ButtonAddAction implements IAction {
+    name: string; 
+    actionProps: IActionProperty[]; 
+    props: IButtonAddProps;
+    constructor() { 
+        this.name = "ボタンの配置";
+        this.actionProps = [];
+        this.props = {
+            buttonName: '',
+            position: '',
+            eventName:''
+        }
+        this.register();
+    }
+
+    /**
+     * アクションの実行を呼び出す
+     * @param actionNode 
+     * @param event 
+     * @returns 
+     */
+    async process(actionNode: IActionNode, event: any): Promise<IActionResult> { 
+        let result = { 
+            canNext: true,
+            result: false
+        };
+        try { 
+            this.actionProps = actionNode.actionProps;
+            if (!('buttonName' in actionNode.ActionValue) && !('position' in actionNode.ActionValue)) { 
+                return result
+            }
+            this.props = actionNode.ActionValue as IButtonAddProps; 
+            //ボタンを配置する
+            const menuSpace = kintone.app.record.getHeaderMenuSpaceElement();
+            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);
+            }
+            const button =$(`<button id='${this.props.eventName}' class='alc-button-normal' >${this.props.buttonName}</button>`);
+            if(this.props.position==="一番左に追加する"){
+                $(menuSpace).prepend(button);
+            }else{
+                $(menuSpace).append(button);
+            }
+            const clickEventName = `${event.type}.customButtonClick.${this.props.eventName}`;
+            button.on("click",()=>{
+                $(document).trigger(clickEventName,event);
+            });
+            return result;
+        } catch (error) {
+            event.error = error;
+            console.error(error);
+            result.canNext = false;
+            return result;
+        }
+    }
+  
+
+    register(): void {
+        actionAddins[this.name] = this;
+    }
+
+}
+new ButtonAddAction();
--- a/plugin/kintone-addins/src/actions/error-show.ts
+++ b/plugin/kintone-addins/src/actions/error-show.ts
@@ -31,7 +31,7 @@ export class ErrorShowAction implements IAction {
     * @returns 
     */
    async process(actionNode: IActionNode, event: any, context: IContext): Promise<IActionResult> { //异步处理某函数下的：xx属性
-        let result = { //定义一个能否继续往下实行的开关
+        let result = { 
            canNext: true,
            result: false
        };
@@ -40,10 +40,10 @@ export class ErrorShowAction implements IAction {
            if (!('message' in actionNode.ActionValue) && !('condition' in actionNode.ActionValue)) { //如果message以及condition两者都不存在的情况下return
                return result
            }
-            this.props = actionNode.ActionValue as IErrorShowProps; //将TS的action.actionvalue as转换为interface需要且定义的js部分
+            this.props = actionNode.ActionValue as IErrorShowProps; 
            const conditionResult = this.getConditionResult(context); 
            if (conditionResult) {
-                event.error = this.props.message
+                event.error = this.props.message;
            } else {
                result = {
                    canNext: false,
--- a/plugin/kintone-addins/src/index.ts
+++ b/plugin/kintone-addins/src/index.ts
@@ -14,14 +14,58 @@ declare const alcflow : {
 };

 $(function (){
+    const getChangeEvents=(events:string[])=>{
+      return events.filter((event)=>event.includes(".change."));
+    }
+    const getClickEvents=(events:string[])=>{
+      return events.filter((event)=>event.includes(".customButtonClick."));
+    }
+    const getKintoneEvents=(events:string[])=>{
+      return events.filter((event)=>{
+        return !event.includes(".customButtonClick.") && !event.includes(".change.")
+      });
+    }
    const events=Object.keys(alcflow);
-    kintone.events.on(events,async (event:any)=>{
-      const flowinfo = alcflow[event.type];
-      const flow=ActionFlow.fromJSON(flowinfo.content);
-      if(flow!==undefined){
-        const process = new ActionProcess(event.type,flow,event);
-        await process.exec();
-      }
-      return event;
-    });
+    const changeEvents = getChangeEvents(events);
+    const clickEvents = getClickEvents(events);
+    const kintoneEvents = getKintoneEvents(events);
+    if(kintoneEvents.length>0 ){
+      //通常Kintoneイベントをバンド
+      kintone.events.on(kintoneEvents,async (event:any)=>{
+        const flowinfo = alcflow[event.type];
+        const flow=ActionFlow.fromJSON(flowinfo.content);
+        if(flow!==undefined){
+          const process = new ActionProcess(event.type,flow,event);
+          await process.exec();
+        }
+        return event;
+      });
+    }
+    if(changeEvents.length>0){
+      //値変更イベントをバンドする
+      kintone.events.on(changeEvents,(event:any)=>{
+        const flowinfo = alcflow[event.type];
+        const flow=ActionFlow.fromJSON(flowinfo.content);
+        if(flow!==undefined){
+          const process = new ActionProcess(event.type,flow,event);
+          process.exec();
+        }
+        return event;
+      });
+    }
+    if(clickEvents.length>0){
+      clickEvents.forEach((eventName:string)=>{
+        $(document).on(eventName,async ()=>{
+          const event=kintone.app.record.get();
+          const flowinfo = alcflow[eventName];
+          const flow=ActionFlow.fromJSON(flowinfo.content);
+          if(flow!==undefined){
+            const process = new ActionProcess(eventName,flow,event);
+            await process.exec();
+          }
+          const record = event.record;
+          kintone.app.record.set({record})
+        });
+      });
+    }
 });
--- a/plugin/kintone-addins/src/types/ActionTypes.ts
+++ b/plugin/kintone-addins/src/types/ActionTypes.ts
@@ -257,7 +257,7 @@ export class ActionFlow implements IActionFlow {
    const actionNodes = parsedObject.actionNodes.map((node: any) => {
      const nodeClass = !node.isRoot ? new ActionNode(node)
        : new RootAction(node);
-      nodeClass.nextNodeIds = new Map(node.nextNodeIds);
+      nodeClass.nextNodeIds = new Map<string,string>(Object.entries(node.nextNodeIds));
      nodeClass.prevNodeId = node.prevNodeId;
      nodeClass.id = node.id;
      return nodeClass;
--- a/plugin/kintone-addins/src/types/Conditions.ts
+++ b/plugin/kintone-addins/src/types/Conditions.ts
@@ -324,7 +324,7 @@ export class ConditionTree {
   */
  getObjectValue(object:any,context:IContext){
    if(!object || typeof object!=="object" || !("objectType" in object)){
-        return object;
+        return undefined;
    }
    if(object.objectType==='field'){
      const fieldValue = context.record[object.code];
@@ -402,6 +402,12 @@ export class ConditionTree {
   */
  compare(operator: Operator, targetValue: any, value: any): boolean {
    // targetValue は日期时，value も日期に変換して比較する
+    if(targetValue===undefined || targetValue===null||targetValue===''){
+      if(value===undefined || value===null||value===''){
+        targetValue='';
+        value='';
+      }
+    }
    if (targetValue instanceof Date) {
      const dateValue = new Date(value);
      if (!isNaN(dateValue.getTime())) {
--- a/plugin/kintone-addins/src/types/action-process.ts
+++ b/plugin/kintone-addins/src/types/action-process.ts
@@ -4,6 +4,7 @@ import '../actions/must-input';
 import '../actions/auto-numbering';
 import '../actions/field-shown';
 import '../actions/error-show';
+import '../actions/button-add';
 import { ActionFlow,IActionFlow, IActionResult,IContext } from "./ActionTypes";

 export class ActionProcess{