@colijnit/sharedcomponents 1.0.54 → 1.0.56

package/{lib → projects/sharedcomponents/src/lib}/components/date-planning/component/agenda/style/_layout.scss

@@ -37,13 +37,15 @@
       display: flex;
       flex-basis: $agenda-hour-view-labels-width;
       flex-shrink: 0;
-      border: 1px solid $color_border;
+      border: 1px solid $color-border;
       align-items: center;
       justify-content: center;
     }
 
     .week-day-label {
-      background: #f1f1f1;
+      margin: 0.25em;
+      padding: 0.25em;
+      background: white;
       pointer-events: none;
       position: relative;
       flex-basis: 100%;
@@ -51,19 +53,17 @@
       flex-direction: column;
       align-items: center;
       justify-content: center;
-      border: 1px solid $color_border;
+      border: 1px solid $color-border;
+
+      .weekday-description, .weekday-value, .day-description {
+        color: $color-dark;
+      }
 
       &.selectable {
         pointer-events: all;
       }
 
-      &.selected {
-        background: white;
 
-        .weekday-description, .weekday-value {
-          color: $color-active-light;
-        }
-      }
 
       &.selectable:not(.selected) {
         cursor: pointer;
@@ -83,7 +83,7 @@
       }
 
       &:hover {
-        background: $color_border;
+        background: $color-border;
       }
     }
 
