イベント処理追加

src/apps/index.ts

@@ -0,0 +1,8 @@
+import { eventInit } from "@/config/event";
+
+export const setup = (callback: VoidFunction) => {
+  console.info("script build at " + process.env.BUILD_TIME);
+
+  eventInit();
+  callback();
+};

src/apps/定期申込予約/index.tsx

@@ -12,57 +12,63 @@ import { 入金予定結果フィールド名 } from "@/types/入金予定結果
 import { 定期申込予約 } from "@/types/定期申込予約";
 import { 申込 } from "./自動承認";
 import { apptemplate } from "@/common/app-template";
+import { setup } from "..";
+import { KintoneEvent } from "@/common/kintone-event";
+import { 契約情報更新イベント } from "@/event/契約情報更新";
 
-(() => {
-  console.info("script build at " + process.env.BUILD_TIME);
+setup(() => {
+  kintone.events.on(
+    [KintoneEvent.詳細.レコード詳細画面を表示した後],
+    (event) => {
+      const record: 定期申込予約 = event.record;
 
-  kintone.events.on("app.record.detail.show", (event) => {
-    const record: 定期申込予約 = event.record;
+      if (!record.auto_confirm_status.value) {
+        setHeaderButton(
+          "自動承認",
+          apptemplate(async ({ setEvent, needReloadAtEnd }) => {
+            const confirm = await ShowConfirmDialog({
+              text: "承認しますか",
+            });
+            if (!confirm.isConfirmed) return;
 
-    if (!record.auto_confirm_status.value) {
-      setHeaderButton(
-        "自動承認",
-        apptemplate(async () => {
-          const confirm = await ShowConfirmDialog({
-            text: "承認しますか",
-          });
-          if (!confirm.isConfirmed) return;
+            const entry = new 申込(record);
+            await entry.初期化();
+            await entry.選定();
 
-          const entry = new 申込(record);
-          await entry.初期化();
-          await entry.選定();
+            await SuccessDialog.fire();
 
-          await SuccessDialog.fire();
+            await WarningDialog.fire({
+              timer: 2000,
+              timerProgressBar: true,
+              text: "初回請求データを作成してください",
+            });
+            const 契約 = entry.作成後契約取得();
+            if (!契約) throw new Error();
 
-          await WarningDialog.fire({
-            timer: 2000,
-            timerProgressBar: true,
-            text: "初回請求データを作成してください",
-          });
-          const 契約 = entry.作成後契約取得();
-          if (!契約) throw new Error();
+            const param = new URLSearchParams({
+              [入金予定結果フィールド名.車室契約情報レコード番号]:
+                契約.$id.value,
+              [入金予定結果フィールド名.初回振り込み関連申込レコード番号]:
+                record.$id.value,
+            });
+            {
+              // 入金予定アプリ画面オープン
+              const url = getCreateUrl(AppID.入金予定結果, param);
+              console.log(url, param);
+              window.open(url, "_blank");
+            }
+            {
+              // 車室契約情報アプリ画面オープン
+              const url = getDetailUrl(AppID.車室契約情報, 契約.$id.value);
+              console.log(url, param);
+              window.open(url, "_blank");
+            }
 
-          const param = new URLSearchParams({
-            [入金予定結果フィールド名.車室契約情報レコード番号]: 契約.$id.value,
-            [入金予定結果フィールド名.初回振り込み関連申込レコード番号]:
-              record.$id.value,
-          });
-          {
-            // 入金予定アプリ画面オープン
-            const url = getCreateUrl(AppID.入金予定結果, param);
-            console.log(url, param);
-            window.open(url, "_blank");
-          }
-          {
-            // 車室契約情報アプリ画面オープン
-            const url = getDetailUrl(AppID.車室契約情報, 契約.$id.value);
-            console.log(url, param);
-            window.open(url, "_blank");
-          }
-
-          location.reload();
-        })
-      );
+            setEvent(new 契約情報更新イベント().getEvent(契約));
+            needReloadAtEnd(true);
+          })
+        );
+      }
     }
-  });
-})();
+  );
+});

src/apps/定期申込予約/自動承認.ts

@@ -1,6 +1,5 @@
 import { AppID } from "@/common/appids";
 import { makeRecordData } from "@/common/rest-api-client";
-import { 契約状況同期 } from "@/logic/契約状況同期";
 import { ShowConfirmDialog } from "@/middleware/swal";
 import { getDetailUrl } from "@/rest-api/url";
 import { get定期駐車場プランマスタ } from "@/rest-api/定期駐車場プランマスタ";
@@ -73,11 +72,6 @@ export class 申込 {
 
     // データ保存
     await this.save();
-
-    await 契約状況同期(
-      this.定期申込予約.駐車場.value,
-      Number(target.車室番号.value)
-    );
   }
 
   選定情報取得() {

src/apps/車室契約情報/customize-manifest.json

@@ -0,0 +1,12 @@
+{
+  "app": "",
+  "scope": "ALL",
+  "desktop": {
+    "js": ["dist/車室契約情報.js"],
+    "css":[]
+  },
+  "mobile": {
+    "js": [],
+    "css":[]
+  }
+}

src/apps/車室契約情報/index.ts

@@ -0,0 +1,16 @@
+import { eventHnalder } from "@/common/app-template";
+import { KintoneEvent } from "@/common/kintone-event";
+import { 契約情報更新イベント } from "@/event/契約情報更新";
+import { 車室契約情報 } from "@/types/車室契約情報";
+import { setup } from "..";
+
+setup(() => {
+  kintone.events.on(
+    [KintoneEvent.追加.保存に成功した後, KintoneEvent.編集.保存に成功した後],
+    eventHnalder(async (event, { setEvent }) => {
+      const record = event.record as 車室契約情報;
+
+      setEvent(new 契約情報更新イベント().getEvent(record));
+    })
+  );
+});

src/common/app-template.ts

@@ -1,10 +1,53 @@
+import eventManager from "@/event/manager";
 import { CancelError, Message } from "@/exception";
 import { ErrorDialog } from "@/middleware/swal";
+import bulkRequest from "@/rest-api/bulk";
 
-export const apptemplate = (callback: () => Promise<void>) => {
+export const apptemplate = (
+  callback: (options: {
+    setEvent: (event: Event) => void;
+    needReloadAtEnd: (need: boolean) => void;
+  }) => Promise<void>
+) => {
   return async () => {
     try {
-      await callback();
+      const events: Event[] = [];
+      let needReloadAtEnd = false;
+
+      await callback({
+        setEvent: (event: Event) => {
+          events.push(event);
+        },
+        needReloadAtEnd: (need: boolean) => {
+          needReloadAtEnd = need;
+        },
+      });
+
+      // 保存処理
+      if (!bulkRequest.isSaved()) {
+        await bulkRequest.save();
+      }
+
+      // イベント処理
+      if (events.length !== 0) {
+        console.log("イベント発生");
+        eventManager.init();
+        for (const [index, event] of events.entries()) {
+          window.dispatchEvent(event);
+        }
+        await eventManager.waitEnd();
+        console.log("イベント処理終了");
+      }
+
+      // 保存処理
+      if (!bulkRequest.isSaved()) {
+        await bulkRequest.save();
+      }
+
+      // 再読込
+      if (needReloadAtEnd) {
+        location.reload();
+      }
     } catch (e) {
       if (e instanceof CancelError) {
         console.log("canceled");
@@ -21,10 +64,41 @@ export const apptemplate = (callback: () => Promise<void>) => {
   };
 };
 
-export const eventHnalder = (callback: (event: any) => Promise<any>) => {
+export const eventHnalder = (
+  callback: (
+    event: any,
+    options: { setEvent: (event: Event) => void }
+  ) => Promise<any>
+) => {
   return async (event: any) => {
     try {
-      const ret = await callback(event);
+      const events: Event[] = [];
+      const ret = await callback(event, {
+        setEvent: (event: Event) => {
+          events.push(event);
+        },
+      });
+
+      // 保存処理
+      if (!bulkRequest.isSaved()) {
+        await bulkRequest.save();
+      }
+
+      // イベント処理
+      if (events.length !== 0) {
+        console.log("イベント発生");
+        eventManager.init();
+        for (const [index, event] of events.entries()) {
+          window.dispatchEvent(event);
+        }
+        await eventManager.waitEnd();
+        console.log("イベント処理終了");
+      }
+
+      // 保存処理
+      if (!bulkRequest.isSaved()) {
+        await bulkRequest.save();
+      }
       return ret;
     } catch (e) {
       if (e instanceof CancelError) {

src/common/kintone-event.ts

@@ -18,8 +18,8 @@ export const KintoneEvent = {
   // レコード編集画面
   編集: {
     レコード編集画面を表示した後: "app.record.edit.show",
-    保存するとき: "app.record.edit.show",
-    保存に成功した後: "app.record.edit.success",
+    保存するとき: "app.record.edit.submit",
+    保存に成功した後: "app.record.edit.submit.success",
   },
 } as const;
 

src/config/event.ts

@@ -0,0 +1,10 @@
+import { ModelChangeEvent } from "@/event/base";
+import { 契約情報更新イベント } from "@/event/契約情報更新";
+
+const events: ModelChangeEvent<object>[] = [new 契約情報更新イベント()];
+
+export const eventInit = () => {
+  events.forEach((event) => {
+    event.register();
+  });
+};

src/event/base.ts

@@ -0,0 +1,30 @@
+import eventManager from "./manager";
+
+interface ModelChangeEventParam<T> {
+  record: T;
+}
+
+export abstract class ModelChangeEvent<T extends object> {
+  abstract eventname(): string;
+
+  abstract listener(record: T): Promise<void>;
+
+  register() {
+    const callback = async (event: Event): Promise<void> => {
+      const customEvent = event as CustomEvent<ModelChangeEventParam<T>>;
+      eventManager.start();
+      await this.listener(customEvent.detail.record);
+      eventManager.end();
+    };
+
+    console.log("イベント登録", this.eventname());
+    window.addEventListener(this.eventname(), callback);
+  }
+
+  getEvent(record: T) {
+    const event = new CustomEvent<ModelChangeEventParam<T>>(this.eventname(), {
+      detail: { record },
+    });
+    return event;
+  }
+}

src/event/manager.ts

@@ -0,0 +1,56 @@
+class EventManager {
+  private promise: Promise<void> | null = null;
+  private resolve: VoidFunction | null = null;
+
+  private execCount: number = 0;
+
+  private timer: NodeJS.Timeout | null = null;
+
+  init() {
+    this.clear();
+
+    this.promise = new Promise<void>((resolve) => {
+      this.resolve = resolve;
+    });
+
+    // 一定時間内にイベントの開始を検知しない場合は終了する
+    this.timer = setTimeout(() => {
+      if (this.resolve !== null) {
+        this.resolve();
+      }
+      console.log("イベント発生なし");
+    }, 1000);
+  }
+
+  start() {
+    this.execCount++;
+    if (this.timer !== null) {
+      clearTimeout(this.timer);
+    }
+  }
+
+  end() {
+    this.execCount--;
+    if (this.execCount === 0) {
+      if (this.resolve !== null) {
+        console.log("イベント監視終了");
+        this.resolve();
+      }
+    }
+  }
+
+  waitEnd() {
+    if (this.promise === null) throw new Error("EventManager init不正");
+    return this.promise;
+  }
+
+  clear() {
+    this.promise = null;
+    this.resolve = null;
+    this.execCount = 0;
+    this.timer = null;
+  }
+}
+
+const eventManager = new EventManager();
+export default eventManager;

src/event/契約情報更新.ts

@@ -0,0 +1,14 @@
+import { 車室契約情報 } from "@/types/車室契約情報";
+import { ModelChangeEvent } from "./base";
+import { 契約状況同期 } from "@/logic/契約状況同期";
+
+export class 契約情報更新イベント extends ModelChangeEvent<車室契約情報> {
+  eventname(): string {
+    return "契約情報更新イベント";
+  }
+
+  async listener(record: 車室契約情報): Promise<void> {
+    console.log("同期");
+    await 契約状況同期(record.駐車場名.value, Number(record.車室番号.value));
+  }
+}