Migrate chart view editors to plugin architecture

src/plugins/index.js

@@ -37,6 +37,16 @@ import viewTabEditor from "./web_view_tab/FNAbviewtabEditor.js";
 import viewTabProperties from "./web_view_tab/FNAbviewtab.js";
 import viewTextEditor from "./web_view_text/FNAbviewtextEditor.js";
 import viewTextProperties from "./web_view_text/FNAbviewtext.js";
+import viewChartProperties from "./web_view_chart/properties/FNAbviewchart.js";
+import viewChartEditor from "./web_view_chart/editors/FNAbviewchartEditor.js";
+
+import FABViewContainer from "../rootPages/Designer/properties/views/ABViewContainer.js";
+import FABViewContainerEditor from "../rootPages/Designer/editors/views/ABViewContainer.js";
+
+const ABDesignResources = {
+   FABViewContainer,
+   FABViewContainerEditor,
+};
 
 const AllPlugins = [
    CsvExporterEditor,
@@ -77,13 +87,15 @@ const AllPlugins = [
    viewTextEditor,
    viewTextProperties,
    viewDocxBuilderProperties,
-   viewDocxBuilderEditor
+   viewDocxBuilderEditor,
+   viewChartProperties,
+   viewChartEditor,
 ];
 
 export default {
    load: (AB) => {
       AllPlugins.forEach((plugin) => {
-         AB.pluginRegister(plugin);
+         AB.pluginRegister((api) => plugin({ ...api, ...ABDesignResources }));
       });
    },
 };

src/plugins/web_view_chart/editors/FNAbviewchartEditor.js

@@ -0,0 +1,56 @@
+import FNAbviewchartareaEditor from "./FNAbviewchartareaEditor.js";
+import FNAbviewchartbarEditor from "./FNAbviewchartbarEditor.js";
+import FNAbviewchartlineEditor from "./FNAbviewchartlineEditor.js";
+import FNAbviewchartpieEditor from "./FNAbviewchartpieEditor.js";
+
+export default function FNAbviewchartEditor({
+   AB,
+   ABViewEditorPlugin,
+   FABViewContainerEditor,
+}) {
+   const ABViewContainer = FABViewContainerEditor(AB);
+   const BASE_ID = "interface_editor_viewchart";
+
+   class ABAbviewchartEditor extends ABViewContainer {
+      static getPluginKey() {
+         return "chart";
+      }
+
+      static getPluginType() {
+         return "editor-view";
+      }
+
+      constructor(view, base = BASE_ID) {
+         super(view, base);
+      }
+
+      static get key() {
+         return "chart";
+      }
+
+      ui() {
+         const _ui = super.ui();
+         _ui.rows[0].cellHeight = 400;
+         return _ui;
+      }
+
+      async init(AB) {
+         this.AB = AB;
+         await super.init(AB);
+      }
+
+      detatch() {}
+
+      onShow() {
+         super.onShow();
+      }
+   }
+
+   return [
+      ABAbviewchartEditor,
+      FNAbviewchartareaEditor({ ABViewEditorPlugin }),
+      FNAbviewchartbarEditor({ ABViewEditorPlugin }),
+      FNAbviewchartlineEditor({ ABViewEditorPlugin }),
+      FNAbviewchartpieEditor({ ABViewEditorPlugin }),
+   ];
+}

src/plugins/web_view_chart/editors/FNAbviewchartareaEditor.js

@@ -0,0 +1,19 @@
+export default function FNAbviewchartareaEditor({ ABViewEditorPlugin }) {
+   return class ABAbviewchartareaEditor extends ABViewEditorPlugin {
+      static getPluginKey() {
+         return this.key;
+      }
+
+      static getPluginType() {
+         return "editor-view";
+      }
+
+      static get key() {
+         return "area";
+      }
+
+      constructor(view, base = "interface_editor_viewchart_area") {
+         super(view, base);
+      }
+   };
+}

src/plugins/web_view_chart/editors/FNAbviewchartbarEditor.js

@@ -0,0 +1,19 @@
+export default function FNAbviewchartbarEditor({ ABViewEditorPlugin }) {
+   return class ABAbviewchartbarEditor extends ABViewEditorPlugin {
+      static getPluginKey() {
+         return this.key;
+      }
+
+      static getPluginType() {
+         return "editor-view";
+      }
+
+      static get key() {
+         return "bar";
+      }
+
+      constructor(view, base = "interface_editor_viewchart_bar") {
+         super(view, base);
+      }
+   };
+}

src/plugins/web_view_chart/editors/FNAbviewchartlineEditor.js

@@ -0,0 +1,19 @@
+export default function FNAbviewchartlineEditor({ ABViewEditorPlugin }) {
+   return class ABAbviewchartlineEditor extends ABViewEditorPlugin {
+      static getPluginKey() {
+         return this.key;
+      }
+
+      static getPluginType() {
+         return "editor-view";
+      }
+
+      static get key() {
+         return "line";
+      }
+
+      constructor(view, base = "interface_editor_viewchart_line") {
+         super(view, base);
+      }
+   };
+}

src/plugins/web_view_chart/editors/FNAbviewchartpieEditor.js

@@ -0,0 +1,19 @@
+export default function FNAbviewchartpieEditor({ ABViewEditorPlugin }) {
+   return class ABAbviewchartpieEditor extends ABViewEditorPlugin {
+      static getPluginKey() {
+         return this.key;
+      }
+
+      static getPluginType() {
+         return "editor-view";
+      }
+
+      static get key() {
+         return "pie";
+      }
+
+      constructor(view, base = "interface_editor_viewchart_pie") {
+         super(view, base);
+      }
+   };
+}

src/rootPages/Designer/properties/views/ABViewChart.js → src/plugins/web_view_chart/properties/FNAbviewchart.js

@@ -1,18 +1,28 @@
-/*
- * ABViewChart
- * A Property manager for our ABViewChart definitions
- */
-
-import FABViewContainer from "./ABViewContainer";
+import FNAbviewchartareaProperties from "./FNAbviewchartarea.js";
+import FNAbviewchartbarProperties from "./FNAbviewchartbar.js";
+import FNAbviewchartlineProperties from "./FNAbviewchartline.js";
+import FNAbviewchartpieProperties from "./FNAbviewchartpie.js";
+
+export default function FNAbviewchartProperties({
+   AB,
+   ABViewPropertiesPlugin,
+   FABViewContainer,
+}) {
+   const ABViewContainer = FABViewContainer(AB);
+   const uiConfig = AB.Config.uiSettings();
+   const L = AB.Label();
 
-export default function (AB) {
    const BASE_ID = "properties_abview_chart";
 
-   const ABViewContainer = FABViewContainer(AB);
-   const uiConfig = AB.Config.uiSettings();
-   const L = ABViewContainer.L();
+   class ABAbviewchartProperties extends ABViewContainer {
+      static getPluginKey() {
+         return "chart";
+      }
+
+      static getPluginType() {
+         return "properties-view";
+      }
 
-   class ABViewChartProperty extends ABViewContainer {
       constructor() {
          super(BASE_ID, {
             dataviewID: "",
@@ -190,10 +200,6 @@ export default function (AB) {
       updateCharts() {
          // UPDATE charts when parent properties are changed
          this.CurrentView.refreshData();
-
-         // baseView.views().forEach((e) => {
-         //    e.parent.refreshData();
-         // });
       }
 
       populateDataview() {
@@ -361,5 +367,11 @@ export default function (AB) {
       }
    }
 
-   return ABViewChartProperty;
+   return [
+      ABAbviewchartProperties,
+      FNAbviewchartareaProperties({ AB, ABViewPropertiesPlugin }),
+      FNAbviewchartbarProperties({ AB, ABViewPropertiesPlugin }),
+      FNAbviewchartlineProperties({ AB, ABViewPropertiesPlugin }),
+      FNAbviewchartpieProperties({ AB, ABViewPropertiesPlugin }),
+   ];
 }

src/rootPages/Designer/properties/views/ABViewChartArea.js → src/plugins/web_view_chart/properties/FNAbviewchartarea.js

@@ -1,18 +1,21 @@
-/*
- * ABViewChartArea
- * A Property manager for our ABViewChartArea definitions
- */
-
-import FABView from "./ABView";
+export default function FNAbviewchartareaProperties({
+   AB,
+   ABViewPropertiesPlugin,
+}) {
+   const uiConfig = AB.Config.uiSettings();
+   const L = AB.Label();
 
-export default function (AB) {
    const BASE_ID = "properties_abview_chart_area";
 
-   const ABView = FABView(AB);
-   const uiConfig = AB.Config.uiSettings();
-   const L = ABView.L();
+   return class ABAbviewchartareaProperties extends ABViewPropertiesPlugin {
+      static getPluginKey() {
+         return "area";
+      }
+
+      static getPluginType() {
+         return "properties-view";
+      }
 
-   class ABViewChartAreaProperty extends ABView {
       constructor() {
          super(BASE_ID, {});
 
@@ -46,12 +49,6 @@ export default function (AB) {
                   },
                },
             },
-            // {
-            // 	name: 'chartWidth',
-            // 	view: 'counter',
-            // 	min: 1,
-            // 	label: L('ab.component.chart.area.chartWidth', '*Width')
-            // },
             {
                name: "chartHeight",
                view: "counter",
@@ -166,7 +163,5 @@ export default function (AB) {
       ViewClass() {
          return super._ViewClass("area");
       }
-   }
-
-   return ABViewChartAreaProperty;
+   };
 }

src/rootPages/Designer/properties/views/ABViewChartBar.js → src/plugins/web_view_chart/properties/FNAbviewchartbar.js

@@ -1,18 +1,21 @@
-/*
- * ABViewChartArea
- * A Property manager for our ABViewChartArea definitions
- */
-
-import FABView from "./ABView";
+export default function FNAbviewchartbarProperties({
+   AB,
+   ABViewPropertiesPlugin,
+}) {
+   const uiConfig = AB.Config.uiSettings();
+   const L = AB.Label();
 
-export default function (AB) {
    const BASE_ID = "properties_abview_chart_bar";
 
-   const ABView = FABView(AB);
-   const uiConfig = AB.Config.uiSettings();
-   const L = ABView.L();
+   return class ABAbviewchartbarProperties extends ABViewPropertiesPlugin {
+      static getPluginKey() {
+         return "bar";
+      }
+
+      static getPluginType() {
+         return "properties-view";
+      }
 
-   class ABViewChartBarProperty extends ABView {
       constructor() {
          super(BASE_ID, {});
 
@@ -71,12 +74,6 @@ export default function (AB) {
                   },
                },
             },
-            // {
-            // 	name: 'chartWidth',
-            // 	view: 'counter',
-            // 	min: 1,
-            // 	label: L('ab.component.chart.bar.chartWidth', '*Width')
-            // },
             {
                name: "height",
                view: "counter",
@@ -191,7 +188,5 @@ export default function (AB) {
       ViewClass() {
          return super._ViewClass("bar");
       }
-   }
-
-   return ABViewChartBarProperty;
+   };
 }