From 01f2db14d5875e0e08275d83f106142fa2bcafcd Mon Sep 17 00:00:00 2001
From: Sofie Hofmann <29145005+sofie29@users.noreply.github.com>
Date: Tue, 13 Apr 2021 14:15:11 +0200
Subject: [PATCH] TSK-1593: Renamed and refactored task component with Angular
 Material

---
 .../master-and-detail.component.scss          |  4 ++
 .../task-information.component.html           |  2 +-
 .../task-processing.component.html            | 46 +++++++++++++++
 .../task-processing.component.scss            | 50 +++++++++++++++++
 .../task-processing.component.spec.ts}        | 12 ++--
 .../task-processing.component.ts}             |  8 +--
 .../components/task/task.component.html       | 56 -------------------
 .../components/task/task.component.scss       |  3 -
 .../app/workplace/workplace-routing.module.ts |  4 +-
 web/src/app/workplace/workplace.module.ts     |  4 +-
 10 files changed, 115 insertions(+), 74 deletions(-)
 create mode 100644 web/src/app/workplace/components/task-processing/task-processing.component.html
 create mode 100644 web/src/app/workplace/components/task-processing/task-processing.component.scss
 rename web/src/app/workplace/components/{task/task.component.spec.ts => task-processing/task-processing.component.spec.ts} (82%)
 rename web/src/app/workplace/components/{task/task.component.ts => task-processing/task-processing.component.ts} (95%)
 delete mode 100644 web/src/app/workplace/components/task/task.component.html
 delete mode 100644 web/src/app/workplace/components/task/task.component.scss

