Revize 41ab77d7

Re #7263 Day picker component implemented

frontend/src/app/day-picker/day-picker.component.html

@@ +1 @@
+<div class="day-picker-container">
+  <div class="row text-center day-picker-month-selection">
+    <div class="col-4"></div>
+    <div class="col-1">
+      <div class="btn btn-primary"
+           mwlCalendarPreviousView
+           [view]="view"
+           [(viewDate)]="viewDate"
+      >
+        <
+      </div>
+    </div>
+    <div class="col-2">
+      <span id="day-picker-date">{{ viewDate | calendarDate:(view + 'ViewTitle'):locale }}</span>
+    </div>
+    <div class="col-1">
+      <div class="btn btn-primary"
+           mwlCalendarNextView
+           [view]="view"
+           [(viewDate)]="viewDate"
+      >
+        >
+      </div>
+      <div class="col-4"></div>
+    </div>
+  </div>
+
+  <mwl-calendar-month-view
+    [viewDate]="viewDate"
+    (dayClicked)="dayClicked($event.day)"
+    weekStartsOn="1"
+    [locale]="locale"
+  >
+  </mwl-calendar-month-view>
+</div>

frontend/src/app/day-picker/day-picker.component.sass

@@ +1 @@
+.day-picker-container
+  background-color: white
+  padding: 10px
+  border: 1px solid gainsboro
+
+#day-picker-date
+  font-weight: bold
+  text-transform: uppercase
+
+.day-picker-month-selection
+  margin-bottom: 10px

frontend/src/app/day-picker/day-picker.component.ts

@@ +1 @@
+import { Component, ChangeDetectionStrategy, Output, EventEmitter } from '@angular/core';
+import { CalendarView } from 'angular-calendar';
+
+@Component({
+  selector: 'app-day-picker',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  styleUrls: ['day-picker.component.sass'],
+  templateUrl: 'day-picker.component.html'
+})
+export class DayPickerComponent {
+
+  // TODO Move to language service
+  locale = 'cs';
+
+  // Type of calendar (constant)
+  view: CalendarView = CalendarView.Month;
+
+  // Selected date for this component's purpose
+  private viewDate: Date = new Date();
+
+  // EventEmitter informing about changes of selected date
+  @Output() selectedDate = new EventEmitter<Date>();
+
+  /**
+   * Method that is invoked when user clicks on a day.
+   * Sets selected date and emits event informing about new selected date.
+   *
+   * @param date Selected date
+   */
+  private dayClicked({ date }: { date: Date }): void {
+    this.viewDate = date;
+    this.selectedDate.emit(date);
+  }
+}

frontend/src/app/day-picker/day-picker.module.ts

@@ +1 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { FlatpickrModule } from 'angularx-flatpickr';
+import { CalendarModule, DateAdapter } from 'angular-calendar';
+import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
+import { NgbModalModule } from '@ng-bootstrap/ng-bootstrap';
+import { DayPickerComponent } from './day-picker.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    NgbModalModule,
+    FlatpickrModule.forRoot(),
+    CalendarModule.forRoot({
+      provide: DateAdapter,
+      useFactory: adapterFactory
+    }),
+    BrowserAnimationsModule
+  ],
+  declarations: [DayPickerComponent],
+  exports: [DayPickerComponent]
+})
+export class DayPickerModule {}