Plugin System

src/rootPages/Designer/editors/EditorManager.js

@@ -6,7 +6,7 @@
  */
 import _ABViewDefault from "./views/_ABViewDefault";
 
-export default function(AB) {
+export default function (AB) {
    const Editors = [];
    // {array}
    // All the ABField Component Inerfaces available.
@@ -28,6 +28,7 @@ export default function(AB) {
       require("./views/ABViewDetail"),
       require("./views/ABViewDocxBuilder"),
       require("./views/ABViewForm"),
+      require("./views/ABViewFormUrl"),
       require("./views/ABViewGantt"),
       require("./views/ABViewGrid"),
       require("./views/ABViewKanban"),
@@ -50,6 +51,13 @@ export default function(AB) {
       if (p.editor) Editors.push(p.editor(AB, _ABViewDefault));
    });
 
+   // Load editors from ClassManager
+   if (AB.ClassManager && AB.ClassManager.viewEditorAll) {
+      AB.ClassManager.viewEditorAll()?.forEach((EditorClass) => {
+         Editors.push(EditorClass);
+      });
+   }
+
    return {
       /*
        * @function editors
@@ -58,7 +66,7 @@ export default function(AB) {
        *        A filter for limiting which editor you want.
        * @return [{ClassUI(Editor1)}, {ClassUI(Editor2)}, ...]
        */
-      editors: function(f = () => true) {
+      editors: function (f = () => true) {
          return Editors.filter(f);
       },
    };

src/rootPages/Designer/editors/views/ABViewContainer.js

@@ -66,6 +66,7 @@ export default function (AB) {
             let Defaults =
                AB.Class.ABViewManager.viewClass(key).defaultValues();
             return {
+               _dashboardID: this.ids.component,
                rows: [
                   {
                      id: this.ids.component,
@@ -93,7 +94,7 @@ export default function (AB) {
 
             // NOTE: need to sorting before .addView because there is a render position bug in webix 5.1.7
             // https://webix.com/snippet/404cf0c7
-            var childViews = this.CurrentView.viewsSortByPosition();
+            var childViews = this.CurrentView?.viewsSortByPosition() || [];
 
             // attach all the .UI views:
             childViews.forEach((child) => {
@@ -225,7 +226,7 @@ export default function (AB) {
             var allViewUpdates = [];
 
             // save view position state to views
-            this.CurrentView.views().forEach((v) => {
+            (this.CurrentView?.views() || []).forEach((v) => {
                var state = viewState.filter((vs) => vs.name == v.id)[0];
                if (state) {
                   v.position.x = state.x;
@@ -244,31 +245,37 @@ export default function (AB) {
                // this.saveReorder()
                await Promise.all(allViewUpdates);
 
-               await this.CurrentView.save();
+               if (this.CurrentView) {
+                  await this.CurrentView.save();
+               }
 
                this.ready();
             } catch (err) {
                this.AB.notify.developer(err, {
                   message: "Error trying to save selected View:",
-                  view: this.CurrentView.toObj(),
+                  view: this.CurrentView?.toObj() || {
+                     currentView: "not found",
+                  },
                });
                this.ready();
             }
          }
 
          onShow() {
             let hasTextComponent = false;
-            this.CurrentView.views().forEach((v) => {
-               if (v.key === "text") hasTextComponent = true;
-               var component = this.subComponents[v.id];
-               component?.onShow?.();
-            });
-            if (hasTextComponent) this.initTinyMCE();
+            if (this.CurrentView) {
+               this.CurrentView.views().forEach((v) => {
+                  if (v.key === "text") hasTextComponent = true;
+                  var component = this.subComponents[v.id];
+                  component?.onShow?.();
+               });
+               if (hasTextComponent) this.initTinyMCE();
 
-            let dc = this.CurrentView.datacollection;
-            if (dc && dc.dataStatus == dc.dataStatusFlag.notInitial) {
-               // load data when a widget is showing
-               dc.loadData();
+               let dc = this.CurrentView.datacollection;
+               if (dc && dc.dataStatus == dc.dataStatusFlag.notInitial) {
+                  // load data when a widget is showing
+                  dc.loadData();
+               }
             }
          }
 
@@ -344,7 +351,8 @@ export default function (AB) {
           * @param {obj} trg  Webix provided object
           */
          viewDelete(e, id /*, trg */) {
-            var deletedView = this.CurrentView.views((v) => v.id == id)[0];
+            var deletedView =
+               this.CurrentView?.views((v) => v.id == id)[0] || null;
             if (!deletedView) return false;
 
             webix.confirm({
@@ -383,11 +391,13 @@ export default function (AB) {
                      let Dashboard = $$(this.ids.component);
 
                      // Update UI
-                     var deletedElem = Dashboard.queryView({ name: id });
-                     if (deletedElem) {
-                        Dashboard.blockEvent();
-                        Dashboard.removeView(deletedElem);
-                        Dashboard.unblockEvent();
+                     if (Dashboard) {
+                        var deletedElem = Dashboard.queryView({ name: id });
+                        if (deletedElem) {
+                           Dashboard.blockEvent();
+                           Dashboard.removeView(deletedElem);
+                           Dashboard.unblockEvent();
+                        }
                      }
 
                      this.showEmptyPlaceholder();
@@ -412,7 +422,7 @@ export default function (AB) {
           * @param {obj} trg  Webix provided object
           */
          viewEdit(e, id /*, trg */) {
-            var view = this.CurrentView.views((v) => v.id == id)[0];
+            var view = this.CurrentView?.views((v) => v.id == id)[0] || null;
 
             if (!view) return false;
 

src/rootPages/Designer/editors/views/ABViewFormUrl.js

@@ -0,0 +1,54 @@
+/**
+ * ABViewFormEditor
+ * The widget that displays the UI Editor Component on the screen
+ * when designing the UI.
+ */
+var myClass = null;
+// {singleton}
+// we will want to call this factory fn() repeatedly in our imports,
+// but we only want to define 1 Class reference.
+
+import FABViewForm from "./ABViewForm";
+
+export default function (AB) {
+   if (!myClass) {
+      const ABViewForm = FABViewForm(AB);
+      // var L = UIClass.L();
+      // var L = ABViewContainer.L();
+
+      myClass = class ABViewFormEditor extends ABViewForm {
+         static get key() {
+            return "form-url";
+         }
+
+         // constructor(view, base = "interface_editor_viewform") {
+         //    // 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() {
+         //    this.component?.onShow?.();
+         // }
+      };
+   }
+
+   return myClass;
+}

src/rootPages/Designer/editors/views/ABViewPivot.js

@@ -36,15 +36,17 @@ export default function (AB) {
 
             pivot.readonly = false;
 
-            return pivot;
+            // NOTE: ui_work_interface_workspace_editor_layout is expecting a { rows:[] }
+            // type of response from this.
+            return pivotContainer;
          }
 
          init(AB) {
             this.AB = AB;
 
             this.component?.init?.();
 
-            const pivotId = this.ui().id;
+            const pivotId = this.ui().rows[0].id;
             const $pivot = $$(pivotId);
             $pivot.getState().$observe("structure", (structure) => {
                this._saveStructure(structure);

src/rootPages/Designer/editors/views/ABViewTab.js

@@ -168,6 +168,7 @@ export default function (AB) {
             }
 
             return {
+               _dashboardID: ids.component,
                rows: [componentUI],
             };
          }

src/rootPages/Designer/editors/views/ABViewText.js

@@ -35,6 +35,7 @@ export default function (AB) {
             const baseView = this.view;
 
             return {
+               _dashboardID: ids.component,
                rows: [
                   {
                      id: ids.component,

src/rootPages/Designer/properties/PropertyManager.js

@@ -104,6 +104,7 @@ export default function (AB) {
          require("./views/ABViewFormSelectSingle"),
          require("./views/ABViewFormTextbox"),
          require("./views/ABViewFormTree"),
+         require("./views/ABViewFormUrl"),
          require("./views/ABViewGantt"),
          require("./views/ABViewGrid"),
          require("./views/ABViewImage"),
@@ -127,6 +128,15 @@ export default function (AB) {
          if (p.viewProperty) Views.push(p.viewProperty(AB, ABView));
       });
 
+      // Include view properties from ClassManager
+      const Plugins = [];
+      if (AB.ClassManager && AB.ClassManager.viewPropertiesAll) {
+         const classManagerViewProperties = AB.ClassManager.viewPropertiesAll();
+         classManagerViewProperties.forEach((ViewPropertyClass) => {
+            Plugins.push(ViewPropertyClass);
+         });
+      }
+
       var MobileViews = [];
       // {array}
       // All the ABMobileViewXXX Property Interfaces Available.
@@ -168,11 +178,11 @@ export default function (AB) {
          },
 
          processElements: function (f = () => true) {
-            return Processes.filter(f);
+            return Plugins.concat(Processes).filter(f);
          },
 
          views: function (v = () => true) {
-            return Views.filter(v);
+            return Plugins.concat(Views).filter(v);
          },
 
          mobileViews: function (v = () => true) {

src/rootPages/Designer/properties/dataFields/ABField.js

@@ -75,6 +75,7 @@ export default function (AB) {
                   {
                      cols: [
                         {
+                           id: `${this.base}_name`,
                            view: "label",
                            label: L("Field Name:"),
                            align: "left",

src/rootPages/Designer/properties/dataFields/ABFieldList.js

@@ -272,7 +272,10 @@ export default function (AB) {
       }
 
       clear() {
+         // NOTE: don't call super.clear() here
+
          const ids = this.ids;
+         $$(ids.label).setValue("");
          $$(ids.isMultiple).setValue(0);
          $$(ids.hasColors).setValue(0);
          $$(ids.options).clearAll();