TSK-1590: Renamed and refactored taskdetails-attribute with Material

web/src/app/workplace/components/task-attribute-value/task-attribute-value.component.html

@@ -0,0 +1,69 @@
+<div class="task-attribute-value">
+
+  <!-- ATTRIBUTE VALUE TABLE -->
+  <div class="task-attribute-value__table" *ngIf="attributes.length > 0; else noAttributes">
+
+    <!-- HEADER -->
+    <div class="task-attribute-value__row">
+      <div style="width: 60px"></div>
+      <div class="task-attribute-value__spacer"> </div>
+      <div class="task-attribute-value__header"> Attribute </div>
+      <div class="task-attribute-value__spacer"> </div>
+      <div class="task-attribute-value__header"> Value </div>
+    </div>
+
+    <mat-divider> </mat-divider>
+
+    <!-- ENTRIES -->
+    <div *ngFor="let entry of attributes; let i = index">
+
+      <div class="task-attribute-value__row {{(i % 2 === 0)? 'task-attribute-value__background-grey' : 'task-attribute-value__background-white'}}" >
+
+        <!-- REMOVE BUTTON -->
+        <div class="task-attribute-value__column--button">
+          <button mat-stroked-button class="task-attribute-value__button--secondary" color="warn" matTooltip="Remove attribute"
+                  (click)="removeAttribute(i)">
+            <mat-icon>clear</mat-icon>
+          </button>
+        </div>
+
+        <div class="task-attribute-value__spacer"> </div>
+        <div class="task-attribute-value__spacer"> </div>
+
+        <!-- ATTRIBUTE INPUT -->
+        <div class="task-attribute-value__column--inputs">
+          <mat-form-field style="width: 98%" appearance="outline">
+            <input matInput type="text" [(ngModel)]="entry.key" name="{{callbackInfo ? 'callback-info' : 'custom-attribute'}}-{{i}}">
+          </mat-form-field>
+        </div>
+
+        <div class="task-attribute-value__spacer"> </div>
+
+        <!-- VALUE INPUT -->
+        <div class="task-attribute-value__column--inputs">
+          <mat-form-field style="width: 98%" appearance="outline">
+            <input matInput type="text" [(ngModel)]="entry.value" name="{{callbackInfo ? 'callback-info' : 'custom-attribute'}}-{{i}}-val">
+          </mat-form-field>
+        </div>
+
+      </div>
+    </div>
+
+
+  </div>
+
+
+ <!-- NO CUSTOM ATTRIBUTE OR CALLBACK INFORMATION -->
+  <ng-template #noAttributes>
+    <div> There is currently no {{ callbackInfo ? 'callback information' : 'custom attribute'}}. </div>
+  </ng-template>
+
+
+  <!-- ADD BUTTON -->
+  <button mat-flat-button class="task-attribute-value__button--primary"
+          (click)="addAttribute()">
+    <span> Add {{ callbackInfo ? 'callback information' : 'custom attribute'}} </span>
+    <mat-icon>add</mat-icon>
+  </button>
+
+</div>

web/src/app/workplace/components/task-attribute-value/task-attribute-value.component.scss

