Revize 7781f204

Re #7458 Basic features of add days off component implemented

webapp/package.json

@@ -11 +11 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~7.2.0",
+    "@angular/animations": "^7.2.14",
+    "@angular/cdk": "^7.3.7",
     "@angular/common": "~7.2.0",
     "@angular/compiler": "~7.2.0",
     "@angular/core": "~7.2.0",
     "@angular/forms": "~7.2.0",
     "@angular/http": "latest",
+    "@angular/material": "^7.3.7",
     "@angular/platform-browser": "~7.2.0",
     "@angular/platform-browser-dynamic": "~7.2.0",
     "@angular/router": "~7.2.0",

webapp/src/app/add-days-off-dialog/add-days-off-dialog.component.html

@@ +1 @@
+<h1 mat-dialog-title>Výběr volna</h1>
+
+<div mat-dialog-content>
+  <div>
+    <label id="days-off-type-radio-group-label" class="dialog-label">Typ volna</label>
+    <mat-radio-group aria-labelledby="days-off-type-radio-group-label" class="days-off-type-radio-group" [(ngModel)]="selectedDaysOffType">
+      <mat-radio-button class="days-off-type-radio-button" *ngFor="let type of daysOffTypes" [value]="type" >
+        {{type}}
+      </mat-radio-button>
+    </mat-radio-group>
+  </div>
+
+  <div class="datetime-interval">
+    <div class="from-datetime">
+      <label for="from-datetime-input" class="dialog-label">Od:</label>
+      <div class="datetime-picker">
+        <mat-form-field>
+          <input id="from-datetime-input" matInput [matDatepicker]="startDatePicker" [(ngModel)]="data.fromDate">
+          <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
+          <mat-datepicker #startDatePicker></mat-datepicker>
+        </mat-form-field>
+        <ngb-timepicker [(ngModel)]="data.fromTime" [minuteStep]="MINUTE_STEP"></ngb-timepicker>
+      </div>
+    </div>
+
+    <div class="to-datetime">
+      <label for="to-datetime-input" class="dialog-label">Do:</label>
+      <div class="datetime-picker">
+        <mat-form-field>
+          <input id="to-datetime-input" matInput [matDatepicker]="endDatePicker" [(ngModel)]="data.toDate">
+          <mat-datepicker-toggle matSuffix [for]="endDatePicker"></mat-datepicker-toggle>
+          <mat-datepicker #endDatePicker></mat-datepicker>
+        </mat-form-field>
+        <ngb-timepicker [(ngModel)]="data.toTime" [minuteStep]="MINUTE_STEP"></ngb-timepicker>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div mat-dialog-actions align="end">
+  <button mat-raised-button color="primary" (click)="onConfirmClick()">Potvrdit</button>
+  <button mat-raised-button color="basic" (click)="onCloseClick()">Zavřít</button>
+</div>

webapp/src/app/add-days-off-dialog/add-days-off-dialog.component.sass

@@ +1 @@
+.dialog-label
+  display: block
+  font-weight: bold
+
+.datetime-picker > *
+  display: table-cell
+
+.days-off-type-radio-group
+  display: flex
+  flex-direction: column
+  margin: 15px 0

webapp/src/app/add-days-off-dialog/add-days-off-dialog.component.ts

@@ +1 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef, MatSnackBar } from '@angular/material';
+import { FormControl } from '@angular/forms';
+
+@Component({
+  selector: 'app-add-days-off-dialog',
+  templateUrl: './add-days-off-dialog.component.html',
+  styleUrls: ['./add-days-off-dialog.component.sass']
+})
+export class AddDaysOffDialogComponent {
+  MINUTE_STEP = 15;
+
+  selectedDaysOffType: string;
+  daysOffTypes: string[] = ['Sick-days', 'Extra dovolená'];
+
+  constructor(
+    public dialogRef: MatDialogRef<AddDaysOffDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: AddDaysOffDialogData,
+    private snackBar: MatSnackBar
+  ) {
+    if (this.data.toDate == null) {
+      this.data.toDate = this.data.fromDate;
+    }
+    if (this.data.fromTime == null) {
+      this.data.fromTime = {hour: 8, minute: 0};
+    }
+    if (data.toTime == null) {
+      this.data.toTime = {hour: 16, minute: 0};
+    }
+  }
+
+  onConfirmClick(): void {
+    // TODO lokalizace
+
+    if (this.selectedDaysOffType == null) {
+      this.snackBar.open('Nevybrán typ volna', 'Zavřít', { duration: 5000 });
+    } else if (this.data.fromDate > this.data.toDate) {
+      this.snackBar.open('Datum "od" nemůže být větší než "do"', 'Zavřít', { duration: 5000 });
+    } else {
+      // TODO API CALL
+      this.dialogRef.close();
+    }
+  }
+
+  onCloseClick(): void {
+    this.dialogRef.close();
+  }
+
+}
+
+export interface AddDaysOffDialogData {
+  fromDate: FormControl;
+  toDate: FormControl;
+  fromTime: { hour: number, minute: number };
+  toTime: { hour: number, minute: number };
+}

