@frxjs/ngx-timeline 1.0.12 → 1.1.0

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

@@ -1,66 +0,0 @@
-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

@@ -1,98 +0,0 @@
-<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

@@ -1,160 +0,0 @@
-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

@@ -1,187 +0,0 @@
-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);
-  }
-}