Migrate ABViewForm

AppBuilder/ABFactory.js

@@ -32,7 +32,7 @@ import Network from "../resources/Network.js";
 import Storage from "../resources/Storage.js";
 // Storage: manages our interface for local storage
 
-import ABViewManager from "./core/ABViewManagerCore";
+import ABViewManager from "./platform/ABViewManager";
 
 import Tenant from "../resources/Tenant.js";
 // Tenant: manages the Tenant information of the current instance

AppBuilder/platform/ABClassManager.js

@@ -17,6 +17,10 @@ import ABViewPropertyFilterData from "./views/viewProperties/ABViewPropertyFilte
 import ABViewPropertyLinkPage from "./views/viewProperties/ABViewPropertyLinkPage";
 import ABViewRuleListFormRecordRules from "../rules/ABViewRuleListFormRecordRules";
 import ABViewRuleListFormSubmitRules from "../rules/ABViewRuleListFormSubmitRules";
+import ABViewPropertyAddPage from "./views/viewProperties/ABViewPropertyAddPage";
+import ABViewPropertyEditPage from "./views/viewProperties/ABViewPropertyEditPage";
+import ABFieldImage from "./dataFields/ABFieldImage";
+import FocusableTemplate from "../../webix_custom_components/focusableTemplate";
 
 // MIGRATION: ABViewManager is depreciated.  Use ABClassManager instead.
 import ABViewManager from "./ABViewManager.js";
@@ -74,6 +78,10 @@ export function getPluginAPI() {
       ABViewPropertyLinkPage,
       ABViewRuleListFormRecordRules,
       ABViewRuleListFormSubmitRules,
+      ABViewPropertyAddPage,
+      ABViewPropertyEditPage,
+      ABFieldImage,
+      FocusableTemplate,
       //  ABFieldPlugin,
       //  ABViewPlugin,
    };

AppBuilder/platform/RowUpdater.js

@@ -1,6 +1,5 @@
 // const ABComponent = require("./ABComponent");
 import ClassUI from "../../ui/ClassUI";
-const ABViewForm = require("../platform/views/ABViewForm");
 
 let L = null;
 
