From 49399a1876d1b7e101563191b4d75e8431649bd9 Mon Sep 17 00:00:00 2001 From: roguisharcanetrickster Date: Mon, 18 May 2026 15:33:32 +0700 Subject: [PATCH 1/2] 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 46f163840dd47416e1859dd6f08fdcc1d376b6c0 Mon Sep 17 00:00:00 2001 From: roguisharcanetrickster Date: Mon, 18 May 2026 15:34:08 +0700 Subject: [PATCH 2/2] kanban --- src/plugins/index.js | 8 +- src/plugins/web_view_kanban/FNAbviewkanban.js | 197 ++++++++++++++++++ .../web_view_kanban/FNAbviewkanbanEditor.js | 66 ++++++ .../Designer/editors/EditorManager.js | 4 +- .../Designer/properties/PropertyManager.js | 4 +- 5 files changed, 268 insertions(+), 11 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/index.js b/src/plugins/index.js index a2ac5f4..8fad9ca 100644 --- a/src/plugins/index.js +++ b/src/plugins/index.js @@ -1,7 +1,3 @@ -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"; @@ -46,9 +42,7 @@ const AllPlugins = [ viewTextEditor, viewKanbanProperties, viewKanbanEditor, - viewPivotProperties, - viewPivotEditor, -, viewGanttProperties, viewGanttEditor]; +]; export default { load: (AB) => { 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..7388b17 100644 --- a/src/rootPages/Designer/editors/EditorManager.js +++ b/src/rootPages/Designer/editors/EditorManager.js @@ -29,9 +29,9 @@ 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"), diff --git a/src/rootPages/Designer/properties/PropertyManager.js b/src/rootPages/Designer/properties/PropertyManager.js index 2610dff..f7404d1 100644 --- a/src/rootPages/Designer/properties/PropertyManager.js +++ b/src/rootPages/Designer/properties/PropertyManager.js @@ -105,10 +105,10 @@ 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"),