From 49399a1876d1b7e101563191b4d75e8431649bd9 Mon Sep 17 00:00:00 2001 From: roguisharcanetrickster Date: Mon, 18 May 2026 15:33:32 +0700 Subject: [PATCH 1/3] gantt --- src/plugins/index.js | 12 +- src/plugins/web_view_gantt/FNAbviewgantt.js | 224 ++++++++++++++++++ .../web_view_gantt/FNAbviewganttEditor.js | 62 +++++ .../Designer/editors/EditorManager.js | 2 +- .../Designer/properties/PropertyManager.js | 2 +- 5 files changed, 299 insertions(+), 3 deletions(-) create mode 100644 src/plugins/web_view_gantt/FNAbviewgantt.js create mode 100644 src/plugins/web_view_gantt/FNAbviewganttEditor.js diff --git a/src/plugins/index.js b/src/plugins/index.js index 02b8afe..a2ac5f4 100644 --- a/src/plugins/index.js +++ b/src/plugins/index.js @@ -1,3 +1,9 @@ +import viewGanttProperties from "./web_view_gantt/FNAbviewgantt.js"; +import viewGanttEditor from "./web_view_gantt/FNAbviewganttEditor.js"; +import viewPivotProperties from "./web_view_pivot/FNAbviewpivot.js"; +import viewPivotEditor from "./web_view_pivot/FNAbviewpivotEditor.js"; +import viewKanbanProperties from "./web_view_kanban/FNAbviewkanban.js"; +import viewKanbanEditor from "./web_view_kanban/FNAbviewkanbanEditor.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,7 +44,11 @@ const AllPlugins = [ viewTabEditor, viewTextProperties, viewTextEditor, -]; + viewKanbanProperties, + viewKanbanEditor, + viewPivotProperties, + viewPivotEditor, +, viewGanttProperties, viewGanttEditor]; export default { load: (AB) => { diff --git a/src/plugins/web_view_gantt/FNAbviewgantt.js b/src/plugins/web_view_gantt/FNAbviewgantt.js new file mode 100644 index 0000000..951110a --- /dev/null +++ b/src/plugins/web_view_gantt/FNAbviewgantt.js @@ -0,0 +1,224 @@ +// FNAbviewgantt Properties +// A properties side import for an ABView. +// +export default function FNAbviewganttProperties({ + AB, + ABViewPropertiesPlugin, + // ABUIPlugin, +}) { + const BASE_ID = "properties_abview_gantt"; + + const uiConfig = AB.Config.uiSettings(); + + const ABViewGanttWorkspaceView = FABViewGanttWorkspaceView( + AB, + `${BASE_ID}_workspaceView_gantt` + ); + + + +return class ABAbviewganttProperties 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, { + dataviewID: "", + fields: "", + }); + + this.AB = AB; + } + + static get key() { + return "gantt"; + } + + ui() { + const ids = this.ids; + + return super.ui([ + { + view: "fieldset", + label: `${L("Gantt Data")}:`, + labelWidth: uiConfig.labelWidthLarge, + body: { + type: "clean", + padding: 10, + rows: [ + { + id: ids.dataviewID, + view: "richselect", + name: "dataviewID", + label: `${L("Datacollection")}:`, + labelWidth: uiConfig.labelWidthLarge, + on: { + onChange: (newValue, oldValue) => { + if (newValue === oldValue) return; + + ABViewGanttWorkspaceView.emit( + "dc.changed", + newValue, + this.CurrentView + ); + + this.onChange(); + }, + }, + }, + ], + }, + }, + { + view: "fieldset", + label: `${L("Gantt Fields")}:`, + labelWidth: uiConfig.labelWidthLarge, + body: { + id: ids.fields, + view: "form", + name: "fields", + borderless: true, + elements: [ABViewGanttWorkspaceView.ui()], + on: { + onChange: () => { + this.onChange(); + }, + }, + }, + }, + ]); + } + + async init(AB) { + this.AB = AB; + + this.PopupNewDataFieldComponent = FPopupNewDataField( + AB, + `${BASE_ID}_popupNewDataField` + ); + await this.PopupNewDataFieldComponent.init(AB); + this.PopupNewDataFieldComponent.on("save", (...params) => { + ABViewGanttWorkspaceView.emit("field.added", params[0]); + }); + + ABViewGanttWorkspaceView.on("dc.changed", (dcID, view) => { + const DC = this.AB.datacollectionByID(dcID); + + ABViewGanttWorkspaceView.init(DC.datasource, view); + this.PopupNewDataFieldComponent.objectLoad(DC.datasource); + }); + + ABViewGanttWorkspaceView.on("new.field", (fieldKey) => { + this.PopupNewDataFieldComponent.show(null, fieldKey, false); + }); + + await super.init(AB); + } + + populateDataview() { + // Pull data collections to options + // / NOTE: only include System Objects if the user has permission + const datacollectionFilter = this.AB.Account.isSystemDesigner() + ? (obj) => !obj.isSystemObject + : () => true; + const datacollections = + this.CurrentApplication.datacollectionsIncluded( + datacollectionFilter + ); + + // Set the objects you can choose from in the list + const $dataviewID = $$(this.ids.dataviewID); + + $dataviewID.define( + "options", + datacollections.map((e) => { + return { + id: e.id, + value: e.label, + icon: + e.sourceType == "query" + ? "fa fa-filter" + : "fa fa-database", + }; + }) + ); + $dataviewID.refresh(); + } + + populate(view) { + super.populate(view); + + const ids = this.ids; + const $component = $$(ids.component); + const defaultValues = this.defaultValues(); + const values = Object.assign( + $component.getValues(), + defaultValues, + view.settings + ); + + this.populateDataview(); + + $component.setValues(values); + + let DC = this.AB.datacollectionByID(values.dataviewID); + if (DC) { + ABViewGanttWorkspaceView.init(DC.datasource, this.CurrentView); + this.PopupNewDataFieldComponent.objectLoad(DC.datasource); + } + } + + 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 values = super.values(); + const ids = this.ids; + + values.settings = Object.assign( + $$(ids.component).getValues(), + $$(ids.fields).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("gantt"); + } + } + + + + +} + diff --git a/src/plugins/web_view_gantt/FNAbviewganttEditor.js b/src/plugins/web_view_gantt/FNAbviewganttEditor.js new file mode 100644 index 0000000..77dc5e1 --- /dev/null +++ b/src/plugins/web_view_gantt/FNAbviewganttEditor.js @@ -0,0 +1,62 @@ +// FNAbviewgantt 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 FNAbviewganttEditor({ AB, ABViewEditorPlugin }) { + const BASE_ID = "interface_editor_viewgantt"; + +return class ABAbviewganttEditor 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 "gantt"; + } + + constructor(view, base = BASE_ID) { + // base: {string} unique base id reference + super(view, base, { + label: "", + }); + } + + ui() { + return this.component.ui(); + } + + async init(AB) { + this.AB = AB; + this.component.ignoreLocal = true; + // in our editor, we provide accessLv = 2 + await this.component.init(AB, 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 c81903b..96210a7 100644 --- a/src/rootPages/Designer/editors/EditorManager.js +++ b/src/rootPages/Designer/editors/EditorManager.js @@ -29,7 +29,7 @@ export default function (AB) { require("./views/ABViewDocxBuilder"), require("./views/ABViewForm"), require("./views/ABViewFormUrl"), - require("./views/ABViewGantt"), + // require("./views/ABViewGantt"), require("./views/ABViewGrid"), require("./views/ABViewKanban"), // require("./views/ABViewLabel"), diff --git a/src/rootPages/Designer/properties/PropertyManager.js b/src/rootPages/Designer/properties/PropertyManager.js index 2a0bee7..2610dff 100644 --- a/src/rootPages/Designer/properties/PropertyManager.js +++ b/src/rootPages/Designer/properties/PropertyManager.js @@ -105,7 +105,7 @@ export default function (AB) { require("./views/ABViewFormTextbox"), require("./views/ABViewFormTree"), require("./views/ABViewFormUrl"), - require("./views/ABViewGantt"), + // require("./views/ABViewGantt"), require("./views/ABViewGrid"), // require("./views/ABViewImage"), require("./views/ABViewKanban"), From 7fbd7aaae7c9c0046a3521c0db333d9b52b8352b Mon Sep 17 00:00:00 2001 From: roguisharcanetrickster Date: Mon, 18 May 2026 15:34:08 +0700 Subject: [PATCH 2/3] kanban --- src/plugins/web_view_kanban/FNAbviewkanban.js | 197 ++++++++++++++++++ .../web_view_kanban/FNAbviewkanbanEditor.js | 66 ++++++ .../Designer/editors/EditorManager.js | 2 +- .../Designer/properties/PropertyManager.js | 2 +- 4 files changed, 265 insertions(+), 2 deletions(-) create mode 100644 src/plugins/web_view_kanban/FNAbviewkanban.js create mode 100644 src/plugins/web_view_kanban/FNAbviewkanbanEditor.js diff --git a/src/plugins/web_view_kanban/FNAbviewkanban.js b/src/plugins/web_view_kanban/FNAbviewkanban.js new file mode 100644 index 0000000..ec7aa95 --- /dev/null +++ b/src/plugins/web_view_kanban/FNAbviewkanban.js @@ -0,0 +1,197 @@ +// FNAbviewkanban Properties +// A properties side import for an ABView. +// +export default function FNAbviewkanbanProperties({ + AB, + ABViewPropertiesPlugin, + // ABUIPlugin, +}) { + const BASE_ID = "properties_abview_kanban"; + + const LinkPageProperty = ABViewPropertyLinkPage(AB, BASE_ID); + const uiConfig = AB.UISettings.config(); + + const ViewKanbanProperties = FViewKanbanProperties(AB, `${BASE_ID}_prop`); + var PopupNewDataFieldComponent = null; + // NOTE: this is the instance of the FPopupNewDataField. + // however we need to make the instance later to prevent an inifinite + // recursion upon loading. + + + +return class ABAbviewkanbanProperties 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: "" }); + + this.linkPageComponent = new LinkPageProperty(AB, BASE_ID); + } + + static get key() { + return "kanban"; + } + + ui() { + let _ui = ViewKanbanProperties.ui(); + + let rows = [ + { + view: "fieldset", + label: L("Kanban Data:"), + labelWidth: uiConfig.labelWidthLarge, + body: { + type: "clean", + padding: 10, + rows: [ + { + id: this.ids.datacollection, + view: "richselect", + name: "dataviewID", + label: L("Data Source:"), + placeholder: L("Select a Datacollection"), + labelWidth: uiConfig.labelWidthLarge, + options: [], + on: { + onChange: (newv, oldv) => { + if (newv != oldv) { + this.refreshFields(newv); + this.onChange(); + } + }, + }, + }, + ], + }, + }, + ..._ui.rows, + this.linkPageComponent.ui(), + ]; + + return super.ui(rows); + } + + async init(AB) { + this.AB = AB; + + ViewKanbanProperties.on("new.field", (key) => { + let dc = this.AB.datacollectionByID( + this.CurrentView.settings.dataviewID + ); + PopupNewDataFieldComponent.objectLoad(dc.datasource); + PopupNewDataFieldComponent.resetState(); + PopupNewDataFieldComponent.show(null, key, false); + }); + ViewKanbanProperties.on("changed", () => { + this.onChange(); + }); + + // NOTE: keep this definition in the .init() routine + // to prevent an infinite recursion. + PopupNewDataFieldComponent = FPopupNewDataField( + AB, + `${BASE_ID}_popupNewDataField` + ); + await PopupNewDataFieldComponent.init(AB); + PopupNewDataFieldComponent.on("save", (...params) => { + ViewKanbanProperties.emit("field.added", params[0]); + }); + + this.linkPageComponent.init(); + this.linkPageComponent.on("changed", () => { + this.onChange(); + }); + + await super.init(AB); + } + + populate(view) { + super.populate(view); + + // Load in all the Available Datacollections: + var listDC = view.application.datacollectionsIncluded().map((d) => { + return { + id: d.id, + value: d.label, + icon: + d.sourceType == "query" ? "fa fa-filter" : "fa fa-database", + }; + }); + + let $dc = $$(this.ids.datacollection); + let dcID = view.settings.dataviewID || null; + $dc.blockEvent(); + $dc.define("options", listDC); + $dc.define("value", dcID); + $dc.unblockEvent(); + $dc.refresh(); + this.refreshFields(dcID); + + this.linkPageComponent.viewLoad(view); + this.linkPageComponent.setSettings(view.settings); + } + + refreshFields(dcID) { + let dc = this.AB.datacollectionByID(dcID); + if (!dc) { + ViewKanbanProperties.clearValues(); + return; + } + + let obj = dc.datasource; + ViewKanbanProperties.init(obj, this.CurrentView); + PopupNewDataFieldComponent.objectLoad(obj); + } + + /** + * @method values + * return the values for this form. + * @return {obj} + */ + values() { + const values = super.values(); + + const ids = this.ids; + const $component = $$(ids.component); + + values.settings = $component.getValues(); + + // let fields = ViewKanbanProperties.values(); + // Object.keys(fields).forEach((f) => { + // values.settings[f] = fields[f]; + // }); + + const linkSettings = this.linkPageComponent.getSettings(); + for (const key in linkSettings) { + values.settings[key] = linkSettings[key]; + } + + return values; + } + + /** + * @method FieldClass() + * A method to return the proper ABViewXXX Definition. + * NOTE: Must be overwritten by the Child Class + */ + ViewClass() { + return super._ViewClass("kanban"); + } + } + + + + +} + diff --git a/src/plugins/web_view_kanban/FNAbviewkanbanEditor.js b/src/plugins/web_view_kanban/FNAbviewkanbanEditor.js new file mode 100644 index 0000000..57280e2 --- /dev/null +++ b/src/plugins/web_view_kanban/FNAbviewkanbanEditor.js @@ -0,0 +1,66 @@ +// FNAbviewkanban 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 FNAbviewkanbanEditor({ AB, ABViewEditorPlugin }) { + const BASE_ID = "interface_editor_viewkanban"; + +return class ABAbviewkanbanEditor 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 "kanban"; + } + + constructor(view, base = BASE_ID) { + // base: {string} unique base id reference + super(view, base); + } + + ui() { + const component = this.component; + const _ui = component.ui(); + _ui.minWidth = 400; + + return { + view: "layout", + cols: [_ui, { fillspace: true }], + }; + } + + init(AB) { + this.AB = AB; + + this.component?.init?.(AB); + } + + 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 96210a7..1fbcc4c 100644 --- a/src/rootPages/Designer/editors/EditorManager.js +++ b/src/rootPages/Designer/editors/EditorManager.js @@ -31,7 +31,7 @@ export default function (AB) { require("./views/ABViewFormUrl"), // require("./views/ABViewGantt"), require("./views/ABViewGrid"), - require("./views/ABViewKanban"), + // require("./views/ABViewKanban"), // require("./views/ABViewLabel"), // require("./views/ABViewLayout"), require("./views/ABViewMenu"), diff --git a/src/rootPages/Designer/properties/PropertyManager.js b/src/rootPages/Designer/properties/PropertyManager.js index 2610dff..6420c8e 100644 --- a/src/rootPages/Designer/properties/PropertyManager.js +++ b/src/rootPages/Designer/properties/PropertyManager.js @@ -108,7 +108,7 @@ export default function (AB) { // require("./views/ABViewGantt"), require("./views/ABViewGrid"), // require("./views/ABViewImage"), - require("./views/ABViewKanban"), + // require("./views/ABViewKanban"), // require("./views/ABViewLabel"), // require("./views/ABViewLayout"), // require("./views/ABViewList"), From 902aa3e123244bc9a5b0b9605ae64a54fc10922f Mon Sep 17 00:00:00 2001 From: roguisharcanetrickster Date: Mon, 18 May 2026 15:34:47 +0700 Subject: [PATCH 3/3] pivot --- src/plugins/index.js | 8 +- src/plugins/web_view_gantt/FNAbviewgantt.js | 224 ---------------- .../web_view_gantt/FNAbviewganttEditor.js | 62 ----- src/plugins/web_view_kanban/FNAbviewkanban.js | 197 -------------- .../web_view_kanban/FNAbviewkanbanEditor.js | 66 ----- src/plugins/web_view_pivot/FNAbviewpivot.js | 240 ++++++++++++++++++ .../web_view_pivot/FNAbviewpivotEditor.js | 79 ++++++ .../Designer/editors/EditorManager.js | 6 +- .../Designer/properties/PropertyManager.js | 6 +- 9 files changed, 326 insertions(+), 562 deletions(-) delete mode 100644 src/plugins/web_view_gantt/FNAbviewgantt.js delete mode 100644 src/plugins/web_view_gantt/FNAbviewganttEditor.js delete mode 100644 src/plugins/web_view_kanban/FNAbviewkanban.js delete mode 100644 src/plugins/web_view_kanban/FNAbviewkanbanEditor.js create mode 100644 src/plugins/web_view_pivot/FNAbviewpivot.js create mode 100644 src/plugins/web_view_pivot/FNAbviewpivotEditor.js diff --git a/src/plugins/index.js b/src/plugins/index.js index a2ac5f4..2e020b5 100644 --- a/src/plugins/index.js +++ b/src/plugins/index.js @@ -1,9 +1,5 @@ -import viewGanttProperties from "./web_view_gantt/FNAbviewgantt.js"; -import viewGanttEditor from "./web_view_gantt/FNAbviewganttEditor.js"; import viewPivotProperties from "./web_view_pivot/FNAbviewpivot.js"; import viewPivotEditor from "./web_view_pivot/FNAbviewpivotEditor.js"; -import viewKanbanProperties from "./web_view_kanban/FNAbviewkanban.js"; -import viewKanbanEditor from "./web_view_kanban/FNAbviewkanbanEditor.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"; @@ -44,11 +40,9 @@ const AllPlugins = [ viewTabEditor, viewTextProperties, viewTextEditor, - viewKanbanProperties, - viewKanbanEditor, viewPivotProperties, viewPivotEditor, -, viewGanttProperties, viewGanttEditor]; +]; export default { load: (AB) => { diff --git a/src/plugins/web_view_gantt/FNAbviewgantt.js b/src/plugins/web_view_gantt/FNAbviewgantt.js deleted file mode 100644 index 951110a..0000000 --- a/src/plugins/web_view_gantt/FNAbviewgantt.js +++ /dev/null @@ -1,224 +0,0 @@ -// FNAbviewgantt Properties -// A properties side import for an ABView. -// -export default function FNAbviewganttProperties({ - AB, - ABViewPropertiesPlugin, - // ABUIPlugin, -}) { - const BASE_ID = "properties_abview_gantt"; - - const uiConfig = AB.Config.uiSettings(); - - const ABViewGanttWorkspaceView = FABViewGanttWorkspaceView( - AB, - `${BASE_ID}_workspaceView_gantt` - ); - - - -return class ABAbviewganttProperties 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, { - dataviewID: "", - fields: "", - }); - - this.AB = AB; - } - - static get key() { - return "gantt"; - } - - ui() { - const ids = this.ids; - - return super.ui([ - { - view: "fieldset", - label: `${L("Gantt Data")}:`, - labelWidth: uiConfig.labelWidthLarge, - body: { - type: "clean", - padding: 10, - rows: [ - { - id: ids.dataviewID, - view: "richselect", - name: "dataviewID", - label: `${L("Datacollection")}:`, - labelWidth: uiConfig.labelWidthLarge, - on: { - onChange: (newValue, oldValue) => { - if (newValue === oldValue) return; - - ABViewGanttWorkspaceView.emit( - "dc.changed", - newValue, - this.CurrentView - ); - - this.onChange(); - }, - }, - }, - ], - }, - }, - { - view: "fieldset", - label: `${L("Gantt Fields")}:`, - labelWidth: uiConfig.labelWidthLarge, - body: { - id: ids.fields, - view: "form", - name: "fields", - borderless: true, - elements: [ABViewGanttWorkspaceView.ui()], - on: { - onChange: () => { - this.onChange(); - }, - }, - }, - }, - ]); - } - - async init(AB) { - this.AB = AB; - - this.PopupNewDataFieldComponent = FPopupNewDataField( - AB, - `${BASE_ID}_popupNewDataField` - ); - await this.PopupNewDataFieldComponent.init(AB); - this.PopupNewDataFieldComponent.on("save", (...params) => { - ABViewGanttWorkspaceView.emit("field.added", params[0]); - }); - - ABViewGanttWorkspaceView.on("dc.changed", (dcID, view) => { - const DC = this.AB.datacollectionByID(dcID); - - ABViewGanttWorkspaceView.init(DC.datasource, view); - this.PopupNewDataFieldComponent.objectLoad(DC.datasource); - }); - - ABViewGanttWorkspaceView.on("new.field", (fieldKey) => { - this.PopupNewDataFieldComponent.show(null, fieldKey, false); - }); - - await super.init(AB); - } - - populateDataview() { - // Pull data collections to options - // / NOTE: only include System Objects if the user has permission - const datacollectionFilter = this.AB.Account.isSystemDesigner() - ? (obj) => !obj.isSystemObject - : () => true; - const datacollections = - this.CurrentApplication.datacollectionsIncluded( - datacollectionFilter - ); - - // Set the objects you can choose from in the list - const $dataviewID = $$(this.ids.dataviewID); - - $dataviewID.define( - "options", - datacollections.map((e) => { - return { - id: e.id, - value: e.label, - icon: - e.sourceType == "query" - ? "fa fa-filter" - : "fa fa-database", - }; - }) - ); - $dataviewID.refresh(); - } - - populate(view) { - super.populate(view); - - const ids = this.ids; - const $component = $$(ids.component); - const defaultValues = this.defaultValues(); - const values = Object.assign( - $component.getValues(), - defaultValues, - view.settings - ); - - this.populateDataview(); - - $component.setValues(values); - - let DC = this.AB.datacollectionByID(values.dataviewID); - if (DC) { - ABViewGanttWorkspaceView.init(DC.datasource, this.CurrentView); - this.PopupNewDataFieldComponent.objectLoad(DC.datasource); - } - } - - 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 values = super.values(); - const ids = this.ids; - - values.settings = Object.assign( - $$(ids.component).getValues(), - $$(ids.fields).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("gantt"); - } - } - - - - -} - diff --git a/src/plugins/web_view_gantt/FNAbviewganttEditor.js b/src/plugins/web_view_gantt/FNAbviewganttEditor.js deleted file mode 100644 index 77dc5e1..0000000 --- a/src/plugins/web_view_gantt/FNAbviewganttEditor.js +++ /dev/null @@ -1,62 +0,0 @@ -// FNAbviewgantt 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 FNAbviewganttEditor({ AB, ABViewEditorPlugin }) { - const BASE_ID = "interface_editor_viewgantt"; - -return class ABAbviewganttEditor 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 "gantt"; - } - - constructor(view, base = BASE_ID) { - // base: {string} unique base id reference - super(view, base, { - label: "", - }); - } - - ui() { - return this.component.ui(); - } - - async init(AB) { - this.AB = AB; - this.component.ignoreLocal = true; - // in our editor, we provide accessLv = 2 - await this.component.init(AB, 2); - } - - detatch() { - this.component.detatch?.(); - } - - onShow() { - this.component.onShow?.(); - } - }; - - -} diff --git a/src/plugins/web_view_kanban/FNAbviewkanban.js b/src/plugins/web_view_kanban/FNAbviewkanban.js deleted file mode 100644 index ec7aa95..0000000 --- a/src/plugins/web_view_kanban/FNAbviewkanban.js +++ /dev/null @@ -1,197 +0,0 @@ -// FNAbviewkanban Properties -// A properties side import for an ABView. -// -export default function FNAbviewkanbanProperties({ - AB, - ABViewPropertiesPlugin, - // ABUIPlugin, -}) { - const BASE_ID = "properties_abview_kanban"; - - const LinkPageProperty = ABViewPropertyLinkPage(AB, BASE_ID); - const uiConfig = AB.UISettings.config(); - - const ViewKanbanProperties = FViewKanbanProperties(AB, `${BASE_ID}_prop`); - var PopupNewDataFieldComponent = null; - // NOTE: this is the instance of the FPopupNewDataField. - // however we need to make the instance later to prevent an inifinite - // recursion upon loading. - - - -return class ABAbviewkanbanProperties 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: "" }); - - this.linkPageComponent = new LinkPageProperty(AB, BASE_ID); - } - - static get key() { - return "kanban"; - } - - ui() { - let _ui = ViewKanbanProperties.ui(); - - let rows = [ - { - view: "fieldset", - label: L("Kanban Data:"), - labelWidth: uiConfig.labelWidthLarge, - body: { - type: "clean", - padding: 10, - rows: [ - { - id: this.ids.datacollection, - view: "richselect", - name: "dataviewID", - label: L("Data Source:"), - placeholder: L("Select a Datacollection"), - labelWidth: uiConfig.labelWidthLarge, - options: [], - on: { - onChange: (newv, oldv) => { - if (newv != oldv) { - this.refreshFields(newv); - this.onChange(); - } - }, - }, - }, - ], - }, - }, - ..._ui.rows, - this.linkPageComponent.ui(), - ]; - - return super.ui(rows); - } - - async init(AB) { - this.AB = AB; - - ViewKanbanProperties.on("new.field", (key) => { - let dc = this.AB.datacollectionByID( - this.CurrentView.settings.dataviewID - ); - PopupNewDataFieldComponent.objectLoad(dc.datasource); - PopupNewDataFieldComponent.resetState(); - PopupNewDataFieldComponent.show(null, key, false); - }); - ViewKanbanProperties.on("changed", () => { - this.onChange(); - }); - - // NOTE: keep this definition in the .init() routine - // to prevent an infinite recursion. - PopupNewDataFieldComponent = FPopupNewDataField( - AB, - `${BASE_ID}_popupNewDataField` - ); - await PopupNewDataFieldComponent.init(AB); - PopupNewDataFieldComponent.on("save", (...params) => { - ViewKanbanProperties.emit("field.added", params[0]); - }); - - this.linkPageComponent.init(); - this.linkPageComponent.on("changed", () => { - this.onChange(); - }); - - await super.init(AB); - } - - populate(view) { - super.populate(view); - - // Load in all the Available Datacollections: - var listDC = view.application.datacollectionsIncluded().map((d) => { - return { - id: d.id, - value: d.label, - icon: - d.sourceType == "query" ? "fa fa-filter" : "fa fa-database", - }; - }); - - let $dc = $$(this.ids.datacollection); - let dcID = view.settings.dataviewID || null; - $dc.blockEvent(); - $dc.define("options", listDC); - $dc.define("value", dcID); - $dc.unblockEvent(); - $dc.refresh(); - this.refreshFields(dcID); - - this.linkPageComponent.viewLoad(view); - this.linkPageComponent.setSettings(view.settings); - } - - refreshFields(dcID) { - let dc = this.AB.datacollectionByID(dcID); - if (!dc) { - ViewKanbanProperties.clearValues(); - return; - } - - let obj = dc.datasource; - ViewKanbanProperties.init(obj, this.CurrentView); - PopupNewDataFieldComponent.objectLoad(obj); - } - - /** - * @method values - * return the values for this form. - * @return {obj} - */ - values() { - const values = super.values(); - - const ids = this.ids; - const $component = $$(ids.component); - - values.settings = $component.getValues(); - - // let fields = ViewKanbanProperties.values(); - // Object.keys(fields).forEach((f) => { - // values.settings[f] = fields[f]; - // }); - - const linkSettings = this.linkPageComponent.getSettings(); - for (const key in linkSettings) { - values.settings[key] = linkSettings[key]; - } - - return values; - } - - /** - * @method FieldClass() - * A method to return the proper ABViewXXX Definition. - * NOTE: Must be overwritten by the Child Class - */ - ViewClass() { - return super._ViewClass("kanban"); - } - } - - - - -} - diff --git a/src/plugins/web_view_kanban/FNAbviewkanbanEditor.js b/src/plugins/web_view_kanban/FNAbviewkanbanEditor.js deleted file mode 100644 index 57280e2..0000000 --- a/src/plugins/web_view_kanban/FNAbviewkanbanEditor.js +++ /dev/null @@ -1,66 +0,0 @@ -// FNAbviewkanban 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 FNAbviewkanbanEditor({ AB, ABViewEditorPlugin }) { - const BASE_ID = "interface_editor_viewkanban"; - -return class ABAbviewkanbanEditor 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 "kanban"; - } - - constructor(view, base = BASE_ID) { - // base: {string} unique base id reference - super(view, base); - } - - ui() { - const component = this.component; - const _ui = component.ui(); - _ui.minWidth = 400; - - return { - view: "layout", - cols: [_ui, { fillspace: true }], - }; - } - - init(AB) { - this.AB = AB; - - this.component?.init?.(AB); - } - - detatch() { - this.component?.detatch?.(); - } - - onShow() { - this.component?.onShow?.(); - } - }; - - -} 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 1fbcc4c..bf4ae02 100644 --- a/src/rootPages/Designer/editors/EditorManager.js +++ b/src/rootPages/Designer/editors/EditorManager.js @@ -29,15 +29,15 @@ export default function (AB) { require("./views/ABViewDocxBuilder"), require("./views/ABViewForm"), require("./views/ABViewFormUrl"), - // require("./views/ABViewGantt"), + require("./views/ABViewGantt"), require("./views/ABViewGrid"), - // require("./views/ABViewKanban"), + require("./views/ABViewKanban"), // require("./views/ABViewLabel"), // require("./views/ABViewLayout"), 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 6420c8e..3165c65 100644 --- a/src/rootPages/Designer/properties/PropertyManager.js +++ b/src/rootPages/Designer/properties/PropertyManager.js @@ -105,17 +105,17 @@ export default function (AB) { require("./views/ABViewFormTextbox"), require("./views/ABViewFormTree"), require("./views/ABViewFormUrl"), - // require("./views/ABViewGantt"), + require("./views/ABViewGantt"), require("./views/ABViewGrid"), // require("./views/ABViewImage"), - // require("./views/ABViewKanban"), + require("./views/ABViewKanban"), // require("./views/ABViewLabel"), // require("./views/ABViewLayout"), // require("./views/ABViewList"), require("./views/ABViewMenu"), require("./views/ABViewPage"), // require("./views/ABViewPDFImporter"), - require("./views/ABViewPivot"), + // require("./views/ABViewPivot"), require("./views/ABViewReportsManager"), require("./views/ABViewScheduler"), // require("./views/ABViewText"),