MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

#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 <mat-tab> | Added on <mat-tab-group> 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.
This commit is contained in:
Konstantina Galouni 2023-04-25 17:55:31 +03:00
parent eb1abb1f24
commit 2715db7365
20 changed files with 598 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
dmp-frontend/src/app/ui/dashboard/dashboard.component.html
View File

@ -32,21 +32,26 @@
<div *ngIf="this.hasDmps()" class="col">
<div class="latest-activity-title">{{'DASHBOARD.LATEST-ACTIVITY' | translate}}</div>
<mat-tab-group mat-align-tabs="start" class="remove-border-bottom">
<mat-tab label="{{'DASHBOARD.ALL' | translate}} ({{totalRecents}})">
<app-recent-edited-activity (totalCountRecentEdited)="onCountAllRecent($event)"></app-recent-edited-activity>
<mat-tab-group mat-align-tabs="start" class="remove-border-bottom"
[selectedIndex]="indexFromCurrentType" (selectedTabChange)="currentType = $event.tab.ariaLabel">
<!-- <mat-tab aria-label="recent" label="{{'DASHBOARD.ALL' | translate}} ({{totalRecents}})">-->
<mat-tab aria-label="recent" label="{{'DASHBOARD.ALL' | translate}}">
<app-recent-edited-activity (totalCountRecentEdited)="onCountAllRecent($event)" [isActive]="currentType == 'recent'"></app-recent-edited-activity>
<div *ngIf="totalRecents === 0" class="empty-list">{{'DASHBOARD.EMPTY-LIST' | translate}}</div>
</mat-tab>
<mat-tab label="{{'DASHBOARD.DRAFTS' | translate}} ({{totalDraftDatasets}})">
<app-drafts (totalCountDraftDatasets)="onCountDraftDatasets($event)"></app-drafts>
<!-- <mat-tab aria-label="draft" label="{{'DASHBOARD.DRAFTS' | translate}} ({{totalDraftDatasets}})">-->
<mat-tab aria-label="drafts" label="{{'DASHBOARD.DRAFTS' | translate}}">
<app-drafts (totalCountDraftDatasets)="onCountDraftDatasets($event)" [isActive]="currentType == 'drafts'"></app-drafts>
<div *ngIf="totalDraftDatasets === 0" class="empty-list">{{'DASHBOARD.EMPTY-LIST' | translate}}</div>
</mat-tab>
<mat-tab label="{{'DASHBOARD.DMPS' | translate}} ({{totalDmps}})">
<app-recent-edited-dmp-activity (totalCountDmps)="onCountDmps($event)"></app-recent-edited-dmp-activity>
</mat-tab>>
<!-- <mat-tab aria-label="dmps" label="{{'DASHBOARD.DMPS' | translate}} ({{totalDmps}})">-->
<mat-tab aria-label="dmps" label="{{'DASHBOARD.DMPS' | translate}}">
<app-recent-edited-dmp-activity (totalCountDmps)="onCountDmps($event)" [isActive]="currentType == 'dmps'"></app-recent-edited-dmp-activity>
<div *ngIf="totalDmps === 0" class="empty-list">{{'DASHBOARD.EMPTY-LIST' | translate}}</div>
</mat-tab>
<mat-tab label="{{'DASHBOARD.DATASET-DESCRIPTIONS' | translate}} ({{totalDatasets}})">
<app-recent-edited-dataset-activity (totalCountDatasets)="onCountDatasets($event)"></app-recent-edited-dataset-activity>
<!-- <mat-tab aria-label="datasets" label="{{'DASHBOARD.DATASET-DESCRIPTIONS' | translate}} ({{totalDatasets}})">-->
<mat-tab aria-label="datasets" label="{{'DASHBOARD.DATASET-DESCRIPTIONS' | translate}}">
<app-recent-edited-dataset-activity (totalCountDatasets)="onCountDatasets($event)" [isActive]="currentType == 'datasets'"></app-recent-edited-dataset-activity>
<div *ngIf="totalDatasets === 0" class="empty-list">{{'DASHBOARD.EMPTY-LIST' | translate}}</div>
<div *ngIf="totalDatasets === 0" class="col-auto d-flex justify-content-center">
<button mat-raised-button class="add-dataset" (click)="addNewDataset()">
@ -124,17 +129,21 @@
</div>
<div *ngIf="hasDmps()" class="col activity">
<div class="latest-activity-title">{{'DASHBOARD.LATEST-ACTIVITY' | translate}}</div>
<mat-tab-group mat-align-tabs="start" class="remove-border-bottom">
<mat-tab label="{{'DASHBOARD.ALL' | translate}} ({{totalRecents}})">
<app-recent-edited-activity (totalCountRecentEdited)="onCountAllRecent($event)"></app-recent-edited-activity>
<mat-tab-group mat-align-tabs="start" class="remove-border-bottom" (
[selectedIndex]="indexFromCurrentType" selectedTabChange)="currentType = $event.tab.ariaLabel">
<!-- <mat-tab aria-label="recent" label="{{'DASHBOARD.ALL' | translate}} ({{totalRecents}})">-->
<mat-tab aria-label="recent" label="{{'DASHBOARD.ALL' | translate}}">
<app-recent-edited-activity (totalCountRecentEdited)="onCountAllRecent($event)" [isActive]="currentType == 'recent'"></app-recent-edited-activity>
<div *ngIf="totalRecents === 0" class="empty-list">{{'DASHBOARD.EMPTY-LIST' | translate}}</div>
</mat-tab>
<mat-tab label="{{'DASHBOARD.PUBLIC-DMPS' | translate}} ({{totalDmps}})">
<app-recent-edited-dmp-activity (totalCountDmps)="onCountDmps($event)"></app-recent-edited-dmp-activity>
<!-- <mat-tab aria-label="dmps" label="{{'DASHBOARD.PUBLIC-DMPS' | translate}} ({{totalDmps}})">-->
<mat-tab aria-label="dmps" label="{{'DASHBOARD.PUBLIC-DMPS' | translate}}">
<app-recent-edited-dmp-activity (totalCountDmps)="onCountDmps($event)" [isActive]="currentType == 'dmps'"></app-recent-edited-dmp-activity>
<div *ngIf="totalDmps === 0" class="empty-list">{{'DASHBOARD.EMPTY-LIST' | translate}}</div>
</mat-tab>
<mat-tab label="{{'DASHBOARD.PUBLIC-DATASETS' | translate}} ({{totalDatasets}})">
<app-recent-edited-dataset-activity (totalCountDatasets)="onCountDatasets($event)"></app-recent-edited-dataset-activity>
<!-- <mat-tab aria-label="datasets" label="{{'DASHBOARD.PUBLIC-DATASETS' | translate}} ({{totalDatasets}})">-->
<mat-tab aria-label="datasets" label="{{'DASHBOARD.PUBLIC-DATASETS' | translate}}">
<app-recent-edited-dataset-activity (totalCountDatasets)="onCountDatasets($event)" [isActive]="currentType == 'datasets'"></app-recent-edited-dataset-activity>
<div *ngIf="totalDatasets === 0" class="empty-list">{{'DASHBOARD.EMPTY-LIST' | translate}}</div>
<!-- <div *ngIf="totalDatasets === 0" class="col-auto d-flex justify-content-center">
<button mat-raised-button class="add-dataset" [routerLink]="['/datasets/new']">

