gantt plugin

src/plugins/index.js

@@ -8,6 +8,8 @@ import viewDataviewEditor from "./web_view_dataview/FNAbviewdataviewEditor.js";
 import viewDataviewProperties from "./web_view_dataview/FNAbviewdataview.js";
 import viewDetailEditor from "./web_view_detail/FNAbviewdetailEditor.js";
 import viewDetailProperties from "./web_view_detail/FNAbviewdetail.js";
+import viewGanttEditor from "./web_view_gantt/FNAbviewganttEditor.js";
+import viewGanttProperties from "./web_view_gantt/FNAbviewgantt.js";
 import viewGridEditor from "./web_view_grid/FNAbviewgridEditor.js";
 import viewGridProperties from "./web_view_grid/FNAbviewgrid.js";
 import viewImageEditor from "./web_view_image/FNAbviewimageEditor.js";
@@ -39,6 +41,8 @@ const AllPlugins = [
    viewDataviewProperties,
    viewDetailEditor,
    viewDetailProperties,
+   viewGanttEditor,
+   viewGanttProperties,
    viewGridEditor,
    viewGridProperties,
    viewImageEditor,

src/plugins/web_view_gantt/FNAbviewgantt.js

@@ -0,0 +1,220 @@
+// FNAbviewgantt Properties
+// A properties side import for an ABView.
+//
+import FABViewGanttWorkspaceView from "./FNAbviewganttWorkspace.js";
+
+export default function FNAbviewganttProperties({
+   AB,
+   ABViewPropertiesPlugin,
+   ABUIPlugin,
+}) {
+   const BASE_ID = "properties_abview_gantt";
+   const L = AB.Label();
+   const uiConfig = AB.Config.uiSettings();
+
+   const FPopupNewDataField =
+      require("../../rootPages/Designer/ui_work_object_workspace_popupNewDataField").default;
+
+   const ABUIPopupNewDataField = FPopupNewDataField(
+      AB,
+      `${BASE_ID}_popupNewDataField`
+   );
+   const ABViewGanttWorkspaceView = FABViewGanttWorkspaceView(
+      AB,
+      ABUIPlugin,
+      `${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 = ABUIPopupNewDataField;
+
+         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");
+      }
+   };
+}

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({ 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?.();
+      }
+   };
+}