Merge remote-tracking branch 'origin/ui-redesign' into ui-redesign

dmp-frontend/src/app/core/services/dashboard/dashboard.service.ts

@@ -31,4 +31,8 @@ export class DashboardService {
 	getRecentActivity(request: DataTableRequest<RecentActivityCriteria>): Observable<RecentActivityModel[]> {
 		return this.http.post<RecentActivityModel[]>(this.actionUrl + 'recentActivity', request, {headers: this.headers});
 	}
+
+	// getRecentActivity(request: DataTableRequest<RecentActivityCriteria>): Observable<DataTableData<RecentActivityModel>> {
+	// 	return this.http.post<DataTableData<RecentActivityModel>>(this.actionUrl + 'recentActivity', request, {headers: this.headers});
+	// }
 }

dmp-frontend/src/app/ui/dashboard/dashboard.component.html

@@ -51,22 +51,18 @@
 					<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}})">
-							<div *ngIf="totalRecents === 0" class="col-auto pt-3"><input type="text" class="d-flex ml-auto" placeholder="&nbsp;&nbsp;&#xf002;&nbsp;&nbsp;Search"></div>
 							<app-recent-edited-activity (totalCountRecentEdited)="onCountAllRecent($event)"></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}})">
-							<div *ngIf="totalDraftDatasets === 0" class="col-auto pt-3"><input type="text" class="d-flex ml-auto" placeholder="&nbsp;&nbsp;&#xf002;&nbsp;&nbsp;Search"></div>
 							<app-drafts (totalCountDraftDatasets)="onCountDraftDatasets($event)"></app-drafts>
 							<div *ngIf="totalDraftDatasets === 0" class="empty-list">{{'DASHBOARD.EMPTY-LIST' | translate}}</div>
 						</mat-tab>
 						<mat-tab label="{{'DASHBOARD.DMPS' | translate}}  ({{totalDmps}})">
-							<div *ngIf="totalDmps === 0" class="col-auto pt-3"><input type="text" class="d-flex ml-auto" placeholder="&nbsp;&nbsp;&#xf002;&nbsp;&nbsp;Search"></div>
 							<app-recent-edited-dmp-activity (totalCountDmps)="onCountDmps($event)"></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}})">
-							<div *ngIf="totalDatasets === 0" class="col-auto pt-3"><input type="text" class="d-flex ml-auto" placeholder="&nbsp;&nbsp;&#xf002;&nbsp;&nbsp;Search"></div>
 							<app-recent-edited-dataset-activity (totalCountDatasets)="onCountDatasets($event)"></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">

dmp-frontend/src/app/ui/dashboard/dashboard.module.ts

