Rat/csv plugins

.github/workflows/e2e-test.yml

@@ -38,7 +38,7 @@ jobs:
            id: generate-token
            uses: actions/create-github-app-token@v3
            with:
-              app-id: ${{ inputs.app_id }}
+              client-id: ${{ inputs.app_id }}
               private-key: ${{ secrets.app_secret }}
               repositories: ab_service_web
 

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 viewCarouselEditor from "./web_view_carousel/FNAbviewcarouselEditor.js";
 import viewCarouselProperties from "./web_view_carousel/FNAbviewcarousel.js";
 import viewCommentEditor from "./web_view_comment/FNAbviewcommentEditor.js";
@@ -31,6 +35,10 @@ import viewTextEditor from "./web_view_text/FNAbviewtextEditor.js";
 import viewTextProperties from "./web_view_text/FNAbviewtext.js";
 
 const AllPlugins = [
+   CsvExporterEditor,
+   CsvExporterProperties,
+   CsvImporterEditor,
+   CsvImporterProperties,
    viewCarouselEditor,
    viewCarouselProperties,
    viewCommentEditor,

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

@@ -1,18 +1,25 @@
-/*
- * 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,
+}) {
    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 +29,7 @@ export default function (AB) {
             width: "",
             buttonFilter: "",
             fields: "",
+            dataviewID: "",
          });
 
          this.AB = AB;
@@ -340,7 +348,5 @@ export default function (AB) {
       ViewClass() {
          return super._ViewClass("csvExporter");
       }
-   }
-
-   return ABViewCSVExporterProperty;
+   };
 }

src/plugins/web_view_csvExporter/FNAbviewcsvexporterEditor.js

@@ -0,0 +1,50 @@
+// 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({ ABViewEditorPlugin }) {
+   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) {
+         this.AB = AB;
+         await super.init(AB);
+      }
+
+      detatch() {
+         super.detatch();
+      }
+
+      onShow() {
+         super.onShow();
+      }
+   };
+}

src/plugins/web_view_csvImporter/CSVImporter.js

@@ -0,0 +1,155 @@
+const FieldTypeTool = require("./FieldTypeTool");
+
+module.exports = function FCSVImporter({ AB }) {
+   return class CSVImporter {
+      constructor(fileReader = FileReader) {
+         this._AB = AB;
+         this._FileReader = fileReader;
+      }
+
+      L(...params) {
+         return this._AB.Multilingual.labelPlugin("ABDesigner", ...params);
+      }
+
+      getSeparateItems() {
+         return [
+            { id: ",", value: this.L("Comma (,)") },
+            {
+               id: "\t",
+               value: this.L("Tab (      )"),
+            },
+            { id: ";", value: this.L("Semicolon (;)") },
+            { id: "s", value: this.L("Space ( )") },
+         ];
+      }
+
+      /**
+       * @method validateFile
+       * Validate file extension
+       *
+       * @param {*} fileInfo - https://docs.webix.com/api__ui.uploader_onbeforefileadd_event.html
+       *
+       * @return {boolean}
+       */
+      validateFile(fileInfo) {
+         if (!fileInfo || !fileInfo.file || !fileInfo.file.type) return false;
+
+         // validate file type
+         let extensionType = fileInfo.file.type.toLowerCase();
+         if (
+            extensionType == "text/csv" ||
+            extensionType == "application/vnd.ms-excel"
+         ) {
+            return true;
+         } else {
+            return false;
+         }
+      }
+
+      /**
+       * @method getDataRows
+       * Pull data rows from the CSV file
+       *
+       * @param {Object} fileInfo - https://docs.webix.com/api__ui.uploader_onbeforefileadd_event.html
+       * @param {string} separatedBy
+       *
+       * @return {Promise} -[
+       * 						["Value 1.1", "Value 1.2", "Value 1.3"],
+       * 						["Value 2.1", "Value 2.2", "Value 2.3"],
+       * 					]
+       */
+      async getDataRows(fileInfo, separatedBy) {
+         if (!this.validateFile(fileInfo))
+            return Promise.reject(this.L(".fileInfo parameter is invalid"));
+
+         return new Promise((resolve, reject) => {
+            // read CSV file
+            let reader = new this._FileReader();
+            reader.onload = (e) => {
+               const result = this.convertToArray(reader.result, separatedBy);
+
+               resolve(result);
+            };
+            reader.readAsText(fileInfo.file);
+         });
+      }
+
+      /**
+       * @method convertToArray
+       * Pull data rows from the CSV file
+       *
+       * @param {string} text
+       * @param {string} separatedBy
+       *
+       * @return {Promise} -[
+       * 						["Value 1.1", "Value 1.2", "Value 1.3"],
+       * 						["Value 2.1", "Value 2.2", "Value 2.3"],
+       * 					]
+       */
+      convertToArray(text = "", separatedBy = ",") {
+         let result = [];
+
+         // split lines
+         let dataRows = text
+            .split(/\r\n|\n|\r/) // CRLF = \r\n; LF = \n; CR = \r;
+            .filter((row) => row && row.length > 0);
+
+         // split columns
+         (dataRows || []).forEach((row) => {
+            let dataCols = [];
+            if (separatedBy == ",") {
+               // NOTE: if the file contains ,, .match(), then can not recognize this empty string
+               row = row.replace(/,,/g, ", ,");
+
+               // https://stackoverflow.com/questions/11456850/split-a-string-by-commas-but-ignore-commas-within-double-quotes-using-javascript#answer-11457952
+               dataCols = row.match(/(".*?"|[^",]+)(?=\s*,|\s*$)/g);
+            } else {
+               dataCols = row.split(separatedBy);
+            }
+
+            result.push(dataCols.map((dCol) => this.reformat(dCol)));
+         });
+
+         return result;
+      }
+
+      /**
+       * @method getGuessDataType
+       *
+       * @param dataRows {Array} - [
+       * 								["Value 1.1", "Value 1.2", "Value 1.3"],
+       * 								["Value 2.1", "Value 2.2", "Value 2.3"],
+       * 							]
+       * @param colIndex {Number}
+       *
+       * @return {string}
+       */
+      getGuessDataType(dataRows, colIndex) {
+         var data,
+            repeatNum = 10;
+
+         // Loop to find a value
+         for (var i = 1; i <= repeatNum; i++) {
+            var line = dataRows[i];
+            if (!line) break;
+
+            data = line[colIndex];
+
+            if (data != null && data.length > 0) break;
+         }
+
+         return FieldTypeTool.getFieldType(data);
+      }
+
+      /**
+       * @method reformat
+       *
+       * @param {string} str
+       */
+      reformat(str) {
+         if (!str) return "";
+
+         return str.trim().replace(/"/g, "").replace(/'/g, "");
+      }
+   };
+};