+
-
-
+
+
-
diff --git a/web/src/app/administration/workbasket/details/distribution-targets/dual-list/dual-list.component.scss b/web/src/app/administration/workbasket/details/distribution-targets/dual-list/dual-list.component.scss
index 832da7275..fee9fac98 100644
--- a/web/src/app/administration/workbasket/details/distribution-targets/dual-list/dual-list.component.scss
+++ b/web/src/app/administration/workbasket/details/distribution-targets/dual-list/dual-list.component.scss
@@ -8,20 +8,20 @@ $selected-item: #e3f3f5;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
& .row {
- padding: 3px 0px 0px 3px;
+ padding: 0px 0px 0px 3px;
}
& .row:first {
border-top: 1px solid #ddd;
}
& div.pull-right {
- margin-right: 18px;
+ margin-right: 17px;
}
& >.list-group {
margin-bottom: 0px;
margin-top: 0px;
-
+
}
& > .list-group > li {
border-left: none;
@@ -29,13 +29,28 @@ $selected-item: #e3f3f5;
}
overflow-x: hidden;
- overflow-y: auto;
-
+ overflow-y: hidden;
+
@media screen and (max-width: 991px){
- max-height: 33vh;
+ height: calc((100vh - 241px) / 2);
+ min-height: 120px;
+ margin-bottom: 0;
}
- max-height: 75vh;
-
+ max-height: calc(100vh - 194px);
+ margin-bottom: 2px;
+}
+
+.infinite-scroll {
+ overflow-y: scroll;
+ height: calc(100vh - 233px);
+ @media screen and (max-width: 991px){
+ height: calc((100vh - 315px) / 2);
+ min-height: 83px;
+ }
+}
+
+.header {
+ margin: 2px -15px 1px -15px;
}
.list-group {
@@ -96,4 +111,3 @@ li.list-group-item:hover, {
text-decoration: none;
background-color: #f5f5f5;
}
-
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 1897480a2..1cec06c9c 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
@@ -13,30 +13,40 @@ import { expandDown } from 'app/shared/animations/expand.animation';
export class DualListComponent implements OnInit {
@Input() distributionTargets: Array
;
- @Output() distributionTargetsChange = new EventEmitter>();
@Input() distributionTargetsSelected: Array;
@Output() performDualListFilter = new EventEmitter<{ filterBy: FilterModel, side: Side }>();
- @Input() requestInProgress = false;
+ @Input() requestInProgress = false;
+ @Input() loadingItems ? = false;
@Input() side: Side;
- @Input() header: string;
+ @Input() header: string;
+ @Output() scrolling = new EventEmitter();
+ @Input() allSelected;
+ @Output() allSelectedChange = new EventEmitter();
sideNumber = 0;
- toggleDtl = false;
- toolbarState = false;
-
- constructor() { }
+ toolbarState = false;
ngOnInit() {
- this.sideNumber = this.side === Side.LEFT ? 0 : 1;
+ this.sideNumber = this.side === Side.LEFT ? 0 : 1;
}
selectAll(selected: boolean) {
this.distributionTargets.forEach((element: any) => {
element.selected = selected;
- });
- }
+ });
+ this.allSelectedChange.emit(this.allSelected);
+ }
+
+ onScroll() {
+ this.scrolling.emit(this.side);
+ }
performAvailableFilter(filterModel: FilterModel) {
- this.performDualListFilter.emit({ filterBy: filterModel, side: this.side });
+ this.performDualListFilter.emit({ filterBy: filterModel, side: this.side });
}
+
+ changeToolbarState(state: boolean) {
+ this.toolbarState = state;
+ }
+
}
diff --git a/web/src/app/administration/workbasket/details/workbasket-details.component.spec.ts b/web/src/app/administration/workbasket/details/workbasket-details.component.spec.ts
index d19299e4f..b3fa91ef1 100644
--- a/web/src/app/administration/workbasket/details/workbasket-details.component.spec.ts
+++ b/web/src/app/administration/workbasket/details/workbasket-details.component.spec.ts
@@ -30,6 +30,7 @@ import { WorkbasketInformationComponent } from './information/workbasket-informa
import { AccessItemsComponent } from './access-items/access-items.component';
import { DistributionTargetsComponent } from './distribution-targets/distribution-targets.component';
import { DualListComponent } from './distribution-targets//dual-list/dual-list.component';
+import { InfiniteScrollModule } from 'ngx-infinite-scroll';
@Component({
selector: 'taskana-dummy-detail',
@@ -55,7 +56,8 @@ describe('WorkbasketDetailsComponent', () => {
beforeEach(done => {
const configure = (testBed: TestBed) => {
testBed.configureTestingModule({
- imports: [RouterTestingModule.withRoutes(routes), FormsModule, AngularSvgIconModule, HttpClientModule, ReactiveFormsModule],
+ imports: [RouterTestingModule.withRoutes(routes), FormsModule, AngularSvgIconModule, HttpClientModule, ReactiveFormsModule,
+ InfiniteScrollModule],
declarations: [WorkbasketDetailsComponent, WorkbasketInformationComponent,
AccessItemsComponent,
DistributionTargetsComponent, DualListComponent, DummyDetailComponent],
diff --git a/web/src/app/administration/workbasket/master/list/workbasket-list.component.html b/web/src/app/administration/workbasket/master/list/workbasket-list.component.html
index 5ba26340a..de291620b 100644
--- a/web/src/app/administration/workbasket/master/list/workbasket-list.component.html
+++ b/web/src/app/administration/workbasket/master/list/workbasket-list.component.html
@@ -37,4 +37,4 @@
\ No newline at end of file
+ [type]="type" [numberOfItems]="workbaskets.length" (changePage)="changePage($event)">
diff --git a/web/src/app/administration/workbasket/master/list/workbasket-list.component.ts b/web/src/app/administration/workbasket/master/list/workbasket-list.component.ts
index 6ad6d72a5..4a3e6db71 100644
--- a/web/src/app/administration/workbasket/master/list/workbasket-list.component.ts
+++ b/web/src/app/administration/workbasket/master/list/workbasket-list.component.ts
@@ -27,6 +27,7 @@ export class WorkbasketListComponent implements OnInit, OnDestroy {
pageSelected = 1;
pageSize = 9;
type = 'workbaskets';
+ cards: number = this.pageSize;
sort: SortingModel = new SortingModel();
filterBy: FilterModel = new FilterModel({name: '', owner: '', type: '', description: '', key: ''});
@@ -62,7 +63,7 @@ export class WorkbasketListComponent implements OnInit, OnDestroy {
});
this.orientationSubscription = this.orientationService.getOrientation().subscribe((orientation: Orientation) => {
this.refreshWorkbasketList();
- })
+ });
}
selectWorkbasket(id: string) {
@@ -86,16 +87,13 @@ export class WorkbasketListComponent implements OnInit, OnDestroy {
}
refreshWorkbasketList() {
- const toolbarSize = this.toolbarElement.nativeElement.offsetHeight;
- const cardHeight = 72;
- const unusedHeight = 145;
- const totalHeight = window.innerHeight;
- const cards = Math.round((totalHeight - (unusedHeight + toolbarSize)) / cardHeight);
- cards > 0 ? TaskanaQueryParameters.pageSize = cards : TaskanaQueryParameters.pageSize = 1;
+ this.cards = this.orientationService.calculateNumberItemsList(
+ window.innerHeight, 72, 170 + this.toolbarElement.nativeElement.offsetHeight, false);
this.performRequest();
}
private performRequest(): void {
+ TaskanaQueryParameters.pageSize = this.cards;
this.requestInProgress = true;
this.workbaskets = [];
this.workbasketServiceSubscription = this.workbasketService.getWorkBasketsSummary(
diff --git a/web/src/app/services/orientation/orientation.service.ts b/web/src/app/services/orientation/orientation.service.ts
index 0a2c5dacf..89f981b86 100644
--- a/web/src/app/services/orientation/orientation.service.ts
+++ b/web/src/app/services/orientation/orientation.service.ts
@@ -1,6 +1,7 @@
import { Injectable } from '@angular/core';
import { Orientation } from 'app/models/orientation';
import { BehaviorSubject , Observable } from 'rxjs';
+import { TaskanaQueryParameters } from 'app/shared/util/query-parameters';
@Injectable()
export class OrientationService {
@@ -33,6 +34,13 @@ export class OrientationService {
}
}
+ calculateNumberItemsList(heightContainer: number, cardHeight: number, unusedHeight: number, doubleList = false): number {
+ let cards = Math.round((heightContainer - unusedHeight) / cardHeight);
+ if (doubleList && window.innerWidth < 992) { cards = Math.floor(cards / 2); }
+ cards > 0 ? TaskanaQueryParameters.pageSize = cards : TaskanaQueryParameters.pageSize = 1;
+ return cards;
+ }
+
private detectOrientation(): Orientation {
if (window.innerHeight > window.innerWidth) {
return Orientation.portrait;
diff --git a/web/src/app/shared/filter/filter.component.html b/web/src/app/shared/filter/filter.component.html
index 8062b5390..461bbb62c 100644
--- a/web/src/app/shared/filter/filter.component.html
+++ b/web/src/app/shared/filter/filter.component.html
@@ -2,7 +2,7 @@
-
-
diff --git a/web/src/app/shared/pagination/pagination.component.html b/web/src/app/shared/pagination/pagination.component.html
index ea4bc1c7c..9b09a0e44 100644
--- a/web/src/app/shared/pagination/pagination.component.html
+++ b/web/src/app/shared/pagination/pagination.component.html
@@ -1,19 +1,18 @@
diff --git a/web/src/app/shared/pagination/pagination.component.scss b/web/src/app/shared/pagination/pagination.component.scss
index 8ac57a738..57915369b 100644
--- a/web/src/app/shared/pagination/pagination.component.scss
+++ b/web/src/app/shared/pagination/pagination.component.scss
@@ -31,6 +31,6 @@ ul.pagination{
}
.footer{
- margin: 5px 5px 0 0;
+ margin: 0 5px 0 0;
color: $blue;
-}
\ No newline at end of file
+}
diff --git a/web/src/app/shared/pagination/pagination.component.spec.ts b/web/src/app/shared/pagination/pagination.component.spec.ts
index 325414b6e..33c4e879c 100644
--- a/web/src/app/shared/pagination/pagination.component.spec.ts
+++ b/web/src/app/shared/pagination/pagination.component.spec.ts
@@ -97,19 +97,22 @@ describe('PaginationComponent', () => {
it('should getPagesTextToShow return 7 of 13 with size < totalElements', () => {
component.page = new Page(7, 13, 3, 2);
component.type = 'workbaskets';
- expect(component.getPagesTextToShow()).toBe('7 of 13 workbaskets');
+ component.numberOfItems = 5;
+ expect(component.getPagesTextToShow()).toBe(component.numberOfItems.toString().concat(' of 13 workbaskets'));
});
it('should getPagesTextToShow return 6 of 6 with size > totalElements', () => {
component.page = new Page(7, 6, 3, 2);
component.type = 'tasks';
- expect(component.getPagesTextToShow()).toBe('6 of 6 tasks');
+ component.numberOfItems = 6;
+ expect(component.getPagesTextToShow()).toBe(component.numberOfItems.toString().concat(' of 6 tasks'));
});
it('should getPagesTextToShow return of with totalElements = 0', () => {
component.page = new Page(7, 0, 0, 0);
component.type = 'workbaskets';
- expect(component.getPagesTextToShow()).toBe('0 of 0 workbaskets');
+ component.numberOfItems = 0;
+ expect(component.getPagesTextToShow()).toBe(component.numberOfItems.toString().concat(' of 0 workbaskets'));
});
});
diff --git a/web/src/app/shared/pagination/pagination.component.ts b/web/src/app/shared/pagination/pagination.component.ts
index 2925e45de..6f8568703 100644
--- a/web/src/app/shared/pagination/pagination.component.ts
+++ b/web/src/app/shared/pagination/pagination.component.ts
@@ -14,7 +14,7 @@ import { Page } from 'app/models/page';
templateUrl: './pagination.component.html',
styleUrls: ['./pagination.component.scss']
})
-export class PaginationComponent implements OnInit, OnChanges {
+export class PaginationComponent implements OnChanges {
@Input()
page: Page;
@Input()
@@ -23,6 +23,8 @@ export class PaginationComponent implements OnInit, OnChanges {
workbasketsResourceChange = new EventEmitter
();
@Output()
changePage = new EventEmitter();
+ @Input()
+ numberOfItems: number;
previousPageSelected = 1;
pageSelected = 1;
maxPagesAvailable = 8;
@@ -30,13 +32,11 @@ export class PaginationComponent implements OnInit, OnChanges {
constructor() {}
ngOnChanges(changes: SimpleChanges): void {
- if (changes.page.currentValue !== undefined) {
+ if (changes.page && changes.page.currentValue !== undefined) {
this.pageSelected = changes.page.currentValue.number;
}
}
- ngOnInit() {}
-
changeToPage(page) {
if (page < 1) {
page = this.pageSelected = 1;
@@ -47,6 +47,8 @@ export class PaginationComponent implements OnInit, OnChanges {
if (this.previousPageSelected !== page) {
this.changePage.emit(page);
this.previousPageSelected = page;
+ this.page.number = page;
+ this.pageSelected = page;
}
}
@@ -54,14 +56,7 @@ export class PaginationComponent implements OnInit, OnChanges {
if (!this.page) {
return '';
}
- let text = this.page.totalElements + '';
- if (
- this.page &&
- this.page.totalElements &&
- this.page.totalElements >= this.page.size
- ) {
- text = this.page.size + '';
- }
+ const text = this.numberOfItems + '';
return `${text} of ${this.page.totalElements} ${this.type}`;
}
}
diff --git a/web/src/app/shared/pipes/selectedWorkbasket/seleted-workbasket.pipe.ts b/web/src/app/shared/pipes/selectedWorkbasket/seleted-workbasket.pipe.ts
index d9b63fccc..06e6d9902 100644
--- a/web/src/app/shared/pipes/selectedWorkbasket/seleted-workbasket.pipe.ts
+++ b/web/src/app/shared/pipes/selectedWorkbasket/seleted-workbasket.pipe.ts
@@ -1,4 +1,5 @@
import { Pipe, PipeTransform } from '@angular/core';
+import { TaskanaQueryParameters } from 'app/shared/util/query-parameters';
@Pipe({ name: 'selectWorkbaskets' })
export class SelectWorkBasketPipe implements PipeTransform {
@@ -18,6 +19,9 @@ export class SelectWorkBasketPipe implements PipeTransform {
originArray.splice(index, 1);
}
}
+ if (originArray.length > TaskanaQueryParameters.pageSize) {
+ originArray.slice(0, TaskanaQueryParameters.pageSize);
+ }
returnArray = originArray;
return returnArray;
}
diff --git a/web/src/app/shared/pipes/spreadNumber/spread-number.ts b/web/src/app/shared/pipes/spreadNumber/spread-number.ts
index c58aecb39..7dc3a7b46 100644
--- a/web/src/app/shared/pipes/spreadNumber/spread-number.ts
+++ b/web/src/app/shared/pipes/spreadNumber/spread-number.ts
@@ -2,7 +2,7 @@ import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'spreadNumber' })
export class SpreadNumberPipe implements PipeTransform {
- transform(value: number, currentIndex: number, maxArrayElements: number, maxPageNumber: number): number[] {
+ transform(maxPageNumber: number, currentIndex: number, maxArrayElements: number): number[] {
const returnArray = new Array();
if (maxPageNumber <= 5) {
for (let i = 0; i < maxPageNumber; i++) {
diff --git a/web/src/app/workplace/tasklist/tasklist.component.html b/web/src/app/workplace/tasklist/tasklist.component.html
index 41aa01711..ea0ff4989 100644
--- a/web/src/app/workplace/tasklist/tasklist.component.html
+++ b/web/src/app/workplace/tasklist/tasklist.component.html
@@ -44,5 +44,5 @@
-
+