Merge branch 'Development' of https://gitlab.eudat.eu/dmp/OpenAIRE-EUDAT-DMP-service-pilot into backend-refactoring

dmp-backend/data/src/main/java/eu/eudat/data/entities/Project.java

@@ -259,53 +259,55 @@ public class Project implements DataEntity<Project, UUID> {
 		return dmps;
 	}
 
-	public void setDmps(Set<DMP> dmps) {
+    public void setDmps(Set<DMP> dmps) {
-		this.dmps = dmps;
+        this.dmps = dmps;
-	}
+    }
 
-	public UserInfo getCreationUser() {
+    public UserInfo getCreationUser() {
-		return creationUser;
+        return creationUser;
-	}
+    }
 
-	public void setCreationUser(UserInfo creationUser) {
+    public void setCreationUser(UserInfo creationUser) {
-		this.creationUser = creationUser;
+        this.creationUser = creationUser;
-	}
+    }
 
-	public Integer getType() {
+    public Integer getType() {
-		return type;
+        return type;
-	}
+    }
 
-	public void setType(Integer type) {
+    public void setType(Integer type) {
-		this.type = type;
+        this.type = type;
-	}
+    }
 
-	public Content getContent() {
+    public Content getContent() {
-		return content;
+        return content;
-	}
+    }
 
-	public void setContent(Content content) {
+    public void setContent(Content content) {
-		this.content = content;
+        this.content = content;
-	}
+    }
 
-	@Override
+    @Override
-	public void update(Project entity) {
+    public void update(Project entity) {
-		this.description = entity.getDescription();
+        this.description = entity.getDescription();
-		this.label = entity.getLabel();
+        this.label = entity.getLabel();
-		this.abbreviation = entity.getAbbreviation();
+        this.abbreviation = entity.getAbbreviation();
-		this.created = entity.getCreated();
+        this.created = entity.getCreated();
-		this.definition = entity.getDefinition();
+        this.definition = entity.getDefinition();
-		this.dmps = entity.getDmps();
+        this.dmps = entity.getDmps();
-		this.enddate = entity.getEnddate();
+        this.startdate = entity.getStartdate();
-		this.modified = new Date();
+        this.enddate = entity.getEnddate();
-		if (entity.getContent() != null) this.content = entity.getContent();
+        this.modified = new Date();
-	}
+        this.uri = entity.getUri();
+        if (entity.getContent() != null) this.content = entity.getContent();
+    }
 
-	@Override
+    @Override
-	public UUID getKeys() {
+    public UUID getKeys() {
-		return this.id;
+        return this.id;
-	}
+    }
 