@@ -17,6 +17,7 @@ import { ConfirmationDialogModule } from '@common/modules/confirmation-dialog/co
 import { RecentEditedDatasetActivityComponent } from './recent-edited-dataset-activity/recent-edited-dataset-activity.component';
 import { DatasetCopyDialogModule } from '../dataset/dataset-wizard/dataset-copy-dialogue/dataset-copy-dialogue.module';
 import { RecentEditedDmpActivityComponent } from './recent-edited-dmp-activity/recent-edited-dmp-activity.component';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 @NgModule({
 	imports: [
@@ -24,7 +25,9 @@ import { RecentEditedDmpActivityComponent } from './recent-edited-dmp-activity/r
 		DashboardRoutingModule,
 		ExportMethodDialogModule,
 		ConfirmationDialogModule,
-		DatasetCopyDialogModule
+		DatasetCopyDialogModule,
+		FormsModule,
+		ReactiveFormsModule
 	],
 	declarations: [
 		DashboardComponent,

dmp-frontend/src/app/ui/dashboard/drafts/drafts.component.css

@@ -176,6 +176,24 @@ input[type="text"] {
 	cursor: pointer;
 }
 
+.search-form {
+	text-align: left;
+	width: 20rem;
+}
+
+.search-form mat-icon {
+	color: #129d99;
+}
+
+::ng-deep .search-form .mat-form-field-wrapper {
+	background-color: white !important;
+	padding-bottom: 0 !important;
+}
+
+::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
+	padding: 0.3rem 0rem 0.6rem 0rem !important;
+}
+
 /* .grey {
   color: rgb(162, 162, 162);
 }

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

@@ -1,4 +1,12 @@
-<div *ngFor="let activity of datasetDrafts">
+<div>
+	<!-- Search Filter-->
+	<mat-form-field appearance="outline" class="search-form ml-auto col-auto pr-0" floatLabel="never">
+		<mat-icon matSuffix>search</mat-icon>
+		<input matInput placeholder="{{'CRITERIA.DATA-SETS.DRAFT-LIKE'| translate}}" name="likeCriteria" [formControl]="formGroup.get('like')">
+		<mat-error *ngIf="formGroup.get('like').hasError('backendError')">{{formGroup.get('like').getError('backendError').message}}</mat-error>
+	</mat-form-field>
+	<!-- End of Search Filter -->
+	<div *ngFor="let activity of datasetDrafts">
 		<div class="dataset-card">
 			<div [routerLink]="['../datasets/overview/' + activity.id]" class="pointer">
 				<div class="d-flex flex-direction-row">
@@ -57,11 +65,11 @@
 				</button>
 			</mat-menu>
 		</div>
-</div>
+	</div>
-<div *ngIf="datasetDrafts && datasetDrafts.length > 0" class="d-flex justify-content-center">
+	<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>
 </div>
-
 <!-- <div class="card card-draft">
 	<div class="card-header card-header-plain">
 		<div class="card-desc">

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

@@ -5,14 +5,14 @@ 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 { 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';
 import { takeUntil } from 'rxjs/operators';
 import { ConfirmationDialogComponent } from '@common/modules/confirmation-dialog/confirmation-dialog.component';
 import { DatasetCopyDialogueComponent } from '@app/ui/dataset/dataset-wizard/dataset-copy-dialogue/dataset-copy-dialogue.component';
-import { FormControl } from '@angular/forms';
+import { FormControl, FormBuilder } from '@angular/forms';
 import { BaseComponent } from '@common/base/base.component';
 import { MatDialog } from '@angular/material';
 import { DatasetWizardService } from '@app/core/services/dataset-wizard/dataset-wizard.service';
@@ -37,8 +37,11 @@ export class DraftsComponent extends BaseComponent implements OnInit {
 	status: number;
 
 	totalCount: number;
-	startIndex: number = 4;
+	startIndex: number = 0;
 	pageSize: number = 5;
+	public formGroup = new FormBuilder().group({
+		like: new FormControl()
+	});
 
 	constructor(
 		private router: Router,
@@ -62,9 +65,11 @@ export class DraftsComponent extends BaseComponent implements OnInit {
 		this.datasetService.getPaged(dmpDataTableRequest).subscribe(response => {
 			this.datasetDrafts = response.data;
 			this.totalCount = response.totalCount;
-			this.totalCountDraftDatasets.emit(this.pageSize);
+			this.totalCountDraftDatasets.emit(this.datasetDrafts.length);
-			// this.totalCountDraftDatasets.emit(this.totalCount);
 		});
+		this.formGroup.get('like').valueChanges
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(x => this.refresh());
 	}
 
 	redirect(id: string, type: RecentActivityType) {
@@ -236,18 +241,33 @@ export class DraftsComponent extends BaseComponent implements OnInit {
 		return filename;
 	}
 
+	refresh(): void {
+		const fields: Array<string> = [];
+		fields.push('-modified');
+		this.startIndex = 0;
+		const dmpDataTableRequest: DataTableRequest<DatasetCriteria> = new DataTableRequest(0, 5, { fields: fields });
+		dmpDataTableRequest.criteria = new DatasetCriteria();
+		dmpDataTableRequest.criteria.status = DmpStatus.Draft;
+		dmpDataTableRequest.criteria.like = this.formGroup.get("like").value;
+		this.datasetService.getPaged(dmpDataTableRequest).subscribe(response => {
+			this.datasetDrafts = response.data;
+			this.totalCount = response.totalCount;
+			this.totalCountDraftDatasets.emit(this.datasetDrafts.length);
+		});
+	}
+
 	public loadMore() {
+		this.startIndex = this.startIndex + this.pageSize;
 		const fields: Array<string> = ["-modified"];
 		const request = new DataTableRequest<DatasetCriteria>(this.startIndex, this.pageSize, { fields: fields });
-
 		request.criteria = new DatasetCriteria();
-		request.criteria.like = "";
+		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.totalCountDraftDatasets.emit(this.datasetDrafts.length);
 		});
-		this.startIndex = this.startIndex + this.pageSize;
-		this.totalCountDraftDatasets.emit(this.startIndex + 1);
 	}
 }

dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.css

@@ -176,6 +176,24 @@ input[type="text"] {
 	cursor: pointer;
 }
 
+.search-form {
+	text-align: left;
+	width: 20rem;
+}
+
+.search-form mat-icon {
+	color: #129d99;
+}
+
+::ng-deep .search-form .mat-form-field-wrapper {
+	background-color: white !important;
+	padding-bottom: 0 !important;
+}
+
+::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
+	padding: 0.3rem 0rem 0.6rem 0rem !important;
+}
+
 /* th {
   text-transform: uppercase;
 }

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

@@ -1,4 +1,11 @@
 <div *ngIf="allRecentActivities != null">
+	<!-- Search Filter-->
+	<mat-form-field appearance="outline" class="search-form ml-auto col-auto pr-0" floatLabel="never">
+		<mat-icon matSuffix>search</mat-icon>
+		<input matInput placeholder="{{'CRITERIA.LIKE'| translate}}" name="likeCriteria" [formControl]="formGroup.get('like')">
+		<mat-error *ngIf="formGroup.get('like').hasError('backendError')">{{formGroup.get('like').getError('backendError').message}}</mat-error>
+	</mat-form-field>
+	<!-- End of Search Filter -->
 	<div *ngFor="let activity of allRecentActivities">
 		<div *ngIf="activity && activity.type === recentActivityTypeEnum.Dmp.valueOf()">
 			<div class="dmp-card">
@@ -129,7 +136,7 @@
 			</div>
 		</div>
 	</div>
-	<div *ngIf="allRecentActivities && allRecentActivities.length > 0" class="d-flex justify-content-center">
+	<div *ngIf="allRecentActivities && allRecentActivities.length > 0 && allRecentActivities.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>
 </div>

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

@@ -27,7 +27,7 @@ import { RecentDmpModel } from '@app/core/model/recent-activity/recent-dmp-activ
 import { RecentDatasetModel } from '@app/core/model/recent-activity/recent-dataset-activity.model';
 import { UserInfoListingModel } from '@app/core/model/user/user-info-listing';
 import { DatasetWizardService } from '@app/core/services/dataset-wizard/dataset-wizard.service';
-import { FormControl } from '@angular/forms';
+import { FormControl, FormBuilder } from '@angular/forms';
 import { DatasetCopyDialogueComponent } from '@app/ui/dataset/dataset-wizard/dataset-copy-dialogue/dataset-copy-dialogue.component';
 
 @Component({
@@ -39,12 +39,15 @@ export class RecentEditedActivityComponent extends BaseComponent implements OnIn
 
 	@Output() totalCountRecentEdited: EventEmitter<any> = new EventEmitter();
 
-	allRecentActivities:RecentActivityModel[];
+	allRecentActivities: RecentActivityModel[];
 	recentActivityTypeEnum = RecentActivityType;
 	isDraft: boolean;
 	totalCount: number;
-	startIndex: number = 4;
+	startIndex: number = 0;
 	pageSize: number = 5;
+	public formGroup = new FormBuilder().group({
+		like: new FormControl()
+	});
 
 	constructor(
 		private router: Router,
@@ -72,6 +75,9 @@ export class RecentEditedActivityComponent extends BaseComponent implements OnIn
 					this.allRecentActivities = response;
 					this.totalCountRecentEdited.emit(this.allRecentActivities.length);
 				});
+			this.formGroup.get('like').valueChanges
+				.pipe(takeUntil(this._destroyed))
+				.subscribe(x => this.refresh());
 		}
 	}
 
@@ -375,19 +381,33 @@ export class RecentEditedActivityComponent extends BaseComponent implements OnIn
 		});
 	}
 
+	refresh(): void {
+		const fields: Array<string> = ["-modified"];
+		this.startIndex = 0;
+		const allDataTableRequest: DataTableRequest<RecentActivityCriteria> = new DataTableRequest(0, this.pageSize, { fields: fields });
+		allDataTableRequest.criteria = new RecentActivityCriteria();
+		allDataTableRequest.criteria.like = this.formGroup.get("like").value;
+		this.dashboardService
+			.getRecentActivity(allDataTableRequest)
+			.subscribe(response => {
+				this.allRecentActivities = response;
+				this.totalCountRecentEdited.emit(this.allRecentActivities.length);
+			});
+	}
+
 	public loadMore() {
+		this.startIndex = this.startIndex + this.pageSize;
 		const fields: Array<string> = ["-modified"];
 		const request = new DataTableRequest<RecentActivityCriteria>(this.startIndex, this.pageSize, { fields: fields });
 		request.criteria = new RecentActivityCriteria();
-		request.criteria.like = "";
+		request.criteria.like = this.formGroup.get("like").value ? this.formGroup.get("like").value : "";
 
 		this.dashboardService.getRecentActivity(request).pipe(takeUntil(this._destroyed)).subscribe(result => {
 			if (!result) { return []; }
 			this.allRecentActivities = this.allRecentActivities.concat(result);
+			this.totalCountRecentEdited.emit(this.allRecentActivities.length);
 		});
-		this.startIndex = this.startIndex + this.pageSize;
 
-		this.totalCountRecentEdited.emit(this.startIndex + 1);
 	}
 
 	// advancedClicked(dmp: DmpListingModel) {

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

@@ -1,5 +1,11 @@
-
 <div *ngIf="datasetActivities != null">
+	<!-- Search Filter-->
+	<mat-form-field appearance="outline" class="search-form ml-auto col-auto pr-0" floatLabel="never">
+		<mat-icon matSuffix>search</mat-icon>
+		<input matInput placeholder="{{'CRITERIA.DATA-SETS.LIKE'| translate}}" name="likeCriteria" [formControl]="formGroup.get('like')">
+		<mat-error *ngIf="formGroup.get('like').hasError('backendError')">{{formGroup.get('like').getError('backendError').message}}</mat-error>
+	</mat-form-field>
+	<!-- End of Search Filter -->
 	<div *ngFor="let activity of datasetActivities">
 		<div class="dataset-card">
 			<div [routerLink]="['../datasets/overview/' + activity.id]" class="pointer">
@@ -60,8 +66,7 @@
 			</mat-menu>
 		</div>
 	</div>
-	<div *ngIf="datasetActivities && datasetActivities.length > 0" class="d-flex justify-content-center">
+	<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>
 </div>
-

dmp-frontend/src/app/ui/dashboard/recent-edited-dataset-activity/recent-edited-dataset-activity.component.scss

@@ -175,3 +175,21 @@ input[type="text"] {
 .pointer {
 	cursor: pointer;
 }
+
+.search-form {
+	text-align: left;
+	width: 20rem;
+}
+
+.search-form mat-icon {
+	color: #129d99;
+}
+
+::ng-deep .search-form .mat-form-field-wrapper {
+	background-color: white !important;
+	padding-bottom: 0 !important;
+}
+
+::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
+	padding: 0.3rem 0rem 0.6rem 0rem !important;
+}

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

@@ -8,7 +8,7 @@ import { BaseComponent } from '@common/base/base.component';
 import { Principal } from '@app/core/model/auth/principal';
 import { TranslateService } from '@ngx-translate/core';
 import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
-import { FormControl } from '@angular/forms';
+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';
 import { takeUntil } from 'rxjs/operators';
@@ -33,8 +33,11 @@ export class RecentEditedDatasetActivityComponent extends BaseComponent implemen
 
 	datasetActivities: DatasetListingModel[];
 	totalCount: number;
-	startIndex: number = 4;
+	startIndex: number = 0;
 	pageSize: number = 5;
+	public formGroup = new FormBuilder().group({
+		like: new FormControl()
+	});
 	// publicMode = false;
 
 	constructor(
@@ -61,26 +64,42 @@ export class RecentEditedDatasetActivityComponent extends BaseComponent implemen
 				.subscribe(response => {
 					this.datasetActivities = response.data;
 					this.totalCount = response.totalCount;
-					this.totalCountDatasets.emit(this.pageSize);
+					this.totalCountDatasets.emit(this.datasetActivities.length);
-					// this.totalCountDatasets.emit(this.totalCount);
 				});
+			this.formGroup.get('like').valueChanges
+				.pipe(takeUntil(this._destroyed))
+				.subscribe(x => this.refresh());
 		}
 	}
 
+	refresh(): void {
+		const fields: Array<string> = ["-modified"];
+		this.startIndex = 0;
+		const datasetDataTableRequest: DataTableRequest<DatasetCriteria> = new DataTableRequest(0, this.pageSize, { fields: fields });
+		datasetDataTableRequest.criteria = new DatasetCriteria();
+		datasetDataTableRequest.criteria.like = this.formGroup.get("like").value;
+		this.datasetService
+			.getPaged(datasetDataTableRequest)
+			.subscribe(response => {
+				this.datasetActivities = response.data;
+				this.totalCount = response.totalCount;
+				this.totalCountDatasets.emit(this.datasetActivities.length);
+			});
+	}
+
 	public loadMore() {
+		this.startIndex = this.startIndex + this.pageSize;
 		const fields: Array<string> = ["-modified"];
 		const request = new DataTableRequest<DatasetCriteria>(this.startIndex, this.pageSize, { fields: fields });
 
 		request.criteria = new DatasetCriteria();
-		request.criteria.like = "";
+		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.totalCountDatasets.emit(this.datasetActivities.length);
 		});
-		this.startIndex = this.startIndex + this.pageSize;
-
-		this.totalCountDatasets.emit(this.startIndex + 1);
 	}
 
 	public isAuthenticated(): boolean {

dmp-frontend/src/app/ui/dashboard/recent-edited-dmp-activity/recent-edited-dmp-activity.component.css

@@ -9,8 +9,7 @@
 	padding-bottom: 1.2rem;
 }
 
-.dmp-card,
+.dmp-card, .dataset-card {
-.dataset-card {
 	min-width: 712px;
 	/* min-height: 308px; */
 	background: #ffffff 0% 0% no-repeat padding-box;
@@ -70,8 +69,7 @@ input[type="text"] {
 	opacity: 0.75;
 }
 
-.dmp-title,
+.dmp-title, .dataset-title {
-.dataset-title {
 	text-align: left;
 	font-weight: 500;
 	font-family: "Roboto", sans-serif;
@@ -82,8 +80,7 @@ input[type="text"] {
 	color: #212121;
 }
 
-.dataset-subtitle,
+.dataset-subtitle, .dmp-subtitle {
-.dmp-subtitle {
 	display: flex;
 	flex-direction: row;
 	text-align: left;
@@ -112,8 +109,7 @@ input[type="text"] {
 	padding-bottom: 0.4rem;
 }
 
-.dataset-card-actions,
+.dataset-card-actions, .dmp-card-actions {
-.dmp-card-actions {
 	display: flex;
 	flex-direction: row;
 	border-top: 1px solid #dbdbdb;
@@ -121,14 +117,12 @@ input[type="text"] {
 	color: #848484;
 }
 
-.dataset-card-actions a,
+.dataset-card-actions a, .dmp-card-actions a {
-.dmp-card-actions a {
 	color: #848484 !important;
 	text-decoration: none !important;
 }
 
-.dataset-card-actions a:hover,
+.dataset-card-actions a:hover, .dmp-card-actions a:hover {
-.dmp-card-actions a:hover {
 	color: #129d99 !important;
 }
 
@@ -175,6 +169,24 @@ input[type="text"] {
 	cursor: pointer;
 }
 
+.search-form {
+	text-align: left;
+	width: 20rem;
+}
+
+.search-form mat-icon {
+	color: #129d99;
+}
+
+::ng-deep .search-form .mat-form-field-wrapper {
+	background-color: white !important;
+	padding-bottom: 0 !important;
+}
+
+::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
+	padding: 0.3rem 0rem 0.6rem 0rem !important;
+}
+
 /* th {
   text-transform: uppercase;
 }

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

@@ -1,4 +1,11 @@
 <div *ngIf="dmpActivities != null">
+	<!-- Search Filter-->
+	<mat-form-field appearance="outline" class="search-form ml-auto col-auto pr-0" floatLabel="never">
+		<mat-icon matSuffix>search</mat-icon>
+		<input matInput placeholder="{{'CRITERIA.DMP.LIKE'| translate}}" name="likeCriteria" [formControl]="formGroup.get('like')">
+		<mat-error *ngIf="formGroup.get('like').hasError('backendError')">{{formGroup.get('like').getError('backendError').message}}</mat-error>
+	</mat-form-field>
+	<!-- End of Search Filter -->
 	<div *ngFor="let activity of dmpActivities">
 		<div class="dmp-card">
 			<div [routerLink]="['../plans/overview/' + activity.id]" class="pointer">
@@ -67,7 +74,7 @@
 			</mat-menu>
 		</div>
 	</div>
-	<div *ngIf="dmpActivities && dmpActivities.length > 0" class="d-flex justify-content-center">
+	<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>
 </div>

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

@@ -20,6 +20,7 @@ import { DmpStatus } from '@app/core/common/enum/dmp-status';
 import { DatasetService } from '@app/core/services/dataset/dataset.service';
 import { DatasetListingModel } from '@app/core/model/dataset/dataset-listing';
 import { Role } from '@app/core/common/enum/role';
+import { FormBuilder, FormControl } from '@angular/forms';
 
 @Component({
 	selector: 'app-recent-edited-dmp-activity',
@@ -32,13 +33,15 @@ export class RecentEditedDmpActivityComponent extends BaseComponent implements O
 
 	dmpActivities: DmpListingModel[];
 	datasetActivities: DatasetListingModel[];
-	// allRecentActivities: RecentActivity[] = [];
 	recentActivityTypeEnum = RecentActivityType;
 	isDraft: boolean;
 
 	totalCount: number;
-	startIndex: number = 4;
+	startIndex: number = 0;
 	pageSize: number = 5;
+	public formGroup = new FormBuilder().group({
+		like: new FormControl()
+	});
 
 	constructor(
 		private router: Router,
@@ -64,7 +67,8 @@ export class RecentEditedDmpActivityComponent extends BaseComponent implements O
 				.subscribe(response => {
 					this.dmpActivities = response.data;
 					this.totalCount = response.totalCount;
-					this.totalCountDmps.emit(this.pageSize);
+					this.totalCountDmps.emit(this.dmpActivities.length);
+					// this.totalCount < this.pageSize ? this.totalCountDmps.emit(response.totalCount) : this.totalCountDmps.emit(this.pageSize);
 					// this.totalCountDmps.emit(this.totalCount);
 					// this.dmpActivities.forEach(dmpActivity => {
 					// 	const recentActivity: RecentActivity = {
@@ -74,6 +78,9 @@ export class RecentEditedDmpActivityComponent extends BaseComponent implements O
 					// 	this.allRecentActivities.push(recentActivity)
 					// })
 				});
+			this.formGroup.get('like').valueChanges
+				.pipe(takeUntil(this._destroyed))
+				.subscribe(x => this.refresh());
 
 			// const datasetDataTableRequest: DataTableRequest<DatasetCriteria> = new DataTableRequest(0, 5, { fields: fields });
 			// datasetDataTableRequest.criteria = new DatasetCriteria();
@@ -288,20 +295,35 @@ export class RecentEditedDmpActivityComponent extends BaseComponent implements O
 		}
 	}
 
+	refresh(): void {
+		const fields: Array<string> = ["-modified"];
+		this.startIndex = 0;
+		const dmpDataTableRequest: DataTableRequest<DmpCriteria> = new DataTableRequest(this.startIndex, this.pageSize, { fields: fields });
+		dmpDataTableRequest.criteria = new DmpCriteria();
+		dmpDataTableRequest.criteria.like = this.formGroup.get("like").value;
+		this.dmpService
+			.getPaged(dmpDataTableRequest, "listing")
+			.subscribe(response => {
+				this.dmpActivities = response.data;
+				this.totalCount = response.totalCount;
+				this.totalCountDmps.emit(this.dmpActivities.length);
+			});
+	}
+
 	public loadMore() {
+		this.startIndex = this.startIndex + this.pageSize;
 		const fields: Array<string> = ["-modified"];
 		const request = new DataTableRequest<DmpCriteria>(this.startIndex, this.pageSize, { fields: fields });
 
 		request.criteria = new DmpCriteria();
-		request.criteria.like = "";
+		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.totalCountDmps.emit(this.dmpActivities.length);
 		});
-		this.startIndex = this.startIndex + this.pageSize;
 
-		this.totalCountDmps.emit(this.startIndex + 1);
 	}
 
 	// advancedClicked(dmp: DmpListingModel) {

dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.html

@@ -22,7 +22,7 @@
 		<div>
 			<div class="listing row pb-2">
 				<!-- Search Filter-->
-				<mat-form-field *ngIf="listingItems.length > 0" appearance="outline" class="search-form ml-auto col-auto" floatLabel="never">
+				<mat-form-field appearance="outline" class="search-form ml-auto col-auto" floatLabel="never">
 					<mat-icon matSuffix>search</mat-icon>
 					<input matInput placeholder="{{'CRITERIA.DATA-SETS.LIKE'| translate}}" name="likeCriteria" [formControl]="formGroup.get('like')">
 					<mat-error *ngIf="formGroup.get('like').hasError('backendError')">{{formGroup.get('like').getError('backendError').message}}</mat-error>

dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.ts

@@ -132,6 +132,7 @@ export class DatasetListingComponent extends BaseComponent implements OnInit, IB
 		// 	setTimeout(() => this.refreshCallback(true));
 		// }
 		this.criteria.like = this.formGroup.get("like").value;
+		this.startIndex = 0;
 		this.refresh();
 	}
 

dmp-frontend/src/app/ui/dataset/overview/dataset-overview.component.html

@@ -2,8 +2,8 @@
 	<div class="container-fluid pl-0 pr-0">
 		<div *ngIf="dataset">
 			<a class="row mb-2 pl-1" (click)="goBack()" role="button">
-				<mat-icon class="back-icon">chevron_left</mat-icon>
+				<mat-icon class="back-icon pointer">chevron_left</mat-icon>
-				<p class="label-txt">{{'DMP-WIZARD.ACTIONS.BACK' | translate}}</p>
+				<p class="label-txt pointer">{{'DMP-WIZARD.ACTIONS.BACK' | translate}}</p>
 			</a>
 			<div class="row">
 				<div class="col-md-8 col-lg-8 pl-4">
@@ -76,7 +76,7 @@
 					<div class="row header">{{'DMP-OVERVIEW.RESEARCHERS' | translate}}</div>
 					<div class="row">
 						<div *ngFor="let researcher of researchers; let last = last">
-							<a href="{{ getOrcidPath() + researcher.id }}" target="blank" class="researcher">
+							<a href="{{ getOrcidPathForResearcher(researcher.reference) }}" target="blank" class="researcher">
 								<div class="id-btn">&nbsp;</div>
 								<div *ngIf="!last">{{ researcher.name }}, </div>
 								<div *ngIf="last">{{ researcher.name }}</div>

dmp-frontend/src/app/ui/dataset/overview/dataset-overview.component.ts

@@ -303,6 +303,12 @@ export class DatasetOverviewComponent extends BaseComponent implements OnInit {
     return this.configurationService.orcidPath;
   }
 
+  getOrcidPathForResearcher(reference: string): string {
+		const path = this.getOrcidPath();
+		const userId = reference.split(':')[1];
+		return path + userId;
+	}
+
   downloadPDF(id: string) {
     this.datasetService.downloadPDF(id)
       .pipe(takeUntil(this._destroyed))

dmp-frontend/src/app/ui/dmp/invitation/dmp-invitation.component.html

@@ -14,7 +14,15 @@
 					[configuration]="usersAutoCompleteConfiguration">
 				</app-multiple-auto-complete>
 			</mat-form-field>
-			<div class="col-12 d-flex justify-content-end row m-0">
+			<div class="col-12 d-flex justify-content-end align-items-center row m-0 pr-0">
+				<mat-form-field class="select-role" floatLabel="never">
+					<mat-label>{{'DMP-LISTING.MEMBER' | translate}}</mat-label>
+					<mat-select [formControl]="formGroup.get('role')">
+					  <mat-option *ngFor="let roleName of roleNames | keyvalue" selected [value]="roles[roleName.value]"> 
+						{{ roleName.value }}
+					  </mat-option>
+					</mat-select>
+				  </mat-form-field>
 				<button mat-raised-button (click)="send()" type="button"
 					class="invite-btn">{{'DMP-LISTING.ACTIONS.INVITE-SHORT' | translate}}</button>
 			</div>

dmp-frontend/src/app/ui/dmp/invitation/dmp-invitation.component.scss

@@ -28,6 +28,10 @@
     border-radius: 4px;
 }
 
+::ng-deep .mat-dialog-container {
+    border-radius: 8px;
+}
+
 ::ng-deep .mat-form-field-underline {
     display: none;
 }
@@ -56,3 +60,12 @@
     margin-bottom: 0.25em;
 }
 
+.select-role {
+    width: 16% !important;
+    font-size: 14px;
+    color: #848484;
+    height: min-content;
+    margin-right: 2.5rem;
+    border: none;
+    background-color: transparent;
+}

dmp-frontend/src/app/ui/dmp/invitation/dmp-invitation.component.ts

@@ -14,6 +14,7 @@ import { MultipleAutoCompleteConfiguration } from '@app/library/auto-complete/mu
 import { BaseComponent } from '@common/base/base.component';
 import { Observable } from 'rxjs';
 import { map, takeUntil } from 'rxjs/operators';
+import { Role } from '@app/core/common/enum/role';
 
 @Component({
 	selector: 'app-invitation-component',
@@ -26,6 +27,8 @@ export class DmpInvitationDialogComponent extends BaseComponent implements OnIni
 	public filteredUsersAsync = false;
 	public filteredUsers: DmpInvitationUser[];
 	public emails: string[] = [];
+	public roles = Role;
+	public roleNames: string[];
 
 	visible = true;
 	selectable = true;
@@ -33,13 +36,29 @@ export class DmpInvitationDialogComponent extends BaseComponent implements OnIni
 	addOnBlur = true;
 	readonly separatorKeysCodes: number[] = [ENTER, COMMA];
 
+	constructor(
+		public invitationService: DmpInvitationService,
+		public route: ActivatedRoute,
+		public router: Router,
+		public dialogRef: MatDialogRef<DmpInvitationDialogComponent>,
+		@Inject(MAT_DIALOG_DATA) public data: any
+	) { 
+		super();
+		this.roleNames = Object.keys(this.roles).filter(key => key.length > 1);
+	 }
+
+	ngOnInit(): void {
+		const invitation = new DmpInvitation();
+		invitation.dataManagementPlan = this.data.dmpId;
+		this.formGroup = invitation.buildForm();
+	}
+
 	usersAutoCompleteConfiguration: MultipleAutoCompleteConfiguration = {
 		filterFn: this.filterUsers.bind(this),
 		initialItems: (excludedItems: any[]) => this.filterUsers('').pipe(map(result => result.filter(resultItem => (excludedItems || []).map(x => x.id).indexOf(resultItem.id) === -1))),
 		displayFn: (item) => typeof(item) === 'string' ? item : item.name,
 		titleFn: (item) => typeof(item) === 'string' ? item : item.name,
 		valueAssign: (item) => {
-			
 			const result = typeof(item) === 'string' ? item : item.email;
 			console.log(result);
 			return result;
@@ -64,30 +83,13 @@ export class DmpInvitationDialogComponent extends BaseComponent implements OnIni
 		}
 	}
 
-
-	constructor(
-		public invitationService: DmpInvitationService,
-		public route: ActivatedRoute,
-		public router: Router,
-		public dialogRef: MatDialogRef<DmpInvitationDialogComponent>,
-		@Inject(MAT_DIALOG_DATA) public data: any
-	) { super(); }
-
-	ngOnInit(): void {
-		const invitation = new DmpInvitation();
-		invitation.dataManagementPlan = this.data.dmpId;
-		this.formGroup = invitation.buildForm();
-	}
-
-
 	send(value: any) {
 		let invitationObject: any = {};
 		invitationObject.dataManagementPlan = this.data.dmpId;
+		invitationObject.role = this.formGroup.get('role').value;
 		invitationObject.users = [];
-		console.log(this.formGroup.get('users').value);
 		invitationObject.users.push(...(<any[]>this.formGroup.get('users').value).filter(user => typeof(user) === 'string').map(email => ({ email: email, name: email })));
 		invitationObject.users.push(...(<any[]>this.formGroup.get('users').value).filter(user => typeof(user) !== 'string'));
-		console.log(invitationObject.users);
 		//invitationObject.users.push(...this.formGroup.get('users').value);
 		this.emails.forEach(email => {
 			invitationObject.users.push({ email: email, name: email });

dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.html

@@ -17,7 +17,7 @@
 		<div>
 			<div class="listing row pb-2">
 				<!-- Search Filter-->
-				<mat-form-field *ngIf="listingItems.length > 0" appearance="outline" class="search-form ml-auto col-auto" floatLabel="never">
+				<mat-form-field appearance="outline" class="search-form ml-auto col-auto" floatLabel="never">
 					<mat-icon matSuffix>search</mat-icon>
 					<input matInput placeholder="{{'CRITERIA.DMP.LIKE'| translate}}" name="likeCriteria" [formControl]="formGroup.get('like')">
 					<mat-error *ngIf="formGroup.get('like').hasError('backendError')">{{formGroup.get('like').getError('backendError').message}}</mat-error>

dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.ts

@@ -231,6 +231,7 @@ export class DmpListingComponent extends BaseComponent implements OnInit, IBread
 		// 	setTimeout(() => this.refreshCallback(true));
 		// }
 		this.criteria.like = this.formGroup.get("like").value;
+		this.startIndex = 0;
 		this.refresh();
 	}
 

dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.html

@@ -63,7 +63,7 @@
 					<div class="row header">{{'DMP-OVERVIEW.RESEARCHERS' | translate}}</div>
 					<div class="row">
 						<div *ngFor="let researcher of dmp.researchers; let last = last">
-							<a href="{{ getOrcidPath() + researcher.id}}" target="blank" class="researcher">
+							<a href="{{ getOrcidPathForResearcher(researcher.reference) }}" target="blank" class="researcher">
 								<div class="id-btn">&nbsp;</div>
 								<div *ngIf="!last">{{ researcher.name }}, </div>
 								<div *ngIf="last">{{ researcher.name }}</div>

dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.ts

@@ -632,6 +632,12 @@ export class DmpOverviewComponent extends BaseComponent implements OnInit {
 		return this.configurationService.orcidPath;
 	}
 
+	getOrcidPathForResearcher(reference: string): string {
+		const path = this.getOrcidPath();
+		const userId = reference.split(':')[1];
+		return path + userId;
+	}
+
 	checkLockStatus(id: string) {
 		this.lockService.checkLockStatus(id).pipe(takeUntil(this._destroyed))
 			.subscribe(lockStatus => this.lockStatus = lockStatus);

dmp-frontend/src/assets/i18n/en.json

@@ -849,6 +849,7 @@
 			"TAGS": "Tags",
 			"SELECT-TAGS": "Select Tags",
 			"LIKE": "Search Dataset Descriptions",
+			"DRAFT-LIKE": "Search Draft Dataset Descriptions",
 			"SELECT-GRANTS": "Select Grants",
 			"ROLE": "Role",
 			"ORGANIZATION": "Organization",
@@ -876,7 +877,8 @@
 			"LABEL": "Search",
 			"ROLE": "Role"
 		},
-		"SELECT": "Select an option"
+		"SELECT": "Select an option",
+		"LIKE": "Search"
 	},
 	"DATASET-EDITOR": {
 		"TITLE": {

dmp-frontend/src/assets/i18n/es.json

@@ -844,6 +844,7 @@
 			"TAGS": "Etiquetas",
 			"SELECT-TAGS": "Etiquetas seleccionadas",
 			"LIKE": "Busdar descripciones del Dataset",
+			"DRAFT-LIKE": "Search Draft Dataset Descriptions",
 			"SELECT-GRANTS": "Seleccionar subvención",
 			"ROLE": "Función",
 			"ORGANIZATION": "Organización",
@@ -871,7 +872,8 @@
 			"LABEL": "Búsqueda",
 			"ROLE": "Función"
 		},
-		"SELECT": "Seleccionar una opción"
+		"SELECT": "Seleccionar una opción",
+		"LIKE": "Search"
 	},
 	"DATASET-EDITOR": {
 		"TITLE": {

dmp-frontend/src/assets/i18n/gr.json

@@ -845,6 +845,7 @@
 			"TAGS": "Ετικέτες",
 			"SELECT-TAGS": "Επιλογή Ετικέτας",
 			"LIKE": "Αναζήτηση Περιγραφών Συνόλου Δεδομένων",
+			"DRAFT-LIKE": "Αναζήτηση Προσχέδιων Περιγραφών Συνόλου Δεδομένων",
 			"SELECT-GRANTS": "Επιλογή Επιχορηγήσεων",
 			"ROLE": "Ρόλος",
 			"ORGANIZATION": "Οργανισμός",
@@ -872,7 +873,8 @@
 			"LABEL": "Αναζήτηση",
 			"ROLE": "Ρόλος"
 		},
-		"SELECT": "Επιλογή"
+		"SELECT": "Επιλογή",
+		"LIKE": "Search"
 	},
 	"DATASET-EDITOR": {
 		"TITLE": {