27
dmp-frontend/src/app/ui/dashboard/dashboard.component.ts
View File

@ -72,6 +72,7 @@ export class DashboardComponent extends BaseComponent implements OnInit, IBreadC
datasetText: string;
importFileText: string;
startWizardText: string;
currentType: string = "recent";
constructor(
private router: Router,
@ -98,6 +99,15 @@ export class DashboardComponent extends BaseComponent implements OnInit, IBreadC
ngOnInit() {
this.route.queryParams.subscribe(params => {
let type = params['type'];
if(type || type == "recent" || (type == "drafts" && this.isAuthenticated()) || type == "dmps" || type == "datasets") {
this.currentType = type;
} else {
this.currentType = "recent";
}
});
this.matomoService.trackPageView('Home Dashboard');
// if (this.isAuthenticated()) {
// this.userService.getRecentActivity()
@ -146,6 +156,23 @@ export class DashboardComponent extends BaseComponent implements OnInit, IBreadC
}));
}
public get indexFromCurrentType() {
if(this.currentType == "recent") {
return 0;
}
if(this.currentType == "drafts") {
return 1;
}
if(this.currentType == "dmps") {
return this.isAuthenticated() ? 2 : 1;
}
if(this.currentType == "datasets") {
return this.isAuthenticated() ? 3 : 2;
}
return 0;
}
// ngAfterContentChecked(): void {
// if (this.dashboardStatisticsData && this.dashboardStatisticsData.totalDataManagementPlanCount === 0) {
// this.openTour();

