Revize 37333849

Re #7457 Basic features of profile settings component implemented

webapp/src/app/app.component.html

@@ -1 +1 @@
 <div class="container-fluid h-100">
-  <div class="row header">
-    <img class="logo" src="../assets/images/logo.png" />
-    <div class="user-info">
-      <img class="user-icon" src="../assets/images/default-user.png"/>
-      <span class="user-name">Václav Jirák</span>
-    </div>
-  </div>
+  <app-header></app-header>
   <div class="row navigation-and-content">
     <div class="col-lg-2 navigation">
       <app-menu></app-menu>

webapp/src/app/app.component.sass

@@ -1 @@
-.header
-  height: 50px
-  background-color: #3F425D
-  padding-left: 10px
-
-.user-info
-  height: 100%
-  margin-left: auto
-  margin-right: 0
-
-.user-icon
-  width: 35px
-  height: 35px
-  border-radius: 20px
-
-.user-name
-  height: 50px
-  line-height: 50px
-  color: white
-  margin-left: 10px
-  margin-right: 10px
-
 .navigation-and-content
   height: calc(100% - 50px)
 

webapp/src/app/app.module.ts

@@ -6 +6 @@
 import { MenuComponent } from './menu/menu.component';
 import { EmployeesListComponent } from './employees-list/employees-list.component';
 import { DashboardModule } from './dashboard/dashboard.module';
+import { HeaderComponent } from './header/header.component';
+import { MatDialogModule } from '@angular/material';
+import {ProfileSettingsModule} from './profile-settings/profile-settings.module';
 
 @NgModule({
   declarations: [
     AppComponent,
     MenuComponent,
-    EmployeesListComponent
+    EmployeesListComponent,
+    HeaderComponent
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
-    DashboardModule
+    DashboardModule,
+    MatDialogModule,
+    ProfileSettingsModule
   ],
   providers: [],
   bootstrap: [AppComponent]

webapp/src/app/header/header.component.html

@@ +1 @@
+<div class="row header">
+  <img class="logo" src="../../assets/images/logo.png" />
+  <button class="user-info" (click)="onProfileClick()">
+    <img class="user-icon" src="../../assets/images/default-user.png"/>
+    <span class="user-name">{{name}}</span>
+  </button>
+</div>

webapp/src/app/header/header.component.sass

@@ +1 @@
+.header
+  height: 50px
+  background-color: #3F425D
+  padding-left: 10px
+
+.user-info
+  height: 100%
+  margin-left: auto
+  margin-right: 0
+  border: 0
+  background-color: transparent
+
+  &:focus
+    outline: none
+
+.user-icon
+  width: 35px
+  height: 35px
+  border-radius: 20px
+
+.user-name
+  height: 50px
+  line-height: 50px
+  color: white
+  margin-left: 10px
+  margin-right: 10px

webapp/src/app/header/header.component.ts

@@ +1 @@
+import { Component, Input } from '@angular/core';
+import { MatDialog } from '@angular/material';
+import { ProfileSettingsComponent } from '../profile-settings/profile-settings.component';
+
+@Component({
+  selector: 'app-header',
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.sass']
+})
+export class HeaderComponent {
+  @Input() name = 'John Doe';
+
+  constructor(private dialog: MatDialog) { }
+
+  onProfileClick(): void {
+    this.dialog.open(ProfileSettingsComponent, {
+      data: {
+      }
+    });
+  }
+}

webapp/src/app/profile-settings/profile-settings.component.html

@@ +1 @@
+<h1 mat-dialog-title>Nastavení</h1>
+
+<div mat-dialog-content>
+  <mat-checkbox [(ngModel)]="data.shouldNotify">Upozorňovat na blížící se vypršění extra dovolené</mat-checkbox>
+  <div class="datetime-picker" *ngIf="data.shouldNotify">
+    <mat-form-field>
+      <input id="from-datetime-input" matInput [matDatepicker]="startDatePicker" [(ngModel)]="data.notifyDate" placeholder="Datum upozornění">
+      <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
+      <mat-datepicker #startDatePicker></mat-datepicker>
+    </mat-form-field>
+    <ngb-timepicker [(ngModel)]="data.notifyTime"></ngb-timepicker>
+  </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/profile-settings/profile-settings.component.sass

@@ +1 @@
+.datetime-picker > *
+  display: table-cell

webapp/src/app/profile-settings/profile-settings.component.ts

@@ +1 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+import { FormControl } from '@angular/forms';
+
+@Component({
+  selector: 'app-profile-settings',
+  templateUrl: './profile-settings.component.html',
+  styleUrls: ['./profile-settings.component.sass']
+})
+export class ProfileSettingsComponent {
+  constructor(
+    public dialogRef: MatDialogRef<ProfileSettingsComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: ProfileSettingsDialogData,
+  ) {
+    if (data.notifyTime == null) {
+      data.notifyTime = { hour: 8, minute: 0 };
+    }
+  }
+
+  onConfirmClick(): void {
+    // TODO API CALL
+    this.dialogRef.close();
+  }
+
+  onCloseClick(): void {
+    this.dialogRef.close();
+  }
+}
+
+export interface ProfileSettingsDialogData {
+  shouldNotify: boolean;
+  notifyDate: FormControl;
+  notifyTime: { hour: number, minute: number };
+}

webapp/src/app/profile-settings/profile-settings.module.ts

@@ +1 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ProfileSettingsComponent } from './profile-settings.component';
+import {
+  MatButtonModule,
+  MatCheckboxModule,
+  MatDialogModule,
+  MatDatepickerModule,
+  MatFormFieldModule, MatInputModule
+} from '@angular/material';
+import {FormsModule} from '@angular/forms';
+import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
+
+
+@NgModule({
+  declarations: [ProfileSettingsComponent],
+  imports: [
+    CommonModule,
+    MatButtonModule,
+    MatDialogModule,
+    MatCheckboxModule,
+    FormsModule,
+    MatDatepickerModule,
+    MatFormFieldModule,
+    MatInputModule,
+    NgbModule
+  ],
+  entryComponents: [
+    ProfileSettingsComponent
+  ],
+  exports: [
+    ProfileSettingsComponent
+  ]
+})
+export class ProfileSettingsModule { }