From 9d40ffde63ef68fa8732023a74176aec4089d4c5 Mon Sep 17 00:00:00 2001
From: apapachristou <apapachristou@cite.gr>
Date: Thu, 23 May 2019 18:48:54 +0300
Subject: [PATCH] Dmp Editor First Commit

---
 .../recent-edited-activity.component.css      |   3 +-
 dmp-frontend/src/app/ui/dmp/dmp.module.ts     |   4 +-
 .../available-profiles.component.html         |   2 +-
 .../ui/dmp/editor/dmp-editor.component.html   | 140 ++++++++++++--
 .../ui/dmp/editor/dmp-editor.component.scss   |  25 ++-
 .../app/ui/dmp/editor/dmp-editor.component.ts | 143 +++-----------
 .../dynamic-dmp-field-resolver.component.html |  50 ++---
 .../general-tab/general-tab.component.html    | 130 +++++++++++++
 .../general-tab/general-tab.component.scss    |  24 +++
 .../general-tab/general-tab.component.ts      | 176 ++++++++++++++++++
 .../dmp/overview/dmp-overview.component.scss  |   3 +-
 dmp-frontend/src/assets/i18n/en.json          |  22 ++-
 dmp-frontend/src/styles.scss                  |  55 +++---
 13 files changed, 575 insertions(+), 202 deletions(-)
 create mode 100644 dmp-frontend/src/app/ui/dmp/editor/general-tab/general-tab.component.html
 create mode 100644 dmp-frontend/src/app/ui/dmp/editor/general-tab/general-tab.component.scss
 create mode 100644 dmp-frontend/src/app/ui/dmp/editor/general-tab/general-tab.component.ts

