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

TSK-1584: Renamed and refactored general-fields-extension with Material

This commit is contained in:
Sofie Hofmann 2021-03-11 22:13:02 +01:00
parent 876cf15802
commit 9bebe108e1
9 changed files with 133 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
web/src/app/workplace/components/task-status-details/task-status-details.component.html Normal file
View File

@ -0,0 +1,76 @@
<div class="task-status-details" *ngIf="task && task.taskId">
<!-- LEFT COLUMN -->
<div class="task-status-details__column--left">
<!-- MODIFICATION DATE -->
<mat-form-field appearance="outline">
<mat-label>Modification Date</mat-label>
<label for="task-modified"></label>
<input matInput type="text" disabled id="task-modified" placeholder="Modified Date" [value]="task.modified | dateTimeZone"
name="task.modified">
</mat-form-field>
<!-- COMPLETION DATE -->
<mat-form-field appearance="outline">
<mat-label>Completion Date</mat-label>
<label for="task-completed"></label>
<input matInput type="text" disabled id="task-completed" placeholder="Complete Date" [value]="task.completed | dateTimeZone"
name="task.completed">
</mat-form-field>
<!-- STATE -->
<mat-form-field appearance="outline">
<mat-label>State</mat-label>
<label for="task-state"></label>
<input matInput type="text" disabled id="task-state" placeholder="State" [(ngModel)]="task.state"
name="task.state">
</mat-form-field>
<!-- TASK READ -->
<mat-form-field appearance="outline">
<mat-label>Task read</mat-label>
<label for="task-read"></label>
<input matInput type="text" disabled id="task-read" placeholder="Read" [(ngModel)]="task.read" name="task.read">
</mat-form-field>
</div>
<!-- RIGHT COLUMN -->
<div class="task-status-details__column--right">
<!-- CLAIM DATE -->
<mat-form-field appearance="outline">
<mat-label>Claim Date</mat-label>
<label for="task-claimed"></label>
<input matInput type="text" disabled id="task-claimed" placeholder="Claimed Date" [value]="task.claimed | dateTimeZone"
name="task.claimed">
</mat-form-field>
<!-- PLANNED DATE -->
<mat-form-field appearance="outline">
<mat-label>Planned Date</mat-label>
<label for="task-planned"></label>
<input matInput type="text" disabled id="task-planned" placeholder="Planned Date" [value]="task.planned | dateTimeZone"
name="task.planned">
</mat-form-field>
<!-- CREATION DATE -->
<mat-form-field appearance="outline">
<mat-label>Creation Date</mat-label>
<label for="task-created"></label>
<input matInput type="text" disabled id="task-created" placeholder="Creation Date" [value]="task.created | dateTimeZone"
name="task.created">
</mat-form-field>
<!-- TRANSFERRED -->
<mat-form-field appearance="outline">
<mat-label>Transferred</mat-label>
<label for="task-transferred"></label>
<input matInput type="text" disabled id="task-transferred" placeholder="Transferred" [(ngModel)]="task.transferred"
name="task.transferred">
</mat-form-field>
</div>
</div>

26
web/src/app/workplace/components/task-status-details/task-status-details.component.scss Normal file
View File

@ -0,0 +1,26 @@
.task-status-details {
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%;
}
}
.mat-input-element:disabled {
color: gray;
}
::ng-deep .mat-form-field-outline {
color: lightgray !important;
}

24
web/src/app/workplace/components/task-status-details/task-status-details.component.spec.ts Normal file
View File

@ -0,0 +1,24 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { TaskStatusDetailsComponent } from './task-status-details.component';
xdescribe('TaskStatusDetailsComponent', () => {
let component: TaskStatusDetailsComponent;
let fixture: ComponentFixture<TaskStatusDetailsComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [TaskStatusDetailsComponent]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(TaskStatusDetailsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create component', () => {
expect(component).toBeTruthy();
});
});

8
web/src/app/workplace/components/taskdetails-general-fields-extension/general-fields-extension.component.ts → web/src/app/workplace/components/task-status-details/task-status-details.component.ts
View File

