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 5a8aa6cc3e106bfeda9f536d44e2cab32f79fbb6 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/index.js | 52 ++-- src/plugins/web_view_gantt/FNAbviewgantt.js | 224 ------------------ src/plugins/web_view_kanban/FNAbviewkanban.js | 197 +++++++++++++++ .../FNAbviewkanbanEditor.js} | 34 +-- .../Designer/editors/EditorManager.js | 4 +- .../Designer/properties/PropertyManager.js | 4 +- 6 files changed, 243 insertions(+), 272 deletions(-) delete mode 100644 src/plugins/web_view_gantt/FNAbviewgantt.js create mode 100644 src/plugins/web_view_kanban/FNAbviewkanban.js rename src/plugins/{web_view_gantt/FNAbviewganttEditor.js => web_view_kanban/FNAbviewkanbanEditor.js} (58%) diff --git a/src/plugins/index.js b/src/plugins/index.js index a2ac5f4..1270107 100644 --- a/src/plugins/index.js +++ b/src/plugins/index.js @@ -1,54 +1,48 @@ -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"; +import viewCarouselProperties from "./web_view_carousel/FNAbviewcarousel.js"; import viewCommentEditor from "./web_view_comment/FNAbviewcommentEditor.js"; -import viewDataSelectProperties from "./web_view_data-select/FNAbviewdataselect.js"; +import viewCommentProperties from "./web_view_comment/FNAbviewcomment.js"; import viewDataSelectEditor from "./web_view_data-select/FNAbviewdataselectEditor.js"; -import viewImageProperties from "./web_view_image/FNAbviewimage.js"; +import viewDataSelectProperties from "./web_view_data-select/FNAbviewdataselect.js"; import viewImageEditor from "./web_view_image/FNAbviewimageEditor.js"; -import viewLabelProperties from "./web_view_label/FNAbviewLabel.js"; +import viewImageProperties from "./web_view_image/FNAbviewimage.js"; +import viewKanbanEditor from "./web_view_kanban/FNAbviewkanbanEditor.js"; +import viewKanbanProperties from "./web_view_kanban/FNAbviewkanban.js"; import viewLabelEditor from "./web_view_label/FNAbviewLabelEditor.js"; -import viewLayoutProperties from "./web_view_layout/FNAbviewlayout.js"; +import viewLabelProperties from "./web_view_label/FNAbviewLabel.js"; import viewLayoutEditor from "./web_view_layout/FNAbviewlayoutEditor.js"; +import viewLayoutProperties from "./web_view_layout/FNAbviewlayout.js"; import viewListProperties from "./web_view_list/FNAbviewlist.js"; -import viewPdfImporterProperties from "./web_view_pdfImporter/FNAbviewpdfimporter.js"; import viewPdfImporterEditor from "./web_view_pdfImporter/FNAbviewpdfimporterEditor.js"; -import viewTabProperties from "./web_view_tab/FNAbviewtab.js"; +import viewPdfImporterProperties from "./web_view_pdfImporter/FNAbviewpdfimporter.js"; import viewTabEditor from "./web_view_tab/FNAbviewtabEditor.js"; -import viewTextProperties from "./web_view_text/FNAbviewtext.js"; +import viewTabProperties from "./web_view_tab/FNAbviewtab.js"; import viewTextEditor from "./web_view_text/FNAbviewtextEditor.js"; +import viewTextProperties from "./web_view_text/FNAbviewtext.js"; const AllPlugins = [ - viewCarouselProperties, viewCarouselEditor, - viewCommentProperties, + viewCarouselProperties, viewCommentEditor, - viewDataSelectProperties, + viewCommentProperties, viewDataSelectEditor, - viewImageProperties, + viewDataSelectProperties, viewImageEditor, - viewLabelProperties, + viewImageProperties, + viewKanbanEditor, + viewKanbanProperties, viewLabelEditor, - viewLayoutProperties, + viewLabelProperties, viewLayoutEditor, + viewLayoutProperties, viewListProperties, - viewPdfImporterProperties, viewPdfImporterEditor, - viewTabProperties, + viewPdfImporterProperties, viewTabEditor, - viewTextProperties, + viewTabProperties, viewTextEditor, - viewKanbanProperties, - viewKanbanEditor, - viewPivotProperties, - viewPivotEditor, -, viewGanttProperties, viewGanttEditor]; + viewTextProperties, +]; 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_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_gantt/FNAbviewganttEditor.js b/src/plugins/web_view_kanban/FNAbviewkanbanEditor.js similarity index 58% rename from src/plugins/web_view_gantt/FNAbviewganttEditor.js rename to src/plugins/web_view_kanban/FNAbviewkanbanEditor.js index 77dc5e1..57280e2 100644 --- a/src/plugins/web_view_gantt/FNAbviewganttEditor.js +++ b/src/plugins/web_view_kanban/FNAbviewkanbanEditor.js @@ -1,12 +1,12 @@ -// FNAbviewgantt Editor +// 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 FNAbviewganttEditor({ AB, ABViewEditorPlugin }) { - const BASE_ID = "interface_editor_viewgantt"; +export default function FNAbviewkanbanEditor({ AB, ABViewEditorPlugin }) { + const BASE_ID = "interface_editor_viewkanban"; -return class ABAbviewganttEditor extends ABViewEditorPlugin { +return class ABAbviewkanbanEditor extends ABViewEditorPlugin { static getPluginKey() { return this.key; @@ -28,33 +28,37 @@ static getPluginKey() { static get key() { - return "gantt"; + return "kanban"; } constructor(view, base = BASE_ID) { // base: {string} unique base id reference - super(view, base, { - label: "", - }); + super(view, base); } ui() { - return this.component.ui(); + const component = this.component; + const _ui = component.ui(); + _ui.minWidth = 400; + + return { + view: "layout", + cols: [_ui, { fillspace: true }], + }; } - async init(AB) { + init(AB) { this.AB = AB; - this.component.ignoreLocal = true; - // in our editor, we provide accessLv = 2 - await this.component.init(AB, 2); + + this.component?.init?.(AB); } detatch() { - this.component.detatch?.(); + this.component?.detatch?.(); } onShow() { - this.component.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"), From 3d5b8669c7e2c37f6958cd4062f701a48a8fdd02 Mon Sep 17 00:00:00 2001 From: roguisharcanetrickster Date: Fri, 22 May 2026 12:41:05 +0700 Subject: [PATCH 3/3] Adjustments --- .../web_view_kanban/Abkanbanworkspace.js | 313 ++++++++++++++++++ src/plugins/web_view_kanban/FNAbviewkanban.js | 40 +-- .../web_view_kanban/FNAbviewkanbanEditor.js | 3 +- .../Designer/properties/PropertyManager.js | 2 +- .../properties/workspaceViews/ABViewGantt.js | 2 +- ...work_object_workspace_popupViewSettings.js | 2 +- .../ui_work_object_workspace_view_kanban.js | 2 +- ...ui_work_object_workspace_workspaceviews.js | 2 +- 8 files changed, 334 insertions(+), 32 deletions(-) create mode 100644 src/plugins/web_view_kanban/Abkanbanworkspace.js diff --git a/src/plugins/web_view_kanban/Abkanbanworkspace.js b/src/plugins/web_view_kanban/Abkanbanworkspace.js new file mode 100644 index 0000000..4dadf0e --- /dev/null +++ b/src/plugins/web_view_kanban/Abkanbanworkspace.js @@ -0,0 +1,313 @@ +// Abkanbanworkspace.js +// +// Manages the settings for a KanBan View in the Object Workspace + +const defaultValues = { + name: "Default Kanban", + settings: { + verticalGroupingField: null, + horizontalGroupingField: null, + ownerField: null, + }, +}; + +var classABViewKanban = null; + +import UI_Class from "../../rootPages/Designer/ui_class"; + +export default function (AB, ibase) { + const UIClass = UI_Class(AB); + var L = UIClass.L(); + + const ABFieldConnect = AB.Class.ABFieldManager.fieldByKey("connectObject"); + const ABFieldList = AB.Class.ABFieldManager.fieldByKey("list"); + const ABFieldUser = AB.Class.ABFieldManager.fieldByKey("user"); + + if (!classABViewKanban) { + classABViewKanban = class ABViewKanban extends UIClass { + constructor(idBase) { + super(idBase, { + vGroupInput: "", + hGroupInput: "", + ownerInput: "", + }); + + this.on("field.added", (field) => { + this.refreshOptions(this.CurrentObject, this._view); + if (this._autoSelectInput) { + $$(this._autoSelectInput)?.setValue(field.id); + } + }); + + this._autoSelectInput = null; + } + + type() { + return "kanban"; + } + + icon() { + return "fa fa-columns"; + } + + refreshOptions(object, view, options = {}) { + let ids = this.ids; + + const initSelect = ( + $option, + attribute, + filter = (f) => f.key === ABFieldList.defaults().key, + isRequired + ) => { + if ($option == null || object == null) return; + + var options = object + .fields() + .filter(filter) + .map(({ id, label }) => ({ id, value: label })); + if (!isRequired && options.length) { + options.unshift({ + id: "none", + value: L("None"), + }); + } + $option.define("options", options); + + if (view) { + if (view.settings[attribute]) { + $option.define("value", view.settings[attribute]); + } else if (!isRequired && options[0]) { + $option.define("value", options[0].id); + } + } else if (options.filter((o) => o.id).length === 1) { + $option.define("value", options[0].id); + } + + $option.refresh(); + }; + + const verticalGroupingFieldFilter = (field) => + [ + ABFieldList.defaults().key, + ABFieldUser.defaults().key, + ].includes(field.key); + + const horizontalGroupingFieldFilter = (field) => + [ + ABFieldConnect.defaults().key, + ABFieldList.defaults().key, + ABFieldUser.defaults().key, + ].includes(field.key); + + initSelect( + options.vGroupInput || $$(ids.vGroupInput), + "verticalGroupingField", + verticalGroupingFieldFilter, + true + ); + initSelect( + options.hGroupInput || $$(ids.hGroupInput), + "horizontalGroupingField", + horizontalGroupingFieldFilter, + false + ); + initSelect( + options.ownerInput || $$(ids.ownerInput), + "ownerField", + (f) => { + return ( + f.key === ABFieldUser.defaults().key || + (f.key === ABFieldConnect.defaults().key && + f.settings.linkType == "one" && + f.settings.linkViaType == "many") + ); + }, + false + ); + } + + ui() { + let ids = this.ids; + return { + batch: "kanban", + rows: [ + { + cols: [ + { + id: ids.vGroupInput, + view: "richselect", + label: ` ${L( + "Vertical Grouping" + )}`, + placeholder: L("Select a field"), + labelWidth: 180, + name: "verticalGroupingField", + required: true, + options: [], + on: { + onChange: () => { + $$(ids.vGroupInput).validate(); + $$(ids.hGroupInput).validate(); + this.emit("changed"); + }, + }, + invalidMessage: L("Required"), + }, + { + view: "button", + css: "webix_primary", + type: "icon", + icon: "fa fa-plus", + label: "", + width: 30, + click: () => { + this._autoSelectInput = ids.vGroupInput; + this.emit( + "new.field", + ABFieldList.defaults().key + ); + }, + }, + ], + }, + { + cols: [ + { + id: ids.hGroupInput, + view: "richselect", + label: ` ${L( + "Horizontal Grouping" + )}`, + placeholder: L("Select a field"), + labelWidth: 180, + name: "horizontalGroupingField", + required: false, + options: [], + invalidMessage: L( + "Cannot be the same as vertical grouping field" + ), + validate: (value) => { + var vGroupValue = $$(ids.vGroupInput).getValue(); + return ( + !vGroupValue || !value || vGroupValue !== value + ); + }, + on: { + onChange: () => { + $$(ids.hGroupInput).validate(); + this.emit("changed"); + }, + }, + }, + { + view: "button", + css: "webix_primary", + type: "icon", + icon: "fa fa-plus", + label: "", + width: 30, + click: () => { + this._autoSelectInput = ids.hGroupInput; + this.emit( + "new.field", + ABFieldList.defaults().key + ); + }, + }, + ], + }, + { + cols: [ + { + id: ids.ownerInput, + view: "richselect", + label: ` ${L( + "Card Owner" + )}`, + placeholder: L("Select a user field"), + labelWidth: 180, + name: "ownerField", + options: [], + on: { + onChange: (newID, oldID) => { + if (newID == oldID) return; + this.emit("changed"); + }, + }, + }, + { + view: "button", + css: "webix_primary", + type: "icon", + icon: "fa fa-plus", + label: "", + width: 30, + click: () => { + this._autoSelectInput = ids.ownerInput; + this.emit( + "new.field", + ABFieldConnect.defaults().key + ); + }, + }, + ], + }, + ], + }; + } + + init(object, view) { + this.objectLoad(object); + this._view = view; + this.refreshOptions(object, view); + } + + clearValues() { + const ids = this.ids; + let idFields = [ids.vGroupInput, ids.hGroupInput, ids.ownerInput]; + idFields.forEach((id) => { + let $o = $$(id); + $o.blockEvent(); + $o.define("value", null); + $o.unblockEvent(); + $o.refresh(); + }); + } + + values() { + let ids = this.ids; + let result = {}; + result.verticalGroupingField = + $$(ids.vGroupInput).getValue() || null; + result.horizontalGroupingField = + $$(ids.hGroupInput).getValue() || null; + result.ownerField = $$(ids.ownerInput).getValue() || null; + + return result; + } + + fromSettings(data) { + for (var v in defaultValues) { + this[v] = data[v] || defaultValues[v]; + } + + this.type = this.type(); + this.key = this.type(); + } + + toSettings() { + var obj = {}; + + for (var v in defaultValues) { + obj[v] = this[v] || defaultValues[v]; + } + + obj.key = this.type(); + obj.type = this.type(); + return obj; + } + }; + } + + return new classABViewKanban(ibase); +} diff --git a/src/plugins/web_view_kanban/FNAbviewkanban.js b/src/plugins/web_view_kanban/FNAbviewkanban.js index a8c5caf..2121419 100644 --- a/src/plugins/web_view_kanban/FNAbviewkanban.js +++ b/src/plugins/web_view_kanban/FNAbviewkanban.js @@ -1,21 +1,22 @@ // FNAbviewkanban Properties // A properties side import for an ABView. // +import FABViewKanbanWorkspace from "./Abkanbanworkspace.js"; +import FPopupNewDataField from "../../rootPages/Designer/ui_work_object_workspace_popupNewDataField"; + export default function FNAbviewkanbanProperties({ AB, ABViewPropertiesPlugin, - // ABUIPlugin, + ABViewPropertyLinkPage, }) { const BASE_ID = "properties_abview_kanban"; - const LinkPageProperty = ABViewPropertyLinkPage(AB, BASE_ID); const uiConfig = AB.UISettings.config(); + const L = AB.Label(); - const ViewKanbanProperties = FViewKanbanProperties(AB, `${BASE_ID}_prop`); + const LinkPagePropertyClass = ABViewPropertyLinkPage(AB, BASE_ID); + const ViewKanbanProperties = FABViewKanbanWorkspace(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() { @@ -24,13 +25,13 @@ export default function FNAbviewkanbanProperties({ 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); + this.AB = AB; + this.linkPageComponent = new LinkPagePropertyClass(); } static get key() { @@ -91,8 +92,6 @@ export default function FNAbviewkanbanProperties({ this.onChange(); }); - // NOTE: keep this definition in the .init() routine - // to prevent an infinite recursion. PopupNewDataFieldComponent = FPopupNewDataField( AB, `${BASE_ID}_popupNewDataField` @@ -113,7 +112,6 @@ export default function FNAbviewkanbanProperties({ populate(view) { super.populate(view); - // Load in all the Available Datacollections: var listDC = view.application.datacollectionsIncluded().map((d) => { return { id: d.id, @@ -145,14 +143,9 @@ export default function FNAbviewkanbanProperties({ let obj = dc.datasource; ViewKanbanProperties.init(obj, this.CurrentView); - PopupNewDataFieldComponent.objectLoad(obj); + PopupNewDataFieldComponent?.objectLoad(obj); } - /** - * @method values - * return the values for this form. - * @return {obj} - */ values() { const values = super.values(); @@ -161,10 +154,10 @@ export default function FNAbviewkanbanProperties({ values.settings = $component.getValues(); - // let fields = ViewKanbanProperties.values(); - // Object.keys(fields).forEach((f) => { - // values.settings[f] = fields[f]; - // }); + let fields = ViewKanbanProperties.values(); + Object.keys(fields).forEach((f) => { + values.settings[f] = fields[f]; + }); const linkSettings = this.linkPageComponent.getSettings(); for (const key in linkSettings) { @@ -174,11 +167,6 @@ export default function FNAbviewkanbanProperties({ 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 index 3d265c3..6c62826 100644 --- a/src/plugins/web_view_kanban/FNAbviewkanbanEditor.js +++ b/src/plugins/web_view_kanban/FNAbviewkanbanEditor.js @@ -43,9 +43,10 @@ export default function FNAbviewkanbanEditor({ AB, ABViewEditorPlugin }) { }; } - init(AB) { + async init(AB) { this.AB = AB; + await super.init(AB); this.component?.init?.(AB); } diff --git a/src/rootPages/Designer/properties/PropertyManager.js b/src/rootPages/Designer/properties/PropertyManager.js index e35b752..6f81615 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"), diff --git a/src/rootPages/Designer/properties/workspaceViews/ABViewGantt.js b/src/rootPages/Designer/properties/workspaceViews/ABViewGantt.js index 66fbfbf..bdabda8 100644 --- a/src/rootPages/Designer/properties/workspaceViews/ABViewGantt.js +++ b/src/rootPages/Designer/properties/workspaceViews/ABViewGantt.js @@ -573,7 +573,7 @@ export default function (AB, ibase) { */ fromSettings(data) { for (const key in defaultValues) - this[v] = data[key] || defaultValues[key]; + this[key] = data[key] || defaultValues[key]; this.settings = Object.assign( {}, diff --git a/src/rootPages/Designer/ui_work_object_workspace_popupViewSettings.js b/src/rootPages/Designer/ui_work_object_workspace_popupViewSettings.js index b20fd45..b167f6e 100644 --- a/src/rootPages/Designer/ui_work_object_workspace_popupViewSettings.js +++ b/src/rootPages/Designer/ui_work_object_workspace_popupViewSettings.js @@ -7,7 +7,7 @@ import UI_Class from "./ui_class"; import FormABViewGantt from "./properties/workspaceViews/ABViewGantt"; import FormABViewGrid from "./properties/workspaceViews/ABViewGrid"; -import FormABViewKanBan from "./properties/workspaceViews/ABViewKanban"; +import FormABViewKanBan from "../../plugins/web_view_kanban/Abkanbanworkspace.js"; export default function (AB, ibase, isettings) { ibase = ibase || "abd_work_object_workspace_popupAddView"; diff --git a/src/rootPages/Designer/ui_work_object_workspace_view_kanban.js b/src/rootPages/Designer/ui_work_object_workspace_view_kanban.js index f13df45..c20a36c 100644 --- a/src/rootPages/Designer/ui_work_object_workspace_view_kanban.js +++ b/src/rootPages/Designer/ui_work_object_workspace_view_kanban.js @@ -9,7 +9,7 @@ * */ import UI_Class from "./ui_class"; -import FViewKanbanProperties from "./properties/workspaceViews/ABViewKanban"; +import FViewKanbanProperties from "../../plugins/web_view_kanban/Abkanbanworkspace.js"; export default function (AB, ibase) { ibase = ibase || "ui_work_object_workspace_view_kanban"; diff --git a/src/rootPages/Designer/ui_work_object_workspace_workspaceviews.js b/src/rootPages/Designer/ui_work_object_workspace_workspaceviews.js index 556e56e..da5f375 100644 --- a/src/rootPages/Designer/ui_work_object_workspace_workspaceviews.js +++ b/src/rootPages/Designer/ui_work_object_workspace_workspaceviews.js @@ -18,7 +18,7 @@ import WorkspaceKanban from "./ui_work_object_workspace_view_kanban"; import FViewGanttProperties from "./properties/workspaceViews/ABViewGantt"; import FViewGridProperties from "./properties/workspaceViews/ABViewGrid"; -import FViewKanbanProperties from "./properties/workspaceViews/ABViewKanban"; +import FViewKanbanProperties from "../../plugins/web_view_kanban/Abkanbanworkspace.js"; export default function (AB, ibase, isettings) { ibase = ibase || "ui_work_object_workspace_workspaceviews";