@colijnit/sharedcomponents 1.0.24 → 1.0.25

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

@@ -0,0 +1,201 @@
+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"
+                         [class.in-month]="date.inMonth" [class.is-selected]="date.selected"
+                         [class.is-today]="date.timestamp === todayDayStamp"></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);
+  }
+}

package/projects/sharedcomponents/src/lib/components/date-planning/component/calendar/style/_layout.scss

@@ -0,0 +1,167 @@
+@import "../../../../../style/mixin";
+
+@include export-module('sc-calendar') {
+  .sc-calendar {
+
+    .calendar-header-row{
+      flex-direction: row;
+      box-sizing: border-box;
+      display: flex;
+      place-content: center space-between;
+      align-items: center;
+    }
+
+    .pointer-hover {
+      cursor: pointer;
+    }
+
+    icon {
+      width: 20px;
+      height: 20px;
+    }
+
+    .month, .year {
+      user-select: none;
+    }
+
+    .month {
+      margin-right: 10px;
+    }
+
+    .select-month-year-window {
+      z-index: 9001;
+      background: white;
+    }
+
+    default-ok-cancel-buttons {
+      align-self: center;
+    }
+
+    .vertical-divider {
+      flex: 0 0;
+      padding: 0;
+      height: 80%;
+      flex-basis: 1px;
+      margin-top: 5px;
+    }
+
+    .selected-month {
+      color: $color-light;
+    }
+
+    .input-date-window {
+      &.expanded {
+        box-shadow: 0 0 5px 0 rgba(72,79,96,0.25);
+        border: 1px solid;
+        border-radius: 5px;
+      }
+      position: relative;
+      z-index: 1000;
+      transform-origin: center;
+      pointer-events: none;
+    }
+
+    .calendar-content {
+      pointer-events: initial;
+      background: $color-light;
+    }
+
+    .month-changer {
+      height: 40px;
+      .month-change {
+        opacity: 0.5;
+        &:hover {
+          opacity: 1;
+        }
+      }
+    }
+
+    .month-year-display {
+      margin-left: 10px;
+    }
+
+    .view-changer icon {
+      width: 20px;
+      height: 20px;
+      [fill] {
+        fill: $color-action;
+      }
+    }
+
+
+    .week-row {
+      flex-direction: row;
+      box-sizing: border-box;
+      display: flex;
+      > div {
+        flex: 1;
+        text-align: center;
+        line-height: 33px;
+      }
+    }
+
+    .week-day-label,
+    .week-acronym,
+    .week-number {
+      background: $color-less-light;
+    }
+
+    .week-day-label,
+    .week-number {
+      font-weight: bold;
+      border: 0 solid $color-light;
+    }
+
+    .week-number {
+      border-top-width: 1px;
+    }
+
+    .week-day-label {
+      border-left-width: 1px;
+    }
+
+    .week-acronym {
+      color: $color-grey;
+    }
+
+    .calendar-view,
+    .week-day {
+      cursor: pointer;
+      border: 1px solid transparent;
+      &.in-month {
+        color: $color-dark;
+      }
+      &.is-selected,
+      &:hover {
+        color: $color-light;
+        font-weight: normal;
+      }
+      &.is-today {
+        color: $color-action;
+        font-weight: bold;
+      }
+      &.is-selected {
+        color: $color-light;
+        background: $color-active !important;
+        border-color: $color-active !important;
+        border-radius: 0;
+      }
+      &:hover {
+        background: $color-active-accent;
+        border-color: $color-active-accent;
+      }
+    }
+
+    .week-day {
+      color: $color-grey;
+      //border-radius: 50%;
+    }
+
+    .calendar-view {
+      line-height: 45px;
+      text-align: center;
+      border-radius: 10px;
+      width: 69px;
+    }
+  }
+}

package/projects/sharedcomponents/src/lib/components/date-planning/component/calendar/style/_material-definition.scss

@@ -0,0 +1,7 @@
+$color-grey: #DAD9D9;
+$color-active-accent: #8faba6;
+$color-active: #429777;
+$color-light: #FFFFFF;
+$color-dark: #171721;
+$color-less-light: #F7FAFA;
+$color-action: #4682b4;

package/projects/sharedcomponents/src/lib/components/date-planning/component/calendar/style/_theme.scss