webapp/src/app/add-days-off-dialog/add-days-off-dialog.module.ts

@@ +1 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AddDaysOffDialogComponent } from './add-days-off-dialog.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import {
+  MatButtonModule,
+  MatDialogModule,
+  MatDatepickerModule,
+  MatNativeDateModule,
+  MatInputModule, MatRadioModule, MatSnackBarModule
+} from '@angular/material';
+import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {BrowserModule} from '@angular/platform-browser';
+
+@NgModule({
+  declarations: [AddDaysOffDialogComponent],
+  imports: [
+    CommonModule,
+    BrowserAnimationsModule,
+    MatButtonModule,
+    MatDialogModule,
+    NgbModule,
+    FormsModule,
+    MatDatepickerModule,
+    MatNativeDateModule,
+    ReactiveFormsModule,
+    BrowserModule,
+    MatInputModule,
+    MatRadioModule,
+    MatSnackBarModule
+  ],
+  exports: [
+    AddDaysOffDialogComponent
+  ],
+  entryComponents: [
+    AddDaysOffDialogComponent
+  ]
+})
+export class AddDaysOffDialogModule { }

webapp/src/app/dashboard/employer-dashboard/employer-dashboard.component.ts

@@ -1 +1 @@
 import { Component, OnInit } from '@angular/core';
-import {UserToApprove} from '../../user-approval/user-to-approve.model';
-import {DaysOff} from '../../shared/days-off.model';
-import {OffDayType } from '../../shared/off-day-type';
+import { UserToApprove } from '../../user-approval/user-to-approve.model';
+import { DaysOff } from '../../shared/days-off.model';
+import { OffDayType } from '../../shared/off-day-type';
+import { MatDialog } from '@angular/material';
+import { AddDaysOffDialogComponent } from '../../add-days-off-dialog/add-days-off-dialog.component';
 
 @Component({
   selector: 'app-employer-dashboard',
@@ -43 +45 @@
 
   oncomingDaysOff: DaysOff[] = [];
 
-  constructor() { }
+  constructor(public dialog: MatDialog) { }
 
   ngOnInit() {
     this.oncomingDaysOff = this.calculateComingDaysOff();
   }
 
   onDateSelect( date: Date ) {
-    console.log('Date selected: ' + date.toDateString());
+    this.dialog.open(AddDaysOffDialogComponent, {
+      data: {
+        fromDate: date
+      }
+    });
   }
 
   userApproved( user: UserToApprove, approved: boolean ) {
@@ -60 +66 @@
     );
   }
 
-  daysOffApproved(daysOff: DaysOff, approved: boolean ) {
+  daysOffApproved(daysOff: DaysOff, approved: boolean) {
     console.log(daysOff.username + ', ' + approved);
     this.daysOffToApprove.splice(
       this.daysOffToApprove.indexOf(daysOff), 1

webapp/src/app/dashboard/employer-dashboard/employer-dashboard.module.ts

@@ -6 +6 @@
 import { UserApprovalModule } from '../../user-approval/user-approval.module';
 import { DaysOffApprovalModule } from '../../days-off-approval/days-off-approval.module';
 import { OncomingDaysOffModule } from '../../oncoming-days-off/oncoming-days-off.module';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {AddDaysOffDialogModule} from '../../add-days-off-dialog/add-days-off-dialog.module';
+import {MatDialogModule} from '@angular/material';
 
 @NgModule({
   declarations: [ EmployerDashboardComponent ],
@@ -17 +20 @@
     UserApprovalModule,
     DaysOffApprovalModule,
     DayPickerModule,
-    OncomingDaysOffModule
+    OncomingDaysOffModule,
+    BrowserAnimationsModule,
+    AddDaysOffDialogModule,
+    MatDialogModule
   ]
 })
 export class EmployerDashboardModule { }

webapp/src/styles.sass

@@ +1 @@
+@import '~@angular/material/prebuilt-themes/deeppurple-amber.css'
+
 *
   margin: 0
   padding: 0