12
dmp-frontend/src/app/ui/dashboard/drafts/drafts.component.html
View File

@ -1,4 +1,4 @@
<div>
<div id="drafts" #drafts>
<div class="d-flex flex-direction-row pt-4">
<!-- Sort by -->
<span class="d-flex align-items-center">{{'DMP-LISTING.SORT-BY' | translate}}:</span>
@ -19,6 +19,9 @@
</mat-form-field>
<!-- End of Search Filter -->
</div>
<div *ngIf="datasetDrafts && datasetDrafts.length > 0 && page > 1" class="d-flex justify-content-center">
<button type="button" class="btn-load-more" (click)="loadNextOrPrevious(false)">{{'GENERAL.ACTIONS.LOAD-LESS' | translate}}</button>
</div>
<div *ngFor="let activity of datasetDrafts">
<div class="dataset-card">
<a [routerLink]="['../datasets/overview/' + activity.id]" class="pointer">
@ -82,8 +85,11 @@
</mat-menu>
</div>
</div>
<div *ngIf="datasetDrafts && datasetDrafts.length > 0 && datasetDrafts.length >= startIndex + pageSize" class="d-flex justify-content-center">
<button type="button" class="btn-load-more" (click)="loadMore()">{{'GENERAL.ACTIONS.LOAD-MORE' | translate}}</button>
<div class="text-muted d-flex justify-content-center mt-5" *ngIf="!hasMoreResults && datasetDrafts && datasetDrafts.length > 0">
{{'GENERAL.ACTIONS.NO-MORE-AVAILABLE' | translate}}
</div>
<div *ngIf="datasetDrafts && datasetDrafts.length > 0 && datasetDrafts.length >= pageSize && hasMoreResults" class="d-flex justify-content-center">
<button type="button" class="btn-load-more" (click)="loadNextOrPrevious()">{{'GENERAL.ACTIONS.LOAD-MORE' | translate}}</button>
</div>
</div>
<!-- <div class="card card-draft">

113
dmp-frontend/src/app/ui/dashboard/drafts/drafts.component.ts
View File

