dmp overview re-design -- not completed: lock, remove, versions

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

@@ -72,6 +72,10 @@ export class ConfigurationService extends BaseComponent {
 		return this._useSplash;
 	}
 
+	private _orcidPath: string;
+	get orcidPath(): string {
+		return this._orcidPath;
+	}
 
 	public loadConfiguration(): Promise<any> {
 		return new Promise((r, e) => {
@@ -110,6 +114,7 @@ export class ConfigurationService extends BaseComponent {
 		this._allowOrganizationCreator = config.allowOrganizationCreator;
 		this._doiLink = config.doiLink;
 		this._useSplash = config.useSplash;
+		this._orcidPath = config.orcidPath;
 	}
 
 }

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

@@ -75,7 +75,15 @@ const routes: Routes = [
 			breadcrumb: true,
 			title: 'GENERAL.TITLES.DATASET-UPDATE'
 		},
-	}
+	},
+	// {
+	// 	path: 'overview/:id',
+	// 	component: DatasetOverviewComponent,
+	// 	data: {
+	// 		breadcrumb: true,
+	// 		title: 'GENERAL.TITLES.DATASET-OVERVIEW'
+	// 	},
+	// },
 ];
 
 @NgModule({

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

@@ -86,5 +86,5 @@ export class PeopleTabComponent implements OnInit {
 				}));
 			}
 		});
-	}
+	} 
 }

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

@@ -26,7 +26,7 @@
 								{{'DMP-OVERVIEW.PRIVATE' | translate}}
 							</div>
 						</div>
-						<div class="d-flex mr-4" (click)="checkLockStatus(dmp.id)">
+						<div class="d-flex mr-4">
 							<div *ngIf="lockStatus" class="d-flex flex-row">
 								<mat-icon class="status-icon">lock_outline</mat-icon>
 								{{'DMP-OVERVIEW.LOCKED' | translate}}
@@ -66,33 +66,23 @@
 							matTooltip="{{'DMP-LISTING.ACTIONS.DELETE' | translate}}" matTooltipPosition="above">
 							<mat-icon class="mat-mini-fab-icon">delete</mat-icon>
 						</button>
-						<!-- <button *ngIf="isDraftDmp(dmp) && isUserOwner" (click)="finalize(dmp)" mat-mini-fab
-							class="mr-3 d-flex justify-content-center align-items-center"
-							matTooltip="{{'DMP-LISTING.ACTIONS.FINALIZE' | translate}}" matTooltipPosition="above">
-							<mat-icon class="mat-mini-fab-icon">lock_outline</mat-icon>
-						</button> -->
-
-						<button *ngIf="isDraftDmp(dmp) && isUserOwner" mat-mini-fab
+						<button *ngIf="isDraftDmp(dmp) && isUserOwner && !lockStatus" mat-mini-fab (click)="createOrUpdate(dmp.id)"
 							class="mr-3 d-flex justify-content-center align-items-center">
-							<div>
-								<div *ngIf="checkLockStatus(dmp.id)">
-									<mat-icon (click)="createOrUpdate(dmp.id)" class="mat-mini-fab-icon"
-										matTooltip="{{'DMP-OVERVIEW.LOCK' | translate}}" matTooltipPosition="above">
-										lock_outline
-									</mat-icon>
-								</div>
-							</div>
+							<mat-icon class="mat-mini-fab-icon" matTooltip="{{'DMP-OVERVIEW.LOCK' | translate}}"
+								matTooltipPosition="above">lock_outline
+							</mat-icon>
 						</button>
 					</div>
 					<div class="row header">{{'DMP-OVERVIEW.GRANT' | translate}}</div>
 					<div class="row dmp-label">{{ dmp.grant.label }}</div>
 					<div class="row header">{{'DMP-OVERVIEW.RESEARCHERS' | translate}}</div>
 					<div class="row">
-						<div *ngFor="let researcher of dmp.researchers; let last = last"
-							class="d-flex flex-row align-items-center">
-							<div class="id-btn">&nbsp;</div>
-							<div class="researcher" *ngIf="!last">{{ researcher.name }}, </div>
-							<div class="researcher" *ngIf="last">{{ researcher.name }}</div>
+						<div *ngFor="let researcher of dmp.researchers; let last = last">
+							<a href="{{getOrcidPath() + dmp.id }}" target="blank" class="researcher">
+								<div class="id-btn">&nbsp;</div>
+								<div *ngIf="!last">{{ researcher.name }}, </div>
+								<div *ngIf="last">{{ researcher.name }}</div>
+							</a>
 						</div>
 					</div>
 					<div class="row header">{{'DATASET-LISTING.COLUMNS.DESCRIPTION' | translate}}</div>
