Revize eeebda1e

Re #7458 Basic features of add days off component implemented

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

@@ -1 @@
-<h1 mat-dialog-title>Dialog</h1>
+<h1 mat-dialog-title>Výběr volna</h1>
 
 <div mat-dialog-content>
-  Data: {{data.foo}}
+  <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>
-  <button mat-button (click)="onCloseClick()">Close</button>
+<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 +1 @@
 import { Component, Inject } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+import { MAT_DIALOG_DATA, MatDialogRef, MatSnackBar } from '@angular/material';
+import { FormControl } from '@angular/forms';
 
 @Component({
   selector: 'app-add-days-off-dialog',
@@ -7 +8 @@
   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
-  ) {}
+    @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();
@@ -20 +49 @@
 }
 
 export interface AddDaysOffDialogData {
-  // TODO
-  foo: 'bar';
+  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

@@ -2 +2 @@
 import { CommonModule } from '@angular/common';
 import { AddDaysOffDialogComponent } from './add-days-off-dialog.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { MatButtonModule, MatDialogModule } from '@angular/material';
+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],
@@ -10 +19 @@
     CommonModule,
     BrowserAnimationsModule,
     MatButtonModule,
-    MatDialogModule
+    MatDialogModule,
+    NgbModule,
+    FormsModule,
+    MatDatepickerModule,
+    MatNativeDateModule,
+    ReactiveFormsModule,
+    BrowserModule,
+    MatInputModule,
+    MatRadioModule,
+    MatSnackBarModule
   ],
   exports: [
     AddDaysOffDialogComponent

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

@@ -54 +54 @@
   onDateSelect( date: Date ) {
     this.dialog.open(AddDaysOffDialogComponent, {
       data: {
-        // TODO
-        foo: 'bar'
+        fromDate: date
       }
     });
   }
@@ -67 +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/styles.sass

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