TSK-1583: Renamed and refactored general-fields component with Material

web/src/app/shared/components/dropdown/dropdown.component.html

@@ -1,18 +0,0 @@
-<div class="input-group dropdown" dropdown>
-  <button class="btn btn-default dropdown-toggle" type="button" dropdownToggle
-          data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" name="">
-    {{ itemSelected?.name }}
-    <span class="caret"></span>
-  </button>
-  <ul class="dropdown-menu height-and-scroll">
-    <li *ngFor="let item of list" (click)="selectItem(item)">
-      <a>
-        <label>
-          <span class="material-icons md-20 blue ">{{item.key === itemSelected?.key ?
-            'check_box' : 'check_box_outline_blank'}} </span>
-          <span> {{item.name}} </span>
-        </label>
-      </a>
-    </li>
-  </ul>
-</div>

web/src/app/shared/components/dropdown/dropdown.component.scss

@@ -1,4 +0,0 @@
-.height-and-scroll {
-  max-height: 300px;
-  overflow-y: auto;
-}

web/src/app/shared/components/dropdown/dropdown.component.spec.ts

@@ -1,43 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { DropdownComponent } from './dropdown.component';
-
-describe('DropdownComponent', () => {
-  let component: DropdownComponent;
-  let fixture: ComponentFixture<DropdownComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [DropdownComponent]
-    }).compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(DropdownComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should have values', () => {
-    component.list = new Array<any>('first', 'second');
-    component.itemSelected = 'second';
-    expect(component.list).not.toBeNull();
-    expect(component.list).not.toBeNaN();
-    expect(component.itemSelected).not.toBeNull();
-    expect(component.itemSelected).not.toBeNaN();
-  });
-
-  it('should have the correct item selected', () => {
-    component.list = new Array<any>('first', 'second');
-
-    component.selectItem('first');
-    expect(component.itemSelected).toBe('first');
-
-    component.selectItem('second');
-    expect(component.itemSelected).toBe('second');
-  });
-});

web/src/app/shared/components/dropdown/dropdown.component.ts

@@ -1,19 +0,0 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-
-@Component({
-  selector: 'taskana-shared-dropdown',
-  templateUrl: './dropdown.component.html',
-  styleUrls: ['./dropdown.component.scss']
-})
-export class DropdownComponent implements OnInit {
-  @Input() itemSelected: any;
-  @Input() list: any[];
-  @Output() performClassification = new EventEmitter<any>();
-
-  ngOnInit(): void {}
-
-  selectItem(item: any) {
-    this.itemSelected = item;
-    this.performClassification.emit(item);
-  }
-}

web/src/app/shared/shared.module.ts

@@ -30,7 +30,6 @@ import { PaginationComponent } from './components/pagination/pagination.componen
 import { NumberPickerComponent } from './components/number-picker/number-picker.component';
 import { ProgressSpinnerComponent } from './components/progress-spinner/progress-spinner.component';
 import { DatePickerComponent } from './components/date-picker/date-picker.component';
