From 2d397369c5f069a6f6e0dd984d216dd3a9aeb292 Mon Sep 17 00:00:00 2001
From: Jose Ignacio Recuerda Cambil <ignaciorecuerda@users.noreply.github.com>
Date: Thu, 2 Aug 2018 17:44:24 +0200
Subject: [PATCH] TSK-661 - Filtering of distribution target selection does not
 work

---
 .../dual-list/dual-list.component.html              |  4 ++--
 .../dual-list/dual-list.component.ts                |  7 +++----
 web/src/app/shared/animations/expand.animation.ts   | 13 +++++++++++++
 3 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/web/src/app/administration/workbasket/details/distribution-targets/dual-list/dual-list.component.html b/web/src/app/administration/workbasket/details/distribution-targets/dual-list/dual-list.component.html
index cd977c293..9e2bcb592 100644
--- a/web/src/app/administration/workbasket/details/distribution-targets/dual-list/dual-list.component.html
+++ b/web/src/app/administration/workbasket/details/distribution-targets/dual-list/dual-list.component.html
@@ -15,7 +15,7 @@
 			</button>
 		</div>
 	</div>
-	<div [@toggleDown]="toolbarState" *ngIf="toolbarState" class="row">
+	<div [@toggleDownWithoutNgIf]="toolbarState" class="row">
 		<taskana-filter class="col-xs-12" (performFilter)="performAvailableFilter($event)"></taskana-filter>
 	</div>
 	<taskana-spinner [isRunning]="requestInProgress" positionClass="centered-spinner" class="floating"></taskana-spinner>
@@ -38,4 +38,4 @@
 			</li>
 		</ul>
 	</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/web/src/app/administration/workbasket/details/distribution-targets/dual-list/dual-list.component.ts b/web/src/app/administration/workbasket/details/distribution-targets/dual-list/dual-list.component.ts
index 206cb9939..e4e3326ac 100644
--- a/web/src/app/administration/workbasket/details/distribution-targets/dual-list/dual-list.component.ts
+++ b/web/src/app/administration/workbasket/details/distribution-targets/dual-list/dual-list.component.ts
@@ -2,17 +2,16 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { WorkbasketSummary } from 'app/models/workbasket-summary';
 import { FilterModel } from 'app/models/filter';
 import { Side } from '../distribution-targets.component';
-import { expandDown } from 'app/shared/animations/expand.animation';
+import { expandDownWithoutNgIf } from 'app/shared/animations/expand.animation';
 
 @Component({
 	selector: 'taskana-dual-list',
 	templateUrl: './dual-list.component.html',
 	styleUrls: ['./dual-list.component.scss'],
-	animations: [expandDown]
+	animations: [expandDownWithoutNgIf]
 })
 export class DualListComponent implements OnInit {
 
-
 	@Input() distributionTargets: Array<WorkbasketSummary>;
 	@Output() distributionTargetsChange = new EventEmitter<Array<WorkbasketSummary>>();
 	@Input() distributionTargetsSelected: Array<WorkbasketSummary>;
@@ -39,5 +38,5 @@ export class DualListComponent implements OnInit {
 
 	performAvailableFilter(filterModel: FilterModel) {
 		this.performDualListFilter.emit({ filterBy: filterModel, side: this.side });
-	}
+  }
 }
diff --git a/web/src/app/shared/animations/expand.animation.ts b/web/src/app/shared/animations/expand.animation.ts
index 888dfb7b1..b16eded5b 100644
--- a/web/src/app/shared/animations/expand.animation.ts
+++ b/web/src/app/shared/animations/expand.animation.ts
@@ -14,6 +14,19 @@ export const expandDown =
             style({ opacity: 0, height: '0px' })])))
     ]);
 
+export const expandDownWithoutNgIf =
+  trigger('toggleDownWithoutNgIf', [
+      state('true', style({ opacity: '1', display: 'block' })),
+      state('false', style({ opacity: '0', display: 'none' })),
+      transition('false => true', animate('300ms ease-in', keyframes([
+          style({ opacity: 0, height: '0px' }),
+          style({ opacity: 0.5, height: '50px' }),
+          style({ opacity: 1, height: '*' })]))),
+      transition('true => false', animate('300ms ease-out', keyframes([
+          style({ opacity: 1, height: '*' }),
+          style({ opacity: 0.5, height: '50px' }),
+          style({ opacity: 0, height: '0px' })])))
+  ]);
 
 export const expandRight = trigger('toggleRight', [
     transition('void => *', animate('300ms ease-in', keyframes([