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

TSK-1591: Renamed and refactored custom-fields component with Material

This commit is contained in:
Sofie Hofmann 2021-03-15 08:36:37 +01:00
parent c795e1556f
commit 7ac16758cc
8 changed files with 66 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
web/src/app/workplace/components/task-custom-fields/task-custom-fields.component.html Normal file
View File

@ -0,0 +1,24 @@
<div *ngIf="task">
<div class="task-custom-fields">
<div *ngFor="let customField of customFields; let i = index" class="task-custom-fields__custom-field">
<!-- INPUT -->
<div class="task-custom-fields__input">
<mat-form-field appearance="outline" style="width: 100%">
<mat-label>Custom {{i + 1}}</mat-label>
<label for="task-custom-{{i + 1}}"></label>
<input matInput type="text" maxlength="255"
id="task-custom-{{i + 1}}" placeholder="Custom {{i + 1}}"
[(ngModel)]="task[customField]"
name="task.custom{{i + 1}}" #custom="ngModel"
(input)="validateKeypress(custom, 255)">
</mat-form-field>
<div *ngIf="inputOverflowMap.get(custom.name)" class="error">{{lengthError}}</div>
</div>
<!-- WHITE SPACE BETWEEN INPUTS -->
<div *ngIf="i % 2 === 0" class="task-custom-fields__spacer"></div>
</div>
</div>
</div>

21
web/src/app/workplace/components/task-custom-fields/task-custom-fields.component.scss Normal file
View File

