Merged PR 98: 階層化ドロップダウンの実装完了

階層化ドロップダウンの実装完了しました。 Related work items: #227
2024-09-24 01:31:02 +00:00
parent 138ede6191 f30ffaa137
commit ae67ec8751
15 changed files with 1059 additions and 60 deletions
--- a/plugin/kintone-addins/src/actions/auto-lookup.scss
+++ b/plugin/kintone-addins/src/actions/auto-lookup.scss
@@ -1,51 +1,3 @@
-// @import 'bootstrap/scss/bootstrap';
-@import "bootstrap/scss/functions";
-@import "bootstrap/scss/variables";
-@import "bootstrap/scss/variables-dark";
-@import "bootstrap/scss/maps";
-@import "bootstrap/scss/mixins";
-@import "bootstrap/scss/root";
-.bs-scope{
-    // Required
-    @import "bootstrap/scss/utilities";
-    @import "bootstrap/scss/reboot";
-    @import "bootstrap/scss/type";
-    @import "bootstrap/scss/images";
-    @import "bootstrap/scss/containers";
-    @import "bootstrap/scss/grid";
-    // @import "bootstrap/scss/tables";
-    // @import "bootstrap/scss/forms";
-    @import "bootstrap/scss/buttons";
-    @import "bootstrap/scss/transitions";
-    @import "bootstrap/scss/dropdown";
-    // @import "bootstrap/scss/button-group";
-    // @import "bootstrap/scss/nav";
-    // @import "bootstrap/scss/navbar"; // Requires nav
-    @import "bootstrap/scss/card";
-    // @import "bootstrap/scss/breadcrumb";
-    // @import "bootstrap/scss/accordion";
-    // @import "bootstrap/scss/pagination";
-    // @import "bootstrap/scss/badge";
-    // @import "bootstrap/scss/alert";
-    // @import "bootstrap/scss/progress";
-    // @import "bootstrap/scss/list-group";
-    @import "bootstrap/scss/close";
-    // @import "bootstrap/scss/toasts";
-    @import "bootstrap/scss/modal"; // Requires transitions
-    // @import "bootstrap/scss/tooltip";
-    @import "bootstrap/scss/popover";
-    // @import "bootstrap/scss/carousel";
-    @import "bootstrap/scss/spinners";
-    @import "bootstrap/scss/offcanvas"; // Requires transitions
-    // @import "bootstrap/scss/placeholders";
-
-    // Helpers
-    // @import "bootstrap/scss/helpers";
-
-    // Utilities
-    @import "bootstrap/scss/utilities/api";
-}
-
 .modal-backdrop {
    --bs-backdrop-zindex: 1050;
    --bs-backdrop-bg: #000;
--- a/plugin/kintone-addins/src/actions/bootstrap.scss
+++ b/plugin/kintone-addins/src/actions/bootstrap.scss
@@ -0,0 +1,47 @@
+// @import 'bootstrap/scss/bootstrap';
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/root";
+.bs-scope{
+    // Required
+    @import "bootstrap/scss/utilities";
+    @import "bootstrap/scss/reboot";
+    @import "bootstrap/scss/type";
+    @import "bootstrap/scss/images";
+    @import "bootstrap/scss/containers";
+    @import "bootstrap/scss/grid";
+    // @import "bootstrap/scss/tables";
+    @import "bootstrap/scss/forms";
+    @import "bootstrap/scss/buttons";
+    @import "bootstrap/scss/transitions";
+    @import "bootstrap/scss/dropdown";
+    // @import "bootstrap/scss/button-group";
+    // @import "bootstrap/scss/nav";
+    // @import "bootstrap/scss/navbar"; // Requires nav
+    @import "bootstrap/scss/card";
+    // @import "bootstrap/scss/breadcrumb";
+    // @import "bootstrap/scss/accordion";
+    // @import "bootstrap/scss/pagination";
+    // @import "bootstrap/scss/badge";
+    // @import "bootstrap/scss/alert";
+    // @import "bootstrap/scss/progress";
+    // @import "bootstrap/scss/list-group";
+    @import "bootstrap/scss/close";
+    // @import "bootstrap/scss/toasts";
+    @import "bootstrap/scss/modal"; // Requires transitions
+    // @import "bootstrap/scss/tooltip";
+    @import "bootstrap/scss/popover";
+    // @import "bootstrap/scss/carousel";
+    @import "bootstrap/scss/spinners";
+    @import "bootstrap/scss/offcanvas"; // Requires transitions
+    // @import "bootstrap/scss/placeholders";
+
+    // Helpers
+    // @import "bootstrap/scss/helpers";
+
+    // Utilities
+    @import "bootstrap/scss/utilities/api";
+}
--- a/plugin/kintone-addins/src/actions/cascading-dropdown.scss
+++ b/plugin/kintone-addins/src/actions/cascading-dropdown.scss
@@ -0,0 +1,18 @@
+.alc-loading {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, .5);
+    display: flex;
+    z-index: 9999;
+}
+  
+.alc-loading > div {
+    margin: auto;
+}
+
+.alc-dnone{
+    display: none;
+}
--- a/plugin/kintone-addins/src/actions/cascading-dropdown.ts
+++ b/plugin/kintone-addins/src/actions/cascading-dropdown.ts
@@ -0,0 +1,80 @@
+import {
+  IAction,
+  IActionResult,
+  IActionNode,
+  IActionProperty,
+  IContext,
+} from "../types/ActionTypes";
+import { actionAddins } from ".";
+// import { KintoneRestAPIClient } from "@kintone/rest-api-client";
+// import { getPageState } from "../util/url";
+import { Snipper } from '../util/ui-helper';
+import { DropDownManager,ICascadingDropDown, IFieldList} from '../types/CascadingDropDownManager'
+import "./cascading-dropdown.scss";
+// import { Record as KTRecord } from "@kintone/rest-api-client/lib/src/client/types";
+
+// 階層化ドロップダウンメニューのプロパティインターフェース
+interface ICascadingDropDownProps {
+  displayName: string;
+  cascadingDropDown: ICascadingDropDown;
+}
+
+/**
+ * 階層化ドロップダウンのクラス実装
+ */
+export class CascadingDropDownAction implements IAction {
+  name: string;
+  actionProps: IActionProperty[];
+  props: ICascadingDropDownProps;
+
+  constructor() {
+    this.name = "階層化ドロップダウン";
+    this.actionProps = [];
+    this.props = {} as ICascadingDropDownProps;
+    this.register();
+  }
+
+  /**
+   * アクションのプロセス実行
+   * @param actionNode 
+   * @param event 
+   * @param context 
+   * @returns 
+   */
+  async process(
+    actionNode: IActionNode,
+    event: any,
+    context: IContext
+  ): Promise<IActionResult> {
+    this.actionProps = actionNode.actionProps;
+    this.props = actionNode.ActionValue as ICascadingDropDownProps;
+
+    const result: IActionResult = { canNext: true, result: "" };
+    const snipper = new Snipper("body");
+    const dropDownManager= new DropDownManager(this.props.cascadingDropDown,event);
+    try {
+      if (!this.props) return result;
+      const appId = this.props.cascadingDropDown.dropDownApp.id;
+      //snipper表示
+      snipper.showSpinner();
+      await dropDownManager.handlePageState(appId);
+      snipper.hideSpinner();
+      return result;
+    } catch (error) {
+      console.error(
+        "CascadingDropDownAction プロセス中にエラーが発生しました:",
+        error
+      );
+      context.errors.handleError(error, actionNode);
+      return { canNext: false, result: "" };
+    }finally{
+      snipper.removeSpinner();
+    }
+  }
+
+  register(): void {
+    actionAddins[this.name] = this;
+  }
+}
+
+new CascadingDropDownAction();
--- a/plugin/kintone-addins/src/actions/index.ts
+++ b/plugin/kintone-addins/src/actions/index.ts
@@ -1,2 +1,3 @@
 import { IAction } from "../types/ActionTypes";
+import './bootstrap.scss'
 export const actionAddins :Record<string,IAction>={};