@frxjs/ngx-timeline 1.0.4 → 1.0.12

package/projects/ngx-timeline/src/lib/components/ngx-timeline-event/ngx-timeline-event.component.spec.ts

@@ -0,0 +1,89 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NgxTimelineEventComponent } from './ngx-timeline-event.component';
+import { NgxTimelineItemPosition } from '../../models';
+import localeIt from '@angular/common/locales/it';
+import { registerLocaleData } from '@angular/common';
+
+registerLocaleData(localeIt);
+
+const year = 2021;
+const monthIndex = 7;
+const day = 19;
+const event = {
+  type: "event",
+  position: NgxTimelineItemPosition.ON_LEFT,
+  periodInfo: {
+    periodKey: '08/2021',
+    year: year,
+    month: monthIndex + 1,
+    day: day,
+    firstDate: new Date(year, monthIndex, day)
+  },
+  eventInfo: {
+    timestamp: new Date(year, monthIndex, day),
+    title: 'event title',
+    description: 'event description',
+    id: '1'
+  }
+};
+describe('NgxTimelineEventComponent', () => {
+  let component: NgxTimelineEventComponent;
+  let fixture: ComponentFixture<NgxTimelineEventComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ NgxTimelineEventComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NgxTimelineEventComponent);
+    component = fixture.componentInstance;
+    component.event = event;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('should getDateObj', () => {
+    it('without event', () => {
+      component.event = null;
+      const res = component.getDateObj();
+      expect(res).toEqual({day: undefined, month: undefined, year: undefined});
+    });
+    it('without event info', () => {
+      component.event = {};
+      const res = component.getDateObj();
+      expect(res).toEqual({day: undefined, month: undefined, year: undefined});
+    });
+    it('without event info timestamp', () => {
+      component.event = {eventInfo: null};
+      const res = component.getDateObj();
+      expect(res).toEqual({day: undefined, month: undefined, year: undefined});
+    });
+    it('should getDateObj without langCode', () => {
+      const res = component.getDateObj();
+      expect(res).toEqual({day: '19', month: 'Aug', year: 2021});
+    });
+    it('should getDateObj with supported langCode', () => {
+      component.langCode = 'en';
+      const res = component.getDateObj();
+      expect(res).toEqual({day: '19', month: 'Aug', year: 2021});
+    });
+    it('should getDateObj with another supported langCode', () => {
+      component.langCode = 'it';
+      const res = component.getDateObj();
+      expect(res).toEqual({day: '19', month: 'ago', year: 2021});
+    });
+    it('should getDateObj with unsupported langCode', () => {
+      component.langCode = 'xx';
+      const res = component.getDateObj();
+      expect(res).toEqual({day: '19', month: 'Aug', year: 2021});
+    });
+  });
+
+});

package/projects/ngx-timeline/src/lib/components/ngx-timeline-event/ngx-timeline-event.component.ts