@@ -103,13 +93,6 @@
 					<div class="row d-flex flex-column">
 						<div *ngFor="let dataset of dmp.datasets; let i=index">
 							<div *ngIf="i < 3" (click)="datasetClicked(dataset.id)">
-								<!-- <mat-icon *ngIf="isDraftDataset(dataset)" class="draft-bookmark">bookmark</mat-icon>
-								<mat-icon *ngIf="!isDraftDataset(dataset)" class="finalized-bookmark">bookmark</mat-icon>
-								<h4 *ngIf="isDraftDataset(dataset)">
-									<span>{{ 'TYPES.DMP.DRAFT' | translate }}:</span> {{ dataset.label }}</h4>
-								<h4 *ngIf="!isDraftDataset(dataset)">{{ dataset.label }}</h4>
-								<div matTooltip="{{ dataset.datasetTemplate.label }}" class="chip">
-									{{ dataset.datasetTemplate.label }}</div> -->
 								<button mat-raised-button class="mb-2 mr-2 pl-0 pr-0">
 									<div matTooltip="{{ dataset.datasetTemplate.label }}" class="dataset-btn">
 										<div class="dataset-btn-label">{{ dataset.label }}:
@@ -139,9 +122,10 @@
 						<p class="doi-label">{{'DMP-EDITOR.TITLE.SUBTITLE' | translate}}</p>
 						<div class="doi-panel">
 							<p *ngIf="!hasDoi(dmp)" class="mb-0 ml-3">
-								<span class="doi-txt">{{ dmp.doi }}</span></p>
+								<textarea #doi class="doi-txt">{{ dmp.doi }}</textarea>
+							</p>
 							<div class="d-flex justify-content-end">
-								<button *ngIf="isAuthenticated()" (click)="cloneClicked(dmp)" mat-mini-fab
+								<button (click)="copyDoi(doi)" mat-mini-fab
 									class="mr-2 d-flex justify-content-center align-items-center"
 									matTooltip="{{'DMP-LISTING.ACTIONS.CLONE' | translate}}" matTooltipPosition="above">
 									<mat-icon class="mat-mini-fab-icon">content_copy</mat-icon>
@@ -228,7 +212,8 @@
 									</button>
 									<div>
 										<p class="authors-label">{{ user.name }}
-											<span *ngIf="!user.role"> ({{ 'DMP-OVERVIEW.YOU' | translate }})</span>
+											<span *ngIf="isUserAuthor(user.id)">
+												({{ 'DMP-OVERVIEW.YOU' | translate }})</span>
 										</p>
 										<p class="authors-role">{{ roleDisplay(user) }}</p>
 									</div>

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

@@ -145,6 +145,7 @@
   color: #008887;
   padding-right: 0.5em;
   align-self: center;
+
 }
 
 .header {
@@ -181,6 +182,11 @@
   font-size: 0.8em;
   letter-spacing: 0.009em;
   color: #7D7D7D;
+  width: 12em;
+  height: 1em;
+  overflow: hidden;
+  border: none;
+  padding: 0px;
 }
 
 .doi-panel {
@@ -257,7 +263,7 @@
 }
 
 .dmp-label, .dataset-btn, .add-dataset-btn,
- .doi-panel {
+ .doi-panel, .researcher {
   display: flex;
   align-items: center;
 }

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

@@ -1,5 +1,5 @@
 
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, ViewChild, ElementRef } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { DatasetStatus } from '@app/core/common/enum/dataset-status';
@@ -18,7 +18,7 @@ import { BreadcrumbItem } from '@app/ui/misc/breadcrumb/definition/breadcrumb-it
 import { BaseComponent } from '@common/base/base.component';
 import { TranslateService } from '@ngx-translate/core';
 import * as FileSaver from 'file-saver';
-import { Observable, of as observableOf } from 'rxjs';
+import { Observable, of as observableOf, interval } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { Role } from "@app/core/common/enum/role";
 import { DmpInvitationDialogComponent } from '../invitation/dmp-invitation.component';
@@ -32,8 +32,9 @@ import { UserService } from '@app/core/services/user/user.service';
 import { Location } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 import { LockService } from '@app/core/services/lock/lock.service';
-import { ReturnStatement } from '@angular/compiler';
+import { ReturnStatement, ConditionalExpr } from '@angular/compiler';
 import { LockModel } from '@app/core/model/lock/lock.model';