-	@Override
+    @Override
 	public Project buildFromTuple(List<Tuple> tuple, List<String> fields, String base) {
 		String currentBase = base.isEmpty() ? "" : base + ".";
 		if (fields.contains(currentBase + "id")) this.id = EntityBinder.fromTuple(tuple, currentBase + "id");

dmp-frontend/angular.json

@@ -144,7 +144,7 @@
 	"schematics": {
 		"@schematics/angular:component": {
 			"prefix": "app",
-			"styleext": "css"
+			"styleext": "scss"
 		},
 		"@schematics/angular:directive": {
 			"prefix": "app"

dmp-frontend/src/app/core/model/dataset/dataset-overview.ts

@@ -0,0 +1,8 @@
+import { DatasetProfileModel } from "./dataset-profile";
+
+export interface DatasetOverviewModel {
+	id: String;
+	label: String;
+	status: any;
+	datasetTemplate: DatasetProfileModel;
+}

dmp-frontend/src/app/core/model/dataset/dataset-url-listing.ts

@@ -0,0 +1,4 @@
+export interface DatasetUrlListing {
+	label: String;
+	url: String;
+}

dmp-frontend/src/app/core/model/dmp-profile/dmp-associated-profile.ts

@@ -0,0 +1,4 @@
+export interface DmpAssociatedProfileModel {
+	id: String;
+	label: String;
+}

dmp-frontend/src/app/core/model/dmp/dmp-overview.ts

@@ -0,0 +1,25 @@
+import { OrganizationModel } from "../organisation/organization";
+import { DatasetUrlListing } from "../dataset/dataset-url-listing";
+import { UserInfoListingModel } from "../user/user-info-listing";
+import { DmpAssociatedProfileModel } from "../dmp-profile/dmp-associated-profile";
+import { ResearcherModel } from "../researcher/researcher";
+import { ProjectOverviewModel } from "../project/project-overview";
+import { DatasetOverviewModel } from "../dataset/dataset-overview";
+
+export interface DmpOverviewModel {
+	id: string;
+	label: string;
+	profile: string;
+	creationTime: string;
+	modifiedTime: string;
+	version: number;
+	status: number;
+	groupId: string;
+	description: string;
+	project: ProjectOverviewModel;
+	associatedProfiles: DmpAssociatedProfileModel[];
+	users: UserInfoListingModel[];
+	organisations: OrganizationModel[];
+	datasets: DatasetOverviewModel[];
+	researchers: ResearcherModel[];
+}

dmp-frontend/src/app/core/model/project/project-overview.ts

@@ -0,0 +1,9 @@
+export interface ProjectOverviewModel {
+	id: String;
+	label: String;
+	uri: String;
+	abbreviation: String;
+	description: String;
+	startDate: Date;
+	endDate: Date;
+}

dmp-frontend/src/app/core/model/user/user-info-listing.ts

@@ -0,0 +1,5 @@
+export interface UserInfoListingModel {
+	id: String;
+	name: String;
+	role: number;
+}

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

@@ -16,6 +16,7 @@ import { ContentType } from '@angular/http/src/enums';
 import { BaseHttpParams } from '../../../common/http/base-http-params';
 import { InterceptorType } from '../../../common/http/interceptors/interceptor-type';
 import { ExploreDmpCriteriaModel } from '../../query/explore-dmp/explore-dmp-criteria';
+import { DmpOverviewModel } from '../../model/dmp/dmp-overview';
 
 @Injectable()
 export class DmpService {
@@ -46,7 +47,7 @@ export class DmpService {
 	}
 
 	getOverviewSingle(id: string): Observable<any> {
-		return this.http.get<any>(this.actionUrl + 'overview/' + id, { headers: this.headers });
+		return this.http.get<DmpOverviewModel>(this.actionUrl + 'overview/' + id, { headers: this.headers });
 	}
 
 	unlock(id: String): Observable<DmpModel> {

dmp-frontend/src/app/library/confirmation-dialog/confirmation-dialog.component.html

@@ -4,7 +4,7 @@
 	</div>
 	<div class="row">
 		<div class="col"></div>
-		<div class="col-auto"><button mat-raised-button color="primary" type="button" (click)="cancel()">{{ data.cancelButton }}</button></div>
+		<div class="col-auto"><button mat-raised-button type="button" (click)="cancel()" class="cancel">{{ data.cancelButton }}</button></div>
-		<div class="col-auto"><button mat-raised-button color="primary" type="button" (click)="confirm()">{{ data.confirmButton }}</button></div>
+		<div class="col-auto"><button mat-raised-button type="button" (click)="confirm()" class="confirm">{{ data.confirmButton }}</button></div>
 	</div>
 </div>

dmp-frontend/src/app/library/confirmation-dialog/confirmation-dialog.component.scss

@@ -2,4 +2,15 @@
 	.confirmation-message {
 		padding-bottom: 20px;
 	}
+
+	.cancel {
+		background-color: #ba2c2c;
+		color: #ffffff;
+	}
+
+	.confirm {
+		background-color: #92d050;
+		color: #ffffff;
+	}
+
 }

dmp-frontend/src/app/library/export-method-dialog/export-method-dialog.component.html

@@ -0,0 +1,13 @@
+<div class="export-method-dialog">
+	<div class="row d-flex flex-row">
+		<div class="col-auto export-method-message">
+			{{ data.message }}
+		</div>
+		<div class="col-auto close-btn" (click)="close()"><mat-icon>close</mat-icon></div>
+	</div>
+	<div class="row d-flex flex-row">
+		<div class="col-4"><button mat-raised-button type="button" (click)="downloadXML()" >{{ data.XMLButton }}</button></div>
+		<div class="col-4"><button mat-raised-button type="button" (click)="downloadDocument()">{{ data.documentButton }}</button></div>
+		<div class="col-4"><button mat-raised-button type="button" (click)="downloadPdf()">{{ data.pdfButton }}</button></div>
+	</div>
+</div>

dmp-frontend/src/app/library/export-method-dialog/export-method-dialog.component.scss

@@ -0,0 +1,16 @@
+.export-method-dialog {
+	.export-method-message {
+		padding-bottom: 20px;;
+	}
+
+	.close-btn {
+		margin-left: auto;
+		cursor: pointer;
+	}
+
+	button {
+		// background-color: #aaaaaa;
+		background-color: #4687f0;
+		color: #ffffff;
+	}
+}

dmp-frontend/src/app/library/export-method-dialog/export-method-dialog.component.ts

@@ -0,0 +1,36 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+
+
+@Component({
+  selector: 'app-export-method-dialog',
+  templateUrl: './export-method-dialog.component.html',
+  styleUrls: ['./export-method-dialog.component.scss']
+})
+export class ExportMethodDialogComponent implements OnInit {
+
+  constructor(
+	public dialogRef: MatDialogRef<ExportMethodDialogComponent>,
+	@Inject(MAT_DIALOG_DATA) public data: any
+  ) { }
+
+  ngOnInit() {
+  }
+
+  close() {
+	this.dialogRef.close(false);
+  }
+
+  downloadXML() {
+	this.dialogRef.close("xml");
+  }
+
+  downloadDocument() {
+	this.dialogRef.close("doc");
+  }
+
+  downloadPdf() {
+	this.dialogRef.close("pdf");
+  }
+
+}

dmp-frontend/src/app/library/export-method-dialog/export-method-dialog.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CommonUiModule } from '../../common/ui/common-ui.module';
+import { ExportMethodDialogComponent } from './export-method-dialog.component';
+
+@NgModule({
+	imports: [CommonUiModule],
+	declarations: [ExportMethodDialogComponent],
+	exports: [ExportMethodDialogComponent],
+	entryComponents: [ExportMethodDialogComponent]
+})
+export class ExportMethodDialogModule {
+	constructor() { }
+}

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

@@ -88,7 +88,7 @@
 					<h4> DATA MANAGEMENT PLANS </h4>
 					<div class="info">
 						<p class="subtitle">{{ dashboardStatisticsData?.totalDataManagementPlanCount }} Public Dmps</p>
-						<p class="view-all" (click)=viewAllPublicDmpsClicked()>View All</p>
+						<p class="view-all" (click)=viewAllPublicDmpsClicked()>{{ 'GENERAL.ACTIONS.VIEW-ALL' | translate }}</p>
 					</div>
 				</div>
 				<mat-divider></mat-divider>
@@ -102,7 +102,7 @@
 						<h4> DATASETS </h4>
 						<div class="info">
 							<p class="subtitle">{{ dashboardStatisticsData?.totalDataSetCount }} Public Datasets</p>
-							<p class="view-all" (click)=viewAllPublicDatasetsClicked()>View All</p>
+							<p class="view-all" (click)=viewAllPublicDatasetsClicked()>{{ 'GENERAL.ACTIONS.VIEW-ALL' | translate }}</p>
 						</div>
 					</div>
 					<mat-divider class="col-12"></mat-divider>

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

@@ -51,4 +51,9 @@ td:hover .draft-desc:after {
 	background-color: rgb(242, 242, 242);
 	border-radius: 10em;
 	text-align: center;
+	max-width: 160px;
+	padding-left: 0.5em;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }

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

@@ -24,7 +24,7 @@
 								</div>
 								<div class="draft-subtitle">{{ dataset.created | date: "shortDate"}}</div>
 								<div class="draft-desc">{{ dataset.description }}</div>
-								<div class="project-pill">{{ dataset.profile }}</div>
+								<div matTooltip="{{ dataset.profile }}" class="project-pill">{{ dataset.profile }}</div>
 							</div>
 						</div>
 					</td>

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

@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { DraftsComponent } from './drafts.component';
-
-describe('DraftsComponent', () => {
-  let component: DraftsComponent;
-  let fixture: ComponentFixture<DraftsComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ DraftsComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(DraftsComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

@@ -1,4 +1,4 @@
-th  {
+th {
 	text-transform: uppercase;
 }
 
@@ -12,11 +12,31 @@ th  {
 }
 
 .template-name {
-	padding-left: 0px;
+	padding-left: 0.5em;
 	border: 1px solid rgb(218, 227, 243);
 	color: rgb(43, 104, 209);
 	background-color: rgb(236, 241, 249);
 	border-radius: 10em;
 	text-align: center;
+	max-width: 160px;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 
+.chip {
+	padding: 0.1em 1em;
+	margin-bottom: 1em;
+	margin-left: 2.5em;
+	margin-right: 2.5em;
+	border-radius: 10em;
+	background-color: #007bff;
+	color: #fff;
+	text-transform: uppercase;
+	text-align: center;
+	font-weight: 500;
+	max-width: 160px;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}

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

@@ -28,7 +28,7 @@
 					style="cursor: pointer;">
 					<td>{{ activity.label }}</td>
 					<td>
-						<div class="template-name">
+						<div matTooltip="{{ dmpProfileDisplay(activity.profile) }}" class="template-name">
 							{{ dmpProfileDisplay(activity.profile) }}
 						</div>
 					</td>

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

@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { RecentEditedActivityComponent } from './recent-edited-activity.component';
-
-describe('RecentEditedActivityComponent', () => {
-  let component: RecentEditedActivityComponent;
-  let fixture: ComponentFixture<RecentEditedActivityComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ RecentEditedActivityComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(RecentEditedActivityComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { RecentVisitedActivityComponent } from './recent-visited-activity.component';
-
-describe('RecentActivityComponent', () => {
-  let component: RecentVisitedActivityComponent;
-  let fixture: ComponentFixture<RecentVisitedActivityComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ RecentVisitedActivityComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(RecentVisitedActivityComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

@@ -22,6 +22,8 @@ import { DmpListingItemComponent } from './listing/listing-item/dmp-listing-item
 import { DmpWizardComponent } from './wizard/dmp-wizard.component';
 import { DmpWizardEditorComponent } from './wizard/editor/dmp-wizard-editor.component';
 import { DmpWizardDatasetListingComponent } from './wizard/listing/dmp-wizard-dataset-listing.component';
+import { DmpOverviewComponent } from './overview/dmp-overview.component';
+import { ExportMethodDialogModule } from '../../library/export-method-dialog/export-method-dialog.module';
 
 @NgModule({
 	imports: [
@@ -29,6 +31,7 @@ import { DmpWizardDatasetListingComponent } from './wizard/listing/dmp-wizard-da
 		CommonFormsModule,
 		UrlListingModule,
 		ConfirmationDialogModule,
+		ExportMethodDialogModule,
 		FormattingModule,
 		AutoCompleteModule,
 		DmpRoutingModule
@@ -49,7 +52,8 @@ import { DmpWizardDatasetListingComponent } from './wizard/listing/dmp-wizard-da
 		DynamicFieldsProjectComponent,
 		DynamicFieldProjectComponent,
 		DmpUploadDialogue,
-		DmpListingItemComponent
+		DmpListingItemComponent,
+		DmpOverviewComponent
 	],
 	entryComponents: [
 		DmpInvitationDialogComponent,

dmp-frontend/src/app/ui/dmp/dmp.routing.ts

@@ -4,6 +4,7 @@ import { DmpEditorComponent } from './editor/dmp-editor.component';
 import { InvitationAcceptedComponent } from './invitation/accepted/dmp-invitation-accepted.component';
 import { DmpListingComponent } from './listing/dmp-listing.component';
 import { DmpWizardComponent } from './wizard/dmp-wizard.component';
+import { DmpOverviewComponent } from './overview/dmp-overview.component';
 
 const routes: Routes = [
 	{
@@ -34,6 +35,13 @@ const routes: Routes = [
 			breadcrumb: true
 		},
 	},
+	{
+		path: 'overview/:id',
+		component: DmpOverviewComponent,
+		data: {
+			breadcrumb: true
+		},
+	},
 	{
 		path: 'publicEdit/:publicId',
 		component: DmpEditorComponent,

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

@@ -161,7 +161,7 @@
 
 							<div class="col-md-12">
 								<div class="row">
-									<div class="col-auto"><button mat-raised-button color="primary" (click)="cancel()"
+									<div class="col-auto"><button mat-raised-button color="primary" (click)="cancel(dmp.id)"
 											type="button">{{'DMP-EDITOR.ACTIONS.CANCEL'
 											| translate}}</button></div>
 									<div class="col"></div>

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

@@ -48,7 +48,8 @@ import { AuthService } from '../../../core/services/auth/auth.service';
 })
 export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadCrumbComponent {
 
-	editMode = false;
+	editMode = true;
+	// editMode = false;
 
 	breadCrumbs: Observable<BreadcrumbItem[]>;
 	isNew = true;
@@ -152,7 +153,7 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 							this.registerFormEventsForDmpProfile(this.dmp.definition);
 							if (!this.editMode || this.dmp.status === Status.Inactive) { this.formGroup.disable(); }
 							if (this.isAuthenticated) {
-							// if (!this.isAuthenticated) {
+								// if (!this.isAuthenticated) {
 								this.breadCrumbs = Observable.of([
 									{
 										parentComponentName: 'DmpListingComponent',
@@ -187,7 +188,7 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 							this.registerFormEventsForDmpProfile(this.dmp.definition);
 							if (!this.editMode || this.dmp.status === Status.Inactive) { this.formGroup.disable(); }
 							if (this.isAuthenticated) {
-							// if (!this.isAuthenticated) {
+								// if (!this.isAuthenticated) {
 								this.breadCrumbs = Observable.of([
 									{
 										parentComponentName: 'DmpListingComponent',
@@ -276,8 +277,8 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 		this.dmpService.createDmp(this.formGroup.getRawValue())
 			.pipe(takeUntil(this._destroyed))
 			.subscribe(
-			complete => this.onCallbackSuccess(),
+				complete => this.onCallbackSuccess(),
-			error => this.onCallbackError(error)
+				error => this.onCallbackError(error)
 			);
 	}
 
@@ -298,8 +299,9 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 		});
 	}
 
-	public cancel(): void {
+	public cancel(id: String): void {
-		this.router.navigate(['/plans']);
+		this.router.navigate(['/plans/overview/' + id]);
+		// this.router.navigate(['/plans']);
 	}
 
 	public invite(): void {
@@ -368,8 +370,8 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 				this.dmpService.delete(this.dmp.id)
 					.pipe(takeUntil(this._destroyed))
 					.subscribe(
-					complete => { this.onCallbackSuccess() },
+						complete => { this.onCallbackSuccess() },
-					error => this.onDeleteCallbackError(error)
+						error => this.onDeleteCallbackError(error)
 					);
 			}
 		});

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

@@ -131,7 +131,8 @@ export class DmpListingComponent extends BaseComponent implements OnInit, IBread
 	}
 
 	rowClicked(dmp: DmpListingModel) {
-		this.router.navigate(['/plans/edit/' + dmp.id]);
+		this.router.navigate(['/plans/overview/' + dmp.id]);
+		// this.router.navigate(['/plans/edit/' + dmp.id]);
 	}
 
 	addDataset(rowId: String) {

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

@@ -34,7 +34,7 @@ export class DmpListingItemComponent implements OnInit {
 		private route: ActivatedRoute,
 		private datasetService: DatasetService,
 		private authentication: AuthService,
-		private language: TranslateService) { }
+		private translate: TranslateService) { }
 
 	ngOnInit() {
 		if (this.dmp.status == 0) { this.isDraft = true }
@@ -87,13 +87,13 @@ export class DmpListingItemComponent implements OnInit {
 			});
 		}
 		if (role === 0) {
-			return this.language.instant('DMP-LISTING.OWNER');
+			return this.translate.instant('DMP-LISTING.OWNER');
 		}
 		else if (role === 1) {
-			return this.language.instant('DMP-LISTING.MEMBER');
+			return this.translate.instant('DMP-LISTING.MEMBER');
 		}
 		else {
-			return this.language.instant('DMP-LISTING.OWNER');
+			return this.translate.instant('DMP-LISTING.OWNER');
 		}
 	}
 }

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

@@ -0,0 +1,113 @@
+<div class="main-content">
+	<div class="container-fluid">
+		<div *ngIf="dmp" class="card col-12 pb-4">
+			<div class="card-header card-header-plain d-flex">
+				<div class="card-desc d-flex flex-column justify-content-center">
+					<h4 class="card-title">{{ dmp.label }}</h4>
+				</div>
+				<div class="d-flex ml-auto p-2">
+					<button mat-icon-button [matMenuTriggerFor]="actionsMenu" class="ml-auto more-icon"
+						(click)="$event.stopImmediatePropagation();">
+						<mat-icon class="more-horiz">more_horiz</mat-icon>
+					</button>
+					<mat-menu #actionsMenu="matMenu">
+						<button mat-menu-item (click)="editClicked(dmp)" class="menu-item">
+							<mat-icon>edit</mat-icon>{{ 'DMP-LISTING.ACTIONS.EDIT' | translate }}
+						</button>
+						<button mat-menu-item (click)="cloneClicked(dmp)" class="menu-item">
+							<mat-icon>add</mat-icon>{{ 'DMP-LISTING.ACTIONS.CLONE' | translate }}
+						</button>
+						<button mat-menu-item (click)="deleteClicked()" class="menu-item">
+							<mat-icon>delete</mat-icon>{{ 'DMP-LISTING.ACTIONS.DELETE' | translate }}
+						</button>
+						<button mat-menu-item (click)="advancedClicked()" class="menu-item">
+							<mat-icon>save_alt</mat-icon>{{ 'DMP-LISTING.ACTIONS.ADV-EXP' | translate }}
+						</button>
+					</mat-menu>
+					<button mat-raised-button color="primary" (click)="downloadPDF(dmp.id)" class="lightblue-btn ml-2">
+						<mat-icon>save_alt</mat-icon> {{ 'DMP-LISTING.ACTIONS.EXPORT' | translate }}
+					</button>
+				</div>
+			</div>
+			<div class="row ml-2">
+				<div class="col-md-9 col-lg-9">
+					<div class="row">
+						<div class="col-6 dmp-info">
+							<p class="card-subtitle">{{ dmp.label }}</p>
+							<p>{{ dmp.description }}</p>
+							<div class="row total-info">
+								<div class="col-12 d-flex flex-row">
+									<mat-icon class="gray-icon pt-2">settings</mat-icon>
+									<p class="mt-2 ml-1 mr-3 p-1">{{ roleDisplay(dmp.users) }}</p>
+
+									<div class="datasets-counter">
+										<mat-icon class="gray-icon pt-2" (click)="datasetsClicked(dmp.id)">storage
+										</mat-icon>
+										<p class="mt-2 ml-1 p-1" (click)="datasetsClicked(dmp.id)">
+											{{ dmp.datasets.length }}</p>
+										<p class="mt-2 mr-3 p-1" (click)="datasetsClicked(dmp.id)">
+											{{'NAV-BAR.DATASETS' | translate}}</p>
+									</div>
+
+									<mat-icon class="gray-icon pt-2">assignment</mat-icon>
+									<p class="mt-2 ml-1 p-1">{{ dmp.associatedProfiles.length }}</p>
+									<p class="mt-2 mr-3 p-1">{{ 'DMP-EDITOR.FIELDS.TEMPLATES' | translate }}</p>
+
+									<mat-icon class="gray-icon pt-2">person</mat-icon>
+									<p class="mt-2 ml-1 p-1">{{ dmp.researchers.length }}</p>
+									<p class="mt-2 mr-3 p-1">{{ 'DMP-EDITOR.FIELDS.RESEARCHERS' | translate }}</p>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="row">
+						<div *ngFor="let dataset of dmp.datasets" class="col-md-4">
+							<div class="dataset-card" (click)="datasetClicked(dataset.id)">
+								<mat-icon *ngIf="isDraft(dataset)" class="draft-bookmark">bookmark</mat-icon>
+								<mat-icon *ngIf="!isDraft(dataset)" class="finalized-bookmark">bookmark</mat-icon>
+								<h4 *ngIf="isDraft(dataset)"><span>DRAFT:</span> {{ dataset.label }}</h4>
+								<h4 *ngIf="!isDraft(dataset)">{{ dataset.label }}</h4>
+								<div matTooltip="{{ dataset.datasetTemplate.label }}" class="chip">
+									{{ dataset.datasetTemplate.label }}</div>
+							</div>
+						</div>
+					</div>
+					<div *ngIf="dmp.datasets.length > 9" class="gray-container d-flex justify-content-center">
+						<button mat-button (click)="datasetsClicked(dmp.id)" class="show-more">
+							<mat-icon class="mr-2">expand_more</mat-icon>{{ 'GENERAL.ACTIONS.SHOW-MORE' | translate }}
+						</button>
+					</div>
+				</div>
+				<div class="col-md-3 col-lg-3">
+					<div class="project-item">
+						<div class="gray-container container-header">
+							<span class="ml-2 pt-2"
+								(click)="projectClicked(dmp.project.id)">{{ dmp.project.abbreviation }}</span>
+						</div>
+						<p class="card-subtitle mt-3 mb-1 ml-3 mr-3">{{ dmp.project.label }}</p>
+						<p class="mb-1 ml-3 mr-3">{{ dmp.project.startDate | date: "shortDate" }} -
+							{{ dmp.project.endDate | date: "shortDate" }}</p>
+
+
+							<p class="ml-3 mr-3 desc">{{ dmp.project.description }}</p>
+							<button mat-flat-button class="show-more" (click)="projectClicked(dmp.project.id)">
+								<!-- <mat-icon class="mr-2">expand_more</mat-icon> -->
+								{{ 'GENERAL.ACTIONS.SHOW-MORE' | translate }}
+							</button>
+
+						<a mat-raised-button class="visit-website" href="{{dmp.project.uri}}" target="_blank">
+							<mat-icon class="mr-2">open_in_new</mat-icon>
+							{{ 'PROJECT-EDITOR.ACTIONS.VISIT-WEBSITE' | translate }}
+						</a>
+					</div>
+					<div class="researchers">
+						<h6 class="researchers-title">Researchers</h6>
+						<div *ngFor="let researcher of dmp.researchers">
+							<div matTooltip="{{ researcher.name }}" class="avatar">{{ researcher.name }}</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>

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

@@ -0,0 +1,197 @@
+.card-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.actions {
+  margin-left: auto;
+}
+
+.more-horiz {
+  font-size: 28px;
+  color: #aaaaaa;
+}
+
+.more-icon :hover {
+  color: #4687e6;
+}
+
+.menu-item {
+  width: 248px;
+}
+
+.dmp-info {
+  display: flex;
+  flex-direction: column;
+  //   margin: 2em 2em;
+  padding: 1em 1em;
+}
+
+.card-subtitle {
+  font-size: 14px;
+  font-weight: 700;
+  color: black;
+  text-transform: uppercase;
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+.gray-container {
+  letter-spacing: 5px;
+  color: #aaaaaa;
+}
+
+.project-item,
+.researchers {
+  display: flex;
+  flex-direction: column;
+  border: 2px solid #f2f2f2;
+  margin-right: 2em;
+  margin-top: 2em;
+  padding: 0.5em;
+}
+
+.researchers-title {
+  width: 120px;
+  color: #4687e6;
+  background-color: white;
+  padding: 0px 10px;
+  margin-top: -16px;
+  cursor: default;
+  text-transform: uppercase;
+}
+
+.container-header {
+  display: flex;
+  align-items: baseline;
+  margin-top: 0px;
+  text-transform: uppercase;
+  cursor: pointer;
+}
+
+.container-header p {
+  letter-spacing: 5px;
+  color: #aaaaaa;
+  padding-top: 10px;
+  margin-bottom: 0px;
+}
+
+.container-header :hover {
+  color: #4687e6;
+}
+
+.dataset-card {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  word-wrap: break-word;
+  border-radius: 6px;
+  color: #333333;
+  background: #fff;
+  width: 100%;
+  margin-top: 1em;
+  margin-bottom: 1em;
+  cursor: pointer;
+  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
+}
+
+.dataset-card h4 {
+  padding-left: 1em;
+  margin: 1em 1.5em;
+}
+
+.show-more {
+  background-color: #ffffff00;
+  color: #4687f0;
+  font-weight: 700;
+  justify-self: center;
+}
+
+.visit-website {
+  background-color: #4687f0;
+  color: #ffffff;
+}
+
+.draft-bookmark {
+  color: #e7e6e6;
+  display: inline;
+  position: absolute;
+  margin-top: 0.5em;
+  margin-left: 0.5em;
+}
+
+.finalized-bookmark {
+  color: #92d050;
+  display: inline;
+  position: absolute;
+  margin-top: 0.5em;
+  margin-left: 0.5em;
+}
+
+h4 span {
+  color: #619ce3;
+  font-weight: 600;
+}
+
+.chip {
+  padding: 0.1em 1em;
+  margin-bottom: 1em;
+  margin-left: 2.5em;
+  margin-right: 2.5em;
+  border-radius: 10em;
+  background-color: rgb(70, 135, 230);
+  color: #fff;
+  text-transform: uppercase;
+  font-weight: 500;
+  max-width: 160px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.avatar {
+  padding: 0.1em 1em;
+  margin: 0.5em;
+  border-radius: 10em;
+  background-color: #eeeeee;
+  color: black;
+  max-width: 160px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.datasets-counter {
+  display: flex;
+  cursor: pointer;
+}
+
+.datasets-counter :hover {
+  color: #4687e6 !important;
+}
+
+.total-info {
+  text-transform: uppercase;
+}
+
+.desc {
+  position: relative;
+  overflow: hidden;
+  height: 80px;
+  font-size: 14px;
+  padding-top: 15px;
+  margin-bottom: 30px;
+  cursor: default;
+}
+
+.desc:after {
+  content: "";
+  text-align: right;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 70%;
+  height: 1.4em;
+  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
+}

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

@@ -0,0 +1,209 @@
+import { Component, OnInit } from '@angular/core';
+import { Params, ActivatedRoute, Router } from '@angular/router';
+import { BaseComponent } from '../../../core/common/base/base.component';
+import { DmpService } from '../../../core/services/dmp/dmp.service';
+import { takeUntil } from 'rxjs/operators';
+import { DmpOverviewModel } from '../../../core/model/dmp/dmp-overview';
+import { TranslateService } from '@ngx-translate/core';
+import { Principal } from '../../../core/model/auth/Principal';
+import { AuthService } from '../../../core/services/auth/auth.service';
+import { UserInfoListingModel } from '../../../core/model/user/user-info-listing';
+import { DatasetOverviewModel } from '../../../core/model/dataset/dataset-overview';
+import { MatDialog } from '@angular/material';
+import { ConfirmationDialogComponent } from '../../../library/confirmation-dialog/confirmation-dialog.component';
+import { UiNotificationService, SnackBarNotificationLevel } from '../../../core/services/notification/ui-notification-service';
+import * as FileSaver from 'file-saver';
+import { ExportMethodDialogComponent } from '../../../library/export-method-dialog/export-method-dialog.component';
+
+@Component({
+	selector: 'app-dmp-overview',
+	templateUrl: './dmp-overview.component.html',
+	styleUrls: ['./dmp-overview.component.scss']
+})
+export class DmpOverviewComponent extends BaseComponent implements OnInit {
+
+	dmp: DmpOverviewModel;
+	isNew = true;
+
+	constructor(
+		private route: ActivatedRoute,
+		private router: Router,
+		private dmpService: DmpService,
+		private translate: TranslateService,
+		private authentication: AuthService,
+		private dialog: MatDialog,
+		private language: TranslateService,
+		private uiNotificationService: UiNotificationService
+	) {
+		super();
+	}
+
+	ngOnInit() {
+		// Gets dmp data using parameter id
+		this.route.params
+			.pipe(takeUntil(this._destroyed))
+			.subscribe((params: Params) => {
+				const itemId = params['id'];
+				if (itemId != null) {
+					this.isNew = false;
+					this.dmpService.getOverviewSingle(itemId)
+						.pipe(takeUntil(this._destroyed))
+						.subscribe(data => {
+							this.dmp = data;
+						})
+				}
+			});
+	}
+
+	editClicked(dmp: DmpOverviewModel) {
+		this.router.navigate(['/plans/edit/' + dmp.id]);
+	}
+
+	cloneClicked(dmp: DmpOverviewModel) {
+		this.router.navigate(['/plans/clone/' + dmp.id]);
+	}
+
+	projectClicked(projectId: String) {
+		this.router.navigate(['/projects/edit/' + projectId]);
+	}
+
+	datasetClicked(datasetId: String) {
+		this.router.navigate(['/datasets/edit/' + datasetId]);
+	}
+
+	datasetsClicked(dmpId: String) {
+		this.router.navigate(['/datasets'], { queryParams: { dmpId: dmpId } });
+	}
+
+	goToUri(uri: string){
+		window.open(uri, "_blank");
+	}
+
+	deleteClicked() {
+		const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+			maxWidth: '300px',
+			data: {
+				message: this.language.instant('GENERAL.CONFIRMATION-DIALOG.DELETE-ITEM'),
+				confirmButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CONFIRM'),
+				cancelButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CANCEL')
+			}
+		});
+		dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => {
+			if (result) {
+				this.dmpService.delete(this.dmp.id)
+					.pipe(takeUntil(this._destroyed))
+					.subscribe(
+						complete => { this.onCallbackSuccess() },
+						error => this.onDeleteCallbackError(error)
+					);
+			}
+		});
+	}
+
+	advancedClicked() {
+		const dialogRef = this.dialog.open(ExportMethodDialogComponent, {
+			maxWidth: '400px',
+			data: {
+				message: "Download as:",
+				XMLButton: "XML",
+				documentButton: "Document",
+				pdfButton: "PDF"
+			}
+		});
+		dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => {
+			if (result == "pdf") {
+				this.downloadPDF(this.dmp.id);
+			} else if (result == "xml") {
+				this.downloadXml(this.dmp.id);
+			} else if (result == "doc") {
+				this.downloadDocx(this.dmp.id);
+			}
+		});
+	}
+
+	onCallbackSuccess(): void {
+		this.uiNotificationService.snackBarNotification(this.isNew ? this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-CREATION') : this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-UPDATE'), SnackBarNotificationLevel.Success);
+		this.router.navigate(['/plans']);
+	}
+
+	onDeleteCallbackError(error) {
+		this.uiNotificationService.snackBarNotification(error.error.message ? error.error.message : this.language.instant('GENERAL.SNACK-BAR.UNSUCCESSFUL-DELETE'), SnackBarNotificationLevel.Error);
+	}
+
+	downloadXml(id: string) {
+		this.dmpService.downloadXML(id)
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(response => {
+				const blob = new Blob([response.body], { type: 'application/xml' });
+				const filename = this.getFilenameFromContentDispositionHeader(response.headers.get('Content-Disposition'));
+
+				FileSaver.saveAs(blob, filename);
+			});
+	}
+
+	downloadDocx(id: string) {
+		this.dmpService.downloadDocx(id)
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(response => {
+				const blob = new Blob([response.body], { type: 'application/msword' });
+				const filename = this.getFilenameFromContentDispositionHeader(response.headers.get('Content-Disposition'));
+
+				FileSaver.saveAs(blob, filename);
+			});
+	}
+
+	downloadPDF(id: string) {
+		this.dmpService.downloadPDF(id)
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(response => {
+				const blob = new Blob([response.body], { type: 'application/pdf' });
+				const filename = this.getFilenameFromContentDispositionHeader(response.headers.get('Content-Disposition'));
+
+				FileSaver.saveAs(blob, filename);
+			});
+	}
+
+	getFilenameFromContentDispositionHeader(header: string): string {
+		const regex: RegExp = new RegExp(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/g);
+
+		const matches = header.match(regex);
+		let filename: string;
+		for (let i = 0; i < matches.length; i++) {
+			const match = matches[i];
+			if (match.includes('filename="')) {
+				filename = match.substring(10, match.length - 1);
+				break;
+			} else if (match.includes('filename=')) {
+				filename = match.substring(9);
+				break;
+			}
+		}
+		return filename;
+	}
+
+	roleDisplay(value: UserInfoListingModel[]) {
+		const principal: Principal = this.authentication.current();
+		let role: number;
+		if (principal) {
+			value.forEach(element => {
+				if (principal.id === element.id) {
+					role = element.role;
+				}
+			});
+		}
+		if (role === 0) {
+			return this.translate.instant('DMP-LISTING.OWNER');
+		}
+		else if (role === 1) {
+			return this.translate.instant('DMP-LISTING.MEMBER');
+		}
+		else {
+			return this.translate.instant('DMP-LISTING.OWNER');
+		}
+	}
+
+	isDraft(dataset: DatasetOverviewModel) {
+		if (dataset.status == 0) { return true }
+		else { return false }
+	}
+}

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

@@ -41,6 +41,7 @@
 		},
 		"ACTIONS": {
 			"VIEW-ALL": "View All",
+			"SHOW-MORE": "Show more",
 			"LOG-IN": "Log in"
 		}
 	},
@@ -235,6 +236,9 @@
 			"NEW-VERSION": "New Version",
 			"VIEW-VERSION": "All DMP Versions",
 			"CLONE": "Clone",
+			"DELETE": "Delete",
+			"EXPORT": "Export",
+			"ADV-EXP": "Advanced Export",
 			"DOWNLOAD-XML": "Download XML",
 			"DOWNLOAD-DOCX": "Download Document",
 			"DOWNLOAD-PDF": "Download PDF"
@@ -414,7 +418,8 @@
 			"SAVE": "Save",
 			"CANCEL": "Cancel",
 			"DELETE": "Delete",
-			"GO-TO-DMPS": "Go To DMPs"
+			"GO-TO-DMPS": "Go To DMPs",
+			"VISIT-WEBSITE": "Visit Website"
 		}
 	},
 	"DMP-EDITOR": {
@@ -428,6 +433,7 @@
 			"DESCRIPTION": "Description",
 			"ORGANISATIONS": "Organisations",
 			"RESEARCHERS": "Researchers",
+			"TEMPLATES": "Templates",
 			"PROFILES": "Available Dataset Profiles",
 			"PROFILE": "DMP Profile",
 			"GRANT": "Grant",