@ -2,11 +2,11 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { Task } from 'app/workplace/models/task';
@Component({
selector: 'taskana-task-details-general-fields-extension',
templateUrl: './general-fields-extension.component.html',
styleUrls: ['./general-fields-extension.component.scss']
selector: 'taskana-task-status-details',
templateUrl: './task-status-details.component.html',
styleUrls: ['./task-status-details.component.scss']
})
export class GeneralFieldsExtensionComponent implements OnInit {
export class TaskStatusDetailsComponent implements OnInit {
@Input() task: Task;
@Output() taskChange: EventEmitter<Task> = new EventEmitter<Task>();

45
web/src/app/workplace/components/taskdetails-general-fields-extension/general-fields-extension.component.html
View File

@ -1,45 +0,0 @@
<ng-container *ngIf="task">
<div class="col-md-6">
<div *ngIf="task.taskId" class="form-group">
<label for="task-modified" class="control-label">Modification date</label>
<input type="text" disabled class="form-control" id="task-modified" placeholder="Modified" [value]="task.modified | dateTimeZone"
name="task.modified">
</div>
<div *ngIf="task.taskId" class="form-group">
<label for="task-completed" class="control-label">Completion date</label>
<input type="text" disabled class="form-control" id="task-completed" placeholder="Complete date" [value]="task.completed | dateTimeZone"
name="task.completed">
</div>
<div *ngIf="task.taskId" class="form-group">
<label for="task-state" class="control-label">State</label>
<input type="text" disabled class="form-control" id="task-state" placeholder="State" [(ngModel)]="task.state"
name="task.state">
</div>
<div *ngIf="task.taskId" class="form-group">
<label for="task-read" class="control-label">Task read</label>
<input type="text" disabled class="form-control" id="task-read" placeholder="Read" [(ngModel)]="task.read" name="task.read">
</div>
</div>
<div class="col-md-6">
<div *ngIf="task.taskId" class="form-group">
<label for="task-claimed" class="control-label">Claim date</label>
<input type="text" disabled class="form-control" id="task-claimed" placeholder="Claimed date" [value]="task.claimed | dateTimeZone"
name="task.claimed">
</div>
<div *ngIf="task.taskId" class="form-group">
<label for="task-planned" class="control-label">Planned date</label>
<input type="text" disabled class="form-control" id="task-planned" placeholder="Planned date" [value]="task.planned | dateTimeZone"
name="task.planned">
</div>
<div *ngIf="task.taskId" class="form-group">
<label for="task-created" class="control-label">Creation date</label>
<input type="text" disabled class="form-control" id="task-created" placeholder="Created" [value]="task.created | dateTimeZone"
name="task.created">
</div>
<div *ngIf="task.taskId" class="form-group">
<label for="task-transferred" class="control-label">Transferred</label>
<input type="text" disabled class="form-control" id="task-transferred" placeholder="Transferred" [(ngModel)]="task.transferred"
name="task.transferred">
</div>
</div>
</ng-container>

0
web/src/app/workplace/components/taskdetails-general-fields-extension/general-fields-extension.component.scss
View File

24
web/src/app/workplace/components/taskdetails-general-fields-extension/general-fields-extension.component.spec.ts
View File

@ -1,24 +0,0 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { GeneralFieldsExtensionComponent } from './general-fields-extension.component';
xdescribe('GeneralFieldsExtensionComponent', () => {
let component: GeneralFieldsExtensionComponent;
let fixture: ComponentFixture<GeneralFieldsExtensionComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [GeneralFieldsExtensionComponent]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(GeneralFieldsExtensionComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

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

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

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

@ -17,7 +17,7 @@ import { TaskdetailsGeneralFieldsComponent } from './components/taskdetails-gene
import { TaskdetailsCustomFieldsComponent } from './components/taskdetails-custom-fields/custom-fields.component';
import { TaskdetailsAttributeComponent } from './components/taskdetails-attribute/attribute.component';
import { TaskComponent } from './components/task/task.component';
import { GeneralFieldsExtensionComponent } from './components/taskdetails-general-fields-extension/general-fields-extension.component';
import { TaskStatusDetailsComponent } from './components/task-status-details/task-status-details.component';
import { TaskListComponent } from './components/task-list/task-list.component';
import { TaskService } from './services/task.service';
@ -58,7 +58,7 @@ const DECLARATIONS = [
TaskdetailsCustomFieldsComponent,
TaskdetailsAttributeComponent,
TaskComponent,
GeneralFieldsExtensionComponent,
TaskStatusDetailsComponent,
TaskListComponent
];