diff --git a/src/plugins/index.js b/src/plugins/index.js index 44e7aad2..d8810495 100644 --- a/src/plugins/index.js +++ b/src/plugins/index.js @@ -1,3 +1,5 @@ +import viewGanttEditor from "./web_view_gantt/FNAbviewganttEditor.js"; +import viewGanttProperties from "./web_view_gantt/FNAbviewganttProperties.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"; @@ -46,6 +48,8 @@ const AllPlugins = [ viewTabEditor, viewTextProperties, viewTextEditor, + viewGanttProperties, + viewGanttEditor, ]; export default { diff --git a/src/rootPages/Designer/properties/workspaceViews/ABViewGantt.js b/src/plugins/web_view_gantt/Abganttworkspace.js similarity index 98% rename from src/rootPages/Designer/properties/workspaceViews/ABViewGantt.js rename to src/plugins/web_view_gantt/Abganttworkspace.js index 66fbfbfb..96b29ba4 100644 --- a/src/rootPages/Designer/properties/workspaceViews/ABViewGantt.js +++ b/src/plugins/web_view_gantt/Abganttworkspace.js @@ -40,11 +40,9 @@ const defaultValues = { }, }; -import UI_Class from "../../ui_class"; - -export default function (AB, ibase) { - const UIClass = UI_Class(AB); - const L = UIClass.L(); +export default function (AB, ABUIPlugin, ibase) { + const UIClass = ABUIPlugin.ClassUI; + const L = AB.Label(); const ABFieldDate = AB.Class.ABFieldManager.fieldByKey("date"); const ABFieldNumber = AB.Class.ABFieldManager.fieldByKey("number"); @@ -184,7 +182,7 @@ export default function (AB, ibase) { $$(ids.endDateFieldID).define( "value", settings.endDateFieldID || - defaultValues.settings.endDateFieldIDFieldID + defaultValues.settings.endDateFieldIDFieldID ); $$(ids.endDateFieldID).refresh(); this.syncCommonLists( @@ -197,7 +195,7 @@ export default function (AB, ibase) { $$(ids.durationFieldID).define( "value", settings.durationFieldID || - defaultValues.settings.durationFieldID + defaultValues.settings.durationFieldID ); $$(ids.durationFieldID).refresh(); this.syncCommonLists( @@ -573,7 +571,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/plugins/web_view_gantt/FNAbviewganttEditor.js b/src/plugins/web_view_gantt/FNAbviewganttEditor.js new file mode 100644 index 00000000..1f3ee54f --- /dev/null +++ b/src/plugins/web_view_gantt/FNAbviewganttEditor.js @@ -0,0 +1,56 @@ +// 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/properties/views/ABViewGantt.js b/src/plugins/web_view_gantt/FNAbviewganttProperties.js similarity index 88% rename from src/rootPages/Designer/properties/views/ABViewGantt.js rename to src/plugins/web_view_gantt/FNAbviewganttProperties.js index 5dbee10d..54023d8d 100644 --- a/src/rootPages/Designer/properties/views/ABViewGantt.js +++ b/src/plugins/web_view_gantt/FNAbviewganttProperties.js @@ -1,27 +1,34 @@ -/* - * ABViewGantt - * A Property manager for our ABViewGantt definitions - */ - -import FABView from "./ABView"; - -import FABViewGanttWorkspaceView from "../workspaceViews/ABViewGantt"; - -import FPopupNewDataField from "../../ui_work_object_workspace_popupNewDataField"; - -export default function (AB) { +import FABViewGanttWorkspaceView from "./Abganttworkspace.js"; +import FPopupNewDataField from "../../rootPages/Designer/ui_work_object_workspace_popupNewDataField"; + +// FNAbviewgantt Properties +// A properties side import for an ABView. +// +export default function FNAbviewganttProperties({ + AB, + ABViewPropertiesPlugin, + ABUIPlugin, +}) { const BASE_ID = "properties_abview_gantt"; - const ABView = FABView(AB); const uiConfig = AB.Config.uiSettings(); - const L = ABView.L(); - + const L = AB.Label(); const ABViewGanttWorkspaceView = FABViewGanttWorkspaceView( AB, + ABUIPlugin, `${BASE_ID}_workspaceView_gantt` ); - class ABViewGanttProperty extends ABView { + 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: "", @@ -206,7 +213,5 @@ export default function (AB) { ViewClass() { return super._ViewClass("gantt"); } - } - - return ABViewGanttProperty; + }; } diff --git a/src/rootPages/Designer/editors/EditorManager.js b/src/rootPages/Designer/editors/EditorManager.js index dde8f1de..c41c9c46 100644 --- a/src/rootPages/Designer/editors/EditorManager.js +++ b/src/rootPages/Designer/editors/EditorManager.js @@ -29,7 +29,6 @@ export default function (AB) { require("./views/ABViewDocxBuilder"), require("./views/ABViewForm"), require("./views/ABViewFormUrl"), - require("./views/ABViewGantt"), require("./views/ABViewGrid"), require("./views/ABViewKanban"), // require("./views/ABViewLabel"), diff --git a/src/rootPages/Designer/editors/views/ABViewGantt.js b/src/rootPages/Designer/editors/views/ABViewGantt.js deleted file mode 100644 index e83db7c1..00000000 --- a/src/rootPages/Designer/editors/views/ABViewGantt.js +++ /dev/null @@ -1,56 +0,0 @@ -/** - * ABViewGantt - * The widget that displays the UI Editor Component on the screen - * when designing the UI. - */ -let myClass = null; -// {singleton} -// we will want to call this factory fn() repeatedly in our imports, -// but we only want to define 1 Class reference. - -import UI_Class from "../../ui_class"; - -export default function (AB) { - if (!myClass) { - const BASE_ID = "interface_editor_viewgantt"; - const UIClass = UI_Class(AB); - - myClass = class ABViewGanttEditor extends UIClass { - static get key() { - return "gantt"; - } - - constructor(view, base = BASE_ID) { - // base: {string} unique base id reference - super(base, { - label: "", - }); - - this.AB = AB; - this.view = view; - this.component = this.view.component(); - } - - 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?.(); - } - }; - } - - return myClass; -} diff --git a/src/rootPages/Designer/properties/PropertyManager.js b/src/rootPages/Designer/properties/PropertyManager.js index 452280d1..e1466a32 100644 --- a/src/rootPages/Designer/properties/PropertyManager.js +++ b/src/rootPages/Designer/properties/PropertyManager.js @@ -105,7 +105,6 @@ export default function (AB) { require("./views/ABViewFormTextbox"), require("./views/ABViewFormTree"), require("./views/ABViewFormUrl"), - require("./views/ABViewGantt"), require("./views/ABViewGrid"), // require("./views/ABViewImage"), require("./views/ABViewKanban"), diff --git a/src/rootPages/Designer/ui_work_object_workspace.js b/src/rootPages/Designer/ui_work_object_workspace.js index 9513c00c..eaade29e 100644 --- a/src/rootPages/Designer/ui_work_object_workspace.js +++ b/src/rootPages/Designer/ui_work_object_workspace.js @@ -5,7 +5,6 @@ */ import UI_Class from "./ui_class"; import UI_Warnings from "./ui_warnings"; -// const ABWorkspaceGantt = require("./ab_work_object_workspace_gantt"); // const ABWorkspaceIndex = require("./ab_work_object_workspace_index"); @@ -26,7 +25,6 @@ import FPopupFilterDataTable from "./ui_work_object_workspace_popupFilter"; import FWorkspaceViews from "./ui_work_object_workspace_workspaceviews"; import FWorkspaceDatatable from "./ui_work_object_workspace_view_grid"; -import FWorkspaceGantt from "./ui_work_object_workspace_view_gantt"; import FWorkspaceKanban from "./ui_work_object_workspace_view_kanban"; import FWorkspaceTrack from "./ui_work_object_workspace_popupTrack"; @@ -38,7 +36,6 @@ export default function (AB, ibase, init_settings) { var L = UIClass.L(); var Datatable = FWorkspaceDatatable(AB, `${ibase}_view_grid`, init_settings); - var Gantt = FWorkspaceGantt(AB, `${ibase}_view_gantt`); var Kanban = FWorkspaceKanban(AB, `${ibase}_view_kanban`); var Warnings = UI_Warnings(AB, `${ibase}_view_warnings`, init_settings); @@ -156,9 +153,6 @@ export default function (AB, ibase, init_settings) { object.save(); }); - // The Gantt Object View - this.hashViews["gantt"] = Gantt; - // The Kanban Object View. this.hashViews["kanban"] = Kanban; @@ -652,7 +646,7 @@ export default function (AB, ibase, init_settings) { { view: "multiview", animate: false, - cells: [Datatable.ui(), Kanban.ui(), Gantt.ui()], + cells: [Datatable.ui(), Kanban.ui()], }, // this.settings.isInsertable // ? @@ -691,7 +685,6 @@ export default function (AB, ibase, init_settings) { allInits.push(this.workspaceViews.init(AB)); allInits.push(Datatable.init(AB)); - allInits.push(Gantt.init(AB)); allInits.push(Kanban.init(AB)); allInits.push(Track.init(AB)); @@ -704,7 +697,6 @@ export default function (AB, ibase, init_settings) { allInits.push(this.PopupCustomIndex.init(AB)); Datatable.datacollectionLoad(this.mockDataCollection); - Gantt.datacollectionLoad(this.mockDataCollection); Kanban.datacollectionLoad(this.mockDataCollection); // Gantt.datacollectionLoad(this.mockDataCollection); @@ -911,9 +903,6 @@ export default function (AB, ibase, init_settings) { this.warningsRefresh(this.CurrentObject); var currentView = this.workspaceViews.getCurrentView(); switch (currentView.type) { - case "gantt": - Gantt.show(currentView); - break; case "grid": Datatable.refreshHeader( @@ -1384,13 +1373,12 @@ export default function (AB, ibase, init_settings) { var currentView = this.workspaceViews.getCurrentView(); // {WorkspaceView} // The current workspace view that is being displayed in our work area - // currentView.component {ABViewGrid | ABViewKanBan | ABViewGantt} + // currentView.component {ABViewGrid | ABViewKanBan } this.mockDataCollection.datasource = object; Datatable.objectLoad(object); Kanban.objectLoad(object); - Gantt.objectLoad(object); if (!this.isReadOnly) { this.PopupNewDataFieldComponent.objectLoad(object); @@ -1523,7 +1511,7 @@ export default function (AB, ibase, init_settings) { // WORKAROUND: load all data becuase kanban does not support pagination now let view = this.workspaceViews.getCurrentView(); - if (view.type === "gantt" || view.type === "kanban") { + if (view.type === "kanban") { this.mockDataCollection.settings.loadAll = true; this.mockDataCollection.loadData(0); } else { @@ -1643,7 +1631,7 @@ export default function (AB, ibase, init_settings) { /** * @method refreshWorkspaceViewMenu() * On the top of our workspace, we show a list if different views - * of our current object: Grid, Kanban, Gantt, etc... + * of our current object: Grid, Kanban, etc... * This method will redraw those selectors based upon our current * settings. */ diff --git a/src/rootPages/Designer/ui_work_object_workspace_popupViewSettings.js b/src/rootPages/Designer/ui_work_object_workspace_popupViewSettings.js index b20fd45f..4be8a275 100644 --- a/src/rootPages/Designer/ui_work_object_workspace_popupViewSettings.js +++ b/src/rootPages/Designer/ui_work_object_workspace_popupViewSettings.js @@ -5,7 +5,7 @@ * */ import UI_Class from "./ui_class"; -import FormABViewGantt from "./properties/workspaceViews/ABViewGantt"; +import FABViewGanttWorkspaceView from "../../plugins/web_view_gantt/Abganttworkspace.js"; import FormABViewGrid from "./properties/workspaceViews/ABViewGrid"; import FormABViewKanBan from "./properties/workspaceViews/ABViewKanban"; @@ -41,7 +41,11 @@ export default function (AB, ibase, isettings) { this._newFieldSource = "comKanban"; this.emit("new.field", key); }); - this.comGantt = FormABViewGantt(AB, `${base}_gantt`); + this.comGantt = FABViewGanttWorkspaceView( + AB, + AB.pluginAPI().ABUIPlugin, + `${base}_gantt` + ); this.comGantt.on("new.field", (key) => { this._newFieldSource = "comGantt"; this.emit("new.field", key); diff --git a/src/rootPages/Designer/ui_work_object_workspace_view_gantt.js b/src/rootPages/Designer/ui_work_object_workspace_view_gantt.js deleted file mode 100644 index 50a14c2d..00000000 --- a/src/rootPages/Designer/ui_work_object_workspace_view_gantt.js +++ /dev/null @@ -1,219 +0,0 @@ -/* - * ui_work_object_workspace_view_gantt - * - * Display an instance of a Gantt type of Workspace View in our area. - * - * This generic webix container will be given an instace of a workspace - * view definition (Gantt), and then create an instance of an ABViewGantt - * widget to display. - * - */ -import UI_Class from "./ui_class"; -import FViewGanttProperties from "./properties/workspaceViews/ABViewGantt"; - -export default function (AB, ibase) { - ibase = ibase || "ui_work_object_workspace_view_gantt"; - const UIClass = UI_Class(AB); - const L = UIClass.L(); - - const ViewGanttProperties = FViewGanttProperties(AB); - - class UI_Work_Object_Workspace_View_Gantt extends UIClass { - constructor(base) { - super(base); - } - - // Our webix UI definition: - ui() { - const ids = this.ids; - - return { - id: ids.component, - rows: [ - {}, - { - view: "label", - label: "Impressive View -> Gantt", - }, - {}, - ], - }; - } - - // Our init() function for setting up our UI - async init(AB) { - this.AB = AB; - } - - defaultSettings(data) { - // Pull the ABViewGantt definitions - const defaultSettings = ViewGanttProperties.toSettings(); - - // transfer our specific field settings - defaultSettings.settings = Object.assign( - defaultSettings.settings, - data.settings ?? {} - ); - - const defaultView = this.AB.viewNewDetatched(defaultSettings); - const defaultGantt = defaultView.toObj(); - defaultGantt.id = data.id ?? AB.jobID(); - - return { - id: defaultGantt.id, - isDefaultView: false, - type: defaultGantt.type, - icon: defaultGantt.icon, - - name: "Default Gantt", - sortFields: [], // array of columns with their sort configurations - filterConditions: [], // array of filters to apply to the data table - frozenColumnID: "", // id of column you want to stop freezing - hiddenFields: [], // array of [ids] to add hidden:true to - - component: defaultGantt, - }; - } - - // getColumnIndex(id) { - // return this._currentComponent.getColumnIndex(id); - // } - - datacollectionLoad(dc) { - this.datacollection = dc; - } - - async show(view) { - await this.viewLoad(view); - $$(this.ids.component).show(); - this.emit("show"); - } - - async viewLoad(view) { - if (view.id == this.currentViewDef?.id) return; - - this.currentViewDef = view; - - // remove any listeners from our current component - this._currentComponent?.eventsClear(); - - this.currentView = this.AB.viewNewDetatched(view.component); - this.currentView.warningsSilent = true; - const component = this.currentView.component(); - - const ui = component.ui(); - ui.id = this.ids.component; - webix.ui(ui, $$(this.ids.component)); - - await component.init(this.AB); - - // Now call .datacollectionLoad() to actually load the data. - component.datacollectionLoad(this.datacollection); - - component.show(); - - this._currentComponent = component; - } - - /** - * @method viewNew() - * return a new workspace view definition with an ABViewKGantt - * based upon the provided default data (gathered from our workspaceView) - * @param {obj} data - * The configuration information for this ABView. - */ - viewNew(data) { - const defaults = Object.assign(this.defaultSettings(data), data); - - return defaults; - } - - // deleteSelected($view) { - // return this._currentComponent.toolbarDeleteSelected($view); - // } - - // massUpdate($view) { - // return this._currentComponent.toolbarMassUpdate($view); - // } - - /** - * @method refreshHeader() - * This is called everytime a change in the ABObject happens and the - * current component needs to refresh the display. So when a Field is - * Added or Removed, the display of the component changes. - * - * the ui_work_object_workspace keeps track of what the USER has set - * for the hiddenFields, frozenColumns and related display options. - * - * Those are passed in, and we are responsible for converting that - * to the component settings. - * @param {array} fields - * An array of ABField instances that are in the current object. - * @param {array} hiddenFields - * An array of the ABfield.columnName(s) that are to be hidden. - * These are what are matched with the {columnHeader}.id - * @param {array} filters - * The current filter settings. - * @param {array} sorts - * The current sort settings. - * @param {string} frozenColumnID - * the ABField.columnName of the column that we have frozen. - */ - // refreshHeader( - // /* fields,*/ hiddenFields = [], - // filters, - // sorts, - // frozenColumnID - // ) { - // const object = this.CurrentObject; - // const columnHeaders = object.columnHeaders(true, true, [], [], []); - - // // this calculation is done in the ABViewGridComponent.refreshHeader(): - // // columnHeaders.forEach((h) => { - // // if (hiddenFields.indexOf(h.id) > -1) { - // // h.hidden = true; - // // } - // // }); - - // this._currentComponent.columnConfig(columnHeaders); - - // this._currentComponent.settings.hiddenFields = hiddenFields; - // this._currentComponent.settings.filterConditions = filters; - // this._currentComponent.settings.sortFields = sorts; - // this._currentComponent.settings.frozenColumnID = frozenColumnID; - - // this._currentComponent.refreshHeader(true); - // } - - /** - * @function rowAdd() - * - * add a new row to the data table - */ - /* - rowAdd() { - // TODO: delete this, I think... - debugger; - if (!settings.isEditable) return; - - const emptyObj = CurrentObject.defaultValues(); - CurrentObject.model() - .create(emptyObj) - .then((obj) => { - if (obj == null) return; - - // const DataTable = $$(ids.component); - // if (!DataTable.exists(obj.id)) - // DataTable.add(obj, 0); - if ( - CurrentDatacollection && - CurrentDatacollection.__dataCollection && - !CurrentDatacollection.__dataCollection.exists(obj.id) - ) - CurrentDatacollection.__dataCollection.add(obj, 0); - }); - } - */ - } - return new UI_Work_Object_Workspace_View_Gantt(ibase); -} diff --git a/src/rootPages/Designer/ui_work_object_workspace_workspaceviews.js b/src/rootPages/Designer/ui_work_object_workspace_workspaceviews.js index 556e56e0..21be614e 100644 --- a/src/rootPages/Designer/ui_work_object_workspace_workspaceviews.js +++ b/src/rootPages/Designer/ui_work_object_workspace_workspaceviews.js @@ -13,10 +13,8 @@ // import UI_Class from "./ui_class"; import WorkspaceDatatable from "./ui_work_object_workspace_view_grid"; -import WorkspaceGantt from "./ui_work_object_workspace_view_gantt"; 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"; @@ -26,21 +24,17 @@ export default function (AB, ibase, isettings) { // var L = UIClass.L(); const Datatable = WorkspaceDatatable(AB, `${ibase}_grid`, isettings); - const Gantt = WorkspaceGantt(AB); const Kanban = WorkspaceKanban(AB); // Gather a list of the various View Properties - const ViewGanttProperties = FViewGanttProperties(AB); const ViewGridProperties = FViewGridProperties(AB); const ViewKanbanProperties = FViewKanbanProperties(AB); var hashViewProperties = {}; - hashViewProperties[ViewGanttProperties.type()] = ViewGanttProperties; hashViewProperties[ViewGridProperties.type()] = ViewGridProperties; hashViewProperties[ViewKanbanProperties.type()] = ViewKanbanProperties; var hashViewComponents = {}; - hashViewComponents[ViewGanttProperties.type()] = Gantt; hashViewComponents[ViewGridProperties.type()] = Datatable; hashViewComponents[ViewKanbanProperties.type()] = Kanban;