@ -1,11 +1,11 @@
import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
import {Component, OnInit, Input, EventEmitter, Output, ViewChild} from '@angular/core';
import { DatasetService } from '../../../core/services/dataset/dataset.service';
import { DataTableRequest } from '../../../core/model/data-table/data-table-request';
import { DatasetCriteria } from '../../../core/query/dataset/dataset-criteria';
import { DatasetListingModel } from '../../../core/model/dataset/dataset-listing';
import { AuthService } from '../../../core/services/auth/auth.service';
import { RecentActivityType } from '../../../core/common/enum/recent-activity-type';
import { Router } from '@angular/router';
import {ActivatedRoute, Router} from '@angular/router';
import { DmpStatus } from '../../../core/common/enum/dmp-status';
import { Principal } from '@app/core/model/auth/principal';
import { TranslateService } from '@ngx-translate/core';
@ -38,6 +38,7 @@ export class DraftsComponent extends BaseComponent implements OnInit {
@Input() routerLink: string;
@Output() totalCountDraftDatasets: EventEmitter<any> = new EventEmitter();
@ViewChild("drafts") resultsContainer;
datasetDrafts: DatasetListingModel[];
datasetDraftsTypeEnum = RecentActivityType;
status: number;
@ -45,6 +46,9 @@ export class DraftsComponent extends BaseComponent implements OnInit {
totalCount: number;
startIndex: number = 0;
pageSize: number = 5;
offsetLess: number = 0;
hasMoreResults:boolean = true;
public formGroup = new FormBuilder().group({
like: new FormControl(),
order: new FormControl()
@ -52,7 +56,10 @@ export class DraftsComponent extends BaseComponent implements OnInit {
order = RecentActivityOrder;
page: number = 1;
@Input() isActive: boolean = false;
constructor(
private route: ActivatedRoute,
private router: Router,
private datasetService: DatasetService,
private authentication: AuthService,
@ -71,12 +78,43 @@ export class DraftsComponent extends BaseComponent implements OnInit {
ngOnInit() {
this.matomoService.trackPageView('Drafts');
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(order === undefined || (order != this.order.MODIFIED && order != this.order.LABEL)) {
order = this.order.MODIFIED;
}
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();
}
// else {
// this.page = 1;
// this.formGroup.get('order').setValue(this.order.MODIFIED);
// this.formGroup.get("like").setValue("");
// }
});
// const fields: Array<string> = [];
// fields.push('-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<string> = [((this.formGroup.get('order').value === 'status') || (this.formGroup.get('order').value === 'label') ? '+' : "-") + this.formGroup.get('order').value];
const dmpDataTableRequest: DataTableRequest<DatasetCriteria> = new DataTableRequest(0, 5, { fields: fields });
const dmpDataTableRequest: DataTableRequest<DatasetCriteria> = new DataTableRequest(this.startIndex, 5, { fields: fields });
dmpDataTableRequest.criteria = new DatasetCriteria();
dmpDataTableRequest.criteria.like = this.formGroup.get('like').value;
dmpDataTableRequest.criteria.status = DmpStatus.Draft;
this.datasetService.getPaged(dmpDataTableRequest)
.pipe(takeUntil(this._destroyed))
@ -84,6 +122,13 @@ export class DraftsComponent extends BaseComponent implements OnInit {
this.datasetDrafts = response.data;
this.totalCount = response.totalCount;
this.totalCountDraftDatasets.emit(this.datasetDrafts.length);
if(this.totalCount > 0 && this.totalCount < this.page*this.pageSize) {
let queryParams = { type: "drafts", 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,6 +138,20 @@ export class DraftsComponent extends BaseComponent implements OnInit {
.subscribe(x => this.refresh());
}
ngOnChanges() {
if(this.isActive) {
this.updateUrl();
}
}
updateUrl() {
let parameters = "?type=drafts"+
(this.page != 1 ? "&page="+this.page : "") +
(this.formGroup.get("order").value != this.order.MODIFIED ? "&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);
}
redirect(id: string, type: RecentActivityType) {
switch (type) {
case RecentActivityType.Grant: {
@ -311,6 +370,9 @@ export class DraftsComponent extends BaseComponent implements OnInit {
}
refresh(): void {
this.page = 1;
this.updateUrl();
// const fields: Array<string> = [];
// fields.push('-modified');
const fields: Array<string> = [((this.formGroup.get('order').value === 'status') || (this.formGroup.get('order').value === 'label') ? '+' : "-") + this.formGroup.get('order').value];
@ -325,23 +387,52 @@ export class DraftsComponent extends BaseComponent implements OnInit {
this.datasetDrafts = response.data;
this.totalCount = response.totalCount;
this.totalCountDraftDatasets.emit(this.datasetDrafts.length);
if(response.data.length< this.pageSize) {
this.hasMoreResults = false;
} else {
this.hasMoreResults = true;
}
});
}
public loadMore() {
this.startIndex = this.startIndex + this.pageSize;
public loadNextOrPrevious(more: boolean = true) {
// const fields: Array<string> = ["-modified"];
const fields: Array<string> = [((this.formGroup.get('order').value === 'status') || (this.formGroup.get('order').value === 'label') ? '+' : "-") + this.formGroup.get('order').value];
const request = new DataTableRequest<DatasetCriteria>(this.startIndex, this.pageSize, { fields: fields });
let request;
this.startIndex = (this.page)*this.pageSize;
if(this.page > 1) {
this.offsetLess = (this.page-2)*this.pageSize;
}
if(more) {
// this.startIndex = this.startIndex + this.pageSize;
request = new DataTableRequest<DatasetCriteria>(this.startIndex, this.pageSize, { fields: fields });
} else {
request = new DataTableRequest<DatasetCriteria>(this.offsetLess, this.pageSize, {fields: fields});
}
request.criteria = new DatasetCriteria();
request.criteria.status = DmpStatus.Draft;
request.criteria.like = this.formGroup.get("like").value;;
this.datasetService.getPaged(request).pipe(takeUntil(this._destroyed)).subscribe(result => {
if (!result) { return []; }
// this.datasetDrafts = this.datasetDrafts.concat(result.data);
this.datasetDrafts = this.datasetDrafts.length > 0 ? this.mergeTwoSortedLists(this.datasetDrafts, result.data, this.formGroup.get('order').value) : result.data;
this.totalCountDraftDatasets.emit(this.datasetDrafts.length);
if (!result || !result.data || result.data.length == 0) {
this.hasMoreResults = false;
// return [];
} else {
// this.datasetDrafts = this.datasetDrafts.concat(result.data);
// this.datasetDrafts = this.datasetDrafts.length > 0 ? this.mergeTwoSortedLists(this.datasetDrafts, result.data, this.formGroup.get('order').value) : result.data;
this.page = this.page + (more ? 1 : -1);
this.updateUrl();
this.datasetDrafts = result.data;
if(result.data.length < this.pageSize) {
this.hasMoreResults = false;
} else {
this.hasMoreResults = true;
}
this.totalCountDraftDatasets.emit(this.datasetDrafts.length);
if (more) {
this.resultsContainer.nativeElement.scrollIntoView();
}
}
});
}

10
dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.html
View File

@ -1,7 +1,7 @@
<div class="col-md-12 d-flex justify-content-center" *ngIf="allRecentActivities == null">
<span class="empty-list">{{'DMP-LISTING.EMPTY-LIST' | translate}}</span>
</div>
<div *ngIf="allRecentActivities != null">
<div *ngIf="allRecentActivities != null" id="results" #results>
<div class="d-flex flex-direction-row pt-4">
<!-- Sort by -->
<span class="d-flex align-items-center">{{'DMP-LISTING.SORT-BY' | translate}}:</span>
@ -23,6 +23,9 @@
</mat-form-field>
<!-- End of Search Filter -->
</div>
<div *ngIf="allRecentActivities && allRecentActivities.length > 0 && page > 1" class="d-flex justify-content-center">
<button type="button" class="btn-load-more" (click)="loadNextOrPrevious(false)">{{'GENERAL.ACTIONS.LOAD-LESS' | translate}}</button>
</div>
<div *ngFor="let activity of allRecentActivities">
<div *ngIf="activity && activity.type === recentActivityTypeEnum.Dmp.valueOf()">
<div class="dmp-card">
@ -165,8 +168,11 @@
</div>
</div>
</div>
<div class="text-muted d-flex justify-content-center mt-5" *ngIf="!hasMoreActivity && allRecentActivities && allRecentActivities.length > 0">
{{'GENERAL.ACTIONS.NO-MORE-AVAILABLE' | translate}}
</div>
<div *ngIf="allRecentActivities && allRecentActivities.length > 0 && (allRecentActivities.length >= startIndex + pageSize) && hasMoreActivity" class="d-flex justify-content-center">
<button type="button" class="btn-load-more" (click)="loadMore()">{{'GENERAL.ACTIONS.LOAD-MORE' | translate}}</button>
<button type="button" class="btn-load-more" (click)="loadNextOrPrevious()">{{'GENERAL.ACTIONS.LOAD-MORE' | translate}}</button>
</div>
</div>

163
dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.ts
View File

@ -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<any> = 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<string> = [((this.formGroup.get('order').value === 'status') || (this.formGroup.get('order').value === 'label') ? '+' : "-") + this.formGroup.get('order').value];
const allDataTableRequest: DataTableMultiTypeRequest<RecentActivityCriteria> = new DataTableMultiTypeRequest(0, 0, 5, { fields: fields });
const allDataTableRequest: DataTableMultiTypeRequest<RecentActivityCriteria> = 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<string> = [((this.formGroup.get('order').value === 'status') || (this.formGroup.get('order').value === 'label') ? '+' : "-") + this.formGroup.get('order').value];
// const fields: Array<string> = ["-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<string> = [((this.formGroup.get('order').value === 'status') || (this.formGroup.get('order').value === 'label') ? '+' : "-") + this.formGroup.get('order').value];
// const fields: Array<string> = ["-modified"];
const request = new DataTableMultiTypeRequest<RecentActivityCriteria>(this.dmpOffset, this.datasetOffset, this.pageSize, { fields: fields });
let request;
if(more) {
request = new DataTableMultiTypeRequest<RecentActivityCriteria>(this.dmpOffset, this.datasetOffset, this.pageSize, {fields: fields});
} else {
request = new DataTableMultiTypeRequest<RecentActivityCriteria>(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<this.pageSize) this.hasMoreActivity = false;
// this.allRecentActivities = this.allRecentActivities.concat(result);
this.allRecentActivities = this.allRecentActivities.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();
}
}
});
}

12
dmp-frontend/src/app/ui/dashboard/recent-edited-dataset-activity/recent-edited-dataset-activity.component.html
View File

@ -1,4 +1,4 @@
<div *ngIf="datasetActivities != null">
<div *ngIf="datasetActivities != null" id="datasets" #datasets>
<div class="d-flex flex-direction-row pt-4">
<!-- Sort by -->
<span class="d-flex align-items-center">{{'DMP-LISTING.SORT-BY' | translate}}:</span>
@ -20,6 +20,9 @@
</mat-form-field>
<!-- End of Search Filter -->
</div>
<div *ngIf="datasetActivities && datasetActivities.length > 0 && page > 1" class="d-flex justify-content-center">
<button type="button" class="btn-load-more" (click)="loadNextOrPrevious(false)">{{'GENERAL.ACTIONS.LOAD-LESS' | translate}}</button>
</div>
<div *ngFor="let activity of datasetActivities">
<div class="dataset-card">
<a [routerLink]="goToOverview(activity.id)" class="pointer">
@ -85,7 +88,10 @@
</mat-menu>
</div>
</div>
<div *ngIf="datasetActivities && datasetActivities.length > 0 && datasetActivities.length >= startIndex + pageSize" class="d-flex justify-content-center">
<button type="button" class="btn-load-more" (click)="loadMore()">{{'GENERAL.ACTIONS.LOAD-MORE' | translate}}</button>
<div class="text-muted d-flex justify-content-center mt-5" *ngIf="!hasMoreResults && datasetActivities && datasetActivities.length > 0">
{{'GENERAL.ACTIONS.NO-MORE-AVAILABLE' | translate}}
</div>
<div *ngIf="datasetActivities && datasetActivities.length > 0 && datasetActivities.length >= pageSize && hasMoreResults" class="d-flex justify-content-center">
<button type="button" class="btn-load-more" (click)="loadNextOrPrevious()">{{'GENERAL.ACTIONS.LOAD-MORE' | translate}}</button>
</div>
</div>

136
dmp-frontend/src/app/ui/dashboard/recent-edited-dataset-activity/recent-edited-dataset-activity.component.ts
View File

@ -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<any> = 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<string> = ["-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<string> = [((this.formGroup.get('order').value === 'status') || (this.formGroup.get('order').value === 'label') ? '+' : "-") + this.formGroup.get('order').value];
const datasetDataTableRequest: DataTableRequest<DatasetCriteria> = new DataTableRequest(0, this.pageSize, { fields: fields });
const datasetDataTableRequest: DataTableRequest<DatasetCriteria> = 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<string>): DataTableRequest<DatasetCriteria> {
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<string>, more: boolean = true): DataTableRequest<DatasetCriteria> {
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<string>('-dmp:publishedAt|join|');
}
const dataTableRequest: DataTableRequest<DatasetCriteria> = new DataTableRequest(this.startIndex, this.pageSize, { fields: fields });
const dataTableRequest: DataTableRequest<DatasetCriteria> = 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<string> = [((this.formGroup.get('order').value === 'status') || (this.formGroup.get('order').value === 'label') ? '+' : "-") + this.formGroup.get('order').value];
const datasetDataTableRequest = this.isAuthenticated() ? new DataTableRequest<DatasetCriteria>(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<string> = [((this.formGroup.get('order').value === 'status') || (this.formGroup.get('order').value === 'label') ? '+' : "-") + this.formGroup.get('order').value];
const request = this.isAuthenticated() ? new DataTableRequest<DatasetCriteria>(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<DatasetCriteria>(this.startIndex, this.pageSize, { fields: fields });
} else {
request = new DataTableRequest<DatasetCriteria>(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();
}
}
});
}

12
dmp-frontend/src/app/ui/dashboard/recent-edited-dmp-activity/recent-edited-dmp-activity.component.html
View File

@ -1,4 +1,4 @@
<div *ngIf="dmpActivities != null">
<div *ngIf="dmpActivities != null" id="dmps" #dmps>
<div class="d-flex flex-direction-row pt-4">
<!-- Sort by -->
<span class="d-flex align-items-center">{{'DMP-LISTING.SORT-BY' | translate}}:</span>
@ -20,6 +20,9 @@
</mat-form-field>
<!-- End of Search Filter -->
</div>
<div *ngIf="dmpActivities && dmpActivities.length > 0 && page > 1" class="d-flex justify-content-center">
<button type="button" class="btn-load-more" (click)="loadNextOrPrevious(false)">{{'GENERAL.ACTIONS.LOAD-LESS' | translate}}</button>
</div>
<div *ngFor="let activity of dmpActivities">
<div class="dmp-card">
<a [routerLink]="navigateToUrl(activity.id)" class="pointer">
@ -92,7 +95,10 @@
</mat-menu>
</div>
</div>
<div *ngIf="dmpActivities && dmpActivities.length > 0 && this.startIndex < this.totalCount - 1 && this.pageSize < this.totalCount - 1" class="d-flex justify-content-center">
<button type="button" class="btn-load-more" (click)="loadMore()">{{'GENERAL.ACTIONS.LOAD-MORE' | translate}}</button>
<div class="text-muted d-flex justify-content-center mt-5" *ngIf="!hasMoreResults && dmpActivities && dmpActivities.length > 0">
{{'GENERAL.ACTIONS.NO-MORE-AVAILABLE' | translate}}
</div>
<div *ngIf="dmpActivities && dmpActivities.length > 0 && dmpActivities.length >= pageSize && hasMoreResults" class="d-flex justify-content-center">
<button type="button" class="btn-load-more" (click)="loadNextOrPrevious()">{{'GENERAL.ACTIONS.LOAD-MORE' | translate}}</button>
</div>
</div>

134
dmp-frontend/src/app/ui/dashboard/recent-edited-dmp-activity/recent-edited-dmp-activity.component.ts
View File

@ -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<any> = 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<string> = ["-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<string> = [((this.formGroup.get('order').value === 'status') || (this.formGroup.get('order').value === 'label') ? '+' : "-") + this.formGroup.get('order').value];
const dmpDataTableRequest: DataTableRequest<DmpCriteria> = new DataTableRequest(0, 5, { fields: fields });
const dmpDataTableRequest: DataTableRequest<DmpCriteria> = 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<string>): DataTableRequest<DmpCriteria> {
private setPublicDataTableRequest(fields?: Array<string>, more: boolean = true): DataTableRequest<DmpCriteria> {
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<string>('-publishedAt');
}
const dataTableRequest: DataTableRequest<DmpCriteria> = new DataTableRequest(this.startIndex, this.pageSize, { fields: fields });
const dataTableRequest: DataTableRequest<DmpCriteria> = 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<string> = [((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<DmpCriteria>(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<string> = [((this.formGroup.get('order').value === 'status') || (this.formGroup.get('order').value === 'label') ? '+' : "-") + this.formGroup.get('order').value];
const request = this.isAuthenticated() ? new DataTableRequest<DmpCriteria>(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<DmpCriteria>(this.startIndex, this.pageSize, {fields: fields})
} else {
request = new DataTableRequest<DmpCriteria>(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();
}
}
});
}

4
dmp-frontend/src/assets/i18n/de.json
View File

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

4
dmp-frontend/src/assets/i18n/en.json
View File

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

4
dmp-frontend/src/assets/i18n/es.json
View File

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

4
dmp-frontend/src/assets/i18n/gr.json
View File

@ -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": "του"

4
dmp-frontend/src/assets/i18n/hr.json
View File

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

6
dmp-frontend/src/assets/i18n/pl.json
View File

@ -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"
},

4
dmp-frontend/src/assets/i18n/pt.json
View File

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

4
dmp-frontend/src/assets/i18n/sk.json
View File

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

4
dmp-frontend/src/assets/i18n/sr.json
View File

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

4
dmp-frontend/src/assets/i18n/tr.json
View File

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