Updating ABDesigner with new ABViewDataView plugin

src/plugins/index.js

@@ -4,6 +4,10 @@ import viewCommentProperties from "./web_view_comment/FNAbviewcomment.js";
 import viewCommentEditor from "./web_view_comment/FNAbviewcommentEditor.js";
 import viewDataSelectProperties from "./web_view_data-select/FNAbviewdataselect.js";
 import viewDataSelectEditor from "./web_view_data-select/FNAbviewdataselectEditor.js";
+import viewDataviewProperties from "./web_view_dataview/FNAbviewdataview.js";
+import viewDataviewEditor from "./web_view_dataview/FNAbviewdataviewEditor.js";
+import viewDetailProperties from "./web_view_detail/FNAbviewdetail.js";
+import viewDetailEditor from "./web_view_detail/FNAbviewdetailEditor.js";
 import viewImageProperties from "./web_view_image/FNAbviewimage.js";
 import viewImageEditor from "./web_view_image/FNAbviewimageEditor.js";
 import viewLabelProperties from "./web_view_label/FNAbviewLabel.js";
@@ -25,6 +29,10 @@ const AllPlugins = [
    viewCommentEditor,
    viewDataSelectProperties,
    viewDataSelectEditor,
+   viewDataviewProperties,
+   viewDataviewEditor,
+   viewDetailProperties,
+   viewDetailEditor,
    viewImageProperties,
    viewImageEditor,
    viewLabelProperties,

src/plugins/web_view_dataview/FNAbviewdataview.js

@@ -0,0 +1,135 @@
+// FNAbviewdataview Properties
+// A properties side import for an ABView.
+//
+
+import FABViewDetail from "../web_view_detail/FNAbviewdetail";
+import ABViewPropertyLinkPage from "../../rootPages/Designer/properties/views/viewProperties/ABViewPropertyLinkPage";
+
+export default function FNAbviewdataviewProperties({
+   AB,
+   // ABViewPropertiesPlugin,
+   // ABUIPlugin,
+}) {
+   const base = "properties_abview_dataview";
+
+   const ABViewDetail = FABViewDetail({ AB });
+   // NOTE: this is another plugin, so pass in { AB }
+
+   const LinkPageProperty = ABViewPropertyLinkPage(AB, base);
+   const uiConfig = AB.Config.uiSettings();
+   const L = ABViewDetail.L();
+
+   let ABViewDataviewPropertyComponentDefaults = {};
+
+   return class ABAbviewdataviewProperties extends ABViewDetail {
+      static getPluginKey() {
+         return this.key;
+      }
+
+      static getPluginType() {
+         return "properties-view";
+         // properties-view : will display in the properties panel of the ABDesigner
+      }
+
+      constructor() {
+         super(base, {
+            // Put our ids here
+            xCount: "",
+         });
+
+         this.AB = AB;
+         ABViewDataviewPropertyComponentDefaults =
+            this.AB.ClassManager.viewClass("dataview").defaultValues();
+
+         this.linkPageComponent = new LinkPageProperty(AB, base);
+      }
+
+      static get key() {
+         return "dataview";
+      }
+
+      ui() {
+         const ids = this.ids;
+
+         return super.ui([
+            {
+               id: ids.xCount,
+               view: "counter",
+               name: "xCount",
+               min: 1, // we cannot have 0 columns per row so lets not accept it
+               label: L("Items in a row"),
+               labelWidth: uiConfig.labelWidthLarge,
+               step: 1,
+               on: {
+                  onChange: () => {
+                     this.onChange();
+                  },
+               },
+            },
+            this.linkPageComponent.ui(),
+         ]);
+      }
+
+      init() {
+         super.init(this.AB);
+
+         this.linkPageComponent.init();
+         this.linkPageComponent.on("changed", () => {
+            this.onChange();
+         });
+      }
+
+      populate(view) {
+         super.populate(view);
+         if (!view) return;
+
+         const ids = this.ids;
+
+         $$(ids.xCount).setValue(
+            view.settings.xCount ||
+               ABViewDataviewPropertyComponentDefaults.xCount
+         );
+
+         this.linkPageComponent.viewLoad(view);
+         this.linkPageComponent.setSettings(view.settings);
+      }
+
+      defaultValues() {
+         let values = {};
+         const ViewClass = this.ViewClass();
+         if (ViewClass) {
+            values = ViewClass.defaultValues();
+         }
+         return values;
+      }
+
+      /**
+       * @method values
+       * return the values for this form.
+       * @return {obj}
+       */
+      values() {
+         const ids = this.ids;
+         let vals = super.values();
+
+         vals.settings = vals.settings ?? {};
+         vals.settings.xCount = $$(ids.xCount).getValue();
+
+         let linkSettings = this.linkPageComponent.getSettings();
+         for (let key in linkSettings) {
+            vals.settings[key] = linkSettings[key];
+         }
+
+         return vals;
+      }
+
+      /**
+       * @method FieldClass()
+       * A method to return the proper ABViewXXX Definition.
+       * NOTE: Must be overwritten by the Child Class
+       */
+      ViewClass() {
+         return super._ViewClass("dataview");
+      }
+   };
+}

src/plugins/web_view_dataview/FNAbviewdataviewEditor.js

@@ -0,0 +1,62 @@
+// FNAbviewdataview Editor
+// An Editor wrapper for the ABView Component.
+// The Editor is displayed in the ABDesigner as a view is worked on.
+// The Editor allows a widget to be moved and placed on the canvas.
+//
+import FABViewContainer from "../../rootPages/Designer/editors/views/ABViewContainer";
+
+export default function FNAbviewdataviewEditor({ AB /*ABViewEditorPlugin*/ }) {
+   const ABViewContainer = FABViewContainer(AB);
+   // var L = UIClass.L();
+   // var L = ABViewContainer.L();
+
+   return class ABAbviewdataviewEditor extends ABViewContainer {
+      static getPluginKey() {
+         return this.key;
+      }
+
+      /**
+       * @method getPluginType
+       * return the plugin type for this editor.
+       * plugin types are how our ClassManager knows how to store
+       * the plugin.
+       * @return {string} plugin type
+       */
+      static getPluginType() {
+         return "editor-view";
+         // editor-view : will display in the editor panel of the ABDesigner
+      }
+
+      static get key() {
+         return "dataview";
+      }
+
+      constructor(view, base = "interface_editor_viewdataview") {
+         // base: {string} unique base id reference
+
+         super(view, base);
+
+         // this.component = this.view.component();
+      }
+
+      ui() {
+         let _ui = super.ui();
+         _ui.rows[0].cellHeight = 75;
+         return _ui;
+      }
+
+      init(AB) {
+         this.AB = AB;
+         return super.init(AB);
+      }
+
+      detatch() {
+         this.component?.detatch?.();
+      }
+
+      onShow() {
+         super.onShow();
+         this.component?.onShow?.();
+      }
+   };
+}