@@ -313,15 +312,13 @@ class RowUpdater extends ClassUI {
       this._Object = object;
 
       this._mockApp = this.AB.applicationNew({});
-      this._mockFormWidget = new ABViewForm(
-         {
-            settings: {
-               showLabel: false,
-               labelWidth: 0,
-            },
+      this._mockFormWidget = this.AB.viewNewDetatched({
+         key: "form",
+         settings: {
+            showLabel: false,
+            labelWidth: 0,
          },
-         this._mockApp // just need any ABApplication here
-      );
+      });
       this._mockFormWidget.objectLoad(object);
 
       this.setValue(null); // clear

AppBuilder/platform/dataFields/ABFieldJson.js

@@ -13,13 +13,47 @@ module.exports = class ABFieldJson extends ABFieldJsonCore {
    columnHeader(options) {
       const config = super.columnHeader(options);
 
-      // config.editor = null; // read only for now
       config.editor = "text";
       config.css = "textCell";
 
       // when called by ABViewFormCustom, will need a .template() fn.
-      // currently we don't need to return anything so ...
-      config.template = () => "";
+      config.template = (obj) => {
+         const val = obj[this.columnName];
+
+         if (val && typeof val == "object") {
+            try {
+               return JSON.stringify(val);
+            } catch (e) {
+               return val.toString();
+            }
+         }
+
+         return val || "";
+      };
+
+      config.editFormat = (val) => {
+         if (val && typeof val == "object") {
+            try {
+               return JSON.stringify(val);
+            } catch (e) {
+               return val.toString();
+            }
+         }
+
+         return val || "";
+      };
+
+      config.editParse = (val) => {
+         if (val && typeof val == "string") {
+            try {
+               return JSON.parse(val);
+            } catch (e) {
+               /* ignore */
+            }
+         }
+
+         return val;
+      };
 
       return config;
    }
@@ -67,9 +101,22 @@ module.exports = class ABFieldJson extends ABFieldJsonCore {
    }
 
    setValue(item, rowData) {
-      super.setValue(item, rowData, "");
+      let val = rowData[this.columnName];
+
+      if (val && typeof val == "object") {
+         try {
+            val = JSON.stringify(val);
+         } catch (e) {
+            /* ignore */
+         }
+      }
+
+      const cloneRow = Object.assign({}, rowData, { [this.columnName]: val });
+
+      super.setValue(item, cloneRow);
+
       if (item) {
-         item.config.value = rowData[this.columnName];
+         item.config.value = val;
       }
    }
 

AppBuilder/platform/dataFields/ABFieldList.js

@@ -421,8 +421,14 @@ module.exports = class ABFieldList extends ABFieldListCore {
             result.push(rowData);
          }
       }
-      if (result.length) {
-         if (typeof result == "string") result = JSON.parse(result);
+      if (result && result.length) {
+         if (typeof result == "string") {
+            try {
+               result = JSON.parse(result);
+            } catch (e) {
+               console.error(`Error JSON.parsing result [${result}]: `, e);
+            }
+         }
 
          // Pull text with current language
          if (this.settings) {
@@ -456,9 +462,10 @@ function _getSelectedOptions(field, rowData = {}) {
       result = rowData[field.columnName];
 
       try {
-         if (typeof result == "string") result = JSON.parse(result);
+         if (typeof result == "string" && result != "")
+            result = JSON.parse(result);
       } catch (e) {
-         console.error(`Error JSON.pars()ing result [${result}]: `, e);
+         console.error(`Error JSON.parsing result [${result}]: `, e);
          // just go with what is there
          result = rowData[field.columnName];
       }

AppBuilder/platform/dataFields/ABFieldTree.js

@@ -230,8 +230,16 @@ module.exports = class ABFieldTree extends ABFieldTreeCore {
             typeof row[field.columnName] != "undefined"
          ) {
             values = row[field.columnName];
+            if (typeof values == "string" && values !== "") {
+               try {
+                  values = JSON.parse(values);
+               } catch (e) {
+                  // If it's a comma-separated string?
+                  values = values.split(",").filter((v) => v !== "");
+               }
+            }
          }
-         return values;
+         return Array.isArray(values) ? values : [];
       }
 
       function populateTree(field, vals) {
@@ -247,7 +255,7 @@ module.exports = class ABFieldTree extends ABFieldTreeCore {
          $Tree.uncheckAll();
          $Tree.openAll();
 
-         if (values != null && values.length) {
+         if (Array.isArray(values)) {
             values.forEach(function (id) {
                if ($Tree.exists(id)) {
                   $Tree.checkItem(id);
@@ -351,7 +359,10 @@ module.exports = class ABFieldTree extends ABFieldTreeCore {
                            const rowData = {};
                            rowData[field.columnName] = $$(idTree).getChecked();
 
-                           field.setValue($$(parentComponent.ui.id), rowData);
+                           field.setValue(
+                              $$(parentComponent.ids.formItem),
+                              rowData
+                           );
                         }
                      },
                   },
@@ -426,9 +437,15 @@ module.exports = class ABFieldTree extends ABFieldTreeCore {
       return detailComponentSetting;
    }
 
-   getValue(item, rowData) {
+   getValue(item) {
+      if (!item) return {};
+      // selectivity
       let values = {};
-      values = item.getValues();
+      if (typeof item.getValues == "function") {
+         values = item.getValues();
+      } else if (typeof item.getValue == "function") {
+         values = item.getValue();
+      }
       return values;
    }
 
@@ -437,7 +454,11 @@ module.exports = class ABFieldTree extends ABFieldTreeCore {
 
       const val = rowData[this.columnName] || [];
 
-      item.setValues(val);
+      if (typeof item.setValues == "function") {
+         item.setValues(val);
+      } else if (typeof item.setValue == "function") {
+         item.setValue(val);
+      }
       // get dom
       const dom = item.$view.querySelector(".list-data-values");
 

AppBuilder/platform/plugins/included/index.js

@@ -1,3 +1,5 @@
+import viewDataview from "./view_dataview/FNAbviewdataview.js";
+import viewForm from "./view_form/FNAbviewform.js";
 import viewCarousel from "./view_carousel/FNAbviewcarousel.js";
 import viewComment from "./view_comment/FNAbviewcomment.js";
 import viewCsvExporter from "./view_csvExporter/FNAbviewcsvexporter.js";
@@ -17,7 +19,6 @@ const AllPlugins = [
    viewComment,
    viewCsvExporter,
    viewCsvImporter,
-   viewCsvImporter,
    viewDataSelect,
    viewDetail,
    viewImage,
@@ -27,6 +28,8 @@ const AllPlugins = [
    viewPdfImporter,
    viewTab,
    viewText,
+   viewDataview,
+   viewForm,
 ];
 
 export default {