@ -0,0 +1,21 @@
.task-custom-fields {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
&__custom-field {
flex: 0 50%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
&__input {
width: 100%;
}
&__spacer {
width: 16px;
}
}

14
web/src/app/workplace/components/taskdetails-custom-fields/custom-fields.component.spec.ts → web/src/app/workplace/components/task-custom-fields/task-custom-fields.component.spec.ts
View File

@ -1,27 +1,27 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FormsModule } from '@angular/forms';
import { TaskdetailsCustomFieldsComponent } from './custom-fields.component';
import { TaskCustomFieldsComponent } from './task-custom-fields.component';
// TODO: test pending to test. Failing random
xdescribe('CustomComponent', () => {
let component: TaskdetailsCustomFieldsComponent;
let fixture: ComponentFixture<TaskdetailsCustomFieldsComponent>;
xdescribe('TaskCustomFieldsComponent', () => {
let component: TaskCustomFieldsComponent;
let fixture: ComponentFixture<TaskCustomFieldsComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [FormsModule],
declarations: [TaskdetailsCustomFieldsComponent]
declarations: [TaskCustomFieldsComponent]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(TaskdetailsCustomFieldsComponent);
fixture = TestBed.createComponent(TaskCustomFieldsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
it('should create component', () => {
expect(component).toBeTruthy();
});
});

12
web/src/app/workplace/components/taskdetails-custom-fields/custom-fields.component.ts → web/src/app/workplace/components/task-custom-fields/task-custom-fields.component.ts
View File

@ -5,16 +5,18 @@ import { FormsValidatorService } from '../../../shared/services/forms-validator/
import { Subject } from 'rxjs';
@Component({
selector: 'taskana-task-details-custom-fields',
templateUrl: './custom-fields.component.html'
selector: 'taskana-task-custom-fields',
templateUrl: './task-custom-fields.component.html',
styleUrls: ['./task-custom-fields.component.scss']
})
export class TaskdetailsCustomFieldsComponent implements OnInit, OnDestroy {
export class TaskCustomFieldsComponent implements OnInit, OnDestroy {
@Input() task: Task;
@Output() taskChange: EventEmitter<Task> = new EventEmitter<Task>();
readonly lengthError = 'You have reached the maximum length';
inputOverflowMap = new Map<string, boolean>();
validateKeypress: Function;
customFields: string[];
destroy$ = new Subject<void>();
@ -27,6 +29,10 @@ export class TaskdetailsCustomFieldsComponent implements OnInit, OnDestroy {
this.validateKeypress = (inputFieldModel, maxLength) => {
this.formsValidatorService.validateInputOverflow(inputFieldModel, maxLength);
};
this.customFields = Object.keys(this.task).filter(
(attribute) => attribute.startsWith('custom') && /\d/.test(attribute)
);
}
ngOnDestroy(): void {

118
web/src/app/workplace/components/taskdetails-custom-fields/custom-fields.component.html
View File

@ -1,118 +0,0 @@
<ng-container *ngIf="task">
<div class="col-md-6">
<div class="form-group">
<label for="task-custom1" class="control-label">Custom1</label>
<input type="text" class="form-control" id="task-custom1" placeholder="Custom1"
[(ngModel)]="task.custom1" name="task.custom1" maxlength="255" #custom1
(keypress)="validateKeypress(custom1, 255)">
<div *ngIf="inputOverflowMap.get(custom1.name)" class="error">{{lengthError}}</div>
</div>
<div class="form-group">
<label for="task-custom2" class="control-label">Custom2</label>
<input type="text" class="form-control" id="task-custom2" placeholder="Custom2"
[(ngModel)]="task.custom2" name="task.custom2" maxlength="255" #custom2
(keypress)="validateKeypress(custom2, 255)">
<div *ngIf="inputOverflowMap.get(custom2.name)" class="error">{{lengthError}}</div>
</div>
<div class="form-group">
<label for="task-custom3" class="control-label">Custom3</label>
<input type="text" class="form-control" id="task-custom3" placeholder="Custom3"
[(ngModel)]="task.custom3" name="task.custom3" maxlength="255" #custom3
(keypress)="validateKeypress(custom3, 255)">
<div *ngIf="inputOverflowMap.get(custom3.name)" class="error">{{lengthError}}</div>
</div>
<div class="form-group">
<label for="task-custom4" class="control-label">Custom4</label>
<input type="text" class="form-control" id="task-custom4" placeholder="Custom4"
[(ngModel)]="task.custom4" name="task.custom4" maxlength="255" #custom4
(keypress)="validateKeypress(custom4, 255)">
<div *ngIf="inputOverflowMap.get(custom4.name)" class="error">{{lengthError}}</div>
</div>
<div class="form-group">
<label for="task-custom5" class="control-label">Custom5</label>
<input type="text" class="form-control" id="task-custom5" placeholder="Custom5"
[(ngModel)]="task.custom5" name="task.custom5" maxlength="255" #custom5
(keypress)="validateKeypress(custom5, 255)">
<div *ngIf="inputOverflowMap.get(custom5.name)" class="error">{{lengthError}}</div>
</div>
<div class="form-group">
<label for="task-custom6" class="control-label">Custom6</label>
<input type="text" class="form-control" id="task-custom6" placeholder="Custom6"
[(ngModel)]="task.custom6" name="task.custom6" maxlength="255" #custom6
(keypress)="validateKeypress(custom6, 255)">
<div *ngIf="inputOverflowMap.get(custom6.name)" class="error">{{lengthError}}</div>
</div>
<div class="form-group">
<label for="task-custom7" class="control-label">Custom7</label>
<input type="text" class="form-control" id="task-custom7" placeholder="Custom7"
[(ngModel)]="task.custom7" name="task.custom7" maxlength="255" #custom7
(keypress)="validateKeypress(custom7, 255)">
<div *ngIf="inputOverflowMap.get(custom7.name)" class="error">{{lengthError}}</div>
</div>
<div class="form-group">
<label for="task-custom8" class="control-label">Custom8</label>
<input type="text" class="form-control" id="task-custom8" placeholder="Custom8"
[(ngModel)]="task.custom8" name="task.custom8" maxlength="255" #custom8
(keypress)="validateKeypress(custom8, 255)">
<div *ngIf="inputOverflowMap.get(custom8.name)" class="error">{{lengthError}}</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="task-custom9" class="control-label">Custom9</label>
<input type="text" class="form-control" id="task-custom9" placeholder="Custom9"
[(ngModel)]="task.custom9" name="task.custom9" maxlength="255" #custom9
(keypress)="validateKeypress(custom9, 255)">
<div *ngIf="inputOverflowMap.get(custom9.name)" class="error">{{lengthError}}</div>
</div>
<div class="form-group">
<label for="task-custom10" class="control-label">Custom10</label>
<input type="text" class="form-control" id="task-custom10" placeholder="Custom10"
[(ngModel)]="task.custom10" name="task.custom10" maxlength="255" #custom10
(keypress)="validateKeypress(custom10, 255)">
<div *ngIf="inputOverflowMap.get(custom10.name)" class="error">{{lengthError}}</div>
</div>
<div class="form-group">
<label for="task-custom11" class="control-label">Custom11</label>
<input type="text" class="form-control" id="task-custom11" placeholder="Custom11"
[(ngModel)]="task.custom11" name="task.custom11" maxlength="255" #custom11
(keypress)="validateKeypress(custom11, 255)">
<div *ngIf="inputOverflowMap.get(custom11.name)" class="error">{{lengthError}}</div>
</div>
<div class="form-group">
<label for="task-custom12" class="control-label">Custom12</label>
<input type="text" class="form-control" id="task-custom12" placeholder="Custom12"
[(ngModel)]="task.custom12" name="task.custom12" maxlength="255" #custom12
(keypress)="validateKeypress(custom12, 255)">
<div *ngIf="inputOverflowMap.get(custom12.name)" class="error">{{lengthError}}</div>
</div>
<div class="form-group">
<label for="task-custom13" class="control-label">Custom13</label>
<input type="text" class="form-control" id="task-custom13" placeholder="Custom13"
[(ngModel)]="task.custom13" name="task.custom13" maxlength="255" #custom13
(keypress)="validateKeypress(custom13, 255)">
<div *ngIf="inputOverflowMap.get(custom13.name)" class="error">{{lengthError}}</div>
</div>
<div class="form-group">
<label for="task-custom14" class="control-label">Custom14</label>
<input type="text" class="form-control" id="task-custom14" placeholder="Custom14"
[(ngModel)]="task.custom14" name="task.custom14" maxlength="255" #custom14
(keypress)="validateKeypress(custom14, 255)">
<div *ngIf="inputOverflowMap.get(custom14.name)" class="error">{{lengthError}}</div>
</div>
<div class="form-group">
<label for="task-custom15" class="control-label">Custom15</label>
<input type="text" class="form-control" id="task-custom15" placeholder="Custom15"
[(ngModel)]="task.custom15" name="task.custom15" maxlength="255" #custom15
(keypress)="validateKeypress(custom15, 255)">
<div *ngIf="inputOverflowMap.get(custom15.name)" class="error">{{lengthError}}</div>
</div>
<div class="form-group">
<label for="task-custom16" class="control-label">Custom16</label>
<input type="text" class="form-control" id="task-custom16" placeholder="Custom16"
[(ngModel)]="task.custom16" name="task.custom16" maxlength="255" #custom16
(keypress)="validateKeypress(custom16, 255)">
<div *ngIf="inputOverflowMap.get(custom16.name)" class="error">{{lengthError}}</div>
</div>
</div>
</ng-container>

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

@ -57,7 +57,7 @@
<span class="float-right pull-right material-icons md-20 blue">{{accordion3State ?
'expand_more' : 'expand_less'}}</span>
</button>
<taskana-task-details-custom-fields [task]="task"></taskana-task-details-custom-fields>
<taskana-task-custom-fields [task]="task"></taskana-task-custom-fields>
</accordion-group>
<!--Custom Attributes-->
<accordion-group panelClass="customClass" (isOpenChange)="accordion4State = $event">

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

@ -10,7 +10,7 @@ import { RequestInProgressService } from 'app/shared/services/request-in-progres
import { WorkplaceService } from '../../services/workplace.service';
import { TaskService } from '../../services/task.service';
import { TaskAttributeValueComponent } from '../task-attribute-value/task-attribute-value.component';
import { TaskdetailsCustomFieldsComponent } from '../taskdetails-custom-fields/custom-fields.component';
import { TaskCustomFieldsComponent } from '../task-custom-fields/task-custom-fields.component';
import { TaskdetailsGeneralFieldsComponent } from '../taskdetails-general/general-fields.component';
import { TaskdetailsComponent } from './taskdetails.component';
import { NotificationService } from '../../../shared/services/notifications/notification.service';
@ -34,8 +34,8 @@ xdescribe('TaskdetailsComponent', () => {
TaskdetailsComponent,
SpinnerComponent,
TaskdetailsGeneralFieldsComponent,
TaskdetailsCustomFieldsComponent,
TaskAttributeValueComponent,
TaskCustomFieldsComponent,
DummyDetailComponent
],
imports: [FormsModule, RouterTestingModule.withRoutes(routes), HttpClientModule],

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

@ -14,8 +14,8 @@ import { TaskListToolbarComponent } from './components/task-list-toolbar/task-li
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 { TaskdetailsCustomFieldsComponent } from './components/taskdetails-custom-fields/custom-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 { 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';
@ -55,8 +55,8 @@ const DECLARATIONS = [
TaskMasterComponent,
TaskdetailsComponent,
TaskdetailsGeneralFieldsComponent,
TaskdetailsCustomFieldsComponent,
TaskAttributeValueComponent,
TaskCustomFieldsComponent,
TaskComponent,
TaskStatusDetailsComponent,
TaskListComponent