@@ -0,0 +1,66 @@
+import { Component, Input, Output, TemplateRef } from '@angular/core';
+import { NgxTimelineItem, NgxTimelineItemPosition } from '../../models/NgxTimelineEvent';
+import { DatePipe } from '@angular/common';
+import { BehaviorSubject } from 'rxjs';
+import { supportedLanguageCodes } from '../../models';
+
+@Component({
+  selector: 'ngx-timeline-event',
+  templateUrl: './ngx-timeline-event.component.html',
+  styleUrls: ['./ngx-timeline-event.component.scss']
+})
+export class NgxTimelineEventComponent {
+
+  /**
+   * Event to be displayed
+   */
+  @Input() event: NgxTimelineItem;
+  /**
+   * Event position respect to the vertical line (LEFT or RIGHT)
+   */
+  @Input() colSidePosition: NgxTimelineItemPosition;
+  /**
+   * Language code used to format the dates
+   */
+  @Input() langCode?: string;
+  /**
+   * Inner custom template used to display the event detail
+   */
+  @Input() innerEventCustomTemplate?: TemplateRef<any>;
+  /**
+   * Boolean used to enable or disable the animations
+   */
+  @Input() enableAnimation = true;
+  /**
+   * Output click event emitter
+   */
+  @Output() clickEmitter: BehaviorSubject<NgxTimelineItem> = new BehaviorSubject(null);
+
+  ngxTimelineItemPosition = NgxTimelineItemPosition;
+
+  private readonly monthAbbr = 'MMM';
+  private readonly dayFormat = 'dd';
+
+  constructor() { }
+
+  getDateObj(): any {
+    let day;
+    let month;
+    let year;
+    const dateTimestamp = this.event?.eventInfo?.timestamp;
+    if (dateTimestamp) {
+      const timestamp = new Date(dateTimestamp);
+      const langCode = this.getLangCode();
+      month = new DatePipe(langCode).transform(timestamp, this.monthAbbr);
+      day = new DatePipe(langCode).transform(timestamp, this.dayFormat);
+      year = timestamp.getFullYear();
+    }
+
+    return {day, month, year};
+  }
+
+  protected getLangCode(): string  {
+    return this.langCode && supportedLanguageCodes.includes(this.langCode) ? this.langCode : supportedLanguageCodes[0];
+  }
+
+}

package/projects/ngx-timeline/src/lib/components/ngx-timeline.component.html

@@ -0,0 +1,98 @@
+<div class="main-container">
+  <div class="items-container">
+    <div *ngFor="let item of items; let index = index;" class="row">
+      <!-- DESKTOP -->
+      <div class="col col-left desktop" [ngClass]="item.periodInfo ? 'col-period' : 'col-event'">
+        <div class="event-outer-container" *ngIf="item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT">
+          <ng-container *ngTemplateOutlet="eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_LEFT}"></ng-container>
+        </div>
+        <div class="hour left" *ngIf="item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT">
+          <ng-container *ngTemplateOutlet="dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}" ></ng-container>
+        </div>
+      </div>
+
+      <div class="col col-center desktop" [ngClass]="item.periodInfo ? 'col-period' : 'col-event'">
+        <div class="center-inner" *ngIf="item.periodInfo">
+          <ng-container *ngTemplateOutlet="periodCustomTemplate || periodTemplate; context: {period: item.periodInfo, index: index}"></ng-container>
+        </div>
+        <div class="center-inner no-period-key" *ngIf="!item.periodInfo">
+          <ng-container *ngTemplateOutlet="centerLinesIconTemplate; context: {index: index}"></ng-container>
+        </div>
+      </div>
+
+      <div class="col col-right desktop" [ngClass]="item.periodInfo ? 'col-period' : 'col-event'">
+        <div class="event-outer-container" *ngIf="item.eventInfo && item.position === ngxTimelineItemPosition.ON_RIGHT">
+          <ng-container *ngTemplateOutlet="eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_RIGHT}"></ng-container>
+        </div>
+        <div class="hour right" *ngIf="item.eventInfo && item.position === ngxTimelineItemPosition.ON_LEFT">
+          <ng-container *ngTemplateOutlet="dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}" ></ng-container>
+        </div>
+      </div>
+
+      <!-- MOBILE -->
+      <div class="col col-left mobile" [ngClass]="item.periodInfo ? 'col-period' : 'col-event'">
+        <div class="hour left" *ngIf="item.eventInfo">
+          <div class="hour-inner-container">
+            <ng-container *ngTemplateOutlet="dateInstantCustomTemplate || dateInstantTemplate; context: {item: item.eventInfo}" ></ng-container>
+          </div>
+        </div>
+      </div>
+
+      <div class="col col-center mobile" [ngClass]="item.periodInfo ? 'col-period' : 'col-event'">
+        <div class="center-inner" *ngIf="item.periodInfo;">
+            <ng-container *ngTemplateOutlet="periodCustomTemplate || periodTemplate; context: {period: item.periodInfo, index: index}"></ng-container>
+        </div>
+        <div class="center-inner no-period-key" *ngIf="!item.periodInfo;">
+          <ng-container *ngTemplateOutlet="centerLinesIconTemplate;context: {index: index}"></ng-container>
+        </div>
+      </div>
+
+      <div class="col col-right mobile" [ngClass]="item.periodInfo ? 'col-period' : 'col-event'">
+        <div class="event-outer-container" *ngIf="item.eventInfo">
+          <ng-container *ngTemplateOutlet="eventCustomTemplate || eventTemplate; context: {event: item, colSidePosition: ngxTimelineItemPosition.ON_RIGHT}"></ng-container>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+
+<ng-template #centerLinesIconTemplate let-index=index>
+  <div class="line"></div>
+  <ng-container *ngTemplateOutlet="centerIconCustomTemplate || centerIconTemplate"></ng-container>
+  <div [ngClass]="{'transparent last-line': index === items.length - 1}" class="line"></div>
+</ng-template>
+
+<ng-template #centerIconTemplate>
+  <div class="center-icon-container">
+    <div class="icon"></div>
+  </div>
+</ng-template>
+
+<ng-template #dateInstantTemplate let-item=item>
+  <span>
+    {{item?.timestamp | ngxdate : ngxDateFormat.HOURS_MINUTES : langCode}}
+  </span>
+</ng-template>
+
+<ng-template #periodTemplate let-period=period let-index=index>
+  <div [ngClass]="{'transparent first-line': !index}" class="line"></div>
+  <div class="period-container">
+    <div class="period-inner-container">
+      <span>{{period?.firstDate | ngxdate : getPeriodKeyDateFormat() : langCode}}</span>
+    </div>
+  </div>
+  <div class="line"></div>
+</ng-template>
+
+<ng-template #eventTemplate let-event=event let-colSidePosition=colSidePosition>
+  <ngx-timeline-event
+    [event]="event"
+    [langCode]="langCode"
+    [enableAnimation]="enableAnimation"
+    [innerEventCustomTemplate]="innerEventCustomTemplate"
+    [colSidePosition]="colSidePosition"
+    (clickEmitter)="clickEmitter.next($event)">
+  </ngx-timeline-event>
+</ng-template>
+

