diff --git a/src/plugins/index.js b/src/plugins/index.js index 02b8afe..2e020b5 100644 --- a/src/plugins/index.js +++ b/src/plugins/index.js @@ -1,3 +1,5 @@ +import viewPivotProperties from "./web_view_pivot/FNAbviewpivot.js"; +import viewPivotEditor from "./web_view_pivot/FNAbviewpivotEditor.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"; @@ -38,6 +40,8 @@ const AllPlugins = [ viewTabEditor, viewTextProperties, viewTextEditor, + viewPivotProperties, + viewPivotEditor, ]; export default { diff --git a/src/plugins/web_view_pivot/FNAbviewpivot.js b/src/plugins/web_view_pivot/FNAbviewpivot.js new file mode 100644 index 0000000..3dfd9ad --- /dev/null +++ b/src/plugins/web_view_pivot/FNAbviewpivot.js @@ -0,0 +1,240 @@ +// FNAbviewpivot Properties +// A properties side import for an ABView. +// +export default function FNAbviewpivotProperties({ + AB, + ABViewPropertiesPlugin, + // ABUIPlugin, +}) { + const BASE_ID = "properties_abview_pivot"; + + const uiConfig = AB.UISettings.config(); + + + +return class ABAbviewpivotProperties extends ABViewPropertiesPlugin { + +static getPluginKey() { + return this.key; + } + +static getPluginType() { + return "properties-view"; + // properties-view : will display in the properties panel of the ABDesigner + } + + + + + constructor() { + super(BASE_ID, { + datacollection: "", + height: "", + removeMissed: "", + totalColumn: "", + separateLabel: "", + min: "", + max: "", + decimalPlaces: "", + }); + + this.AB = AB; + } + + static get key() { + return "pivot"; + } + + ui() { + const ids = this.ids; + + return super.ui([ + { + id: ids.datacollection, + name: "dataviewID", + view: "richselect", + label: L("Data Source"), + labelWidth: uiConfig.labelWidthLarge, + on: { + onChange: (dcId, oldDcId) => { + if (dcId == oldDcId) return; + this.onChange(); + }, + }, + }, + { + id: ids.height, + view: "counter", + name: "height", + label: L("Height:"), + labelWidth: uiConfig.labelWidthLarge, + on: { + onChange: () => { + this.onChange(); + }, + }, + }, + { + id: ids.removeMissed, + view: "checkbox", + name: "removeMissed", + labelRight: L("Remove empty data."), + labelWidth: uiConfig.labelWidthCheckbox, + on: { + onChange: () => { + this.onChange(); + }, + }, + }, + { + id: ids.totalColumn, + view: "checkbox", + name: "totalColumn", + labelRight: L("Show a total column."), + labelWidth: uiConfig.labelWidthCheckbox, + on: { + onChange: () => { + this.onChange(); + }, + }, + }, + { + id: ids.separateLabel, + view: "checkbox", + name: "separateLabel", + labelRight: L("Separate header label."), + labelWidth: uiConfig.labelWidthCheckbox, + on: { + onChange: () => { + this.onChange(); + }, + }, + }, + { + id: ids.min, + view: "checkbox", + name: "min", + labelRight: L( + "Highlighting of a cell(s) with the least value in a row." + ), + labelWidth: uiConfig.labelWidthCheckbox, + on: { + onChange: () => { + this.onChange(); + }, + }, + }, + { + id: ids.max, + view: "checkbox", + name: "max", + labelRight: L( + "Highlighting of a cell(s) with the biggest value in a row." + ), + labelWidth: uiConfig.labelWidthCheckbox, + on: { + onChange: () => { + this.onChange(); + }, + }, + }, + { + id: ids.decimalPlaces, + name: "decimalPlaces", + view: "counter", + min: 1, + label: L("Decimal Places"), + labelWidth: uiConfig.labelWidthXLarge, + on: { + onChange: () => { + this.onChange(); + }, + }, + }, + ]); + } + + async init(AB) { + this.AB = AB; + + await super.init(AB); + } + + populate(view) { + super.populate(view); + + const ids = this.ids; + + const dcID = view.settings.dataviewID + ? view.settings.dataviewID + : null; + var $dc = $$(ids.datacollection); + + // Pull data collections to options + var dcOptions = view.application.datacollectionsIncluded().map((d) => { + return { + id: d.id, + value: d.label, + icon: + d.sourceType == "query" ? "fa fa-filter" : "fa fa-database", + }; + }); + $dc.define("options", dcOptions); + $dc.define("value", dcID); + $dc.refresh(); + + $$(ids.removeMissed).setValue(view.settings.removeMissed); + $$(ids.totalColumn).setValue(view.settings.totalColumn); + $$(ids.separateLabel).setValue(view.settings.separateLabel); + $$(ids.min).setValue(view.settings.min); + $$(ids.max).setValue(view.settings.max); + $$(ids.height).setValue(view.settings.height); + $$(ids.decimalPlaces).setValue( + view.settings.decimalPlaces == null + ? 2 + : view.settings.decimalPlaces + ); + } + + // defaultValues() { + // const ViewClass = this.ViewClass(); + + // let values = null; + + // if (ViewClass) { + // values = ViewClass.defaultValues(); + // } + + // return values; + // } + + /** + * @method values + * return the values for this form. + * @return {obj} + */ + values() { + const $component = $$(this.ids.component); + + const values = super.values(); + + values.settings = $component.getValues(); + + return values; + } + + /** + * @method FieldClass() + * A method to return the proper ABViewXXX Definition. + * NOTE: Must be overwritten by the Child Class + */ + ViewClass() { + return super._ViewClass("pivot"); + } + } + + + + +} + diff --git a/src/plugins/web_view_pivot/FNAbviewpivotEditor.js b/src/plugins/web_view_pivot/FNAbviewpivotEditor.js new file mode 100644 index 0000000..b7a3ff7 --- /dev/null +++ b/src/plugins/web_view_pivot/FNAbviewpivotEditor.js @@ -0,0 +1,79 @@ +// FNAbviewpivot 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 FNAbviewpivotEditor({ AB, ABViewEditorPlugin }) { + // var L = UIClass.L(); + // var L = ABViewContainer.L(); + +return class ABAbviewpivotEditor 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 "pivot"; + } + + constructor(view, base = "interface_editor_viewpivot") { + // base: {string} unique base id reference + + super(view, base); + } + + ui() { + const pivotContainer = this.component.ui(); + const pivot = pivotContainer.rows[0]; + + pivot.readonly = false; + + // NOTE: ui_work_interface_workspace_editor_layout is expecting a { rows:[] } + // type of response from this. + return pivotContainer; + } + + init(AB) { + this.AB = AB; + + this.component?.init?.(); + + const pivotId = this.ui().rows[0].id; + const $pivot = $$(pivotId); + $pivot.getState().$observe("structure", (structure) => { + this._saveStructure(structure); + }); + } + + detatch() { + this.component?.detatch?.(); + } + + onShow() { + this.component?.onShow?.(); + } + + _saveStructure(structure) { + this.view.settings.structure = structure; + this.view.save(); + } + }; + + +} diff --git a/src/rootPages/Designer/editors/EditorManager.js b/src/rootPages/Designer/editors/EditorManager.js index c81903b..bf4ae02 100644 --- a/src/rootPages/Designer/editors/EditorManager.js +++ b/src/rootPages/Designer/editors/EditorManager.js @@ -37,7 +37,7 @@ export default function (AB) { require("./views/ABViewMenu"), require("./views/ABViewPage"), // require("./views/ABViewPDFImporter"), - require("./views/ABViewPivot"), + // require("./views/ABViewPivot"), require("./views/ABViewTab"), // require("./views/ABViewText"), ].forEach((E) => { diff --git a/src/rootPages/Designer/properties/PropertyManager.js b/src/rootPages/Designer/properties/PropertyManager.js index 2a0bee7..3165c65 100644 --- a/src/rootPages/Designer/properties/PropertyManager.js +++ b/src/rootPages/Designer/properties/PropertyManager.js @@ -115,7 +115,7 @@ export default function (AB) { require("./views/ABViewMenu"), require("./views/ABViewPage"), // require("./views/ABViewPDFImporter"), - require("./views/ABViewPivot"), + // require("./views/ABViewPivot"), require("./views/ABViewReportsManager"), require("./views/ABViewScheduler"), // require("./views/ABViewText"),