@@ -97,7 +97,7 @@
     .weekday-value {
       color: $color-inactive-day;
       font-size: $agenda-week-label-value-font-size;
-      font-weight: bold;
+
     }
 
     .sub-unit-icon {
@@ -279,7 +279,7 @@
                     }
 
                     &:hover .week-select-item {
-                      background: $color_border;
+                      background: $color-border;
                     }
 
                     .week-select-item {

package/{lib → projects/sharedcomponents/src/lib}/components/date-planning/component/agenda/style/_material-definition.scss

@@ -3,8 +3,9 @@ $agenda-hour-view-labels-width: 80px;
 $color-active-light: #74B77F;
 $color-label: #5B6875;
 $color-dark: #171721;
+$color-border: rgba(grey, 0.4);
 $color-inactive-day: rgba($color-dark, 0.2);
-$agenda-week-label-value-font-size: 2vw;
+$agenda-week-label-value-font-size: 22px;
 $xs-width: 600px;
 $sm-width: 960px;
 $md-width: 1280px;

package/projects/sharedcomponents/src/lib/components/date-planning/component/agenda/view-select.component.ts

@@ -0,0 +1,43 @@
+import {Component, EventEmitter, Input, Output, ViewEncapsulation} from "@angular/core";
+import {CalendarView} from "../../../../enum/calendar-view.enum";
+import {ThumbThreeWayState} from "../../../../enum/thumb-three-way-state";
+import {MapUtils} from "../../../../utils/map-utils";
+
+@Component({
+    selector: "view-select",
+    template: `
+        <div class="select-wrapper">
+            <div [textContent]="'DAY'" class="label"></div>
+            <div [textContent]="'MONTH'" class="label"></div>
+        </div>
+    `,
+    encapsulation: ViewEncapsulation.None
+})
+export class ViewSelectComponent {
+
+    private readonly _viewsToThumb: Map<CalendarView, ThumbThreeWayState> = new Map<CalendarView, ThumbThreeWayState>([
+        [CalendarView.DayView, ThumbThreeWayState.Left],
+        [CalendarView.WeekView, ThumbThreeWayState.Middle],
+        [CalendarView.MonthView, ThumbThreeWayState.Right]
+    ]);
+
+    @Input()
+    public selectedView: CalendarView = CalendarView.WeekView;
+
+    @Output()
+    public selectedViewChange: EventEmitter<CalendarView> = new EventEmitter<CalendarView>();
+
+    public get modelAsThumbState(): ThumbThreeWayState {
+        return this._viewsToThumb.get(this.selectedView);
+    }
+
+    constructor() {
+    }
+
+    public onThumbStateChange(thumbState: ThumbThreeWayState): void {
+        this.selectedView = MapUtils.FindKeyByValue<CalendarView, ThumbThreeWayState>(this._viewsToThumb, (value: ThumbThreeWayState) => {
+            return (value === thumbState);
+        });
+        this.selectedViewChange.emit(this.selectedView);
+    }
+}

package/projects/sharedcomponents/src/lib/components/date-planning/component/calendar/calendar-all-months.component.ts

@@ -0,0 +1,37 @@
+import {Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation} from "@angular/core";
+import {ALL_MONTHS} from "../../../../model/constant/all-months";
+
+@Component({
+  selector: "calendar-all-months",
+  template: `
+        <div *ngFor="let currentMonth of months; let index = index"
+             [class.selected-month]="month === index"
+             [textContent]="currentMonth"
+             class="pointer-hover"
+             (click)="month = index; monthChange.emit(month)"
+        ></div>
+    `,
+  encapsulation: ViewEncapsulation.None
+})
+
+export class CalendarAllMonthsComponent implements OnInit {
+
+  @Input()
+  public month: number;
+
+  @Input()
+  public shortDescriptions: boolean = false;
+
+  @Output()
+  public monthChange: EventEmitter<number> = new EventEmitter<number>();
+
+  public months: string[] = [];
+
+  constructor() {
+  }
+
+  ngOnInit(): void {
+    this.months.length = 0;
+    this.months = ALL_MONTHS;
+  }
+}

package/projects/sharedcomponents/src/lib/components/date-planning/component/calendar/calendar-all-years.component.ts

@@ -0,0 +1,52 @@
+import {Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation} from "@angular/core";
+
+@Component({
+  selector: "calendar-all-years",
+  template: `
+        <div *ngFor="let currentYear of years"
+             [textContent]="currentYear"
+             [class.selected-year]="currentYear === year"
+             class="pointer-hover"
+             (click)="year = currentYear; yearChange.emit(year)"
+        ></div>
+    `,
+  encapsulation: ViewEncapsulation.None
+})
+
+export class CalendarAllYearsComponent implements OnInit {
+
+  @Input()
+  public year: number;
+
+  @Output()
+  public readonly yearChange: EventEmitter<number> = new EventEmitter<number>();
+
+  public years: number[] = [];
+
+  constructor() {
+  }
+
+  ngOnInit(): void {
+    this.years.length = 0;
+    let start: number = this._determineStart();
+    const end: number = start + 11;
+    while (start < end) {
+      this.years.push(start);
+      start++;
+    }
+  }
+
+  private _determineStart(): number {
+    if (this.year > 0) {
+      let thisYear: number = this.year;
+      let thisYearLastDigit: number = parseInt(thisYear.toString().split("").pop());
+      while (thisYearLastDigit > 0) {
+        thisYear--;
+        thisYearLastDigit = parseInt(thisYear.toString().split("").pop());
+      }
+      return thisYear;
+    }
+    return 0;
+  }
+
+}

package/projects/sharedcomponents/src/lib/components/date-planning/component/calendar/calendar-header.component.ts

@@ -0,0 +1,123 @@
+import {Component, DoCheck, EventEmitter, Input, Output, ViewEncapsulation} from "@angular/core";
+import {animate, state, style, transition, trigger} from "@angular/animations";
+import {ALL_MONTHS} from "../../../../model/constant/all-months";
+import {Icon} from "../../../../enum/icon.enum";
+import {IconCacheService} from "../../../../service/icon-cache.service";
+
+@Component({
+  selector: "calendar-header",
+  template: `
+        <div #monthYearSelect class="calendar-header-row">
+            <co-icon class="pointer-hover" [iconData]="iconCacheService.getIcon(icons.ArrowPointLeft)" (click)="subMonth()"></co-icon>
+            <div (click)="showMonthYearSelect = true">
+                <div class="month" [textContent]="currentMonth"></div>
+                <div class="year" [textContent]="currentYear"></div>
+            </div>
+            <co-icon class="pointer-hover" [iconData]="iconCacheService.getIcon(icons.ArrowPointRight)" (click)="addMonth()"></co-icon>
+        </div>
+        <ng-template #template>
+            <div *ngIf="showMonthYearSelect"
+                 (clickOutside)="hideMonthYearSelection()"
+                 class="select-month-year-window" [class.expanded]="expanded" @showMonthYearSelect
+            >
+                <div>
+                    <calendar-all-months [month]="currentMonth" (monthChange)="setNewMonth($event)" shortDescriptions></calendar-all-months>
+                    <div class="vertical-divider"></div>
+                    <calendar-all-years [year]="currentYear" (yearChange)="setNewYear($event)"></calendar-all-years>
+                </div>
+<!--                <default-ok-cancel-buttons-->
+<!--                        (okClick)="changeMonthYear()"-->
+<!--                        (cancelClick)="showMonthYearSelect = false"-->
+<!--                >-->
+<!--                </default-ok-cancel-buttons>-->
+            </div>
+        </ng-template>
+    `,
+  encapsulation: ViewEncapsulation.None,
+  animations: [
+    trigger("showMonthYearSelect", [
+      state("void", style({
+        "transform-origin": "top center",
+        transform: "scaleY(0)"
+      })),
+      state("*", style({
+        "transform-origin": "top center",
+        transform: "scaleY(1)"
+      })),
+      transition(":enter, :leave", [
+        animate("200ms ease-in-out")
+      ])
+    ])
+  ]
+})
+
+export class CalendarHeaderComponent implements DoCheck {
+
+  @Input()
+  public selectedDate: Date = new Date();
+
+  @Output()
+  public readonly selectedDateChange: EventEmitter<Date> = new EventEmitter<Date>();
+
+  public readonly icons: typeof Icon = Icon;
+
+  public showMonthYearSelect: boolean = false;
+
+  public expanded: boolean = false;
+
+  public currentMonth: string;
+
+  public currentYear: number;
+
+  public selectedMonth: number;
+
+  public selectedYear: number;
+
+  constructor(
+    public iconCacheService: IconCacheService
+  ) {
+  }
+
+  ngDoCheck(): void {
+    if (this.selectedDate) {
+      this.currentMonth = ALL_MONTHS[this.selectedDate.getMonth()];
+      this.currentYear = this.selectedDate.getFullYear();
+    }
+  }
+
+  public subMonth(): void {
+    const newDate: Date = new Date(this.selectedDate);
+    newDate.setMonth(newDate.getMonth() - 1);
+    this.selectedDate = newDate;
+    this.selectedDateChange.emit(this.selectedDate);
+  }
+
+  public addMonth(): void {
+    const newDate: Date = new Date(this.selectedDate);
+    newDate.setMonth(newDate.getMonth() + 1);
+    this.selectedDate = newDate;
+    this.selectedDateChange.emit(this.selectedDate);
+  }
+
+  public hideMonthYearSelection(): void {
+    this.expanded = false;
+    this.showMonthYearSelect = false;
+  }
+
+  public setNewMonth(month: number): void {
+    this.selectedMonth = month;
+  }
+
+  public setNewYear(year: number): void {
+    this.selectedYear = year;
+  }
+
+  public changeMonthYear(): void {
+    this.hideMonthYearSelection();
+    const newDate: Date = new Date(this.selectedDate);
+    newDate.setMonth(this.selectedMonth);
+    newDate.setFullYear(this.selectedYear);
+    this.selectedDate = newDate;
+    this.selectedDateChange.emit(this.selectedDate);
+  }
+}

package/projects/sharedcomponents/src/lib/components/date-planning/component/calendar/calendar-view.component.ts

@@ -0,0 +1,200 @@
+import {Component, EventEmitter, Inject, Input, LOCALE_ID, Output, ViewEncapsulation} from "@angular/core";
+import {ArrayNumberPipe} from "../../../../pipe/array-number.pipe";
+import {DatePipe} from "@angular/common";
+import {DateUtils} from "../../../../utils/date-utils";
+import {CalendarView} from "../../../../enum/calendar-view.enum";
+import {LanguageCode} from "../../../../enum/language-code.enum";
+
+type DateStamp = { day: number, inMonth: boolean, timestamp: number, week: number, selected: boolean };
+
+@Component({
+  selector: "calendar-view",
+  template: `
+        <div class="calendar-content">
+            <div>
+                <div class="week-day-header week-row">
+                    <div class="week-acronym"></div>
+                    <div *ngFor="let weekDay of weekDayLabel" [textContent]="weekDay | ucfirst"
+                         class="week-day-label"></div>
+                </div>
+                <div class="week-row" *ngFor="let week of weeks;trackBy:trackByWeek">
+                    <div [textContent]="week[0].week" class="week-number"></div>
+                    <div *ngFor="let date of week;trackBy:trackByStamp" class="week-day"
+                         (click)="onDateClick(date)" [textContent]="date.day">
+                    </div>
+                </div>
+            </div>
+        </div>
+    `,
+  encapsulation: ViewEncapsulation.None
+})
+//fixme we don't have a todayDayStamp field but our template references it
+export class CalendarViewComponent {
+
+  @Input()
+  public set view(value: CalendarView) {
+    this._view = value;
+    this._selectDays();
+  }
+
+  public get view(): CalendarView {
+    return this._view;
+  }
+
+  @Input()
+  public set selectedDate(value: Date) {
+    this._selectedDate = value;
+    this._selectedDate.setHours(0, 0, 0, 0);
+    this._prepareWeeks();
+  }
+
+  public get selectedDate(): Date {
+    return this._selectedDate;
+  }
+
+  @Output()
+  public selectedDateChange: EventEmitter<Date> = new EventEmitter<Date>();
+
+  public trackByStamp: Function = (index: number, stamp: DateStamp): number => {
+    return stamp && stamp.timestamp || index;
+  }
+
+  public trackByWeek: Function = (index: number, week: DateStamp[]): number => {
+    return week && week[0].week || index;
+  }
+
+  public weekDayLabel: string[] = [];
+
+  public weeks: DateStamp[][] = [];
+
+  private _selectedDate: Date = new Date();
+
+  private _view: CalendarView = CalendarView.WeekView;
+
+  constructor(
+    @Inject(LOCALE_ID) private readonly _locale: LanguageCode,
+  ) {
+    this.selectedDate.setHours(0, 0, 0, 0);
+    this._setLabels();
+  }
+
+  public onDateClick(date: DateStamp): void {
+    this.selectedDate = new Date(date.timestamp);
+    this.selectedDateChange.emit(this.selectedDate);
+    this._selectDays();
+  }
+
+  private _setLabels(): void {
+    const datePipe: DatePipe = new DatePipe(this._locale);
+
+    const currentDay: number = this.selectedDate.getDay();
+    const startWeekDate: Date = new Date(this.selectedDate.getTime());
+    startWeekDate.setDate(startWeekDate.getDate() - currentDay - 1);
+
+    this.weekDayLabel = new ArrayNumberPipe().transform(7).map(() => {
+      startWeekDate.setDate(startWeekDate.getDate() + 1);
+      return datePipe.transform(startWeekDate, "E");
+    });
+    this.weekDayLabel.push(this.weekDayLabel.shift());
+  }
+
+  private _prepareWeeks(): void {
+    this.weeks.length = 0;
+
+    const date: Date = new Date(this.selectedDate.getTime());
+    date.setHours(0, 0, 0, 0);
+
+    // go to last day of month
+    date.setMonth(date.getMonth() + 1);
+    date.setDate(0);
+    const monthEndDay: number = date.getDay();
+    const monthEndDate: number = date.getDate();
+
+    // days after end of month
+    const daysAfter: number = !monthEndDay ? 0 : 7 - monthEndDay;
+
+    // go to first day of month
+    date.setDate(1);
+    const monthBeginDay: number = date.getDay();
+
+    // days before start of month
+    const daysBefore: number = !monthBeginDay ? 6 : monthBeginDay - 1;
+
+    // go to start of calendar view
+    date.setDate(-daysBefore + 1);
+
+    // amount of weeks to display
+    const weekCount: number = Math.ceil((daysBefore + daysAfter + monthEndDate) / 7);
+    const weekStart: number = DateUtils.GetWeekNumber(date);
+    const weekEnd: number = weekStart + weekCount - 1;
+
+    // iterate over week count
+    for (let i: number = weekStart; i <= weekEnd; i++) {
+      let week: number = i;
+
+      // only recalculate week when it's necessary
+      if (weekStart > 50) {
+        week = DateUtils.GetWeekNumber(date);
+      }
+      const days: DateStamp[] = [];
+
+      // iterate over 7 days
+      for (let ii: number = 1; ii <= 7; ii++) {
+        // check if we are in the current month
+        let inMonth: boolean = true;
+        if (i === weekStart) {
+          inMonth = ii > daysBefore;
+        } else if (i === weekEnd) {
+          inMonth = ii <= 7 - daysAfter;
+        }
+
+        const timestamp: number = date.getTime();
+        // add dateStamp to date array
+        days.push({
+          week: week,
+          inMonth: inMonth,
+          day: date.getDate(),
+          timestamp: timestamp,
+          selected: this.selectedDate.getTime() === timestamp
+        });
+        // go one day further
+        date.setDate(date.getDate() + 1);
+      }
+      this.weeks.push(days);
+    }
+    this._selectDays();
+  }
+
+  private _selectDays(): void {
+    this._resetSelection();
+    if (!this.selectedDate) {
+      return;
+    }
+    const weekNumber: number = DateUtils.GetWeekNumber(this.selectedDate);
+    const len: number = this.weeks.length;
+    for (let i: number = 0; i < len; i++) {
+      const leni: number = this.weeks[i].length;
+      for (let ii: number = 0; ii < leni; ii++) {
+        if (this.weeks[i][ii].inMonth && this.view === CalendarView.MonthView) {
+          this.weeks[i][ii].selected = true;
+        } else if (this.weeks[i][ii].week === weekNumber && this.view === CalendarView.WeekView) {
+          this.weeks[i][ii].selected = true;
+        } else if (this.weeks[i][ii].timestamp === this.selectedDate.getTime() && this.view === CalendarView.WeekSelectView) {
+          this.weeks[i][ii].selected = true;
+        } else if (this.weeks[i][ii].timestamp === this.selectedDate.getTime() && this.view === CalendarView.DayView) {
+          this.weeks[i][ii].selected = true;
+        }
+      }
+    }
+  }
+
+  private _resetSelection(): void {
+    const len: number = this.weeks.length;
+    for (let i: number = 0; i < len; i++) {
+      const leni: number = this.weeks[i].length;
+      for (let ii: number = 0; ii < leni; ii++) {
+        this.weeks[i][ii].selected = false;
+      }
+    }
+  }
+}

package/projects/sharedcomponents/src/lib/components/date-planning/component/calendar/calendar.component.ts

@@ -0,0 +1,35 @@
+import {Component, EventEmitter, Input, Output, ViewEncapsulation} from "@angular/core";
+import {CalendarView} from "../../../../enum/calendar-view.enum";
+
+@Component({
+  selector: "calendar",
+  template: `
+        <div class="sc-calendar">
+          <calendar-header [selectedDate]="selectedDate" (selectedDateChange)="changeSelectedDate($event)"></calendar-header>
+          <calendar-view [view]="view" [selectedDate]="selectedDate" (selectedDateChange)="changeSelectedDate($event)"></calendar-view>
+        </div>
+    `,
+  encapsulation: ViewEncapsulation.None
+})
+export class CalendarComponent {
+
+  @Input()
+  public view: CalendarView = CalendarView.WeekView;
+
+  @Input()
+  public selectedDate: Date = new Date();
+
+  @Input()
+  public days: Date[] = [];
+
+  @Output()
+  public selectedDateChange: EventEmitter<Date> = new EventEmitter<Date>();
+
+  constructor() {
+  }
+
+  public changeSelectedDate(date: Date): void {
+    this.selectedDate = date;
+    this.selectedDateChange.emit(this.selectedDate);
+  }
+}