Migrate Form Plugin

src/plugins/index.js

@@ -14,6 +14,8 @@ import viewDataviewEditor from "./web_view_dataview/FNAbviewdataviewEditor.js";
 import viewDataviewProperties from "./web_view_dataview/FNAbviewdataview.js";
 import viewDetailEditor from "./web_view_detail/FNAbviewdetailEditor.js";
 import viewDetailProperties from "./web_view_detail/FNAbviewdetail.js";
+import viewFormEditor from "./web_view_form/FNAbviewformEditor.js";
+import viewFormProperties from "./web_view_form/FNAbviewform.js";
 import viewGanttEditor from "./web_view_gantt/FNAbviewganttEditor.js";
 import viewGanttProperties from "./web_view_gantt/FNAbviewgantt.js";
 import viewGridEditor from "./web_view_grid/FNAbviewgridEditor.js";
@@ -51,6 +53,8 @@ const AllPlugins = [
    viewDataviewProperties,
    viewDetailEditor,
    viewDetailProperties,
+   viewFormEditor,
+   viewFormProperties,
    viewGanttEditor,
    viewGanttProperties,
    viewGridEditor,

src/rootPages/Designer/properties/views/ABViewForm.js → src/plugins/web_view_form/FNAbviewform.js

@@ -1,13 +1,28 @@
-/*
- * ABViewForm
- * A Property manager for our ABViewForm definitions
- */
+import FNAbviewFormButtonProperties from "./properties/FNAbviewFormButton.js";
+import FNAbviewFormCheckboxProperties from "./properties/FNAbviewFormCheckbox.js";
+import FNAbviewFormConnectProperties from "./properties/FNAbviewFormConnect.js";
+import FNAbviewFormCustomProperties from "./properties/FNAbviewFormCustom.js";
+import FNAbviewFormDatepickerProperties from "./properties/FNAbviewFormDatepicker.js";
+import FNAbviewFormJsonProperties from "./properties/FNAbviewFormJson.js";
+import FNAbviewFormNumberProperties from "./properties/FNAbviewFormNumber.js";
+import FNAbviewFormSelectMultipleProperties from "./properties/FNAbviewFormSelectMultiple.js";
+import FNAbviewFormSelectSingleProperties from "./properties/FNAbviewFormSelectSingle.js";
+import FNAbviewFormTextboxProperties from "./properties/FNAbviewFormTextbox.js";
+import FNAbviewFormTreeProperties from "./properties/FNAbviewFormTree.js";
+import FNAbviewFormUrlProperties from "./properties/FNAbviewFormUrl.js";
+
+export default function FNAbviewformProperties({
+   AB,
+   ABViewPropertiesPlugin,
+   // ABUIPlugin,
+}) {
+   const FABViewContainer =
+      require("../../rootPages/Designer/properties/views/ABViewContainer").default;
+   const FABViewRuleListFormRecordRules =
+      require("../../rootPages/Designer/properties/rules/ABViewRuleListFormRecordRules").default;
+   const FABViewRuleListFormSubmitRules =
+      require("../../rootPages/Designer/properties/rules/ABViewRuleListFormSubmitRules").default;
 
-import FABViewContainer from "./ABViewContainer";
-import FABViewRuleListFormRecordRules from "../rules/ABViewRuleListFormRecordRules";
-import FABViewRuleListFormSubmitRules from "../rules/ABViewRuleListFormSubmitRules";
-
-export default function (AB) {
    const ABViewContainer = FABViewContainer(AB);
    const uiConfig = AB.Config.uiSettings();
    const L = ABViewContainer.L();
@@ -26,7 +41,16 @@ export default function (AB) {
       `${base}_popupSubmitRule`
    );
 
-   class ABViewFormProperty extends ABViewContainer {
+   const ABAbviewformProperties = class ABAbviewformProperties extends ABViewPropertiesPlugin {
+      static getPluginKey() {
+         return this.key;
+      }
+
+      static getPluginType() {
+         return "properties-view";
+         // properties-view : will display in the properties panel of the ABDesigner
+      }
+
       constructor(b = null, id = null) {
          b = b || base;
          id = Object.assign(id || {}, {
@@ -333,29 +357,28 @@ export default function (AB) {
 
          // update properties when a field component is deleted
          view.views().forEach((v) => {
-            if (v instanceof this.AB.Class.ABViewFormItem)
-               v.once("destroyed", () => this.populate(view));
+            if (v.isFormField) v.once("destroyed", () => this.populate(view));
          });
 
          SourceSelector.enable();
          $$(ids.showLabel).setValue(view.settings.showLabel);
          $$(ids.labelPosition).setValue(
-            view.settings.labelPosition ||
+            view.settings.labelPosition ??
                ABViewFormPropertyComponentDefaults.labelPosition
          );
          $$(ids.labelWidth).setValue(
-            view.settings.labelWidth ||
+            view.settings.labelWidth ??
                ABViewFormPropertyComponentDefaults.labelWidth
          );
          $$(ids.height).setValue(
-            view.settings.height || ABViewFormPropertyComponentDefaults.height
+            view.settings.height ?? ABViewFormPropertyComponentDefaults.height
          );
          $$(ids.clearOnLoad).setValue(
-            view.settings.clearOnLoad ||
+            view.settings.clearOnLoad ??
                ABViewFormPropertyComponentDefaults.clearOnLoad
          );
          $$(ids.clearOnSave).setValue(
-            view.settings.clearOnSave ||
+            view.settings.clearOnSave ??
                ABViewFormPropertyComponentDefaults.clearOnSave
          );
 
@@ -405,10 +428,10 @@ export default function (AB) {
          vals.settings.dataviewID = $$(ids.datacollection).getValue();
          vals.settings.showLabel = $$(ids.showLabel).getValue();
          vals.settings.labelPosition =
-            $$(ids.labelPosition).getValue() ||
+            $$(ids.labelPosition).getValue() ??
             ABViewFormPropertyComponentDefaults.labelPosition;
          vals.settings.labelWidth =
-            $$(ids.labelWidth).getValue() ||
+            $$(ids.labelWidth).getValue() ??
             ABViewFormPropertyComponentDefaults.labelWidth;
          vals.settings.height = $$(ids.height).getValue();
          vals.settings.clearOnLoad = $$(ids.clearOnLoad).getValue();
@@ -425,7 +448,7 @@ export default function (AB) {
        * NOTE: Must be overwritten by the Child Class
        */
       ViewClass() {
-         return super._ViewClass("carousel");
+         return super._ViewClass("form");
       }
 
       //
@@ -437,6 +460,9 @@ export default function (AB) {
       }
 
       check(e, fieldId) {
+         if (this._isBusy) return;
+         this._isBusy = true;
+         this.busy();
          const ids = this.ids;
          let currView = this.CurrentView;
          let formView = currView.parentFormComponent();
@@ -447,13 +473,15 @@ export default function (AB) {
          $$(ids.fields).updateItem(fieldId, item);
 
          let doneFn = () => {
+            this._isBusy = false;
             formView
                .refreshDefaultButton(ids)
                .save()
                .then(() => {
                   // refresh UI
                   currView.emit("properties.updated", currView);
                   this.onChange();
+                  this.ready();
                });
 
             // // trigger a save()
@@ -462,14 +490,27 @@ export default function (AB) {
 
          // add a field to the form
          if (item.selected) {
-            let fieldView = currView.addFieldToForm(item);
+            // Check for duplication
+            let exists = formView
+               .fieldComponents()
+               .find((c) => c.settings.fieldId == fieldId);
+            if (exists) {
+               this._isBusy = false;
+               this.ready();
+               return;
+            }
+
+            let fieldView = formView.addFieldToForm(item);
             if (fieldView) {
                fieldView.save().then(() => {
                   fieldView.once("destroyed", () => this.populate(currView));
-                  currView.viewInsert(fieldView).then(() => {
+                  formView.viewInsert(fieldView).then(() => {
                      doneFn();
                   });
                });
+            } else {
+               this._isBusy = false;
+               this.ready();
             }
          }
          // remove field in the form
@@ -482,9 +523,12 @@ export default function (AB) {
                // formView._views = remainingViews;
 
                fieldView.destroy();
-               currView.viewRemove(fieldView).then(() => {
+               formView.viewRemove(fieldView).then(() => {
                   doneFn();
                });
+            } else {
+               this._isBusy = false;
+               this.ready();
             }
          }
       }
@@ -599,8 +643,7 @@ export default function (AB) {
 
       refreshDefaultButton() {
          const ids = this.ids;
-         const ABViewFormButton =
-            this.AB.ClassManager.viewClass("button");
+         const ABViewFormButton = this.AB.ClassManager.viewClass("button");
 
          // If default button is not exists, then skip this
          let defaultButton = this.views(
@@ -736,7 +779,21 @@ export default function (AB) {
                })
          );
       }
-   }
-
-   return ABViewFormProperty;
+   };
+
+   return [
+      ABAbviewformProperties,
+      FNAbviewFormButtonProperties({ AB, ABViewPropertiesPlugin }),
+      FNAbviewFormCheckboxProperties({ AB, ABViewPropertiesPlugin }),
+      FNAbviewFormConnectProperties({ AB, ABViewPropertiesPlugin }),
+      FNAbviewFormCustomProperties({ AB, ABViewPropertiesPlugin }),
+      FNAbviewFormDatepickerProperties({ AB, ABViewPropertiesPlugin }),
+      FNAbviewFormJsonProperties({ AB, ABViewPropertiesPlugin }),
+      FNAbviewFormNumberProperties({ AB, ABViewPropertiesPlugin }),
+      FNAbviewFormSelectMultipleProperties({ AB, ABViewPropertiesPlugin }),
+      FNAbviewFormSelectSingleProperties({ AB, ABViewPropertiesPlugin }),
+      FNAbviewFormTextboxProperties({ AB, ABViewPropertiesPlugin }),
+      FNAbviewFormTreeProperties({ AB, ABViewPropertiesPlugin }),
+      FNAbviewFormUrlProperties({ AB, ABViewForm: ABAbviewformProperties }),
+   ];
 }

src/plugins/web_view_form/FNAbviewformEditor.js

@@ -0,0 +1,66 @@
+import FNAbviewFormUrlEditor from "./editors/FNAbviewFormUrlEditor.js";
+
+export default function FNAbviewformEditor({ AB, ABViewEditorPlugin }) {
+
+   // TODO: In #jh/mcp_server branch, pass this value instead of using a hard reference
+   const FABViewContainer =
+      require("../../rootPages/Designer/editors/views/ABViewContainer").default;
+
+   const ABViewContainer = FABViewContainer(AB);
+   // var L = UIClass.L();
+   // var L = ABViewContainer.L();
+
+   const ABAbviewformEditor = class ABAbviewformEditor 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 "form";
+      }
+
+      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 [
+      ABAbviewformEditor,
+      FNAbviewFormUrlEditor({ ABViewForm: ABAbviewformEditor }),
+   ];
+}

src/rootPages/Designer/editors/views/ABViewFormUrl.js → src/plugins/web_view_form/editors/FNAbviewFormUrlEditor.js

@@ -1,3 +1,4 @@
+
 /**
  * ABViewFormEditor
  * The widget that displays the UI Editor Component on the screen
@@ -8,15 +9,20 @@ var myClass = null;
 // 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 FNAbviewFormUrlEditor({ 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 getPluginKey() {
+            return this.key;
+         }
+
+         static getPluginType() {
+            return "editor-view";
+         }
          static get key() {
             return "form-url";
          }

src/rootPages/Designer/properties/views/ABViewFormButton.js → src/plugins/web_view_form/properties/FNAbviewFormButton.js

@@ -3,15 +3,22 @@
  * A Property manager for our ABViewButton definitions
  */
 
-import FABView from "./ABView";
-
-export default function (AB) {
+export default function FNAbviewFormButtonProperties({
+   AB,
+   ABViewPropertiesPlugin,
+}) {
    const BASE_ID = "properties_abview_button";
 
-   const ABView = FABView(AB);
-   const L = ABView.L();
+   const L = AB.Label();
+
+   class ABViewButtonProperty extends ABViewPropertiesPlugin {
+      static getPluginKey() {
+         return this.key;
+      }
 
-   class ABViewButtonProperty extends ABView {
+      static getPluginType() {
+         return "properties-view";
+      }
       constructor() {
          super(BASE_ID, {
             // Put our ids here

src/rootPages/Designer/properties/views/ABViewFormCheckbox.js → src/plugins/web_view_form/properties/FNAbviewFormCheckbox.js

@@ -1,16 +1,26 @@
+import FNAbviewformItem from "./FNAbviewFormItem.js";
+
 /*
  * ABViewFormCheckbox
  * A Property manager for our ABViewFormCheckbox definitions
  */
 
-import FABViewFormItem from "./ABViewFormItem";
+export default function FNAbviewFormCheckboxProperties({
+   AB,
+   ABViewPropertiesPlugin,
+}) {
+   const ABViewFormItem = FNAbviewformItem({ AB, ABViewPropertiesPlugin });
 
-export default function (AB) {
    const BASE_ID = "properties_abview_form_checkbox";
 
-   const ABViewFormItem = FABViewFormItem(AB);
-
    class ABViewFormCheckboxProperty extends ABViewFormItem {
+      static getPluginKey() {
+         return this.key;
+      }
+
+      static getPluginType() {
+         return "properties-view";
+      }
       constructor() {
          super(BASE_ID, {});