TSK-1613: Prevent scrolling in Workplace Task list

web/src/app/workplace/components/task-list-toolbar/task-list-toolbar.component.html

@@ -8,9 +8,9 @@
       <div class="task-list-toolbar__tab">
 
         <!-- BUTTON TO FURTHER FILTER OPTIONS -->
-        <button mat-stroked-button style="min-width: 1%" class="task-list-toolbar__button--secondary" matTooltip="Display more filter options" (click)="toolbarState=!toolbarState">
+        <button mat-stroked-button style="min-width: 1%" class="task-list-toolbar__button--secondary" matTooltip="Display more filter options" (click)="setFilterExpansion()">
-          <mat-icon *ngIf="!toolbarState">keyboard_arrow_down</mat-icon>
+          <mat-icon *ngIf="!(isFilterExpanded$ | async)">keyboard_arrow_down</mat-icon>
-          <mat-icon *ngIf="toolbarState">keyboard_arrow_up</mat-icon>
+          <mat-icon *ngIf="(isFilterExpanded$ | async)">keyboard_arrow_up</mat-icon>
         </button>
 
         <div class="task-list-toolbar__spacer"> </div>
@@ -59,9 +59,9 @@
 
         <!-- BUTTON TO FURTHER FILTER OPTIONS -->
         <button mat-stroked-button style="min-width: 1%" class="task-list-toolbar__button--secondary"
-                matTooltip="Display more filter options" (click)="toolbarState=!toolbarState">
+                matTooltip="Display more filter options" (click)="setFilterExpansion()">
-          <mat-icon *ngIf="!toolbarState">keyboard_arrow_down</mat-icon>
+          <mat-icon *ngIf="!(isFilterExpanded$ | async)">keyboard_arrow_down</mat-icon>
-          <mat-icon *ngIf="toolbarState">keyboard_arrow_up</mat-icon>
+          <mat-icon *ngIf="(isFilterExpanded$ | async)">keyboard_arrow_up</mat-icon>
         </button>
 
         <div class="task-list-toolbar__spacer"> </div>
@@ -94,7 +94,7 @@
   </mat-tab-group>
 
   <!-- FURTHER FILTER OPTIONS -->
-  <div *ngIf="toolbarState" class="task-list-toolbar__additional-filter">
+  <div *ngIf="(isFilterExpanded$ | async)" class="task-list-toolbar__additional-filter">
     <taskana-shared-task-filter> </taskana-shared-task-filter>
   </div>
 

web/src/app/workplace/components/task-list-toolbar/task-list-toolbar.component.ts

@@ -8,11 +8,13 @@ import { expandDown } from 'app/shared/animations/expand.animation';
 import { ActivatedRoute, Router } from '@angular/router';
 import { WorkplaceService } from 'app/workplace/services/workplace.service';
 import { TaskQueryFilterParameter } from '../../../shared/models/task-query-filter-parameter';
