diff --git a/src/plugins/index.js b/src/plugins/index.js index e0165a90..5006e8ef 100644 --- a/src/plugins/index.js +++ b/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) => { 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/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/properties/views/ABViewCSVImporter.js b/src/plugins/web_view_csvImporter/FNAbviewcsvimporter.js similarity index 91% rename from src/rootPages/Designer/properties/views/ABViewCSVImporter.js rename to src/plugins/web_view_csvImporter/FNAbviewcsvimporter.js index 307b2876..2c149c64 100644 --- a/src/rootPages/Designer/properties/views/ABViewCSVImporter.js +++ b/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 ``; + return ``; }, }, 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 - }
${ - formComponent ? L(formComponent.common().labelKey ?? "Label") : "" - }
`; + return `${$common.markCheckbox(field)} ${field.label + }
${formComponent ? L(formComponent.common().labelKey ?? "Label") : "" + }
`; } check(e, fieldId) { @@ -359,5 +367,8 @@ export default function (AB) { } } - return ABViewCSVImporterProperty; + + + } + 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 ffc44a0f..9660b07d 100644 --- a/src/rootPages/Designer/editors/EditorManager.js +++ b/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"), 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/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/PropertyManager.js b/src/rootPages/Designer/properties/PropertyManager.js index 08aafa69..2e329c8e 100644 --- a/src/rootPages/Designer/properties/PropertyManager.js +++ b/src/rootPages/Designer/properties/PropertyManager.js @@ -79,8 +79,7 @@ export default function (AB) { require("./views/ABViewComment"), require("./views/ABViewConditionalContainer"), require("./views/ABViewContainer"), - require("./views/ABViewCSVExporter"), - require("./views/ABViewCSVImporter"), + // // require("./views/ABViewCSVImporter"), require("./views/ABViewDataFilter"), require("./views/ABViewDataSelect"), require("./views/ABViewDataview"),