package/projects/ngx-timeline/src/lib/components/ngx-timeline.component.spec.ts

@@ -0,0 +1,160 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NgxTimelineComponent } from './ngx-timeline.component';
+import { NgxDateFormat, NgxTimelineEventGroup } from '../models';
+
+describe('NgxTimelineComponent', () => {
+  let component: NgxTimelineComponent;
+  let fixture: ComponentFixture<NgxTimelineComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ NgxTimelineComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NgxTimelineComponent);
+    component = fixture.componentInstance;
+    component.events = null;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should call the groupEvents when ngOnChanges', () => {
+    const spy = spyOn<any>(component, 'groupEvents');
+    component.ngOnChanges({});
+    expect(spy).toHaveBeenCalled();
+  });
+
+  it('should clear', () => {
+    component['clear']();
+    expect(component.groups).toEqual({});
+    expect(component.periods).toEqual([]);
+    expect(component.items).toEqual([]);
+  });
+
+  describe('should getPeriodKeyDateFormat', () => {
+    it('when default groupEvent is provided', () => {
+      const res = component.getPeriodKeyDateFormat();
+      expect(res).toEqual(NgxDateFormat.MONTH_YEAR);
+    });
+
+    [{groupEvent: NgxTimelineEventGroup.YEAR, formatDate: NgxDateFormat.YEAR},
+      {groupEvent: NgxTimelineEventGroup.DAY_MONTH_YEAR, formatDate: NgxDateFormat.DAY_MONTH_YEAR}
+    ].forEach(elem => {
+      it(`when groupEvent ${elem.groupEvent} is provided`, () => {
+        component.groupEvent =  elem.groupEvent;
+        expect(component.getPeriodKeyDateFormat()).toEqual(elem.formatDate);
+      });
+    });
+
+  });
+
+
+  describe('should groupEvents', ()=> {
+    it('when no events', () => {
+      const spies = [];
+      spies.push(spyOn<any>(component, 'clear'));
+      spies.push(spyOn<any>(component, 'sortEvents'));
+      spies.push(spyOn<any>(component, 'setGroups'));
+      spies.push(spyOn<any>(component, 'setPeriods'));
+      spies.push(spyOn<any>(component, 'setItems'));
+      component['groupEvents'](null);
+      spies.forEach(spy => expect(spy).not.toHaveBeenCalled());
+    });
+    it('when events', () => {
+      const spies = [];
+      spies.push(spyOn<any>(component, 'clear'));
+      spies.push(spyOn<any>(component, 'sortEvents'));
+      spies.push(spyOn<any>(component, 'setGroups'));
+      spies.push(spyOn<any>(component, 'setPeriods'));
+      spies.push(spyOn<any>(component, 'setItems'));
+      component['groupEvents']([]);
+      spies.forEach(spy => expect(spy).toHaveBeenCalled());
+    });
+  });
+
+  describe('should sortEvents', ()=> {
+    it('when events', () => {
+      const event = {timestamp: new Date(2021, 11, 10)};
+      const event2 = {timestamp: new Date(2021, 8, 10)};
+      const events = [event, event2];
+      component['sortEvents'](events);
+      expect(events[0]).toEqual(event2);
+      expect(events[1]).toEqual(event);
+    });
+  });
+
+  describe('should setGroups', ()=> {
+    it('when events', () => {
+      const event = {timestamp: new Date(2021, 11, 10)};
+      const event2 = {timestamp: new Date(2021, 8, 10)};
+      const event3 = {timestamp: new Date(2021, 8, 11)};
+      const events = [event, event2, event3];
+      component['setGroups'](events);
+      expect(Object.keys(component.groups).length).toEqual(2);
+    });
+  });
+
+  describe('should setItems', ()=> {
+    it('when events', () => {
+      const period = {periodInfo: {periodKey: '2021/7'}};
+      const period2 = {periodInfo: {periodKey: '2021/8'}};
+      component.periods = [period, period2];
+      const event = {timestamp: new Date(2021, 7, 10)};
+      const event2 = {timestamp: new Date(2021, 8, 10)};
+      const event3 = {timestamp: new Date(2021, 8, 11)};
+      component.groups['2021/7'] = [event];
+      component.groups['2021/8'] = [event2, event3];
+      component['setItems']();
+      expect(component.items.length).toEqual(5);
+    });
+  });
+
+  describe('should setPeriods', ()=> {
+    it('when events', () => {
+      const date = new Date(2021, 7, 10);
+      const date2 = new Date(2021, 8, 10);
+      const date3= new Date(2021, 8, 11);
+      const event = {timestamp: date}
+      const event2 = {timestamp: date2};
+      const event3 = {timestamp: date3};
+      component.groups['2021/7'] = [event];
+      component.groups['2021/8'] = [event2, event3];
+      component['setPeriods']();
+      expect(component.periods.length).toEqual(2);
+      expect(component.periods[0]).toEqual({periodInfo: {year: 2021, month: 7, day: NaN, periodKey: '2021/7', firstDate: date }})
+      expect(component.periods[1]).toEqual({periodInfo: {year: 2021, month: 8, day: NaN, periodKey: '2021/8', firstDate: date2 }})
+    });
+  });
+
+  describe('should getPeriodKeyFromEvent', ()=> {
+    it('when groupEvent by year', () => {
+      component.groupEvent = NgxTimelineEventGroup.YEAR;
+      const event = {timestamp: new Date(2021, 7, 10)};
+      const event2 = {timestamp: new Date(2021, 8, 9)};
+      expect(component['getPeriodKeyFromEvent'](event)).toBe('2021');
+      expect(component['getPeriodKeyFromEvent'](event2)).toBe('2021');
+    });
+    it('when groupEvent by month year', () => {
+      component.groupEvent = NgxTimelineEventGroup.MONTH_YEAR;
+      const event = {timestamp: new Date(2021, 7, 10)};
+      const event2 = {timestamp: new Date(2021, 8, 9)};
+      expect(component['getPeriodKeyFromEvent'](event)).toBe('2021/7');
+      expect(component['getPeriodKeyFromEvent'](event2)).toBe('2021/8');
+    });
+    it('when groupEvent by day month year', () => {
+      component.groupEvent = NgxTimelineEventGroup.DAY_MONTH_YEAR;
+      const event = {timestamp: new Date(2021, 7, 10)};
+      const event2 = {timestamp: new Date(2021, 8, 9)};
+      expect(component['getPeriodKeyFromEvent'](event)).toBe('2021/7/10');
+      expect(component['getPeriodKeyFromEvent'](event2)).toBe('2021/8/9');
+    });
+  });
+
+});

