Kanban, gantt, and pivot plugins

src/plugins/index.js

@@ -1,51 +1,63 @@
-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 viewDataviewProperties from "./web_view_dataview/FNAbviewdataview.js";
+import viewDataSelectProperties from "./web_view_data-select/FNAbviewdataselect.js";
 import viewDataviewEditor from "./web_view_dataview/FNAbviewdataviewEditor.js";
-import viewDetailProperties from "./web_view_detail/FNAbviewdetail.js";
+import viewDataviewProperties from "./web_view_dataview/FNAbviewdataview.js";
 import viewDetailEditor from "./web_view_detail/FNAbviewdetailEditor.js";
-import viewImageProperties from "./web_view_image/FNAbviewimage.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 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 viewPivotEditor from "./web_view_pivot/FNAbviewpivotEditor.js";
+import viewPivotProperties from "./web_view_pivot/FNAbviewpivot.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,
-   viewDataviewProperties,
+   viewDataSelectProperties,
    viewDataviewEditor,
-   viewDetailProperties,
+   viewDataviewProperties,
    viewDetailEditor,
-   viewImageProperties,
+   viewDetailProperties,
+   viewGanttEditor,
+   viewGanttProperties,
    viewImageEditor,
-   viewLabelProperties,
+   viewImageProperties,
+   viewKanbanEditor,
+   viewKanbanProperties,
    viewLabelEditor,
-   viewLayoutProperties,
+   viewLabelProperties,
    viewLayoutEditor,
+   viewLayoutProperties,
    viewListProperties,
-   viewPdfImporterProperties,
    viewPdfImporterEditor,
-   viewTabProperties,
+   viewPdfImporterProperties,
+   viewPivotEditor,
+   viewPivotProperties,
    viewTabEditor,
-   viewTextProperties,
+   viewTabProperties,
    viewTextEditor,
+   viewTextProperties,
 ];
 
 export default {

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");
+      }
+   }
+
+
+
+
+}
+

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