+import { Guid } from '@common/types/guid';
 
 @Component({
 	selector: 'app-dmp-overview',
@@ -53,6 +54,10 @@ export class DmpOverviewComponent extends BaseComponent implements OnInit {
 	hasDOIToken = false;
 	lock: LockModel;
 	lockStatus: Boolean;
+	textMessage: any;
+
+	@ViewChild('doi', { static: false })
+	doi: ElementRef;
 
 	@Input() formGroup: FormGroup;
 
@@ -88,6 +93,7 @@ export class DmpOverviewComponent extends BaseComponent implements OnInit {
 						.pipe(takeUntil(this._destroyed))
 						.subscribe(data => {
 							this.dmp = data;
+							this.checkLockStatus(this.dmp.id);
 							this.setIsUserOwner();
 							const breadCrumbs = [];
 							breadCrumbs.push({ parentComponentName: null, label: this.language.instant('NAV-BAR.MY-DMPS'), url: "/plans" });
@@ -110,6 +116,7 @@ export class DmpOverviewComponent extends BaseComponent implements OnInit {
 						.pipe(takeUntil(this._destroyed))
 						.subscribe(data => {
 							this.dmp = data;
+							this.checkLockStatus(this.dmp.id);
 							this.setIsUserOwner();
 							const breadCrumbs = [];
 							breadCrumbs.push({ parentComponentName: null, label: this.language.instant('NAV-BAR.PUBLIC-DMPS'), url: "/explore-plans" });
@@ -144,6 +151,11 @@ export class DmpOverviewComponent extends BaseComponent implements OnInit {
 		}
 	}
 
+	isUserAuthor(userId: string): boolean {
+		const principal: Principal = this.authentication.current();
+		return userId === principal.id;
+	}
+
 	editClicked(dmp: DmpOverviewModel) {
 		this.router.navigate(['/plans/edit/' + dmp.id]);
 	}
@@ -175,6 +187,7 @@ export class DmpOverviewComponent extends BaseComponent implements OnInit {
 			this.router.navigate(['/datasets/publicEdit/' + datasetId]);
 		} else {
 			this.router.navigate(['/datasets/edit/' + datasetId]);
+			console.log('inhere')
 		}
 	}
 
@@ -547,7 +560,7 @@ export class DmpOverviewComponent extends BaseComponent implements OnInit {
 					this.onCallbackSuccess()
 				},
 				error => this.onFinalizeCallbackError(error)
-			);;
+			);
 	}
 
 	goBack(): void {
@@ -572,18 +585,51 @@ export class DmpOverviewComponent extends BaseComponent implements OnInit {
 			}
 		});
 	}
-
-	checkLockStatus(id: string): Observable<boolean> {
-		return this.lockService.checkLockStatus(id);
+	
+	copyDoi(doi) {
+		console.log(doi.nativeElement.innerHTML);
+		let domElement = doi.nativeElement as HTMLInputElement;
+		domElement.select();
+		document.execCommand('copy');
+		domElement.setSelectionRange(0, 0);
+		alert('Doi Copied to Clipboard');
+	}
+	
+	public getOrcidPath(): string {
+		return this.configurationService.orcidPath;
 	}
 
-	createOrUpdate(id: string): Observable<string> {
-		// this.lock = new LockModel(id, this.getUserFromDMP());
-		return this.lockService.createOrUpdate(this.lock);
+	checkLockStatus(id: string){
+		this.lockService.checkLockStatus(id).pipe(takeUntil(this._destroyed))
+		.subscribe(lockStatus => this.lockStatus = lockStatus);
 	}
 
+	getUserFromDMP(): any {
+		if (this.dmp) {
+			const principal: Principal = this.authentication.current();
+			return this.dmp.users.find(x => x.id === principal.id);
+		}
+	}
+	
+	createOrUpdate(id: string): void {
+		if (!this.lockStatus) {
+			this.lock = new LockModel(id, this.getUserFromDMP());
 
+			this.lockService.createOrUpdate(this.lock).pipe(takeUntil(this._destroyed)).subscribe(async result => {
+				this.lock.id = Guid.parse(result);
+				this.checkLockStatus(id);
+				// interval(this.configurationService.lockInterval).pipe(takeUntil(this._destroyed)).subscribe(() => this.pumpLock());
+			});
+		}
+	}
 
+	// private pumpLock() {
+	// 	this.lock.touchedAt = new Date();
+	// 	this.lockStatus = true;
+	// 	this.lockService.createOrUpdate(this.lock).pipe(takeUntil(this._destroyed)).subscribe(async result => this.lock.id = Guid.parse(result));
+	// }
+
+	
 	// advancedClicked() {
 	// 	const dialogRef = this.dialog.open(ExportMethodDialogComponent, {
 	// 		maxWidth: '500px',
@@ -627,4 +673,5 @@ export class DmpOverviewComponent extends BaseComponent implements OnInit {
 	// 	});
 	// }
 
+
 }

dmp-frontend/src/assets/config/config.json

@@ -52,5 +52,6 @@
 	"guideAssets": "assets/images/guide",
 	"allowOrganizationCreator": true,
 	"doiLink": "https://sandbox.zenodo.org/record/",
-	"useSplash": false
+	"useSplash": false,
+	"orcidPath": "https://orcid.org/"
 }