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

TSK-1805: Made loading more obvious 

Loading bar is now a more intense color and is larger
Also made sure the loading bar is shown when loading components
This commit is contained in:
Tristan 2022-02-15 15:56:15 +01:00 committed by Tristan2357
parent f1ae2afccd
commit df40c6dad9
22 changed files with 167 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/src/app/administration/components/tree/tree.component.ts
View File

@ -31,6 +31,7 @@ import {
} from '../../../shared/store/classification-store/classification.actions';
import { ClassificationTreeService } from '../../services/classification-tree.service';
import { Pair } from '../../../shared/models/pair';
import { RequestInProgressService } from '../../../shared/services/request-in-progress/request-in-progress.service';
@Component({
selector: 'taskana-administration-tree',
@ -83,7 +84,8 @@ export class TaskanaTreeComponent implements OnInit, AfterViewChecked, OnDestroy
private location: Location,
private store: Store,
private notificationsService: NotificationService,
private classificationTreeService: ClassificationTreeService
private classificationTreeService: ClassificationTreeService,
private requestInProgressService: RequestInProgressService
) {}
@HostListener('document:click', ['$event'])
@ -104,6 +106,7 @@ export class TaskanaTreeComponent implements OnInit, AfterViewChecked, OnDestroy
.subscribe(([selectedClassificationId, treeNodes]) => {
this.treeNodes = treeNodes;
this.selectNodeId = typeof selectedClassificationId !== 'undefined' ? selectedClassificationId : undefined;
this.requestInProgressService.setRequestInProgress(false);
if (typeof this.tree.treeModel.getActiveNode() !== 'undefined') {
if (this.tree.treeModel.getActiveNode().data.classificationId !== this.selectNodeId) {
// wait for angular's two-way binding to convert the treeNodes to the internal tree structure.
@ -146,6 +149,7 @@ export class TaskanaTreeComponent implements OnInit, AfterViewChecked, OnDestroy
onActivate(treeNode: any) {
const id = treeNode.node.data.classificationId;
this.selectNodeId = id;
this.requestInProgressService.setRequestInProgress(true);
this.store.dispatch(new SelectClassification(id));
this.location.go(this.location.path().replace(/(classifications).*/g, `classifications/(detail:${id})`));
}

8
web/src/app/administration/components/workbasket-distribution-targets-list/workbasket-distribution-targets-list.component.html
View File

@ -34,7 +34,8 @@
isExpanded="true"></taskana-shared-workbasket-filter>
<!-- EMPTY LIST -->
<div *ngIf="distributionTargets?.length == 0" class="distribution-targets-list__empty-list">
<div *ngIf="distributionTargets?.length == 0 && requestInProgress < 0"
class="distribution-targets-list__empty-list">
<!-- AVAILABLE SIDE -->
<div *ngIf="side === 0" style="padding: 0 16px;">
@ -48,14 +49,17 @@
</div>
<!-- SPINNER -->
<taskana-shared-spinner [isRunning]="requestInProgress >= 0"></taskana-shared-spinner>
<!-- WORKBASKET LIST -->
<mat-selection-list #workbasket [multiple]="true">
<cdk-virtual-scroll-viewport #scroller
class="{{toolbarState? 'distribution-targets-list__list--with-filter' : 'distribution-targets-list__list--no-filter'}}"
itemSize="90">
<mat-list-option
*cdkVirtualFor="let workbasket of distributionTargets| orderBy: ['name']; templateCacheSize: 0"
(click)="updateSelectAll(!workbasket.selected) && (workbasket.selected = !workbasket.selected)"
*cdkVirtualFor="let workbasket of distributionTargets| orderBy: ['name']; templateCacheSize: 0"
[selected]="workbasket.selected"
[value]="workbasket.workbasketId"
class="workbasket-distribution-targets__workbaskets-item">

9
web/src/app/administration/components/workbasket-distribution-targets-list/workbasket-distribution-targets-list.component.ts
View File

@ -62,6 +62,7 @@ export class WorkbasketDistributionTargetsListComponent
@ViewChild('workbasket') distributionTargetsList: MatSelectionList;
@ViewChild('scroller') workbasketList: CdkVirtualScrollViewport;
requestInProgress: number;
private destroy$ = new Subject<void>();
private filter: WorkbasketQueryFilterParameter;
private allSelectedDiff = 0;
@ -69,6 +70,7 @@ export class WorkbasketDistributionTargetsListComponent
constructor(private changeDetector: ChangeDetectorRef, private store: Store) {}
ngOnInit(): void {
this.requestInProgress = 2;
if (this.side === Side.AVAILABLE) {
this.availableDistributionTargets$.pipe(takeUntil(this.destroy$)).subscribe((wbs) => this.assignWbs(wbs));
this.availableDistributionTargetsFilter$.pipe(takeUntil(this.destroy$)).subscribe((filter) => {
@ -79,6 +81,7 @@ export class WorkbasketDistributionTargetsListComponent
this.filter = filter;
this.store.dispatch(new FetchAvailableDistributionTargets(true, this.filter));
this.selectAll(false);
this.requestInProgress--;
});
} else {
this.workbasketDistributionTargets$.pipe().subscribe((wbs) => this.assignWbs(wbs));
@ -90,6 +93,7 @@ export class WorkbasketDistributionTargetsListComponent
this.filter = filter;
this.applyFilter();
this.selectAll(false);
this.requestInProgress--;
});
}
this.transferDistributionTargetObservable.subscribe((targetSide) => {
@ -164,8 +168,11 @@ export class WorkbasketDistributionTargetsListComponent
}
private assignWbs(wbs: WorkbasketSummary[]) {
this.distributionTargets = wbs.map((wb) => ({ ...wb, selected: this.allSelected }));
this.distributionTargets = wbs.map((wb) => {
return { ...wb, selected: this.allSelected };
});
this.distributionTargetsClone = this.distributionTargets;
this.requestInProgress--;
}
private applyFilter() {

17
web/src/app/app.component.html
View File

@ -1,19 +1,21 @@
<mat-sidenav-container class="sidenav">
<mat-sidenav #sidenav mode="over" class="sidenav__drawer" [autoFocus]="false">
<mat-sidenav #sidenav [autoFocus]="false" class="sidenav__drawer" mode="over">
<div class="sidenav__drawer__container">
<div class="sidenav__drawer__container-menu">
<button mat-icon-button class="navbar_button-toggle" (click)="toggleSidenav()">
<button (click)="toggleSidenav()" class="navbar_button-toggle" mat-icon-button>
<mat-icon>menu</mat-icon>
</button>
</div>
<div class="sidenav__drawer__container-logout">
<button mat-icon-button data-toggle="tooltip" title="Logout" (click)="logout()" aria-expanded="true"
aria-controls="logout">
<button (click)="logout()" aria-controls="logout" aria-expanded="true" data-toggle="tooltip"
mat-icon-button
title="Logout">
<mat-icon>exit_to_app</mat-icon>
</button>
</div>
</div>
<taskana-shared-user-information class="sidenav__drawer-user-info"></taskana-shared-user-information>
<taskana-shared-user-information
class="sidenav__drawer-user-info"></taskana-shared-user-information>
<taskana-sidenav-list></taskana-sidenav-list>
<div class="sidenav__drawer-version">
<p> Taskana version: {{version}} </p>
@ -24,7 +26,10 @@
<div (window:resize)="onResize()">
<div class="taskana-main">
<div class="taskana-main__progress-bar">
<mat-progress-bar *ngIf="requestInProgress" mode="indeterminate"></mat-progress-bar>
<mat-progress-bar *ngIf="requestInProgress" color="accent"
mode="indeterminate"></mat-progress-bar>
<mat-progress-bar *ngIf="requestInProgress" color="accent"
mode="indeterminate"></mat-progress-bar>
</div>
<router-outlet></router-outlet>
</div>

9
web/src/app/app.component.scss
View File

@ -17,9 +17,11 @@
width: 350px;
background-color: $dark-green;
}
.mat-drawer-content {
overflow: hidden !important;
}
.sidenav__drawer-list-item {
margin-left: 30px;
}
@ -60,8 +62,9 @@
}
.taskana-main__progress-bar {
height: 4px;
height: 8px;
background-color: $light-grey;
margin-bottom: 2px;
}
::ng-deep .mat-drawer-inner-container {
@ -75,3 +78,7 @@
::ng-deep mat-tooltip-component {
word-break: break-word;
}
mat-progress-bar {
height: 3px;
}

18
web/src/app/monitor/components/classification-report/classification-report.component.ts
View File

@ -3,6 +3,7 @@ import { MonitorService } from 'app/monitor/services/monitor.service';
import { ChartData } from 'app/monitor/models/chart-data';
import { ReportData } from '../../models/report-data';
import { ChartColorsDefinition } from '../../models/chart-colors';
import { RequestInProgressService } from '../../../shared/services/request-in-progress/request-in-progress.service';
@Component({
selector: 'taskana-monitor-classification-report',
@ -22,12 +23,19 @@ export class ClassificationReportComponent implements OnInit {
lineChartColors = ChartColorsDefinition.getColors();
constructor(private restConnectorService: MonitorService) {}
constructor(
private restConnectorService: MonitorService,
private requestInProgressService: RequestInProgressService
) {}
async ngOnInit() {
this.reportData = await this.restConnectorService.getClassificationTasksReport().toPromise();
this.lineChartData = this.restConnectorService.getChartData(this.reportData);
this.lineChartLabels = this.reportData.meta.header;
ngOnInit() {
this.requestInProgressService.setRequestInProgress(true);
this.restConnectorService.getClassificationTasksReport().subscribe((report) => {
this.reportData = report;
this.lineChartData = this.restConnectorService.getChartData(this.reportData);
this.lineChartLabels = this.reportData.meta.header;
this.requestInProgressService.setRequestInProgress(false);
});
}
getTitle(): string {

4
web/src/app/monitor/components/monitor/monitor.component.ts
View File

@ -9,10 +9,6 @@ import { Router } from '@angular/router';
export class MonitorComponent implements OnInit {
selectedTab = '';
constructor(public router: Router) {
this.router.navigate(['/taskana/monitor/tasks-priority']);
}
ngOnInit(): void {
this.selectedTab = 'tasks-priority';
}

2
web/src/app/monitor/components/task-priority-report/task-priority-report.component.spec.ts
View File

@ -11,6 +11,7 @@ import { settingsStateMock } from '../../../shared/store/mock-data/mock-store';
import { SettingsState } from '../../../shared/store/settings-store/settings.state';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { MatDividerModule } from '@angular/material/divider';
import { RequestInProgressService } from '../../../shared/services/request-in-progress/request-in-progress.service';
@Pipe({ name: 'germanTimeFormat' })
class GermanTimeFormatPipe implements PipeTransform {
@ -48,6 +49,7 @@ describe('TaskPriorityReportComponent', () => {
imports: [NgxsModule.forRoot([SettingsState]), MatTableModule, HttpClientTestingModule, MatDividerModule],
declarations: [TaskPriorityReportComponent, GermanTimeFormatPipe, CanvasStub, TaskPriorityReportFilterStub],
providers: [
RequestInProgressService,
{ provide: MonitorService, useValue: monitorServiceSpy },
{ provide: NotificationService, useValue: notificationServiceSpy }
]

9
web/src/app/monitor/components/task-priority-report/task-priority-report.component.ts
View File

@ -1,7 +1,6 @@
import { AfterViewChecked, Component, OnDestroy, OnInit } from '@angular/core';
import { ReportData } from '../../models/report-data';
import { MonitorService } from '../../services/monitor.service';
import { NotificationService } from '../../../shared/services/notifications/notification.service';
import { WorkbasketType } from '../../../shared/models/workbasket-type';
import { Select } from '@ngxs/store';
import { Observable, Subject } from 'rxjs';
@ -9,6 +8,7 @@ import { SettingsSelectors } from '../../../shared/store/settings-store/settings
import { Settings } from '../../../settings/models/settings';
import { mergeMap, take, takeUntil } from 'rxjs/operators';
import { SettingMembers } from '../../../settings/components/Settings/expected-members';
import { RequestInProgressService } from '../../../shared/services/request-in-progress/request-in-progress.service';
@Component({
selector: 'taskana-monitor-task-priority-report',
@ -34,9 +34,10 @@ export class TaskPriorityReportComponent implements OnInit, AfterViewChecked, On
@Select(SettingsSelectors.getSettings)
settings$: Observable<Settings>;
constructor(private monitorService: MonitorService, private notificationService: NotificationService) {}
constructor(private monitorService: MonitorService, private requestInProgressService: RequestInProgressService) {}
ngOnInit() {
this.requestInProgressService.setRequestInProgress(true);
this.settings$
.pipe(
takeUntil(this.destroy$),
@ -53,6 +54,7 @@ export class TaskPriorityReportComponent implements OnInit, AfterViewChecked, On
)
.subscribe((reportData) => {
this.setValuesFromReportData(reportData);
this.requestInProgressService.setRequestInProgress(false);
});
}
@ -114,13 +116,14 @@ export class TaskPriorityReportComponent implements OnInit, AfterViewChecked, On
}
applyFilter(filter: {}) {
this.requestInProgressService.setRequestInProgress(true);
this.monitorService
.getTasksByPriorityReport([WorkbasketType.TOPIC], this.priority, filter)
.pipe(take(1))
.subscribe((reportData) => {
this.colorShouldChange = true;
this.setValuesFromReportData(reportData);
return;
this.requestInProgressService.setRequestInProgress(false);
});
}

25
web/src/app/monitor/components/task-report/task-report.component.ts
View File

@ -1,6 +1,9 @@
import { Component, OnInit } from '@angular/core';
import { ReportData } from 'app/monitor/models/report-data';
import { MonitorService } from '../../services/monitor.service';
import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';
import { RequestInProgressService } from 'app/shared/services/request-in-progress/request-in-progress.service';
@Component({
selector: 'taskana-monitor-task-report',
@ -12,15 +15,23 @@ export class TaskReportComponent implements OnInit {
pieChartData: number[] = [];
pieChartType = 'pie';
reportData: ReportData;
private destroy$ = new Subject<void>();
constructor(private restConnectorService: MonitorService) {}
constructor(private monitorService: MonitorService, private requestInProgressService: RequestInProgressService) {}
async ngOnInit() {
this.reportData = await this.restConnectorService.getTaskStatusReport().toPromise();
this.pieChartLabels = this.reportData.meta.header;
this.reportData.sumRow[0].cells.forEach((c) => {
this.pieChartData.push(c);
});
ngOnInit() {
this.requestInProgressService.setRequestInProgress(true);
this.monitorService
.getTaskStatusReport()
.pipe(takeUntil(this.destroy$))
.subscribe((report) => {
this.reportData = report;
this.pieChartLabels = this.reportData.meta.header;
this.reportData.sumRow[0].cells.forEach((cell) => {
this.pieChartData.push(cell);
});
this.requestInProgressService.setRequestInProgress(false);
});
}
getTitle(): string {

8
web/src/app/monitor/components/timestamp-report/timestamp-report.component.ts
View File

@ -1,6 +1,7 @@
import { Component, OnInit } from '@angular/core';
import { ReportData } from '../../models/report-data';
import { MonitorService } from '../../services/monitor.service';
import { RequestInProgressService } from '../../../shared/services/request-in-progress/request-in-progress.service';
@Component({
selector: 'taskana-monitor-timestamp-report',
@ -10,11 +11,16 @@ import { MonitorService } from '../../services/monitor.service';
export class TimestampReportComponent implements OnInit {
reportData: ReportData;
constructor(private restConnectorService: MonitorService) {}
constructor(
private restConnectorService: MonitorService,
private requestInProgressService: RequestInProgressService
) {}
ngOnInit() {
this.requestInProgressService.setRequestInProgress(true);
this.restConnectorService.getDailyEntryExitReport().subscribe((data: ReportData) => {
this.reportData = data;
this.requestInProgressService.setRequestInProgress(false);
});
}
}

18
web/src/app/monitor/components/workbasket-report-due-date/workbasket-report-due-date.component.ts
View File

@ -4,6 +4,7 @@ import { ChartData } from '../../models/chart-data';
import { ChartColorsDefinition } from '../../models/chart-colors';
import { MonitorService } from '../../services/monitor.service';
import { MetaInfoData } from '../../models/meta-info-data';
import { RequestInProgressService } from '../../../shared/services/request-in-progress/request-in-progress.service';
@Component({
selector: 'taskana-monitor-workbasket-report-due-date',
@ -26,12 +27,19 @@ export class WorkbasketReportDueDateComponent implements OnInit {
lineChartColors = ChartColorsDefinition.getColors();
constructor(private restConnectorService: MonitorService) {}
constructor(
private restConnectorService: MonitorService,
private requestInProgressService: RequestInProgressService
) {}
async ngOnInit() {
this.reportData = await this.restConnectorService.getWorkbasketStatisticsQueryingByDueDate().toPromise();
this.metaInformation.emit(this.reportData.meta);
this.lineChartLabels = this.reportData.meta.header;
this.lineChartData = this.restConnectorService.getChartData(this.reportData);
this.requestInProgressService.setRequestInProgress(true);
this.restConnectorService.getWorkbasketStatisticsQueryingByDueDate().subscribe((report) => {
this.reportData = report;
this.metaInformation.emit(this.reportData.meta);
this.lineChartLabels = this.reportData.meta.header;
this.lineChartData = this.restConnectorService.getChartData(this.reportData);
this.requestInProgressService.setRequestInProgress(false);
});
}
}

20
web/src/app/monitor/components/workbasket-report-planned-date/workbasket-report-planned-date.component.ts
View File

@ -4,6 +4,7 @@ import { ChartData } from '../../models/chart-data';
import { ChartColorsDefinition } from '../../models/chart-colors';
import { MonitorService } from '../../services/monitor.service';
import { MetaInfoData } from '../../models/meta-info-data';
import { RequestInProgressService } from '../../../shared/services/request-in-progress/request-in-progress.service';
@Component({
selector: 'taskana-monitor-workbasket-report-planned-date',
@ -27,12 +28,19 @@ export class WorkbasketReportPlannedDateComponent implements OnInit {
lineChartColors = ChartColorsDefinition.getColors();
constructor(private restConnectorService: MonitorService) {}
constructor(
private restConnectorService: MonitorService,
private requestInProgressService: RequestInProgressService
) {}
async ngOnInit() {
this.reportData = await this.restConnectorService.getWorkbasketStatisticsQueryingByPlannedDate().toPromise();
this.metaInformation.emit(this.reportData.meta);
this.lineChartLabels = this.reportData.meta.header;
this.lineChartData = this.restConnectorService.getChartData(this.reportData);
ngOnInit() {
this.requestInProgressService.setRequestInProgress(true);
this.restConnectorService.getWorkbasketStatisticsQueryingByPlannedDate().subscribe((report) => {
this.reportData = report;
this.metaInformation.emit(this.reportData.meta);
this.lineChartLabels = this.reportData.meta.header;
this.lineChartData = this.restConnectorService.getChartData(this.reportData);
this.requestInProgressService.setRequestInProgress(false);
});
}
}

4
web/src/app/monitor/monitor-routing.module.ts
View File

@ -1,5 +1,5 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { RouterModule, Routes } from '@angular/router';
import { MonitorComponent } from './components/monitor/monitor.component';
import { TaskReportComponent } from './components/task-report/task-report.component';
import { WorkbasketReportComponent } from './components/workbasket-report/workbasket-report.component';
@ -36,7 +36,7 @@ const routes: Routes = [
},
{
path: '',
redirectTo: '',
redirectTo: 'tasks-priority',
pathMatch: 'full'
},
{

2
web/src/app/settings/components/Settings/settings.component.scss
View File

@ -2,10 +2,10 @@
.settings {
padding: 8px 32px;
overflow-y: scroll;
&__content {
height: calc(100vh - 116px);
overflow-y: scroll;
padding: 4px;
}

9
web/src/app/settings/components/Settings/settings.component.spec.ts
View File

@ -14,6 +14,7 @@ import { SettingsComponent } from './settings.component';
import { settingsStateMock } from '../../../shared/store/mock-data/mock-store';
import { SetSettings } from '../../../shared/store/settings-store/settings.actions';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { RequestInProgressService } from '../../../shared/services/request-in-progress/request-in-progress.service';
const notificationServiceSpy: Partial<NotificationService> = {
showError: jest.fn(),
@ -42,7 +43,13 @@ describe('SettingsComponent', () => {
BrowserAnimationsModule
],
declarations: [SettingsComponent],
providers: [{ provide: NotificationService, useValue: notificationServiceSpy }]
providers: [
RequestInProgressService,
{
provide: NotificationService,
useValue: notificationServiceSpy
}
]
}).compileComponents();
fixture = TestBed.createComponent(SettingsComponent);

8
web/src/app/settings/components/Settings/settings.component.ts
View File

@ -7,6 +7,7 @@ import { SetSettings } from '../../../shared/store/settings-store/settings.actio
import { SettingsSelectors } from '../../../shared/store/settings-store/settings.selectors';
import { takeUntil } from 'rxjs/operators';
import { validateSettings } from './settings.validators';
import { RequestInProgressService } from '../../../shared/services/request-in-progress/request-in-progress.service';
@Component({
selector: 'taskana-administration-settings',
@ -22,10 +23,15 @@ export class SettingsComponent implements OnInit, OnDestroy {
@Select(SettingsSelectors.getSettings) settings$: Observable<Settings>;
constructor(private store: Store, private notificationService: NotificationService) {}
constructor(
private store: Store,
private notificationService: NotificationService,
private requestInProgressService: RequestInProgressService
) {}
ngOnInit() {
this.settings$.pipe(takeUntil(this.destroy$)).subscribe((settings) => {
this.requestInProgressService.setRequestInProgress(false);
this.settings = this.deepCopy(settings);
this.oldSettings = this.deepCopy(settings);
});

24
web/src/app/shared/components/sidenav-list/sidenav-list.component.html
View File

@ -1,40 +1,38 @@
<mat-nav-list class="navlist">
<a (click)="toggleSidenav()" *ngIf="administrationAccess" [routerLinkActive]="['active']"
<a (click)="toggleSidenav(administrationsUrl)" *ngIf="administrationAccess" [routerLinkActive]="['active']"
[routerLink]=[administrationsUrl] class="navlist__item navlist__admin" mat-list-item>Administration</a>
<div class="navlist__admin-item">
<a (click)="toggleSidenav()" *ngIf="administrationAccess" [routerLinkActive]="['active__sub']"
<a (click)="toggleSidenav(workbasketsUrl)" *ngIf="administrationAccess" [routerLinkActive]="['active__sub']"
[routerLink]=[workbasketsUrl] class="navlist__item navlist__admin-workbaskets"
mat-list-item>Workbaskets</a>
<a (click)="toggleSidenav()" *ngIf="administrationAccess" [routerLinkActive]="['active__sub']"
<a (click)="toggleSidenav(classificationUrl)" *ngIf="administrationAccess" [routerLinkActive]="['active__sub']"
[routerLink]=[classificationUrl] class="navlist__item navlist__admin-classifications"
mat-list-item>Classifications</a>
<a (click)="toggleSidenav()" *ngIf="administrationAccess" [routerLinkActive]="['active__sub']"
<a (click)="toggleSidenav(accessUrl)" *ngIf="administrationAccess" [routerLinkActive]="['active__sub']"
[routerLink]=[accessUrl] class="navlist__item navlist__admin-access-items" mat-list-item>Access
Items</a>
<a (click)="toggleSidenav()" *ngIf="(routingAccess)" [routerLinkActive]="['active__sub']"
<a (click)="toggleSidenav(routingUrl)" *ngIf="(routingAccess)" [routerLinkActive]="['active__sub']"
[routerLink]=[routingUrl] class="navlist__item navlist__admin-task-routing" mat-list-item>Task
Routing</a>
</div>
<a (click)="toggleSidenav()" *ngIf="monitorAccess" [routerLinkActive]="['active']"
<a (click)="toggleSidenav(monitorUrl)" *ngIf="monitorAccess" [routerLinkActive]="['active']"
[routerLink]=[monitorUrl]
class="navlist__item navlist__monitor" mat-list-item>Monitor</a>
<a (click)="toggleSidenav()" *ngIf="workplaceAccess" [routerLinkActive]="['active']"
<a (click)="toggleSidenav(workplaceUrl)" *ngIf="workplaceAccess" [routerLinkActive]="['active']"
[routerLink]=[workplaceUrl] class="navlist__item navlist__workplace"
mat-list-item>Workplace</a>
<div class="navlist__admin-item">
<a (click)="toggleSidenav()" *ngIf="workplaceAccess"
[queryParams]="{component: 'workbaskets'}" [routerLinkActive]="['active__sub']"
<a (click)="toggleSidenav(workplaceUrl)" *ngIf="workplaceAccess" [queryParams]="{component: 'workbaskets'}" [routerLinkActive]="['active__sub']"
[routerLink]=[workplaceUrl] class="navlist__item navlist__workplace--workbaskets"
mat-list-item>Workbaskets</a>
<a (click)="toggleSidenav()" *ngIf="workplaceAccess"
[queryParams]="{component: 'task-search'}" [routerLinkActive]="['active__sub']"
<a (click)="toggleSidenav(workplaceUrl)" *ngIf="workplaceAccess" [queryParams]="{component: 'task-search'}" [routerLinkActive]="['active__sub']"
[routerLink]=[workplaceUrl] class="navlist__item navlist__workplace--task-search"
mat-list-item>Task Search</a>
</div>
<a (click)="toggleSidenav()" *ngIf="historyAccess" [routerLinkActive]="['active']"
<a (click)="toggleSidenav(historyUrl)" *ngIf="historyAccess" [routerLinkActive]="['active']"
[routerLink]=[historyUrl]
class="navlist__item navlist__history" mat-list-item>History</a>
<a (click)="toggleSidenav()" *ngIf="settingsAccess" [routerLinkActive]="['active']"
<a (click)="toggleSidenav(settingsURL)" *ngIf="settingsAccess" [routerLinkActive]="['active']"
[routerLink]=[settingsURL]
class="navlist__item navlist__setting" mat-list-item>Settings</a>
</mat-nav-list>

2
web/src/app/shared/components/sidenav-list/sidenav-list.component.spec.ts
View File

@ -16,6 +16,7 @@ import { MatGridListModule } from '@angular/material/grid-list';
import { MatListModule } from '@angular/material/list';
import { MatIconModule } from '@angular/material/icon';
import { EMPTY } from 'rxjs';
import { RequestInProgressService } from '../../services/request-in-progress/request-in-progress.service';
const SidenavServiceSpy: Partial<SidenavService> = {
toggleSidenav: jest.fn().mockReturnValue(EMPTY)
@ -48,6 +49,7 @@ describe('SidenavListComponent', () => {
HttpClientTestingModule
],
providers: [
RequestInProgressService,
{ provide: SidenavService, useValue: SidenavServiceSpy },
{ provide: TaskanaEngineService, useValue: TaskanaEngineServiceSpy }
]

12
web/src/app/shared/components/sidenav-list/sidenav-list.component.ts
View File

@ -4,6 +4,8 @@ import { MonitorGuard } from 'app/shared/guards/monitor.guard';
import { UserGuard } from 'app/shared/guards/user.guard';
import { TaskanaEngineService } from '../../services/taskana-engine/taskana-engine.service';
import { SidenavService } from '../../services/sidenav/sidenav.service';
import { RequestInProgressService } from '../../services/request-in-progress/request-in-progress.service';
import { Router } from '@angular/router';
@Component({
selector: 'taskana-sidenav-list',
@ -30,7 +32,12 @@ export class SidenavListComponent implements OnInit {
routingAccess = false;
settingsAccess = false;
constructor(private taskanaEngineService: TaskanaEngineService, private sidenavService: SidenavService) {}
constructor(
private taskanaEngineService: TaskanaEngineService,
private sidenavService: SidenavService,
private requestInProgressService: RequestInProgressService,
private router: Router
) {}
ngOnInit() {
this.administrationAccess = this.taskanaEngineService.hasRole(BusinessAdminGuard.roles);
@ -45,7 +52,8 @@ export class SidenavListComponent implements OnInit {
this.settingsAccess = this.administrationAccess;
}
toggleSidenav() {
toggleSidenav(target: string) {
if (!this.router.url.includes(target)) this.requestInProgressService.setRequestInProgress(true);
this.toggle = !this.toggle;
this.sidenavService.toggleSidenav();
}

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

@ -15,6 +15,7 @@ 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';
import { RequestInProgressService } from '../../../shared/services/request-in-progress/request-in-progress.service';
export enum Search {
byWorkbasket = 'workbasket',
@ -62,7 +63,8 @@ export class TaskListToolbarComponent implements OnInit {
private router: Router,
private route: ActivatedRoute,
private store: Store,
private ngxsActions$: Actions
private ngxsActions$: Actions,
private requestInProgressService: RequestInProgressService
) {}
ngOnInit() {
@ -139,6 +141,7 @@ export class TaskListToolbarComponent implements OnInit {
onTabChange(search) {
const tab = search.path[0].innerText;
this.requestInProgressService.setRequestInProgress(true);
if (tab === 'Workbaskets') {
this.router.navigate(['taskana/workplace'], { queryParams: { component: 'workbaskets' } });
}

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

@ -16,6 +16,7 @@ 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';
import { RequestInProgressService } from '../../../shared/services/request-in-progress/request-in-progress.service';
@Component({
selector: 'taskana-task-master',
@ -52,7 +53,8 @@ export class TaskMasterComponent implements OnInit, OnDestroy {
private workplaceService: WorkplaceService,
private notificationsService: NotificationService,
private orientationService: OrientationService,
private store: Store
private store: Store,
private requestInProgressService: RequestInProgressService
) {}
ngOnInit() {
@ -120,8 +122,14 @@ export class TaskMasterComponent implements OnInit, OnDestroy {
this.getTasks();
}
ngOnDestroy(): void {
this.destroy$.next(null);
this.destroy$.complete();
}
private getTasks(): void {
this.requestInProgress = true;
this.requestInProgressService.setRequestInProgress(true);
if (this.selectedSearchType === Search.byTypeAndValue) {
delete this.currentBasket;
@ -131,6 +139,7 @@ export class TaskMasterComponent implements OnInit, OnDestroy {
if (this.selectedSearchType === Search.byWorkbasket && !this.currentBasket) {
this.requestInProgress = false;
this.requestInProgressService.setRequestInProgress(false);
this.tasks = [];
} else {
this.taskService
@ -138,6 +147,7 @@ export class TaskMasterComponent implements OnInit, OnDestroy {
.pipe(take(1))
.subscribe((taskResource) => {
this.requestInProgress = false;
this.requestInProgressService.setRequestInProgress(false);
if (taskResource.tasks && taskResource.tasks.length > 0) {
this.tasks = taskResource.tasks;
} else {
@ -150,9 +160,4 @@ export class TaskMasterComponent implements OnInit, OnDestroy {
});
}
}
ngOnDestroy(): void {
this.destroy$.next(null);
this.destroy$.complete();
}
}