nosu
/
taskana
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
Sofie Hofmann 2021-03-15 12:22:52 +01:00
parent 9bebe108e1
commit c795e1556f
10 changed files with 170 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
web/src/app/workplace/components/task-attribute-value/task-attribute-value.component.html Normal file
View File

@ -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>

66
web/src/app/workplace/components/task-attribute-value/task-attribute-value.component.scss Normal file
View File

@ -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;
}

12
web/src/app/workplace/components/taskdetails-attribute/attribute.component.spec.ts → web/src/app/workplace/components/task-attribute-value/task-attribute-value.component.spec.ts
View File

@ -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', () => {
let component: TaskdetailsAttributeComponent;
let fixture: ComponentFixture<TaskdetailsAttributeComponent>;
xdescribe('TaskAttributeValueComponent', () => {
let component: TaskAttributeValueComponent;
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();
});

22
web/src/app/workplace/components/task-attribute-value/task-attribute-value.component.ts Normal file
View File

@ -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);
}
}

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

@ -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>

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

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

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

@ -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);
}
}

6
web/src/app/workplace/components/taskdetails/taskdetails.component.html
View File

@ -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"
[callbackInfo]="true"></taskana-task-details-attributes>
<taskana-task-attribute-value [attributes]="task.callbackInfo"
[callbackInfo]="true"></taskana-task-attribute-value>
</accordion-group>
</accordion>
</div>

4
web/src/app/workplace/components/taskdetails/taskdetails.component.spec.ts
View File

@ -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],

4
web/src/app/workplace/workplace.module.ts
View File

@ -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