@memberjunction/ng-timeline 1.8.0 → 2.0.0

package/dist/lib/component/timeline.component.d.ts

@@ -1,6 +1,6 @@
 import { AfterViewInit } from '@angular/core';
 import { BaseEntity, RunViewParams } from '@memberjunction/core';
-import { SchedulerEvent } from '@progress/kendo-angular-scheduler';
+import { TimelineEvent } from "@progress/kendo-angular-layout";
 import * as i0 from "@angular/core";
 /**
  *
@@ -10,10 +10,18 @@ export declare class TimelineGroup {
      * Entity name for the type of records to be displayed in this group
      */
     EntityName: string;
+    /**
+     * Specifies if the data will come from a provided array of BaseEntity objects - the EntityObjects array, or alternatively, from this object running its own view against the provided EntityName, optionally with a provided Filter (or without).
+     */
+    DataSourceType: 'array' | 'entity';
+    /**
+     * An optional filter that will be applied to the entity specified to reduce the number of records displayed
+     */
+    Filter?: string;
     /**
      * The actual data you want displayed in this group. This is an array of BaseEntity objects that will be displayed in the timeline. You can populate this array from a view or any other source.
      */
-    EntityObjects: BaseEntity[];
+    EntityObjects?: BaseEntity[];
     /**
      * The name of the field in the entity that contains the title of the record that will be displayed in the timeline
      */
