TSK-509 use predefined animations

Use animations from animation.ts file instead of creating a new definition for each component.
This commit is contained in:
Martin Rojas Miguel Angel 2018-07-19 10:43:43 +02:00 committed by Holger Hagen
parent 6a122c5afd
commit b0325fdc41
9 changed files with 51 additions and 90 deletions

View File

@ -1,9 +1,8 @@
import { Component, OnInit, Input, OnDestroy, SimpleChanges, OnChanges } from '@angular/core';
import { Component, Input, OnDestroy, SimpleChanges, OnChanges } from '@angular/core';
import { Subscription } from 'rxjs';
import { Workbasket } from 'app/models/workbasket';
import { WorkbasketSummary } from 'app/models/workbasket-summary';
import { WorkbasketAccessItems } from 'app/models/workbasket-access-items';
import { WorkbasketSummaryResource } from 'app/models/workbasket-summary-resource';
import { WorkbasketDistributionTargetsResource } from 'app/models/workbasket-distribution-targets-resource';
import { ErrorModel } from 'app/models/modal-error';
@ -146,7 +145,6 @@ export class DistributionTargetsComponent implements OnChanges, OnDestroy {
}
performFilter(dualListFilter: any) {
dualListFilter.side === Side.RIGHT ? this.distributionTargetsRight = undefined : this.distributionTargetsLeft = undefined;
this.onRequest(dualListFilter.side, false);
this.workbasketFilterSubscription = this.workbasketService.getWorkBasketsSummary(true, undefined, undefined, undefined,

View File

@ -18,9 +18,7 @@
</div>
</div>
<div [@toggle]="toolbarState" *ngIf="toolbarState" class="row no-overflow">
<taskana-filter [allTypes]="filteringTypes" [filterParams]="filterParams"
[filterType]="filterType"
(performFilter)="filtering($event)"></taskana-filter>
<div [@toggleDown]="toolbarState" *ngIf="toolbarState" class="row no-overflow">
<taskana-filter (performFilter)="filtering($event)"></taskana-filter>
</div>
</li>

View File

@ -1,32 +1,18 @@
import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import {animate, keyframes, style, transition, trigger} from '@angular/animations';
import {ActivatedRoute, Router} from '@angular/router';
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import {SortingModel} from 'app/models/sorting';
import {FilterModel} from 'app/models/filter';
import {Subscription} from 'rxjs';
import {WorkbasketSummary} from 'app/models/workbasket-summary';
import { SortingModel } from 'app/models/sorting';
import { FilterModel } from 'app/models/filter';
import { Subscription } from 'rxjs';
import { WorkbasketSummary } from 'app/models/workbasket-summary';
import {ErrorModalService} from 'app/services/errorModal/error-modal.service';
import {RequestInProgressService} from 'app/services/requestInProgress/request-in-progress.service';
import {WorkbasketService} from 'app/services/workbasket/workbasket.service';
import {AlertService} from 'app/services/alert/alert.service';
import {TaskanaType} from 'app/models/taskana-type';
import { WorkbasketService } from 'app/services/workbasket/workbasket.service';
import { TaskanaType } from 'app/models/taskana-type';
import { expandDown } from 'app/shared/animations/expand.animation';
@Component({
selector: 'taskana-workbasket-list-toolbar',
animations: [
trigger('toggle', [
transition('void => *', animate('300ms ease-in', keyframes([
style({height: '0px'}),
style({height: '50px'}),
style({height: '*'})]))),
transition('* => void', animate('300ms ease-out', keyframes([
style({height: '*'}),
style({height: '50px'}),
style({height: '0px'})])))
]
)],
animations: [expandDown],
templateUrl: './workbasket-list-toolbar.component.html',
styleUrls: ['./workbasket-list-toolbar.component.scss']
})
@ -49,10 +35,7 @@ export class WorkbasketListToolbarComponent implements OnInit {
constructor(
private workbasketService: WorkbasketService,
private route: ActivatedRoute,
private router: Router,
private errorModalService: ErrorModalService,
private requestInProgressService: RequestInProgressService,
private alertService: AlertService) {
private router: Router) {
}
ngOnInit() {
@ -68,7 +51,7 @@ export class WorkbasketListToolbarComponent implements OnInit {
addWorkbasket() {
this.workbasketService.selectWorkBasket(undefined);
this.router.navigate([{outlets: {detail: ['new-workbasket']}}], {relativeTo: this.route});
this.router.navigate([{ outlets: { detail: ['new-workbasket'] } }], { relativeTo: this.route });
}
importEvent() {

View File

@ -10,7 +10,7 @@
<span>Roles</span>
</button>
</div>
<div class="white pull-right roles col-xs-12" [@toggle]="showRoles" *ngIf="showRoles">
<div class="white pull-right roles col-xs-12" [@toggleDown]="showRoles" *ngIf="showRoles">
<span><i>{{roles}}</i></span>
</div>
</div>

View File

@ -1,24 +1,13 @@
import { Component, OnInit } from '@angular/core';
import { TaskanaEngineService } from 'app/services/taskana-engine/taskana-engine.service';
import { UserInfoModel } from 'app/models/user-info';
import { trigger, transition, animate, keyframes, style } from '@angular/animations';
import { expandDown } from '../../shared/animations/expand.animation';
@Component({
selector: 'taskana-user-information',
templateUrl: './user-information.component.html',
styleUrls: ['./user-information.component.scss'],
animations: [
trigger('toggle', [
transition('void => *', animate('300ms ease-in', keyframes([
style({ opacity: 0, height: '0px' }),
style({ opacity: 1, height: '10px' }),
style({ opacity: 1, height: '*' })]))),
transition('* => void', animate('300ms ease-out', keyframes([
style({ opacity: 1, height: '*' }),
style({ opacity: 0, height: '10px' }),
style({ opacity: 0, height: '0px' })])))
]
)],
animations: [expandDown],
})
export class UserInformationComponent implements OnInit {

View File

@ -1,7 +1,7 @@
import {AfterContentInit, Component, EventEmitter, Input, Output, OnInit} from '@angular/core';
import {ICONTYPES} from 'app/models/type';
import {FilterModel} from 'app/models/filter';
import {TaskanaType} from 'app/models/taskana-type';
import { Component, EventEmitter, Input, Output, OnInit } from '@angular/core';
import { ICONTYPES } from 'app/models/type';
import { FilterModel } from 'app/models/filter';
import { TaskanaType } from 'app/models/taskana-type';
@Component({
selector: 'taskana-filter',
@ -10,11 +10,12 @@ import {TaskanaType} from 'app/models/taskana-type';
})
export class FilterComponent implements OnInit {
@Input() allTypes: Map<string, string>;
@Input() allTypes: Map<string, string> = new Map([['ALL', 'All'], ['PERSONAL', 'Personal'], ['GROUP', 'Group'],
['CLEARANCE', 'Clearance'], ['TOPIC', 'Topic']]);
@Input() filterParams: any;
@Input() filterParams = { name: '', key: '', type: '', description: '', owner: '' };
@Input() filterType: TaskanaType;
@Input() filterType = TaskanaType.WORKBASKETS;
@Output() performFilter = new EventEmitter<FilterModel>();

View File

@ -8,6 +8,9 @@ import { RouterModule } from '@angular/router';
import { TreeModule } from 'angular-tree-component';
import { TypeaheadModule } from 'ngx-bootstrap';
/**
* Components
*/
import { GeneralMessageModalComponent } from 'app/shared/general-message-modal/general-message-modal.component';
import { SpinnerComponent } from 'app/shared/spinner/spinner.component';
import { AlertComponent } from 'app/shared/alert/alert.component';
@ -44,7 +47,7 @@ const MODULES = [
AngularSvgIconModule,
HttpClientModule,
RouterModule,
TreeModule,
TreeModule
];
const DECLARATIONS = [

View File

@ -25,7 +25,7 @@
</div>
</div>
<div [@toggle]="toolbarState" *ngIf="toolbarState" class="row no-overflow">
<div [@toggleDown]="toolbarState" *ngIf="toolbarState" class="row no-overflow">
<taskana-filter
[filterParams]="filterParams"
[filterType]="filterType"

View File

@ -1,27 +1,16 @@
import {Component, EventEmitter, OnInit, Output} from '@angular/core';
import {animate, keyframes, style, transition, trigger} from '@angular/animations';
import {Task} from 'app/workplace/models/task';
import {Workbasket} from 'app/models/workbasket';
import {TaskService} from 'app/workplace/services/task.service';
import {WorkbasketService} from 'app/services/workbasket/workbasket.service';
import {SortingModel} from 'app/models/sorting';
import {FilterModel} from 'app/models/filter';
import {TaskanaType} from 'app/models/taskana-type';
import { Component, EventEmitter, OnInit, Output } from '@angular/core';
import { Task } from 'app/workplace/models/task';
import { Workbasket } from 'app/models/workbasket';
import { TaskService } from 'app/workplace/services/task.service';
import { WorkbasketService } from 'app/services/workbasket/workbasket.service';
import { SortingModel } from 'app/models/sorting';
import { FilterModel } from 'app/models/filter';
import { TaskanaType } from 'app/models/taskana-type';
import { expandDown } from 'app/shared/animations/expand.animation';
@Component({
selector: 'taskana-tasklist-toolbar',
animations: [
trigger('toggle', [
transition('void => *', animate('300ms ease-in', keyframes([
style({height: '0px'}),
style({height: '50px'}),
style({height: '*'})]))),
transition('* => void', animate('300ms ease-out', keyframes([
style({height: '*'}),
style({height: '50px'}),
style({height: '0px'})])))
]
)],
animations: [expandDown],
templateUrl: './tasklist-toolbar.component.html',
styleUrls: ['./tasklist-toolbar.component.scss']
})
@ -33,7 +22,7 @@ export class TaskListToolbarComponent implements OnInit {
@Output() performFilter = new EventEmitter<FilterModel>();
sortingFields = new Map([['name', 'Name'], ['priority', 'Priority'], ['due', 'Due'], ['planned', 'Planned']]);
filterParams = {name: '', key: '', owner: '', priority: '', state: ''};
filterParams = { name: '', key: '', owner: '', priority: '', state: '' };
tasks: Task[] = [];
workbasketNames: string[] = [];
@ -46,7 +35,7 @@ export class TaskListToolbarComponent implements OnInit {
filterType = TaskanaType.TASKS;
constructor(private taskService: TaskService,
private workbasketService: WorkbasketService) {
private workbasketService: WorkbasketService) {
}
ngOnInit() {
@ -83,14 +72,14 @@ export class TaskListToolbarComponent implements OnInit {
getTasks(workbasketId: string) {
this.taskService.findTasksWithWorkbasket(workbasketId, undefined, undefined,
undefined, undefined, undefined, undefined).subscribe(
tasks => {
this.tasks.length = 0;
if (!tasks || tasks._embedded === undefined) {
return;
}
this.tasks = tasks._embedded.tasks;
this.tasksChanged.emit(this.tasks);
});
tasks => {
this.tasks.length = 0;
if (!tasks || tasks._embedded === undefined) {
return;
}
this.tasks = tasks._embedded.tasks;
this.tasksChanged.emit(this.tasks);
});
}
sorting(sort: SortingModel) {