diff --git a/dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.css b/dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.css
index 7bcde638a..3e20b81eb 100644
--- a/dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.css
+++ b/dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.css
@@ -30,7 +30,8 @@ th {
 	margin-left: 2.5em;
 	margin-right: 2.5em;
 	border-radius: 10em;
-	background-color: #007bff;
+	background-color: rgba(0, 112, 192, 1);
+	/* background-color: #007bff; */
 	color: #fff;
 	text-transform: uppercase;
 	text-align: center;
diff --git a/dmp-frontend/src/app/ui/dmp/dmp.module.ts b/dmp-frontend/src/app/ui/dmp/dmp.module.ts
index 51be1f1d5..5b2016495 100644
--- a/dmp-frontend/src/app/ui/dmp/dmp.module.ts
+++ b/dmp-frontend/src/app/ui/dmp/dmp.module.ts
@@ -24,6 +24,7 @@ import { DmpWizardEditorComponent } from './wizard/editor/dmp-wizard-editor.comp
 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';
+import { GeneralTabComponent } from './editor/general-tab/general-tab.component';
 
 @NgModule({
 	imports: [
@@ -53,7 +54,8 @@ import { ExportMethodDialogModule } from '../../library/export-method-dialog/exp
 		DynamicFieldProjectComponent,
 		DmpUploadDialogue,
 		DmpListingItemComponent,
-		DmpOverviewComponent
+		DmpOverviewComponent,
+		GeneralTabComponent
 	],
 	entryComponents: [
 		DmpInvitationDialogComponent,
diff --git a/dmp-frontend/src/app/ui/dmp/editor/available-profiles/available-profiles.component.html b/dmp-frontend/src/app/ui/dmp/editor/available-profiles/available-profiles.component.html
index 6fbe63d45..1d628553b 100644
--- a/dmp-frontend/src/app/ui/dmp/editor/available-profiles/available-profiles.component.html
+++ b/dmp-frontend/src/app/ui/dmp/editor/available-profiles/available-profiles.component.html
@@ -1,4 +1,4 @@
-<h4 mat-dialog-title>Available Dataset profiles</h4>
+<h4 mat-dialog-title>Available Dataset Templates</h4>
 <div mat-dialog-content>
 	<mat-selection-list #datasetsprofiles [ngModel]="selectedOptions">
 		<mat-list-option *ngFor="let profile of profiles" [value]="profile" [selected]='isOptionSelected(profile)'>
diff --git a/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.html b/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.html
index a57e3f48b..76f9cb443 100644
--- a/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.html
+++ b/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.html
@@ -1,4 +1,106 @@
 <div class="main-content">
+	<div class="container-fluid">
+		<div *ngIf="dmp" class="card col-12">
+			<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 *ngIf="!isPublic" (click)="newVersion(dmp.id, dmp.label)">
+							<mat-icon>queue</mat-icon>{{'DMP-LISTING.ACTIONS.NEW-VERSION' | translate}}
+						</button>
+						<button mat-menu-item *ngIf="!isPublic" (click)="viewVersions(dmp.groupId, dmp.label)">
+							<mat-icon>library_books</mat-icon>{{'DMP-LISTING.ACTIONS.VIEW-VERSION' | translate}}
+						</button>
+						<button mat-menu-item (click)="clone(dmp.id)" class="menu-item">
+							<mat-icon>add</mat-icon>{{ 'DMP-LISTING.ACTIONS.CLONE' | translate }}
+						</button>
+						<button mat-menu-item (click)="delete()" 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 text-uppercase">
+						<mat-icon>save_alt</mat-icon> {{ 'DMP-LISTING.ACTIONS.EXPORT' | translate }}
+					</button>
+				</div>
+			</div>
+			<div class="row d-flex flex-column">
+				<mat-tab-group class="col-12 mt-3">
+					<mat-tab>
+						<ng-template mat-tab-label class="tab-label">
+							<i class="material-icons-outlined mr-2">view_agenda</i>
+							{{ 'SIDE-BAR.GENERAL' | translate }}
+						</ng-template>
+						<!-- <div class="row"> -->
+						<app-general-tab [formGroup]="formGroup"></app-general-tab>
+						<!-- </div> -->
+						<!-- <form *ngIf="formGroup" (ngSubmit)="formSubmit()" [formGroup]="formGroup"></form> -->
+					</mat-tab>
+					<mat-tab>
+						<ng-template mat-tab-label>
+							<mat-icon class="mr-2">work_outline</mat-icon>
+							{{ 'DMP-LISTING.COLUMNS.PROJECT' | translate }}
+						</ng-template>
+					</mat-tab>
+					<mat-tab>
+						<ng-template mat-tab-label>
+							<mat-icon class="mr-2">library_books</mat-icon>
+							{{ 'DMP-LISTING.COLUMNS.DATASETS' | translate }}
+						</ng-template>
+					</mat-tab>
+					<mat-tab>
+						<ng-template mat-tab-label>
+							<mat-icon class="mr-2">person</mat-icon>
+							{{ 'DMP-LISTING.COLUMNS.PEOPLE' | translate }}
+						</ng-template>
+					</mat-tab>
+					<mat-tab>
+						<ng-template mat-tab-label>
+							<mat-icon class="mr-2">settings</mat-icon>
+							{{ 'DMP-LISTING.ACTIONS.SETTINGS' | translate }}
+						</ng-template>
+					</mat-tab>
+				</mat-tab-group>
+
+				<div class="col-12 d-flex justify-content-end pt-2 pb-4">
+					<div>
+						<button mat-raised-button color="primary" (click)="cancel(dmp.id)" type="button"
+							class="lightblue-btn text-uppercase mr-2">
+							{{'DMP-EDITOR.ACTIONS.CANCEL' | translate}}
+						</button>
+					</div>
+					<!-- <div class="col"></div> -->
+					<!-- <div class="col-auto" *ngIf="!isNew && this.formGroup.enabled">
+										<button mat-raised-button color="primary" type="button" (click)="delete()">
+											{{'DMP-EDITOR.ACTIONS.DELETE' | translate}}
+										</button>
+									</div> -->
+					<div *ngIf="this.formGroup.enabled">
+						<button mat-raised-button color="primary" type="submit"
+							class="lightblue-btn text-uppercase mr-2">{{'DMP-EDITOR.ACTIONS.SAVE' | translate}}
+						</button>
+					</div>
+					<div *ngIf="dmp.lockable && this.formGroup.enabled">
+						<button type="button" mat-raised-button color="primary" class="lightblue-btn text-uppercase"
+							(click)="saveAndFinalize()">{{'DMP-EDITOR.ACTIONS.FINALISE' | translate}}
+						</button>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+
+<!-- <div class="main-content">
 	<div class="container-fluid">
 		<div class="dmp-editor">
 			<div>
@@ -70,12 +172,12 @@
 							<mat-form-field class="col-md-12">
 								<textarea matInput class="description-area"
 									placeholder="{{'DMP-EDITOR.FIELDS.DESCRIPTION' | translate}}" formControlName="description">
-								</textarea>
-								<!-- <mat-error *ngIf="formGroup.get('description').hasError('backendError')">
+								</textarea> -->
+<!-- <mat-error *ngIf="formGroup.get('description').hasError('backendError')">
 									{{formGroup.get('description').getError('backendError').message}}</mat-error>
 								<mat-error *ngIf="formGroup.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' |
 									translate}}</mat-error> -->
-							</mat-form-field>
+<!-- </mat-form-field>
 							<mat-form-field class="col-md-6">
 								<app-single-auto-complete required='true' [formControl]="formGroup.get('project')"
 									placeholder="{{this.languageResolverService.getBy('dmpEditor') | translate}}"
@@ -85,9 +187,9 @@
 									{{formGroup.get('project').getError('backendError').message}}</mat-error>
 								<mat-error *ngIf="formGroup.get('project').hasError('required')">
 									{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-							</mat-form-field>
-							<!-- <app-dynamic-fields-project [formGroup]="formGroup"></app-dynamic-fields-project> -->
-							<mat-form-field class="col-md-6">
+							</mat-form-field> -->
+<!-- <app-dynamic-fields-project [formGroup]="formGroup"></app-dynamic-fields-project> -->
+<!-- <mat-form-field class="col-md-6">
 								<app-multiple-auto-complete required='true' [formControl]="formGroup.get('profiles')"
 									placeholder="{{'DMP-EDITOR.FIELDS.PROFILES' | translate}}"
 									[configuration]="profilesAutoCompleteConfiguration">
@@ -100,11 +202,11 @@
 									(click)="availableProfiles()">
 									<mat-icon>view_list</mat-icon>
 								</button>
-							</mat-form-field>
-							<!-- <button mat-button (click)="availableProfiles()">View All</button> -->
+							</mat-form-field> -->
+<!-- <button mat-button (click)="availableProfiles()">View All</button> -->
 
 
-							<mat-form-field class="col-md-6">
+<!-- <mat-form-field class="col-md-6">
 								<app-multiple-auto-complete [formControl]="formGroup.get('organisations')"
 									placeholder="{{'DMP-EDITOR.FIELDS.ORGANISATIONS' | translate}}"
 									[configuration]="organisationsAutoCompleteConfiguration">
@@ -127,10 +229,10 @@
 									type="button" (click)="addResearcher()">
 									<mat-icon>add_circle</mat-icon>
 								</button>
-							</mat-form-field>
+							</mat-form-field> -->
 
-							<!-- <h4 mat-subheader class="col-12">{{'DMP-EDITOR.FIELDS.PROFILE' | translate}}</h4> -->
-							<mat-form-field class="col-md-6">
+<!-- <h4 mat-subheader class="col-12">{{'DMP-EDITOR.FIELDS.PROFILE' | translate}}</h4> -->
+<!-- <mat-form-field class="col-md-6">
 								<app-single-auto-complete [required]='false' [formControl]="formGroup.get('profile')"
 									placeholder="{{'DMP-EDITOR.FIELDS.PROFILE' | translate}}"
 									[configuration]="dmpProfileAutoCompleteConfiguration">
@@ -140,11 +242,11 @@
 							<mat-form-field class="col-md-6">
 								<input matInput placeholder="Version" disabled
 									[value]="formGroup.get('version').value== undefined ?0 :formGroup.get('version').value">
-							</mat-form-field>
+							</mat-form-field> -->
 
-							<!-- <app-dynamic-dmp-field-resolver *ngIf="dmp.definition" class="col-md-12"
+<!-- <app-dynamic-dmp-field-resolver *ngIf="dmp.definition" class="col-md-12"
 								[formGroup]="formGroup" [dmpProfileDefinition]=dmp.definition></app-dynamic-dmp-field-resolver> -->
-							<app-dynamic-dmp-field-resolver *ngIf="selectedDmpProfileDefinition" class="col-md-12"
+<!-- <app-dynamic-dmp-field-resolver *ngIf="selectedDmpProfileDefinition" class="col-md-12"
 								[formGroup]="formGroup" [dmpProfileDefinition]="selectedDmpProfileDefinition">
 							</app-dynamic-dmp-field-resolver>
 
@@ -180,8 +282,8 @@
 						</div>
 					</mat-card-content>
 				</mat-card>
-			</form>
-			<!-- <div *ngIf="formGroup"> {{ formGroup.value | json }}</div> -->
-		</div>
+			</form> -->
+<!-- <div *ngIf="formGroup"> {{ formGroup.value | json }}</div> -->
+<!-- </div>
 	</div>
-</div>
+</div> -->
diff --git a/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.scss b/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.scss
index 134988d51..14ef70cc5 100644
--- a/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.scss
+++ b/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.scss
@@ -1,3 +1,24 @@
-.dmp-editor {
-
+.menu-item {
+  width: 248px;
+}
+
+.more-horiz {
+  font-size: 28px;
+  color: #aaaaaa;
+}
+
+.more-icon :hover {
+  color: #4687e6;
+}
+
+::ng-deep .mat-tab-labels {
+  justify-content: space-between;
+}
+
+::ng-deep .mat-tab-label-content {
+  text-transform: uppercase;
+}
+
+::ng-deep .mat-ink-bar {
+  background-color: #0070c0 !important;
 }
diff --git a/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.ts b/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.ts
index 1fae23dda..2ca42facc 100644
--- a/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.ts
+++ b/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.ts
@@ -40,6 +40,7 @@ import { AvailableProfilesComponent } from './available-profiles/available-profi
 import { DmpEditorModel } from './dmp-editor.model';
 import { DmpFinalizeDialogComponent } from './dmp-finalize-dialog/dmp-finalize-dialog.component';
 import { AuthService } from '../../../core/services/auth/auth.service';
+import { ExportMethodDialogComponent } from '../../../library/export-method-dialog/export-method-dialog.component';
 
 @Component({
 	selector: 'app-dmp-editor-component',
@@ -57,18 +58,8 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 	dmp: DmpEditorModel;
 	formGroup: FormGroup = null;
 
-	filteringOrganisationsAsync = false;
-	filteringResearchersAsync = false;
-	filteredProfilesAsync = false;
-	filteredOrganisations: ExternalSourceItemModel[];
-	filteredResearchers: ExternalSourceItemModel[];
-	filteredProfiles: DatasetProfileModel[];
 
 	projectAutoCompleteConfiguration: SingleAutoCompleteConfiguration;
-	profilesAutoCompleteConfiguration: MultipleAutoCompleteConfiguration;
-	organisationsAutoCompleteConfiguration: MultipleAutoCompleteConfiguration;
-	researchersAutoCompleteConfiguration: MultipleAutoCompleteConfiguration;
-	dmpProfileAutoCompleteConfiguration: SingleAutoCompleteConfiguration;
 
 	createNewVersion;
 	associatedUsers: Array<UserModel>;
@@ -115,34 +106,6 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 					titleFn: (item) => item['label']
 				};
 
-				this.dmpProfileAutoCompleteConfiguration = {
-					filterFn: this.dmpProfileSearch.bind(this),
-					initialItems: (extraData) => this.dmpProfileSearch(''),
-					displayFn: (item) => item['label'],
-					titleFn: (item) => item['label']
-				};
-
-				this.profilesAutoCompleteConfiguration = {
-					filterFn: this.filterProfiles.bind(this),
-					initialItems: (excludedItems: any[]) => this.filterProfiles('').map(result => result.filter(resultItem => excludedItems.map(x => x.id).indexOf(resultItem.id) === -1)),
-					displayFn: (item) => item['label'],
-					titleFn: (item) => item['label']
-				};
-
-				this.organisationsAutoCompleteConfiguration = {
-					filterFn: this.filterOrganisations.bind(this),
-					initialItems: (excludedItems: any[]) => this.filterOrganisations('').map(result => result.filter(resultItem => excludedItems.map(x => x.id).indexOf(resultItem.id) === -1)),
-					displayFn: (item) => item['name'],
-					titleFn: (item) => item['name']
-				};
-
-				this.researchersAutoCompleteConfiguration = {
-					filterFn: this.filterResearchers.bind(this),
-					initialItems: (excludedItems: any[]) => this.filterResearchers('').map(result => result.filter(resultItem => excludedItems.map(x => x.id).indexOf(resultItem.id) === -1)),
-					displayFn: (item) => item['name'],
-					titleFn: (item) => item['name']
-				};
-
 				if (itemId != null) {
 					this.isNew = false;
 					this.dmpService.getSingle(itemId).map(data => data as DmpModel)
@@ -150,7 +113,7 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 						.subscribe(async data => {
 							this.dmp = new DmpEditorModel().fromModel(data);
 							this.formGroup = this.dmp.buildForm();
-							this.registerFormEventsForDmpProfile(this.dmp.definition);
+							//this.registerFormEventsForDmpProfile(this.dmp.definition);
 							if (!this.editMode || this.dmp.status === Status.Inactive) { this.formGroup.disable(); }
 							if (this.isAuthenticated) {
 								// if (!this.isAuthenticated) {
@@ -177,7 +140,7 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 							this.dmp = new DmpEditorModel();
 							this.dmp.project = data;
 							this.formGroup = this.dmp.buildForm();
-							this.registerFormEventsForDmpProfile();
+							//this.registerFormEventsForDmpProfile();
 							this.formGroup.get('project').disable();
 							this.registerFormEventsForNewItem();
 						});
@@ -189,7 +152,7 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 						.subscribe(async data => {
 							this.dmp = new DmpEditorModel().fromModel(data);
 							this.formGroup = this.dmp.buildForm();
-							this.registerFormEventsForDmpProfile(this.dmp.definition);
+							//this.registerFormEventsForDmpProfile(this.dmp.definition);
 							if (!this.editMode || this.dmp.status === Status.Inactive) { this.formGroup.disable(); }
 							if (this.isAuthenticated()) {
 								// if (!this.isAuthenticated) {
@@ -207,7 +170,6 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 				} else {
 					this.dmp = new DmpEditorModel();
 					this.formGroup = this.dmp.buildForm();
-					this.registerFormEventsForDmpProfile();
 					this.registerFormEventsForNewItem();
 				}
 			});
@@ -220,24 +182,6 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 			});
 	}
 
-	registerFormEventsForDmpProfile(definitionPropertys?: DmpProfileDefinition): void {
-		this.formGroup.get('profile').valueChanges
-			.pipe(takeUntil(this._destroyed))
-			.subscribe(Option => {
-				if (Option instanceof Object) {
-					this.selectedDmpProfileDefinition = null;
-					this.dmpProfileService.getSingle(Option.id)
-						.pipe(takeUntil(this._destroyed))
-						.subscribe(result => {
-							this.selectedDmpProfileDefinition = result.definition;
-						});
-				} else {
-					this.selectedDmpProfileDefinition = null;
-				}
-				this.selectedDmpProfileDefinition = definitionPropertys;
-			})
-	}
-
 	isAuthenticated() {
 		return this.authService.current() != null;
 	}
@@ -311,54 +255,6 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 		this.router.navigate(['/invite/' + this.dmp.id]);
 	}
 
-	filterOrganisations(value: string): Observable<ExternalSourceItemModel[]> {
-
-		this.filteredOrganisations = undefined;
-		this.filteringOrganisationsAsync = true;
-
-		return this.externalSourcesService.searchDMPOrganizations(value);
-	}
-
-	filterResearchers(value: string): Observable<ExternalSourceItemModel[]> {
-
-		this.filteredResearchers = undefined;
-		this.filteringResearchersAsync = true;
-
-		return this.externalSourcesService.searchDMPResearchers({ criteria: { name: value, like: null } });
-	}
-
-	filterProfiles(value: string): Observable<DatasetProfileModel[]> {
-
-		this.filteredProfiles = undefined;
-		this.filteredProfilesAsync = true;
-
-		const request = new RequestItem<DatasetProfileCriteria>();
-		const criteria = new DatasetProfileCriteria();
-		criteria.like = value;
-		request.criteria = criteria;
-		return this._service.searchDMPProfiles(request);
-	}
-
-	addResearcher(rowId: any, rowName: any) {
-		const dialogRef = this.dialog.open(AddResearcherComponent, {
-			data: {
-				dmpId: rowId,
-				dmpName: rowName
-			}
-		});
-
-	}
-
-	availableProfiles() {
-		const dialogRef = this.dialog.open(AvailableProfilesComponent, {
-			data: {
-				profiles: this.formGroup.get('profiles')
-			}
-		});
-
-		return false;
-	}
-
 	public delete(): void {
 		const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
 			maxWidth: '300px',
@@ -383,16 +279,6 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 		this.uiNotificationService.snackBarNotification(error.error.message ? error.error.message : this.language.instant('GENERAL.SNACK-BAR.UNSUCCESSFUL-DELETE'), SnackBarNotificationLevel.Error);
 	}
 
-	// selectOption(option: any) {
-	// 	this.dmp.definition = null;
-	// 	this.formGroup.get('profile').patchValue(option, { emitEvent: false });
-	// 	this.dmpProfileService.getSingle(option.id)
-	// 		.pipe(takeUntil(this._destroyed))
-	// 		.subscribe(result => {
-	// 			this.selectedDmpProfileDefinition = result.definition;
-	// 		});
-	// }
-
 	displayWith(item: any) {
 		if (!item) { return null; }
 		return item['label'];
@@ -418,6 +304,27 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 		this.router.navigate(['/plans/versions/' + rowId], { queryParams: { groupLabel: rowLabel } });
 	}
 
+	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);
+			}
+		});
+	}
+
 	downloadXml(id: string) {
 		this.dmpService.downloadXML(id)
 			.pipe(takeUntil(this._destroyed))
diff --git a/dmp-frontend/src/app/ui/dmp/editor/dynamic-field-resolver/dynamic-dmp-field-resolver.component.html b/dmp-frontend/src/app/ui/dmp/editor/dynamic-field-resolver/dynamic-dmp-field-resolver.component.html
index 3523cf9ad..2598a4a88 100644
--- a/dmp-frontend/src/app/ui/dmp/editor/dynamic-field-resolver/dynamic-dmp-field-resolver.component.html
+++ b/dmp-frontend/src/app/ui/dmp/editor/dynamic-field-resolver/dynamic-dmp-field-resolver.component.html
@@ -1,27 +1,29 @@
-
-<div class="row">
-    <div *ngFor="let field of dmpProfileDefinition?.fields; let i = index" class="col-md-6">
-        <!-- <div *ngIf="field.type == dmpProfileTypeEnum.Input"> -->
-        <mat-form-field class="full-width" *ngIf="field.dataType == dmpProfileFieldDataType.Date">
-            <input matInput [matDatepicker]="picker" [placeholder]="field.label"
-                [formControl]="formGroup.get('properties').get('fields').get(''+i).get('value')" [required]="field.required">
-            <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
-            <mat-datepicker #picker></mat-datepicker>
-            <mat-error *ngIf="formGroup.get('properties').get('fields').get(''+i).get('value')['errors']">{{'GENERAL.VALIDATION.REQUIRED'
+<div *ngFor="let field of dmpProfileDefinition?.fields; let i = index" class="row">
+	<div class="col-md-8">
+		<!-- <div *ngIf="field.type == dmpProfileTypeEnum.Input"> -->
+		<mat-form-field class="full-width" *ngIf="field.dataType == dmpProfileFieldDataType.Date">
+			<input matInput [matDatepicker]="picker" [placeholder]="field.label"
+				[formControl]="formGroup.get('properties').get('fields').get(''+i).get('value')"
+				[required]="field.required">
+			<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+			<mat-datepicker #picker></mat-datepicker>
+			<mat-error *ngIf="formGroup.get('properties').get('fields').get(''+i).get('value')['errors']">{{'GENERAL.VALIDATION.REQUIRED'
                 | translate}}</mat-error>
-        </mat-form-field>
-        <mat-form-field class="full-width" *ngIf="field.dataType == dmpProfileFieldDataType.Text">
-            <input matInput [placeholder]="field.label"
-                [formControl]="formGroup.get('properties').get('fields').get(''+i).get('value')" [required]="field.required">
-                <mat-error *ngIf="formGroup.get('properties').get('fields').get(''+i).get('value')['errors']">{{'GENERAL.VALIDATION.REQUIRED'
+		</mat-form-field>
+		<mat-form-field class="full-width" *ngIf="field.dataType == dmpProfileFieldDataType.Text">
+			<input matInput [placeholder]="field.label"
+				[formControl]="formGroup.get('properties').get('fields').get(''+i).get('value')"
+				[required]="field.required">
+			<mat-error *ngIf="formGroup.get('properties').get('fields').get(''+i).get('value')['errors']">{{'GENERAL.VALIDATION.REQUIRED'
                     | translate}}</mat-error>
-        </mat-form-field>
-        <mat-form-field class="full-width" *ngIf="field.dataType == dmpProfileFieldDataType.Number">
-            <input matInput type="number" [placeholder]="field.label"
-                [formControl]="formGroup.get('properties').get('fields').get(''+i).get('value')" [required]="field.required">
-                <mat-error *ngIf="formGroup.get('properties').get('fields').get(''+i).get('value')['errors']">{{'GENERAL.VALIDATION.REQUIRED'
+		</mat-form-field>
+		<mat-form-field class="full-width" *ngIf="field.dataType == dmpProfileFieldDataType.Number">
+			<input matInput type="number" [placeholder]="field.label"
+				[formControl]="formGroup.get('properties').get('fields').get(''+i).get('value')"
+				[required]="field.required">
+			<mat-error *ngIf="formGroup.get('properties').get('fields').get(''+i).get('value')['errors']">{{'GENERAL.VALIDATION.REQUIRED'
                     | translate}}</mat-error>
-        </mat-form-field>
-        <!-- </div> -->
-    </div>
-</div>
\ No newline at end of file
+		</mat-form-field>
+		<!-- </div> -->
+	</div>
+</div>
diff --git a/dmp-frontend/src/app/ui/dmp/editor/general-tab/general-tab.component.html b/dmp-frontend/src/app/ui/dmp/editor/general-tab/general-tab.component.html
new file mode 100644
index 000000000..173c65d8b
--- /dev/null
+++ b/dmp-frontend/src/app/ui/dmp/editor/general-tab/general-tab.component.html
@@ -0,0 +1,130 @@
+<div class="row" [formGroup]="formGroup">
+	<div class="col-9 pt-4 pb-4">
+		<div class="row">
+			<mat-form-field class="col-8">
+				<input matInput placeholder="{{'DMP-EDITOR.FIELDS.NAME' | translate}}" type="text" name="label"
+					formControlName="label" required>
+				<mat-error *ngIf="formGroup.get('label').hasError('backendError')">
+					{{formGroup.get('label').getError('backendError').message}}</mat-error>
+				<mat-error *ngIf="formGroup.get('label').hasError('required')">
+					{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+			</mat-form-field>
+		</div>
+		<div class="row">
+			<mat-form-field class="col-8">
+				<textarea matInput class="description-area"
+					placeholder="{{'DMP-EDITOR.FIELDS.DESCRIPTION' | translate}}" formControlName="description">
+											</textarea>
+				<!-- <mat-error *ngIf="formGroup.get('description').hasError('backendError')">
+												{{formGroup.get('description').getError('backendError').message}}</mat-error>
+											<mat-error *ngIf="formGroup.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' |
+												translate}}</mat-error> -->
+			</mat-form-field>
+		</div>
+		<div class="row">
+			<!-- <mat-form-field class="col-8">
+				<app-single-auto-complete required='true' [formControl]="formGroup.get('project')"
+					placeholder="{{this.languageResolverService.getBy('dmpEditor') | translate}}"
+					[configuration]="projectAutoCompleteConfiguration">
+				</app-single-auto-complete>
+				<mat-error *ngIf="formGroup.get('project').hasError('backendError')">
+					{{formGroup.get('project').getError('backendError').message}}</mat-error>
+				<mat-error *ngIf="formGroup.get('project').hasError('required')">
+					{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+			</mat-form-field> -->
+			<!-- <app-dynamic-fields-project [formGroup]="formGroup"></app-dynamic-fields-project> -->
+		</div>
+		<div class="row">
+			<mat-form-field class="col-8">
+				<app-multiple-auto-complete required='true' [formControl]="formGroup.get('profiles')"
+					placeholder="{{'DMP-EDITOR.FIELDS.DATASET-TEMPLATES' | translate}}"
+					[configuration]="profilesAutoCompleteConfiguration">
+				</app-multiple-auto-complete>
+				<mat-error *ngIf="formGroup.get('profiles').hasError('backendError')">
+					{{formGroup.get('profiles').getError('backendError').message}}</mat-error>
+				<mat-error *ngIf="formGroup.get('profiles').hasError('required')">
+					{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+				<button matSuffix mat-icon-button type="button" [disabled]="formGroup.get('profiles').disabled"
+					(click)="availableProfiles()">
+					<mat-icon class="icon-btn">view_list</mat-icon>
+				</button>
+			</mat-form-field>
+			<!-- <button mat-button (click)="availableProfiles()">View All</button> -->
+		</div>
+		<div class="row">
+			<mat-form-field class="col-8">
+				<app-multiple-auto-complete [formControl]="formGroup.get('organisations')"
+					placeholder="{{'DMP-EDITOR.FIELDS.ORGANISATIONS' | translate}}"
+					[configuration]="organisationsAutoCompleteConfiguration">
+				</app-multiple-auto-complete>
+				<mat-error *ngIf="formGroup.get('organisations').hasError('backendError')">
+					{{formGroup.get('organisations').getError('backendError').message}}</mat-error>
+				<mat-error *ngIf="formGroup.get('organisations').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' |
+												translate}}</mat-error>
+			</mat-form-field>
+		</div>
+		<div class="row">
+			<mat-form-field class="col-8">
+				<app-multiple-auto-complete [formControl]="formGroup.get('researchers')"
+					placeholder="{{'DMP-EDITOR.FIELDS.RESEARCHERS' | translate}}"
+					[configuration]="researchersAutoCompleteConfiguration">
+				</app-multiple-auto-complete>
+				<mat-error *ngIf="formGroup.get('researchers').hasError('backendError')">
+					{{formGroup.get('researchers').getError('backendError').message}}</mat-error>
+				<mat-error *ngIf="formGroup.get('researchers').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' |
+												translate}}</mat-error>
+				<button matSuffix mat-icon-button [disabled]="formGroup.get('researchers').disabled" type="button"
+					(click)="addResearcher()">
+					<mat-icon class="icon-btn">add_circle</mat-icon>
+				</button>
+			</mat-form-field>
+			<!-- <h4 mat-subheader class="col-12">{{'DMP-EDITOR.FIELDS.PROFILE' | translate}}</h4> -->
+		</div>
+		<div class="row">
+			<mat-form-field class="col-8">
+				<app-single-auto-complete [required]='false' [formControl]="formGroup.get('profile')"
+					placeholder="{{'DMP-EDITOR.FIELDS.TEMPLATE' | translate}}"
+					[configuration]="dmpProfileAutoCompleteConfiguration">
+				</app-single-auto-complete>
+			</mat-form-field>
+		</div>
+
+		<app-dynamic-dmp-field-resolver *ngIf="selectedDmpProfileDefinition" [formGroup]="formGroup"
+			[dmpProfileDefinition]="selectedDmpProfileDefinition">
+		</app-dynamic-dmp-field-resolver>
+
+		<!-- Associates Users -->
+		<!-- <div class="col-8">
+						<mat-list *ngIf="associatedUsers?.length" role="list" class="col-md-12">
+							<h3 mat-subheader>Associated Users</h3>
+							<mat-list-item role="listitem" *ngFor="let user of associatedUsers">
+								<mat-icon mat-list-icon>person</mat-icon>
+								<div>{{user.name}}</div>
+							</mat-list-item>
+						</mat-list>
+					</div> -->
+	</div>
+
+	<!-- Versioning Container-->
+	<div class='col-3'>
+		<div class='row version-menu'>
+			<mat-form-field class="col-auto">
+				<input matInput placeholder="Version" disabled
+					[value]="formGroup.get('version').value== undefined ?0 :formGroup.get('version').value">
+			</mat-form-field>
+			<!-- <app-dynamic-dmp-field-resolver *ngIf="dmp.definition" class="col-md-12" [formGroup]="formGroup" [dmpProfileDefinition]=dmp.definition></app-dynamic-dmp-field-resolver> -->
+			<div class="col-auto mb-2">
+				Versioning is automated.
+			</div>
+			<!-- Versioning Actions -->
+			<!-- <div class="col-auto d-flex align-content-center mb-1" style="cursor: pointer;">
+							<mat-icon>edit</mat-icon>
+							<span>Click here to edit</span>
+						</div>
+						<div class="col-auto d-flex align-content-center mb-3" style="cursor: pointer;">
+							<mat-icon>history</mat-icon>
+							Click here to view previous versions
+						</div> -->
+		</div>
+	</div>
+</div>
diff --git a/dmp-frontend/src/app/ui/dmp/editor/general-tab/general-tab.component.scss b/dmp-frontend/src/app/ui/dmp/editor/general-tab/general-tab.component.scss
new file mode 100644
index 000000000..a1b8185f8
--- /dev/null
+++ b/dmp-frontend/src/app/ui/dmp/editor/general-tab/general-tab.component.scss
@@ -0,0 +1,24 @@
+.icon-btn {
+  font-size: 22px !important;
+  color: #aaaaaa;
+}
+
+.mat-icon-button :hover {
+  color: #4687f0 !important;
+}
+
+.version-menu {
+	display: flex;
+	flex-wrap: nowrap;
+	flex-direction: column;
+	background-color: rgba(250, 250, 250, 1);
+	border: 1px solid #ececec;
+	padding-top: 1em;
+	margin-top: 2em;
+	margin-right: 2em;
+	font-size: 12px;
+}
+
+.version-menu mat-icon {
+	color: #4687f0;
+}
diff --git a/dmp-frontend/src/app/ui/dmp/editor/general-tab/general-tab.component.ts b/dmp-frontend/src/app/ui/dmp/editor/general-tab/general-tab.component.ts
new file mode 100644
index 000000000..6f6f7d308
--- /dev/null
+++ b/dmp-frontend/src/app/ui/dmp/editor/general-tab/general-tab.component.ts
@@ -0,0 +1,176 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { MatDialog } from '@angular/material';
+import { Observable } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { BaseComponent } from '../../../../core/common/base/base.component';
+import { DataTableRequest } from '../../../../core/model/data-table/data-table-request';
+import { DatasetProfileModel } from '../../../../core/model/dataset/dataset-profile';
+import { DmpProfileDefinition } from '../../../../core/model/dmp-profile/dmp-profile';
+import { ExternalSourceItemModel } from '../../../../core/model/external-sources/external-source-item';
+import { DatasetProfileCriteria } from '../../../../core/query/dataset-profile/dataset-profile-criteria';
+import { DmpProfileCriteria } from '../../../../core/query/dmp/dmp-profile-criteria';
+import { RequestItem } from '../../../../core/query/request-item';
+import { DmpProfileService } from '../../../../core/services/dmp/dmp-profile.service';
+import { DmpService } from '../../../../core/services/dmp/dmp.service';
+import { ExternalSourcesService } from '../../../../core/services/external-sources/external-sources.service';
+import { MultipleAutoCompleteConfiguration } from '../../../../library/auto-complete/multiple/multiple-auto-complete-configuration';
+import { SingleAutoCompleteConfiguration } from '../../../../library/auto-complete/single/single-auto-complete-configuration';
+import { LanguageResolverService } from '../../../../services/language-resolver/language-resolver.service';
+import { AddResearcherComponent } from '../add-researcher/add-researcher.component';
+import { AvailableProfilesComponent } from '../available-profiles/available-profiles.component';
+
+@Component({
+	selector: 'app-general-tab',
+	templateUrl: './general-tab.component.html',
+	styleUrls: ['./general-tab.component.scss']
+})
+export class GeneralTabComponent extends BaseComponent implements OnInit {
+
+	@Input() formGroup: FormGroup = null;
+
+	filteringOrganisationsAsync = false;
+	filteringResearchersAsync = false;
+	filteredProfilesAsync = false;
+	filteredOrganisations: ExternalSourceItemModel[];
+	filteredResearchers: ExternalSourceItemModel[];
+	filteredProfiles: DatasetProfileModel[];
+
+	profilesAutoCompleteConfiguration: MultipleAutoCompleteConfiguration;
+	organisationsAutoCompleteConfiguration: MultipleAutoCompleteConfiguration;
+	researchersAutoCompleteConfiguration: MultipleAutoCompleteConfiguration;
+	dmpProfileAutoCompleteConfiguration: SingleAutoCompleteConfiguration;
+
+	selectedDmpProfileDefinition: DmpProfileDefinition;
+	constructor(
+		private dmpProfileService: DmpProfileService,
+		private externalSourcesService: ExternalSourcesService,
+		private _service: DmpService,
+		private dialog: MatDialog,
+		public languageResolverService: LanguageResolverService,
+	) {
+		super();
+	}
+
+	ngOnInit() {
+		this.registerFormEventsForDmpProfile();
+
+		this.dmpProfileAutoCompleteConfiguration = {
+			filterFn: this.dmpProfileSearch.bind(this),
+			initialItems: (extraData) => this.dmpProfileSearch(''),
+			displayFn: (item) => item['label'],
+			titleFn: (item) => item['label']
+		};
+
+		this.profilesAutoCompleteConfiguration = {
+			filterFn: this.filterProfiles.bind(this),
+			initialItems: (excludedItems: any[]) => this.filterProfiles('').map(result => result.filter(resultItem => excludedItems.map(x => x.id).indexOf(resultItem.id) === -1)),
+			displayFn: (item) => item['label'],
+			titleFn: (item) => item['label']
+		};
+
+		this.organisationsAutoCompleteConfiguration = {
+			filterFn: this.filterOrganisations.bind(this),
+			initialItems: (excludedItems: any[]) => this.filterOrganisations('').map(result => result.filter(resultItem => excludedItems.map(x => x.id).indexOf(resultItem.id) === -1)),
+			displayFn: (item) => item['name'],
+			titleFn: (item) => item['name']
+		};
+
+		this.researchersAutoCompleteConfiguration = {
+			filterFn: this.filterResearchers.bind(this),
+			initialItems: (excludedItems: any[]) => this.filterResearchers('').map(result => result.filter(resultItem => excludedItems.map(x => x.id).indexOf(resultItem.id) === -1)),
+			displayFn: (item) => item['name'],
+			titleFn: (item) => item['name']
+		};
+	}
+
+	registerFormEventsForDmpProfile(definitionPropertys?: DmpProfileDefinition): void {
+		this.formGroup.get('profile').valueChanges
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(Option => {
+				if (Option instanceof Object) {
+					this.selectedDmpProfileDefinition = null;
+					this.dmpProfileService.getSingle(Option.id)
+						.pipe(takeUntil(this._destroyed))
+						.subscribe(result => {
+							this.selectedDmpProfileDefinition = result.definition;
+						});
+				} else {
+					this.selectedDmpProfileDefinition = null;
+				}
+				this.selectedDmpProfileDefinition = definitionPropertys;
+			})
+	}
+
+	dmpProfileSearch(query: string) {
+		let fields: Array<string> = new Array();
+		var request = new DataTableRequest<DmpProfileCriteria>(0, 10, { fields: fields });
+		request.criteria = new DmpProfileCriteria();
+		return this.dmpProfileService.getPaged(request).map(x => x.data);
+	}
+
+	// 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']);
+	// }
+
+	// onCallbackError(error: any) {
+	// 	this.setErrorModel(error.error);
+
+	// 	//this.validateAllFormFields(this.formGroup);
+	// }
+
+	// public setErrorModel(validationErrorModel: ValidationErrorModel) {
+	// 	Object.keys(validationErrorModel).forEach(item => {
+	// 		(<any>this.dmp.validationErrorModel)[item] = (<any>validationErrorModel)[item];
+	// 	});
+	// }
+
+	filterOrganisations(value: string): Observable<ExternalSourceItemModel[]> {
+
+		this.filteredOrganisations = undefined;
+		this.filteringOrganisationsAsync = true;
+
+		return this.externalSourcesService.searchDMPOrganizations(value);
+	}
+
+	filterResearchers(value: string): Observable<ExternalSourceItemModel[]> {
+
+		this.filteredResearchers = undefined;
+		this.filteringResearchersAsync = true;
+
+		return this.externalSourcesService.searchDMPResearchers({ criteria: { name: value, like: null } });
+	}
+
+	filterProfiles(value: string): Observable<DatasetProfileModel[]> {
+
+		this.filteredProfiles = undefined;
+		this.filteredProfilesAsync = true;
+
+		const request = new RequestItem<DatasetProfileCriteria>();
+		const criteria = new DatasetProfileCriteria();
+		criteria.like = value;
+		request.criteria = criteria;
+		return this._service.searchDMPProfiles(request);
+	}
+
+	addResearcher(rowId: any, rowName: any) {
+		const dialogRef = this.dialog.open(AddResearcherComponent, {
+			data: {
+				dmpId: rowId,
+				dmpName: rowName
+			}
+		});
+
+	}
+
+	availableProfiles() {
+		const dialogRef = this.dialog.open(AvailableProfilesComponent, {
+			data: {
+				profiles: this.formGroup.get('profiles')
+			}
+		});
+
+		return false;
+	}
+}
diff --git a/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.scss b/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.scss
index d22b30a2a..2ebf284ca 100644
--- a/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.scss
+++ b/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.scss
@@ -143,7 +143,8 @@ h4 span {
   margin-left: 2.5em;
   margin-right: 2.5em;
   border-radius: 10em;
-  background-color: rgb(70, 135, 230);
+  background-color: rgba(0, 112, 192, 1);
+  //   background-color: rgb(70, 135, 230);
   color: #fff;
   text-transform: uppercase;
   font-weight: 500;
diff --git a/dmp-frontend/src/assets/i18n/en.json b/dmp-frontend/src/assets/i18n/en.json
index 218152e97..fcdeab60a 100644
--- a/dmp-frontend/src/assets/i18n/en.json
+++ b/dmp-frontend/src/assets/i18n/en.json
@@ -227,7 +227,8 @@
 			"LATEST_VERSION": "Latest Version",
 			"ACTIONS": "Actions",
 			"DATASETS": "Datasets",
-			"STATUS": "Status"
+			"STATUS": "Status",
+			"PEOPLE": "People"
 		},
 		"ACTIONS": {
 			"NEW":"New Data Management Plan",
@@ -243,7 +244,8 @@
 			"ADV-EXP": "Advanced Export",
 			"DOWNLOAD-XML": "Download XML",
 			"DOWNLOAD-DOCX": "Download Document",
-			"DOWNLOAD-PDF": "Download PDF"
+			"DOWNLOAD-PDF": "Download PDF",
+			"SETTINGS": "Settings"
 		}
 	},
 	"DMP-PUBLIC-LISTING": {
@@ -430,21 +432,23 @@
 			"EDIT": "Edit"
 		},
 		"FIELDS": {
-			"NAME": "Name",
-			"PROJECT": "Project",
-			"DESCRIPTION": "Description",
-			"ORGANISATIONS": "Organisations",
+			"NAME": "Dmp Name",
+			"PROJECT": "Related Project",
+			"DESCRIPTION": "Dmp Description",
+			"ORGANISATIONS": "Related Organisations",
 			"RESEARCHERS": "Researchers",
 			"TEMPLATES": "Templates",
-			"PROFILES": "Available Dataset Profiles",
+			"TEMPLATE": "Dmp Template",
+			"DATASET-TEMPLATES": "Related Dataset Templates",
 			"PROFILE": "DMP Profile",
 			"GRANT": "Grant",
-			"FUNDER": "Funder"
+			"FUNDER": "Funder",
+			"STATUS": "Dmp Status"
 		},
 		"ACTIONS": {
 			"GO-TO-PROJECT": "Go To DMP Project",
 			"GO-TO-DATASETS": "Go To Datasets",
-			"SAVE": "Save",
+			"SAVE": "Save Changes",
 			"CANCEL": "Cancel",
 			"DELETE": "Delete",
 			"FINALISE": "Finalize"
diff --git a/dmp-frontend/src/styles.scss b/dmp-frontend/src/styles.scss
index 2680dea9e..b8c9597db 100644
--- a/dmp-frontend/src/styles.scss
+++ b/dmp-frontend/src/styles.scss
@@ -31,7 +31,8 @@ $theme: mat-light-theme($primary, $accent);
 }
 
 .lightblue-btn {
-  background-color: rgb(70, 135, 240) !important;
+  background-color: rgba(0, 112, 192, 1) !important;
+  //   background-color: rgb(70, 135, 240) !important;
 }
 
 .listing-item {
@@ -55,14 +56,15 @@ $theme: mat-light-theme($primary, $accent);
   .chip {
     padding: 0.1em 1em;
     border-radius: 10em;
-    background-color: rgb(70, 135, 230);
+    background-color: rgba(0, 112, 192, 1);
+    // 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;
+    font-weight: 500;
+    max-width: 160px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .bordered-chip {
@@ -70,13 +72,14 @@ $theme: mat-light-theme($primary, $accent);
     border: 0.1em solid rgb(218, 227, 243);
     border-radius: 10em;
     background-color: rgb(236, 241, 249);
-    color: rgb(68, 114, 196);
+    color: rgba(0, 112, 192, 1);
+    // color: rgb(68, 114, 196);
     text-transform: uppercase;
-	font-weight: 500;
-	max-width: 160px;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
+    font-weight: 500;
+    max-width: 160px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .squared-chip {
@@ -84,11 +87,11 @@ $theme: mat-light-theme($primary, $accent);
     border: 0.1em solid rgb(236, 241, 249);
     border-radius: 0.5em;
     background-color: rgb(246, 246, 246);
-	color: rgb(127, 127, 127);
-	max-width: 160px;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
+    color: rgb(127, 127, 127);
+    max-width: 160px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   mat-icon {
@@ -133,17 +136,17 @@ $theme: mat-light-theme($primary, $accent);
   //   }
 
   .draft-bookmark {
-	color: #e7e6e6;
-	display: inline;
-	position: absolute;
-	padding-top: 3px
+    color: #e7e6e6;
+    display: inline;
+    position: absolute;
+    padding-top: 3px;
   }
 
   .finalized-bookmark {
-	color: #92d050;
-	display: inline;
-	position: absolute;
-	padding-top: 3px;
+    color: #92d050;
+    display: inline;
+    position: absolute;
+    padding-top: 3px;
   }
 
   h4 span {