@@ -25,7 +33,7 @@ export declare class TimelineGroup {
     /**
      * Use standard or custom icons, if custom is specified, the DisplayIcon property must be set
      */
-    DisplayIconMode: 'standard' | 'custom';
+    DisplayIconMode?: 'standard' | 'custom';
     /**
      * Only used if DisplayIconMode is set to custom, the CSS class name to use from Font Awesome (or any other library that has styles pre-loaded), for the span that will be shown
      */
@@ -33,7 +41,7 @@ export declare class TimelineGroup {
     /**
      * Color mode for items in this group, defaults to auto-selected in which case the color will be determined by the system automatically based on the # of groups
      */
-    DisplayColorMode: 'auto' | 'manual';
+    DisplayColorMode?: 'auto' | 'manual';
     /**
      * Only used if DisplayColorMode is set to manual, the color to use for the items in this group. Any valid color string that can be set into the element style via CSS is valid here.
      */
@@ -42,12 +50,12 @@ export declare class TimelineGroup {
      * When set to field, the SummaryFieldName will be used to display detailed information about the record in the timeline. If set to custom, you need to provide
      * a function for the SummaryFunction property. If set to none, no summary will be displayed.
      */
-    SummaryMode: 'field' | 'custom' | 'none';
+    SummaryMode?: 'field' | 'custom' | 'none';
     /**
      * When SummaryMode is set to 'custom', this function will be used to generate the summary for the record. The function should take a single parameter, the BaseEntity object and will return a string.
      * The string returned can be plain text or HTML and will be displayed in the timeline.
      */
-    SummaryFunction?: ((record: BaseEntity) => string) | undefined;
+    SummaryFunction?: ((record: any) => string) | undefined;
     /**
      * Creates a new instance of the TimelineGroup class using the information from the RunViewParams provided.
      * After receiving back the new object, you can set other properties of the new instance as appropriate.
@@ -61,6 +69,7 @@ export declare class TimelineGroup {
  */
 export declare class TimelineComponent implements AfterViewInit {
     private _groups;
+    DisplayOrientation: 'horizontal' | 'vertical';
     /**
      * Provide an array of one or more TimelineGroup objects to display the data in the timeline. Each group will be displayed in a different color and icon.
      */
@@ -73,14 +82,18 @@ export declare class TimelineComponent implements AfterViewInit {
      */
     get AllowLoad(): boolean;
     set AllowLoad(value: boolean);
-    selectedDate: Date;
-    events: SchedulerEvent[];
-    ngAfterViewInit(): void;
+    events: TimelineEvent[];
+    ngAfterViewInit(): Promise<void>;
     /**
      * This method refreshes the timeline with the data from the provided parameters.
      */
-    Refresh(): void;
-    protected LoadSingleGroup(group: TimelineGroup): void;
+    Refresh(): Promise<void>;
+    /**
+     * This method loads the data for a single group and adds it to the timelineGroupEvents array.
+     * @param group
+     */
+    protected LoadSingleGroup(group: TimelineGroup): Promise<void>;
+    protected mapEntityObjectsToEvents(group: TimelineGroup, entityObjects: BaseEntity[]): TimelineEvent[];
     static ɵfac: i0.ɵɵFactoryDeclaration<TimelineComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TimelineComponent, "mj-timeline", never, { "Groups": { "alias": "Groups"; "required": false; }; "AllowLoad": { "alias": "AllowLoad"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TimelineComponent, "mj-timeline", never, { "DisplayOrientation": { "alias": "DisplayOrientation"; "required": false; }; "Groups": { "alias": "Groups"; "required": false; }; "AllowLoad": { "alias": "AllowLoad"; "required": false; }; }, {}, never, never, false, never>;
 }

package/dist/lib/component/timeline.component.js

@@ -11,21 +11,16 @@ import { Component, Input } from '@angular/core';
 import { RunView } from '@memberjunction/core';
 import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-container-directives";
-import * as i2 from "@progress/kendo-angular-scheduler";
-function TimelineComponent_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 3);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const event_r1 = ctx.event;
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(event_r1.title);
-} }
+import * as i2 from "@progress/kendo-angular-layout";
 /**
  *
  */
 export class TimelineGroup {
     constructor() {
+        /**
+         * Specifies if the data will come from a provided array of BaseEntity objects - the EntityObjects array, or alternatively, from this object running its own view against the provided EntityName, optionally with a provided Filter (or without).
+         */
+        this.DataSourceType = 'entity';
         /**
          * The actual data you want displayed in this group. This is an array of BaseEntity objects that will be displayed in the timeline. You can populate this array from a view or any other source.
          */
@@ -70,9 +65,13 @@ export class TimelineGroup {
 export class TimelineComponent {
     constructor() {
         this._groups = [];
+        this.DisplayOrientation = 'vertical';
         this._deferLoadCount = 0;
         this._allowLoad = true;
-        this.selectedDate = new Date();
+        /*
+        * events is the array of timeline events that gets updated on each call of LoadSingleGroup.
+        * timelineGroupEvents is the array of total timeline events that will get called used by the timeline component.
+        */
         this.events = [];
     }
     /**
@@ -100,61 +99,94 @@ export class TimelineComponent {
         }
     }
     ngAfterViewInit() {
-        if (this.AllowLoad)
-            this.Refresh();
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.AllowLoad)
+                yield this.Refresh();
+        });
     }
     /**
      * This method refreshes the timeline with the data from the provided parameters.
      */
     Refresh() {
-        if (this.Groups && this.Groups.length > 0) {
-            this.Groups.forEach(g => this.LoadSingleGroup(g));
-            // now get the highest date from the events array and set that into the selectedDate
-            if (this.events.length > 0) {
-                this.selectedDate = this.events.reduce((a, b) => a.start > b.start ? a : b).start;
+        return __awaiter(this, void 0, void 0, function* () {
+            this.events.splice(0, this.events.length); // clear out what we have
+            if (this.Groups && this.Groups.length > 0) {
+                for (const g of this.Groups) {
+                    yield this.LoadSingleGroup(g);
+                }
             }
-        }
+        });
     }
+    /**
+     * This method loads the data for a single group and adds it to the timelineGroupEvents array.
+     * @param group
+     */
     LoadSingleGroup(group) {
-        this.events = group.EntityObjects.map(e => {
+        return __awaiter(this, void 0, void 0, function* () {
+            // load up the events for the specified group into the events array
+            let newItems = [];
+            switch (group.DataSourceType) {
+                case 'array':
+                    // use the provided array
+                    if (!group.EntityObjects)
+                        throw new Error("No EntityObjects provided for group");
+                    newItems = this.mapEntityObjectsToEvents(group, group.EntityObjects);
+                    break;
+                case 'entity':
+                    // use run view
+                    const rv = new RunView();
+                    const result = yield rv.RunView({
+                        EntityName: group.EntityName,
+                        ExtraFilter: group.Filter,
+                        ResultType: 'entity_object'
+                    });
+                    if (result && result.Success)
+                        newItems = this.mapEntityObjectsToEvents(group, result.Results);
+                    break;
+            }
+            this.events.push(...newItems);
+        });
+    }
+    mapEntityObjectsToEvents(group, entityObjects) {
+        const ret = entityObjects.map(e => {
             let date = new Date(e.Get(group.DateFieldName));
             let title = e.Get(group.TitleFieldName);
             let summary = "";
             if (group.SummaryMode == 'field') {
                 summary = e.Get(group.TitleFieldName);
             }
-            else if (group.SummaryMode == 'custom' && group.SummaryFunction) {
-                summary = group.SummaryFunction(e);
+            else if (group.SummaryMode == 'custom') {
+                summary = group.SummaryFunction ? group.SummaryFunction(e) : "";
             }
             return {
-                id: e.Get("ID"),
-                title: title,
-                start: date,
-                end: date,
-                isAllDay: true,
                 description: summary,
-                color: group.DisplayColor,
-                icon: group.DisplayIcon,
+                date: date,
+                title: title,
+                subtitle: date.toDateString(),
+                images: [],
+                actions: [],
             };
         });
+        return ret;
     }
 }
 TimelineComponent.ɵfac = function TimelineComponent_Factory(t) { return new (t || TimelineComponent)(); };
-TimelineComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TimelineComponent, selectors: [["mj-timeline"]], inputs: { Groups: "Groups", AllowLoad: "AllowLoad" }, decls: 4, vars: 2, consts: [["mjFillContainer", "", 1, "wrapper"], [3, "events", "selectedDate"], ["kendoSchedulerAllDayEventTemplate", ""], [2, "color", "yellow"]], template: function TimelineComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵelementStart(0, "div", 0)(1, "kendo-scheduler", 1);
-        i0.ɵɵtemplate(2, TimelineComponent_ng_template_2_Template, 2, 1, "ng-template", 2);
-        i0.ɵɵelement(3, "kendo-scheduler-week-view");
-        i0.ɵɵelementEnd()();
+TimelineComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TimelineComponent, selectors: [["mj-timeline"]], inputs: { DisplayOrientation: "DisplayOrientation", Groups: "Groups", AllowLoad: "AllowLoad" }, decls: 2, vars: 4, consts: [["mjFillContainer", "", 1, "wrapper"], [3, "events", "orientation", "collapsibleEvents", "alterMode"]], template: function TimelineComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵelementStart(0, "div", 0);
+        i0.ɵɵelement(1, "kendo-timeline", 1);
+        i0.ɵɵelementEnd();
     } if (rf & 2) {
         i0.ɵɵadvance();
-        i0.ɵɵproperty("events", ctx.events)("selectedDate", ctx.selectedDate);
-    } }, dependencies: [i1.FillContainer, i2.WeekViewComponent, i2.SchedulerComponent, i2.ShortcutsDirective, i2.AllDayEventTemplateDirective] });
+        i0.ɵɵproperty("events", ctx.events)("orientation", ctx.DisplayOrientation)("collapsibleEvents", true)("alterMode", true);
+    } }, dependencies: [i1.FillContainer, i2.TimelineComponent] });
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TimelineComponent, [{
         type: Component,
-        args: [{ selector: 'mj-timeline', template: "<div mjFillContainer class=\"wrapper\"> \n    <kendo-scheduler\n      [events]=\"events\"\n      [selectedDate]=\"selectedDate\"\n    >\n      <ng-template kendoSchedulerAllDayEventTemplate let-event=\"event\">\n        <span style=\"color:yellow;\">{{ event.title }}</span>\n      </ng-template>\n      <kendo-scheduler-week-view> </kendo-scheduler-week-view>\n  </kendo-scheduler>\n</div> " }]
-    }], null, { Groups: [{
+        args: [{ selector: 'mj-timeline', template: "<div mjFillContainer class=\"wrapper\"> \n  <kendo-timeline\n    [events]=\"events\"\n    [orientation]=\"DisplayOrientation\"\n    [collapsibleEvents]=\"true\"\n    [alterMode]=\"true\"\n  >\n  </kendo-timeline>\n</div> " }]
+    }], null, { DisplayOrientation: [{
+            type: Input
+        }], Groups: [{
             type: Input
         }], AllowLoad: [{
             type: Input
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TimelineComponent, { className: "TimelineComponent", filePath: "src/lib/component/timeline.component.ts", lineNumber: 85 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TimelineComponent, { className: "TimelineComponent" }); })();

package/dist/lib/module.d.ts

@@ -6,9 +6,8 @@ import * as i4 from "@progress/kendo-angular-buttons";
 import * as i5 from "@memberjunction/ng-entity-form-dialog";
 import * as i6 from "@progress/kendo-angular-indicators";
 import * as i7 from "@progress/kendo-angular-layout";
-import * as i8 from "@progress/kendo-angular-scheduler";
 export declare class TimelineModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<TimelineModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<TimelineModule, [typeof i1.TimelineComponent], [typeof i2.CommonModule, typeof i3.ContainerDirectivesModule, typeof i4.ButtonsModule, typeof i5.EntityFormDialogModule, typeof i6.IndicatorsModule, typeof i7.LayoutModule, typeof i8.SchedulerModule], [typeof i1.TimelineComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<TimelineModule, [typeof i1.TimelineComponent], [typeof i2.CommonModule, typeof i3.ContainerDirectivesModule, typeof i4.ButtonsModule, typeof i5.EntityFormDialogModule, typeof i6.IndicatorsModule, typeof i7.LayoutModule], [typeof i1.TimelineComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<TimelineModule>;
 }

package/dist/lib/module.js

@@ -4,7 +4,6 @@ import { CommonModule } from '@angular/common';
 import { ButtonsModule } from '@progress/kendo-angular-buttons';
 import { IndicatorsModule } from '@progress/kendo-angular-indicators';
 import { LayoutModule } from '@progress/kendo-angular-layout';
-import { SchedulerModule } from '@progress/kendo-angular-scheduler';
 // MJ
 import { ContainerDirectivesModule } from '@memberjunction/ng-container-directives';
 import { EntityFormDialogModule } from '@memberjunction/ng-entity-form-dialog';
@@ -20,8 +19,7 @@ TimelineModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonMod
         ButtonsModule,
         EntityFormDialogModule,
         IndicatorsModule,
-        LayoutModule,
-        SchedulerModule] });
+        LayoutModule] });
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TimelineModule, [{
         type: NgModule,
         args: [{
@@ -34,8 +32,7 @@ TimelineModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonMod
                     ButtonsModule,
                     EntityFormDialogModule,
                     IndicatorsModule,
-                    LayoutModule,
-                    SchedulerModule
+                    LayoutModule
                 ],
                 exports: [
                     TimelineComponent
@@ -47,5 +44,4 @@ TimelineModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonMod
         ButtonsModule,
         EntityFormDialogModule,
         IndicatorsModule,
-        LayoutModule,
-        SchedulerModule], exports: [TimelineComponent] }); })();
+        LayoutModule], exports: [TimelineComponent] }); })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@memberjunction/ng-timeline",
-  "version": "1.8.0",
+  "version": "2.0.0",
   "description": "MemberJunction: Timeline Display UI component",
   "main": "./dist/public-api.js",
   "typings": "./dist/public-api.d.ts",
@@ -25,12 +25,12 @@
     "@angular/router": "18.0.2"
   },
   "dependencies": {
-    "@memberjunction/core-entities": "1.8.0",
-    "@memberjunction/global": "1.8.0",
-    "@memberjunction/core": "1.8.0",
-    "@memberjunction/ng-container-directives": "1.8.0",
-    "@memberjunction/ng-entity-form-dialog": "1.8.0",
-    "@memberjunction/ng-shared": "1.8.0",
+    "@memberjunction/core-entities": "2.0.0",
+    "@memberjunction/global": "2.0.0",
+    "@memberjunction/core": "2.0.0",
+    "@memberjunction/ng-container-directives": "2.0.0",
+    "@memberjunction/ng-entity-form-dialog": "2.0.0",
+    "@memberjunction/ng-shared": "2.0.0",
     "@progress/kendo-angular-buttons": "16.2.0",
     "@progress/kendo-angular-layout": "16.2.0",
     "@progress/kendo-angular-indicators": "16.2.0",