Revize bdca9f6d

Re #7458 Dialog for adding of days off initialized

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

@@ +1 @@
+<h1 mat-dialog-title>Dialog</h1>
+
+<div mat-dialog-content>
+  Data: {{data.foo}}
+</div>
+
+<div mat-dialog-actions>
+  <button mat-button (click)="onCloseClick()">Close</button>
+</div>

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 } from '@angular/material';
+
+@Component({
+  selector: 'app-add-days-off-dialog',
+  templateUrl: './add-days-off-dialog.component.html',
+  styleUrls: ['./add-days-off-dialog.component.sass']
+})
+export class AddDaysOffDialogComponent {
+
+  constructor(
+    public dialogRef: MatDialogRef<AddDaysOffDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: AddDaysOffDialogData
+  ) {}
+
+  onCloseClick(): void {
+    this.dialogRef.close();
+  }
+
+}
+
+export interface AddDaysOffDialogData {
+  // TODO
+  foo: 'bar';
+}

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 } from '@angular/material';
+
+@NgModule({
+  declarations: [AddDaysOffDialogComponent],
+  imports: [
+    CommonModule,
+    BrowserAnimationsModule,
+    MatButtonModule,
+    MatDialogModule
+  ],
+  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: {
+        // TODO
+        foo: 'bar'
+      }
+    });
   }
 
   userApproved( user: UserToApprove, approved: boolean ) {

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 { }