@@ -0,0 +1,7 @@
+@import "../../../../../style/mixin";
+
+@include export-module('sc-calendar-theme') {
+  .sc-calendar {
+
+  }
+}

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

@@ -0,0 +1,133 @@
+import {
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  Output,
+  Renderer2,
+  ViewChild,
+  ViewEncapsulation
+} from "@angular/core";
+import {animate, state, style, transition, trigger} from "@angular/animations";
+import {CalendarView} from "@syncfusion/ej2-angular-calendars";
+
+@Component({
+  selector: "sc-date-planning",
+  template: `
+    <div class="sc-agenda">
+      <div class="content-wrapper">
+        <calendar *ngIf="calendarNavigation"
+                  [view]="view"
+                  [(days)]="days"
+                  [selectedDate]="selectedDate" (selectedDateChange)="doChangeSelectedDate($event)"></calendar>
+        <div class="agenda-content-wrapper mini-scrollbar">
+          <div class="agenda-content">
+            <agenda-header [view]="view" (viewChange)="doChangeView($event)"
+                           [firstAvailableDate]="firstAvailableDate"
+                           [eventsPerDay]="eventsPerDay"
+                           [selectedDate]="selectedDate"
+                           (selectedDateChange)="doChangeSelectedDate($event)"
+                           (rangeChange)="doChangeSelectedDate($event, true)"></agenda-header>
+            <agenda-view [view]="view"
+                         [selectedDate]="selectedDate"
+                         [eventsPerDay]="eventsPerDay"
+                         (eventChecked)="eventChecked.emit($event)"></agenda-view>
+          </div>
+        </div>
+      </div>
+    </div>
+    <button-colijn *ngIf="showButton && eventsPerDay.length > 0" class="text-only select-agenda-button"
+                   [label]="buttonLabel"
+                   (click)="buttonClick.emit($event)">
+    </button-colijn>
+    `,
+  animations: [
+    trigger("showHideWindow", [
+      state("void", style({transform: "scaleY(0)"})),
+      state("*", style({transform: "scaleY(1)"})),
+      transition(":enter, :leave", [
+        animate("200ms ease-in-out")
+      ])
+    ])
+  ],
+  encapsulation: ViewEncapsulation.None
+})
+
+export class DatePlanningComponent {
+
+  @Input()
+  public calendarNavigation: boolean = false;
+
+  @Input()
+  public showButton: boolean = false;
+
+  @Input()
+  public selectedDate: Date;
+
+  @Input()
+  public firstAvailableDate: Date;
+
+  @Input()
+  public buttonLabel: string = "";
+
+  @Input()
+  public eventsPerDay: any = [];
+
+  @Input()
+  public view: CalendarView;
+
+  @Output()
+  public readonly eventChecked: EventEmitter<any> = new EventEmitter<any>();
+
+  @Output()
+  public readonly selectedDateChange: EventEmitter<Date> = new EventEmitter<Date>();
+
+  @Output()
+  public readonly rangeChange: EventEmitter<Date> = new EventEmitter<Date>();
+
+  @Output()
+  public readonly viewChange: EventEmitter<CalendarView> = new EventEmitter<CalendarView>();
+
+  @Output()
+  public readonly buttonClick: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
+
+  @ViewChild("dayStart", { static: true })
+  public dayStart: ElementRef;
+
+  public days: Date[] = [];
+  private _selectedDate: Date = new Date();
+
+  constructor(
+    private _changeDetector: ChangeDetectorRef,
+    private renderer: Renderer2
+  ) {
+  }
+
+  public doChangeSelectedDate(date: Date, rangeChanged: boolean = false): void {
+    this.selectedDate = new Date(date);
+    if (rangeChanged) {
+      this.rangeChange.next(this.selectedDate);
+    } else {
+      this.selectedDateChange.next(this.selectedDate);
+    }
+    this._changeDetector.detectChanges();
+  }
+
+  public doChangeView(view: CalendarView): void {
+    this.view = view;
+    this.viewChange.next(this.view);
+  }
+
+  public scrollToDayStart(): void {
+    if (this.dayStart !== undefined) {
+      const dayStart: any = this.renderer.selectRootElement("#dayStart");
+      if (dayStart) {
+        setTimeout(() => {
+          dayStart.scrollIntoView({behavior: "instant", block: "center"});
+        });
+      }
+    }
+  }
+
+}

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

