Migrate view_detail to plugin architecture and fix dataview crash

AppBuilder/platform/plugins/included/view_dataview/FNAbviewdataview.js

@@ -4,13 +4,14 @@ import FNABViewDetail from "../view_detail/FNAbviewdetail.js";
 // FNAbviewdataview Web
 // A web side import for an ABView.
 //
-export default function FNAbviewdataview({
-   AB,
-   ABViewComponentPlugin,
-   ABViewContainer,
-   ABViewContainerComponent,
-   ABViewPropertyLinkPage,
-}) {
+export default function FNAbviewdataview(API) {
+   const {
+      AB,
+      ABViewComponentPlugin,
+      ABViewContainerComponent,
+      ABViewPropertyLinkPage,
+   } = API;
+
    const ABAbviewdataviewComponent = FNAbviewdataviewComponent({
       AB,
       ABViewComponentPlugin,
@@ -32,10 +33,10 @@ export default function FNAbviewdataview({
       labelKey: "Data view(plugin)", // {string} the multilingual label key for the class label
    };
 
-   const ABViewDetail = FNABViewDetail({
-      ABViewContainer,
-      ABViewContainerComponent,
-   });
+   const detailViews = FNABViewDetail(API);
+   const ABViewDetail = Array.isArray(detailViews)
+      ? detailViews.find((v) => v.common().key === "detail")
+      : detailViews;
 
    class ABViewDataviewCore extends ABViewDetail {
       /**

AppBuilder/platform/plugins/included/view_detail/DetailComponents.js

@@ -0,0 +1,8 @@
+export { default as FNAbviewdetailCheckbox } from "./FNAbviewdetailCheckbox.js";
+export { default as FNAbviewdetailConnect } from "./FNAbviewdetailConnect.js";
+export { default as FNAbviewdetailCustom } from "./FNAbviewdetailCustom.js";
+export { default as FNAbviewdetailImage } from "./FNAbviewdetailImage.js";
+export { default as FNAbviewdetailItem } from "./FNAbviewdetailItem.js";
+export { default as FNAbviewdetailSelectivity } from "./FNAbviewdetailSelectivity.js";
+export { default as FNAbviewdetailText } from "./FNAbviewdetailText.js";
+export { default as FNAbviewdetailTree } from "./FNAbviewdetailTree.js";

AppBuilder/platform/plugins/included/view_detail/FNAbviewdetail.js

@@ -1,86 +1,54 @@
-import FNAbviewdetailComponent from "./FNAbviewdetailComponent.js";
-
-// Detail view plugin: replaces the original ABViewDetail / ABViewDetailCore.
-// All logic from both Core and platform is contained in this file.
-export default function FNAbviewdetail({
-   ABViewContainer,
-   ABViewContainerComponent,
-}) {
-   const ABViewDetailComponent = FNAbviewdetailComponent({
+import * as dComponents from "./DetailComponents.js";
+import FNAbviewdetailComponent from "./viewComponent/FNAbviewdetailComponent.js";
+import FNAbviewdetailCore from "./core/ABViewDetailCore.js";
+
+export default function FNAbviewdetail(API) {
+   const {
+      ABViewComponentPlugin,
+      ABViewPlugin,
+      ABViewWidgetPlugin,
+      ABViewContainer,
       ABViewContainerComponent,
-   });
-
-   const ABViewDetailDefaults = {
-      key: "detail",
-      icon: "file-text-o",
-      labelKey: "Detail(plugin)",
+      ABViewPropertyAddPage,
+      AB,
+   } = API;
+
+   let DetailAPI = {
+      AB,
+      ABViewComponentPlugin,
+      ABViewPlugin,
+      ABViewPropertyAddPage,
+      ABViewWidget: ABViewWidgetPlugin,
    };
 
-   const ABViewDetailPropertyComponentDefaults = {
-      dataviewID: null,
-      showLabel: true,
-      labelPosition: "left",
-      labelWidth: 120,
-      height: 0,
-   };
+   // 1. Initialize Base Item
+   const { FNAbviewdetailItem, ...otherDComponents } = dComponents;
 
-   return class ABViewDetailPlugin extends ABViewContainer {
-      /**
-       * @param {obj} values  key=>value hash of ABView values
-       * @param {ABApplication} application the application object this view is under
-       * @param {ABView} parent the ABView this view is a child of. (can be null)
-       */
-      constructor(values, application, parent, defaultValues) {
-         super(
-            values,
-            application,
-            parent,
-            defaultValues ?? ABViewDetailDefaults
-         );
-      }
+   DetailAPI.ABViewDetailItem = FNAbviewdetailItem(DetailAPI);
 
-      static getPluginType() {
-         return "view";
-      }
+   // Store ABViewDetailItem for 'instanceof' checks in other plugins
+   if (AB && AB.Class) {
+      AB.Class.ABViewDetailItem = DetailAPI.ABViewDetailItem;
+   }
 
-      static getPluginKey() {
-         return this.common().key;
-      }
+   DetailAPI.ABViewDetailItemComponent =
+      DetailAPI.ABViewDetailItem.ABViewDetailItemComponent;
+   // 2. Initialize Custom/Sub classes
+   const views = Object.values(otherDComponents).map((FNv) => FNv(DetailAPI));
 
-      static common() {
-         return ABViewDetailDefaults;
-      }
+   // 3. Main Detail View Component & Class
+   const ABViewDetailComponent = FNAbviewdetailComponent(
+      ABViewContainerComponent
+   );
+   const ABViewDetailCore = FNAbviewdetailCore(ABViewContainer);
 
-      static defaultValues() {
-         return ABViewDetailPropertyComponentDefaults;
+   const ABViewDetail = class ABViewDetail extends ABViewDetailCore {
+      static getPluginKey() {
+         return this.common().key;
       }
 
-      /**
-       * @method fromValues()
-       * Initialize this object with the given set of values.
-       * @param {obj} values
-       */
-      fromValues(values) {
-         super.fromValues(values);
-
-         this.settings.labelPosition =
-            this.settings.labelPosition ||
-            ABViewDetailPropertyComponentDefaults.labelPosition;
-
-         this.settings.showLabel = JSON.parse(
-            this.settings.showLabel != null
-               ? this.settings.showLabel
-               : ABViewDetailPropertyComponentDefaults.showLabel
-         );
-
-         this.settings.labelWidth = parseInt(
-            this.settings.labelWidth ||
-               ABViewDetailPropertyComponentDefaults.labelWidth
-         );
-         this.settings.height = parseInt(
-            this.settings.height ??
-               ABViewDetailPropertyComponentDefaults.height
-         );
+      static getPluginType() {
+         return "view";
       }
 
       /**
@@ -107,7 +75,7 @@ export default function FNAbviewdetail({
          newView.settings.fieldId = field.id;
          newView.settings.labelWidth =
             this.settings.labelWidth ||
-            ABViewDetailPropertyComponentDefaults.labelWidth;
+            this.constructor.defaultValues().labelWidth;
          newView.settings.alias = field.alias;
          newView.position.y = yPosition;
 
@@ -120,6 +88,10 @@ export default function FNAbviewdetail({
        * Return a UI component based upon this view.
        * @return {obj} UI component
        */
+      static get Component() {
+         return ABViewDetailComponent;
+      }
+
       component() {
          return new ABViewDetailComponent(this);
       }
@@ -135,4 +107,8 @@ export default function FNAbviewdetail({
          }
       }
    };
+
+   views.push(ABViewDetail);
+
+   return views;
 }

AppBuilder/platform/plugins/included/view_detail/FNAbviewdetailCheckbox.js

@@ -0,0 +1,32 @@
+import FNAbviewdetailCheckboxComponent from "./viewComponent/FNAbviewdetailCheckboxComponent.js";
+import FNAbviewdetailCheckboxCoreFactory from "./core/ABViewDetailCheckboxCore.js";
+
+export default function FNAbviewdetailCheckbox({
+   ABViewComponentPlugin,
+   ABViewDetailItemComponent,
+   ABViewDetailItem,
+}) {
+   const ABViewDetailCheckboxCore =
+      FNAbviewdetailCheckboxCoreFactory(ABViewDetailItem);
+   const ABViewDetailCheckboxComponent = FNAbviewdetailCheckboxComponent(
+      ABViewDetailItemComponent
+   );
+
+   return class ABViewDetailCheckbox extends ABViewDetailCheckboxCore {
+      static getPluginKey() {
+         return this.common().key;
+      }
+
+      static getPluginType() {
+         return "view";
+      }
+
+      static get Component() {
+         return ABViewDetailCheckboxComponent;
+      }
+
+      component() {
+         return new ABViewDetailCheckboxComponent(this);
+      }
+   };
+}

AppBuilder/platform/plugins/included/view_detail/FNAbviewdetailConnect.js

@@ -0,0 +1,45 @@
+import FNAbviewdetailConnectComponent from "./viewComponent/FNAbviewdetailConnectComponent.js";
+import FNAbviewdetailConnectCoreFactory from "./core/ABViewDetailConnectCore.js";
+
+export default function FNAbviewdetailConnect({
+   ABViewComponentPlugin,
+   ABViewDetailItemComponent,
+   ABViewDetailItem,
+   ABViewPropertyAddPage,
+}) {
+   const ABViewDetailConnectCore =
+      FNAbviewdetailConnectCoreFactory(ABViewDetailItem);
+   const ABViewDetailConnectComponent = FNAbviewdetailConnectComponent(
+      ABViewDetailItemComponent
+   );
+
+   return class ABViewDetailConnect extends ABViewDetailConnectCore {
+      static getPluginKey() {
+         return this.common().key;
+      }
+
+      static getPluginType() {
+         return "view";
+      }
+
+      fromValues(values) {
+         super.fromValues(values);
+         this.addPageTool.fromSettings(this.settings);
+      }
+
+      static get Component() {
+         return ABViewDetailConnectComponent;
+      }
+
+      component() {
+         return new ABViewDetailConnectComponent(this);
+      }
+
+      get addPageTool() {
+         if (this.__addPageTool == null)
+            this.__addPageTool = new ABViewPropertyAddPage();
+
+         return this.__addPageTool;
+      }
+   };
+}

AppBuilder/platform/plugins/included/view_detail/FNAbviewdetailCustom.js

@@ -0,0 +1,32 @@
+import FNAbviewdetailCustomComponent from "./viewComponent/FNAbviewdetailCustomComponent.js";
+import FNAbviewdetailCustomCoreFactory from "./core/ABViewDetailCustomCore.js";
+
+export default function FNAbviewdetailCustom({
+   ABViewComponentPlugin,
+   ABViewDetailItemComponent,
+   ABViewDetailItem,
+}) {
+   const ABViewDetailCustomCore =
+      FNAbviewdetailCustomCoreFactory(ABViewDetailItem);
+   const ABViewDetailCustomComponent = FNAbviewdetailCustomComponent(
+      ABViewDetailItemComponent
+   );
+
+   return class ABViewDetailCustom extends ABViewDetailCustomCore {
+      static getPluginKey() {
+         return this.common().key;
+      }
+
+      static getPluginType() {
+         return "view";
+      }
+
+      static get Component() {
+         return ABViewDetailCustomComponent;
+      }
+
+      component() {
+         return new ABViewDetailCustomComponent(this);
+      }
+   };
+}

AppBuilder/platform/plugins/included/view_detail/FNAbviewdetailImage.js

@@ -0,0 +1,32 @@
+import FNAbviewdetailImageComponent from "./viewComponent/FNAbviewdetailImageComponent.js";
+import FNAbviewdetailImageCoreFactory from "./core/ABViewDetailImageCore.js";
+
+export default function FNAbviewdetailImage({
+   ABViewComponentPlugin,
+   ABViewDetailItemComponent,
+   ABViewDetailItem,
+}) {
+   const ABViewDetailImageCore =
+      FNAbviewdetailImageCoreFactory(ABViewDetailItem);
+   const ABViewDetailImageComponent = FNAbviewdetailImageComponent(
+      ABViewDetailItemComponent
+   );
+
+   return class ABViewDetailImage extends ABViewDetailImageCore {
+      static getPluginKey() {
+         return this.common().key;
+      }
+
+      static getPluginType() {
+         return "view";
+      }
+
+      static get Component() {
+         return ABViewDetailImageComponent;
+      }
+
+      component() {
+         return new ABViewDetailImageComponent(this);
+      }
+   };
+}

AppBuilder/platform/plugins/included/view_detail/FNAbviewdetailItem.js

@@ -0,0 +1,27 @@
+import FNAbviewdetailItemComponent from "./viewComponent/FNAbviewdetailItemComponent.js";
+import FNAbviewdetailItemCoreFactory from "./core/ABViewDetailItemCore.js";
+
+export default function FNAbviewdetailItem({
+   ABViewComponentPlugin,
+   ABViewWidget,
+}) {
+   const ABViewDetailItemCore = FNAbviewdetailItemCoreFactory(ABViewWidget);
+   const ABViewDetailItemComponent = FNAbviewdetailItemComponent(
+      ABViewComponentPlugin
+   );
+
+   const ABViewDetailItem = class ABViewDetailItem extends ABViewDetailItemCore {
+      static get Component() {
+         return ABViewDetailItemComponent;
+      }
+
+      component() {
+         return new ABViewDetailItemComponent(this);
+      }
+   };
+
+   // Attach the component class so subclasses can access it
+   ABViewDetailItem.ABViewDetailItemComponent = ABViewDetailItemComponent;
+
+   return ABViewDetailItem;
+}