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

TSK-1613: Prevent scrolling in Workplace Task list

This commit is contained in:
Sofie Hofmann 2021-04-15 10:48:50 +02:00
parent 0174191245
commit 3184e3dd34
3 changed files with 31 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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">
<mat-icon *ngIf="!toolbarState">keyboard_arrow_down</mat-icon>
<mat-icon *ngIf="toolbarState">keyboard_arrow_up</mat-icon>
<button mat-stroked-button style="min-width: 1%" class="task-list-toolbar__button--secondary" matTooltip="Display more filter options" (click)="setFilterExpansion()">
<mat-icon *ngIf="!(isFilterExpanded$ | async)">keyboard_arrow_down</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">
<mat-icon *ngIf="!toolbarState">keyboard_arrow_down</mat-icon>
<mat-icon *ngIf="toolbarState">keyboard_arrow_up</mat-icon>
matTooltip="Display more filter options" (click)="setFilterExpansion()">
<mat-icon *ngIf="!(isFilterExpanded$ | async)">keyboard_arrow_down</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>

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

@ -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) => {

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

@ -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))