From 2715db7365f2cf94fa8aa694edaaceee78c26e4c Mon Sep 17 00:00:00 2001 From: "konstantina.galouni" Date: Tue, 25 Apr 2023 17:55:31 +0300 Subject: [PATCH] #8148 - Added paging functionality with load more/ less buttons in home page, for the existing 4 tabs - ordering and keyword are also added in the url and they are resolved on page reload. 1. i18n/: Added properties "GENERAL.ACTIONS.LOAD-LESS" and "GENERAL.ACTIONS.NO-MORE-AVAILABLE". 2. dashboard.component.html: Added aria-label on each | Added on bindings for [selectedIndex] and (selectedTabChange), to define the active tab. 3. dashboard.component.ts: Added field currentType: string = "recent"; | Set currentType by url params | Added method get indexFromCurrentType(), to return the active tab index. 4. drafts.component.html & recent-edited-activity.component.html & recent-edited-dataset-activity.component.html & recent-edited-dmp-activity.component.html: Added button "LOAD-LESS" and message "NO-MORE-AVAILABLE" to the end of the list. 5. drafts.component.ts & recent-edited-activity.component.ts & recent-edited-dataset-activity.component.ts & recent-edited-dmp-activity.component.ts: a. Added fields @ViewChild("...") resultsContainer, offsetLess: number = 0, hasMoreResults:boolean = true, page: number = 1 and @Input() isActive: boolean = false. b. Read url params, set offsets and query filters and update url. c. Renamed "loadMore()" to "loadNextOrPrevious()" and added parameter more: boolean = true. --- .../app/ui/dashboard/dashboard.component.html | 43 +++-- .../app/ui/dashboard/dashboard.component.ts | 27 +++ .../ui/dashboard/drafts/drafts.component.html | 12 +- .../ui/dashboard/drafts/drafts.component.ts | 113 ++++++++++-- .../recent-edited-activity.component.html | 10 +- .../recent-edited-activity.component.ts | 163 +++++++++++++++--- ...ent-edited-dataset-activity.component.html | 12 +- ...ecent-edited-dataset-activity.component.ts | 136 +++++++++++++-- .../recent-edited-dmp-activity.component.html | 12 +- .../recent-edited-dmp-activity.component.ts | 134 ++++++++++++-- dmp-frontend/src/assets/i18n/de.json | 4 +- dmp-frontend/src/assets/i18n/en.json | 4 +- dmp-frontend/src/assets/i18n/es.json | 4 +- dmp-frontend/src/assets/i18n/gr.json | 4 +- dmp-frontend/src/assets/i18n/hr.json | 4 +- dmp-frontend/src/assets/i18n/pl.json | 6 +- dmp-frontend/src/assets/i18n/pt.json | 4 +- dmp-frontend/src/assets/i18n/sk.json | 4 +- dmp-frontend/src/assets/i18n/sr.json | 4 +- dmp-frontend/src/assets/i18n/tr.json | 4 +- 20 files changed, 598 insertions(+), 106 deletions(-) diff --git a/dmp-frontend/src/app/ui/dashboard/dashboard.component.html b/dmp-frontend/src/app/ui/dashboard/dashboard.component.html index 6e61cf2e5..795ff063d 100644 --- a/dmp-frontend/src/app/ui/dashboard/dashboard.component.html +++ b/dmp-frontend/src/app/ui/dashboard/dashboard.component.html @@ -32,21 +32,26 @@
{{'DASHBOARD.LATEST-ACTIVITY' | translate}}
- - - + + + +
{{'DASHBOARD.EMPTY-LIST' | translate}}
 - - + + +
{{'DASHBOARD.EMPTY-LIST' | translate}}
- - - + > + + +
{{'DASHBOARD.EMPTY-LIST' | translate}}
 - - + + +
{{'DASHBOARD.EMPTY-LIST' | translate}}
{{'DASHBOARD.LATEST-ACTIVITY' | translate}}
- - - + + + +
{{'DASHBOARD.EMPTY-LIST' | translate}}
 - - + + +
{{'DASHBOARD.EMPTY-LIST' | translate}}
 - - + + +
{{'DASHBOARD.EMPTY-LIST' | translate}}
{{'DMP-LISTING.SORT-BY' | translate}}: @@ -19,6 +19,9 @@
+
+ +
-
- +
+ {{'GENERAL.ACTIONS.NO-MORE-AVAILABLE' | translate}} +
+
+
{{'DMP-LISTING.SORT-BY' | translate}}: @@ -23,6 +23,9 @@
+
+ +
@@ -165,8 +168,11 @@
+
+ {{'GENERAL.ACTIONS.NO-MORE-AVAILABLE' | translate}} +
- +
diff --git a/dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.ts b/dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.ts index ffcf3740b..56394ae6f 100644 --- a/dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.ts +++ b/dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.ts @@ -1,6 +1,6 @@ -import { Component, OnInit, Output, EventEmitter } from '@angular/core'; +import {Component, OnInit, Output, EventEmitter, Input, ViewChild} from '@angular/core'; import { MatDialog } from '@angular/material/dialog'; -import { Router } from '@angular/router'; +import {ActivatedRoute, Router} from '@angular/router'; import { RecentActivityType } from '@app/core/common/enum/recent-activity-type'; import { Principal } from '@app/core/model/auth/principal'; import { DataTableRequest, DataTableMultiTypeRequest } from '@app/core/model/data-table/data-table-request'; @@ -52,6 +52,7 @@ export class RecentEditedActivityComponent extends BaseComponent implements OnIn @Output() totalCountRecentEdited: EventEmitter = new EventEmitter(); + @ViewChild("results") resultsContainer; allRecentActivities: RecentActivityModel[]; recentActivityTypeEnum = RecentActivityType; dmpModel: DmpEditorModel; @@ -60,6 +61,7 @@ export class RecentEditedActivityComponent extends BaseComponent implements OnIn startIndex: number = 0; dmpOffset: number = 0; datasetOffset: number = 0; + offsetLess: number = 0; pageSize: number = 5; dmpFormGroup: FormGroup; hasMoreActivity:boolean = true; @@ -71,7 +73,11 @@ export class RecentEditedActivityComponent extends BaseComponent implements OnIn order = RecentActivityOrder; + page: number = 1; + @Input() isActive: boolean = false; + constructor( + private route: ActivatedRoute, private router: Router, public enumUtils: EnumUtils, private authentication: AuthService, @@ -91,13 +97,45 @@ export class RecentEditedActivityComponent extends BaseComponent implements OnIn ngOnInit() { this.matomoService.trackPageView('Recent Edited Activity'); + this.route.queryParams.subscribe(params => { + if(this.isActive) { + let page = (params['page'] === undefined) ? 1 : +params['page']; + this.page = (page <= 0) ? 1 : page; + + this.datasetOffset = (this.page-1)*this.pageSize; + this.dmpOffset = (this.page-1)*this.pageSize; + if(this.page > 1) { + this.offsetLess = (this.page-2)*this.pageSize; + } + + let order = params['order']; + if (this.isAuthenticated()) { + if(order === undefined || (order != this.order.MODIFIED && order != this.order.LABEL && order != this.order.STATUS)) { + order = this.order.MODIFIED; + } + } else { + if(order === undefined || (order != this.order.PUBLISHED && order != this.order.LABEL)) { + order = this.order.PUBLISHED; + } + } + this.formGroup.get('order').setValue(order); + + let keyword = (params['keyword'] === undefined || params['keyword'].length <= 0) ? "" : params['keyword']; + this.formGroup.get("like").setValue(keyword); + + this.updateUrl(); + } + }); if (this.isAuthenticated()) { - this.formGroup.get('order').setValue(this.order.MODIFIED); + if(!this.formGroup.get('order').value) { + this.formGroup.get('order').setValue(this.order.MODIFIED); + } const fields: Array = [((this.formGroup.get('order').value === 'status') || (this.formGroup.get('order').value === 'label') ? '+' : "-") + this.formGroup.get('order').value]; - const allDataTableRequest: DataTableMultiTypeRequest = new DataTableMultiTypeRequest(0, 0, 5, { fields: fields }); + const allDataTableRequest: DataTableMultiTypeRequest = new DataTableMultiTypeRequest(this.dmpOffset, this.datasetOffset, 5, { fields: fields }); allDataTableRequest.criteria = new RecentActivityCriteria(); - allDataTableRequest.criteria.like = ""; + allDataTableRequest.criteria.like = this.formGroup.get('like').value; allDataTableRequest.criteria.order = this.formGroup.get('order').value; + this.dashboardService .getRecentActivity(allDataTableRequest) .pipe(takeUntil(this._destroyed)) @@ -105,12 +143,21 @@ export class RecentEditedActivityComponent extends BaseComponent implements OnIn this.allRecentActivities = response; this.allRecentActivities.forEach(recentActivity => { if (recentActivity.type === RecentActivityType.Dataset) { - this.datasetOffset = this.datasetOffset + 1; + // this.datasetOffset = this.datasetOffset + 1; + this.datasetOffset = this.page*this.pageSize; } else if (recentActivity.type === RecentActivityType.Dmp) { - this.dmpOffset = this.dmpOffset + 1; + // this.dmpOffset = this.dmpOffset + 1; + this.dmpOffset = this.page*this.pageSize; } }); this.totalCountRecentEdited.emit(this.allRecentActivities.length); + if(this.allRecentActivities.length > 0 && this.allRecentActivities.length < this.page*this.pageSize) { + let queryParams = { type: "recent", page: 1, order: this.formGroup.get("order").value }; + if(this.formGroup.get("like").value) { + queryParams['keyword'] = this.formGroup.get("like").value; + } + this.router.navigate(["/home"], { queryParams: queryParams }) + } }); this.formGroup.get('like').valueChanges .pipe(takeUntil(this._destroyed), debounceTime(500)) @@ -120,7 +167,9 @@ export class RecentEditedActivityComponent extends BaseComponent implements OnIn .subscribe(x => this.refresh()); } else { this.publicMode = true; - this.formGroup.get('order').setValue(this.order.PUBLISHED); + if(!this.formGroup.get('order').value) { + this.formGroup.get('order').setValue(this.order.PUBLISHED); + } const allDataTableRequest = this.setPublicDataTableRequest(); this.dashboardService .getRecentActivity(allDataTableRequest) @@ -129,12 +178,21 @@ export class RecentEditedActivityComponent extends BaseComponent implements OnIn this.allRecentActivities = response; this.allRecentActivities.forEach(recentActivity => { if (recentActivity.type === RecentActivityType.Dataset) { - this.datasetOffset = this.datasetOffset + 1; + // this.datasetOffset = this.datasetOffset + 1; + this.datasetOffset = this.page*this.pageSize; } else if (recentActivity.type === RecentActivityType.Dmp) { - this.dmpOffset = this.dmpOffset + 1; + // this.dmpOffset = this.dmpOffset + 1; + this.dmpOffset = this.page*this.pageSize; } }); this.totalCountRecentEdited.emit(this.allRecentActivities.length); + if(this.allRecentActivities.length > 0 && this.allRecentActivities.length < this.page*this.pageSize) { + let queryParams = { type: "recent", page: 1, order: this.formGroup.get("order").value }; + if(this.formGroup.get("like").value) { + queryParams['keyword'] = this.formGroup.get("like").value; + } + this.router.navigate(["/home"], { queryParams: queryParams }) + } }); this.formGroup.get('like').valueChanges .pipe(takeUntil(this._destroyed), debounceTime(500)) @@ -145,6 +203,23 @@ export class RecentEditedActivityComponent extends BaseComponent implements OnIn } } + ngOnChanges() { + if(this.isActive) { + this.updateUrl(); + } + } + + updateUrl() { + let parameters = ""; + parameters += (this.page != 1 ? "&page="+this.page : ""); + parameters += (((this.formGroup.get("order").value != this.order.MODIFIED && !this.publicMode) || (this.formGroup.get("order").value != this.order.PUBLISHED && this.publicMode)) ? "&order="+this.formGroup.get("order").value : ""); + parameters += (this.formGroup.get("like").value ? ("&keyword="+this.formGroup.get("like").value) : ""); + if(parameters) { + parameters = "?type=recent" + parameters; + } + this.location.go(this.router.url.split('?')[0]+parameters); + } + getDatasets(activity: RecentDmpModel): DatasetUrlListing[] { return activity.datasets; } @@ -615,9 +690,10 @@ export class RecentEditedActivityComponent extends BaseComponent implements OnIn } refresh(): void { - this.hasMoreActivity = true; this.datasetOffset = 0; this.dmpOffset = 0; + this.page = 1; + this.updateUrl(); const fields: Array = [((this.formGroup.get('order').value === 'status') || (this.formGroup.get('order').value === 'label') ? '+' : "-") + this.formGroup.get('order').value]; // const fields: Array = ["-modified"]; @@ -633,39 +709,72 @@ export class RecentEditedActivityComponent extends BaseComponent implements OnIn this.allRecentActivities = response; this.allRecentActivities.forEach(recentActivity => { if (recentActivity.type === RecentActivityType.Dataset) { - this.datasetOffset = this.datasetOffset + 1; + // this.datasetOffset = this.datasetOffset + 1; + this.datasetOffset = this.page*this.pageSize; } else if (recentActivity.type === RecentActivityType.Dmp) { - this.dmpOffset = this.dmpOffset + 1; + // this.dmpOffset = this.dmpOffset + 1; + this.dmpOffset = this.page*this.pageSize; } }); - if(response.length< this.pageSize) {this.hasMoreActivity = false;} + if(response.length< this.pageSize) { + this.hasMoreActivity = false; + } else { + this.hasMoreActivity = true; + } this.totalCountRecentEdited.emit(this.allRecentActivities.length); }); } - public loadMore() { + public loadNextOrPrevious(more: boolean = true) { const fields: Array = [((this.formGroup.get('order').value === 'status') || (this.formGroup.get('order').value === 'label') ? '+' : "-") + this.formGroup.get('order').value]; // const fields: Array = ["-modified"]; - const request = new DataTableMultiTypeRequest(this.dmpOffset, this.datasetOffset, this.pageSize, { fields: fields }); + let request; + if(more) { + request = new DataTableMultiTypeRequest(this.dmpOffset, this.datasetOffset, this.pageSize, {fields: fields}); + } else { + request = new DataTableMultiTypeRequest(this.offsetLess, this.offsetLess, this.pageSize, {fields: fields}); + } request.criteria = new RecentActivityCriteria(); request.criteria.like = this.formGroup.get("like").value ? this.formGroup.get("like").value : ""; request.criteria.order = this.formGroup.get("order").value; this.dashboardService.getRecentActivity(request).pipe(takeUntil(this._destroyed)).subscribe(result => { - if (!result) { this.hasMoreActivity = false; return []; } - result.forEach(recentActivity => { - if (recentActivity.type === RecentActivityType.Dataset) { - this.datasetOffset = this.datasetOffset + 1; - } else if (recentActivity.type === RecentActivityType.Dmp) { - this.dmpOffset = this.dmpOffset + 1; + if (!result || result.length == 0) { + this.hasMoreActivity = false; + // return []; + } else { + this.page = this.page + (more ? 1 : -1); + this.updateUrl(); + // if(more) { + // result.forEach(recentActivity => { + // if (recentActivity.type === RecentActivityType.Dataset) { + // this.datasetOffset = this.datasetOffset + 1; + this.datasetOffset = this.page * this.pageSize; + // } else if (recentActivity.type === RecentActivityType.Dmp) { + // this.dmpOffset = this.dmpOffset + 1; + this.dmpOffset = this.page * this.pageSize; + // } + // }); + // } + if (this.page > 1) { + this.offsetLess = (this.page - 2) * this.pageSize; } - }); - if(result.length 0 ? this.mergeTwoSortedLists(this.allRecentActivities, result, this.formGroup.get('order').value) : result; - this.totalCountRecentEdited.emit(this.allRecentActivities.length); + if(result.length < this.pageSize) { + this.hasMoreActivity = false; + } else { + this.hasMoreActivity = true; + } + + // this.allRecentActivities = this.allRecentActivities.concat(result); + // this.allRecentActivities = this.allRecentActivities.length > 0 ? this.mergeTwoSortedLists(this.allRecentActivities, result, this.formGroup.get('order').value) : result; + this.allRecentActivities = result; + this.totalCountRecentEdited.emit(this.allRecentActivities.length); + if (more) { + this.resultsContainer.nativeElement.scrollIntoView(); + } + } }); } diff --git a/dmp-frontend/src/app/ui/dashboard/recent-edited-dataset-activity/recent-edited-dataset-activity.component.html b/dmp-frontend/src/app/ui/dashboard/recent-edited-dataset-activity/recent-edited-dataset-activity.component.html index 978476ec9..61a8a95c5 100644 --- a/dmp-frontend/src/app/ui/dashboard/recent-edited-dataset-activity/recent-edited-dataset-activity.component.html +++ b/dmp-frontend/src/app/ui/dashboard/recent-edited-dataset-activity/recent-edited-dataset-activity.component.html @@ -1,4 +1,4 @@ -
+
{{'DMP-LISTING.SORT-BY' | translate}}: @@ -20,6 +20,9 @@
+
+ +
-
- +
+ {{'GENERAL.ACTIONS.NO-MORE-AVAILABLE' | translate}} +
+
+
diff --git a/dmp-frontend/src/app/ui/dashboard/recent-edited-dataset-activity/recent-edited-dataset-activity.component.ts b/dmp-frontend/src/app/ui/dashboard/recent-edited-dataset-activity/recent-edited-dataset-activity.component.ts index 6f51f4a54..7a98594b7 100644 --- a/dmp-frontend/src/app/ui/dashboard/recent-edited-dataset-activity/recent-edited-dataset-activity.component.ts +++ b/dmp-frontend/src/app/ui/dashboard/recent-edited-dataset-activity/recent-edited-dataset-activity.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, Output, EventEmitter } from '@angular/core'; +import {Component, OnInit, Output, EventEmitter, Input, ViewChild} from '@angular/core'; import { DatasetListingModel } from '@app/core/model/dataset/dataset-listing'; import { DatasetService } from '@app/core/services/dataset/dataset.service'; import { DataTableRequest } from '@app/core/model/data-table/data-table-request'; @@ -12,7 +12,7 @@ import { FormControl, FormBuilder } from '@angular/forms'; import { DatasetCopyDialogueComponent } from '@app/ui/dataset/dataset-wizard/dataset-copy-dialogue/dataset-copy-dialogue.component'; import { MatDialog } from '@angular/material/dialog'; import { debounceTime, takeUntil } from 'rxjs/operators'; -import { Router } from '@angular/router'; +import {ActivatedRoute, Router} from '@angular/router'; import { DatasetWizardService } from '@app/core/services/dataset-wizard/dataset-wizard.service'; import * as FileSaver from 'file-saver'; import { ConfirmationDialogComponent } from '@common/modules/confirmation-dialog/confirmation-dialog.component'; @@ -38,9 +38,13 @@ export class RecentEditedDatasetActivityComponent extends BaseComponent implemen @Output() totalCountDatasets: EventEmitter = new EventEmitter(); + @ViewChild("datasets") resultsContainer; + datasetActivities: DatasetListingModel[]; totalCount: number; startIndex: number = 0; + offsetLess: number = 0; + hasMoreResults:boolean = true; pageSize: number = 5; public formGroup = new FormBuilder().group({ like: new FormControl(), @@ -50,7 +54,11 @@ export class RecentEditedDatasetActivityComponent extends BaseComponent implemen order = RecentActivityOrder; + page: number = 1; + @Input() isActive: boolean = false; + constructor( + private route: ActivatedRoute, private authentication: AuthService, private datasetService: DatasetService, private language: TranslateService, @@ -70,20 +78,57 @@ export class RecentEditedDatasetActivityComponent extends BaseComponent implemen ngOnInit() { this.matomoService.trackPageView('Recent Dataset Activity'); + this.route.queryParams.subscribe(params => { + if(this.isActive) { + let page = (params['page'] === undefined) ? 1 : +params['page']; + this.page = (page <= 0) ? 1 : page; + + this.startIndex = (this.page-1)*this.pageSize; + if(this.page > 1) { + this.offsetLess = (this.page-2)*this.pageSize; + } + + let order = params['order']; + if (this.isAuthenticated()) { + if(order === undefined || (order != this.order.MODIFIED && order != this.order.LABEL && order != this.order.STATUS)) { + order = this.order.MODIFIED; + } + } else { + if(order === undefined || (order != this.order.DATASETPUBLISHED && order != this.order.LABEL)) { + order = this.order.DATASETPUBLISHED; + } + } + this.formGroup.get('order').setValue(order); + + let keyword = (params['keyword'] === undefined || params['keyword'].length <= 0) ? "" : params['keyword']; + this.formGroup.get("like").setValue(keyword); + + this.updateUrl(); + } + }); if (this.isAuthenticated()) { // const fields: Array = ["-modified"]; - this.formGroup.get('order').setValue(this.order.MODIFIED); + if(!this.formGroup.get('order').value) { + this.formGroup.get('order').setValue(this.order.MODIFIED); + } const fields: Array = [((this.formGroup.get('order').value === 'status') || (this.formGroup.get('order').value === 'label') ? '+' : "-") + this.formGroup.get('order').value]; - const datasetDataTableRequest: DataTableRequest = new DataTableRequest(0, this.pageSize, { fields: fields }); + const datasetDataTableRequest: DataTableRequest = new DataTableRequest(this.startIndex, this.pageSize, { fields: fields }); datasetDataTableRequest.criteria = new DatasetCriteria(); - datasetDataTableRequest.criteria.like = ""; + datasetDataTableRequest.criteria.like = this.formGroup.get('like').value; this.datasetService .getPaged(datasetDataTableRequest) .pipe(takeUntil(this._destroyed)) .subscribe(response => { this.datasetActivities = response.data; this.totalCount = response.totalCount; - this.totalCountDatasets.emit(this.datasetActivities.length); + this.totalCountDatasets.emit(this.datasetActivities.length) + if(this.totalCount > 0 && this.totalCount < this.page*this.pageSize) { + let queryParams = { type: "datasets", page: 1, order: this.formGroup.get("order").value }; + if(this.formGroup.get("like").value) { + queryParams['keyword'] = this.formGroup.get("like").value; + } + this.router.navigate(["/home"], { queryParams: queryParams }) + } }); this.formGroup.get('like').valueChanges .pipe(takeUntil(this._destroyed), debounceTime(500)) @@ -93,12 +138,21 @@ export class RecentEditedDatasetActivityComponent extends BaseComponent implemen .subscribe(x => this.refresh()); } else { this.publicMode = true; - this.formGroup.get('order').setValue(this.order.DATASETPUBLISHED); + if(!this.formGroup.get('order').value) { + this.formGroup.get('order').setValue(this.order.DATASETPUBLISHED); + } const dataTableRequest = this.setPublicDataTableRequest(); this.datasetService.getPaged(dataTableRequest).pipe(takeUntil(this._destroyed)).subscribe(response => { this.datasetActivities = response.data; this.totalCount = response.totalCount; this.totalCountDatasets.emit(this.datasetActivities.length); + if(this.totalCount > 0 && this.totalCount < this.page*this.pageSize) { + let queryParams = { type: "datasets", page: 1, order: this.formGroup.get("order").value }; + if(this.formGroup.get("like").value) { + queryParams['keyword'] = this.formGroup.get("like").value; + } + this.router.navigate(["/home"], { queryParams: queryParams }) + } }); this.formGroup.get('like').valueChanges .pipe(takeUntil(this._destroyed), debounceTime(500)) @@ -109,7 +163,21 @@ export class RecentEditedDatasetActivityComponent extends BaseComponent implemen } } - setPublicDataTableRequest(fields?: Array): DataTableRequest { + ngOnChanges() { + if(this.isActive) { + this.updateUrl(); + } + } + + updateUrl() { + let parameters = "?type=datasets"+ + (this.page != 1 ? "&page="+this.page : "") + + (((this.formGroup.get("order").value != this.order.MODIFIED && !this.publicMode) || (this.formGroup.get("order").value != this.order.DATASETPUBLISHED && this.publicMode)) ? "&order="+this.formGroup.get("order").value : "") + + (this.formGroup.get("like").value ? ("&keyword="+this.formGroup.get("like").value) : ""); + this.location.go(this.router.url.split('?')[0]+parameters); + } + + setPublicDataTableRequest(fields?: Array, more: boolean = true): DataTableRequest { const datasetCriteria = new DatasetCriteria(); datasetCriteria.allVersions = false; datasetCriteria.isPublic = true; @@ -117,13 +185,16 @@ export class RecentEditedDatasetActivityComponent extends BaseComponent implemen if (!fields) { fields = new Array('-dmp:publishedAt|join|'); } - const dataTableRequest: DataTableRequest = new DataTableRequest(this.startIndex, this.pageSize, { fields: fields }); + const dataTableRequest: DataTableRequest = more ? new DataTableRequest(this.startIndex, this.pageSize, { fields: fields }) : new DataTableRequest(this.offsetLess, this.pageSize, { fields: fields }); dataTableRequest.criteria = datasetCriteria; return dataTableRequest; } refresh(): void { this.startIndex = 0; + this.page = 1; + this.updateUrl(); + const fields: Array = [((this.formGroup.get('order').value === 'status') || (this.formGroup.get('order').value === 'label') ? '+' : "-") + this.formGroup.get('order').value]; const datasetDataTableRequest = this.isAuthenticated() ? new DataTableRequest(this.startIndex, this.pageSize, { fields: fields }) : this.setPublicDataTableRequest(fields); @@ -138,24 +209,59 @@ export class RecentEditedDatasetActivityComponent extends BaseComponent implemen this.datasetActivities = response.data; this.totalCount = response.totalCount; this.totalCountDatasets.emit(this.datasetActivities.length); + if(response.data.length< this.pageSize) { + this.hasMoreResults = false; + } else { + this.hasMoreResults = true; + } }); } - public loadMore() { + public loadNextOrPrevious(more: boolean = true) { this.startIndex = this.startIndex + this.pageSize; const fields: Array = [((this.formGroup.get('order').value === 'status') || (this.formGroup.get('order').value === 'label') ? '+' : "-") + this.formGroup.get('order').value]; - const request = this.isAuthenticated() ? new DataTableRequest(this.startIndex, this.pageSize, { fields: fields }) : this.setPublicDataTableRequest(fields); + let request; + this.startIndex = (this.page)*this.pageSize; + if(this.page > 1) { + this.offsetLess = (this.page-2)*this.pageSize; + } + if(this.isAuthenticated()) { + if(more) { + request = new DataTableRequest(this.startIndex, this.pageSize, { fields: fields }); + } else { + request = new DataTableRequest(this.offsetLess, this.pageSize, { fields: fields }); + } + } else { + request = this.setPublicDataTableRequest(fields, more); + } if (this.isAuthenticated()) { request.criteria = new DatasetCriteria(); request.criteria.like = this.formGroup.get("like").value ? this.formGroup.get("like").value : ""; } this.datasetService.getPaged(request).pipe(takeUntil(this._destroyed)).subscribe(result => { - if (!result) { return []; } - // this.datasetActivities = this.datasetActivities.concat(result.data); - this.datasetActivities = this.datasetActivities.length > 0 ? this.mergeTwoSortedLists(this.datasetActivities, result.data, this.formGroup.get('order').value) : result.data; - this.totalCountDatasets.emit(this.datasetActivities.length); + if (!result || !result.data || result.data.length == 0) { + this.hasMoreResults = false; + // return []; + } else { + this.page = this.page + (more ? 1 : -1); + this.updateUrl(); + // this.datasetActivities = this.datasetActivities.concat(result.data); + // this.datasetActivities = this.datasetActivities.length > 0 ? this.mergeTwoSortedLists(this.datasetActivities, result.data, this.formGroup.get('order').value) : result.data; + this.datasetActivities = result.data; + + if(result.data.length < this.pageSize) { + this.hasMoreResults = false; + } else { + this.hasMoreResults = true; + } + + this.totalCountDatasets.emit(this.datasetActivities.length); + if (more) { + this.resultsContainer.nativeElement.scrollIntoView(); + } + } }); } diff --git a/dmp-frontend/src/app/ui/dashboard/recent-edited-dmp-activity/recent-edited-dmp-activity.component.html b/dmp-frontend/src/app/ui/dashboard/recent-edited-dmp-activity/recent-edited-dmp-activity.component.html index 46680c012..3eed1fcaf 100644 --- a/dmp-frontend/src/app/ui/dashboard/recent-edited-dmp-activity/recent-edited-dmp-activity.component.html +++ b/dmp-frontend/src/app/ui/dashboard/recent-edited-dmp-activity/recent-edited-dmp-activity.component.html @@ -1,4 +1,4 @@ -
+
{{'DMP-LISTING.SORT-BY' | translate}}: @@ -20,6 +20,9 @@
+
+ +
-
- +
+ {{'GENERAL.ACTIONS.NO-MORE-AVAILABLE' | translate}} +
+
+
diff --git a/dmp-frontend/src/app/ui/dashboard/recent-edited-dmp-activity/recent-edited-dmp-activity.component.ts b/dmp-frontend/src/app/ui/dashboard/recent-edited-dmp-activity/recent-edited-dmp-activity.component.ts index 4ad783614..56dff7e62 100644 --- a/dmp-frontend/src/app/ui/dashboard/recent-edited-dmp-activity/recent-edited-dmp-activity.component.ts +++ b/dmp-frontend/src/app/ui/dashboard/recent-edited-dmp-activity/recent-edited-dmp-activity.component.ts @@ -1,6 +1,6 @@ -import { Component, OnInit, Output, EventEmitter } from '@angular/core'; +import {Component, OnInit, Output, EventEmitter, Input, ViewChild} from '@angular/core'; import { MatDialog } from '@angular/material/dialog'; -import { Router } from '@angular/router'; +import {ActivatedRoute, Router} from '@angular/router'; import { RecentActivityType } from '@app/core/common/enum/recent-activity-type'; import { Principal } from '@app/core/model/auth/principal'; import { DataTableRequest } from '@app/core/model/data-table/data-table-request'; @@ -44,6 +44,8 @@ export class RecentEditedDmpActivityComponent extends BaseComponent implements O @Output() totalCountDmps: EventEmitter = new EventEmitter(); + @ViewChild("dmps") resultsContainer; + dmpActivities: DmpListingModel[]; datasetActivities: DatasetListingModel[]; dmpModel: DmpEditorModel; @@ -52,6 +54,8 @@ export class RecentEditedDmpActivityComponent extends BaseComponent implements O totalCount: number; startIndex: number = 0; + offsetLess: number = 0; + hasMoreResults:boolean = true; pageSize: number = 5; dmpFormGroup: FormGroup; public formGroup = new FormBuilder().group({ @@ -62,7 +66,11 @@ export class RecentEditedDmpActivityComponent extends BaseComponent implements O order = RecentActivityOrder; + page: number = 1; + @Input() isActive: boolean = false; + constructor( + private route: ActivatedRoute, private router: Router, public enumUtils: EnumUtils, private authentication: AuthService, @@ -81,13 +89,43 @@ export class RecentEditedDmpActivityComponent extends BaseComponent implements O ngOnInit() { this.matomoService.trackPageView('Recent DMP Activity'); + this.route.queryParams.subscribe(params => { + if(this.isActive) { + let page = (params['page'] === undefined) ? 1 : +params['page']; + this.page = (page <= 0) ? 1 : page; + + this.startIndex = (this.page-1)*this.pageSize; + if(this.page > 1) { + this.offsetLess = (this.page-2)*this.pageSize; + } + + let order = params['order']; + if (this.isAuthenticated()) { + if(order === undefined || (order != this.order.MODIFIED && order != this.order.LABEL && order != this.order.STATUS)) { + order = this.order.MODIFIED; + } + } else { + if(order === undefined || (order != this.order.PUBLISHED && order != this.order.LABEL)) { + order = this.order.PUBLISHED; + } + } + this.formGroup.get('order').setValue(order); + + let keyword = (params['keyword'] === undefined || params['keyword'].length <= 0) ? "" : params['keyword']; + this.formGroup.get("like").setValue(keyword); + + this.updateUrl(); + } + }); if (this.isAuthenticated()) { // const fields: Array = ["-modified"]; - this.formGroup.get('order').setValue(this.order.MODIFIED); + if(!this.formGroup.get('order').value) { + this.formGroup.get('order').setValue(this.order.MODIFIED); + } const fields: Array = [((this.formGroup.get('order').value === 'status') || (this.formGroup.get('order').value === 'label') ? '+' : "-") + this.formGroup.get('order').value]; - const dmpDataTableRequest: DataTableRequest = new DataTableRequest(0, 5, { fields: fields }); + const dmpDataTableRequest: DataTableRequest = new DataTableRequest(this.startIndex, 5, { fields: fields }); dmpDataTableRequest.criteria = new DmpCriteria(); - dmpDataTableRequest.criteria.like = ""; + dmpDataTableRequest.criteria.like = this.formGroup.get('like').value; this.dmpService .getPaged(dmpDataTableRequest, "listing") .pipe(takeUntil(this._destroyed)) @@ -95,6 +133,13 @@ export class RecentEditedDmpActivityComponent extends BaseComponent implements O this.dmpActivities = response.data; this.totalCount = response.totalCount; this.totalCountDmps.emit(this.dmpActivities.length); + if(this.totalCount > 0 && this.totalCount < this.page*this.pageSize) { + let queryParams = { type: "dmps", page: 1, order: this.formGroup.get("order").value }; + if(this.formGroup.get("like").value) { + queryParams['keyword'] = this.formGroup.get("like").value; + } + this.router.navigate(["/home"], { queryParams: queryParams }) + } // this.totalCount < this.pageSize ? this.totalCountDmps.emit(response.totalCount) : this.totalCountDmps.emit(this.pageSize); // this.totalCountDmps.emit(this.totalCount); // this.dmpActivities.forEach(dmpActivity => { @@ -128,13 +173,22 @@ export class RecentEditedDmpActivityComponent extends BaseComponent implements O // }); } else { this.publicMode = true; - this.formGroup.get('order').setValue(this.order.PUBLISHED); + if(!this.formGroup.get('order').value) { + this.formGroup.get('order').setValue(this.order.PUBLISHED); + } const dataTableRequest = this.setPublicDataTableRequest(); this.dmpService.getPaged(dataTableRequest, "listing").pipe(takeUntil(this._destroyed)).subscribe(response => { if (!response) { return []; } this.dmpActivities = response.data; this.totalCount = response.totalCount; this.totalCountDmps.emit(this.dmpActivities.length); + if(this.totalCount > 0 && this.totalCount < this.page*this.pageSize) { + let queryParams = { type: "dmps", page: 1, order: this.formGroup.get("order").value }; + if(this.formGroup.get("like").value) { + queryParams['keyword'] = this.formGroup.get("like").value; + } + this.router.navigate(["/home"], { queryParams: queryParams }) + } }); this.formGroup.get('like').valueChanges .pipe(takeUntil(this._destroyed), debounceTime(500)) @@ -145,11 +199,25 @@ export class RecentEditedDmpActivityComponent extends BaseComponent implements O } } + ngOnChanges() { + if(this.isActive) { + this.updateUrl(); + } + } + + updateUrl() { + let parameters = "?type=dmps"+ + (this.page != 1 ? "&page="+this.page : "") + + (((this.formGroup.get("order").value != this.order.MODIFIED && !this.publicMode) || (this.formGroup.get("order").value != this.order.PUBLISHED && this.publicMode)) ? "&order="+this.formGroup.get("order").value : "") + + (this.formGroup.get("like").value ? ("&keyword="+this.formGroup.get("like").value) : ""); + this.location.go(this.router.url.split('?')[0]+parameters); + } + public isAuthenticated(): boolean { return !!this.authentication.current(); } - private setPublicDataTableRequest(fields?: Array): DataTableRequest { + private setPublicDataTableRequest(fields?: Array, more: boolean = true): DataTableRequest { const dmpCriteria = new DmpCriteria(); dmpCriteria.allVersions = false; dmpCriteria.isPublic = true; @@ -158,7 +226,7 @@ export class RecentEditedDmpActivityComponent extends BaseComponent implements O if (!fields) { fields = new Array('-publishedAt'); } - const dataTableRequest: DataTableRequest = new DataTableRequest(this.startIndex, this.pageSize, { fields: fields }); + const dataTableRequest: DataTableRequest = more ? new DataTableRequest(this.startIndex, this.pageSize, { fields: fields }) : new DataTableRequest(this.offsetLess, this.pageSize, { fields: fields }); dataTableRequest.criteria = dmpCriteria; return dataTableRequest; } @@ -452,6 +520,9 @@ export class RecentEditedDmpActivityComponent extends BaseComponent implements O } refresh(): void { + this.page = 1; + this.updateUrl(); + const fields: Array = [((this.formGroup.get('order').value === 'status') || (this.formGroup.get('order').value === 'label') ? '+' : "-") + this.formGroup.get('order').value]; this.startIndex = 0; const dmpDataTableRequest = this.isAuthenticated() ? new DataTableRequest(this.startIndex, this.pageSize, { fields: fields }) : this.setPublicDataTableRequest(fields); @@ -465,24 +536,59 @@ export class RecentEditedDmpActivityComponent extends BaseComponent implements O this.dmpActivities = response.data; this.totalCount = response.totalCount; this.totalCountDmps.emit(this.dmpActivities.length); + if(response.data.length< this.pageSize) { + this.hasMoreResults = false; + } else { + this.hasMoreResults = true; + } }); } - public loadMore() { + public loadNextOrPrevious(more: boolean = true) { this.startIndex = this.startIndex + this.pageSize; const fields: Array = [((this.formGroup.get('order').value === 'status') || (this.formGroup.get('order').value === 'label') ? '+' : "-") + this.formGroup.get('order').value]; - const request = this.isAuthenticated() ? new DataTableRequest(this.startIndex, this.pageSize, { fields: fields }) : this.setPublicDataTableRequest(fields); + let request; + this.startIndex = (this.page)*this.pageSize; + if(this.page > 1) { + this.offsetLess = (this.page-2)*this.pageSize; + } + if(this.isAuthenticated()) { + if(more) { + request = new DataTableRequest(this.startIndex, this.pageSize, {fields: fields}) + } else { + request = new DataTableRequest(this.offsetLess, this.pageSize, {fields: fields}) + } + } else { + request = this.setPublicDataTableRequest(fields, more); + } if (this.isAuthenticated()) { request.criteria = new DmpCriteria(); request.criteria.like = this.formGroup.get("like").value ? this.formGroup.get("like").value : ""; } this.dmpService.getPaged(request, "listing").pipe(takeUntil(this._destroyed)).subscribe(result => { - if (!result) { return []; } - // this.dmpActivities = this.dmpActivities.concat(result.data); - this.dmpActivities = this.dmpActivities.length > 0 ? this.mergeTwoSortedLists(this.dmpActivities, result.data, this.formGroup.get('order').value) : result.data; - this.totalCountDmps.emit(this.dmpActivities.length); + if (!result || !result.data || result.data.length == 0) { + this.hasMoreResults = false; + // return []; + } else { + this.page = this.page + (more ? 1 : -1); + this.updateUrl(); + // this.dmpActivities = this.dmpActivities.concat(result.data); + // this.dmpActivities = this.dmpActivities.length > 0 ? this.mergeTwoSortedLists(this.dmpActivities, result.data, this.formGroup.get('order').value) : result.data; + this.dmpActivities = result.data; + + if(result.data.length < this.pageSize) { + this.hasMoreResults = false; + } else { + this.hasMoreResults = true; + } + + this.totalCountDmps.emit(this.dmpActivities.length); + if (more) { + this.resultsContainer.nativeElement.scrollIntoView(); + } + } }); } diff --git a/dmp-frontend/src/assets/i18n/de.json b/dmp-frontend/src/assets/i18n/de.json index 040deaf44..3336d369c 100644 --- a/dmp-frontend/src/assets/i18n/de.json +++ b/dmp-frontend/src/assets/i18n/de.json @@ -111,9 +111,11 @@ "VIEW-ALL": "Alles anzeigen", "SHOW-MORE": "Mehr anzeigen", "LOAD-MORE": "Load more", + "LOAD-LESS": "Load less", "SHOW-LESS": "Weniger anzeigen", "LOG-IN": "Einloggen", - "TAKE-A-TOUR": "Do you need help? Take a tour.." + "TAKE-A-TOUR": "Do you need help? Take a tour..", + "NO-MORE-AVAILABLE": "No more results available" }, "PREPOSITIONS": { "OF": "von" diff --git a/dmp-frontend/src/assets/i18n/en.json b/dmp-frontend/src/assets/i18n/en.json index a500c7dc8..f1e34b846 100644 --- a/dmp-frontend/src/assets/i18n/en.json +++ b/dmp-frontend/src/assets/i18n/en.json @@ -111,9 +111,11 @@ "VIEW-ALL": "View All", "SHOW-MORE": "Show more", "LOAD-MORE": "Load more", + "LOAD-LESS": "Load less", "SHOW-LESS": "Show less", "LOG-IN": "Log in", - "TAKE-A-TOUR": "Do you need help? Take a tour.." + "TAKE-A-TOUR": "Do you need help? Take a tour..", + "NO-MORE-AVAILABLE": "No more results available" }, "PREPOSITIONS": { "OF": "of" diff --git a/dmp-frontend/src/assets/i18n/es.json b/dmp-frontend/src/assets/i18n/es.json index bd03742f6..07a2d2acb 100644 --- a/dmp-frontend/src/assets/i18n/es.json +++ b/dmp-frontend/src/assets/i18n/es.json @@ -111,9 +111,11 @@ "VIEW-ALL": "Ver todo", "SHOW-MORE": "Mostrar más", "LOAD-MORE": "Cargar más", + "LOAD-LESS": "Cargar menos", "SHOW-LESS": "Mostrar menos", "LOG-IN": "Iniciar sesión", - "TAKE-A-TOUR": "Necesita ayuda? Hagamos una visita virtual.." + "TAKE-A-TOUR": "Necesita ayuda? Hagamos una visita virtual..", + "NO-MORE-AVAILABLE": "No more results available" }, "PREPOSITIONS": { "OF": "de" diff --git a/dmp-frontend/src/assets/i18n/gr.json b/dmp-frontend/src/assets/i18n/gr.json index 1e4e12445..42fc22313 100644 --- a/dmp-frontend/src/assets/i18n/gr.json +++ b/dmp-frontend/src/assets/i18n/gr.json @@ -111,9 +111,11 @@ "VIEW-ALL": "Προβολή όλων", "SHOW-MORE": "Δείτε περισσότερα", "LOAD-MORE": "Φορτώστε περισσότερα", + "LOAD-LESS": "Φορτώστε λιγότερα", "SHOW-LESS": "Δείτε λιγότερα", "LOG-IN": "Σύνδεση", - "TAKE-A-TOUR": "Χρειάζεστε βοήθεια; Περιηγηθείτε.." + "TAKE-A-TOUR": "Χρειάζεστε βοήθεια; Περιηγηθείτε..", + "NO-MORE-AVAILABLE": "No more results available" }, "PREPOSITIONS": { "OF": "του" diff --git a/dmp-frontend/src/assets/i18n/hr.json b/dmp-frontend/src/assets/i18n/hr.json index a6daad6e3..1583f7d29 100644 --- a/dmp-frontend/src/assets/i18n/hr.json +++ b/dmp-frontend/src/assets/i18n/hr.json @@ -111,9 +111,11 @@ "VIEW-ALL": "Pogledaj sve", "SHOW-MORE": "Prikaži više", "LOAD-MORE": "Učitaj još", + "LOAD-LESS": "Load less", "SHOW-LESS": "Prikaži manje", "LOG-IN": "Prijava", - "TAKE-A-TOUR": "Pokreni virtualni obilazak {{ APP_NAME }}a" + "TAKE-A-TOUR": "Pokreni virtualni obilazak {{ APP_NAME }}a", + "NO-MORE-AVAILABLE": "No more results available" }, "PREPOSITIONS": { "OF": "od" diff --git a/dmp-frontend/src/assets/i18n/pl.json b/dmp-frontend/src/assets/i18n/pl.json index 40ac0c1a5..c69103b8e 100644 --- a/dmp-frontend/src/assets/i18n/pl.json +++ b/dmp-frontend/src/assets/i18n/pl.json @@ -111,10 +111,12 @@ "VIEW-ALL": "Zobacz wszystko", "SHOW-MORE": "Pokaż więcej", "LOAD-MORE": "Załaduj więcej", + "LOAD-LESS": "Załaduj mniej", "SHOW-LESS": "Pokaż mniej", "LOG-IN": "Zaloguj się", - "TAKE-A-TOUR": "Potrzebujesz pomocy? Skorzystaj z przewodnika" - }, + "TAKE-A-TOUR": "Potrzebujesz pomocy? Skorzystaj z przewodnika", + "NO-MORE-AVAILABLE": "No more results available" + }, "PREPOSITIONS": { "OF": "o" }, diff --git a/dmp-frontend/src/assets/i18n/pt.json b/dmp-frontend/src/assets/i18n/pt.json index bfcda0966..7bcef4409 100644 --- a/dmp-frontend/src/assets/i18n/pt.json +++ b/dmp-frontend/src/assets/i18n/pt.json @@ -111,9 +111,11 @@ "VIEW-ALL": "Ver Tudo", "SHOW-MORE": "Mostrar mais", "LOAD-MORE": "Carregar mais", + "LOAD-LESS": "Carregar menos", "SHOW-LESS": "Mostrar menos", "LOG-IN": "Iniciar Sessão", - "TAKE-A-TOUR": "Necessita de ajuda? Faça uma visita guiada." + "TAKE-A-TOUR": "Necessita de ajuda? Faça uma visita guiada.", + "NO-MORE-AVAILABLE": "No more results available" }, "PREPOSITIONS": { "OF": "de" diff --git a/dmp-frontend/src/assets/i18n/sk.json b/dmp-frontend/src/assets/i18n/sk.json index f303b4ea8..9c1cc7003 100644 --- a/dmp-frontend/src/assets/i18n/sk.json +++ b/dmp-frontend/src/assets/i18n/sk.json @@ -111,9 +111,11 @@ "VIEW-ALL": "Pozrieť všetko", "SHOW-MORE": "Ukázať viac", "LOAD-MORE": "Načítať viac", + "LOAD-LESS": "Načítať menej", "SHOW-LESS": "Ukázať menej", "LOG-IN": "Prihlásiť sa", - "TAKE-A-TOUR": "Potrebujete pomoc? Pozrite sa.." + "TAKE-A-TOUR": "Potrebujete pomoc? Pozrite sa..", + "NO-MORE-AVAILABLE": "No more results available" }, "PREPOSITIONS": { "OF": "z" diff --git a/dmp-frontend/src/assets/i18n/sr.json b/dmp-frontend/src/assets/i18n/sr.json index b5defc43b..ab5cf8c9e 100644 --- a/dmp-frontend/src/assets/i18n/sr.json +++ b/dmp-frontend/src/assets/i18n/sr.json @@ -111,9 +111,11 @@ "VIEW-ALL": "Pogledajte sve", "SHOW-MORE": "Prikažite više", "LOAD-MORE": "Učitajte još", + "LOAD-LESS": "Load less", "SHOW-LESS": "Prikažite manje", "LOG-IN": "Prijavljivanje", - "TAKE-A-TOUR": "Da li Vam je potrebna pomoć? Pogledajte uputstvo.." + "TAKE-A-TOUR": "Da li Vam je potrebna pomoć? Pogledajte uputstvo..", + "NO-MORE-AVAILABLE": "No more results available" }, "PREPOSITIONS": { "OF": "od" diff --git a/dmp-frontend/src/assets/i18n/tr.json b/dmp-frontend/src/assets/i18n/tr.json index bb472ab65..cbf7a3889 100644 --- a/dmp-frontend/src/assets/i18n/tr.json +++ b/dmp-frontend/src/assets/i18n/tr.json @@ -111,9 +111,11 @@ "VIEW-ALL": "Tümünü Gör", "SHOW-MORE": "Daha fazla göster", "LOAD-MORE": "Daha fazla göster", + "LOAD-LESS": "Daha az göster", "SHOW-LESS": "Daha az göster", "LOG-IN": "Oturum aç", - "TAKE-A-TOUR": "Yardıma mı ihtiyacın var? Hadi tura çıkalım.." + "TAKE-A-TOUR": "Yardıma mı ihtiyacın var? Hadi tura çıkalım..", + "NO-MORE-AVAILABLE": "No more results available" }, "PREPOSITIONS": { "OF": "nın"