diff --git a/web/src/app/shared/components/master-and-detail/master-and-detail.component.scss b/web/src/app/shared/components/master-and-detail/master-and-detail.component.scss
index 1055c49bd..2d6bf9a0b 100644
--- a/web/src/app/shared/components/master-and-detail/master-and-detail.component.scss
+++ b/web/src/app/shared/components/master-and-detail/master-and-detail.component.scss
@@ -5,10 +5,14 @@
 
   &__task-list {
     width: 500px;
+    min-width: 500px;
+    max-width: 500px;
   }
 
   &__task-details {
     flex-grow: 1;
+    min-width: calc(920px - 500px);
+    height: calc(100vh - 56px);
   }
 
   &__empty-page {
diff --git a/web/src/app/workplace/components/task-information/task-information.component.html b/web/src/app/workplace/components/task-information/task-information.component.html
index 005d25e29..3f549057c 100644
--- a/web/src/app/workplace/components/task-information/task-information.component.html
+++ b/web/src/app/workplace/components/task-information/task-information.component.html
@@ -142,7 +142,7 @@
         <div class="task-information__due-date-and-priority">
 
           <!-- DUE DATE -->
-          <mat-form-field appearance="outline">
+          <mat-form-field appearance="outline" style="min-width: 0">
             <mat-label> Due Date </mat-label>
             <input matInput [matDatepicker]="picker" value="{{task.due}}" (dateInput)="updateDate($event)">
             <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
diff --git a/web/src/app/workplace/components/task-processing/task-processing.component.html b/web/src/app/workplace/components/task-processing/task-processing.component.html
new file mode 100644
index 000000000..f82ee531d
--- /dev/null
+++ b/web/src/app/workplace/components/task-processing/task-processing.component.html
@@ -0,0 +1,46 @@
+<div class="task-processing">
+
+  <div class="task-processing__header">
+
+    <!-- ACTION BUTTONS -->
+    <div class="task-processing__action-buttons">
+
+      <!-- TRANSFER TASK -->
+      <button mat-stroked-button class="task-processing__button--secondary" [matMenuTriggerFor]="menu" matTooltip="Transfer Task to another Workbasket">
+        Transfer Task
+        <mat-icon class="task-processing__icon--aquamarine">transfer_within_a_station</mat-icon>
+      </button>
+      <mat-menu #menu="matMenu">
+        <button mat-menu-item *ngFor="let workbasket of workbaskets" (click)="transferTask(workbasket)">
+          {{workbasket.name}}
+        </button>
+      </mat-menu>
+
+      <!-- COMPLETE TASK -->
+      <button mat-stroked-button class="task-processing__button--secondary" matTooltip="Complete Task and return to Task list" (click)="completeTask()">
+        <span> Complete Task </span>
+        <mat-icon class="task-processing__icon--aquamarine">check</mat-icon>
+      </button>
+
+      <!-- CANCEL CLAIM -->
+      <button mat-stroked-button class="task-processing__button--secondary" matTooltip="Cancel Task claim and return to Task overview" (click)="cancelClaimTask()">
+        <span> Cancel claim </span>
+        <mat-icon class="task-processing__icon--aquamarine">clear</mat-icon>
+      </button>
+
+    </div>
+
+    <h4 class="task-processing__task-name">{{task?.name}}</h4>
+
+  </div>
+
+  <div class="task-processing__information"> </div>
+
+  <mat-divider> </mat-divider>
+
+
+  <!-- CONTENT -->
+  <iframe *ngIf="link" [src]="link"></iframe>
+
+</div>
+
diff --git a/web/src/app/workplace/components/task-processing/task-processing.component.scss b/web/src/app/workplace/components/task-processing/task-processing.component.scss
new file mode 100644
index 000000000..9374994b1
--- /dev/null
+++ b/web/src/app/workplace/components/task-processing/task-processing.component.scss
@@ -0,0 +1,50 @@
+@import 'src/theme/_colors.scss';
+
+.task-processing {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  &__header {
+    padding: 8px 8px 0 8px;
+    height: 88px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+
+  &__information {
+    height: 16px;
+  }
+
+  &__task-name {
+    font-size: 1.5rem;
+    padding: 0 0.5rem 0.5rem 0.5rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    z-index: 10;
+  }
+
+  &__action-buttons {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+  }
+
+  &__button--secondary {
+    margin: 0 4px;
+  }
+
+  &__icon--aquamarine {
+    color: $aquamarine;
+  }
+}
+
+iframe {
+  flex-grow: 1;
+  width: 100%;
+  border: none;
+  overflow-x: scroll;
+}
+
diff --git a/web/src/app/workplace/components/task/task.component.spec.ts b/web/src/app/workplace/components/task-processing/task-processing.component.spec.ts
similarity index 82%
rename from web/src/app/workplace/components/task/task.component.spec.ts
rename to web/src/app/workplace/components/task-processing/task-processing.component.spec.ts
index ee2f98864..2a82a80dd 100644
--- a/web/src/app/workplace/components/task/task.component.spec.ts
+++ b/web/src/app/workplace/components/task-processing/task-processing.component.spec.ts
@@ -12,7 +12,7 @@ import { RequestInProgressService } from 'app/shared/services/request-in-progres
 import { SelectedRouteService } from 'app/shared/services/selected-route/selected-route';
 import { ClassificationsService } from 'app/shared/services/classifications/classifications.service';
 import { TaskService } from '../../services/task.service';
-import { TaskComponent } from './task.component';
+import { TaskProcessingComponent } from './task-processing.component';
 
 @Component({
   selector: 'taskana-dummy-detail',
@@ -23,14 +23,14 @@ class DummyDetailComponent {}
 const routes: Routes = [{ path: 'workplace/tasks', component: DummyDetailComponent }];
 
 // TODO: test pending to test. Failing random
-xdescribe('TaskComponent', () => {
-  let component: TaskComponent;
-  let fixture: ComponentFixture<TaskComponent>;
+xdescribe('TaskProcessingComponent', () => {
+  let component: TaskProcessingComponent;
+  let fixture: ComponentFixture<TaskProcessingComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [FormsModule, HttpClientModule, RouterTestingModule.withRoutes(routes)],
-      declarations: [TaskComponent, SpinnerComponent, DummyDetailComponent],
+      declarations: [TaskProcessingComponent, SpinnerComponent, DummyDetailComponent],
       providers: [
         TaskService,
         HttpClient,
@@ -44,7 +44,7 @@ xdescribe('TaskComponent', () => {
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(TaskComponent);
+    fixture = TestBed.createComponent(TaskProcessingComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/web/src/app/workplace/components/task/task.component.ts b/web/src/app/workplace/components/task-processing/task-processing.component.ts
similarity index 95%
rename from web/src/app/workplace/components/task/task.component.ts
rename to web/src/app/workplace/components/task-processing/task-processing.component.ts
index 7fbf6a37d..e5a02addf 100644
--- a/web/src/app/workplace/components/task/task.component.ts
+++ b/web/src/app/workplace/components/task-processing/task-processing.component.ts
@@ -11,11 +11,11 @@ import { take } from 'rxjs/operators';
 import { RequestInProgressService } from '../../../shared/services/request-in-progress/request-in-progress.service';
 
 @Component({
-  selector: 'taskana-task',
-  templateUrl: './task.component.html',
-  styleUrls: ['./task.component.scss']
+  selector: 'taskana-task-processing',
+  templateUrl: './task-processing.component.html',
+  styleUrls: ['./task-processing.component.scss']
 })
-export class TaskComponent implements OnInit, OnDestroy {
+export class TaskProcessingComponent implements OnInit, OnDestroy {
   routeSubscription: Subscription;
 
   regex = /\${(.*?)}/g;
diff --git a/web/src/app/workplace/components/task/task.component.html b/web/src/app/workplace/components/task/task.component.html
deleted file mode 100644
index 7ee8c0e2f..000000000
--- a/web/src/app/workplace/components/task/task.component.html
+++ /dev/null
@@ -1,56 +0,0 @@
-<div class="panel panel-default">
-  <div class="panel-heading">
-    <div class="pull-right">
-      <div class="dropdown btn-group">
-        <button type="button" (click)="cancelClaimTask()" class="btn btn-default">
-          <span title="Cancel claim and return to task detail" class="material-icons md-20 blue">arrow_back</span>
-        </button>
-        <button type="button" (click)="completeTask()" class="btn btn-default">
-          <span title="Complete task and return to task list" class="material-icons md-20 blue">check</span>
-        </button>
-        <button type="button" data-toggle="dropdown" aria-expanded="true" class="btn btn-default dropdown-toggle">
-          <span title="Transfer task to another workbasket"
-            class="material-icons md-20 blue">transfer_within_a_station</span>
-        </button>
-        <ul class="dropdown-menu">
-          <li *ngFor="let workbasket of workbaskets">
-            <a class="dropdown-item" (click)="transferTask(workbasket)">
-              <label>{{workbasket.name}}</label>
-            </a>
-          </li>
-        </ul>
-      </div>
-    </div>
-    <div class="panel-header">
-      <h4><b>{{task?.name}}</b></h4>
-    </div>
-  </div>
-  <div class="panel-body" *ngIf="task">
-    <div class="row">
-      <ng-form #TaskForm="ngForm">
-        <div class="col-md-6">
-          <div class="form-group">
-            <label for="task-description" class="control-label">Description</label>
-            <textarea class="form-control" disabled rows="5" id="task-description" placeholder="Description"
-              [(ngModel)]="task.description" name="task.description"></textarea>
-          </div>
-        </div>
-        <div class="col-md-6">
-          <div class="form-group">
-            <label for="task-note" class="control-label">Note</label>
-            <input type="text" disabled class="form-control" id="task-note" placeholder="Task has no Note"
-              [(ngModel)]="task.note" name="task.note">
-          </div>
-          <div class="form-group">
-            <label for="task-due" class="control-label">Due Date</label>
-            <input type="text" disabled class="form-control" id="task-due" placeholder="No deadline set"
-              [(ngModel)]="task.due" name="task.due">
-          </div>
-        </div>
-      </ng-form>
-    </div>
-    <div class="row">
-      <iframe class="col-xs-12" *ngIf="link" [src]="link"></iframe>
-    </div>
-  </div>
-</div>
diff --git a/web/src/app/workplace/components/task/task.component.scss b/web/src/app/workplace/components/task/task.component.scss
deleted file mode 100644
index 0129c65b4..000000000
--- a/web/src/app/workplace/components/task/task.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-iframe {
-  height: calc(100vh - 290px);
-}
diff --git a/web/src/app/workplace/workplace-routing.module.ts b/web/src/app/workplace/workplace-routing.module.ts
index 274ab50d4..828e1dc1f 100644
--- a/web/src/app/workplace/workplace-routing.module.ts
+++ b/web/src/app/workplace/workplace-routing.module.ts
@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { MasterAndDetailComponent } from '../shared/components/master-and-detail/master-and-detail.component';
-import { TaskComponent } from './components/task/task.component';
+import { TaskProcessingComponent } from './components/task-processing/task-processing.component';
 import { TaskdetailsComponent } from './components/taskdetails/taskdetails.component';
 import { TaskMasterComponent } from './components/task-master/task-master.component';
 
@@ -22,7 +22,7 @@ const routes: Routes = [
       },
       {
         path: 'task/:id',
-        component: TaskComponent,
+        component: TaskProcessingComponent,
         outlet: 'detail'
       }
     ]
diff --git a/web/src/app/workplace/workplace.module.ts b/web/src/app/workplace/workplace.module.ts
index c13a3b58d..2517792a4 100644
--- a/web/src/app/workplace/workplace.module.ts
+++ b/web/src/app/workplace/workplace.module.ts
@@ -16,7 +16,7 @@ import { TaskdetailsComponent } from './components/taskdetails/taskdetails.compo
 import { TaskAttributeValueComponent } from './components/task-attribute-value/task-attribute-value.component';
 import { TaskCustomFieldsComponent } from './components/task-custom-fields/task-custom-fields.component';
 import { TaskInformationComponent } from './components/task-information/task-information.component';
-import { TaskComponent } from './components/task/task.component';
+import { TaskProcessingComponent } from './components/task-processing/task-processing.component';
 import { TaskStatusDetailsComponent } from './components/task-status-details/task-status-details.component';
 import { TaskListComponent } from './components/task-list/task-list.component';
 
@@ -61,7 +61,7 @@ const DECLARATIONS = [
   TaskInformationComponent,
   TaskAttributeValueComponent,
   TaskCustomFieldsComponent,
-  TaskComponent,
+  TaskProcessingComponent,
   TaskStatusDetailsComponent,
   TaskListComponent
 ];