Rat/csv plugins

.github/workflows/e2e-test.yml

@@ -30,19 +30,19 @@ jobs:
                - branch: master
                  webpack: update
       steps:
-         - uses: actions/checkout@v4
+         - uses: actions/checkout@v6
            with:
               path: plugins/plugin_ABDesigner
               ref: ${{ inputs.ref }}
          - name: Generate a token
            id: generate-token
-           uses: actions/create-github-app-token@v2
+           uses: actions/create-github-app-token@v3
            with:
               app-id: ${{ inputs.app_id }}
               private-key: ${{ secrets.app_secret }}
               repositories: ab_service_web
 
-         - uses: actions/checkout@v4
+         - uses: actions/checkout@v6
            with:
               path: web
               repository: CruGlobal/ab_service_web
@@ -64,7 +64,7 @@ jobs:
               repository: CruGlobal/ab_service_web
 
          - name: Check out kitchen-sink tests
-           uses: actions/checkout@v4
+           uses: actions/checkout@v6
            with:
               repository: CruGlobal/kitchensink_app
               path: ab/test/e2e/cypress/e2e/kitchensink_app
@@ -87,13 +87,13 @@ jobs:
            run: npm run test:e2e:ab-designer -- --browser chrome
            working-directory: ./ab
 
-         - uses: actions/upload-artifact@v4
+         - uses: actions/upload-artifact@v6
            if: failure()
            with:
               name: cypress-screenshots
               path: ./ab/test/e2e/cypress/screenshots
 
-         - uses: actions/upload-artifact@v4
+         - uses: actions/upload-artifact@v6
            if: failure()
            with:
               name: ABServices.log

src/plugins/index.js

@@ -1,3 +1,7 @@
+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 viewCarouselProperties from "./web_view_carousel/FNAbviewcarousel.js";
 import viewCarouselEditor from "./web_view_carousel/FNAbviewcarouselEditor.js";
 import viewCommentProperties from "./web_view_comment/FNAbviewcomment.js";
@@ -46,6 +50,10 @@ const AllPlugins = [
    viewTabEditor,
    viewTextProperties,
    viewTextEditor,
+   CsvExporterEditor,
+   CsvExporterProperties,
+   CsvImporterEditor,
+   CsvImporterProperties,
 ];
 
 export default {

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();
+   const L = AB.Label();
+
+
+   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
+      }
+
+
+
 
-   class ABViewCSVExporterProperty extends ABViewClassProperty {
       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,38 @@
-/*
- * ABViewCSVImporter
- * A Property manager for our ABViewCSVImporter widget
- */
+// FNAbviewcsvimporter Properties
+// A properties side import for an ABView.
+//
+import FABViewRuleListFormRecordRules from "../../rootPages/Designer/properties/rules/ABViewRuleListFormRecordRules.js";
+
+export default function FNAbviewcsvimporterProperties({
+   AB,
+   ABViewPropertiesPlugin,
+   // ABUIPlugin,
+}) {
+   const BASE_ID = "properties_abview_csvimporter";
 
-import FViewClass from "./ABView";
-import ABRecordRule from "../rules/ABViewRuleListFormRecordRules";
+   const uiConfig = AB.Config.uiSettings();
+   const L = AB.Label();
+
+   const PopupRecordRule = FABViewRuleListFormRecordRules(
+      AB,
+      `${BASE_ID}_popupRecordRule`
+   );
+
+
+   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
+      }
 
-let PopupRecordRule = null;
 
-export default function (AB) {
-   const BASE_ID = "properties_abview_csvimporter";
 
-   const ABViewClassProperty = FViewClass(AB);
-   const uiConfig = AB.Config.uiSettings();
-   const L = ABViewClassProperty.L();
 
-   class ABViewCSVImporterProperty extends ABViewClassProperty {
       constructor(baseID) {
          super(baseID ?? BASE_ID, {
             datacollection: "",
@@ -34,8 +51,6 @@ export default function (AB) {
 
       ui() {
          const ids = this.ids;
-         PopupRecordRule = ABRecordRule(this.AB, this.base);
-         // PopupRecordRule.component(`${this.base}_recordrule`);
 
          return super.ui([
             {
@@ -71,9 +86,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 +212,7 @@ export default function (AB) {
             f.selected = options.selectAll
                ? true
                : availableFields.filter((fieldId) => f.id == fieldId).length >
-                 0;
+               0;
 
             return f;
          });
@@ -229,13 +243,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 +370,8 @@ export default function (AB) {
       }
    }
 
-   return ABViewCSVImporterProperty;
+
+
+
 }
+