TSK-1593: Renamed and refactored task component with Angular Material
This commit is contained in:
Sofie Hofmann
parent
9ad612a9f8
commit
01f2db14d5
|
|
@ -5,10 +5,14 @@
|
|||
|
||||
&__task-list {
|
||||
width: 500px;
|
||||
min-width: 500px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
&__task-details {
|
||||
flex-grow: 1;
|
||||
min-width: calc(920px - 500px);
|
||||
height: calc(100vh - 56px);
|
||||
}
|
||||
|
||||
&__empty-page {
|
||||
|
|
|
|||
|
|
@ -142,7 +142,7 @@
|
|||
<div class="task-information__due-date-and-priority">
|
||||
|
||||
<!-- DUE DATE -->
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-form-field appearance="outline" style="min-width: 0">
|
||||
<mat-label> Due Date </mat-label>
|
||||
<input matInput [matDatepicker]="picker" value="{{task.due}}" (dateInput)="updateDate($event)">
|
||||
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,46 @@
|
|||
<div class="task-processing">
|
||||
|
||||
<div class="task-processing__header">
|
||||
|
||||
<!-- ACTION BUTTONS -->
|
||||
<div class="task-processing__action-buttons">
|
||||
|
||||
<!-- TRANSFER TASK -->
|
||||
<button mat-stroked-button class="task-processing__button--secondary" [matMenuTriggerFor]="menu" matTooltip="Transfer Task to another Workbasket">
|
||||
Transfer Task
|
||||
<mat-icon class="task-processing__icon--aquamarine">transfer_within_a_station</mat-icon>
|
||||
</button>
|
||||
<mat-menu #menu="matMenu">
|
||||
<button mat-menu-item *ngFor="let workbasket of workbaskets" (click)="transferTask(workbasket)">
|
||||
{{workbasket.name}}
|
||||
</button>
|
||||
</mat-menu>
|
||||
|
||||
<!-- COMPLETE TASK -->
|
||||
<button mat-stroked-button class="task-processing__button--secondary" matTooltip="Complete Task and return to Task list" (click)="completeTask()">
|
||||
<span> Complete Task </span>
|
||||
<mat-icon class="task-processing__icon--aquamarine">check</mat-icon>
|
||||
</button>
|
||||
|
||||
<!-- CANCEL CLAIM -->
|
||||
<button mat-stroked-button class="task-processing__button--secondary" matTooltip="Cancel Task claim and return to Task overview" (click)="cancelClaimTask()">
|
||||
<span> Cancel claim </span>
|
||||
<mat-icon class="task-processing__icon--aquamarine">clear</mat-icon>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
<h4 class="task-processing__task-name">{{task?.name}}</h4>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="task-processing__information"> </div>
|
||||
|
||||
<mat-divider> </mat-divider>
|
||||
|
||||
|
||||
<!-- CONTENT -->
|
||||
<iframe *ngIf="link" [src]="link"></iframe>
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
@import 'src/theme/_colors.scss';
|
||||
|
||||
.task-processing {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&__header {
|
||||
padding: 8px 8px 0 8px;
|
||||
height: 88px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&__information {
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
&__task-name {
|
||||
font-size: 1.5rem;
|
||||
padding: 0 0.5rem 0.5rem 0.5rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
&__action-buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
&__button--secondary {
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
&__icon--aquamarine {
|
||||
color: $aquamarine;
|
||||
}
|
||||
}
|
||||
|
||||
iframe {
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
border: none;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
|
||||
|
|
@ -12,7 +12,7 @@ import { RequestInProgressService } from 'app/shared/services/request-in-progres
|
|||
import { SelectedRouteService } from 'app/shared/services/selected-route/selected-route';
|
||||
import { ClassificationsService } from 'app/shared/services/classifications/classifications.service';
|
||||
import { TaskService } from '../../services/task.service';
|
||||
import { TaskComponent } from './task.component';
|
||||
import { TaskProcessingComponent } from './task-processing.component';
|
||||
|
||||
@Component({
|
||||
selector: 'taskana-dummy-detail',
|
||||
|
|
@ -23,14 +23,14 @@ class DummyDetailComponent {}
|
|||
const routes: Routes = [{ path: 'workplace/tasks', component: DummyDetailComponent }];
|
||||
|
||||
// TODO: test pending to test. Failing random
|
||||
xdescribe('TaskComponent', () => {
|
||||
let component: TaskComponent;
|
||||
let fixture: ComponentFixture<TaskComponent>;
|
||||
xdescribe('TaskProcessingComponent', () => {
|
||||
let component: TaskProcessingComponent;
|
||||
let fixture: ComponentFixture<TaskProcessingComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [FormsModule, HttpClientModule, RouterTestingModule.withRoutes(routes)],
|
||||
declarations: [TaskComponent, SpinnerComponent, DummyDetailComponent],
|
||||
declarations: [TaskProcessingComponent, SpinnerComponent, DummyDetailComponent],
|
||||
providers: [
|
||||
TaskService,
|
||||
HttpClient,
|
||||
|
|
@ -44,7 +44,7 @@ xdescribe('TaskComponent', () => {
|
|||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(TaskComponent);
|
||||
fixture = TestBed.createComponent(TaskProcessingComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
|
@ -11,11 +11,11 @@ import { take } from 'rxjs/operators';
|
|||
import { RequestInProgressService } from '../../../shared/services/request-in-progress/request-in-progress.service';
|
||||
|
||||
@Component({
|
||||
selector: 'taskana-task',
|
||||
templateUrl: './task.component.html',
|
||||
styleUrls: ['./task.component.scss']
|
||||
selector: 'taskana-task-processing',
|
||||
templateUrl: './task-processing.component.html',
|
||||
styleUrls: ['./task-processing.component.scss']
|
||||
})
|
||||
export class TaskComponent implements OnInit, OnDestroy {
|
||||
export class TaskProcessingComponent implements OnInit, OnDestroy {
|
||||
routeSubscription: Subscription;
|
||||
|
||||
regex = /\${(.*?)}/g;
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<div class="pull-right">
|
||||
<div class="dropdown btn-group">
|
||||
<button type="button" (click)="cancelClaimTask()" class="btn btn-default">
|
||||
<span title="Cancel claim and return to task detail" class="material-icons md-20 blue">arrow_back</span>
|
||||
</button>
|
||||
<button type="button" (click)="completeTask()" class="btn btn-default">
|
||||
<span title="Complete task and return to task list" class="material-icons md-20 blue">check</span>
|
||||
</button>
|
||||
<button type="button" data-toggle="dropdown" aria-expanded="true" class="btn btn-default dropdown-toggle">
|
||||
<span title="Transfer task to another workbasket"
|
||||
class="material-icons md-20 blue">transfer_within_a_station</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li *ngFor="let workbasket of workbaskets">
|
||||
<a class="dropdown-item" (click)="transferTask(workbasket)">
|
||||
<label>{{workbasket.name}}</label>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-header">
|
||||
<h4><b>{{task?.name}}</b></h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-body" *ngIf="task">
|
||||
<div class="row">
|
||||
<ng-form #TaskForm="ngForm">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="task-description" class="control-label">Description</label>
|
||||
<textarea class="form-control" disabled rows="5" id="task-description" placeholder="Description"
|
||||
[(ngModel)]="task.description" name="task.description"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="task-note" class="control-label">Note</label>
|
||||
<input type="text" disabled class="form-control" id="task-note" placeholder="Task has no Note"
|
||||
[(ngModel)]="task.note" name="task.note">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="task-due" class="control-label">Due Date</label>
|
||||
<input type="text" disabled class="form-control" id="task-due" placeholder="No deadline set"
|
||||
[(ngModel)]="task.due" name="task.due">
|
||||
</div>
|
||||
</div>
|
||||
</ng-form>
|
||||
</div>
|
||||
<div class="row">
|
||||
<iframe class="col-xs-12" *ngIf="link" [src]="link"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
iframe {
|
||||
height: calc(100vh - 290px);
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
import { MasterAndDetailComponent } from '../shared/components/master-and-detail/master-and-detail.component';
|
||||
import { TaskComponent } from './components/task/task.component';
|
||||
import { TaskProcessingComponent } from './components/task-processing/task-processing.component';
|
||||
import { TaskdetailsComponent } from './components/taskdetails/taskdetails.component';
|
||||
import { TaskMasterComponent } from './components/task-master/task-master.component';
|
||||
|
||||
|
|
@ -22,7 +22,7 @@ const routes: Routes = [
|
|||
},
|
||||
{
|
||||
path: 'task/:id',
|
||||
component: TaskComponent,
|
||||
component: TaskProcessingComponent,
|
||||
outlet: 'detail'
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ import { TaskdetailsComponent } from './components/taskdetails/taskdetails.compo
|
|||
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 { TaskProcessingComponent } from './components/task-processing/task-processing.component';
|
||||
import { TaskStatusDetailsComponent } from './components/task-status-details/task-status-details.component';
|
||||
import { TaskListComponent } from './components/task-list/task-list.component';
|
||||
|
||||
|
|
@ -61,7 +61,7 @@ const DECLARATIONS = [
|
|||
TaskInformationComponent,
|
||||
TaskAttributeValueComponent,
|
||||
TaskCustomFieldsComponent,
|
||||
TaskComponent,
|
||||
TaskProcessingComponent,
|
||||
TaskStatusDetailsComponent,
|
||||
TaskListComponent
|
||||
];
|
||||
|
|
|
|||
Loading…
Reference in New Issue