@@ -0,0 +1,56 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import {DatePlanningComponent} from "./date-planning.component";
+import {IconModule, InputDatePickerModule} from "@colijnit/corecomponents_v12";
+import {CalendarAllYearsComponent} from "./component/calendar/calendar-all-years.component";
+import {CalendarAllMonthsComponent} from "./component/calendar/calendar-all-months.component";
+import {CalendarHeaderComponent} from "./component/calendar/calendar-header.component";
+import {CalendarComponent} from "./component/calendar/calendar.component";
+import {CalendarViewComponent} from "./component/calendar/calendar-view.component";
+import {AgendaHeaderComponent} from "./component/agenda/agenda-header.component";
+import {AgendaViewComponent} from "./component/agenda/agenda-view.component";
+import {AgendaMonthViewComponent} from "./component/agenda/agenda-month-view.component";
+import {AgendaDayViewComponent} from "./component/agenda/agenda-day-view.component";
+import {AgendaWeekViewComponent} from "./component/agenda/agenda-week-view.component";
+import {AgendaWeekSelectViewComponent} from "./component/agenda/agenda-week-select-view.component";
+import {AgendaHourViewComponent} from "./component/agenda/agenda-hour-view.component";
+import {AgendaHourCellComponent} from "./component/agenda/agenda-hour-cell.component";
+import {AgendaHourViewLabelsComponent} from "./component/agenda/agenda-hour-view-labels.component";
+import {AgendaHalfHourCellComponent} from "./component/agenda/agenda-half-hour-cell.component";
+import {AgendaEventsComponent} from "./component/agenda/agenda-events.component";
+import {AgendaEventComponent} from "./component/agenda/agenda-event.component";
+import {MASTER_PIPES} from "../../pipe/master-pipes";
+
+@NgModule({
+  imports: [
+    CommonModule,
+    InputDatePickerModule,
+    IconModule,
+  ],
+  declarations: [
+    DatePlanningComponent,
+    CalendarAllYearsComponent,
+    CalendarAllMonthsComponent,
+    CalendarHeaderComponent,
+    CalendarComponent,
+    CalendarViewComponent,
+    AgendaHeaderComponent,
+    AgendaViewComponent,
+    AgendaMonthViewComponent,
+    AgendaDayViewComponent,
+    AgendaWeekViewComponent,
+    AgendaWeekSelectViewComponent,
+    AgendaHourViewComponent,
+    AgendaHourCellComponent,
+    AgendaHourViewLabelsComponent,
+    AgendaHalfHourCellComponent,
+    AgendaEventsComponent,
+    AgendaEventComponent,
+    MASTER_PIPES
+  ],
+  exports: [
+    DatePlanningComponent
+  ]
+})
+export class DatePlanningModule {
+}

package/projects/sharedcomponents/src/lib/components/date-planning/style/_layout.scss

@@ -0,0 +1,47 @@
+@import "../../../style/mixin";
+
+@include export-module('sc-date-planning-layout') {
+  .sc-date-planning {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    min-height: 0;
+
+    .content-wrapper {
+      display: flex;
+      width: 100%;
+      flex-wrap: wrap;
+      height: 100%;
+    }
+
+    .agenda-wrapper {
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      height: 100%;
+      overflow: hidden;
+    }
+
+    .agenda-content-wrapper {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      overflow: auto;
+      min-width: 400px;
+      flex-basis: 66%;
+      flex-grow: 1;
+      max-height: 100%;
+    }
+
+    .agenda-content {
+      width: 100%;
+      height: 100%;
+      flex-direction: column;
+    }
+
+    calendar {
+      flex-basis: 33%;
+      flex-grow: 1;
+    }
+  }
+}

package/projects/sharedcomponents/src/lib/components/date-planning/style/_theme.scss

@@ -0,0 +1,7 @@
+@import "../../../style/mixin";
+
+@include export-module('sc-date-planning-theme') {
+  .sc-date-planning {
+
+  }
+}

package/projects/sharedcomponents/src/lib/components/date-planning/style/material.scss

@@ -0,0 +1,5 @@
+@import "./material-definition";
+@import "./layout";
+@import "./theme";
+
+