@@ -0,0 +1,66 @@
+@import 'src/theme/_colors.scss';
+
+.task-attribute-value {
+
+  &__button--primary {
+    background-color: $aquamarine;
+    color: white;
+    margin-top: 16px;
+  }
+
+  &__button--secondary {
+    min-width: 16px;
+    left: 8px;
+  }
+
+  &__table {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__header {
+    flex-grow: 1;
+    text-align: center;
+    font-weight: bold;
+  }
+
+  &__row {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    padding: 8px 0;
+  }
+
+  &__column--button {
+    width: 60px;
+    display: flex;
+    align-items: center;
+  }
+
+  &__column--inputs {
+    flex-grow: 1;
+  }
+
+  &__spacer {
+    width: 8px;
+  }
+
+  &__background-grey {
+    background-color: $light-grey;
+  }
+
+  &__background-white {
+    background-color: white;
+  }
+}
+
+::ng-deep .mat-form-field-wrapper {
+  padding: 0;
+}
+
+::ng-deep .task-attribute-value__column--inputs > .mat-form-field-appearance-outline > div.mat-form-field-wrapper > div.mat-form-field-flex > div.mat-form-field-infix  {
+  border-top-width: 0;
+  height: 40px;
+}
+
+

web/src/app/workplace/components/task-attribute-value/task-attribute-value.component.spec.ts

@@ -1,22 +1,22 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { FormsModule } from '@angular/forms';
-import { TaskdetailsAttributeComponent } from './attribute.component';
+import { TaskAttributeValueComponent } from './task-attribute-value.component';
 
 // TODO: test pending to test. Failing random
-xdescribe('AttributeComponent', () => {
+xdescribe('TaskAttributeValueComponent', () => {
-  let component: TaskdetailsAttributeComponent;
+  let component: TaskAttributeValueComponent;
-  let fixture: ComponentFixture<TaskdetailsAttributeComponent>;
+  let fixture: ComponentFixture<TaskAttributeValueComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [FormsModule],
-      declarations: [TaskdetailsAttributeComponent]
+      declarations: [TaskAttributeValueComponent]
     }).compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(TaskdetailsAttributeComponent);
+    fixture = TestBed.createComponent(TaskAttributeValueComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

web/src/app/workplace/components/task-attribute-value/task-attribute-value.component.ts

@@ -0,0 +1,22 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { CustomAttribute } from 'app/workplace/models/task';
+
+@Component({
+  selector: 'taskana-task-attribute-value',
+  templateUrl: './task-attribute-value.component.html',
+  styleUrls: ['./task-attribute-value.component.scss']
+})
+export class TaskAttributeValueComponent implements OnInit {
+  @Input() callbackInfo = false;
+  @Input() attributes: CustomAttribute[] = [];
+
+  ngOnInit() {}
+
+  addAttribute(): void {
+    this.attributes.push({ key: '', value: '' });
+  }
+
+  removeAttribute(idx: number): void {
+    this.attributes.splice(idx, 1);
+  }
+}

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

@@ -1,30 +0,0 @@
-<ng-container>
-  <table class="table table-striped table-center">
-    <thead>
-      <tr>
-        <th class="table__remove-col"></th>
-        <th>Attribute</th>
-        <th>Property</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr *ngFor="let entry of attributes;  let i = index;">
-        <td>
-          <button type="button" (click)="removeAttribute(i)" data-toggle="tooltip" title="Remove" class="btn btn-default remove">
-            <span class="material-icons md-20 red">clear</span>
-          </button>
-        </td>
-        <td>
-          <input type="text" class="form-control" [(ngModel)]="entry.key" name="{{callbackInfo ? 'callback-info' : 'custom-attribute'}}-{{i}}" />
-        </td>
-        <td>
-          <input type="text" class="form-control" [(ngModel)]="entry.value" name="{{callbackInfo ? 'callback-info' : 'custom-attribute'}}-{{i}}-val" />
-        </td>
-      </tr>
-    </tbody>
-  </table>
-  <button type="button" (click)="addAttribute()" class="btn btn-default" data-toggle="tooltip" title="Add new access">
-    <span class="material-icons md-20 green-blue">add</span>
-    <span>Add new {{ callbackInfo ? 'callback information' : 'custom attribute'}}</span>
-  </button>
-</ng-container>

web/src/app/workplace/components/taskdetails-attribute/attribute.component.scss

@@ -1,3 +0,0 @@
-.table__remove-col {
-  width: 57px;
-}

web/src/app/workplace/components/taskdetails-attribute/attribute.component.ts

@@ -1,23 +0,0 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { CustomAttribute } from 'app/workplace/models/task';
-
-@Component({
-  selector: 'taskana-task-details-attributes',
-  templateUrl: './attribute.component.html',
-  styleUrls: ['./attribute.component.scss']
-})
-export class TaskdetailsAttributeComponent implements OnInit {
-  @Input() callbackInfo = false;
-  @Input() attributes: CustomAttribute[] = [];
-  @Output() attributesChange: EventEmitter<CustomAttribute[]> = new EventEmitter<CustomAttribute[]>();
-
-  ngOnInit() {}
-
-  addAttribute(): void {
-    this.attributes.push({ key: '', value: '' });
-  }
-
-  removeAttribute(idx: number): void {
-    this.attributes.splice(idx, 1);
-  }
-}

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

@@ -66,7 +66,7 @@
           <span class="float-right pull-right material-icons md-20 blue">{{accordion4State ?
             'expand_more' : 'expand_less'}}</span>
         </button>
-        <taskana-task-details-attributes [attributes]="task.customAttributes"></taskana-task-details-attributes>
+        <taskana-task-attribute-value [attributes]="task.customAttributes"></taskana-task-attribute-value>
       </accordion-group>
       <!--Callback Information-->
       <accordion-group panelClass="customClass" (isOpenChange)="accordion5State = $event">
@@ -75,8 +75,8 @@
           <span class="float-right pull-right material-icons md-20 blue">{{accordion5State ?
             'expand_more' : 'expand_less'}}</span>
         </button>
-        <taskana-task-details-attributes [attributes]="task.callbackInfo"
+        <taskana-task-attribute-value [attributes]="task.callbackInfo"
-                                         [callbackInfo]="true"></taskana-task-details-attributes>
+                                         [callbackInfo]="true"></taskana-task-attribute-value>
       </accordion-group>
     </accordion>
   </div>

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

@@ -9,7 +9,7 @@ import { HttpClient, HttpClientModule } from '@angular/common/http';
 import { RequestInProgressService } from 'app/shared/services/request-in-progress/request-in-progress.service';
 import { WorkplaceService } from '../../services/workplace.service';
 import { TaskService } from '../../services/task.service';
-import { TaskdetailsAttributeComponent } from '../taskdetails-attribute/attribute.component';
+import { TaskAttributeValueComponent } from '../task-attribute-value/task-attribute-value.component';
 import { TaskdetailsCustomFieldsComponent } from '../taskdetails-custom-fields/custom-fields.component';
 import { TaskdetailsGeneralFieldsComponent } from '../taskdetails-general/general-fields.component';
 import { TaskdetailsComponent } from './taskdetails.component';
@@ -35,7 +35,7 @@ xdescribe('TaskdetailsComponent', () => {
         SpinnerComponent,
         TaskdetailsGeneralFieldsComponent,
         TaskdetailsCustomFieldsComponent,
-        TaskdetailsAttributeComponent,
+        TaskAttributeValueComponent,
         DummyDetailComponent
       ],
       imports: [FormsModule, RouterTestingModule.withRoutes(routes), HttpClientModule],

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

@@ -15,7 +15,7 @@ import { TaskMasterComponent } from './components/task-master/task-master.compon
 import { TaskdetailsComponent } from './components/taskdetails/taskdetails.component';
 import { TaskdetailsGeneralFieldsComponent } from './components/taskdetails-general/general-fields.component';
 import { TaskdetailsCustomFieldsComponent } from './components/taskdetails-custom-fields/custom-fields.component';
-import { TaskdetailsAttributeComponent } from './components/taskdetails-attribute/attribute.component';
+import { TaskAttributeValueComponent } from './components/task-attribute-value/task-attribute-value.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';
@@ -56,7 +56,7 @@ const DECLARATIONS = [
   TaskdetailsComponent,
   TaskdetailsGeneralFieldsComponent,
   TaskdetailsCustomFieldsComponent,
-  TaskdetailsAttributeComponent,
+  TaskAttributeValueComponent,
   TaskComponent,
   TaskStatusDetailsComponent,
   TaskListComponent