Revize ebf7c703

Re #7263 Off days approval component modified

frontend/src/app/days-off-approval/days-off-approval.component.html

@@ +1 @@
+<div class="days-off-approval-container">
+
+  <div class="component-header">
+    Schvalování volna
+  </div>
+
+  <div class="days-off-approval-list">
+    <div class="row days-off-approval-header">
+      <div class="col-md-3"> Jméno </div>
+      <div class="col-md-3"> Typ volna </div>
+      <div class="col-md-2"> Od </div>
+      <div class="col-md-2"> Do </div>
+      <div class="col-md-2"></div>
+    </div>
+
+    <div class="row days-off-approval" *ngFor="let daysOff of daysOffToApprove">
+      <div class="col-md-3">
+        {{daysOff.username}}
+      </div>
+
+      <div class="col-md-3">
+        {{daysOffTypeToString(daysOff.type)}}
+      </div>
+
+      <div class="col-md-2">
+        {{daysOff.dateFrom | date:'yyyy/MM/dd'}}
+      </div>
+      <div class="col-md-2">
+        {{daysOff.dateTo | date:'yyyy/MM/dd'}}
+      </div>
+      <div class="col-md-2">
+        <div class="btn btn-success approve-btn" (click)="daysOffApprovalCompleted(daysOff, true)">✓</div>
+        <div class="btn btn-danger reject-btn"   (click)="daysOffApprovalCompleted(daysOff, false)">X</div>
+      </div>
+    </div>
+  </div>
+
+</div>

frontend/src/app/days-off-approval/days-off-approval.component.sass

@@ +1 @@
+@import '../../common-styles/basic-component'
+
+.days-off-approval-container
+  @extend .basic-component
+
+  .days-off-approval-header
+    padding: 10px
+    margin: 0
+    font-weight: bold
+
+  .days-off-approval
+    border-bottom: 1px solid gainsboro
+    margin: 0
+    padding: 10px
+    line-height: 35px
+
+    .approve-btn
+      margin-right: 2px

frontend/src/app/days-off-approval/days-off-approval.component.ts

@@ +1 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { DaysOff } from '../shared/days-off.model';
+import { OffDayType } from '../shared/off-day-type';
+
+@Component({
+  selector: 'app-days-off-approval',
+  templateUrl: './days-off-approval.component.html',
+  styleUrls: ['./days-off-approval.component.sass']
+})
+export class DaysOffApprovalComponent implements OnInit {
+
+  @Input()  daysOffToApprove: DaysOff[];
+  @Output() daysOffApprovalAction = new EventEmitter<{daysOff: DaysOff, approved: boolean}>();
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  daysOffApprovalCompleted(daysOffApproved: DaysOff, isApproved: boolean ) {
+    this.daysOffApprovalAction.emit({daysOff: daysOffApproved, approved: isApproved});
+  }
+
+  private daysOffTypeToString(taskType: OffDayType): string {
+    switch (taskType) {
+      case OffDayType.ExtraVacation:
+        return 'Extra dovolená';
+      case OffDayType.Sickday:
+        return 'Sickdays';
+    }
+  }
+}

frontend/src/app/days-off-approval/days-off-approval.module.ts

@@ +1 @@
+import { NgModule } from '@angular/core';
+import { DaysOffApprovalComponent } from './days-off-approval.component';
+import { BrowserModule } from '@angular/platform-browser';
+
+@NgModule({
+  declarations: [ DaysOffApprovalComponent ],
+  exports:      [ DaysOffApprovalComponent ],
+  imports:      [ BrowserModule ]
+})
+export class DaysOffApprovalModule { }

frontend/src/app/off-days-approval/off-days-approval.component.html

@@ -1 @@
-<div class="tasks-container">
-
-  <div class="component-header">
-    Schvalování volna
-  </div>
-
-  <div class="tasks-list">
-    <div class="row tasks-header">
-      <div class="col-md-3"> Jméno </div>
-      <div class="col-md-3"> Typ volna </div>
-      <div class="col-md-2"> Od </div>
-      <div class="col-md-2"> Do </div>
-      <div class="col-md-2"></div>
-    </div>
-
-    <div class="row task-container" *ngFor="let task of tasksToComplete">
-      <div class="col-md-3">
-        {{task.username}}
-      </div>
-
-      <div class="col-md-3">
-        {{freeDayTypeToString(task.taskType)}}
-      </div>
-
-      <div class="col-md-2">
-        {{task.dateFrom | date:'yyyy/MM/dd'}}
-      </div>
-      <div class="col-md-2">
-        {{task.dateTo | date:'yyyy/MM/dd'}}
-      </div>
-      <div class="col-md-2">
-        <div class="btn btn-success approve-user-btn" (click)="taskCompleted(task, true)">✓</div>
-        <div class="btn btn-danger reject-user-btn"   (click)="taskCompleted(task, false)">X</div>
-      </div>
-    </div>
-  </div>
-
-</div>

frontend/src/app/off-days-approval/off-days-approval.component.sass

@@ -1 @@
-@import '../../common-styles/basic-component'
-
-.tasks-container
-  @extend .basic-component
-
-  .tasks-header
-    padding: 10px
-    margin: 0
-    font-weight: bold
-
-  .task-container
-    border-bottom: 1px solid gainsboro
-    margin: 0
-    padding: 10px
-    line-height: 35px
-
-    .approve-user-btn
-      margin-right: 2px

frontend/src/app/off-days-approval/off-days-approval.component.ts

@@ -1 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { OffDaysToApprove } from './off-days-to-approve.model';
-import { OffDayType } from '../shared/off-day-type';
-
-@Component({
-  selector: 'app-tasks',
-  templateUrl: './off-days-approval.component.html',
-  styleUrls: ['./off-days-approval.component.sass']
-})
-export class OffDaysApprovalComponent implements OnInit {
-
-  @Input()  tasksToComplete: OffDaysToApprove[];
-  @Output() taskCompletedAction = new EventEmitter<{task: OffDaysToApprove, approved: boolean}>();
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-  taskCompleted(completedTask: OffDaysToApprove, isApproved: boolean ) {
-    this.taskCompletedAction.emit({task: completedTask, approved: isApproved});
-  }
-
-  private freeDayTypeToString(taskType: OffDayType): string {
-    switch (taskType) {
-      case OffDayType.ExtraVacation:
-        return 'Extra dovolená';
-      case OffDayType.Sickday:
-        return 'Sickdays';
-    }
-  }
-}

frontend/src/app/off-days-approval/off-days-approval.module.ts

@@ -1 @@
-import { NgModule } from '@angular/core';
-import { OffDaysApprovalComponent } from './off-days-approval.component';
-import { BrowserModule } from '@angular/platform-browser';
-
-@NgModule({
-  declarations: [ OffDaysApprovalComponent ],
-  exports:      [ OffDaysApprovalComponent ],
-  imports:      [ BrowserModule ]
-})
-export class OffDaysApprovalModule { }

frontend/src/app/off-days-approval/off-days-to-approve.model.ts

@@ -1 @@
-import { OffDayType } from '../shared/off-day-type';
-
-export class OffDaysToApprove {
-  username: string;
-  dateFrom: Date;
-  dateTo: Date;
-  taskType: OffDayType;
-}

frontend/src/app/shared/days-off.model.ts

@@ +1 @@
+import { OffDayType } from './off-day-type';
+
+export class DaysOff {
+  username: string;
+  dateFrom: Date;
+  dateTo: Date;
+  type: OffDayType;
+}