package/projects/ngx-timeline/src/lib/components/ngx-timeline.component.ts

@@ -0,0 +1,187 @@
+import { Component, OnInit, Input, TemplateRef, OnChanges, SimpleChanges, Output } from '@angular/core';
+import {
+  NgxTimelineEvent,
+  NgxTimelineItem,
+  NgxTimelineItemPosition,
+  NgxTimelinePeriodInfo,
+  NgxDateFormat,
+  NgxTimelineEventGroup,
+  NgxTimelineEventChangeSideInGroup,
+  periodKeyDateFormat,
+  fieldsToCheckEventChangeSideInGroup,
+  fieldsToAddEventGroup } from '../models';
+import { BehaviorSubject } from 'rxjs';
+
+@Component({
+  selector: 'ngx-timeline',
+  templateUrl: './ngx-timeline.component.html',
+  styleUrls: ['./ngx-timeline.scss'],
+})
+export class NgxTimelineComponent implements OnInit, OnChanges {
+  /**
+   * List of events to be displayed
+   */
+  @Input() events: NgxTimelineEvent[];
+  /**
+   * Language code used to show the date formatted
+   */
+  @Input() langCode?: string;
+  /**
+   * Boolean used to enable or disable the animations
+   */
+  @Input() enableAnimation = true;
+  /**
+   * Logic to be applied in order to group events
+   */
+  @Input() groupEvent?: NgxTimelineEventGroup = NgxTimelineEventGroup.MONTH_YEAR;
+  /**
+   * Logic to be applied in order to put evetns on LEFT or RIGHT
+   */
+  @Input() changeSideInGroup?: NgxTimelineEventChangeSideInGroup = NgxTimelineEventChangeSideInGroup.ON_DIFFERENT_DAY;
+  /**
+   * Custom Template displayed before a group of events
+   */
+  @Input() periodCustomTemplate: TemplateRef<any>;
+  /**
+   * Custom Template displayed to show a single event
+   */
+  @Input() eventCustomTemplate: TemplateRef<any>;
+  /**
+   * Custom Template displayed to show an separator icon
+   */
+  @Input() centerIconCustomTemplate: TemplateRef<any>;
+  /**
+   * Custom Template displayed to show the side date
+   */
+  @Input() dateInstantCustomTemplate: TemplateRef<any>;
+  /**
+   * Custom Template displayed to show the inner event
+   */
+  @Input() innerEventCustomTemplate: TemplateRef<any>;
+  /**
+   * Output click event emitter
+   */
+  @Output()
+  clickEmitter: BehaviorSubject<NgxTimelineItem> = new BehaviorSubject(null);
+
+  groups: { [key: string]: NgxTimelineEvent[] } = {};
+  periods: NgxTimelineItem[] = [];
+  items: NgxTimelineItem[] = [];
+  ngxTimelineItemPosition = NgxTimelineItemPosition;
+  ngxDateFormat = NgxDateFormat;
+
+  private readonly separator = '/';
+
+  constructor() {}
+
+
+  ngOnInit(): void {
+    this.groupEvents(this.events);
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    this.groupEvents(this.events);
+  }
+
+  getPeriodKeyDateFormat(): string {
+    return periodKeyDateFormat[this.groupEvent];
+  }
+
+  protected clear(): void {
+    this.groups = {};
+    this.periods = [];
+    this.items = [];
+  }
+
+  protected groupEvents(events: NgxTimelineEvent[]): void {
+    if (events) {
+      this.clear();
+      this.sortEvents(events);
+      this.setGroups(events);
+      this.setPeriods();
+      this.setItems();
+    }
+  }
+
+  protected sortEvents(events: NgxTimelineEvent[]): void {
+    events.sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime());
+  }
+
+  protected setGroups(events: NgxTimelineEvent[]): void {
+    events.forEach((event) => {
+      // conversion from string to actual Date
+      event.timestamp = new Date(event.timestamp);
+      const periodKey = this.getPeriodKeyFromEvent(event);
+      if (!this.groups[periodKey]) {
+        this.groups[periodKey] = [];
+      }
+      this.groups[periodKey].push(event);
+    });
+  }
+
+  protected setItems(): void {
+    this.periods.forEach((p) => {
+      // insert first the period
+      this.items.push(p);
+      // in each period putting items on left
+      const onLeft = true;
+      const periodInfo = p.periodInfo;
+      // insert then all the events in this period
+      this.addPeriodEvents(periodInfo, onLeft);
+      // onLeft = this.addEventItemsAndGetIfOnLeft(periodInfo, onLeft);
+    });
+  }
+
+  protected addPeriodEvents(periodInfo: NgxTimelinePeriodInfo, onLeft: boolean): void {
+    this.groups[periodInfo.periodKey].forEach((event, index) => {
+      const prevEvent = this.groups[periodInfo.periodKey][index - 1];
+      if (index > 0 && this.compareEvents(prevEvent, event)) {
+        onLeft = !onLeft;
+      }
+      this.pushEventOnItems(event, onLeft);
+    });
+    // return onLeft;
+  }
+
+  protected pushEventOnItems(event: NgxTimelineEvent, onLeft: boolean): void {
+    this.items.push({
+      eventInfo: { ...event }, position: onLeft ?
+        this.ngxTimelineItemPosition.ON_LEFT : this.ngxTimelineItemPosition.ON_RIGHT
+    });
+  }
+
+  /**
+   * Compare the events inside the same group
+   */
+  protected compareEvents(prevEvent: NgxTimelineEvent, event: NgxTimelineEvent): boolean {
+    return this.changeSideInGroup === NgxTimelineEventChangeSideInGroup.ALL ||
+      this.compareEventsField(prevEvent, event, ...fieldsToCheckEventChangeSideInGroup[this.changeSideInGroup]);
+  }
+
+  protected compareEventsField(prevEvent: NgxTimelineEvent, event: NgxTimelineEvent, ...fields: string[]): boolean {
+    return fields.reduce((res, field) => res = res || prevEvent.timestamp[field]() !== event.timestamp[field](), !!false);
+  }
+
+  protected setPeriods(): void {
+    this.periods = Object.keys(this.groups).map((periodKey) => {
+      const split = periodKey.split(this.separator);
+      return this.getPeriodInfo(split, periodKey);
+    });
+  }
+
+  private getPeriodInfo(split: string[], periodKey: string): { periodInfo: NgxTimelinePeriodInfo } {
+    return {
+      periodInfo: {
+        year: Number(split[0]),
+        month: Number(split[1]),
+        day: Number(split[2]),
+        periodKey,
+        firstDate: this.groups[periodKey][0].timestamp as Date,
+      },
+    };
+  }
+
+  protected getPeriodKeyFromEvent(event: NgxTimelineEvent): string {
+    return fieldsToAddEventGroup[this.groupEvent].map(field => event.timestamp[field]()).join(this.separator);
+  }
+}