From 18a3eecaf9c752fd34d2c9ef2b9ccc7e4323dd95 Mon Sep 17 00:00:00 2001 From: roguisharcanetrickster Date: Tue, 17 Feb 2026 16:15:45 +0700 Subject: [PATCH 1/6] plugin label update --- src/plugins/index.js | 6 +- .../FNAbviewcsvexporter.js} | 48 ++-- .../FNAbviewcsvexporterEditor.js | 63 ++++++ src/plugins/web_view_label/FNAbviewLabel.js | 210 ++++++++++++++++++ .../web_view_label/FNAbviewLabelEditor.js | 103 +++++++++ .../Designer/editors/EditorManager.js | 2 - .../editors/views/ABViewCSVExporter.js | 57 ----- .../Designer/editors/views/ABViewLabel.js | 78 ------- .../Designer/properties/PropertyManager.js | 3 +- 9 files changed, 412 insertions(+), 158 deletions(-) rename src/{rootPages/Designer/properties/views/ABViewCSVExporter.js => plugins/web_view_csvExporter/FNAbviewcsvexporter.js} (91%) create mode 100644 src/plugins/web_view_csvExporter/FNAbviewcsvexporterEditor.js create mode 100644 src/plugins/web_view_label/FNAbviewLabel.js create mode 100644 src/plugins/web_view_label/FNAbviewLabelEditor.js delete mode 100644 src/rootPages/Designer/editors/views/ABViewCSVExporter.js delete mode 100644 src/rootPages/Designer/editors/views/ABViewLabel.js diff --git a/src/plugins/index.js b/src/plugins/index.js index a8b0b552..5c5aacf3 100644 --- a/src/plugins/index.js +++ b/src/plugins/index.js @@ -1,8 +1,12 @@ +import viewCsvExporterProperties from "./web_view_csvExporter/FNAbviewcsvexporter.js"; +import CsvExporterEditor from "./web_view_csvExporter/FNAbviewcsvexporterEditor.js"; 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 LabelEditor from "./web_view_label/FNAbviewLabelEditor.js"; -const AllPlugins = [TabProperties, TabEditor, viewListProperties]; +const AllPlugins = [TabProperties, TabEditor, viewListProperties, viewLabelProperties, LabelEditor, viewCsvExporterProperties, CsvExporterEditor]; export default { load: (AB) => { diff --git a/src/rootPages/Designer/properties/views/ABViewCSVExporter.js b/src/plugins/web_view_csvExporter/FNAbviewcsvexporter.js similarity index 91% rename from src/rootPages/Designer/properties/views/ABViewCSVExporter.js rename to src/plugins/web_view_csvExporter/FNAbviewcsvexporter.js index f37e75ab..d95c4d48 100644 --- a/src/rootPages/Designer/properties/views/ABViewCSVExporter.js +++ b/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 `  ${item.label}`; + return `  ${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; } + diff --git a/src/plugins/web_view_csvExporter/FNAbviewcsvexporterEditor.js b/src/plugins/web_view_csvExporter/FNAbviewcsvexporterEditor.js new file mode 100644 index 00000000..bcf5198a --- /dev/null +++ b/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(); + } + }; + + +} diff --git a/src/plugins/web_view_label/FNAbviewLabel.js b/src/plugins/web_view_label/FNAbviewLabel.js new file mode 100644 index 00000000..93827053 --- /dev/null +++ b/src/plugins/web_view_label/FNAbviewLabel.js @@ -0,0 +1,210 @@ +// FNViewLabel Properties +// A properties side import for an ABView. +// +export default function FNViewLabelProperties({ + AB, + ABViewPropertiesPlugin, +}) { + return class ABViewLabelProperties extends ABViewPropertiesPlugin { + constructor() { + super(ABViewLabelProperties.getPluginKey(), { + text: "", + format: "", + alignment: "", + }); + this.AB = AB; + } + + + static getPluginKey() { + return "label"; + } + + static get key() { + return "label"; + } + + static getPluginType() { + return "properties-view"; + // properties-view : will display in the properties panel of the ABDesigner + } + + defaultValues() { + let values = { + format: 0, + alignment: "left" + }; + return values; + } + + ui() { + const ids = this.ids; + let L = this.AB.Label(); + const defaultValues = this.defaultValues(); + let initial_text = this.view?.settings?.text || ""; + return super.ui([ + // .text : The Text displayed for this label + { + id: ids.text, + view: "text", + name: initial_text || "text", + label: L("Text"), + placeholder: L("Text Placeholder"), + on: { + onChange: (newValue, oldValue) => { + if (newValue !== oldValue) { + const baseView = this.CurrentView; + + baseView.text = newValue; + + baseView.save(); + this.onChange(); + } + }, + }, + }, + { + view: "fieldset", + label: L("Format Options:"), + body: { + type: "clean", + padding: 10, + rows: [ + { + id: ids.format, + view: "radio", + name: "format", + vertical: true, + value: defaultValues.format, + options: [ + { + id: 0, + value: L("normal"), + }, + { + id: 1, + value: L("title"), + }, + { + id: 2, + value: L("description"), + }, + ], + on: { + onChange: () => { + this.onChange(); + }, + }, + }, + ], + }, + }, + { + view: "fieldset", + label: L("Alignment:"), + body: { + type: "clean", + padding: 10, + rows: [ + { + id: ids.alignment, + view: "radio", + name: "alignment", + vertical: true, + value: defaultValues.alignment, + options: [ + { + id: "left", + value: L("Left"), + }, + { + id: "center", + value: L("Center"), + }, + { + id: "right", + value: L("Right"), + }, + ], + on: { + onChange: () => { + this.onChange(); + }, + }, + }, + ], + }, + }, + {}, + ]); + } + + async init(AB) { + this.AB = AB; + await super.init(AB); + } + + /** + * @method populate + * populate the properties with the values from the view. + * @param {obj} view + */ + populate(view) { + super.populate(view); + const ids = this.ids; + + $$(ids.text).setValue(view.text); + $$(ids.format).setValue(view.settings.format); + $$(ids.alignment).setValue(view.settings.alignment); + } + + /** + * @method values + * return the values from the property editor + * @return {obj} + */ + values() { + const values = super.values(); + + const ids = this.ids; + const $component = $$(ids.component); + values.settings = $component.getValues(); + values.text = values.settings.text; + + return values; + } + + /** + * @method fromValues() + * + * initialze this object with the given set of values. + * @param {obj} values + */ + fromValues(values) { + super.fromValues(values); + + this.settings = this.settings || {}; + + // convert from "0" => 0 + this.settings.height = parseInt( + this.settings.height || ABViewTextPropertyComponentDefaults.height + ); + + // if this is being instantiated on a read from the Property UI, + this.text = values.text || ABViewTextPropertyComponentDefaults.text; + + // NOTE: ABView auto translates/untranslates "label" + // add in any additional fields here: + this.translate(this, this, ["text"]); + } + /** + * @method FieldClass() + * A method to return the proper ABViewXXX Definition. + * NOTE: Must be overwritten by the Child Class + */ + ViewClass() { + return super._ViewClass("label"); + } + }; +} + diff --git a/src/plugins/web_view_label/FNAbviewLabelEditor.js b/src/plugins/web_view_label/FNAbviewLabelEditor.js new file mode 100644 index 00000000..6f83f958 --- /dev/null +++ b/src/plugins/web_view_label/FNAbviewLabelEditor.js @@ -0,0 +1,103 @@ +// FNViewLabel 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 FNViewLabelEditor({ AB, ABViewEditorPlugin }) { + const BASE_ID = "interface_editor_viewlabel"; + + return class ABViewLabelEditor extends ABViewEditorPlugin { + constructor(view, base = BASE_ID, ids = {}) { + // view: {ABView} The ABView instance this editor is for + // BASE_ID: {string} unique base id reference + // ids: {hash} { key => '' } + // this is provided by the Sub Class and has the keys + // unique to the Sub Class' interface elements. + + super(view, base, ids); + } + + /** + * @method getPluginKey + * return the plugin key for this editor. + * @return {string} plugin key + */ + static getPluginKey() { + return "label"; + } + + static get key() { + return "label"; + } + /** + * @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 + } + + /** + * @method ui() + * Return the Webix UI definition for this editor. + * @return {object} Webix UI definition + */ + ui() { + // Default implementation uses the component's UI + // Sub classes can override this to provide custom editor UI + return super.ui(); + } + + /** + * @method init() + * Initialize the editor with the ABFactory instance. + * @param {ABFactory} AB + */ + async init(AB) { + await super.init(AB); + + // + // Add any custom initialization here + // + } + + /** + * @method onShow() + * Called when the editor is shown. + */ + onShow() { + super.onShow(); + // + // Add any custom onShow logic here + // + } + + /** + * @method onHide() + * Called when the editor is hidden. + */ + onHide() { + super.onHide(); + + // + // Add any custom onHide logic here + // + } + + /** + * @method detatch() + * Detach the editor component. + */ + detatch() { + super.detatch(); + + // + // Add any custom cleanup logic here + // + } + }; +} diff --git a/src/rootPages/Designer/editors/EditorManager.js b/src/rootPages/Designer/editors/EditorManager.js index fa036320..7cc8e9cd 100644 --- a/src/rootPages/Designer/editors/EditorManager.js +++ b/src/rootPages/Designer/editors/EditorManager.js @@ -21,7 +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"), @@ -32,7 +31,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"), diff --git a/src/rootPages/Designer/editors/views/ABViewCSVExporter.js b/src/rootPages/Designer/editors/views/ABViewCSVExporter.js deleted file mode 100644 index 92e411da..00000000 --- a/src/rootPages/Designer/editors/views/ABViewCSVExporter.js +++ /dev/null @@ -1,57 +0,0 @@ -/** - * ABViewCSVExporterEditor - * The widget that displays the UI Editor Component on the screen - * when designing the UI. - */ -let myClass = null; -// {singleton} -// we will want to call this factory fn() repeatedly in our imports, -// but we only want to define 1 Class reference. - -import UI_Class from "../../ui_class"; - -export default function (AB) { - if (!myClass) { - const UIClass = UI_Class(AB); - // var L = UIClass.L(); - // var L = ABViewContainer.L(); - - myClass = class ABViewCSVExporterEditor extends UIClass { - static get key() { - return "csvExporter"; - } - - constructor(view, base = "interface_editor_csvExporter") { - // base: {string} unique base id reference - - super(view, base); - - this.view = view; - this.component = this.view.component(); - } - - 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?.(); - } - }; - } - - return myClass; -} diff --git a/src/rootPages/Designer/editors/views/ABViewLabel.js b/src/rootPages/Designer/editors/views/ABViewLabel.js deleted file mode 100644 index 970c56f4..00000000 --- a/src/rootPages/Designer/editors/views/ABViewLabel.js +++ /dev/null @@ -1,78 +0,0 @@ -/** - * ABViewLabel - * The widget that displays the UI Editor Component on the screen - * when designing the UI. - */ -let myClass = null; -// {singleton} -// we will want to call this factory fn() repeatedly in our imports, -// but we only want to define 1 Class reference. - -import UI_Class from "../../ui_class"; - -export default function (AB) { - if (!myClass) { - const BASE_ID = "interface_editor_viewlabel"; - - const UIClass = UI_Class(AB); - - myClass = class ABViewTextEditor extends UIClass { - static get key() { - return "label"; - } - - constructor(view, base = BASE_ID) { - // base: {string} unique base id reference - super(base); - - this.AB = AB; - this.view = view; - this.component = this.view.component(); - } - - ui() { - const ids = this.ids; - const baseView = this.view; - const component = this.component; - const _ui = { - type: "form", - margin: 10, - padding: 10, - borderless: true, - rows: [ - { - id: ids.component, - view: "label", - label: baseView.text || "", - align: baseView.settings.alignment, - }, - {}, - ], - }; - - return component.uiFormatting(_ui); - } - - async init(AB) { - this.AB = AB; - - webix.codebase = "/js/webix/extras/"; - - await this.component.init(this.AB); - - // this.component.onShow(); - // in our editor, we provide accessLv = 2 - } - - detatch() { - this.component.detatch?.(); - } - - onShow() { - this.component.onShow(); - } - }; - } - - return myClass; -} diff --git a/src/rootPages/Designer/properties/PropertyManager.js b/src/rootPages/Designer/properties/PropertyManager.js index 3e97a0c2..78169be5 100644 --- a/src/rootPages/Designer/properties/PropertyManager.js +++ b/src/rootPages/Designer/properties/PropertyManager.js @@ -79,7 +79,6 @@ export default function (AB) { require("./views/ABViewComment"), require("./views/ABViewConditionalContainer"), require("./views/ABViewContainer"), - require("./views/ABViewCSVExporter"), require("./views/ABViewCSVImporter"), require("./views/ABViewDataFilter"), require("./views/ABViewDataSelect"), @@ -109,7 +108,7 @@ export default function (AB) { require("./views/ABViewGrid"), require("./views/ABViewImage"), require("./views/ABViewKanban"), - require("./views/ABViewLabel"), + // require("./views/ABViewLabel"), require("./views/ABViewLayout"), // require("./views/ABViewList"), require("./views/ABViewMenu"), From 08d94ba6db4d9be9299f3b77574e1baa1dbe6653 Mon Sep 17 00:00:00 2001 From: roguisharcanetrickster Date: Wed, 18 Feb 2026 09:49:55 +0700 Subject: [PATCH 2/6] update imports --- src/plugins/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/plugins/index.js b/src/plugins/index.js index 5c5aacf3..06d49fee 100644 --- a/src/plugins/index.js +++ b/src/plugins/index.js @@ -6,6 +6,7 @@ import TabEditor from "./web_view_tab/FNAbviewtabEditor.js"; import viewLabelProperties from "./web_view_label/FNAbviewLabel.js"; import LabelEditor from "./web_view_label/FNAbviewLabelEditor.js"; + const AllPlugins = [TabProperties, TabEditor, viewListProperties, viewLabelProperties, LabelEditor, viewCsvExporterProperties, CsvExporterEditor]; export default { From f3eb6765a3bab2f11e1680ce4ba15d2684405976 Mon Sep 17 00:00:00 2001 From: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Date: Wed, 4 Mar 2026 06:25:03 +0000 Subject: [PATCH 3/6] Update version 1.14.0 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index d910f040..b9b198b2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "abdesigner", - "version": "1.13.0", + "version": "1.13.1", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "abdesigner", - "version": "1.13.0", + "version": "1.13.1", "license": "ISC", "dependencies": { "@codemirror/lang-javascript": "^6.2.3", diff --git a/package.json b/package.json index fc9b00bd..ff645afa 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "abdesigner", - "version": "1.13.1", + "version": "1.14.0", "description": "(AppBuilder) A UI for designing AB resources.", "main": "index.js", "scripts": { From 6fe1046859e0f32b01fc1d88ae8bebf4296ad1d9 Mon Sep 17 00:00:00 2001 From: roguisharcanetrickster Date: Mon, 9 Mar 2026 15:06:08 +0700 Subject: [PATCH 4/6] migrate csv import --- src/plugins/index.js | 4 +- .../FNAbviewcsvimporter.js | 374 +++++++++ .../FNAbviewcsvimporterEditor.js | 64 ++ .../Designer/editors/EditorManager.js | 2 +- .../Designer/properties/PropertyManager.js | 2 +- .../properties/views/ABViewCSVImporter.js | 726 +++++++++--------- 6 files changed, 806 insertions(+), 366 deletions(-) create mode 100644 src/plugins/web_view_csvImporter/FNAbviewcsvimporter.js create mode 100644 src/plugins/web_view_csvImporter/FNAbviewcsvimporterEditor.js diff --git a/src/plugins/index.js b/src/plugins/index.js index 06d49fee..c4a9717b 100644 --- a/src/plugins/index.js +++ b/src/plugins/index.js @@ -1,3 +1,5 @@ +import viewCsvImporterProperties from "./web_view_csvImporter/FNAbviewcsvimporter.js"; +import viewCsvImporterEditor from "./web_view_csvImporter/FNAbviewcsvimporterEditor.js"; import viewCsvExporterProperties from "./web_view_csvExporter/FNAbviewcsvexporter.js"; import CsvExporterEditor from "./web_view_csvExporter/FNAbviewcsvexporterEditor.js"; import viewListProperties from "./web_view_list/FNAbviewlist.js"; @@ -7,7 +9,7 @@ import viewLabelProperties from "./web_view_label/FNAbviewLabel.js"; import LabelEditor from "./web_view_label/FNAbviewLabelEditor.js"; -const AllPlugins = [TabProperties, TabEditor, viewListProperties, viewLabelProperties, LabelEditor, viewCsvExporterProperties, CsvExporterEditor]; +const AllPlugins = [TabProperties, TabEditor, viewListProperties, viewLabelProperties, LabelEditor, viewCsvExporterProperties, CsvExporterEditor, viewCsvImporterProperties, viewCsvImporterEditor]; export default { load: (AB) => { diff --git a/src/plugins/web_view_csvImporter/FNAbviewcsvimporter.js b/src/plugins/web_view_csvImporter/FNAbviewcsvimporter.js new file mode 100644 index 00000000..2c149c64 --- /dev/null +++ b/src/plugins/web_view_csvImporter/FNAbviewcsvimporter.js @@ -0,0 +1,374 @@ +// 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(); + + + + 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: "", + fields: "", + buttonLabel: "", + buttonRecordRules: "", + width: "", + }); + + this.AB = AB; + } + + static get key() { + return "csvImporter"; + } + + ui() { + const ids = this.ids; + PopupRecordRule = ABRecordRule(this.AB, this.base); + // PopupRecordRule.component(`${this.base}_recordrule`); + + return super.ui([ + { + view: "fieldset", + label: L("Data:"), + labelWidth: uiConfig.labelWidthLarge, + body: { + id: ids.datacollection, + name: "datacollection", + view: "richselect", + label: L("Data Source"), + labelWidth: uiConfig.labelWidthLarge, + skipAutoSave: true, + on: { + onChange: (newVal) => this.selectSource(newVal), + }, + }, + }, + { + view: "fieldset", + label: L("Available Fields:"), + labelWidth: uiConfig.labelWidthLarge, + body: { + type: "clean", + padding: 10, + rows: [ + { + id: ids.fields, + name: "fields", + view: "list", + select: false, + minHeight: 250, + template: this.listTemplate.bind(this), + type: { + markCheckbox: function (item) { + return ``; + }, + }, + onClick: { + check: this.check.bind(this), + }, + }, + ], + }, + }, + { + view: "fieldset", + label: L("Rules:"), + labelWidth: uiConfig.labelWidthLarge, + body: { + type: "clean", + padding: 10, + rows: [ + { + cols: [ + { + view: "label", + label: L("Record Rules:"), + width: uiConfig.labelWidthLarge, + }, + { + id: ids.buttonRecordRules, + view: "button", + name: "buttonRecordRules", + css: "webix_primary", + label: L("Settings"), + icon: "fa fa-gear", + type: "icon", + badge: 0, + click: this.recordRuleShow.bind(this), + }, + ], + }, + ], + }, + }, + { + view: "fieldset", + label: L("Customize Display:"), + labelWidth: uiConfig.labelWidthLarge, + body: { + type: "clean", + padding: 10, + rows: [ + { + id: ids.buttonLabel, + name: "buttonLabel", + view: "text", + label: L("Label"), + labelWidth: uiConfig.labelWidthXLarge, + on: { + onChange: () => this.onChange(), + }, + }, + { + id: ids.width, + view: "counter", + name: "width", + label: L("Width:"), + labelWidth: uiConfig.labelWidthXLarge, + on: { + onChange: () => this.onChange(), + }, + }, + ], + }, + }, + ]); + } + + async init(AB) { + this.AB = AB; + + await super.init(AB); + + PopupRecordRule.init(AB); + PopupRecordRule.on("save", () => { + this.populateBadgeNumber(); + }); + } + + selectSource(dcId) { + const view = this.CurrentView; + view.settings = view.settings ?? {}; + view.settings.dataviewID = dcId; + + this.updateRules(); + this.populateAvailableFields({ selectAll: true }); + this.onChange(); + } + + updateRules() { + // Populate values to rules + const selectedDv = this.CurrentView.datacollection; + if (selectedDv?.datasource) { + PopupRecordRule.objectLoad(selectedDv.datasource); + } + + PopupRecordRule.fromSettings( + this.CurrentView?.settings?.recordRules ?? [] + ); + } + + populateAvailableFields(options = {}) { + const ids = this.ids; + const view = this.CurrentView; + + const datacollection = this.AB.datacollectionByID( + view.settings.dataviewID + ); + const object = datacollection?.datasource; + + view.settings = view.settings ?? {}; + const availableFields = view.settings.availableFieldIds ?? []; + + // Pull field list + const fieldOptions = object?.fields()?.map((f) => { + f.selected = options.selectAll + ? true + : availableFields.filter((fieldId) => f.id == fieldId).length > + 0; + + return f; + }); + + $$(ids.fields).clearAll(); + $$(ids.fields).parse(fieldOptions); + } + + populateBadgeNumber() { + const ids = this.ids; + const view = this.CurrentView; + if (!view) return; + + $$(ids.buttonRecordRules).define( + "badge", + view.settings?.recordRules?.length ?? null + ); + $$(ids.buttonRecordRules).refresh(); + } + + listTemplate(field, $common) { + const fieldComponent = field.formComponent(); + if (fieldComponent == null) + return ` ${field.label}
Disable
`; + + const componentKey = fieldComponent.common().key; + const formComponent = this.CurrentApplication.viewAll( + (v) => v.common().key == componentKey + )[0]; + + return `${$common.markCheckbox(field)} ${field.label + }
${formComponent ? L(formComponent.common().labelKey ?? "Label") : "" + }
`; + } + + check(e, fieldId) { + const ids = this.ids; + + // update UI list + let item = $$(ids.fields).getItem(fieldId); + item.selected = item.selected ? 0 : 1; + $$(ids.fields).updateItem(fieldId, item); + this.onChange(); + } + + recordRuleShow() { + this.updateRules(); + if (PopupRecordRule.CurrentObject) PopupRecordRule.show(); + + // Workaround + PopupRecordRule.qbFixAfterShow(); + } + + populate(view) { + super.populate(view); + + const ids = this.ids; + + view.settings = view.settings ?? {}; + + this.populateDataCollections(); + this.populateAvailableFields(); + + $$(ids.buttonLabel).setValue(view.settings.buttonLabel); + $$(ids.width).setValue(view.settings.width); + + view.settings.availableFieldIds = []; + let fields = $$(ids.fields).find({ selected: true }); + (fields || []).forEach((f) => { + view.settings.availableFieldIds.push(f.id); + }); + } + + populateDataCollections() { + const ids = this.ids; + const view = this.CurrentView; + + const datacollections = + this.CurrentApplication.datacollectionsIncluded().map((dc) => { + return { + id: dc.id, + value: dc.label, + icon: + dc.sourceType === "query" + ? "fa fa-filter" + : "fa fa-database", + }; + }); + + const $d = $$(ids.datacollection); + $d.define("options", datacollections); + $d.define("value", view.settings.dataviewID); + $d.refresh(); + } + + defaultValues() { + const values = { + dataviewID: null, + buttonLabel: "Upload CSV", + width: 0, + recordRules: [], + availableFieldIds: [], + }; + + const FieldClass = this.ViewClass(); + if (FieldClass) { + const fcValues = FieldClass.defaultValues(); + Object.keys(fcValues).forEach((k) => { + values[k] = fcValues[k]; + }); + } + + return values; + } + + /** + * @method values + * return the values for this form. + * @return {obj} + */ + values() { + const ids = this.ids; + const values = super.values(); + + values.settings = values.settings ?? {}; + values.settings.dataviewID = $$(ids.datacollection).getValue(); + values.settings.recordRules = PopupRecordRule.toSettings(); + values.settings.buttonLabel = $$(ids.buttonLabel).getValue(); + values.settings.width = $$(ids.width).getValue(); + + values.settings.availableFieldIds = []; + $$(ids.fields) + .find({ selected: true }) + .forEach((f) => { + values.settings.availableFieldIds.push(f.id); + }); + + return values; + } + + /** + * @method FieldClass() + * A method to return the proper ABViewXXX Definition. + * NOTE: Must be overwritten by the Child Class + */ + ViewClass() { + return super._ViewClass("csvImporter"); + } + + toSettings() { + var base = this.defaults(); + base.settings = this.defaultValues(); + return base; + } + } + + + + +} + diff --git a/src/plugins/web_view_csvImporter/FNAbviewcsvimporterEditor.js b/src/plugins/web_view_csvImporter/FNAbviewcsvimporterEditor.js new file mode 100644 index 00000000..7a5f3f3c --- /dev/null +++ b/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?.(); + } + }; + + +} diff --git a/src/rootPages/Designer/editors/EditorManager.js b/src/rootPages/Designer/editors/EditorManager.js index 7cc8e9cd..45c165f5 100644 --- a/src/rootPages/Designer/editors/EditorManager.js +++ b/src/rootPages/Designer/editors/EditorManager.js @@ -21,7 +21,7 @@ export default function (AB) { require("./views/ABViewComment"), require("./views/ABViewConditionalContainer"), require("./views/ABViewContainer"), - require("./views/ABViewCSVImporter"), + // // require("./views/ABViewCSVImporter"), require("./views/ABViewDataSelect"), require("./views/ABViewDataview"), require("./views/ABViewDetail"), diff --git a/src/rootPages/Designer/properties/PropertyManager.js b/src/rootPages/Designer/properties/PropertyManager.js index 78169be5..2e329c8e 100644 --- a/src/rootPages/Designer/properties/PropertyManager.js +++ b/src/rootPages/Designer/properties/PropertyManager.js @@ -79,7 +79,7 @@ export default function (AB) { require("./views/ABViewComment"), require("./views/ABViewConditionalContainer"), require("./views/ABViewContainer"), - require("./views/ABViewCSVImporter"), + // // require("./views/ABViewCSVImporter"), require("./views/ABViewDataFilter"), require("./views/ABViewDataSelect"), require("./views/ABViewDataview"), diff --git a/src/rootPages/Designer/properties/views/ABViewCSVImporter.js b/src/rootPages/Designer/properties/views/ABViewCSVImporter.js index 307b2876..be4a0627 100644 --- a/src/rootPages/Designer/properties/views/ABViewCSVImporter.js +++ b/src/rootPages/Designer/properties/views/ABViewCSVImporter.js @@ -1,363 +1,363 @@ -/* - * ABViewCSVImporter - * A Property manager for our ABViewCSVImporter widget - */ - -import FViewClass from "./ABView"; -import ABRecordRule from "../rules/ABViewRuleListFormRecordRules"; - -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: "", - fields: "", - buttonLabel: "", - buttonRecordRules: "", - width: "", - }); - - this.AB = AB; - } - - static get key() { - return "csvImporter"; - } - - ui() { - const ids = this.ids; - PopupRecordRule = ABRecordRule(this.AB, this.base); - // PopupRecordRule.component(`${this.base}_recordrule`); - - return super.ui([ - { - view: "fieldset", - label: L("Data:"), - labelWidth: uiConfig.labelWidthLarge, - body: { - id: ids.datacollection, - name: "datacollection", - view: "richselect", - label: L("Data Source"), - labelWidth: uiConfig.labelWidthLarge, - skipAutoSave: true, - on: { - onChange: (newVal) => this.selectSource(newVal), - }, - }, - }, - { - view: "fieldset", - label: L("Available Fields:"), - labelWidth: uiConfig.labelWidthLarge, - body: { - type: "clean", - padding: 10, - rows: [ - { - id: ids.fields, - name: "fields", - view: "list", - select: false, - minHeight: 250, - template: this.listTemplate.bind(this), - type: { - markCheckbox: function (item) { - return ``; - }, - }, - onClick: { - check: this.check.bind(this), - }, - }, - ], - }, - }, - { - view: "fieldset", - label: L("Rules:"), - labelWidth: uiConfig.labelWidthLarge, - body: { - type: "clean", - padding: 10, - rows: [ - { - cols: [ - { - view: "label", - label: L("Record Rules:"), - width: uiConfig.labelWidthLarge, - }, - { - id: ids.buttonRecordRules, - view: "button", - name: "buttonRecordRules", - css: "webix_primary", - label: L("Settings"), - icon: "fa fa-gear", - type: "icon", - badge: 0, - click: this.recordRuleShow.bind(this), - }, - ], - }, - ], - }, - }, - { - view: "fieldset", - label: L("Customize Display:"), - labelWidth: uiConfig.labelWidthLarge, - body: { - type: "clean", - padding: 10, - rows: [ - { - id: ids.buttonLabel, - name: "buttonLabel", - view: "text", - label: L("Label"), - labelWidth: uiConfig.labelWidthXLarge, - on: { - onChange: () => this.onChange(), - }, - }, - { - id: ids.width, - view: "counter", - name: "width", - label: L("Width:"), - labelWidth: uiConfig.labelWidthXLarge, - on: { - onChange: () => this.onChange(), - }, - }, - ], - }, - }, - ]); - } - - async init(AB) { - this.AB = AB; - - await super.init(AB); - - PopupRecordRule.init(AB); - PopupRecordRule.on("save", () => { - this.populateBadgeNumber(); - }); - } - - selectSource(dcId) { - const view = this.CurrentView; - view.settings = view.settings ?? {}; - view.settings.dataviewID = dcId; - - this.updateRules(); - this.populateAvailableFields({ selectAll: true }); - this.onChange(); - } - - updateRules() { - // Populate values to rules - const selectedDv = this.CurrentView.datacollection; - if (selectedDv?.datasource) { - PopupRecordRule.objectLoad(selectedDv.datasource); - } - - PopupRecordRule.fromSettings( - this.CurrentView?.settings?.recordRules ?? [] - ); - } - - populateAvailableFields(options = {}) { - const ids = this.ids; - const view = this.CurrentView; - - const datacollection = this.AB.datacollectionByID( - view.settings.dataviewID - ); - const object = datacollection?.datasource; - - view.settings = view.settings ?? {}; - const availableFields = view.settings.availableFieldIds ?? []; - - // Pull field list - const fieldOptions = object?.fields()?.map((f) => { - f.selected = options.selectAll - ? true - : availableFields.filter((fieldId) => f.id == fieldId).length > - 0; - - return f; - }); - - $$(ids.fields).clearAll(); - $$(ids.fields).parse(fieldOptions); - } - - populateBadgeNumber() { - const ids = this.ids; - const view = this.CurrentView; - if (!view) return; - - $$(ids.buttonRecordRules).define( - "badge", - view.settings?.recordRules?.length ?? null - ); - $$(ids.buttonRecordRules).refresh(); - } - - listTemplate(field, $common) { - const fieldComponent = field.formComponent(); - if (fieldComponent == null) - return ` ${field.label}
Disable
`; - - const componentKey = fieldComponent.common().key; - const formComponent = this.CurrentApplication.viewAll( - (v) => v.common().key == componentKey - )[0]; - - return `${$common.markCheckbox(field)} ${ - field.label - }
${ - formComponent ? L(formComponent.common().labelKey ?? "Label") : "" - }
`; - } - - check(e, fieldId) { - const ids = this.ids; - - // update UI list - let item = $$(ids.fields).getItem(fieldId); - item.selected = item.selected ? 0 : 1; - $$(ids.fields).updateItem(fieldId, item); - this.onChange(); - } - - recordRuleShow() { - this.updateRules(); - if (PopupRecordRule.CurrentObject) PopupRecordRule.show(); - - // Workaround - PopupRecordRule.qbFixAfterShow(); - } - - populate(view) { - super.populate(view); - - const ids = this.ids; - - view.settings = view.settings ?? {}; - - this.populateDataCollections(); - this.populateAvailableFields(); - - $$(ids.buttonLabel).setValue(view.settings.buttonLabel); - $$(ids.width).setValue(view.settings.width); - - view.settings.availableFieldIds = []; - let fields = $$(ids.fields).find({ selected: true }); - (fields || []).forEach((f) => { - view.settings.availableFieldIds.push(f.id); - }); - } - - populateDataCollections() { - const ids = this.ids; - const view = this.CurrentView; - - const datacollections = - this.CurrentApplication.datacollectionsIncluded().map((dc) => { - return { - id: dc.id, - value: dc.label, - icon: - dc.sourceType === "query" - ? "fa fa-filter" - : "fa fa-database", - }; - }); - - const $d = $$(ids.datacollection); - $d.define("options", datacollections); - $d.define("value", view.settings.dataviewID); - $d.refresh(); - } - - defaultValues() { - const values = { - dataviewID: null, - buttonLabel: "Upload CSV", - width: 0, - recordRules: [], - availableFieldIds: [], - }; - - const FieldClass = this.ViewClass(); - if (FieldClass) { - const fcValues = FieldClass.defaultValues(); - Object.keys(fcValues).forEach((k) => { - values[k] = fcValues[k]; - }); - } - - return values; - } - - /** - * @method values - * return the values for this form. - * @return {obj} - */ - values() { - const ids = this.ids; - const values = super.values(); - - values.settings = values.settings ?? {}; - values.settings.dataviewID = $$(ids.datacollection).getValue(); - values.settings.recordRules = PopupRecordRule.toSettings(); - values.settings.buttonLabel = $$(ids.buttonLabel).getValue(); - values.settings.width = $$(ids.width).getValue(); - - values.settings.availableFieldIds = []; - $$(ids.fields) - .find({ selected: true }) - .forEach((f) => { - values.settings.availableFieldIds.push(f.id); - }); - - return values; - } - - /** - * @method FieldClass() - * A method to return the proper ABViewXXX Definition. - * NOTE: Must be overwritten by the Child Class - */ - ViewClass() { - return super._ViewClass("csvImporter"); - } - - toSettings() { - var base = this.defaults(); - base.settings = this.defaultValues(); - return base; - } - } - - return ABViewCSVImporterProperty; -} +// /* +// * ABViewCSVImporter +// * A Property manager for our ABViewCSVImporter widget +// */ + +// import FViewClass from "./ABView"; +// import ABRecordRule from "../rules/ABViewRuleListFormRecordRules"; + +// 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: "", +// fields: "", +// buttonLabel: "", +// buttonRecordRules: "", +// width: "", +// }); + +// this.AB = AB; +// } + +// static get key() { +// return "csvImporter"; +// } + +// ui() { +// const ids = this.ids; +// PopupRecordRule = ABRecordRule(this.AB, this.base); +// // PopupRecordRule.component(`${this.base}_recordrule`); + +// return super.ui([ +// { +// view: "fieldset", +// label: L("Data:"), +// labelWidth: uiConfig.labelWidthLarge, +// body: { +// id: ids.datacollection, +// name: "datacollection", +// view: "richselect", +// label: L("Data Source"), +// labelWidth: uiConfig.labelWidthLarge, +// skipAutoSave: true, +// on: { +// onChange: (newVal) => this.selectSource(newVal), +// }, +// }, +// }, +// { +// view: "fieldset", +// label: L("Available Fields:"), +// labelWidth: uiConfig.labelWidthLarge, +// body: { +// type: "clean", +// padding: 10, +// rows: [ +// { +// id: ids.fields, +// name: "fields", +// view: "list", +// select: false, +// minHeight: 250, +// template: this.listTemplate.bind(this), +// type: { +// markCheckbox: function (item) { +// return ``; +// }, +// }, +// onClick: { +// check: this.check.bind(this), +// }, +// }, +// ], +// }, +// }, +// { +// view: "fieldset", +// label: L("Rules:"), +// labelWidth: uiConfig.labelWidthLarge, +// body: { +// type: "clean", +// padding: 10, +// rows: [ +// { +// cols: [ +// { +// view: "label", +// label: L("Record Rules:"), +// width: uiConfig.labelWidthLarge, +// }, +// { +// id: ids.buttonRecordRules, +// view: "button", +// name: "buttonRecordRules", +// css: "webix_primary", +// label: L("Settings"), +// icon: "fa fa-gear", +// type: "icon", +// badge: 0, +// click: this.recordRuleShow.bind(this), +// }, +// ], +// }, +// ], +// }, +// }, +// { +// view: "fieldset", +// label: L("Customize Display:"), +// labelWidth: uiConfig.labelWidthLarge, +// body: { +// type: "clean", +// padding: 10, +// rows: [ +// { +// id: ids.buttonLabel, +// name: "buttonLabel", +// view: "text", +// label: L("Label"), +// labelWidth: uiConfig.labelWidthXLarge, +// on: { +// onChange: () => this.onChange(), +// }, +// }, +// { +// id: ids.width, +// view: "counter", +// name: "width", +// label: L("Width:"), +// labelWidth: uiConfig.labelWidthXLarge, +// on: { +// onChange: () => this.onChange(), +// }, +// }, +// ], +// }, +// }, +// ]); +// } + +// async init(AB) { +// this.AB = AB; + +// await super.init(AB); + +// PopupRecordRule.init(AB); +// PopupRecordRule.on("save", () => { +// this.populateBadgeNumber(); +// }); +// } + +// selectSource(dcId) { +// const view = this.CurrentView; +// view.settings = view.settings ?? {}; +// view.settings.dataviewID = dcId; + +// this.updateRules(); +// this.populateAvailableFields({ selectAll: true }); +// this.onChange(); +// } + +// updateRules() { +// // Populate values to rules +// const selectedDv = this.CurrentView.datacollection; +// if (selectedDv?.datasource) { +// PopupRecordRule.objectLoad(selectedDv.datasource); +// } + +// PopupRecordRule.fromSettings( +// this.CurrentView?.settings?.recordRules ?? [] +// ); +// } + +// populateAvailableFields(options = {}) { +// const ids = this.ids; +// const view = this.CurrentView; + +// const datacollection = this.AB.datacollectionByID( +// view.settings.dataviewID +// ); +// const object = datacollection?.datasource; + +// view.settings = view.settings ?? {}; +// const availableFields = view.settings.availableFieldIds ?? []; + +// // Pull field list +// const fieldOptions = object?.fields()?.map((f) => { +// f.selected = options.selectAll +// ? true +// : availableFields.filter((fieldId) => f.id == fieldId).length > +// 0; + +// return f; +// }); + +// $$(ids.fields).clearAll(); +// $$(ids.fields).parse(fieldOptions); +// } + +// populateBadgeNumber() { +// const ids = this.ids; +// const view = this.CurrentView; +// if (!view) return; + +// $$(ids.buttonRecordRules).define( +// "badge", +// view.settings?.recordRules?.length ?? null +// ); +// $$(ids.buttonRecordRules).refresh(); +// } + +// listTemplate(field, $common) { +// const fieldComponent = field.formComponent(); +// if (fieldComponent == null) +// return ` ${field.label}
Disable
`; + +// const componentKey = fieldComponent.common().key; +// const formComponent = this.CurrentApplication.viewAll( +// (v) => v.common().key == componentKey +// )[0]; + +// return `${$common.markCheckbox(field)} ${ +// field.label +// }
${ +// formComponent ? L(formComponent.common().labelKey ?? "Label") : "" +// }
`; +// } + +// check(e, fieldId) { +// const ids = this.ids; + +// // update UI list +// let item = $$(ids.fields).getItem(fieldId); +// item.selected = item.selected ? 0 : 1; +// $$(ids.fields).updateItem(fieldId, item); +// this.onChange(); +// } + +// recordRuleShow() { +// this.updateRules(); +// if (PopupRecordRule.CurrentObject) PopupRecordRule.show(); + +// // Workaround +// PopupRecordRule.qbFixAfterShow(); +// } + +// populate(view) { +// super.populate(view); + +// const ids = this.ids; + +// view.settings = view.settings ?? {}; + +// this.populateDataCollections(); +// this.populateAvailableFields(); + +// $$(ids.buttonLabel).setValue(view.settings.buttonLabel); +// $$(ids.width).setValue(view.settings.width); + +// view.settings.availableFieldIds = []; +// let fields = $$(ids.fields).find({ selected: true }); +// (fields || []).forEach((f) => { +// view.settings.availableFieldIds.push(f.id); +// }); +// } + +// populateDataCollections() { +// const ids = this.ids; +// const view = this.CurrentView; + +// const datacollections = +// this.CurrentApplication.datacollectionsIncluded().map((dc) => { +// return { +// id: dc.id, +// value: dc.label, +// icon: +// dc.sourceType === "query" +// ? "fa fa-filter" +// : "fa fa-database", +// }; +// }); + +// const $d = $$(ids.datacollection); +// $d.define("options", datacollections); +// $d.define("value", view.settings.dataviewID); +// $d.refresh(); +// } + +// defaultValues() { +// const values = { +// dataviewID: null, +// buttonLabel: "Upload CSV", +// width: 0, +// recordRules: [], +// availableFieldIds: [], +// }; + +// const FieldClass = this.ViewClass(); +// if (FieldClass) { +// const fcValues = FieldClass.defaultValues(); +// Object.keys(fcValues).forEach((k) => { +// values[k] = fcValues[k]; +// }); +// } + +// return values; +// } + +// /** +// * @method values +// * return the values for this form. +// * @return {obj} +// */ +// values() { +// const ids = this.ids; +// const values = super.values(); + +// values.settings = values.settings ?? {}; +// values.settings.dataviewID = $$(ids.datacollection).getValue(); +// values.settings.recordRules = PopupRecordRule.toSettings(); +// values.settings.buttonLabel = $$(ids.buttonLabel).getValue(); +// values.settings.width = $$(ids.width).getValue(); + +// values.settings.availableFieldIds = []; +// $$(ids.fields) +// .find({ selected: true }) +// .forEach((f) => { +// values.settings.availableFieldIds.push(f.id); +// }); + +// return values; +// } + +// /** +// * @method FieldClass() +// * A method to return the proper ABViewXXX Definition. +// * NOTE: Must be overwritten by the Child Class +// */ +// ViewClass() { +// return super._ViewClass("csvImporter"); +// } + +// toSettings() { +// var base = this.defaults(); +// base.settings = this.defaultValues(); +// return base; +// } +// } + +// return ABViewCSVImporterProperty; +// } From 70703ab23c79aa6f9fc30348aff4fc1b569c91a7 Mon Sep 17 00:00:00 2001 From: roguisharcanetrickster Date: Mon, 9 Mar 2026 16:08:38 +0700 Subject: [PATCH 5/6] fix index --- src/plugins/index.js | 25 +++++++++++++++++-------- 1 file changed, 17 insertions(+), 8 deletions(-) diff --git a/src/plugins/index.js b/src/plugins/index.js index c4a9717b..b2b7939c 100644 --- a/src/plugins/index.js +++ b/src/plugins/index.js @@ -1,15 +1,24 @@ -import viewCsvImporterProperties from "./web_view_csvImporter/FNAbviewcsvimporter.js"; -import viewCsvImporterEditor from "./web_view_csvImporter/FNAbviewcsvimporterEditor.js"; -import viewCsvExporterProperties from "./web_view_csvExporter/FNAbviewcsvexporter.js"; import CsvExporterEditor from "./web_view_csvExporter/FNAbviewcsvexporterEditor.js"; -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 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, viewCsvExporterProperties, CsvExporterEditor, viewCsvImporterProperties, viewCsvImporterEditor]; +const AllPlugins = [TabProperties, + CsvExporterEditor, + CsvExporterProperties, + CsvImporterEditor, + CsvImporterProperties, + LabelEditor, + TabEditor, + LabelProperties, + ListProperties, +]; export default { load: (AB) => { From 5b674d926f541d2bbe04cfc60c3d2d9827aebf19 Mon Sep 17 00:00:00 2001 From: roguisharcanetrickster Date: Mon, 9 Mar 2026 16:17:28 +0700 Subject: [PATCH 6/6] remove old --- .../web_view_csvImporter}/CSVImporter.js | 0 .../editors/views/ABViewCSVImporter.js | 57 --- .../properties/views/ABViewCSVImporter.js | 363 ------------------ 3 files changed, 420 deletions(-) rename src/{utils => plugins/web_view_csvImporter}/CSVImporter.js (100%) delete mode 100644 src/rootPages/Designer/editors/views/ABViewCSVImporter.js delete mode 100644 src/rootPages/Designer/properties/views/ABViewCSVImporter.js diff --git a/src/utils/CSVImporter.js b/src/plugins/web_view_csvImporter/CSVImporter.js similarity index 100% rename from src/utils/CSVImporter.js rename to src/plugins/web_view_csvImporter/CSVImporter.js diff --git a/src/rootPages/Designer/editors/views/ABViewCSVImporter.js b/src/rootPages/Designer/editors/views/ABViewCSVImporter.js deleted file mode 100644 index 8d0a0662..00000000 --- a/src/rootPages/Designer/editors/views/ABViewCSVImporter.js +++ /dev/null @@ -1,57 +0,0 @@ -/** - * ABViewCSVImporterEditor - * The widget that displays the UI Editor Component on the screen - * when designing the UI. - */ -let myClass = null; -// {singleton} -// we will want to call this factory fn() repeatedly in our imports, -// but we only want to define 1 Class reference. - -import UI_Class from "../../ui_class"; - -export default function (AB) { - if (!myClass) { - const UIClass = UI_Class(AB); - // var L = UIClass.L(); - // var L = ABViewContainer.L(); - - myClass = class ABViewCSVImporterEditor extends UIClass { - static get key() { - return "csvImporter"; - } - - constructor(view, base = "interface_editor_csvImporter") { - // base: {string} unique base id reference - - super(view, base); - - this.view = view; - this.component = this.view.component(); - } - - 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?.(); - } - }; - } - - return myClass; -} diff --git a/src/rootPages/Designer/properties/views/ABViewCSVImporter.js b/src/rootPages/Designer/properties/views/ABViewCSVImporter.js deleted file mode 100644 index be4a0627..00000000 --- a/src/rootPages/Designer/properties/views/ABViewCSVImporter.js +++ /dev/null @@ -1,363 +0,0 @@ -// /* -// * ABViewCSVImporter -// * A Property manager for our ABViewCSVImporter widget -// */ - -// import FViewClass from "./ABView"; -// import ABRecordRule from "../rules/ABViewRuleListFormRecordRules"; - -// 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: "", -// fields: "", -// buttonLabel: "", -// buttonRecordRules: "", -// width: "", -// }); - -// this.AB = AB; -// } - -// static get key() { -// return "csvImporter"; -// } - -// ui() { -// const ids = this.ids; -// PopupRecordRule = ABRecordRule(this.AB, this.base); -// // PopupRecordRule.component(`${this.base}_recordrule`); - -// return super.ui([ -// { -// view: "fieldset", -// label: L("Data:"), -// labelWidth: uiConfig.labelWidthLarge, -// body: { -// id: ids.datacollection, -// name: "datacollection", -// view: "richselect", -// label: L("Data Source"), -// labelWidth: uiConfig.labelWidthLarge, -// skipAutoSave: true, -// on: { -// onChange: (newVal) => this.selectSource(newVal), -// }, -// }, -// }, -// { -// view: "fieldset", -// label: L("Available Fields:"), -// labelWidth: uiConfig.labelWidthLarge, -// body: { -// type: "clean", -// padding: 10, -// rows: [ -// { -// id: ids.fields, -// name: "fields", -// view: "list", -// select: false, -// minHeight: 250, -// template: this.listTemplate.bind(this), -// type: { -// markCheckbox: function (item) { -// return ``; -// }, -// }, -// onClick: { -// check: this.check.bind(this), -// }, -// }, -// ], -// }, -// }, -// { -// view: "fieldset", -// label: L("Rules:"), -// labelWidth: uiConfig.labelWidthLarge, -// body: { -// type: "clean", -// padding: 10, -// rows: [ -// { -// cols: [ -// { -// view: "label", -// label: L("Record Rules:"), -// width: uiConfig.labelWidthLarge, -// }, -// { -// id: ids.buttonRecordRules, -// view: "button", -// name: "buttonRecordRules", -// css: "webix_primary", -// label: L("Settings"), -// icon: "fa fa-gear", -// type: "icon", -// badge: 0, -// click: this.recordRuleShow.bind(this), -// }, -// ], -// }, -// ], -// }, -// }, -// { -// view: "fieldset", -// label: L("Customize Display:"), -// labelWidth: uiConfig.labelWidthLarge, -// body: { -// type: "clean", -// padding: 10, -// rows: [ -// { -// id: ids.buttonLabel, -// name: "buttonLabel", -// view: "text", -// label: L("Label"), -// labelWidth: uiConfig.labelWidthXLarge, -// on: { -// onChange: () => this.onChange(), -// }, -// }, -// { -// id: ids.width, -// view: "counter", -// name: "width", -// label: L("Width:"), -// labelWidth: uiConfig.labelWidthXLarge, -// on: { -// onChange: () => this.onChange(), -// }, -// }, -// ], -// }, -// }, -// ]); -// } - -// async init(AB) { -// this.AB = AB; - -// await super.init(AB); - -// PopupRecordRule.init(AB); -// PopupRecordRule.on("save", () => { -// this.populateBadgeNumber(); -// }); -// } - -// selectSource(dcId) { -// const view = this.CurrentView; -// view.settings = view.settings ?? {}; -// view.settings.dataviewID = dcId; - -// this.updateRules(); -// this.populateAvailableFields({ selectAll: true }); -// this.onChange(); -// } - -// updateRules() { -// // Populate values to rules -// const selectedDv = this.CurrentView.datacollection; -// if (selectedDv?.datasource) { -// PopupRecordRule.objectLoad(selectedDv.datasource); -// } - -// PopupRecordRule.fromSettings( -// this.CurrentView?.settings?.recordRules ?? [] -// ); -// } - -// populateAvailableFields(options = {}) { -// const ids = this.ids; -// const view = this.CurrentView; - -// const datacollection = this.AB.datacollectionByID( -// view.settings.dataviewID -// ); -// const object = datacollection?.datasource; - -// view.settings = view.settings ?? {}; -// const availableFields = view.settings.availableFieldIds ?? []; - -// // Pull field list -// const fieldOptions = object?.fields()?.map((f) => { -// f.selected = options.selectAll -// ? true -// : availableFields.filter((fieldId) => f.id == fieldId).length > -// 0; - -// return f; -// }); - -// $$(ids.fields).clearAll(); -// $$(ids.fields).parse(fieldOptions); -// } - -// populateBadgeNumber() { -// const ids = this.ids; -// const view = this.CurrentView; -// if (!view) return; - -// $$(ids.buttonRecordRules).define( -// "badge", -// view.settings?.recordRules?.length ?? null -// ); -// $$(ids.buttonRecordRules).refresh(); -// } - -// listTemplate(field, $common) { -// const fieldComponent = field.formComponent(); -// if (fieldComponent == null) -// return ` ${field.label}
Disable
`; - -// const componentKey = fieldComponent.common().key; -// const formComponent = this.CurrentApplication.viewAll( -// (v) => v.common().key == componentKey -// )[0]; - -// return `${$common.markCheckbox(field)} ${ -// field.label -// }
${ -// formComponent ? L(formComponent.common().labelKey ?? "Label") : "" -// }
`; -// } - -// check(e, fieldId) { -// const ids = this.ids; - -// // update UI list -// let item = $$(ids.fields).getItem(fieldId); -// item.selected = item.selected ? 0 : 1; -// $$(ids.fields).updateItem(fieldId, item); -// this.onChange(); -// } - -// recordRuleShow() { -// this.updateRules(); -// if (PopupRecordRule.CurrentObject) PopupRecordRule.show(); - -// // Workaround -// PopupRecordRule.qbFixAfterShow(); -// } - -// populate(view) { -// super.populate(view); - -// const ids = this.ids; - -// view.settings = view.settings ?? {}; - -// this.populateDataCollections(); -// this.populateAvailableFields(); - -// $$(ids.buttonLabel).setValue(view.settings.buttonLabel); -// $$(ids.width).setValue(view.settings.width); - -// view.settings.availableFieldIds = []; -// let fields = $$(ids.fields).find({ selected: true }); -// (fields || []).forEach((f) => { -// view.settings.availableFieldIds.push(f.id); -// }); -// } - -// populateDataCollections() { -// const ids = this.ids; -// const view = this.CurrentView; - -// const datacollections = -// this.CurrentApplication.datacollectionsIncluded().map((dc) => { -// return { -// id: dc.id, -// value: dc.label, -// icon: -// dc.sourceType === "query" -// ? "fa fa-filter" -// : "fa fa-database", -// }; -// }); - -// const $d = $$(ids.datacollection); -// $d.define("options", datacollections); -// $d.define("value", view.settings.dataviewID); -// $d.refresh(); -// } - -// defaultValues() { -// const values = { -// dataviewID: null, -// buttonLabel: "Upload CSV", -// width: 0, -// recordRules: [], -// availableFieldIds: [], -// }; - -// const FieldClass = this.ViewClass(); -// if (FieldClass) { -// const fcValues = FieldClass.defaultValues(); -// Object.keys(fcValues).forEach((k) => { -// values[k] = fcValues[k]; -// }); -// } - -// return values; -// } - -// /** -// * @method values -// * return the values for this form. -// * @return {obj} -// */ -// values() { -// const ids = this.ids; -// const values = super.values(); - -// values.settings = values.settings ?? {}; -// values.settings.dataviewID = $$(ids.datacollection).getValue(); -// values.settings.recordRules = PopupRecordRule.toSettings(); -// values.settings.buttonLabel = $$(ids.buttonLabel).getValue(); -// values.settings.width = $$(ids.width).getValue(); - -// values.settings.availableFieldIds = []; -// $$(ids.fields) -// .find({ selected: true }) -// .forEach((f) => { -// values.settings.availableFieldIds.push(f.id); -// }); - -// return values; -// } - -// /** -// * @method FieldClass() -// * A method to return the proper ABViewXXX Definition. -// * NOTE: Must be overwritten by the Child Class -// */ -// ViewClass() { -// return super._ViewClass("csvImporter"); -// } - -// toSettings() { -// var base = this.defaults(); -// base.settings = this.defaultValues(); -// return base; -// } -// } - -// return ABViewCSVImporterProperty; -// }