Migrate view_detail properties to plugin

src/plugins/web_view_dataview/FNAbviewdataview.js

@@ -2,18 +2,13 @@
 // A properties side import for an ABView.
 //
 
-import FABViewDetail from "../web_view_detail/FNAbviewdetail";
+import FABViewDetail from "../../rootPages/Designer/properties/views/ABViewDetail";
 import ABViewPropertyLinkPage from "../../rootPages/Designer/properties/views/viewProperties/ABViewPropertyLinkPage";
 
-export default function FNAbviewdataviewProperties({
-   AB,
-   // ABViewPropertiesPlugin,
-   // ABUIPlugin,
-}) {
+export default function FNAbviewdataviewProperties({ AB }) {
    const base = "properties_abview_dataview";
 
-   const ABViewDetail = FABViewDetail({ AB });
-   // NOTE: this is another plugin, so pass in { AB }
+   const ABViewDetail = FABViewDetail(AB);
 
    const LinkPageProperty = ABViewPropertyLinkPage(AB, base);
    const uiConfig = AB.Config.uiSettings();
@@ -87,7 +82,7 @@ export default function FNAbviewdataviewProperties({
 
          $$(ids.xCount).setValue(
             view.settings.xCount ||
-               ABViewDataviewPropertyComponentDefaults.xCount
+            ABViewDataviewPropertyComponentDefaults.xCount
          );
 
          this.linkPageComponent.viewLoad(view);

src/plugins/web_view_detail/FNAbviewdetail.js

@@ -1,24 +1,27 @@
-// FNAbviewdetail Properties
-// A properties side import for an ABView.
-//
+import FNAbviewDetailCheckboxProperties from "./properties/FNAbviewDetailCheckbox.js";
+import FNAbviewDetailCustomProperties from "./properties/FNAbviewDetailCustom.js";
+import FNAbviewDetailImageProperties from "./properties/FNAbviewDetailImage.js";
+import FNAbviewDetailItemProperties from "./properties/FNAbviewDetailItem.js";
+import FNAbviewDetailTextProperties from "./properties/FNAbviewDetailText.js";
+import FNAbviewDetailTreeProperties from "./properties/FNAbviewDetailTree.js";
 
 import FABViewContainer from "../../rootPages/Designer/properties/views/ABViewContainer";
 
-export default function FNAbviewdetailProperties({ AB }) {
+export default function FNAbviewdetailProperties(API) {
+   const { AB } = API;
    const ABViewContainer = FABViewContainer(AB);
    const uiConfig = AB.Config.uiSettings();
    const L = ABViewContainer.L();
 
    let ABViewDetailPropertyComponentDefaults = {};
 
-   return class ABAbviewdetailProperties extends ABViewContainer {
+   const ABAbviewdetailProperties = class ABAbviewdetailProperties extends ABViewContainer {
       static getPluginKey() {
          return this.key;
       }
 
       static getPluginType() {
          return "properties-view";
-         // properties-view : will display in the properties panel of the ABDesigner
       }
 
       constructor(base, ids = {}) {
@@ -371,4 +374,14 @@ export default function FNAbviewdetailProperties({ AB }) {
          }
       }
    };
+
+   return [
+      ABAbviewdetailProperties,
+      FNAbviewDetailItemProperties(API),
+      FNAbviewDetailCheckboxProperties(API),
+      FNAbviewDetailCustomProperties(API),
+      FNAbviewDetailImageProperties(API),
+      FNAbviewDetailTextProperties(API),
+      FNAbviewDetailTreeProperties(API),
+   ];
 }

src/rootPages/Designer/properties/views/ABViewDetailCheckbox.js → src/plugins/web_view_detail/properties/FNAbviewDetailCheckbox.js

@@ -1,15 +1,16 @@
-/**
- * ABViewDetailCheckbox
- * A Property manager for our ABViewDetailCheckbox definitions
- */
+import FNAbviewDetailItemProperties from "./FNAbviewDetailItem.js";
 
-import FABViewDetailItem from "./ABViewDetailItem";
+export default function FNAbviewDetailCheckboxProperties({
+   AB,
+   ABViewPropertiesPlugin,
+}) {
+   const ABViewDetailItem = FNAbviewDetailItemProperties({
+      AB,
+      ABViewPropertiesPlugin,
+   });
 
-export default function (AB) {
    const BASE_ID = "properties_abview_detail_checkbox";
 
-   const ABViewDetailItem = FABViewDetailItem(AB);
-
    class ABViewDetailCheckboxProperty extends ABViewDetailItem {
       constructor() {
          super(BASE_ID, {
@@ -19,15 +20,18 @@ export default function (AB) {
          this.AB = AB;
       }
 
+      static getPluginKey() {
+         return this.key;
+      }
+
+      static getPluginType() {
+         return "properties-view";
+      }
+
       static get key() {
          return "detailcheckbox";
       }
 
-      /**
-       * @method FieldClass()
-       * A method to return the proper ABViewXXX Definition.
-       * NOTE: Must be overwritten by the Child Class
-       */
       ViewClass() {
          return super._ViewClass("detailcheckbox");
       }

src/rootPages/Designer/properties/views/ABViewDetailCustom.js → src/plugins/web_view_detail/properties/FNAbviewDetailCustom.js

@@ -1,15 +1,16 @@
-/**
- * ABViewDetailCustom
- * A Property manager for our ABViewDetailCustom definitions
- */
+import FNAbviewDetailItemProperties from "./FNAbviewDetailItem.js";
 
-import FABViewDetailItem from "./ABViewDetailItem";
+export default function FNAbviewDetailCustomProperties({
+   AB,
+   ABViewPropertiesPlugin,
+}) {
+   const ABViewDetailItem = FNAbviewDetailItemProperties({
+      AB,
+      ABViewPropertiesPlugin,
+   });
 
-export default function (AB) {
    const BASE_ID = "properties_abview_detail_custom";
 
-   const ABViewDetailItem = FABViewDetailItem(AB);
-
    class ABViewDetailCustomProperty extends ABViewDetailItem {
       constructor() {
          super(BASE_ID, {
@@ -19,15 +20,18 @@ export default function (AB) {
          this.AB = AB;
       }
 
+      static getPluginKey() {
+         return this.key;
+      }
+
+      static getPluginType() {
+         return "properties-view";
+      }
+
       static get key() {
          return "detailcustom";
       }
 
-      /**
-       * @method FieldClass()
-       * A method to return the proper ABViewXXX Definition.
-       * NOTE: Must be overwritten by the Child Class
-       */
       ViewClass() {
          return super._ViewClass("detailcustom");
       }

src/rootPages/Designer/properties/views/ABViewDetailImage.js → src/plugins/web_view_detail/properties/FNAbviewDetailImage.js

@@ -1,19 +1,20 @@
-/**
- * ABViewDetailImage
- * A Property manager for our ABViewDetailImage definitions
- */
+import FNAbviewDetailItemProperties from "./FNAbviewDetailItem.js";
 
-import FABViewDetailItem from "./ABViewDetailItem";
+export default function FNAbviewDetailImageProperties({
+   AB,
+   ABViewPropertiesPlugin,
+}) {
+   const ABViewDetailItem = FNAbviewDetailItemProperties({
+      AB,
+      ABViewPropertiesPlugin,
+   });
 
-export default function (AB) {
    const BASE_ID = "properties_abview_detail_image";
    const DEFAULT_VALUES = {
       height: 0,
       width: 0,
    };
 
-   const ABViewDetailItem = FABViewDetailItem(AB);
-
    class ABViewDetailImageProperty extends ABViewDetailItem {
       constructor() {
          super(BASE_ID, {
@@ -24,6 +25,14 @@ export default function (AB) {
          this.AB = AB;
       }
 
+      static getPluginKey() {
+         return this.key;
+      }
+
+      static getPluginType() {
+         return "properties-view";
+      }
+
       static get key() {
          return "detailimage";
       }
@@ -51,11 +60,6 @@ export default function (AB) {
          ]);
       }
 
-      /**
-       * @method FieldClass()
-       * A method to return the proper ABViewXXX Definition.
-       * NOTE: Must be overwritten by the Child Class
-       */
       ViewClass() {
          return super._ViewClass("detailimage");
       }
@@ -74,11 +78,6 @@ export default function (AB) {
          return Object.assign(DEFAULT_VALUES, values);
       }
 
-      /**
-       * @method values
-       * return the values for this form.
-       * @return {obj}
-       */
       values() {
          const values = super.values() ?? {};
          values.settings = values.settings ?? {};

src/rootPages/Designer/properties/views/ABViewDetailItem.js → src/plugins/web_view_detail/properties/FNAbviewDetailItem.js

@@ -1,18 +1,25 @@
-/*
- * ABViewDetailItem
- * A Property manager for our ABViewDetailItem definitions
- */
+export default function FNAbviewDetailItemProperties({
+   AB,
+   ABViewPropertiesPlugin,
+}) {
+   const L = AB.Label();
 
-import FABView from "./ABView";
+   class ABViewDetailItemProperty extends ABViewPropertiesPlugin {
+      static getPluginKey() {
+         return this.key;
+      }
+
+      static getPluginType() {
+         return "properties-view";
+      }
 
-export default function (AB) {
-   const ABView = FABView(AB);
-   const L = ABView.L();
+      static get key() {
+         return "detailitem";
+      }
 
-   class ABViewDetailItemProperty extends ABView {
       constructor(BASE_ID, ids = {}) {
          super(
-            BASE_ID,
+            BASE_ID ?? "properties_abview_detail_item",
             Object.assign(ids, {
                // Put our ids here
                field: "",
@@ -44,7 +51,7 @@ export default function (AB) {
             (f) => f.id == view.settings.fieldId
          );
 
-         $$(this.ids.field).setValue(field.label);
+         $$(this.ids.field).setValue(field ? field.label : "");
       }
 
       defaultValues() {

src/rootPages/Designer/properties/views/ABViewDetailText.js → src/plugins/web_view_detail/properties/FNAbviewDetailText.js

@@ -1,18 +1,19 @@
-/**
- * ABViewDetailText
- * A Property manager for our ABViewDetailText definitions
- */
+import FNAbviewDetailItemProperties from "./FNAbviewDetailItem.js";
 
-import FABViewDetailItem from "./ABViewDetailItem";
+export default function FNAbviewDetailTextProperties({
+   AB,
+   ABViewPropertiesPlugin,
+}) {
+   const ABViewDetailItem = FNAbviewDetailItemProperties({
+      AB,
+      ABViewPropertiesPlugin,
+   });
 
-export default function (AB) {
    const BASE_ID = "properties_abview_detail_text";
    const DEFAULT_VALUES = {
       height: 0,
    };
 
-   const ABViewDetailItem = FABViewDetailItem(AB);
-
    class ABViewDetailTextProperty extends ABViewDetailItem {
       constructor() {
          super(BASE_ID, {
@@ -22,6 +23,14 @@ export default function (AB) {
          this.AB = AB;
       }
 
+      static getPluginKey() {
+         return this.key;
+      }
+
+      static getPluginType() {
+         return "properties-view";
+      }
+
       static get key() {
          return "detailtext";
       }
@@ -40,11 +49,6 @@ export default function (AB) {
          ]);
       }
 
-      /**
-       * @method FieldClass()
-       * A method to return the proper ABViewXXX Definition.
-       * NOTE: Must be overwritten by the Child Class
-       */
       ViewClass() {
          return super._ViewClass("detailtext");
       }
@@ -61,11 +65,6 @@ export default function (AB) {
          return Object.assign(DEFAULT_VALUES, values);
       }
 
-      /**
-       * @method values
-       * return the values for this form.
-       * @return {obj}
-       */
       values() {
          const values = super.values() ?? {};
          values.settings = values.settings ?? {};