-import { Subject } from 'rxjs';
+import { Observable, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { TaskanaEngineService } from '../../../shared/services/taskana-engine/taskana-engine.service';
-import { Actions, ofActionCompleted, Store } from '@ngxs/store';
+import { Actions, ofActionCompleted, Select, Store } from '@ngxs/store';
 import { ClearTaskFilter, SetTaskFilter } from '../../../shared/store/filter-store/filter.actions';
+import { WorkplaceSelectors } from '../../../shared/store/workplace-store/workplace.selectors';
+import { SetFilterExpansion } from '../../../shared/store/workplace-store/workplace.actions';
 
 export enum Search {
   byWorkbasket = 'workbasket',
@@ -41,7 +43,6 @@ export class TaskListToolbarComponent implements OnInit {
   workbaskets: Workbasket[];
   currentBasket: Workbasket;
   workbasketSelected = false;
-  toolbarState = false;
   searched = false;
 
   search = Search;
@@ -49,6 +50,8 @@ export class TaskListToolbarComponent implements OnInit {
   activeTab: number = 0;
   filterInput = '';
 
+  @Select(WorkplaceSelectors.getFilterExpansion) isFilterExpanded$: Observable<boolean>;
+
   destroy$ = new Subject<void>();
 
   constructor(
@@ -130,6 +133,10 @@ export class TaskListToolbarComponent implements OnInit {
     }
   }
 
+  setFilterExpansion() {
+    this.store.dispatch(new SetFilterExpansion());
+  }
+
   onTabChange(search) {
     const tab = search.path[0].innerText;
     if (tab === 'Workbaskets') {
@@ -154,7 +161,7 @@ export class TaskListToolbarComponent implements OnInit {
   }
 
   searchBasket() {
-    this.toolbarState = false;
+    this.store.dispatch(new SetFilterExpansion(false));
     this.workbasketSelected = true;
     if (this.searchSelected === this.search.byWorkbasket && this.workbaskets) {
       this.workbaskets.forEach((workbasket) => {

web/src/app/workplace/components/task-master/task-master.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { Task } from 'app/workplace/models/task';
 import { TaskService } from 'app/workplace/services/task.service';
 import { Observable, Subject } from 'rxjs';
@@ -13,8 +13,10 @@ import { NotificationService } from '../../../shared/services/notifications/noti
 import { NOTIFICATION_TYPES } from '../../../shared/models/notifications';
 import { QueryPagingParameter } from '../../../shared/models/query-paging-parameter';
 import { TaskQueryFilterParameter } from '../../../shared/models/task-query-filter-parameter';
-import { Select } from '@ngxs/store';
+import { Select, Store } from '@ngxs/store';
 import { FilterSelectors } from '../../../shared/store/filter-store/filter.selectors';
+import { WorkplaceSelectors } from '../../../shared/store/workplace-store/workplace.selectors';
+import { CalculateNumberOfCards } from '../../../shared/store/workplace-store/workplace.actions';
 
 @Component({
   selector: 'taskana-task-master',
@@ -43,19 +45,23 @@ export class TaskMasterComponent implements OnInit, OnDestroy {
 
   destroy$ = new Subject();
 
-  @ViewChild('wbToolbar', { static: true })
-  private toolbarElement: ElementRef;
-
   @Select(FilterSelectors.getTaskFilter) filter$: Observable<TaskQueryFilterParameter>;
+  @Select(WorkplaceSelectors.getNumberOfCards) cards$: Observable<number>;
 
   constructor(
     private taskService: TaskService,
     private workplaceService: WorkplaceService,
     private notificationsService: NotificationService,
-    private orientationService: OrientationService
+    private orientationService: OrientationService,
+    private store: Store
   ) {}
 
   ngOnInit() {
+    this.cards$.pipe(takeUntil(this.destroy$)).subscribe((cards) => {
+      this.paging['page-size'] = cards;
+      this.getTasks();
+    });
+
     this.taskService.taskSelectedStream.pipe(takeUntil(this.destroy$)).subscribe((task: Task) => {
       this.selectedId = task ? task.taskId : '';
       if (!this.tasks) {
@@ -78,7 +84,7 @@ export class TaskMasterComponent implements OnInit, OnDestroy {
       .getOrientation()
       .pipe(takeUntil(this.destroy$))
       .subscribe(() => {
-        this.refreshWorkbasketList();
+        this.store.dispatch(new CalculateNumberOfCards());
       });
 
     this.workplaceService
@@ -115,22 +121,6 @@ export class TaskMasterComponent implements OnInit, OnDestroy {
     this.getTasks();
   }
 
-  private refreshWorkbasketList() {
-    this.calculateHeightCard();
-    this.getTasks();
-  }
-
-  private calculateHeightCard() {
-    if (this.toolbarElement) {
-      const toolbarSize = this.toolbarElement.nativeElement.offsetHeight;
-      const cardHeight = 90;
-      const unusedHeight = 180;
-      const totalHeight = window.innerHeight;
-      const cards = Math.round((totalHeight - (unusedHeight + toolbarSize)) / cardHeight);
-      this.paging['page-size'] = cards > 0 ? cards : 1;
-    }
-  }
-
   private getTasks(): void {
     this.requestInProgress = true;
 
@@ -144,7 +134,6 @@ export class TaskMasterComponent implements OnInit, OnDestroy {
       this.requestInProgress = false;
       this.tasks = [];
     } else {
-      this.calculateHeightCard();
       this.taskService
         .findTasksWithWorkbasket(this.filterBy, this.sort, this.paging)
         .pipe(take(1))