-import { DropdownComponent } from './components/dropdown/dropdown.component';
 
 /**
  * Pipes
@@ -98,7 +97,6 @@ const DECLARATIONS = [
   NumberPickerComponent,
   ProgressSpinnerComponent,
   DatePickerComponent,
-  DropdownComponent,
   ToastComponent,
   DialogPopUpComponent,
   WorkbasketFilterComponent,

web/src/app/workplace/components/task-information/task-information.component.html

@@ -0,0 +1,193 @@
+<div *ngIf="task && !requestInProgress">
+  <ng-form #TaskForm="ngForm">
+    <div class="task-information">
+
+      <div class="task-information__column--left">
+
+        <!-- TASK NAME -->
+        <mat-form-field appearance="outline">
+          <mat-label>Name</mat-label>
+          <label for="task-name"></label>
+          <input matInput type="text" required maxlength="255" #name="ngModel" id="task-name" placeholder="Name"
+                 [(ngModel)]="task.name" name="task.name" (input)="validateInputOverflow(name, 255)">
+        </mat-form-field>
+        <div *ngIf="inputOverflowMap.get(name.name)" class="error">{{lengthError}}</div>
+        <taskana-shared-field-error-display [displayError]="!isFieldValid('task.name')"
+                                            [validationTrigger]="this.toggleValidationMap.get('task.name')" errorMessage="* Name is required">
+        </taskana-shared-field-error-display>
+
+        <!-- TASK SYSTEM -->
+        <mat-form-field appearance="outline">
+          <mat-label>System</mat-label>
+          <label for="task.primaryObjRef.system"></label>
+          <input matInput type="text" required maxlength="32" #system="ngModel" id="task.primaryObjRef.system" placeholder="System description"
+                 [(ngModel)]="task.primaryObjRef.system" name="task.primaryObjRef.system" (input)="validateInputOverflow(system, 32)">
+        </mat-form-field>
+        <div *ngIf="inputOverflowMap.get(system.name)" class="error">{{lengthError}}</div>
+        <taskana-shared-field-error-display [displayError]="!isFieldValid('task.primaryObjRef.system')"
+                                            [validationTrigger]="this.toggleValidationMap.get('task.primaryObjRef.system')"
+                                            errorMessage="* System is required">
+        </taskana-shared-field-error-display>
+
+        <!-- TYPE -->
+        <mat-form-field appearance="outline">
+          <mat-label>Reference type</mat-label>
+          <label for="task.primaryObjRef.type"></label>
+          <input matInput type="text" required maxlength="32" #type="ngModel" id="task.primaryObjRef.type" placeholder="Reference type"
+                 [(ngModel)]="task.primaryObjRef.type" name="task.primaryObjRef.type" (input)="validateInputOverflow(type, 32)">
+        </mat-form-field>
+        <div *ngIf="inputOverflowMap.get(type.name)" class="error">{{lengthError}}</div>
+        <taskana-shared-field-error-display [displayError]="!isFieldValid('task.primaryObjRef.type')"
+                                            [validationTrigger]="this.toggleValidationMap.get('task.primaryObjRef.type')"
+                                            errorMessage="* Reference type is required">
+        </taskana-shared-field-error-display>
+
+        <!-- CLASSIFICATION -->
+        <mat-form-field appearance="outline" *ngIf="this.task.classificationSummary else newTask">
+          <mat-label>Classification</mat-label>
+          <mat-select [value]="this.task.classificationSummary.name" required>
+            <mat-option *ngFor="let classification of classifications" [value]="classification.name" (click)="changedClassification(classification)">
+              {{ classification.name }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+        <ng-template #newTask>
+          <mat-form-field appearance="outline">
+            <mat-label>Classification</mat-label>
+            <mat-select required>
+              <mat-option *ngFor="let classification of classifications" [value]="classification.name" (click)="changedClassification(classification)">
+                {{ classification.name }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+        </ng-template>
+        <taskana-shared-field-error-display [displayError]="isClassificationEmpty"
+                                            errorMessage="* Classification is required">
+        </taskana-shared-field-error-display>
+
+
+        <!-- PARENT BUSINESS PROCESS ID -->
+        <mat-form-field appearance="outline">
+          <mat-label>Parent Business Process Id</mat-label>
+          <label for="task-parent-business-p-id"></label>
+          <input matInput type="text" maxlength="128" #parentBusinessProcessId="ngModel" id="task-parent-business-p-id" placeholder="Parent Business Process Id"
+                 [(ngModel)]="task.parentBusinessProcessId" name="task.parentBusinessProcessId" (input)="validateInputOverflow(parentBusinessProcessId, 128)">
+        </mat-form-field>
+        <div *ngIf="inputOverflowMap.get(parentBusinessProcessId.name)" class="error">{{lengthError}}</div>
+
+
+        <!-- OWNER -->
+        <taskana-shared-type-ahead *ngIf="(tasksCustomisation$ |async)?.information.owner.lookupField else ownerInput"
+                                   #owner="ngModel" name="task.owner"
+                                   [(ngModel)]="task.owner" width="100%" placeHolderMessage="Owner"
+                                   [isRequired]="false" (selectedItem)="onSelectedOwner($event)">
+        </taskana-shared-type-ahead>
+        <ng-template #ownerInput>
+          <mat-form-field appearance="outline">
+            <mat-label>Owner</mat-label>
+            <label for="ts-owner"></label>
+            <input matInput type="text" maxlength="32" #owner="ngModel" id="ts-owner" placeholder="Owner"
+                   [(ngModel)]="task.owner" name="task.owner" (input)="validateInputOverflow(owner, 32)">
+          </mat-form-field>
+          <div *ngIf="inputOverflowMap.get(owner.name)" class="error">{{lengthError}}</div>
+        </ng-template>
+
+
+
+      </div>
+
+      <div class="task-information__column--right">
+
+        <!-- COMPANY -->
+        <mat-form-field appearance="outline">
+          <mat-label>Company</mat-label>
+          <label for="task.primaryObjRef.company"></label>
+          <input matInput type="text" required maxlength="32" #company="ngModel" id="task.primaryObjRef.company" placeholder="Company description"
+                 [(ngModel)]="task.primaryObjRef.company" name="task.primaryObjRef.company" (input)="validateInputOverflow(company, 32)">
+        </mat-form-field>
+        <div *ngIf="inputOverflowMap.get(company.name)" class="error">{{lengthError}}</div>
+        <taskana-shared-field-error-display [displayError]="!isFieldValid('task.primaryObjRef.company')"
+                                            [validationTrigger]="this.toggleValidationMap.get('task.primaryObjRef.company')"
+                                            errorMessage="* Company is required">
+        </taskana-shared-field-error-display>
+
+
+        <!-- TASK SYSTEM INSTANCE -->
+        <mat-form-field appearance="outline">
+          <mat-label>System Instance</mat-label>
+          <label for="task.primaryObjRef.systemInstance"></label>
+          <input matInput type="text" required maxlength="32" #systemInstance="ngModel" id="task.primaryObjRef.systemInstance" placeholder="System Instance description"
+                 [(ngModel)]="task.primaryObjRef.systemInstance" name="task.primaryObjRef.systemInstance" (input)="validateInputOverflow(systemInstance, 32)">
+        </mat-form-field>
+        <div *ngIf="inputOverflowMap.get(systemInstance.name)" class="error">{{lengthError}}</div>
+        <taskana-shared-field-error-display [displayError]="!isFieldValid('task.primaryObjRef.systemInstance')"
+                                            [validationTrigger]="this.toggleValidationMap.get('task.primaryObjRef.systemInstance')"
+                                            errorMessage="* System instance is required">
+        </taskana-shared-field-error-display>
+
+        <!-- REFERENCE VALUE -->
+        <mat-form-field appearance="outline">
+          <mat-label>Reference value</mat-label>
+          <label for="task.primaryObjRef.value"></label>
+          <input matInput type="text" required maxlength="32" #value="ngModel" id="task.primaryObjRef.value" placeholder="Reference value"
+                 [(ngModel)]="task.primaryObjRef.value" name="task.primaryObjRef.value" (input)="validateInputOverflow(value, 32)">
+        </mat-form-field>
+        <div *ngIf="inputOverflowMap.get(value.name)" class="error">{{lengthError}}</div>
+        <taskana-shared-field-error-display [displayError]="!isFieldValid('task.primaryObjRef.value')"
+                                            [validationTrigger]="this.toggleValidationMap.get('task.primaryObjRef.value')"
+                                            errorMessage="* Reference value is required">
+        </taskana-shared-field-error-display>
+
+
+        <div class="task-information__due-date-and-priority">
+
+          <!-- DUE DATE -->
+          <div class="task-information__due-date">
+            <span style="color: gray; font-size: 0.8em;">Due date</span>
+            <div class="task-information__date-picker" style="position: relative; top: 4px;">
+              <taskana-shared-date-picker placeholder="Due date" [value]="task.due" [name]="'task.due'" [id]="'task-due'"
+                                          (dateOutput)="updateDate($event)"></taskana-shared-date-picker>
+            </div>
+          </div>
+
+          <!-- PRIORITY -->
+          <mat-form-field appearance="outline" style="min-width: 100px; padding-left: 8px;">
+            <mat-label>Priority</mat-label>
+            <input
+              matInput type="number" placeholder="Priority" [(ngModel)]="task.priority"
+              id="task-priority" name="task.priority" min="0">
+          </mat-form-field>
+
+        </div>
+
+
+        <!-- BUSINESS PROCESS ID -->
+        <mat-form-field appearance="outline">
+          <mat-label>Business Process Id</mat-label>
+          <label for="task-business-p-id"></label>
+          <input matInput type="text" maxlength="128" #businessProcessId="ngModel" id="task-business-p-id" placeholder="Business Process Id"
+                 [(ngModel)]="task.businessProcessId" name="task.businessProcessId" (input)="validateInputOverflow(businessProcessId, 128)">
+        </mat-form-field>
+        <div *ngIf="inputOverflowMap.get(businessProcessId.name)" class="error">{{lengthError}}</div>
+
+
+        <!-- DESCRIPTION -->
+        <div style="display: block; width: 100%">
+          <mat-form-field appearance="outline" style="width: 100%">
+            <mat-label>Note</mat-label>
+            <label for="task-note"></label>
+            <textarea matInput cdkTextareaAutosize cdkAutosizeMinRows="1" cdkAutosizeMaxRows="6" maxlength="4096"
+                      id="task-note" placeholder="Note" [(ngModel)]="task.note"
+                      name="task.note" #note="ngModel"
+                      (input)="validateInputOverflow(note, 4096)"></textarea>
+          </mat-form-field>
+          <div *ngIf="inputOverflowMap.get(note.name)" class="error">{{lengthError}}</div>
+        </div>
+
+
+      </div>
+
+    </div>
+  </ng-form>
+</div>
+

web/src/app/workplace/components/task-information/task-information.component.scss

@@ -0,0 +1,23 @@
+.task-information {
+  display: flex;
+  flex-direction: row;
+
+  &__column--left {
+    display: flex;
+    flex-direction: column;
+    width: 50%;
+    margin-right: 16px;
+  }
+
+  &__column--right {
+    display: flex;
+    flex-direction: column;
+    width: 50%;
+  }
+
+  &__due-date-and-priority {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}

web/src/app/workplace/components/task-information/task-information.component.ts

@@ -20,13 +20,14 @@ import { ClassificationsService } from '../../../shared/services/classifications
 import { Classification } from '../../../shared/models/classification';
 import { TasksCustomisation } from '../../../shared/models/customisation';
 import { takeUntil } from 'rxjs/operators';
+import { AccessIdDefinition } from '../../../shared/models/access-id';
 
 @Component({
-  selector: 'taskana-task-details-general-fields',
+  selector: 'taskana-task-information',
-  templateUrl: './general-fields.component.html',
+  templateUrl: './task-information.component.html',
-  styleUrls: ['./general-fields.component.scss']
+  styleUrls: ['./task-information.component.scss']
 })
-export class TaskdetailsGeneralFieldsComponent implements OnInit, OnChanges, OnDestroy {
+export class TaskInformationComponent implements OnInit, OnChanges, OnDestroy {
   @Input()
   task: Task;
 
@@ -114,6 +115,12 @@ export class TaskdetailsGeneralFieldsComponent implements OnInit, OnChanges, OnD
       });
   }
 
+  onSelectedOwner(owner: AccessIdDefinition) {
+    if (owner?.accessId) {
+      this.task.owner = owner.accessId;
+    }
+  }
+
   ngOnDestroy() {
     this.destroy$.next();
     this.destroy$.complete();

web/src/app/workplace/components/taskdetails-general/general-fields.component.html

@@ -1,143 +0,0 @@
-<ng-container *ngIf="task && !requestInProgress">
-  <ng-form #TaskForm="ngForm" autocomplete="off">
-    <div class="col-md-6">
-      <div class="row">
-        <div class="form-group col-xs-6 required">
-          <label for="task-name" class="control-label">Name</label>
-          <input type="text" class="form-control" id="task-name" placeholder="Name" [(ngModel)]="task.name"
-                 name="task.name" maxlength="255" #name (input)="validateInputOverflow(name, 255)">
-          <div *ngIf="inputOverflowMap.get(name.name)" class="error">{{lengthError}}</div>
-          <taskana-shared-field-error-display [displayError]="!isFieldValid('task.name')"
-                                              [validationTrigger]="this.toggleValidationMap.get('task.name')"
-                                              errorMessage="* Name is required">
-          </taskana-shared-field-error-display>
-        </div>
-        <div class="form-group col-xs-6 required">
-          <label for="task.primaryObjRef.company" class="control-label">Company</label>
-          <input type="text" class="form-control" id="task.primaryObjRef.company" required
-                 placeholder="Company description"
-                 [(ngModel)]="task.primaryObjRef.company" name="task.primaryObjRef.company" maxlength="32" #company
-                 (input)="validateInputOverflow(company, 32)">
-          <div *ngIf="inputOverflowMap.get(company.name)" class="error">{{lengthError}}</div>
-          <taskana-shared-field-error-display [displayError]="!isFieldValid('task.primaryObjRef.company')"
-                                              [validationTrigger]="this.toggleValidationMap.get('task.primaryObjRef.company')"
-                                              errorMessage="* Company is required">
-          </taskana-shared-field-error-display>
-        </div>
-
-      </div>
-      <div class="row">
-        <div class="form-group col-xs-6 required">
-          <label for="task.primaryObjRef.system" class="control-label">System</label>
-          <input type="text" class="form-control" id="task.primaryObjRef.system" required
-                 placeholder="System description"
-                 [(ngModel)]="task.primaryObjRef.system" name="task.primaryObjRef.system" maxlength="32" #system
-                 (input)="validateInputOverflow(system, 32)">
-          <div *ngIf="inputOverflowMap.get(system.name)" class="error">{{lengthError}}</div>
-          <taskana-shared-field-error-display [displayError]="!isFieldValid('task.primaryObjRef.system')"
-                                              [validationTrigger]="this.toggleValidationMap.get('task.primaryObjRef.system')"
-                                              errorMessage="* System is required">
-          </taskana-shared-field-error-display>
-        </div>
-        <div class="form-group col-xs-6 required">
-          <label for="task.primaryObjRef.systemInstance" class="control-label">System instance</label>
-          <input type="text" class="form-control" id="task.primaryObjRef.systemInstance" required
-                 placeholder="System Instance description"
-                 [(ngModel)]="task.primaryObjRef.systemInstance" name="task.primaryObjRef.systemInstance" maxlength="32"
-                 #instance (input)="validateInputOverflow(instance, 32)">
-          <div *ngIf="inputOverflowMap.get(instance.name)" class="error">{{lengthError}}</div>
-          <taskana-shared-field-error-display [displayError]="!isFieldValid('task.primaryObjRef.systemInstance')"
-                                              [validationTrigger]="this.toggleValidationMap.get('task.primaryObjRef.systemInstance')"
-                                              errorMessage="* System instance is required">
-          </taskana-shared-field-error-display>
-        </div>
-      </div>
-      <div class="row">
-        <div class="form-group col-xs-6 required">
-          <label for="task.primaryObjRef.type" class="control-label">Reference type</label>
-          <input type="text" class="form-control" id="task.primaryObjRef.type" required placeholder="Reference type"
-                 [(ngModel)]="task.primaryObjRef.type" name="task.primaryObjRef.type" maxlength="32" #type
-                 (input)="validateInputOverflow(type, 32)">
-          <div *ngIf="inputOverflowMap.get(type.name)" class="error">{{lengthError}}</div>
-          <taskana-shared-field-error-display [displayError]="!isFieldValid('task.primaryObjRef.type')"
-                                              [validationTrigger]="this.toggleValidationMap.get('task.primaryObjRef.type')"
-                                              errorMessage="* Reference type is required">
-          </taskana-shared-field-error-display>
-        </div>
-        <div class="form-group col-xs-6 required">
-          <label for="task.primaryObjRef.value" class="control-label">Reference value</label>
-          <input type="text" class="form-control" id="task.primaryObjRef.value" required placeholder="Reference value"
-                 [(ngModel)]="task.primaryObjRef.value" name="task.primaryObjRef.value" maxlength="32" #value
-                 (input)="validateInputOverflow(value, 32)">
-          <div *ngIf="inputOverflowMap.get(value.name)" class="error">{{lengthError}}</div>
-          <taskana-shared-field-error-display [displayError]="!isFieldValid('task.primaryObjRef.value')"
-                                              [validationTrigger]="this.toggleValidationMap.get('task.primaryObjRef.value')"
-                                              errorMessage="* Reference value is required">
-          </taskana-shared-field-error-display>
-        </div>
-      </div>
-      <div class="row">
-        <div class="form-group col-xs-6 required">
-          <label for="classification" class="control-label">Classification</label>
-          <taskana-shared-dropdown [list]="classifications" (performClassification)="changedClassification($event)"
-                                   [itemSelected]="task?.classificationSummary"
-                                   id="classification"></taskana-shared-dropdown>
-          <taskana-shared-field-error-display [displayError]="isClassificationEmpty"
-                                              errorMessage="* Classification is required">
-          </taskana-shared-field-error-display>
-        </div>
-        <div class="form-group col-xs-4">
-          <label for="task-due" class="control-label">Due date</label>
-          <taskana-shared-date-picker placeholder="Due date" [value]="task.due" [name]="'task.due'" [id]="'task-due'"
-                                      (dateOutput)="updateDate($event)"></taskana-shared-date-picker>
-        </div>
-        <div class="form-group col-xs-2">
-          <label for="task-priority" class="control-label">Priority</label>
-          <taskana-shared-number-picker [(ngModel)]="task.priority" title="priority" id="task-priority"
-                                        name="task.priority"></taskana-shared-number-picker>
-        </div>
-      </div>
-    </div>
-    <div class="col-md-6">
-      <div class="form-group">
-        <label for="task-parent-business-p-id" class="control-label">Parent business process id</label>
-        <input type="text" class="form-control" id="task-parent-business-p-id" placeholder="Parent business process iD"
-               [(ngModel)]="task.parentBusinessProcessId" name="task.parentBusinessProcessId" maxlength="128"
-               #parentBusinessProcessId
-               (input)="validateInputOverflow(parentBusinessProcessId, 128)">
-        <div *ngIf="inputOverflowMap.get(parentBusinessProcessId.name)" class="error">{{lengthError}}</div>
-      </div>
-      <div class="form-group">
-        <label for="task-business-p-id" class="control-label">Business process iD</label>
-        <input type="text" class="form-control" id="task-business-p-id" placeholder="Business process id"
-               [(ngModel)]="task.businessProcessId" name="task.businessProcessId" maxlength="128" #businessProcessId
-               (input)="validateInputOverflow(businessProcessId, 128)">
-        <div *ngIf="inputOverflowMap.get(businessProcessId.name)" class="error">{{lengthError}}</div>
-      </div>
-      <div class="input-group form-group col-xs-12">
-        <label for="ts-owner" class="control-label ">Owner</label>
-        <taskana-shared-type-ahead *ngIf="(tasksCustomisation$ |async)?.information.owner.lookupField else ownerInput"
-                                   #owner="ngModel" name="task.owner"
-                                   [(ngModel)]="task.owner" width="100%"
-                                   [isRequired]="false"></taskana-shared-type-ahead>
-        <ng-template #ownerInput>
-          <input type="text" #owner="ngModel" class="form-control" id="ts-owner" placeholder="Owner"
-                 [(ngModel)]="task.owner" name="task.owner" maxlength="32"
-                 (input)="validateInputOverflow(owner, 32)">
-          <div *ngIf="inputOverflowMap.get(owner.name)" class="error">{{lengthError}}</div>
-        </ng-template>
-      </div>
-      <div class="row">
-        <div class="form-group col-xs-12">
-          <div class="form-group">
-            <label for="task-note" class="control-label">Note</label>
-            <textarea class="form-control" rows="2" id="task-note" placeholder="Note" [(ngModel)]="task.note"
-                      name="task.note" maxlength="4096" #note
-            (input)="validateInputOverflow(note, 4096)"></textarea>
-            <div *ngIf="inputOverflowMap.get(note.name)" class="error">{{lengthError}}</div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </ng-form>
-</ng-container>

web/src/app/workplace/components/taskdetails-general/general-fields.component.scss

@@ -1,4 +0,0 @@
-ul {
-  overflow: auto;
-  overflow-y: scroll;
-}

web/src/app/workplace/components/taskdetails/taskdetails.component.html

@@ -38,8 +38,8 @@
           <span class="float-right pull-right material-icons md-20 blue">{{accordion1State ?
             'expand_more' : 'expand_less'}}</span>
         </button>
-        <taskana-task-details-general-fields [task]="task" [saveToggleTriggered]="toggleFormValidation"
+        <taskana-task-information [task]="task" [saveToggleTriggered]="toggleFormValidation"
-                                             (formValid)="onSave()"></taskana-task-details-general-fields>
+                                  (formValid)="onSave()"></taskana-task-information>
       </accordion-group>
       <!--Status Details-->
       <accordion-group panelClass="customClass" (isOpenChange)="accordion2State = $event">

web/src/app/workplace/components/taskdetails/taskdetails.component.spec.ts

@@ -11,7 +11,7 @@ import { WorkplaceService } from '../../services/workplace.service';
 import { TaskService } from '../../services/task.service';
 import { TaskAttributeValueComponent } from '../task-attribute-value/task-attribute-value.component';
 import { TaskCustomFieldsComponent } from '../task-custom-fields/task-custom-fields.component';
-import { TaskdetailsGeneralFieldsComponent } from '../taskdetails-general/general-fields.component';
+import { TaskInformationComponent } from '../task-information/task-information.component';
 import { TaskdetailsComponent } from './taskdetails.component';
 import { NotificationService } from '../../../shared/services/notifications/notification.service';
 
@@ -33,9 +33,9 @@ xdescribe('TaskdetailsComponent', () => {
       declarations: [
         TaskdetailsComponent,
         SpinnerComponent,
-        TaskdetailsGeneralFieldsComponent,
         TaskAttributeValueComponent,
         TaskCustomFieldsComponent,
+        TaskInformationComponent,
         DummyDetailComponent
       ],
       imports: [FormsModule, RouterTestingModule.withRoutes(routes), HttpClientModule],

web/src/app/workplace/workplace.module.ts

@@ -13,9 +13,9 @@ import { WorkplaceRoutingModule } from './workplace-routing.module';
 import { TaskListToolbarComponent } from './components/task-list-toolbar/task-list-toolbar.component';
 import { TaskMasterComponent } from './components/task-master/task-master.component';
 import { TaskdetailsComponent } from './components/taskdetails/taskdetails.component';
-import { TaskdetailsGeneralFieldsComponent } from './components/taskdetails-general/general-fields.component';
 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 { TaskStatusDetailsComponent } from './components/task-status-details/task-status-details.component';
 import { TaskListComponent } from './components/task-list/task-list.component';
@@ -33,6 +33,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
 import { MatRadioModule } from '@angular/material/radio';
 import { MatMenuModule } from '@angular/material/menu';
+import { MatSelectModule } from '@angular/material/select';
 
 const MODULES = [
   TypeaheadModule.forRoot(),
@@ -54,7 +55,7 @@ const DECLARATIONS = [
   TaskListToolbarComponent,
   TaskMasterComponent,
   TaskdetailsComponent,
-  TaskdetailsGeneralFieldsComponent,
+  TaskInformationComponent,
   TaskAttributeValueComponent,
   TaskCustomFieldsComponent,
   TaskComponent,
@@ -72,7 +73,8 @@ const DECLARATIONS = [
     MatIconModule,
     MatButtonModule,
     MatRadioModule,
-    MatMenuModule
+    MatMenuModule,
+    MatSelectModule
   ],
   providers: [
     TaskService,