initial csv plugin setup

src/plugins/index.js

@@ -1,10 +1,24 @@
-import viewListProperties from "./web_view_list/FNAbviewlist.js";
-import TabProperties from "./web_view_tab/FNAbviewtab.js";
-import TabEditor from "./web_view_tab/FNAbviewtabEditor.js";
-import viewLabelProperties from "./web_view_label/FNAbviewLabel.js";
+import CsvExporterEditor from "./web_view_csvExporter/FNAbviewcsvexporterEditor.js";
+import CsvExporterProperties from "./web_view_csvExporter/FNAbviewcsvexporter.js";
+import CsvImporterEditor from "./web_view_csvImporter/FNAbviewcsvimporterEditor.js";
+import CsvImporterProperties from "./web_view_csvImporter/FNAbviewcsvimporter.js";
 import LabelEditor from "./web_view_label/FNAbviewLabelEditor.js";
+import LabelProperties from "./web_view_label/FNAbviewLabel.js";
+import ListProperties from "./web_view_list/FNAbviewlist.js";
+import TabEditor from "./web_view_tab/FNAbviewtabEditor.js";
+import TabProperties from "./web_view_tab/FNAbviewtab.js";
 
-const AllPlugins = [TabProperties, TabEditor, viewListProperties, viewLabelProperties, LabelEditor];
+const AllPlugins = [TabProperties,
+   CsvExporterEditor,
+   CsvExporterProperties,
+   CsvImporterEditor,
+   CsvImporterProperties,
+   LabelEditor,
+   TabEditor,
+   TabProperties,
+   LabelProperties,
+   ListProperties,
+];
 
 export default {
    load: (AB) => {

src/rootPages/Designer/properties/views/ABViewCSVExporter.js → src/plugins/web_view_csvExporter/FNAbviewcsvexporter.js

@@ -1,18 +1,31 @@
-/*
- * ABViewCSVExporter
- * A Property manager for our ABViewCSVExporter widget
- */
-
-import FViewClass from "./ABView";
-
-export default function (AB) {
+// FNAbviewcsvexporter Properties
+// A properties side import for an ABView.
+//
+export default function FNAbviewcsvexporterProperties({
+   AB,
+   ABViewPropertiesPlugin,
+   // ABUIPlugin,
+}) {
    const BASE_ID = "properties_abview_csvexporter";
 
    const ABViewClassProperty = FViewClass(AB);
    const uiConfig = AB.Config.uiSettings();
    const L = ABViewClassProperty.L();
 
-   class ABViewCSVExporterProperty extends ABViewClassProperty {
+   return class ABAbviewcsvexporterProperties extends ABViewPropertiesPlugin {
+
+      static getPluginKey() {
+         return this.key;
+      }
+
+      static getPluginType() {
+         return "properties-view";
+         // properties-view : will display in the properties panel of the ABDesigner
+      }
+
+
+
+
       constructor(baseID) {
          super(baseID ?? BASE_ID, {
             datacollection: "",
@@ -22,6 +35,7 @@ export default function (AB) {
             width: "",
             buttonFilter: "",
             fields: "",
+            dataviewID: "",
          });
 
          this.AB = AB;
@@ -143,9 +157,8 @@ export default function (AB) {
                   autoheight: true,
                   select: false,
                   template: (item) => {
-                     return `<span style="min-width: 18px; display: inline-block;"><i class="fa ${
-                        item.isHidden ? "fa-square-o" : "fa-check-square-o"
-                     } ab-visible-field-icon"></i>&nbsp;</span> ${item.label}`;
+                     return `<span style="min-width: 18px; display: inline-block;"><i class="fa ${item.isHidden ? "fa-square-o" : "fa-check-square-o"
+                        } ab-visible-field-icon"></i>&nbsp;</span> ${item.label}`;
                   },
                   on: {
                      onItemClick: (id, e, node) => {
@@ -192,19 +205,19 @@ export default function (AB) {
 
          $$(ids.hasHeader).setValue(
             view.settings.hasHeader ??
-               ABViewCSVExporterPropertyComponentDefaults.hasHeader
+            ABViewCSVExporterPropertyComponentDefaults.hasHeader
          );
          $$(ids.buttonLabel).setValue(
             view.settings.buttonLabel ??
-               ABViewCSVExporterPropertyComponentDefaults.buttonLabel
+            ABViewCSVExporterPropertyComponentDefaults.buttonLabel
          );
          $$(ids.filename).setValue(
             view.settings.filename ??
-               ABViewCSVExporterPropertyComponentDefaults.filename
+            ABViewCSVExporterPropertyComponentDefaults.filename
          );
          $$(ids.width).setValue(
             view.settings.width ??
-               ABViewCSVExporterPropertyComponentDefaults.width
+            ABViewCSVExporterPropertyComponentDefaults.width
          );
 
          this.populateFilter();
@@ -341,6 +354,5 @@ export default function (AB) {
          return super._ViewClass("csvExporter");
       }
    }
-
-   return ABViewCSVExporterProperty;
 }
+

src/plugins/web_view_csvExporter/FNAbviewcsvexporterEditor.js

@@ -0,0 +1,63 @@
+// FNAbviewcsvexporter 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.
+//
+export default function FNAbviewcsvexporterEditor({ AB, ABViewEditorPlugin }) {
+   // var L = UIClass.L();
+   // var L = ABViewContainer.L();
+
+   return class ABAbviewcsvexporterEditor extends ABViewEditorPlugin {
+
+      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 "csvExporter";
+      }
+
+      constructor(view, base = "interface_editor_csvExporter") {
+         // base: {string} unique base id reference
+         super(view, base);
+      }
+
+      ui() {
+         return super.ui();
+      }
+
+      async init(AB) {
+         await super.init(AB);
+
+         this.component.init(this.AB);
+
+         // this.component.onShow();
+         // in our editor, we provide accessLv = 2
+      }
+
+      detatch() {
+         this.component?.detatch?.();
+         super.detatch();
+
+      }
+
+      onShow() {
+         this.component?.onShow?.();
+         super.onShow();
+      }
+   };
+
+
+}

src/rootPages/Designer/properties/views/ABViewCSVImporter.js → src/plugins/web_view_csvImporter/FNAbviewcsvimporter.js

@@ -1,21 +1,33 @@
-/*
- * ABViewCSVImporter
- * A Property manager for our ABViewCSVImporter widget
- */
-
-import FViewClass from "./ABView";
-import ABRecordRule from "../rules/ABViewRuleListFormRecordRules";
-
-let PopupRecordRule = null;
-
-export default function (AB) {
+// FNAbviewcsvimporter Properties
+// A properties side import for an ABView.
+//
+export default function FNAbviewcsvimporterProperties({
+   AB,
+   ABViewPropertiesPlugin,
+   // ABUIPlugin,
+}) {
    const BASE_ID = "properties_abview_csvimporter";
 
    const ABViewClassProperty = FViewClass(AB);
    const uiConfig = AB.Config.uiSettings();
    const L = ABViewClassProperty.L();
 
-   class ABViewCSVImporterProperty extends ABViewClassProperty {
+
+
+   return class ABAbviewcsvimporterProperties extends ABViewPropertiesPlugin {
+
+      static getPluginKey() {
+         return this.key;
+      }
+
+      static getPluginType() {
+         return "properties-view";
+         // properties-view : will display in the properties panel of the ABDesigner
+      }
+
+
+
+
       constructor(baseID) {
          super(baseID ?? BASE_ID, {
             datacollection: "",
@@ -71,9 +83,8 @@ export default function (AB) {
                         template: this.listTemplate.bind(this),
                         type: {
                            markCheckbox: function (item) {
-                              return `<span class='check webix_icon fa fa-${
-                                 item.selected ? "check-" : ""
-                              }square-o'></span>`;
+                              return `<span class='check webix_icon fa fa-${item.selected ? "check-" : ""
+                                 }square-o'></span>`;
                            },
                         },
                         onClick: {
@@ -198,7 +209,7 @@ export default function (AB) {
             f.selected = options.selectAll
                ? true
                : availableFields.filter((fieldId) => f.id == fieldId).length >
-                 0;
+               0;
 
             return f;
          });
@@ -229,13 +240,10 @@ export default function (AB) {
             (v) => v.common().key == componentKey
          )[0];
 
-         return `${$common.markCheckbox(field)} ${
-            field.label
-         } <div class='ab-component-form-fields-component-info'> <i class='fa fa-${
-            formComponent?.common()?.icon ?? "fw"
-         }'></i> ${
-            formComponent ? L(formComponent.common().labelKey ?? "Label") : ""
-         } </div>`;
+         return `${$common.markCheckbox(field)} ${field.label
+            } <div class='ab-component-form-fields-component-info'> <i class='fa fa-${formComponent?.common()?.icon ?? "fw"
+            }'></i> ${formComponent ? L(formComponent.common().labelKey ?? "Label") : ""
+            } </div>`;
       }
 
       check(e, fieldId) {
@@ -359,5 +367,8 @@ export default function (AB) {
       }
    }
 
-   return ABViewCSVImporterProperty;
+
+
+
 }
+

src/plugins/web_view_csvImporter/FNAbviewcsvimporterEditor.js

@@ -0,0 +1,64 @@
+// FNAbviewcsvimporter 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.
+//
+export default function FNAbviewcsvimporterEditor({ AB, ABViewEditorPlugin }) {
+   // var L = UIClass.L();
+      // var L = ABViewContainer.L();
+
+return class ABAbviewcsvimporterEditor extends ABViewEditorPlugin {
+
+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 "csvImporter";
+         }
+
+         constructor(view, base = "interface_editor_csvImporter") {
+            // base: {string} unique base id reference
+
+            super(view, base);
+         }
+
+         ui() {
+            return this.component.ui();
+         }
+
+         init(AB) {
+            this.AB = AB;
+
+            this.component.init(this.AB);
+
+            // this.component.onShow();
+            // in our editor, we provide accessLv = 2
+         }
+
+         detatch() {
+            this.component?.detatch?.();
+         }
+
+         onShow() {
+            this.component?.onShow?.();
+         }
+      };
+
+
+}

src/rootPages/Designer/editors/EditorManager.js

@@ -21,8 +21,6 @@ export default function (AB) {
       require("./views/ABViewComment"),
       require("./views/ABViewConditionalContainer"),
       require("./views/ABViewContainer"),
-      require("./views/ABViewCSVExporter"),
-      require("./views/ABViewCSVImporter"),
       require("./views/ABViewDataSelect"),
       require("./views/ABViewDataview"),
       require("./views/ABViewDetail"),
@@ -32,7 +30,6 @@ export default function (AB) {
       require("./views/ABViewGantt"),
       require("./views/ABViewGrid"),
       require("./views/ABViewKanban"),
-      // require("./views/ABViewLabel"),
       require("./views/ABViewLayout"),
       require("./views/ABViewMenu"),
       require("./views/ABViewPage"),