rxjs refactor

dmp-frontend/.editorconfig

@@ -5,6 +5,7 @@ root = true
 charset = utf-8
 indent_style = tab
 indent_size = 4
+max_line_length = off
 insert_final_newline = true
 trim_trailing_whitespace = true
 

dmp-frontend/karma.conf.js

@@ -1,31 +0,0 @@
-// Karma configuration file, see link for more information
-// https://karma-runner.github.io/1.0/config/configuration-file.html
-
-module.exports = function (config) {
-  config.set({
-    basePath: '',
-    frameworks: ['jasmine', '@angular-devkit/build-angular'],
-    plugins: [
-      require('karma-jasmine'),
-      require('karma-chrome-launcher'),
-      require('karma-jasmine-html-reporter'),
-      require('karma-coverage-istanbul-reporter'),
-      require('@angular-devkit/build-angular/plugins/karma')
-    ],
-    client:{
-      clearContext: false // leave Jasmine Spec Runner output visible in browser
-    },
-    coverageIstanbulReporter: {
-      dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
-      fixWebpackSourcePaths: true
-    },
-    
-    reporters: ['progress', 'kjhtml'],
-    port: 9876,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: true,
-    browsers: ['Chrome'],
-    singleRun: false
-  });
-};

dmp-frontend/package.json

@@ -16,20 +16,19 @@
 		"@angular/common": "^6.1.7",
 		"@angular/compiler": "^6.1.7",
 		"@angular/core": "^6.1.7",
-		"@angular/forms": "^6.1.7",
 		"@angular/flex-layout": "6.0.0-beta.18",
+		"@angular/forms": "^6.1.7",
 		"@angular/material-moment-adapter": "^6.4.7",
 		"@angular/platform-browser": "^6.1.7",
+		"@covalent/core": "^2.0.0-beta.5",
 		"@ngx-translate/core": "^10.0.2",
 		"@ngx-translate/http-loader": "^3.0.1",
 		"@swimlane/ngx-datatable": "^13.1.0",
-		"@covalent/core": "^2.0.0-beta.2",
 		"bootstrap": "^4.1.3",
-		"chart.js": "^2.7.2",
 		"core-js": "^2.5.5",
 		"file-saver": "^2.0.0-rc.3",
 		"moment": "^2.22.2",
-		"moment-timezone": "^0.5.14",
+		"moment-timezone": "^0.5.23",
 		"ngx-cookie-service": "^1.0.10",
 		"rxjs": "^6.3.2",
 		"rxjs-compat": "^6.3.2",

dmp-frontend/protractor.conf.js

@@ -1,28 +1,34 @@
 // Protractor configuration file, see link for more information
 // https://github.com/angular/protractor/blob/master/lib/config.ts
 
-const { SpecReporter } = require('jasmine-spec-reporter');
+const {
+	SpecReporter
+} = require('jasmine-spec-reporter');
 
 exports.config = {
-  allScriptsTimeout: 11000,
+	allScriptsTimeout: 11000,
-  specs: [
+	specs: [
-    './e2e/**/*.e2e-spec.ts'
+		'./e2e/**/*.e2e-spec.ts'
-  ],
+	],
-  capabilities: {
+	capabilities: {
-    'browserName': 'chrome'
+		'browserName': 'chrome'
-  },
+	},
-  directConnect: true,
+	directConnect: true,
-  baseUrl: 'http://localhost:4200/',
+	baseUrl: 'http://localhost:4200/',
-  framework: 'jasmine',
+	framework: 'jasmine',
-  jasmineNodeOpts: {
+	jasmineNodeOpts: {
-    showColors: true,
+		showColors: true,
-    defaultTimeoutInterval: 30000,
+		defaultTimeoutInterval: 30000,
-    print: function() {}
+		print: function () {}
-  },
+	},
-  onPrepare() {
+	onPrepare() {
-    require('ts-node').register({
+		require('ts-node').register({
-      project: 'e2e/tsconfig.e2e.json'
+			project: 'e2e/tsconfig.e2e.json'
-    });
+		});
-    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+		jasmine.getEnv().addReporter(new SpecReporter({
-  }
+			spec: {
+				displayStacktrace: true
+			}
+		}));
+	}
 };

dmp-frontend/src/app/core/common/base/base.component.ts

@@ -0,0 +1,14 @@
+import { OnDestroy } from '@angular/core';
+import { Subject } from 'rxjs';
+
+export abstract class BaseComponent implements OnDestroy {
+
+	protected _destroyed: Subject<boolean> = new Subject();
+
+	protected constructor() { }
+
+	ngOnDestroy(): void {
+		this._destroyed.next(true);
+		this._destroyed.complete();
+	}
+}

dmp-frontend/src/app/core/common/base/base.service.ts

@@ -0,0 +1,14 @@
+import { OnDestroy } from '@angular/core';
+import { Subject } from 'rxjs';
+
+export abstract class BaseService implements OnDestroy {
+
+	protected _destroyed: Subject<boolean> = new Subject();
+
+	protected constructor() { }
+
+	ngOnDestroy(): void {
+		this._destroyed.next(true);
+		this._destroyed.complete();
+	}
+}

dmp-frontend/src/app/dataset-profile-form/datasets-admin-listing/dataset-profile-admin-listing.component.ts

@@ -1,19 +1,18 @@
-import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
-import { MatPaginator, MatSort, MatSnackBar } from '@angular/material';
-import { Router, Params, ActivatedRoute } from '@angular/router';
-import { TranslateService } from '@ngx-translate/core';
 import { DataSource } from '@angular/cdk/table';
-
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { MatPaginator, MatSnackBar, MatSort, PageEvent } from '@angular/material';
+import { ActivatedRoute, Params, Router } from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
 import { Observable } from 'rxjs';
-import { PageEvent } from '@angular/material';
+import { takeUntil } from 'rxjs/operators';
-import { DatasetProfileAdmin } from '../../services/datasetProfileAdmin/datasetProfileAfmin.service';
+import { BaseComponent } from '../../core/common/base/base.component';
-import { DataManagementPlanService } from '../../services/data-management-plan/data-management-plan.service';
-import { DatasetProfileCriteriaComponent } from '../../shared/components/criteria/dataset-profile/dataset-profile.component';
-import { DataManagementPlanModel } from '../../models/data-managemnt-plans/DataManagementPlanModel';
-import { DatasetListingModel } from '../../models/datasets/DatasetListingModel';
-import { DataTableRequest } from '../../models/data-table/DataTableRequest';
 import { DatasetProfileCriteria } from '../../models/criteria/dataset-profile/DatasetProfileCriteria';
-
+import { DataManagementPlanModel } from '../../models/data-managemnt-plans/DataManagementPlanModel';
+import { DataTableRequest } from '../../models/data-table/DataTableRequest';
+import { DatasetListingModel } from '../../models/datasets/DatasetListingModel';
+import { DataManagementPlanService } from '../../services/data-management-plan/data-management-plan.service';
+import { DatasetProfileAdmin } from '../../services/datasetProfileAdmin/datasetProfileAfmin.service';
+import { DatasetProfileCriteriaComponent } from '../../shared/components/criteria/dataset-profile/dataset-profile.component';
 
 @Component({
 	selector: 'app-dataset-profile-admin-listing-component',
@@ -21,7 +20,7 @@ import { DatasetProfileCriteria } from '../../models/criteria/dataset-profile/Da
 	styleUrls: ['./dataset-profile-admin-listing.component.scss'],
 	providers: [DatasetProfileAdmin, DataManagementPlanService]
 })
-export class DatasetProfileAdminListingComponent implements OnInit {
+export class DatasetProfileAdminListingComponent extends BaseComponent implements OnInit {
 
 	@ViewChild(MatPaginator) _paginator: MatPaginator;
 	@ViewChild(MatSort) sort: MatSort;
@@ -47,22 +46,25 @@ export class DatasetProfileAdminListingComponent implements OnInit {
 		public route: ActivatedRoute,
 		public dataManagementPlanService: DataManagementPlanService
 	) {
-
+		super();
 	}
 
 
 	ngOnInit() {
-		this.route.params.subscribe((params: Params) => {
+		this.route.params
-			this.dmpId = params['dmpId'];
+			.pipe(takeUntil(this._destroyed))
-			if (this.dmpId != null) { this.setDmpTitle(this.dmpId); }
+			.subscribe((params: Params) => {
-			this.criteria.setCriteria(this.getDefaultCriteria(this.dmpId));
+				this.dmpId = params['dmpId'];
-			this.refresh();
+				if (this.dmpId != null) { this.setDmpTitle(this.dmpId); }
-			this.criteria.setRefreshCallback(() => this.refresh());
+				this.criteria.setCriteria(this.getDefaultCriteria(this.dmpId));
-		});
+				this.refresh();
+				this.criteria.setRefreshCallback(() => this.refresh());
+			});
 	}
 
 	setDmpTitle(dmpId: String) {
 		this.dataManagementPlanService.getSingle(dmpId).map(data => data as DataManagementPlanModel)
+			.pipe(takeUntil(this._destroyed))
 			.subscribe(data => {
 				this.titlePrefix = data.label;
 			});
@@ -88,7 +90,7 @@ export class DatasetProfileAdminListingComponent implements OnInit {
 
 	// makeItPublic(id: String) {
 	//   debugger;
-	//   this.datasetService.makeDatasetPublic(id).subscribe();
+	//   this.datasetService.makeDatasetPublic(id).pipe(takeUntil(this._destroyed)).subscribe();
 	// }
 
 }

dmp-frontend/src/app/dataset-profile-form/form/form.component.html

@@ -1,7 +1,7 @@
 <div class="container" *ngIf="form" [formGroup]='form'>
 	<mat-form-field class="full-width">
 		<input matInput formControlName="label" placeholder="{{'DYNAMIC-FORM.FIELDS.LABEL' | translate}}" required>
-		<mat-error *ngIf="form.get('label').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+		<mat-error *ngIf="form.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 	</mat-form-field>
 
 	<mat-horizontal-stepper [linear]="true" #stepper>

dmp-frontend/src/app/dataset-profile-form/form/form.component.ts

@@ -1,18 +1,17 @@
-import { JsonSerializer } from '../../utilities/JsonSerializer';
+import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
-import { DatasetProfileService } from '../../services/dataset-profile.service';
+import { FormArray, FormControl, FormGroup } from '@angular/forms';
+import { MatDialog, MatHorizontalStepper } from '@angular/material';
+import { ActivatedRoute, Router } from '@angular/router';
+import { takeUntil } from 'rxjs/operators';
+import { BaseComponent } from '../../core/common/base/base.component';
 import { DatasetProfileModelAdmin } from '../../models/datasetProfileAdmin/DatasetProfileModelAdmin';
 import { Page } from '../../models/datasetProfileAdmin/Page';
-import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
-import { FormGroup, FormControl } from '@angular/forms';
-import { FormArray } from '@angular/forms';
-import { Router, ActivatedRoute } from '@angular/router';
-import { DatasetProfileAdmin } from '../../services/datasetProfileAdmin/datasetProfileAfmin.service';
 import { Section } from '../../models/datasetProfileAdmin/Section';
-import { MatDialog, MatHorizontalStepper, MatStepper } from '@angular/material';
-import { DatasetProfilePreviewerComponent } from '../previewer/dataset-profile-previewer.component';
-import { Observable } from 'rxjs';
-import { DatasetWizardModel } from '../../models/datasets/DatasetWizardModel';
 import { DatasetProfileDefinitionModel } from '../../models/DatasetProfileDefinitionModel';
+import { DatasetWizardModel } from '../../models/datasets/DatasetWizardModel';
+import { DatasetProfileService } from '../../services/dataset-profile.service';
+import { DatasetProfileAdmin } from '../../services/datasetProfileAdmin/datasetProfileAfmin.service';
+import { JsonSerializer } from '../../utilities/JsonSerializer';
 
 @Component({
 	selector: 'app-form-component',
@@ -21,7 +20,7 @@ import { DatasetProfileDefinitionModel } from '../../models/DatasetProfileDefini
 	styleUrls: ['./form.component.scss']
 })
 
-export class FormComponent implements OnInit, AfterViewInit {
+export class FormComponent extends BaseComponent implements OnInit, AfterViewInit {
 
 
 	dataModel: DatasetProfileModelAdmin;
@@ -39,6 +38,7 @@ export class FormComponent implements OnInit, AfterViewInit {
 		private router: Router,
 		public dialog: MatDialog,
 	) {
+		super();
 		this.profileID = route.snapshot.params['id'];
 		this.cloneId = route.snapshot.params['cloneid'];
 	}
@@ -51,33 +51,45 @@ export class FormComponent implements OnInit, AfterViewInit {
 
 		this.dataModel = JsonSerializer.fromJSONObject(new DatasetProfileModelAdmin(), DatasetProfileModelAdmin);
 		if (this.profileID) {
-			this.datasetProfileService.getDatasetProfileById(this.profileID).subscribe((data) => {
+			this.datasetProfileService.getDatasetProfileById(this.profileID)
-				this.dataModel = JsonSerializer.fromJSONObject(data, DatasetProfileModelAdmin);
+				.pipe(takeUntil(this._destroyed))
-				this.form = this.dataModel.buildForm();
+				.subscribe((data) => {
-				this.form.valueChanges.subscribe(change => {
+					this.dataModel = JsonSerializer.fromJSONObject(data, DatasetProfileModelAdmin);
-					this.datasetProfileAdminService.preview(this.dataModel).subscribe(dataset => {
+					this.form = this.dataModel.buildForm();
-						const datasetModel = new DatasetWizardModel();
+					this.form.valueChanges
-						datasetModel.datasetProfileDefinition = JsonSerializer.fromJSONObject(dataset, DatasetProfileDefinitionModel);
+						.pipe(takeUntil(this._destroyed))
-						this.dataWizardModel = datasetModel;
+						.subscribe(change => {
-						this.previewerFormGroup = <FormGroup>this.dataWizardModel.buildForm().get('datasetProfileDefinition');
+							this.datasetProfileAdminService.preview(this.dataModel)
-					});
+								.pipe(takeUntil(this._destroyed))
+								.subscribe(dataset => {
+									const datasetModel = new DatasetWizardModel();
+									datasetModel.datasetProfileDefinition = JsonSerializer.fromJSONObject(dataset, DatasetProfileDefinitionModel);
+									this.dataWizardModel = datasetModel;
+									this.previewerFormGroup = <FormGroup>this.dataWizardModel.buildForm().get('datasetProfileDefinition');
+								});
+						});
+					this.form.updateValueAndValidity();
 				});
-				this.form.updateValueAndValidity();
-			});
 		} else if (this.cloneId) {
-			this.datasetprofileAdmin.clone(this.cloneId).subscribe((data) => {
+			this.datasetprofileAdmin.clone(this.cloneId)
-				this.dataModel = JsonSerializer.fromJSONObject(data, DatasetProfileModelAdmin);
+				.pipe(takeUntil(this._destroyed))
-				this.form = this.dataModel.buildForm();
+				.subscribe((data) => {
-				this.form.valueChanges.subscribe(change => {
+					this.dataModel = JsonSerializer.fromJSONObject(data, DatasetProfileModelAdmin);
-					this.datasetProfileAdminService.preview(this.dataModel).subscribe(dataset => {
+					this.form = this.dataModel.buildForm();
-						const datasetModel = new DatasetWizardModel();
+					this.form.valueChanges
-						datasetModel.datasetProfileDefinition = JsonSerializer.fromJSONObject(dataset, DatasetProfileDefinitionModel);
+						.pipe(takeUntil(this._destroyed))
-						this.dataWizardModel = datasetModel;
+						.subscribe(change => {
-						this.previewerFormGroup = <FormGroup>this.dataWizardModel.buildForm().get('datasetProfileDefinition');
+							this.datasetProfileAdminService.preview(this.dataModel)
-					});
+								.pipe(takeUntil(this._destroyed))
+								.subscribe(dataset => {
+									const datasetModel = new DatasetWizardModel();
+									datasetModel.datasetProfileDefinition = JsonSerializer.fromJSONObject(dataset, DatasetProfileDefinitionModel);
+									this.dataWizardModel = datasetModel;
+									this.previewerFormGroup = <FormGroup>this.dataWizardModel.buildForm().get('datasetProfileDefinition');
+								});
+						});
+					this.form.updateValueAndValidity();
 				});
-				this.form.updateValueAndValidity();
-			});
 		} else {
 			this.addSection();
 			this.addPage();
@@ -124,13 +136,17 @@ export class FormComponent implements OnInit, AfterViewInit {
 		const data = this.form.value;
 
 		if (this.profileID) {
-			this.updateForm(this.profileID, data).subscribe(() => {
+			this.updateForm(this.profileID, data)
-				this.router.navigate(['/dataset-profile']);
+				.pipe(takeUntil(this._destroyed))
-			});
+				.subscribe(() => {
+					this.router.navigate(['/dataset-profile']);
+				});
 		} else {
-			this.createForm(data).subscribe(() => {
+			this.createForm(data)
-				this.router.navigate(['/dataset-profile']);
+				.pipe(takeUntil(this._destroyed))
-			});
+				.subscribe(() => {
+					this.router.navigate(['/dataset-profile']);
+				});
 		}
 	}
 

dmp-frontend/src/app/dataset-profile-form/previewer/dataset-profile-previewer.component.ts

@@ -1,12 +1,12 @@
-import { ViewEncapsulation, Component, Inject, OnInit } from '@angular/core';
+import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
 import { FormGroup } from '@angular/forms';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { takeUntil } from 'rxjs/operators';
+import { BaseComponent } from '../../core/common/base/base.component';
 import { DatasetProfileDefinitionModel } from '../../models/DatasetProfileDefinitionModel';
-import { JsonSerializer } from '../../utilities/JsonSerializer';
-import { DatasetModel } from '../../models/datasets/DatasetModel';
 import { DatasetWizardModel } from '../../models/datasets/DatasetWizardModel';
-import { DatasetProfileService } from '../../services/dataset-profile.service';
 import { DatasetProfileAdmin } from '../../services/datasetProfileAdmin/datasetProfileAfmin.service';
+import { JsonSerializer } from '../../utilities/JsonSerializer';
 
 @Component({
 	selector: 'app-dataset-profile-previewer',
@@ -15,22 +15,24 @@ import { DatasetProfileAdmin } from '../../services/datasetProfileAdmin/datasetP
 	encapsulation: ViewEncapsulation.None
 })
 
-export class DatasetProfilePreviewerComponent implements OnInit {
+export class DatasetProfilePreviewerComponent extends BaseComponent implements OnInit {
 	formGroup: FormGroup;
 	datasetWizardModel: DatasetWizardModel;
 	constructor(
 		private datasetProfileAdminService: DatasetProfileAdmin,
 		public dialogRef: MatDialogRef<DatasetProfilePreviewerComponent>,
 		@Inject(MAT_DIALOG_DATA) public data: any
-	) { }
+	) { super(); }
 
 	ngOnInit(): void {
 
-		this.datasetProfileAdminService.preview(this.data['model']).subscribe(x => {
+		this.datasetProfileAdminService.preview(this.data['model'])
-			this.datasetWizardModel = new DatasetWizardModel();
+			.pipe(takeUntil(this._destroyed))
-			this.datasetWizardModel.datasetProfileDefinition = JsonSerializer.fromJSONObject(x, DatasetProfileDefinitionModel);
+			.subscribe(x => {
-			this.formGroup = <FormGroup>this.datasetWizardModel.buildForm().get('datasetProfileDefinition');
+				this.datasetWizardModel = new DatasetWizardModel();
-		});
+				this.datasetWizardModel.datasetProfileDefinition = JsonSerializer.fromJSONObject(x, DatasetProfileDefinitionModel);
+				this.formGroup = <FormGroup>this.datasetWizardModel.buildForm().get('datasetProfileDefinition');
+			});
 
 	}
 }

dmp-frontend/src/app/dataset-profile-form/section-form/section-form.component.ts

@@ -1,11 +1,11 @@
-import { Component, OnInit, Input, ViewEncapsulation } from '@angular/core';
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
-import { FormGroup } from '@angular/forms';
+import { FormArray, FormGroup } from '@angular/forms';
-import { Section } from '../../models/datasetProfileAdmin/Section';
+import { takeUntil } from 'rxjs/operators';
-import { FormArray } from '@angular/forms';
+import { BaseComponent } from '../../core/common/base/base.component';
-import { DatasetProfileModel } from '../../models/datasetprofile/DatasetProfileModel';
-import { FieldSet } from '../../models/datasetProfileAdmin/FieldSet';
 import { Field } from '../../models/datasetProfileAdmin/Field';
+import { FieldSet } from '../../models/datasetProfileAdmin/FieldSet';
 import { Page } from '../../models/datasetProfileAdmin/Page';
+import { Section } from '../../models/datasetProfileAdmin/Section';
 import { JsonSerializer } from '../../utilities/JsonSerializer';
 
 @Component({
@@ -15,17 +15,19 @@ import { JsonSerializer } from '../../utilities/JsonSerializer';
 	encapsulation: ViewEncapsulation.None
 })
 
-export class SectionFormComponent implements OnInit {
+export class SectionFormComponent extends BaseComponent implements OnInit {
 	@Input() form: FormGroup;
 	@Input() dataModel: Section;
 	@Input() indexPath: string;
 
-	constructor() { }
+	constructor() { super(); }
 
 	ngOnInit() {
-		this.form.root.get('pages').valueChanges.subscribe(x =>
+		this.form.root.get('pages').valueChanges
-			this.keepPageSelectionValid(x)
+			.pipe(takeUntil(this._destroyed))
-		);
+			.subscribe(x =>
+				this.keepPageSelectionValid(x)
+			);
 	}
 
 	addField() {

dmp-frontend/src/app/datasets/dataset-public/dataset-public-listing.component.ts

@@ -1,18 +1,17 @@
-import { OnInit, Component, ViewChild } from '@angular/core';
-import { MatSort, MatPaginator, PageEvent, MatSnackBar } from '@angular/material';
-import { DatasetCriteriaComponent } from '../../shared/components/criteria/datasets/datasets-criteria.component';
-import { Observable } from 'rxjs';
-import { BreadcrumbItem } from '../../shared/components/breadcrumb/definition/breadcrumb-item';
-import { DatasetService } from '../../services/dataset/dataset.service';
-import { Router, ActivatedRoute, Params } from '@angular/router';
-import { TranslateService } from '@ngx-translate/core';
-import { DataManagementPlanService } from '../../services/data-management-plan/data-management-plan.service';
-import { DatasetCriteria } from '../../models/criteria/dataset/DatasetCriteria';
 import { DataSource } from '@angular/cdk/table';
-import { DatasetListingModel } from '../../models/datasets/DatasetListingModel';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { MatPaginator, MatSnackBar, MatSort, PageEvent } from '@angular/material';
+import { ActivatedRoute, Params, Router } from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
+import { Observable } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { BaseComponent } from '../../core/common/base/base.component';
+import { DatasetCriteria } from '../../models/criteria/dataset/DatasetCriteria';
 import { DataTableRequest } from '../../models/data-table/DataTableRequest';
+import { DatasetListingModel } from '../../models/datasets/DatasetListingModel';
 import { FacetSearchCriteriaModel } from '../../models/facet-search/FacetSearchCriteriaModel';
-import { IBreadCrumbComponent } from '../../shared/components/breadcrumb/definition/IBreadCrumbComponent';
+import { DataManagementPlanService } from '../../services/data-management-plan/data-management-plan.service';
+import { DatasetService } from '../../services/dataset/dataset.service';
 
 
 @Component({
@@ -20,7 +19,7 @@ import { IBreadCrumbComponent } from '../../shared/components/breadcrumb/definit
 	templateUrl: 'dataset-public-listing.component.html',
 	styleUrls: ['./dataset-public-listing.component.scss'],
 })
-export class DatasetPublicListingComponent implements OnInit {
+export class DatasetPublicListingComponent extends BaseComponent implements OnInit {
 
 	@ViewChild(MatPaginator) _paginator: MatPaginator;
 	@ViewChild(MatSort) sort: MatSort;
@@ -40,21 +39,23 @@ export class DatasetPublicListingComponent implements OnInit {
 		public route: ActivatedRoute,
 		public dataManagementPlanService: DataManagementPlanService
 	) {
-
+		super();
 	}
 
 	ngOnInit() {
 
-		this.route.params.subscribe(async (params: Params) => {
+		this.route.params
-			this.dmpId = params['dmpId'];
+			.pipe(takeUntil(this._destroyed))
-			this.refresh();
+			.subscribe(async (params: Params) => {
-			if (this.dmpId != null) {
+				this.dmpId = params['dmpId'];
-				const dmp = await this.dataManagementPlanService.getSingle(this.dmpId).toPromise();
+				this.refresh();
-				if (params['dmpLabel'] !== undefined) {
+				if (this.dmpId != null) {
-					this.titlePrefix = 'for ' + params['dmpLabel'];
+					const dmp = await this.dataManagementPlanService.getSingle(this.dmpId).toPromise();
+					if (params['dmpLabel'] !== undefined) {
+						this.titlePrefix = 'for ' + params['dmpLabel'];
+					}
 				}
-			}
+			});
-		});
 	}
 
 	onCriteriaChange(event: FacetSearchCriteriaModel) {
@@ -80,9 +81,10 @@ export class DatasetPublicListingComponent implements OnInit {
 	}
 
 	makeItPublic(id: String) {
-		this.datasetService.makeDatasetPublic(id).subscribe();
+		this.datasetService.makeDatasetPublic(id)
+			.pipe(takeUntil(this._destroyed))
+			.subscribe();
 	}
-
 }
 
 export class DatasetDataSource extends DataSource<DatasetListingModel> {

dmp-frontend/src/app/datasets/dataset-referenced-models-helper/datarepository/datarepository-referenced-model-helper.component.html

@@ -3,15 +3,15 @@
   <div mat-dialog-content>
     <mat-form-field class="full-width">
       <input matInput formControlName="label" placeholder="{{'DATASET-REFERENCED-MODELS.DATA-REPOSITORY.LABEL' | translate}}" required>
-      <mat-error *ngIf="formGroup.get('label').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+      <mat-error *ngIf="formGroup.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
     </mat-form-field>
     <mat-form-field class="full-width">
       <input matInput formControlName="abbreviation" placeholder="{{'DATASET-REFERENCED-MODELS.DATA-REPOSITORY.ABBREVIATION' | translate}}" required>
-      <mat-error *ngIf="formGroup.get('abbreviation').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+      <mat-error *ngIf="formGroup.get('abbreviation').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
     </mat-form-field>
     <mat-form-field class="full-width">
       <input matInput formControlName="uri" placeholder="{{'DATASET-REFERENCED-MODELS.DATA-REPOSITORY.URI' | translate}}" required>
-      <mat-error *ngIf="formGroup.get('uri').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+      <mat-error *ngIf="formGroup.get('uri').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
     </mat-form-field>
   </div>
   <div mat-dialog-actions>

dmp-frontend/src/app/datasets/dataset-referenced-models-helper/datarepository/datarepository-referenced-model-helper.component.ts

@@ -1,9 +1,11 @@
-import { Component, ViewEncapsulation, OnInit, Inject } from '@angular/core';
+import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core';
 import { FormGroup } from '@angular/forms';
-import { DataRepositoryService } from '../../../services/datarepository/datarepository.service';
-import { Router, ActivatedRoute } from '@angular/router';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { ActivatedRoute, Router } from '@angular/router';
+import { takeUntil } from 'rxjs/operators';
+import { BaseComponent } from '../../../core/common/base/base.component';
 import { DataRepositoryModel } from '../../../models/dataRepositories/DataRepositoryModel';
+import { DataRepositoryService } from '../../../services/datarepository/datarepository.service';
 
 @Component({
 	selector: 'app-datarepository-referenced-model-helper',
@@ -11,7 +13,7 @@ import { DataRepositoryModel } from '../../../models/dataRepositories/DataReposi
 	styleUrls: ['./datarepository-referenced-model-helper.component.scss'],
 	encapsulation: ViewEncapsulation.None
 })
-export class DataRepositoryReferencedModelHelperComponent implements OnInit {
+export class DataRepositoryReferencedModelHelperComponent extends BaseComponent implements OnInit {
 	public formGroup: FormGroup;
 
 	constructor(
@@ -20,7 +22,7 @@ export class DataRepositoryReferencedModelHelperComponent implements OnInit {
 		public router: Router,
 		public dialogRef: MatDialogRef<DataRepositoryReferencedModelHelperComponent>,
 		@Inject(MAT_DIALOG_DATA) public data: any
-	) { }
+	) { super(); }
 
 	ngOnInit(): void {
 		const datarepo = new DataRepositoryModel();
@@ -29,8 +31,10 @@ export class DataRepositoryReferencedModelHelperComponent implements OnInit {
 
 
 	send(value: any) {
-		this.dataRepositoryService.create(this.formGroup.value).subscribe(
+		this.dataRepositoryService.create(this.formGroup.value)
-			(item) => this.dialogRef.close(item)
+			.pipe(takeUntil(this._destroyed))
-		);
+			.subscribe(
+				(item) => this.dialogRef.close(item)
+			);
 	}
 }

dmp-frontend/src/app/datasets/dataset-referenced-models-helper/externalDataset/externaldataset-referenced-model-helper.component.html

@@ -3,11 +3,11 @@
   <div mat-dialog-content>
     <mat-form-field class="full-width">
       <input matInput formControlName="label" placeholder="{{'DATASET-REFERENCED-MODELS.EXTERNAL-DATASET.LABEL' | translate}}" required>
-      <mat-error *ngIf="formGroup.get('label').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+      <mat-error *ngIf="formGroup.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
     </mat-form-field>
     <mat-form-field class="full-width">
       <input matInput formControlName="abbreviation" placeholder="{{'DATASET-REFERENCED-MODELS.EXTERNAL-DATASET.ABBREVIATION' | translate}}" required>
-      <mat-error *ngIf="formGroup.get('abbreviation').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+      <mat-error *ngIf="formGroup.get('abbreviation').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
     </mat-form-field>
 
   </div>

dmp-frontend/src/app/datasets/dataset-referenced-models-helper/externalDataset/externaldataset-referenced-model-helper.component.ts

@@ -1,9 +1,11 @@
-import { ExternalDatasetModel } from '../../../models/external-dataset/ExternalDatasetModel';
+import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
-import { Inject, ViewEncapsulation, Component, OnInit } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { ExternalDatasetService } from '../../../services/external-dataset/external-dataset.service';
 import { FormGroup } from '@angular/forms';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { ActivatedRoute, Router } from '@angular/router';
+import { takeUntil } from 'rxjs/operators';
+import { BaseComponent } from '../../../core/common/base/base.component';
+import { ExternalDatasetModel } from '../../../models/external-dataset/ExternalDatasetModel';
+import { ExternalDatasetService } from '../../../services/external-dataset/external-dataset.service';
 
 @Component({
 	selector: 'app-externaldataset-referenced-model-helper',
@@ -11,7 +13,7 @@ import { FormGroup } from '@angular/forms';
 	styleUrls: ['./externaldataset-referenced-model-helper.component.scss'],
 	encapsulation: ViewEncapsulation.None
 })
-export class ExternalDatasetReferencedModelHelperComponent implements OnInit {
+export class ExternalDatasetReferencedModelHelperComponent extends BaseComponent implements OnInit {
 	public formGroup: FormGroup;
 
 	constructor(
@@ -20,7 +22,7 @@ export class ExternalDatasetReferencedModelHelperComponent implements OnInit {
 		public router: Router,
 		public dialogRef: MatDialogRef<ExternalDatasetReferencedModelHelperComponent>,
 		@Inject(MAT_DIALOG_DATA) public data: any
-	) { }
+	) { super(); }
 
 	ngOnInit(): void {
 		const externalDatasetModel = new ExternalDatasetModel();
@@ -29,8 +31,10 @@ export class ExternalDatasetReferencedModelHelperComponent implements OnInit {
 
 
 	send(value: any) {
-		this.externalDatasetService.create(this.formGroup.value).subscribe(
+		this.externalDatasetService.create(this.formGroup.value)
-			(item) => this.dialogRef.close(item)
+			.pipe(takeUntil(this._destroyed))
-		);
+			.subscribe(
+				(item) => this.dialogRef.close(item)
+			);
 	}
 }

dmp-frontend/src/app/datasets/dataset-referenced-models-helper/registry/registry-referenced-model-helper.component.html

@@ -3,15 +3,15 @@
   <div mat-dialog-content>
     <mat-form-field class="full-width">
       <input matInput formControlName="label" placeholder="{{'DATASET-REFERENCED-MODELS.REGISTRY.LABEL' | translate}}" required>
-      <mat-error *ngIf="formGroup.get('label').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+      <mat-error *ngIf="formGroup.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
     </mat-form-field>
     <mat-form-field class="full-width">
       <input matInput formControlName="abbreviation" placeholder="{{'DATASET-REFERENCED-MODELS.REGISTRY.ABBREVIATION' | translate}}" required>
-      <mat-error *ngIf="formGroup.get('abbreviation').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+      <mat-error *ngIf="formGroup.get('abbreviation').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
     </mat-form-field>
     <mat-form-field class="full-width">
       <input matInput formControlName="uri" placeholder="{{'DATASET-REFERENCED-MODELS.REGISTRY.URI' | translate}}" required>
-      <mat-error *ngIf="formGroup.get('uri').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+      <mat-error *ngIf="formGroup.get('uri').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
     </mat-form-field>
   </div>
   <div mat-dialog-actions>

dmp-frontend/src/app/datasets/dataset-referenced-models-helper/registry/registry-referenced-model-helper.component.ts

@@ -1,7 +1,9 @@
-import { Component, ViewEncapsulation, OnInit, Inject } from '@angular/core';
+import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core';
 import { FormGroup } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { ActivatedRoute, Router } from '@angular/router';
+import { takeUntil } from 'rxjs/operators';
+import { BaseComponent } from '../../../core/common/base/base.component';
 import { RegisterModel } from '../../../models/registers/RegisterModel';
 import { RegistryService } from '../../../services/registries/registry.service';
 
@@ -11,7 +13,7 @@ import { RegistryService } from '../../../services/registries/registry.service';
 	styleUrls: ['./registry-referenced-model-helper.component.scss'],
 	encapsulation: ViewEncapsulation.None
 })
-export class RegistryReferencedModelHelperComponent implements OnInit {
+export class RegistryReferencedModelHelperComponent extends BaseComponent implements OnInit {
 	public formGroup: FormGroup;
 
 	constructor(
@@ -20,7 +22,7 @@ export class RegistryReferencedModelHelperComponent implements OnInit {
 		public router: Router,
 		public dialogRef: MatDialogRef<RegistryReferencedModelHelperComponent>,
 		@Inject(MAT_DIALOG_DATA) public data: any
-	) { }
+	) { super(); }
 
 	ngOnInit(): void {
 		const registryModel = new RegisterModel();
@@ -29,8 +31,10 @@ export class RegistryReferencedModelHelperComponent implements OnInit {
 
 
 	send(value: any) {
-		this.registryService.create(this.formGroup.value).subscribe(
+		this.registryService.create(this.formGroup.value)
-			(item) => this.dialogRef.close(item)
+			.pipe(takeUntil(this._destroyed))
-		);
+			.subscribe(
+				(item) => this.dialogRef.close(item)
+			);
 	}
 }

dmp-frontend/src/app/datasets/dataset-referenced-models-helper/services/services-referenced-model-helper.component.html

@@ -3,15 +3,15 @@
   <div mat-dialog-content>
     <mat-form-field class="full-width">
       <input matInput formControlName="label" placeholder="{{'DATASET-REFERENCED-MODELS.SERVICES.LABEL' | translate}}" required>
-      <mat-error *ngIf="formGroup.get('label').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+      <mat-error *ngIf="formGroup.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
     </mat-form-field>
     <mat-form-field class="full-width">
       <input matInput formControlName="abbreviation" placeholder="{{'DATASET-REFERENCED-MODELS.SERVICES.ABBREVIATION' | translate}}" required>
-      <mat-error *ngIf="formGroup.get('abbreviation').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+      <mat-error *ngIf="formGroup.get('abbreviation').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
     </mat-form-field>
     <mat-form-field class="full-width">
       <input matInput formControlName="uri" placeholder="{{'DATASET-REFERENCED-MODELS.SERVICES.URI' | translate}}" required>
-      <mat-error *ngIf="formGroup.get('uri').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+      <mat-error *ngIf="formGroup.get('uri').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
     </mat-form-field>
 
   </div>

dmp-frontend/src/app/datasets/dataset-referenced-models-helper/services/services-referenced-model-helper.component.ts

@@ -1,7 +1,9 @@
-import { ViewEncapsulation, Component, OnInit, Inject } from '@angular/core';
+import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core';
 import { FormGroup } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { ActivatedRoute, Router } from '@angular/router';
+import { takeUntil } from 'rxjs/operators';
+import { BaseComponent } from '../../../core/common/base/base.component';
 import { ServiceModel } from '../../../models/services/ServiceModel';
 import { ServicesDataService } from '../../../services/services/services-data.service';
 
@@ -11,7 +13,7 @@ import { ServicesDataService } from '../../../services/services/services-data.se
 	styleUrls: ['./services-referenced-model-helper.component.scss'],
 	encapsulation: ViewEncapsulation.None
 })
-export class ServicesReferencedModelHelperComponent implements OnInit {
+export class ServicesReferencedModelHelperComponent extends BaseComponent implements OnInit {
 	public formGroup: FormGroup;
 
 	constructor(
@@ -20,7 +22,7 @@ export class ServicesReferencedModelHelperComponent implements OnInit {
 		public router: Router,
 		public dialogRef: MatDialogRef<ServicesReferencedModelHelperComponent>,
 		@Inject(MAT_DIALOG_DATA) public data: any
-	) { }
+	) { super(); }
 
 	ngOnInit(): void {
 		const serviceModel = new ServiceModel();
@@ -29,8 +31,10 @@ export class ServicesReferencedModelHelperComponent implements OnInit {
 
 
 	send() {
-		this.registryService.create(this.formGroup.value).subscribe(
+		this.registryService.create(this.formGroup.value)
-			(item) => this.dialogRef.close(item)
+			.pipe(takeUntil(this._destroyed))
-		);
+			.subscribe(
+				(item) => this.dialogRef.close(item)
+			);
 	}
 }

dmp-frontend/src/app/datasets/dataset-wizard/dataset-wizard.component.ts

@@ -1,46 +1,47 @@
-import { BaseErrorModel } from '../../models/error/BaseErrorModel';
+import { AfterViewInit, Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
-import { SnackBarNotificationComponent } from '../../shared/components/notificaiton/snack-bar-notification.component';
+import { FormArray, FormBuilder, FormGroup } from '@angular/forms';
-import { DatasetProfileCriteria } from '../../models/criteria/dataset-profile/DatasetProfileCriteria';
+import { MatDialog, MatSnackBar, MatStepper } from '@angular/material';
-import { DataManagementPlanModel } from '../../models/data-managemnt-plans/DataManagementPlanModel';
+import { ActivatedRoute, Params, Router } from '@angular/router';
-import { JsonSerializer } from '../../utilities/JsonSerializer';
+import { TranslateService } from '@ngx-translate/core';
+import * as FileSaver from 'file-saver';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { BaseComponent } from '../../core/common/base/base.component';
 import { DataManagementPlanCriteria } from '../../models/criteria/data-management-plan/DataManagementPlanCriteria';
+import { DataRepositoryCriteria } from '../../models/criteria/data-repository/DataRepositoryCriteria';
+import { DatasetProfileCriteria } from '../../models/criteria/dataset-profile/DatasetProfileCriteria';
+import { ExternalDatasetCriteria } from '../../models/criteria/external-dataset/ExternalDatasetCriteria';
+import { RegistryCriteria } from '../../models/criteria/registry/RegistryCriteria';
 import { RequestItem } from '../../models/criteria/RequestItem';
-import { DatasetService } from '../../services/dataset/dataset.service';
+import { ServicesCriteria } from '../../models/criteria/services/ServicesCriteria';
+import { TagsCriteria } from '../../models/criteria/tags/TagsCriteria';
+import { DataManagementPlanListingModel } from '../../models/data-managemnt-plans/DataManagementPlanListingModel';
+import { DataManagementPlanModel } from '../../models/data-managemnt-plans/DataManagementPlanModel';
+import { DataRepositoryModel } from '../../models/dataRepositories/DataRepositoryModel';
 import { DatasetProfileModel } from '../../models/datasetprofile/DatasetProfileModel';
 import { DatasetProfileDefinitionModel } from '../../models/DatasetProfileDefinitionModel';
-import { DatasetWizardModel, DatasetStatus } from '../../models/datasets/DatasetWizardModel';
+import { DatasetStatus, DatasetWizardModel } from '../../models/datasets/DatasetWizardModel';
-import { DataManagementPlanService } from '../../services/data-management-plan/data-management-plan.service';
+import { BaseErrorModel } from '../../models/error/BaseErrorModel';
-import { ExternalSourcesService } from '../../services/external-sources/external-sources.service';
-import { DatasetWizardService } from '../../services/dataset-wizard/dataset-wizard.service';
-import { TranslateService } from '@ngx-translate/core';
-import { ActivatedRoute, Router, Params } from '@angular/router';
-import { Component, ViewChild, OnInit, AfterViewInit, ViewEncapsulation, TemplateRef, ChangeDetectionStrategy } from '@angular/core';
-import { FormGroup, FormBuilder, FormArray } from '@angular/forms';
-import * as FileSaver from 'file-saver';
-import { MatSnackBar, MatStepper, MatDialog } from '@angular/material';
-import { ExternalDatasetCriteria } from '../../models/criteria/external-dataset/ExternalDatasetCriteria';
 import { ExternalDatasetModel } from '../../models/external-dataset/ExternalDatasetModel';
-import { RegistryCriteria } from '../../models/criteria/registry/RegistryCriteria';
-import { RegisterModel } from '../../models/registers/RegisterModel';
-import { DataRepositoryCriteria } from '../../models/criteria/data-repository/DataRepositoryCriteria';
-import { ServicesCriteria } from '../../models/criteria/services/ServicesCriteria';
-import { ServiceModel } from '../../models/services/ServiceModel';
-import { DataRepositoryModel } from '../../models/dataRepositories/DataRepositoryModel';
-import { ExternalSourcesConfigurationService } from '../../services/external-sources/external-sources-configuration.service';
 import { ExternalSourcesConfiguration } from '../../models/external-sources/ExternalSourcesConfiguration';
-import { IBreadCrumbComponent } from '../../shared/components/breadcrumb/definition/IBreadCrumbComponent';
+import { RegisterModel } from '../../models/registers/RegisterModel';
-import { Observable } from 'rxjs';
+import { ServiceModel } from '../../models/services/ServiceModel';
-import { BreadcrumbItem } from '../../shared/components/breadcrumb/definition/breadcrumb-item';
-import { TagsCriteria } from '../../models/criteria/tags/TagsCriteria';
 import { TagModel } from '../../models/tags/TagModel';
+import { DataManagementPlanService } from '../../services/data-management-plan/data-management-plan.service';
+import { DatasetWizardService } from '../../services/dataset-wizard/dataset-wizard.service';
+import { DatasetService } from '../../services/dataset/dataset.service';
+import { ExternalSourcesConfigurationService } from '../../services/external-sources/external-sources-configuration.service';
+import { ExternalSourcesService } from '../../services/external-sources/external-sources.service';
 import { AutoCompleteConfiguration } from '../../shared/components/auto-complete/AutoCompleteConfiguration';
 import { SingleAutoCompleteConfiguration } from '../../shared/components/autocompletes/single/single-auto-complete-configuration';
-import { DataManagementPlanListingModel } from '../../models/data-managemnt-plans/DataManagementPlanListingModel';
+import { BreadcrumbItem } from '../../shared/components/breadcrumb/definition/breadcrumb-item';
+import { IBreadCrumbComponent } from '../../shared/components/breadcrumb/definition/IBreadCrumbComponent';
+import { SnackBarNotificationComponent } from '../../shared/components/notificaiton/snack-bar-notification.component';
+import { JsonSerializer } from '../../utilities/JsonSerializer';
 import { DataRepositoryReferencedModelHelperComponent } from '../dataset-referenced-models-helper/datarepository/datarepository-referenced-model-helper.component';
-import { RegistryReferencedModelHelperComponent } from '../dataset-referenced-models-helper/registry/registry-referenced-model-helper.component';
 import { ExternalDatasetReferencedModelHelperComponent } from '../dataset-referenced-models-helper/externalDataset/externaldataset-referenced-model-helper.component';
+import { RegistryReferencedModelHelperComponent } from '../dataset-referenced-models-helper/registry/registry-referenced-model-helper.component';
 import { ServicesReferencedModelHelperComponent } from '../dataset-referenced-models-helper/services/services-referenced-model-helper.component';
-import { BehaviorSubject } from 'rxjs';
 
 @Component({
 	selector: 'app-dataset-wizard-component',
@@ -48,7 +49,7 @@ import { BehaviorSubject } from 'rxjs';
 	styleUrls: ['./dataset-wizard.component.scss'],
 	encapsulation: ViewEncapsulation.None,
 })
-export class DatasetWizardComponent implements OnInit, AfterViewInit, IBreadCrumbComponent {
+export class DatasetWizardComponent extends BaseComponent implements OnInit, AfterViewInit, IBreadCrumbComponent {
 	breadCrumbs: Observable<BreadcrumbItem[]>;
 	viewOnly = false;
 	@ViewChild('stepper') stepper: MatStepper;
@@ -101,13 +102,14 @@ export class DatasetWizardComponent implements OnInit, AfterViewInit, IBreadCrum
 		public dialog: MatDialog,
 		public externalSourcesConfigurationService: ExternalSourcesConfigurationService
 	) {
-
+		super();
 	}
 
 
 	ngOnInit() {
 		this.route
 			.data
+			.pipe(takeUntil(this._destroyed))
 			.subscribe(v => this.viewOnly = v['public']);
 
 		const dmpRequestItem: RequestItem<DataManagementPlanCriteria> = new RequestItem();
@@ -138,14 +140,16 @@ export class DatasetWizardComponent implements OnInit, AfterViewInit, IBreadCrum
 		this.tagsAutoCompleteConfiguration = new AutoCompleteConfiguration(this.externalSourcesService.searchDatasetTags.bind(this.externalSourcesService),
 			tagsRequestItem, new BehaviorSubject(false));
 
-		this.externalSourcesConfigurationService.getExternalSourcesConfiguration().subscribe(result => {
+		this.externalSourcesConfigurationService.getExternalSourcesConfiguration()
-			this.externalSourcesConfiguration = result;
+			.pipe(takeUntil(this._destroyed))
-			this.externalSourcesConfiguration.dataRepositories.push({ key: '', label: 'All' });
+			.subscribe(result => {
-			this.externalSourcesConfiguration.externalDatasets.push({ key: '', label: 'All' });
+				this.externalSourcesConfiguration = result;
-			this.externalSourcesConfiguration.registries.push({ key: '', label: 'All' });
+				this.externalSourcesConfiguration.dataRepositories.push({ key: '', label: 'All' });
-			this.externalSourcesConfiguration.services.push({ key: '', label: 'All' });
+				this.externalSourcesConfiguration.externalDatasets.push({ key: '', label: 'All' });
-			this.externalSourcesConfiguration.tags.push({ key: '', label: 'All' });
+				this.externalSourcesConfiguration.registries.push({ key: '', label: 'All' });
-		});
+				this.externalSourcesConfiguration.services.push({ key: '', label: 'All' });
+				this.externalSourcesConfiguration.tags.push({ key: '', label: 'All' });
+			});
 
 		this.dmpAutoCompleteConfiguration = {
 			filterFn: this.searchDmp.bind(this),
@@ -161,6 +165,7 @@ export class DatasetWizardComponent implements OnInit, AfterViewInit, IBreadCrum
 		if (this.itemId != null) {
 			this.isNew = false;
 			this.datasetWizardService.getSingle(this.itemId).map(data => data as DatasetWizardModel)
+				.pipe(takeUntil(this._destroyed))
 				.subscribe(data => {
 					this.datasetWizardModel = JsonSerializer.fromJSONObject(data, DatasetWizardModel);
 					this.breadCrumbs = Observable.of([
@@ -193,6 +198,7 @@ export class DatasetWizardComponent implements OnInit, AfterViewInit, IBreadCrum
 		} else if (dmpId != null) {
 			this.isNew = true;
 			this.dataManagementPlanService.getSingle(dmpId).map(data => data as DataManagementPlanModel)
+				.pipe(takeUntil(this._destroyed))
 				.subscribe(data => {
 					this.datasetWizardModel = new DatasetWizardModel();
 					setTimeout(() => {
@@ -232,17 +238,21 @@ export class DatasetWizardComponent implements OnInit, AfterViewInit, IBreadCrum
 				this.viewOnly = true;
 			}
 			if (this.viewOnly) { this.formGroup.disable(); }
-			this.formGroup.get('dmp').valueChanges.subscribe(x => {
+			this.formGroup.get('dmp').valueChanges
-				this.loadDatasetProfiles();
+				.pipe(takeUntil(this._destroyed))
-			});
+				.subscribe(x => {
+					this.loadDatasetProfiles();
+				});
 		}
 	}
 
 	ngAfterViewInit() {
-		this.route.params.subscribe((params: Params) => {
+		this.route.params
-			const itemId = params['id'];
+			.pipe(takeUntil(this._destroyed))
-			if (itemId != null) { this.stepper.selectedIndex = 2; }
+			.subscribe((params: Params) => {
-		});
+				const itemId = params['id'];
+				if (itemId != null) { this.stepper.selectedIndex = 2; }
+			});
 	}
 
 	searchDmp(query: string): Observable<DataManagementPlanListingModel[]> {
@@ -257,9 +267,11 @@ export class DatasetWizardComponent implements OnInit, AfterViewInit, IBreadCrum
 		datasetProfileRequestItem.criteria = new DatasetProfileCriteria();
 		datasetProfileRequestItem.criteria.id = this.formGroup.get('dmp').value.id;
 		if (datasetProfileRequestItem.criteria.id) {
-			this.datasetWizardService.getAvailableProfiles(datasetProfileRequestItem).subscribe(items => {
+			this.datasetWizardService.getAvailableProfiles(datasetProfileRequestItem)
-				this.availableProfiles = JsonSerializer.fromJSONArray(items, DatasetProfileModel);
+				.pipe(takeUntil(this._destroyed))
-			});
+				.subscribe(items => {
+					this.availableProfiles = JsonSerializer.fromJSONArray(items, DatasetProfileModel);
+				});
 		}
 	}
 
@@ -270,11 +282,13 @@ export class DatasetWizardComponent implements OnInit, AfterViewInit, IBreadCrum
 	getDefinition() {
 		if (this.formGroup.invalid) { this.stepper.selectedIndex = 0; return; }
 		if (this.isNew) {
-			this.datasetWizardService.getDefinition(this.formGroup.get('profile').get('id').value).subscribe(item => {
+			this.datasetWizardService.getDefinition(this.formGroup.get('profile').get('id').value)
-				this.datasetWizardModel.datasetProfileDefinition = JsonSerializer.fromJSONObject(item, DatasetProfileDefinitionModel);
+				.pipe(takeUntil(this._destroyed))
-				this.datasetProfileDefinitionModel = this.datasetWizardModel.datasetProfileDefinition;
+				.subscribe(item => {
-				this.formGroup.addControl('datasetProfileDefinition', this.datasetProfileDefinitionModel.buildForm());
+					this.datasetWizardModel.datasetProfileDefinition = JsonSerializer.fromJSONObject(item, DatasetProfileDefinitionModel);
-			});
+					this.datasetProfileDefinitionModel = this.datasetWizardModel.datasetProfileDefinition;
+					this.formGroup.addControl('datasetProfileDefinition', this.datasetProfileDefinitionModel.buildForm());
+				});
 		}
 	}
 
@@ -289,23 +303,29 @@ export class DatasetWizardComponent implements OnInit, AfterViewInit, IBreadCrum
 	}
 
 	onSubmit(): void {
-		this.datasetWizardService.createDataset(this.formGroup.value).subscribe(
+		this.datasetWizardService.createDataset(this.formGroup.value)
-			complete => {
+			.pipe(takeUntil(this._destroyed))
-				this.datasetWizardService.getSingle(complete.id).subscribe(
+			.subscribe(
-					result => {
+				complete => {
-						this.datasetWizardModel = JsonSerializer.fromJSONObject(result, DatasetWizardModel);
+					this.datasetWizardService.getSingle(complete.id)
-					}
+						.pipe(takeUntil(this._destroyed))
-				);
+						.subscribe(
-				this.onCallbackSuccess();
+							result => {
-			},
+								this.datasetWizardModel = JsonSerializer.fromJSONObject(result, DatasetWizardModel);
-			error => this.onCallbackError(error)
+							}
-		);
+						);
+					this.onCallbackSuccess();
+				},
+				error => this.onCallbackError(error)
+			);
 	}
 
 	submit() {
-		this.datasetWizardService.createDataset(this.formGroup.value).subscribe(data => {
+		this.datasetWizardService.createDataset(this.formGroup.value)
-			this.router.navigateByUrl('/datasets/dmp/' + this.formGroup.get('dmp').value.id);
+			.pipe(takeUntil(this._destroyed))
-		});
+			.subscribe(data => {
+				this.router.navigateByUrl('/datasets/dmp/' + this.formGroup.get('dmp').value.id);
+			});
 	}
 
 
@@ -339,21 +359,25 @@ export class DatasetWizardComponent implements OnInit, AfterViewInit, IBreadCrum
 	}
 
 	downloadPDF(): void {
-		this.datasetWizardService.downloadPDF(this.itemId).subscribe(response => {
+		this.datasetWizardService.downloadPDF(this.itemId)
-			const blob = new Blob([response.body], { type: 'application/pdf' });
+			.pipe(takeUntil(this._destroyed))
-			const filename = this.getFilenameFromContentDispositionHeader(response.headers.get('Content-Disposition'));
+			.subscribe(response => {
+				const blob = new Blob([response.body], { type: 'application/pdf' });
+				const filename = this.getFilenameFromContentDispositionHeader(response.headers.get('Content-Disposition'));
 
-			FileSaver.saveAs(blob, filename);
+				FileSaver.saveAs(blob, filename);
-		});
+			});
 	}
 
 	downloadXML(): void {
-		this.datasetWizardService.downloadXML(this.itemId).subscribe(response => {
+		this.datasetWizardService.downloadXML(this.itemId)
-			const blob = new Blob([response.body], { type: 'application/xml' });
+			.pipe(takeUntil(this._destroyed))
-			const filename = this.getFilenameFromContentDispositionHeader(response.headers.get('Content-Disposition'));
+			.subscribe(response => {
+				const blob = new Blob([response.body], { type: 'application/xml' });
+				const filename = this.getFilenameFromContentDispositionHeader(response.headers.get('Content-Disposition'));
 
-			FileSaver.saveAs(blob, filename);
+				FileSaver.saveAs(blob, filename);
-		});
+			});
 	}
 
 	getFilenameFromContentDispositionHeader(header: string): string {
@@ -416,11 +440,13 @@ export class DatasetWizardComponent implements OnInit, AfterViewInit, IBreadCrum
 
 			}
 		});
-		dialogRef.afterClosed().subscribe(result => {
+		dialogRef.afterClosed()
-			if (!result) { return; }
+			.pipe(takeUntil(this._destroyed))
-			const dataRepositoryModel = new DataRepositoryModel(result.id, result.label, result.pid, result.uri, result.reference);
+			.subscribe(result => {
-			(<FormArray>this.formGroup.get('dataRepositories')).push(dataRepositoryModel.buildForm());
+				if (!result) { return; }
-		});
+				const dataRepositoryModel = new DataRepositoryModel(result.id, result.label, result.pid, result.uri, result.reference);
+				(<FormArray>this.formGroup.get('dataRepositories')).push(dataRepositoryModel.buildForm());
+			});
 	}
 
 	addRegistry() {
@@ -431,11 +457,13 @@ export class DatasetWizardComponent implements OnInit, AfterViewInit, IBreadCrum
 
 			}
 		});
-		dialogRef.afterClosed().subscribe(result => {
+		dialogRef.afterClosed()
-			if (!result) { return; }
+			.pipe(takeUntil(this._destroyed))
-			const registryModel = new RegisterModel(result.abbreviation, result.definition, result.id, result.label, result.reference, result.uri);
+			.subscribe(result => {
-			(<FormArray>this.formGroup.get('registries')).push(registryModel.buildForm());
+				if (!result) { return; }
-		});
+				const registryModel = new RegisterModel(result.abbreviation, result.definition, result.id, result.label, result.reference, result.uri);
+				(<FormArray>this.formGroup.get('registries')).push(registryModel.buildForm());
+			});
 	}
 
 	addExternalDataset() {
@@ -446,11 +474,13 @@ export class DatasetWizardComponent implements OnInit, AfterViewInit, IBreadCrum
 
 			}
 		});
-		dialogRef.afterClosed().subscribe(result => {
+		dialogRef.afterClosed()
-			if (!result) { return; }
+			.pipe(takeUntil(this._destroyed))
-			const externalDatasetModel = new ExternalDatasetModel(result.id, result.abbreviation, result.label, result.reference);
+			.subscribe(result => {
-			(<FormArray>this.formGroup.get('externalDatasets')).push(externalDatasetModel.buildForm());
+				if (!result) { return; }
-		});
+				const externalDatasetModel = new ExternalDatasetModel(result.id, result.abbreviation, result.label, result.reference);
+				(<FormArray>this.formGroup.get('externalDatasets')).push(externalDatasetModel.buildForm());
+			});
 	}
 
 	addService() {
@@ -461,11 +491,13 @@ export class DatasetWizardComponent implements OnInit, AfterViewInit, IBreadCrum
 
 			}
 		});
-		dialogRef.afterClosed().subscribe(result => {
+		dialogRef.afterClosed()
-			if (!result) { return; }
+			.pipe(takeUntil(this._destroyed))
-			const serviceModel = new ServiceModel(result.id, result.abbreviation, result.definition, result.uri, result.label, result.reference);
+			.subscribe(result => {
-			(<FormArray>this.formGroup.get('services')).push(serviceModel.buildForm());
+				if (!result) { return; }
-		});
+				const serviceModel = new ServiceModel(result.id, result.abbreviation, result.definition, result.uri, result.label, result.reference);
+				(<FormArray>this.formGroup.get('services')).push(serviceModel.buildForm());
+			});
 	}
 
 	public enableForm() {
@@ -474,13 +506,15 @@ export class DatasetWizardComponent implements OnInit, AfterViewInit, IBreadCrum
 			this.viewOnly = false;
 			this.formGroup.enable();
 		} else {
-			this.datasetWizardService.unlock(this.formGroup.get('id').value).subscribe(x => {
+			this.datasetWizardService.unlock(this.formGroup.get('id').value)
-				this.editMode = true;
+				.pipe(takeUntil(this._destroyed))
-				this.viewOnly = false;
+				.subscribe(x => {
-				this.datasetWizardModel.status = DatasetStatus.Draft;
+					this.editMode = true;
-				this.formGroup.get('status').patchValue(DatasetStatus.Draft);
+					this.viewOnly = false;
-				this.formGroup.enable();
+					this.datasetWizardModel.status = DatasetStatus.Draft;
-			});
+					this.formGroup.get('status').patchValue(DatasetStatus.Draft);
+					this.formGroup.enable();
+				});
 		}
 	}
 

dmp-frontend/src/app/datasets/editor/dataset-editor.component.html

@@ -4,22 +4,22 @@
 		<mat-form-field class="full-width">
 			<input matInput placeholder="{{'DATASET-EDITOR.FIELDS.NAME' | translate}}" type="text" name="label" formControlName="label"
 			 required>
-			<mat-error *ngIf="formGroup.get('label').errors?.backendError">{{baseErrorModel.label}}</mat-error>
+			<mat-error *ngIf="formGroup.get('label').hasError('backendError')">{{baseErrorModel.label}}</mat-error>
-			<mat-error *ngIf="formGroup.get('label').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+			<mat-error *ngIf="formGroup.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 		</mat-form-field>
 
 		<mat-form-field class="full-width">
 			<input matInput placeholder="{{'DATASET-EDITOR.FIELDS.URI' | translate}}" type="text" name="uri" formControlName="uri">
-			<mat-error *ngIf="formGroup.get('uri').errors?.backendError">{{baseErrorModel.uri}}</mat-error>
+			<mat-error *ngIf="formGroup.get('uri').hasError('backendError')">{{baseErrorModel.uri}}</mat-error>
-			<mat-error *ngIf="formGroup.get('uri').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+			<mat-error *ngIf="formGroup.get('uri').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 		</mat-form-field>
 
 
 		<mat-form-field class="full-width">
 			<textarea matInput class="description-area" placeholder="{{'DATASET-EDITOR.FIELDS.DESCRIPTION' | translate}}"
 			 formControlName="description"></textarea>
-			<mat-error *ngIf="formGroup.get('description').errors?.backendError">{{errorModel.description}}</mat-error>
+			<mat-error *ngIf="formGroup.get('description').hasError('backendError')">{{errorModel.description}}</mat-error>
-			<mat-error *ngIf="formGroup.get('description').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+			<mat-error *ngIf="formGroup.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 		</mat-form-field>
 
 

dmp-frontend/src/app/datasets/editor/dataset-editor.component.ts

@@ -1,17 +1,9 @@
-import { AfterViewInit, Component, Input, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import { AfterViewInit, Component, Input, ViewEncapsulation } from '@angular/core';
-import { MatPaginator, MatSort, MatSnackBar } from '@angular/material';
-import { Router, ActivatedRoute, Params } from '@angular/router';
-import { TranslateService } from '@ngx-translate/core';
-import { DataSource } from '@angular/cdk/table';
-import { Observable } from 'rxjs';
-import { JsonSerializer } from '../../utilities/JsonSerializer';
 import { FormGroup } from '@angular/forms';
-import { SnackBarNotificationComponent } from '../../shared/components/notificaiton/snack-bar-notification.component';
+import { MatSnackBar } from '@angular/material';
-import { BaseErrorModel } from '../../models/error/BaseErrorModel';
+import { Router } from '@angular/router';
-import { DatasetService } from '../../services/dataset/dataset.service';
+import { TranslateService } from '@ngx-translate/core';
 import { DatasetModel } from '../../models/datasets/DatasetModel';
-import { ExternalSourcesService } from '../../services/external-sources/external-sources.service';
-import { ExternalSourcesItemModel } from '../../models/external-sources/ExternalSourcesItemModel';
 
 
 
@@ -44,12 +36,13 @@ export class DatasetEditorComponent implements AfterViewInit {
 	}
 
 	ngAfterViewInit() {
-		/* this.route.params.subscribe((params: Params) => {
+		/* this.route.params.pipe(takeUntil(this._destroyed)).subscribe((params: Params) => {
 		  const itemId = params['id'];
 
 		  if (itemId != null) {
 			this.isNew = false;
 			this.datasetService.getSingle(itemId).map(data => data as DatasetModel)
+			  .pipe(takeUntil(this._destroyed))
 			  .subscribe(data => {
 				this.dataset = new JsonSerializer<DatasetModel>().fromJSONObject(data, DatasetModel);
 				this.formGroup = this.dataset.buildForm();
@@ -74,7 +67,7 @@ export class DatasetEditorComponent implements AfterViewInit {
 	//   if (value) {
 	//     this.filtereddataRepositoriesAsync = true;
 
-	//     this.externalSourcesService.searchDMPOrganizations(value).subscribe(items => {
+	//     this.externalSourcesService.searchDMPOrganizations(value).pipe(takeUntil(this._destroyed)).subscribe(items => {
 	//       this.filtereddataRepositories = items;
 	//       this.filtereddataRepositoriesAsync = false;
 
@@ -92,7 +85,7 @@ export class DatasetEditorComponent implements AfterViewInit {
 	//   if (value) {
 	//     this.filteredRegistriesAsync = true;
 
-	//     this.externalSourcesService.searchDMPResearchers(value).subscribe(items => {
+	//     this.externalSourcesService.searchDMPResearchers(value).pipe(takeUntil(this._destroyed)).subscribe(items => {
 	//       this.filteredRegistries = items;
 	//       this.filteredRegistriesAsync = false;
 
@@ -110,7 +103,7 @@ export class DatasetEditorComponent implements AfterViewInit {
 	//   if (value) {
 	//     this.filteredServicesAsync = true;
 
-	//     this.externalSourcesService.searchDatasetService(value).subscribe(items => {
+	//     this.externalSourcesService.searchDatasetService(value).pipe(takeUntil(this._destroyed)).subscribe(items => {
 	//       this.filteredServices = items;
 	//       this.filteredServicesAsync = false;
 

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

@@ -1,24 +1,21 @@
-import { Field } from '../../models/Field';
+import { DataSource } from '@angular/cdk/table';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { MatPaginator, MatSnackBar, MatSort, PageEvent } from '@angular/material';
+import { ActivatedRoute, Params, Router } from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
+import { Observable } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { BaseComponent } from '../../core/common/base/base.component';
+import { DatasetCriteria } from '../../models/criteria/dataset/DatasetCriteria';
 import { DataTableRequest } from '../../models/data-table/DataTableRequest';
 import { DatasetListingModel } from '../../models/datasets/DatasetListingModel';
-import { DatasetCriteria } from '../../models/criteria/dataset/DatasetCriteria';
-import { DatasetService } from '../../services/dataset/dataset.service';
-import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
-import { MatPaginator, MatSort, MatSnackBar } from '@angular/material';
-import { Router, Params, ActivatedRoute } from '@angular/router';
-import { TranslateService } from '@ngx-translate/core';
-import { DataSource } from '@angular/cdk/table';
-
-import { Observable } from 'rxjs';
-import { PageEvent } from '@angular/material';
 import { DataManagementPlanService } from '../../services/data-management-plan/data-management-plan.service';
-import { DataManagementPlanModel } from '../../models/data-managemnt-plans/DataManagementPlanModel';
+import { DatasetService } from '../../services/dataset/dataset.service';
-import { DatasetCriteriaComponent } from '../../shared/components/criteria/datasets/datasets-criteria.component';
 import { BreadcrumbItem } from '../../shared/components/breadcrumb/definition/breadcrumb-item';
 import { IBreadCrumbComponent } from '../../shared/components/breadcrumb/definition/IBreadCrumbComponent';
-import { Utilities } from '../../utilities/utilities';
+import { DatasetCriteriaComponent } from '../../shared/components/criteria/datasets/datasets-criteria.component';
 import { JsonSerializer } from '../../utilities/JsonSerializer';
-
+import { Utilities } from '../../utilities/utilities';
 
 @Component({
 	selector: 'app-dataset-listing-component',
@@ -26,7 +23,7 @@ import { JsonSerializer } from '../../utilities/JsonSerializer';
 	styleUrls: ['./dataset-listing.component.scss'],
 	providers: [Utilities]
 })
-export class DatasetListingComponent implements OnInit, IBreadCrumbComponent {
+export class DatasetListingComponent extends BaseComponent implements OnInit, IBreadCrumbComponent {
 
 	@ViewChild(MatPaginator) _paginator: MatPaginator;
 	@ViewChild(MatSort) sort: MatSort;
@@ -54,27 +51,29 @@ export class DatasetListingComponent implements OnInit, IBreadCrumbComponent {
 		public dataManagementPlanService: DataManagementPlanService,
 		public utilities: Utilities
 	) {
-
+		super();
 	}
 
 
 	ngOnInit() {
 
-		this.route.params.subscribe(async (params: Params) => {
+		this.route.params
-			this.dmpId = params['dmpId'];
+			.pipe(takeUntil(this._destroyed))
-			this.criteria.setCriteria(this.getDefaultCriteria(this.dmpId));
+			.subscribe(async (params: Params) => {
-			this.refresh();
+				this.dmpId = params['dmpId'];
-			this.criteria.setRefreshCallback(() => this.refresh());
+				this.criteria.setCriteria(this.getDefaultCriteria(this.dmpId));
-			if (this.dmpId != null) {
+				this.refresh();
-				const dmp = await this.dataManagementPlanService.getSingle(this.dmpId).toPromise();
+				this.criteria.setRefreshCallback(() => this.refresh());
-				this.breadCrumbs = Observable.of([{ parentComponentName: 'DataManagementPlanEditorComponent', label: dmp.label, url: 'dmps/edit/' + this.dmpId }]);
+				if (this.dmpId != null) {
-				if (params['dmpLabel'] !== undefined) {
+					const dmp = await this.dataManagementPlanService.getSingle(this.dmpId).toPromise();
-					this.titlePrefix = 'for ' + params['dmpLabel'];
+					this.breadCrumbs = Observable.of([{ parentComponentName: 'DataManagementPlanEditorComponent', label: dmp.label, url: 'dmps/edit/' + this.dmpId }]);
+					if (params['dmpLabel'] !== undefined) {
+						this.titlePrefix = 'for ' + params['dmpLabel'];
+					}
+				} else {
+					this.breadCrumbs = Observable.of([]);
 				}
-			} else {
+			});
-				this.breadCrumbs = Observable.of([]);
-			}
-		});
 	}
 
 	refresh() {
@@ -94,7 +93,9 @@ export class DatasetListingComponent implements OnInit, IBreadCrumbComponent {
 	}
 
 	makeItPublic(id: String) {
-		this.datasetService.makeDatasetPublic(id).subscribe();
+		this.datasetService.makeDatasetPublic(id)
+			.pipe(takeUntil(this._destroyed))
+			.subscribe();
 	}
 
 }

dmp-frontend/src/app/dmp-profiles/dmp-profile-editor/dmp-profile-editor.component.html

@@ -11,8 +11,8 @@
 				<mat-form-field class="full-width">
 					<input matInput placeholder="{{'DMP-PROFILE-EDITOR.FIELDS.LABEL' | translate}}" type="text" name="label"
 					 formControlName="label" required>
-					<mat-error *ngIf="formGroup.get('label').errors?.backendError">{{baseErrorModel.label}}</mat-error>
+					<mat-error *ngIf="formGroup.get('label').hasError('backendError')">{{baseErrorModel.label}}</mat-error>
-					<mat-error *ngIf="formGroup.get('label').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+					<mat-error *ngIf="formGroup.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 				</mat-form-field>
 
 				<div formGroupName="definition">
@@ -22,8 +22,8 @@
 								<mat-form-field>
 									<input matInput placeholder="{{'DMP-PROFILE-EDITOR.FIELDS.LABEL' | translate}}" type="text" name="label"
 									 formControlName="label" required>
-									<mat-error *ngIf="formGroup.get('definition').get('fields').get(''+i).get('label').errors?.required">{{baseErrorModel.label}}</mat-error>
+									<mat-error *ngIf="formGroup.get('definition').get('fields').get(''+i).get('label').hasError('required')">{{baseErrorModel.label}}</mat-error>
-									<mat-error *ngIf="formGroup.get('definition').get('fields').get(''+i).get('label').errors?.backendError">{{'GENERAL.VALIDATION.REQUIRED'
+									<mat-error *ngIf="formGroup.get('definition').get('fields').get(''+i).get('label').hasError('backendError')">{{'GENERAL.VALIDATION.REQUIRED'
 										| translate}}</mat-error>
 								</mat-form-field>
 								<mat-form-field>
@@ -31,8 +31,8 @@
 										<mat-option *ngFor="let fieldType of getDMPProfileFieldTypeValues()" [value]="fieldType">{{
 											getDMPProfileFieldTypeWithLanguage(fieldType) | translate}}</mat-option>
 									</mat-select>
-									<mat-error *ngIf="formGroup.get('definition').get('fields').get(''+i).get('type').errors?.required">{{baseErrorModel.type}}</mat-error>
+									<mat-error *ngIf="formGroup.get('definition').get('fields').get(''+i).get('type').hasError('required')">{{baseErrorModel.type}}</mat-error>
-									<mat-error *ngIf="formGroup.get('definition').get('fields').get(''+i).get('type').errors?.backendError">{{'GENERAL.VALIDATION.REQUIRED'
+									<mat-error *ngIf="formGroup.get('definition').get('fields').get(''+i).get('type').hasError('backendError')">{{'GENERAL.VALIDATION.REQUIRED'
 										| translate}}</mat-error>
 								</mat-form-field>
 								<mat-form-field>
@@ -40,8 +40,8 @@
 										<mat-option *ngFor="let fieldDataType of getDMPProfileFieldDataTypeValues()" [value]="fieldDataType">{{
 											getDMPProfileFieldDataTypeWithLanguage(fieldDataType) | translate}}</mat-option>
 									</mat-select>
-									<mat-error *ngIf="formGroup.get('definition').get('fields').get(''+i).get('dataType').errors?.required">{{baseErrorModel.dataType}}</mat-error>
+									<mat-error *ngIf="formGroup.get('definition').get('fields').get(''+i).get('dataType').hasError('required')">{{baseErrorModel.dataType}}</mat-error>
-									<mat-error *ngIf="formGroup.get('definition').get('fields').get(''+i).get('dataType').errors?.backendError">{{'GENERAL.VALIDATION.REQUIRED'
+									<mat-error *ngIf="formGroup.get('definition').get('fields').get(''+i).get('dataType').hasError('backendError')">{{'GENERAL.VALIDATION.REQUIRED'
 										| translate}}</mat-error>
 								</mat-form-field>
 								<mat-checkbox formControlName="required">

dmp-frontend/src/app/dmp-profiles/dmp-profile-editor/dmp-profile-editor.component.ts

@@ -4,7 +4,9 @@ import { MatSnackBar } from '@angular/material';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { TdDialogService } from '@covalent/core';
 import { TranslateService } from '@ngx-translate/core';
+import { takeUntil } from 'rxjs/operators';
 import { environment } from '../../../environments/environment';
+import { BaseComponent } from '../../core/common/base/base.component';
 import { DataManagementPlanProfileModel } from '../../models/data-management-plan-profile/DataManagementPlanProfileModel';
 import { DataManagementProfileField, DMPProfileFieldDataType, DMPProfileType } from '../../models/data-management-plan-profile/DataManagementProfileField';
 import { BaseErrorModel } from '../../models/error/BaseErrorModel';
@@ -22,7 +24,7 @@ import { Utilities } from '../../utilities/utilities';
 	providers: [DataManagementPlanProfileService, Utilities],
 	encapsulation: ViewEncapsulation.None
 })
-export class DataManagementPlanProfileEditorComponent implements AfterViewInit {
+export class DataManagementPlanProfileEditorComponent extends BaseComponent implements AfterViewInit {
 
 	isNew = true;
 	dataManagementPlanProfileModel: DataManagementPlanProfileModel;
@@ -38,29 +40,33 @@ export class DataManagementPlanProfileEditorComponent implements AfterViewInit {
 		private dialogService: TdDialogService,
 		private utilities: Utilities
 	) {
+		super();
 	}
 
 	ngAfterViewInit() {
-		this.route.params.subscribe((params: Params) => {
+		this.route.params
-			const itemId = params['id'];
+			.pipe(takeUntil(this._destroyed))
+			.subscribe((params: Params) => {
+				const itemId = params['id'];
 
-			if (itemId != null) {
+				if (itemId != null) {
-				this.isNew = false;
+					this.isNew = false;
-				this.dmpProfileService.getSingle(itemId).map(data => data as DataManagementPlanProfileModel)
+					this.dmpProfileService.getSingle(itemId).map(data => data as DataManagementPlanProfileModel)
-					.subscribe(data => {
+						.pipe(takeUntil(this._destroyed))
-						this.dataManagementPlanProfileModel = JsonSerializer.fromJSONObject(data, DataManagementPlanProfileModel);
+						.subscribe(data => {
-						this.baseErrorModel = this.dataManagementPlanProfileModel.errorModel;
+							this.dataManagementPlanProfileModel = JsonSerializer.fromJSONObject(data, DataManagementPlanProfileModel);
+							this.baseErrorModel = this.dataManagementPlanProfileModel.errorModel;
+							this.formGroup = this.dataManagementPlanProfileModel.buildForm();
+						});
+				} else {
+					this.dataManagementPlanProfileModel = new DataManagementPlanProfileModel();
+					this.baseErrorModel = this.dataManagementPlanProfileModel.errorModel;
+
+					setTimeout(() => {
 						this.formGroup = this.dataManagementPlanProfileModel.buildForm();
 					});
-			} else {
+				}
-				this.dataManagementPlanProfileModel = new DataManagementPlanProfileModel();
+			});
-				this.baseErrorModel = this.dataManagementPlanProfileModel.errorModel;
-
-				setTimeout(() => {
-					this.formGroup = this.dataManagementPlanProfileModel.buildForm();
-				});
-			}
-		});
 	}
 
 	formSubmit(): void {
@@ -74,10 +80,12 @@ export class DataManagementPlanProfileEditorComponent implements AfterViewInit {
 	}
 
 	onSubmit(): void {
-		this.dmpProfileService.createDataManagementPlan(this.formGroup.value).subscribe(
+		this.dmpProfileService.createDataManagementPlan(this.formGroup.value)
-			complete => this.onCallbackSuccess(),
+			.pipe(takeUntil(this._destroyed))
-			error => this.onCallbackError(error)
+			.subscribe(
-		);
+				complete => this.onCallbackSuccess(),
+				error => this.onCallbackError(error)
+			);
 	}
 
 	onCallbackSuccess(): void {
@@ -147,9 +155,11 @@ export class DataManagementPlanProfileEditorComponent implements AfterViewInit {
 
 	getDMPProfileFieldDataTypeWithLanguage(role: DMPProfileFieldDataType): string {
 		let result = '';
-		this.language.get(this.utilities.convertFromDMPProfileDataType(role)).subscribe((value: string) => {
+		this.language.get(this.utilities.convertFromDMPProfileDataType(role))
-			result = value;
+			.pipe(takeUntil(this._destroyed))
-		});
+			.subscribe((value: string) => {
+				result = value;
+			});
 		return result;
 	}
 
@@ -162,9 +172,11 @@ export class DataManagementPlanProfileEditorComponent implements AfterViewInit {
 
 	getDMPProfileFieldTypeWithLanguage(role: DMPProfileType): string {
 		let result = '';
-		this.language.get(this.utilities.convertFromDMPProfileType(role)).subscribe((value: string) => {
+		this.language.get(this.utilities.convertFromDMPProfileType(role))
-			result = value;
+			.pipe(takeUntil(this._destroyed))
-		});
+			.subscribe((value: string) => {
+				result = value;
+			});
 		return result;
 	}
 }

dmp-frontend/src/app/dmp-profiles/dmp-profile-listing/dmp-profile-listing.component.ts

@@ -1,14 +1,16 @@
-import { Component, ViewChild, OnInit } from '@angular/core';
-import { MatPaginator, MatSort, PageEvent, MatSnackBar } from '@angular/material';
-import { DataManagementPlanProfileCriteriaComponent } from '../../shared/components/criteria/datamanagementplanprofile/dmp-profile-criteria.component';
-import { ActivatedRoute, Router, Params } from '@angular/router';
-import { TranslateService } from '@ngx-translate/core';
 import { DataSource } from '@angular/cdk/table';
-import { DataManagementPlanProfileCriteria } from '../../models/criteria/dmp-profile/DataManagementPlanProfileCriteria';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { MatPaginator, MatSnackBar, MatSort, PageEvent } from '@angular/material';
+import { ActivatedRoute, Params, Router } from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
 import { Observable } from 'rxjs';
-import { DataTableRequest } from '../../models/data-table/DataTableRequest';
+import { takeUntil } from 'rxjs/operators';
+import { BaseComponent } from '../../core/common/base/base.component';
+import { DataManagementPlanProfileCriteria } from '../../models/criteria/dmp-profile/DataManagementPlanProfileCriteria';
 import { DataManagementPlanProfileListingModel } from '../../models/data-management-plan-profile/DataManagementPlanProfileListingModel';
+import { DataTableRequest } from '../../models/data-table/DataTableRequest';
 import { DataManagementPlanProfileService } from '../../services/data-management-plan-profile/datamanagement-profile.service';
+import { DataManagementPlanProfileCriteriaComponent } from '../../shared/components/criteria/datamanagementplanprofile/dmp-profile-criteria.component';
 
 @Component({
 	selector: 'app-dmp-profile-listing-component',
@@ -16,7 +18,7 @@ import { DataManagementPlanProfileService } from '../../services/data-management
 	styleUrls: ['./dmp-profile-listing.component.scss'],
 	providers: [DataManagementPlanProfileService]
 })
-export class DataManagementPlanProfileListingComponent implements OnInit {
+export class DataManagementPlanProfileListingComponent extends BaseComponent implements OnInit {
 
 	@ViewChild(MatPaginator) _paginator: MatPaginator;
 	@ViewChild(MatSort) sort: MatSort;
@@ -41,17 +43,19 @@ export class DataManagementPlanProfileListingComponent implements OnInit {
 		public route: ActivatedRoute,
 		public dataManagementPlanService: DataManagementPlanProfileService
 	) {
-
+		super();
 	}
 
 
 	ngOnInit() {
-		this.route.params.subscribe((params: Params) => {
+		this.route.params
-			this.dmpId = params['dmpId'];
+			.pipe(takeUntil(this._destroyed))
-			this.criteria.setCriteria(this.getDefaultCriteria());
+			.subscribe((params: Params) => {
-			this.refresh();
+				this.dmpId = params['dmpId'];
-			this.criteria.setRefreshCallback(() => this.refresh());
+				this.criteria.setCriteria(this.getDefaultCriteria());
-		});
+				this.refresh();
+				this.criteria.setRefreshCallback(() => this.refresh());
+			});
 	}
 
 	refresh() {
@@ -69,7 +73,7 @@ export class DataManagementPlanProfileListingComponent implements OnInit {
 
 	// makeItPublic(id: String) {
 	//   debugger;
-	//   this.datasetService.makeDatasetPublic(id).subscribe();
+	//   this.datasetService.makeDatasetPublic(id).pipe(takeUntil(this._destroyed)).subscribe();
 	// }
 
 }

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

@@ -53,15 +53,15 @@
 					<mat-form-field class="col-md-12">
 						<input matInput placeholder="{{'DMP-EDITOR.FIELDS.NAME' | translate}}" type="text" name="label" formControlName="label"
 						 required>
-						<mat-error *ngIf="formGroup.get('label').errors?.backendError">{{baseErrorModel.label}}</mat-error>
+						<mat-error *ngIf="formGroup.get('label').hasError('backendError')">{{baseErrorModel.label}}</mat-error>
-						<mat-error *ngIf="formGroup.get('label').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+						<mat-error *ngIf="formGroup.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 					</mat-form-field>
 
 					<mat-form-field class="col-md-12">
 						<textarea matInput class="description-area" placeholder="{{'DMP-EDITOR.FIELDS.DESCRIPTION' | translate}}"
 						 formControlName="description" required></textarea>
-						<mat-error *ngIf="formGroup.get('description').errors?.backendError">{{errorModel.description}}</mat-error>
+						<mat-error *ngIf="formGroup.get('description').hasError('backendError')">{{errorModel.description}}</mat-error>
-						<mat-error *ngIf="formGroup.get('description').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+						<mat-error *ngIf="formGroup.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 					</mat-form-field>
 
 					<div class="col-md-6">

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

@@ -1,41 +1,39 @@
-import { Component, ViewChild, OnInit, AfterViewInit, ViewEncapsulation } from '@angular/core';
+import { AfterViewInit, Component, ViewContainerRef, ViewEncapsulation } from '@angular/core';
-import { MatPaginator, MatSort, MatSnackBar, MatDialog, MatChipList, MatChip } from '@angular/material';
+import { FormControl, FormGroup } from '@angular/forms';
-import { Router, ActivatedRoute, Params } from '@angular/router';
+import { MatDialog, MatSnackBar } from '@angular/material';
-import { TranslateService } from '@ngx-translate/core';
+import { ActivatedRoute, Params, Router } from '@angular/router';
-import { DataSource } from '@angular/cdk/table';
-import { Observable } from 'rxjs';
-import { JsonSerializer } from '../../utilities/JsonSerializer';
-import { FormGroup, FormControl } from '@angular/forms';
-import { SnackBarNotificationComponent } from '../../shared/components/notificaiton/snack-bar-notification.component';
-import { BaseErrorModel } from '../../models/error/BaseErrorModel';
-import { DataManagementPlanService } from '../../services/data-management-plan/data-management-plan.service';
-import { DataManagementPlanModel, DataManagementPlanStatus } from '../../models/data-managemnt-plans/DataManagementPlanModel';
-import { ExternalSourcesService } from '../../services/external-sources/external-sources.service';
-import { ExternalSourcesItemModel } from '../../models/external-sources/ExternalSourcesItemModel';
-import { RequestItem } from '../../models/criteria/RequestItem';
-import { DataManagementPlanCriteriaComponent } from '../../shared/components/criteria/data-management-plan/dmp-criteria.component';
-import { DatasetProfileModel } from '../../models/datasets/DatasetProfileModel';
-import { ProjectCriteria } from '../../models/criteria/project/ProjectCriteria';
-import { ProjectService } from '../../services/project/project.service';
-import { DmpUsersModel } from '../../models/dmpUsers/DmpUsersModel';
-import { AddResearchersComponent } from '../../shared/components/add-researchers/add-researchers.component';
-import { ViewContainerRef } from '@angular/core';
 import { TdDialogService } from '@covalent/core';
-import { AvailableProfilesComponent } from '../../shared/components/available-profiles/available-profiles.component';
+import { TranslateService } from '@ngx-translate/core';
-import { BaseCriteria } from '../../models/criteria/BaseCriteria';
-import { DataManagementPlanProfileService } from '../../services/data-management-plan-profile/datamanagement-profile.service';
-import { DataManagementPlanProfileListingModel } from '../../models/data-management-plan-profile/DataManagementPlanProfileListingModel';
-import { DataManagementPlanProfileCriteria } from '../../models/criteria/dmp-profile/DataManagementPlanProfileCriteria';
-import { DataManagementPlanProfile } from '../../models/data-management-plan-profile/DataManagementPlanProfile';
-import { LanguageResolverService } from '../../services/language-resolver/language-resolver.service';
-import { IBreadCrumbComponent } from '../../shared/components/breadcrumb/definition/IBreadCrumbComponent';
-import { BreadcrumbItem } from '../../shared/components/breadcrumb/definition/breadcrumb-item';
-import { SingleAutoCompleteConfiguration } from '../../shared/components/autocompletes/single/single-auto-complete-configuration';
-import { MultipleAutoCompleteConfiguration } from '../../shared/components/autocompletes/multiple/multiple-auto-complete-configuration';
 import * as FileSaver from 'file-saver';
-import { DMPFinaliseDialogComponent } from './dmp-finalise-dialog/dmp-finalise-dialog.component';
+import { Observable } from 'rxjs';
-import { DatasetListingModel } from '../../models/datasets/DatasetListingModel';
+import { takeUntil } from 'rxjs/operators';
+import { BaseComponent } from '../../core/common/base/base.component';
+import { BaseCriteria } from '../../models/criteria/BaseCriteria';
 import { DatasetProfileCriteria } from '../../models/criteria/dataset-profile/DatasetProfileCriteria';
+import { DataManagementPlanProfileCriteria } from '../../models/criteria/dmp-profile/DataManagementPlanProfileCriteria';
+import { ProjectCriteria } from '../../models/criteria/project/ProjectCriteria';
+import { RequestItem } from '../../models/criteria/RequestItem';
+import { DataManagementPlanProfileListingModel } from '../../models/data-management-plan-profile/DataManagementPlanProfileListingModel';
+import { DataManagementPlanModel, DataManagementPlanStatus } from '../../models/data-managemnt-plans/DataManagementPlanModel';
+import { DatasetListingModel } from '../../models/datasets/DatasetListingModel';
+import { DatasetProfileModel } from '../../models/datasets/DatasetProfileModel';
+import { DmpUsersModel } from '../../models/dmpUsers/DmpUsersModel';
+import { BaseErrorModel } from '../../models/error/BaseErrorModel';
+import { ExternalSourcesItemModel } from '../../models/external-sources/ExternalSourcesItemModel';
+import { DataManagementPlanProfileService } from '../../services/data-management-plan-profile/datamanagement-profile.service';
+import { DataManagementPlanService } from '../../services/data-management-plan/data-management-plan.service';
+import { ExternalSourcesService } from '../../services/external-sources/external-sources.service';
+import { LanguageResolverService } from '../../services/language-resolver/language-resolver.service';
+import { ProjectService } from '../../services/project/project.service';
+import { AddResearchersComponent } from '../../shared/components/add-researchers/add-researchers.component';
+import { MultipleAutoCompleteConfiguration } from '../../shared/components/autocompletes/multiple/multiple-auto-complete-configuration';
+import { SingleAutoCompleteConfiguration } from '../../shared/components/autocompletes/single/single-auto-complete-configuration';
+import { AvailableProfilesComponent } from '../../shared/components/available-profiles/available-profiles.component';
+import { BreadcrumbItem } from '../../shared/components/breadcrumb/definition/breadcrumb-item';
+import { IBreadCrumbComponent } from '../../shared/components/breadcrumb/definition/IBreadCrumbComponent';
+import { SnackBarNotificationComponent } from '../../shared/components/notificaiton/snack-bar-notification.component';
+import { JsonSerializer } from '../../utilities/JsonSerializer';
+import { DMPFinaliseDialogComponent } from './dmp-finalise-dialog/dmp-finalise-dialog.component';
 
 @Component({
 	selector: 'app-dmp-editor-component',
@@ -43,7 +41,7 @@ import { DatasetProfileCriteria } from '../../models/criteria/dataset-profile/Da
 	styleUrls: ['./dmp-editor.component.scss'],
 	encapsulation: ViewEncapsulation.None
 })
-export class DataManagementPlanEditorComponent implements AfterViewInit, IBreadCrumbComponent {
+export class DataManagementPlanEditorComponent extends BaseComponent implements AfterViewInit, IBreadCrumbComponent {
 
 	editMode = true;
 
@@ -84,62 +82,83 @@ export class DataManagementPlanEditorComponent implements AfterViewInit, IBreadC
 		private _viewContainerRef: ViewContainerRef,
 		private languageResolverService: LanguageResolverService
 	) {
+		super();
 		this.filteredOptions = dmpProfileService.getAll({ criteria: new DataManagementPlanProfileCriteria() });
 	}
 
 	ngAfterViewInit() {
-		this.route.params.subscribe((params: Params) => {
+		this.route.params
-			const itemId = params['id'];
+			.pipe(takeUntil(this._destroyed))
+			.subscribe((params: Params) => {
+				const itemId = params['id'];
 
-			const projectRequestItem: RequestItem<ProjectCriteria> = new RequestItem();
+				const projectRequestItem: RequestItem<ProjectCriteria> = new RequestItem();
-			projectRequestItem.criteria = new ProjectCriteria();
+				projectRequestItem.criteria = new ProjectCriteria();
-			const organisationRequestItem: RequestItem<BaseCriteria> = new RequestItem();
+				const organisationRequestItem: RequestItem<BaseCriteria> = new RequestItem();
-			organisationRequestItem.criteria = new BaseCriteria();
+				organisationRequestItem.criteria = new BaseCriteria();
 
 
 
-			this.projectAutoCompleteConfiguration = {
+				this.projectAutoCompleteConfiguration = {
-				filterFn: this.searchProject.bind(this),
+					filterFn: this.searchProject.bind(this),
-				items: this.searchProject(''),
+					items: this.searchProject(''),
-				displayFn: (item) => item['label'],
+					displayFn: (item) => item['label'],
-				titleFn: (item) => item['label'],
+					titleFn: (item) => item['label'],
-				//mapFn: (item) => new JsonSerializer<ProjectReference>().fromJSONArray(item, ProjectReference).map(item => item.toDropdownList()),
+					//mapFn: (item) => new JsonSerializer<ProjectReference>().fromJSONArray(item, ProjectReference).map(item => item.toDropdownList()),
-				loadDataOnStart: true
+					loadDataOnStart: true
-			};
+				};
 
-			this.profilesAutoCompleteConfiguration = {
+				this.profilesAutoCompleteConfiguration = {
-				filterFn: this.filterProfiles.bind(this),
+					filterFn: this.filterProfiles.bind(this),
-				initialItems: (excludedItems: any[]) => this.filterProfiles('').map(result => result.filter(resultItem => excludedItems.map(x => x.id).indexOf(resultItem.id) === -1)),
+					initialItems: (excludedItems: any[]) => this.filterProfiles('').map(result => result.filter(resultItem => excludedItems.map(x => x.id).indexOf(resultItem.id) === -1)),
-				displayFn: (item) => item['label'],
+					displayFn: (item) => item['label'],
-				titleFn: (item) => item['label'],
+					titleFn: (item) => item['label'],
-				//mapFn: (item) => new JsonSerializer<ProjectReference>().fromJSONArray(item, ProjectReference).map(item => item.toDropdownList()),
+					//mapFn: (item) => new JsonSerializer<ProjectReference>().fromJSONArray(item, ProjectReference).map(item => item.toDropdownList()),
-				loadDataOnStart: true
+					loadDataOnStart: true
-			};
+				};
 
-			this.organisationsAutoCompleteConfiguration = {
+				this.organisationsAutoCompleteConfiguration = {
-				filterFn: this.filterOrganisations.bind(this),
+					filterFn: this.filterOrganisations.bind(this),
-				initialItems: (excludedItems: any[]) => this.filterOrganisations('').map(result => result.filter(resultItem => excludedItems.map(x => x.id).indexOf(resultItem.id) === -1)),
+					initialItems: (excludedItems: any[]) => this.filterOrganisations('').map(result => result.filter(resultItem => excludedItems.map(x => x.id).indexOf(resultItem.id) === -1)),
-				displayFn: (item) => item['name'],
+					displayFn: (item) => item['name'],
-				titleFn: (item) => item['name'],
+					titleFn: (item) => item['name'],
-				loadDataOnStart: true
+					loadDataOnStart: true
-			};
+				};
 
-			this.researchersAutoCompleteConfiguration = {
+				this.researchersAutoCompleteConfiguration = {
-				filterFn: this.filterResearchers.bind(this),
+					filterFn: this.filterResearchers.bind(this),
-				initialItems: (excludedItems: any[]) => this.filterResearchers('').map(result => result.filter(resultItem => excludedItems.map(x => x.id).indexOf(resultItem.id) === -1)),
+					initialItems: (excludedItems: any[]) => this.filterResearchers('').map(result => result.filter(resultItem => excludedItems.map(x => x.id).indexOf(resultItem.id) === -1)),
-				displayFn: (item) => item['name'],
+					displayFn: (item) => item['name'],
-				titleFn: (item) => item['name'],
+					titleFn: (item) => item['name'],
-				loadDataOnStart: true
+					loadDataOnStart: true
-			};
+				};
 
-			if (itemId != null) {
+				if (itemId != null) {
-				this.isNew = false;
+					this.isNew = false;
-				this.dataManagementPlanService.getSingle(itemId).map(data => data as DataManagementPlanModel)
+					this.dataManagementPlanService.getSingle(itemId).map(data => data as DataManagementPlanModel)
-					.subscribe(async data => {
+						.pipe(takeUntil(this._destroyed))
-						this.dataManagementPlan = JsonSerializer.fromJSONObject(data, DataManagementPlanModel);
+						.subscribe(async data => {
+							this.dataManagementPlan = JsonSerializer.fromJSONObject(data, DataManagementPlanModel);
+							this.formGroup = this.dataManagementPlan.buildForm();
+							this.editMode = this.dataManagementPlan.status !== 1;
+							if (!this.editMode) { this.formGroup.disable(); }
+							if (this.formGroup.get('profile') && this.formGroup.get('profile').value) {
+								this.textCtrl.patchValue(this.formGroup.get('profile').value);
+							}
+							this.breadCrumbs = Observable.of([
+								{
+									parentComponentName: 'DataManagementPlanListingComponent',
+									label: 'DMPs',
+									url: 'dmps',
+									notFoundResolver: [await this.projectService.getSingle(this.dataManagementPlan.project.id).map(x => ({ label: x.label, url: '/projects/edit/' + x.id }) as BreadcrumbItem).toPromise()]
+								}]
+							);
+							this.associatedUsers = data.associatedUsers;
+						});
+				} else {
+					this.dataManagementPlan = new DataManagementPlanModel();
+					setTimeout(async () => {
 						this.formGroup = this.dataManagementPlan.buildForm();
-						this.editMode = this.dataManagementPlan.status !== 1;
-						if (!this.editMode) { this.formGroup.disable(); }
 						if (this.formGroup.get('profile') && this.formGroup.get('profile').value) {
 							this.textCtrl.patchValue(this.formGroup.get('profile').value);
 						}
@@ -148,31 +167,15 @@ export class DataManagementPlanEditorComponent implements AfterViewInit, IBreadC
 								parentComponentName: 'DataManagementPlanListingComponent',
 								label: 'DMPs',
 								url: 'dmps',
-								notFoundResolver: [await this.projectService.getSingle(this.dataManagementPlan.project.id).map(x => ({ label: x.label, url: '/projects/edit/' + x.id }) as BreadcrumbItem).toPromise()]
+							}
-							}]
+						]);
-						);
-						this.associatedUsers = data.associatedUsers;
 					});
-			} else {
+				}
-				this.dataManagementPlan = new DataManagementPlanModel();
-				setTimeout(async () => {
-					this.formGroup = this.dataManagementPlan.buildForm();
-					if (this.formGroup.get('profile') && this.formGroup.get('profile').value) {
-						this.textCtrl.patchValue(this.formGroup.get('profile').value);
-					}
-					this.breadCrumbs = Observable.of([
-						{
-							parentComponentName: 'DataManagementPlanListingComponent',
-							label: 'DMPs',
-							url: 'dmps',
-						}
-					]);
-				});
-			}
 
-		});
+			});
 		this.route
 			.queryParams
+			.pipe(takeUntil(this._destroyed))
 			.subscribe(params => {
 				this.createNewVersion = params['clone'];
 			});
@@ -196,10 +199,12 @@ export class DataManagementPlanEditorComponent implements AfterViewInit, IBreadC
 	}
 
 	onSubmit(): void {
-		this.dataManagementPlanService.createDataManagementPlan(this.formGroup.value).subscribe(
+		this.dataManagementPlanService.createDataManagementPlan(this.formGroup.value)
-			complete => this.onCallbackSuccess(),
+			.pipe(takeUntil(this._destroyed))
-			error => this.onCallbackError(error)
+			.subscribe(
-		);
+				complete => this.onCallbackSuccess(),
+				error => this.onCallbackError(error)
+			);
 	}
 
 	onCallbackSuccess(): void {
@@ -289,24 +294,30 @@ export class DataManagementPlanEditorComponent implements AfterViewInit, IBreadC
 			title: 'Confirm',
 			cancelButton: 'No',
 			acceptButton: 'Yes'
-		}).afterClosed().subscribe((accept: boolean) => {
+		}).afterClosed()
-			if (accept) {
+			.pipe(takeUntil(this._destroyed))
-				this.dataManagementPlanService.delete(id).subscribe(() => {
+			.subscribe((accept: boolean) => {
-					this.router.navigate(['/dmps']);
+				if (accept) {
-				});
+					this.dataManagementPlanService.delete(id)
-			} else {
+						.pipe(takeUntil(this._destroyed))
-				// DO SOMETHING ELSE
+						.subscribe(() => {
-			}
+							this.router.navigate(['/dmps']);
-		});
+						});
+				} else {
+					// DO SOMETHING ELSE
+				}
+			});
 	}
 
 
 	selectOption(option: any) {
 		this.dataManagementPlan.definition = null;
 		this.formGroup.get('profile').patchValue(option, { emitEvent: false });
-		this.dmpProfileService.getSingle(option.id).subscribe(result => {
+		this.dmpProfileService.getSingle(option.id)
-			this.dataManagementPlan.definition = result.definition;
+			.pipe(takeUntil(this._destroyed))
-		});
+			.subscribe(result => {
+				this.dataManagementPlan.definition = result.definition;
+			});
 	}
 
 	displayWith(item: any) {
@@ -335,30 +346,36 @@ export class DataManagementPlanEditorComponent implements AfterViewInit, IBreadC
 	}
 
 	downloadXml(id: string) {
-		this.dataManagementPlanService.downloadXML(id).subscribe(response => {
+		this.dataManagementPlanService.downloadXML(id)
-			const blob = new Blob([response.body], { type: 'application/xml' });
+			.pipe(takeUntil(this._destroyed))
-			const filename = this.getFilenameFromContentDispositionHeader(response.headers.get('Content-Disposition'));
+			.subscribe(response => {
+				const blob = new Blob([response.body], { type: 'application/xml' });
+				const filename = this.getFilenameFromContentDispositionHeader(response.headers.get('Content-Disposition'));
 
-			FileSaver.saveAs(blob, filename);
+				FileSaver.saveAs(blob, filename);
-		});
+			});
 	}
 
 	downloadDocx(id: string) {
-		this.dataManagementPlanService.downloadDocx(id).subscribe(response => {
+		this.dataManagementPlanService.downloadDocx(id)
-			const blob = new Blob([response.body], { type: 'application/octet-stream' });
+			.pipe(takeUntil(this._destroyed))
-			const filename = this.getFilenameFromContentDispositionHeader(response.headers.get('Content-Disposition'));
+			.subscribe(response => {
+				const blob = new Blob([response.body], { type: 'application/octet-stream' });
+				const filename = this.getFilenameFromContentDispositionHeader(response.headers.get('Content-Disposition'));
 
-			FileSaver.saveAs(blob, filename);
+				FileSaver.saveAs(blob, filename);
-		});
+			});
 	}
 
 	downloadPDF(id: string) {
-		this.dataManagementPlanService.downloadPDF(id).subscribe(response => {
+		this.dataManagementPlanService.downloadPDF(id)
-			const blob = new Blob([response.body], { type: 'application/octet-stream' });
+			.pipe(takeUntil(this._destroyed))
-			const filename = this.getFilenameFromContentDispositionHeader(response.headers.get('Content-Disposition'));
+			.subscribe(response => {
+				const blob = new Blob([response.body], { type: 'application/octet-stream' });
+				const filename = this.getFilenameFromContentDispositionHeader(response.headers.get('Content-Disposition'));
 
-			FileSaver.saveAs(blob, filename);
+				FileSaver.saveAs(blob, filename);
-		});
+			});
 	}
 
 	getFilenameFromContentDispositionHeader(header: string): string {
@@ -384,11 +401,13 @@ export class DataManagementPlanEditorComponent implements AfterViewInit, IBreadC
 			this.editMode = true;
 			this.formGroup.enable();
 		} else {
-			this.dataManagementPlanService.unlock(this.formGroup.get('id').value).subscribe(x => {
+			this.dataManagementPlanService.unlock(this.formGroup.get('id').value)
-				this.editMode = true;
+				.pipe(takeUntil(this._destroyed))
-				this.formGroup.get('status').patchValue(DataManagementPlanStatus.Draft);
+				.subscribe(x => {
-				this.formGroup.enable();
+					this.editMode = true;
-			});
+					this.formGroup.get('status').patchValue(DataManagementPlanStatus.Draft);
+					this.formGroup.enable();
+				});
 		}
 	}
 

dmp-frontend/src/app/dmps/editor/dmp-finalise-dialog/dmp-finalise-dialog.component.ts

@@ -1,23 +1,22 @@
-import { Component, OnInit, Inject, ViewChild } from '@angular/core';
+import { Component, Inject, OnInit, ViewChild } from '@angular/core';
-import { FormGroup, FormBuilder, Validators, AbstractControl, FormControl, FormArray } from '@angular/forms';
+import { AbstractControl, FormArray, FormBuilder, FormControl, FormGroup } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
+import { MatDialogRef, MatSelectionList, MAT_DIALOG_DATA } from '@angular/material';
-import { AuthService } from '../../../services/auth/auth.service';
+import { Router } from '@angular/router';
-import { MatDialogRef, MAT_DIALOG_DATA, MatSelectionList } from '@angular/material';
+import { takeUntil } from 'rxjs/operators';
-import { DataManagementPlanModel } from '../../../models/data-managemnt-plans/DataManagementPlanModel';
+import { BaseComponent } from '../../../core/common/base/base.component';
-import { DataManagementPlanService } from '../../../services/data-management-plan/data-management-plan.service';
-import { DatasetListingModel } from '../../../models/datasets/DatasetListingModel';
-import { DatasetService } from '../../../services/dataset/dataset.service';
-import { DataTableRequest } from '../../../models/data-table/DataTableRequest';
 import { DatasetCriteria } from '../../../models/criteria/dataset/DatasetCriteria';
+import { DataManagementPlanModel } from '../../../models/data-managemnt-plans/DataManagementPlanModel';
+import { DataTableRequest } from '../../../models/data-table/DataTableRequest';
+import { DatasetListingModel } from '../../../models/datasets/DatasetListingModel';
 import { DatasetStatus } from '../../../models/datasets/DatasetWizardModel';
-import { Observable } from 'rxjs';
+import { DatasetService } from '../../../services/dataset/dataset.service';
 
 @Component({
 	selector: 'app-dmp-finalise-dialog-component',
 	templateUrl: 'dmp-finalise-dialog.component.html',
 
 })
-export class DMPFinaliseDialogComponent implements OnInit {
+export class DMPFinaliseDialogComponent extends BaseComponent implements OnInit {
 
 	@ViewChild('datasetsDraftSelectionList') selectionList: MatSelectionList;
 	public formGroup: FormGroup;
@@ -31,6 +30,7 @@ export class DMPFinaliseDialogComponent implements OnInit {
 		public dmpService: DatasetService,
 		@Inject(MAT_DIALOG_DATA) public data: any
 	) {
+		super();
 		this.submitFunction = data['submitFunction'];
 		this.dmp = data['dmp'];
 	}
@@ -45,10 +45,12 @@ export class DMPFinaliseDialogComponent implements OnInit {
 		request.criteria = new DatasetCriteria();
 		request.criteria.dmpIds = [this.dmp.id];
 		request.criteria.status = DatasetStatus.Finalised;
-		this.dmpService.getPaged(request).map(x => x.data).subscribe(result => {
+		this.dmpService.getPaged(request).map(x => x.data)
-			this.datasetsFinalised = result;
+			.pipe(takeUntil(this._destroyed))
-			this.createFormGroup();
+			.subscribe(result => {
-		});
+				this.datasetsFinalised = result;
+				this.createFormGroup();
+			});
 	}
 
 
@@ -57,9 +59,11 @@ export class DMPFinaliseDialogComponent implements OnInit {
 		request.criteria = new DatasetCriteria();
 		request.criteria.dmpIds = [this.dmp.id];
 		request.criteria.status = DatasetStatus.Draft;
-		this.dmpService.getPaged(request).map(x => x.data).subscribe(result => {
+		this.dmpService.getPaged(request).map(x => x.data)
-			this.datasetsDraft = result;
+			.pipe(takeUntil(this._destroyed))
-		});
+			.subscribe(result => {
+				this.datasetsDraft = result;
+			});
 	}
 
 	createFormGroup() {

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

@@ -1,36 +1,30 @@
-import { DataTableRequest } from '../../models/data-table/DataTableRequest';
-import { DataManagementPlanListingModel } from '../../models/data-managemnt-plans/DataManagementPlanListingModel';
-import { InvitationComponent } from '../../shared/components/invitation/invitation.component';
-import { DataManagementPlanCriteria } from '../../models/criteria/data-management-plan/DataManagementPlanCriteria';
-import {
-	DataManagementPlanCriteriaComponent,
-} from '../../shared/components/criteria/data-management-plan/dmp-criteria.component';
-import { DataManagementPlanService } from '../../services/data-management-plan/data-management-plan.service';
-import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
-import { MatPaginator, MatSort, MatSnackBar, MatDialog } from '@angular/material';
-import { Router, ActivatedRoute, ActivatedRouteSnapshot } from '@angular/router';
-import { TranslateService } from '@ngx-translate/core';
 import { DataSource } from '@angular/cdk/table';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { MatDialog, MatPaginator, MatSnackBar, MatSort } from '@angular/material';
+import { ActivatedRoute, Router } from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
 import { Observable } from 'rxjs';
-import { DataManagementPlanRoutes } from '../../dmps/dmps.routes';
+import { takeUntil } from 'rxjs/operators';
-import { DatasetRoutes } from '../../datasets/dataset.routes';
+import { BaseComponent } from '../../core/common/base/base.component';
+import { DataManagementPlanCriteria } from '../../models/criteria/data-management-plan/DataManagementPlanCriteria';
+import { DataManagementPlanListingModel } from '../../models/data-managemnt-plans/DataManagementPlanListingModel';
+import { DataTableRequest } from '../../models/data-table/DataTableRequest';
 import { ProjectModel } from '../../models/projects/ProjectModel';
-import { IBreadCrumbComponent } from '../../shared/components/breadcrumb/definition/IBreadCrumbComponent';
+import { DataManagementPlanService } from '../../services/data-management-plan/data-management-plan.service';
 import { BreadcrumbItem } from '../../shared/components/breadcrumb/definition/breadcrumb-item';
+import { IBreadCrumbComponent } from '../../shared/components/breadcrumb/definition/IBreadCrumbComponent';
+import { DataManagementPlanCriteriaComponent } from '../../shared/components/criteria/data-management-plan/dmp-criteria.component';
+import { InvitationComponent } from '../../shared/components/invitation/invitation.component';
 import { JsonSerializer } from '../../utilities/JsonSerializer';
 import { Utilities } from '../../utilities/utilities';
 
-
-
 @Component({
 	selector: 'app-dmp-listing-component',
 	templateUrl: 'dmp-listing.component.html',
 	styleUrls: ['./dmp-listing.component.scss'],
 	providers: [Utilities]
 })
-export class DataManagementPlanListingComponent implements OnInit, IBreadCrumbComponent {
+export class DataManagementPlanListingComponent extends BaseComponent implements OnInit, IBreadCrumbComponent {
-
-
 
 	@ViewChild(MatPaginator) _paginator: MatPaginator;
 	@ViewChild(MatSort) sort: MatSort;
@@ -52,47 +46,49 @@ export class DataManagementPlanListingComponent implements OnInit, IBreadCrumbCo
 		public dialog: MatDialog,
 		public utilities: Utilities
 	) {
-
+		super();
 	}
 
 	ngOnInit() {
-		this.route.params.subscribe(async params => {
+		this.route.params
-			let projectLabel;
+			.pipe(takeUntil(this._destroyed))
-			if (params['projectId']) {
+			.subscribe(async params => {
-				this.projectId = params['projectId'];
+				let projectLabel;
-				this.showProject = false;
+				if (params['projectId']) {
-				const project = new ProjectModel();
+					this.projectId = params['projectId'];
-				project.id = this.projectId;
+					this.showProject = false;
-				this.criteria.setCriteria({ like: null, projects: [project], groupIds: null, allVersions: false });
+					const project = new ProjectModel();
-				this.refresh();
+					project.id = this.projectId;
-				projectLabel = this.route.snapshot.queryParams.projectLabel;
+					this.criteria.setCriteria({ like: null, projects: [project], groupIds: null, allVersions: false });
-				this.breadCrumbs = Observable.of([{ parentComponentName: 'ProjectEditorComponent', label: projectLabel, url: '/projects/edit/' + this.projectId }]);
+					this.refresh();
-				this.criteria.setRefreshCallback(() => this.refresh());
+					projectLabel = this.route.snapshot.queryParams.projectLabel;
-			} else {
+					this.breadCrumbs = Observable.of([{ parentComponentName: 'ProjectEditorComponent', label: projectLabel, url: '/projects/edit/' + this.projectId }]);
-				this.itemId = params['groupId'];
+					this.criteria.setRefreshCallback(() => this.refresh());
-				this.showProject = true;
+				} else {
-				const breadCrumbs = [];
+					this.itemId = params['groupId'];
+					this.showProject = true;
+					const breadCrumbs = [];
 
-				if (this.itemId) {
+					if (this.itemId) {
-					const dmplabel = this.route.snapshot.queryParams.groupLabel;
+						const dmplabel = this.route.snapshot.queryParams.groupLabel;
-					breadCrumbs.push(
+						breadCrumbs.push(
-						{ parentComponentName: null, label: 'DMPs', url: '/dmps' },
+							{ parentComponentName: null, label: 'DMPs', url: '/dmps' },
-					);
+						);
+					}
+					//else breadCrumbs.push({ parentComponentName: null, label: 'DMPs', url: "/dmps" })
+					this.breadCrumbs = Observable.of(breadCrumbs);
+
+					this.criteria.setCriteria(this.getDefaultCriteria());
+					this.refresh();
+					this.criteria.setRefreshCallback(() => this.refresh());
 				}
-				//else breadCrumbs.push({ parentComponentName: null, label: 'DMPs', url: "/dmps" })
-				this.breadCrumbs = Observable.of(breadCrumbs);
 
-				this.criteria.setCriteria(this.getDefaultCriteria());
+				if (this.projectId != null) {
-				this.refresh();
+					if (projectLabel !== undefined) {
-				this.criteria.setRefreshCallback(() => this.refresh());
+						this.titlePrefix = 'for ' + projectLabel;
-			}
+					}
-
-			if (this.projectId != null) {
-				if (projectLabel !== undefined) {
-					this.titlePrefix = 'for ' + projectLabel;
 				}
-			}
+			});
-		});
 
 	}
 

dmp-frontend/src/app/dmps/wizard/dmp-wizard.component.ts

@@ -1,22 +1,25 @@
-import { BaseErrorModel } from '../../models/error/BaseErrorModel';
-import { SnackBarNotificationComponent } from '../../shared/components/notificaiton/snack-bar-notification.component';
-import { JsonSerializer } from '../../utilities/JsonSerializer';
-import { DataManagementPlanModel } from '../../models/data-managemnt-plans/DataManagementPlanModel';
-import { DataManagementPlanService } from '../../services/data-management-plan/data-management-plan.service';
 import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute, Params, Router } from '@angular/router';
 import { FormGroup } from '@angular/forms';
 import { MatSnackBar } from '@angular/material';
+import { ActivatedRoute, Params, Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
-import { IBreadCrumbComponent } from '../../shared/components/breadcrumb/definition/IBreadCrumbComponent';
 import { Observable } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { BaseComponent } from '../../core/common/base/base.component';
+import { DataManagementPlanModel } from '../../models/data-managemnt-plans/DataManagementPlanModel';
+import { BaseErrorModel } from '../../models/error/BaseErrorModel';
+import { DataManagementPlanService } from '../../services/data-management-plan/data-management-plan.service';
 import { BreadcrumbItem } from '../../shared/components/breadcrumb/definition/breadcrumb-item';
+import { IBreadCrumbComponent } from '../../shared/components/breadcrumb/definition/IBreadCrumbComponent';
+import { SnackBarNotificationComponent } from '../../shared/components/notificaiton/snack-bar-notification.component';
+import { JsonSerializer } from '../../utilities/JsonSerializer';
+
 @Component({
 	selector: 'app-dmp-wizard-component',
 	templateUrl: 'dmp-wizard.component.html',
 	styleUrls: ['./dmp-wizard.component.scss'],
 })
-export class DataManagementPlanWizardComponent implements OnInit, IBreadCrumbComponent {
+export class DataManagementPlanWizardComponent extends BaseComponent implements OnInit, IBreadCrumbComponent {
 	breadCrumbs: Observable<BreadcrumbItem[]>;
 	constructor(
 		private dataManagementPlanService: DataManagementPlanService,
@@ -24,7 +27,7 @@ export class DataManagementPlanWizardComponent implements OnInit, IBreadCrumbCom
 		public snackBar: MatSnackBar,
 		public route: ActivatedRoute,
 		private router: Router
-	) { }
+	) { super(); }
 
 	public itemId: string;
 	public dataManagementPlan: DataManagementPlanModel;
@@ -33,30 +36,37 @@ export class DataManagementPlanWizardComponent implements OnInit, IBreadCrumbCom
 
 	ngOnInit(): void {
 
-		this.route.params.subscribe((params: Params) => {
+		this.route.params
-			this.itemId = params['id'];
+			.pipe(takeUntil(this._destroyed))
-			this.dataManagementPlanService.getSingle(this.itemId).map(data => data as DataManagementPlanModel)
+			.subscribe((params: Params) => {
-				.subscribe(data => {
+				this.itemId = params['id'];
-					this.dataManagementPlan = JsonSerializer.fromJSONObject(data, DataManagementPlanModel);
+				this.dataManagementPlanService.getSingle(this.itemId).map(data => data as DataManagementPlanModel)
-					this.isClone = this.route.snapshot.data.clone;
+					.pipe(takeUntil(this._destroyed))
-					if (this.isClone === false) { this.dataManagementPlan.version = this.dataManagementPlan.version + 1; }
+					.subscribe(data => {
-					this.formGroup = this.dataManagementPlan.buildForm();
+						this.dataManagementPlan = JsonSerializer.fromJSONObject(data, DataManagementPlanModel);
-				});
+						this.isClone = this.route.snapshot.data.clone;
-		});
+						if (this.isClone === false) { this.dataManagementPlan.version = this.dataManagementPlan.version + 1; }
+						this.formGroup = this.dataManagementPlan.buildForm();
+					});
+			});
 	}
 
 
 	submit() {
 		if (this.isClone) {
-			this.dataManagementPlanService.clone(this.formGroup.getRawValue(), this.itemId).subscribe(
+			this.dataManagementPlanService.clone(this.formGroup.getRawValue(), this.itemId)
-				complete => this.onCallbackSuccess(),
+				.pipe(takeUntil(this._destroyed))
-				error => this.onCallbackError(error)
+				.subscribe(
-			);
+					complete => this.onCallbackSuccess(),
+					error => this.onCallbackError(error)
+				);
 		} else {
-			this.dataManagementPlanService.newVersion(this.formGroup.getRawValue(), this.itemId).subscribe(
+			this.dataManagementPlanService.newVersion(this.formGroup.getRawValue(), this.itemId)
-				complete => this.onCallbackSuccess(),
+				.pipe(takeUntil(this._destroyed))
-				error => this.onCallbackError(error)
+				.subscribe(
-			);
+					complete => this.onCallbackSuccess(),
+					error => this.onCallbackError(error)
+				);
 		}
 	}
 

dmp-frontend/src/app/dmps/wizard/editor/dmp-wizard-editor.component.html

@@ -5,15 +5,15 @@
 				<mat-form-field class="full-width">
 					<input matInput placeholder="{{'DMP-EDITOR.FIELDS.NAME' | translate}}" type="text" name="label" formControlName="label"
 					 required [attr.disabled]="labelDisabled">
-					<mat-error *ngIf="formGroup.get('label').errors?.backendError">{{baseErrorModel.label}}</mat-error>
+					<mat-error *ngIf="formGroup.get('label').hasError('backendError')">{{baseErrorModel.label}}</mat-error>
-					<mat-error *ngIf="formGroup.get('label').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+					<mat-error *ngIf="formGroup.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 				</mat-form-field>
 
 				<mat-form-field class="full-width">
 					<textarea matInput class="description-area" placeholder="{{'DMP-EDITOR.FIELDS.DESCRIPTION' | translate}}"
 					 formControlName="description" required></textarea>
-					<mat-error *ngIf="formGroup.get('description').errors?.backendError">{{errorModel.description}}</mat-error>
+					<mat-error *ngIf="formGroup.get('description').hasError('backendError')">{{errorModel.description}}</mat-error>
-					<mat-error *ngIf="formGroup.get('description').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+					<mat-error *ngIf="formGroup.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 				</mat-form-field>
 
 				<div class="col-md-6">

dmp-frontend/src/app/dmps/wizard/editor/dmp-wizard-editor.component.ts

@@ -1,28 +1,26 @@
-import { DatasetProfileModel } from '../../../models/datasets/DatasetProfileModel';
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
-import { BaseErrorModel } from '../../../models/error/BaseErrorModel';
-import { SnackBarNotificationComponent } from '../../../shared/components/notificaiton/snack-bar-notification.component';
-import { JsonSerializer } from '../../../utilities/JsonSerializer';
-import { RequestItem } from '../../../models/criteria/RequestItem';
-import { ProjectCriteria } from '../../../models/criteria/project/ProjectCriteria';
-import { DmpUsersModel } from '../../../models/dmpUsers/DmpUsersModel';
-import { ExternalSourcesItemModel } from '../../../models/external-sources/ExternalSourcesItemModel';
-import { DataManagementPlanModel } from '../../../models/data-managemnt-plans/DataManagementPlanModel';
-import { ProjectService } from '../../../services/project/project.service';
-import { ExternalSourcesService } from '../../../services/external-sources/external-sources.service';
-import { DataManagementPlanService } from '../../../services/data-management-plan/data-management-plan.service';
-import { Component, ViewChild, OnInit, AfterViewInit, ViewEncapsulation, Input } from '@angular/core';
-import { MatPaginator, MatSort, MatSnackBar } from '@angular/material';
-import { Router, ActivatedRoute, Params } from '@angular/router';
-import { TranslateService } from '@ngx-translate/core';
-import { DataSource } from '@angular/cdk/table';
-import { Observable } from 'rxjs';
 import { FormGroup } from '@angular/forms';
+import { MatSnackBar } from '@angular/material';
+import { ActivatedRoute, Router } from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
+import { Observable } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { BaseComponent } from '../../../core/common/base/base.component';
 import { BaseCriteria } from '../../../models/criteria/BaseCriteria';
-import { SingleAutoCompleteConfiguration } from '../../../shared/components/autocompletes/single/single-auto-complete-configuration';
-import { LanguageResolverService } from '../../../services/language-resolver/language-resolver.service';
-import { MultipleAutoCompleteConfiguration } from '../../../shared/components/autocompletes/multiple/multiple-auto-complete-configuration';
 import { DatasetProfileCriteria } from '../../../models/criteria/dataset-profile/DatasetProfileCriteria';
-
+import { ProjectCriteria } from '../../../models/criteria/project/ProjectCriteria';
+import { RequestItem } from '../../../models/criteria/RequestItem';
+import { DatasetProfileModel } from '../../../models/datasets/DatasetProfileModel';
+import { DmpUsersModel } from '../../../models/dmpUsers/DmpUsersModel';
+import { BaseErrorModel } from '../../../models/error/BaseErrorModel';
+import { ExternalSourcesItemModel } from '../../../models/external-sources/ExternalSourcesItemModel';
+import { DataManagementPlanService } from '../../../services/data-management-plan/data-management-plan.service';
+import { ExternalSourcesService } from '../../../services/external-sources/external-sources.service';
+import { LanguageResolverService } from '../../../services/language-resolver/language-resolver.service';
+import { ProjectService } from '../../../services/project/project.service';
+import { MultipleAutoCompleteConfiguration } from '../../../shared/components/autocompletes/multiple/multiple-auto-complete-configuration';
+import { SingleAutoCompleteConfiguration } from '../../../shared/components/autocompletes/single/single-auto-complete-configuration';
+import { SnackBarNotificationComponent } from '../../../shared/components/notificaiton/snack-bar-notification.component';
 
 @Component({
 	selector: 'app-dmp-wizard-editor-component',
@@ -30,7 +28,7 @@ import { DatasetProfileCriteria } from '../../../models/criteria/dataset-profile
 	styleUrls: ['./dmp-wizard-editor.component.scss'],
 	encapsulation: ViewEncapsulation.None
 })
-export class DataManagementPlanWizardEditorComponent implements OnInit {
+export class DataManagementPlanWizardEditorComponent extends BaseComponent implements OnInit {
 
 
 	isNew = true;
@@ -62,7 +60,7 @@ export class DataManagementPlanWizardEditorComponent implements OnInit {
 		private _service: DataManagementPlanService,
 		private languageResolverService: LanguageResolverService
 	) {
-
+		super();
 	}
 
 	ngOnInit() {
@@ -106,12 +104,14 @@ export class DataManagementPlanWizardEditorComponent implements OnInit {
 		const organisationRequestItem: RequestItem<BaseCriteria> = new RequestItem();
 		organisationRequestItem.criteria = new BaseCriteria();
 
-		this.route.data.subscribe(value => {
+		this.route.data
-			if (value.clone === false && this.formGroup.get('label').value) {
+			.pipe(takeUntil(this._destroyed))
-				this.labelDisabled = true;
+			.subscribe(value => {
-			}
+				if (value.clone === false && this.formGroup.get('label').value) {
-			this.formGroup.controls['version'].disable();
+					this.labelDisabled = true;
-		});
+				}
+				this.formGroup.controls['version'].disable();
+			});
 	}
 
 	searchProject(query: string) {
@@ -132,10 +132,12 @@ export class DataManagementPlanWizardEditorComponent implements OnInit {
 	}
 
 	onSubmit(): void {
-		this.dataManagementPlanService.createDataManagementPlan(this.formGroup.getRawValue()).subscribe(
+		this.dataManagementPlanService.createDataManagementPlan(this.formGroup.getRawValue())
-			complete => this.onCallbackSuccess(),
+			.pipe(takeUntil(this._destroyed))
-			error => this.onCallbackError(error)
+			.subscribe(
-		);
+				complete => this.onCallbackSuccess(),
+				error => this.onCallbackError(error)
+			);
 	}
 
 	onCallbackSuccess(): void {

dmp-frontend/src/app/dmps/wizard/listing/dataset-wizard-listing.component.ts

@@ -1,29 +1,25 @@
-import { DataTableData } from '../../../models/data-table/DataTableData';
+import { SelectionModel } from '@angular/cdk/collections';
-import { JsonSerializer } from '../../../utilities/JsonSerializer';
+import { Component, Input, OnInit, ViewChild } from '@angular/core';
+import { FormArray, FormBuilder, FormControl, FormGroup } from '@angular/forms';
+import { MatPaginator, MatSnackBar, MatSort } from '@angular/material';
+import { ActivatedRoute, Params, Router } from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
+import { takeUntil } from 'rxjs/operators';
+import { BaseComponent } from '../../../core/common/base/base.component';
+import { DatasetCriteria } from '../../../models/criteria/dataset/DatasetCriteria';
 import { DataTableRequest } from '../../../models/data-table/DataTableRequest';
 import { DatasetListingModel } from '../../../models/datasets/DatasetListingModel';
-import { DatasetCriteria } from '../../../models/criteria/dataset/DatasetCriteria';
-import { DataManagementPlanModel } from '../../../models/data-managemnt-plans/DataManagementPlanModel';
-import { DatasetCriteriaComponent } from '../../../shared/components/criteria/datasets/datasets-criteria.component';
 import { DataManagementPlanService } from '../../../services/data-management-plan/data-management-plan.service';
 import { DatasetService } from '../../../services/dataset/dataset.service';
-import { Component, ViewChild, OnInit, AfterViewInit, Input } from '@angular/core';
+import { DatasetCriteriaComponent } from '../../../shared/components/criteria/datasets/datasets-criteria.component';
-import { MatPaginator, MatSort, MatSnackBar } from '@angular/material';
+import { JsonSerializer } from '../../../utilities/JsonSerializer';
-import { Router, Params, ActivatedRoute } from '@angular/router';
-import { TranslateService } from '@ngx-translate/core';
-import { DataSource } from '@angular/cdk/table';
-import { FormGroup, FormBuilder, FormControl, FormArray } from '@angular/forms';
-import { Observable } from 'rxjs';
-import { PageEvent } from '@angular/material';
-import { SelectionModel } from '@angular/cdk/collections';
-
 
 @Component({
 	selector: 'app-dataset-wizard-listing-component',
 	templateUrl: 'dataset-wizard-listing.component.html',
 	styleUrls: ['./dataset-wizard-listing.component.scss'],
 })
-export class DatasetWizardListingComponent implements OnInit {
+export class DatasetWizardListingComponent extends BaseComponent implements OnInit {
 
 	@ViewChild(MatPaginator) _paginator: MatPaginator;
 	@ViewChild(MatSort) sort: MatSort;
@@ -50,24 +46,28 @@ export class DatasetWizardListingComponent implements OnInit {
 		public route: ActivatedRoute,
 		public dataManagementPlanService: DataManagementPlanService
 	) {
-
+		super();
 	}
 
 
 	ngOnInit() {
-		this.route.params.subscribe((params: Params) => {
+		this.route.params
-			if (this.dmpId != null) {
+			.pipe(takeUntil(this._destroyed))
-				if (params['dmpLabel'] !== undefined) {
+			.subscribe((params: Params) => {
-					this.titlePrefix = 'for ' + params['dmpLabel'];
+				if (this.dmpId != null) {
+					if (params['dmpLabel'] !== undefined) {
+						this.titlePrefix = 'for ' + params['dmpLabel'];
+					}
 				}
-			}
+			});
-		});
 		const request: DataTableRequest<DatasetCriteria> = new DataTableRequest<DatasetCriteria>(null, null, null);
 		request.criteria = new DatasetCriteria();
 		request.criteria.dmpIds = [this.dmpId];
-		this.datasetService.getPaged(request).subscribe(items => {
+		this.datasetService.getPaged(request)
-			this.datasets = JsonSerializer.fromJSONArray(items.data, DatasetListingModel);
+			.pipe(takeUntil(this._destroyed))
-		});
+			.subscribe(items => {
+				this.datasets = JsonSerializer.fromJSONArray(items.data, DatasetListingModel);
+			});
 		this.formGroup.addControl('datasets', new FormBuilder().array(new Array<FormControl>()));
 	}
 
@@ -78,5 +78,4 @@ export class DatasetWizardListingComponent implements OnInit {
 			(<FormArray>this.formGroup.get('datasets')).push(new FormBuilder().group({ id: element.value }));
 		});
 	}
-
 }

dmp-frontend/src/app/form/dynamic-fields/dynamic-field-dropdown/dynamic-field-dropdown.html

@@ -3,7 +3,7 @@
 		<mat-select formControlName="value" [required]="field.validationRequired">
 			<mat-option *ngFor="let opt of field.data.options" [value]="assign(opt)">{{opt.label}}</mat-option>
 		</mat-select>
-		<mat-error *ngIf="form.get('value').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+		<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 	</mat-form-field>
 
 </div>

dmp-frontend/src/app/form/dynamic-fields/dynamic-form-field.component.ts

@@ -1,10 +1,11 @@
-import { Field } from '../../models/Field';
+import { Component, Input, OnChanges, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { Component, Input, OnInit, ViewEncapsulation, ChangeDetectionStrategy, OnChanges, OnDestroy } from '@angular/core';
+import { FormGroup } from '@angular/forms';
-import { FormGroup, ValidatorFn, AbstractControl, Validators } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
-import { VisibilityRulesService } from '../../utilities/visibility-rules/visibility-rules.service';
 import { Subscription } from 'rxjs';
-
+import { takeUntil } from 'rxjs/operators';
+import { BaseComponent } from '../../core/common/base/base.component';
+import { Field } from '../../models/Field';
+import { VisibilityRulesService } from '../../utilities/visibility-rules/visibility-rules.service';
 
 @Component({
 	selector: 'app-df-field',
@@ -15,24 +16,28 @@ import { Subscription } from 'rxjs';
 	],
 	encapsulation: ViewEncapsulation.None
 })
-
+export class DynamicFormFieldComponent extends BaseComponent implements OnInit, OnChanges, OnDestroy {
-export class DynamicFormFieldComponent implements OnInit, OnChanges, OnDestroy {
 	@Input() field: Field;
 	form: FormGroup;
 
 	change: Subscription;
 	trackByFn = (index, item) => item ? item['id'] : null;
 
-	constructor(private route: ActivatedRoute, public visibilityRulesService: VisibilityRulesService) {
+	constructor(
-
+		private route: ActivatedRoute,
+		public visibilityRulesService: VisibilityRulesService
+	) {
+		super();
 	}
 
 	ngOnInit() {
 		if (this.field) {
 			this.form = this.visibilityRulesService.getFormGroup(this.field.id);
-			this.change = this.form.get('value').valueChanges.subscribe(item => {
+			this.change = this.form.get('value').valueChanges
-				this.visibilityRulesService.updateValueAndVisibility(this.field.id);
+				.pipe(takeUntil(this._destroyed))
-			});
+				.subscribe(item => {
+					this.visibilityRulesService.updateValueAndVisibility(this.field.id);
+				});
 		}
 	}
 

dmp-frontend/src/app/form/dynamic-form/dynamic-form.component.ts

@@ -1,22 +1,20 @@
-import { Section } from '../../models/Section';
+import { AfterViewInit, Component, Input, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
-import { JsonSerializer } from '../../utilities/JsonSerializer';
+import { FormGroup } from '@angular/forms';
-import { Rule } from '../../models/Rule';
+import { MatStepper } from '@angular/material';
-import { DatasetWizardService } from '../../services/dataset-wizard/dataset-wizard.service';
+import { ActivatedRoute, Router } from '@angular/router';
-import { BaseHttpService } from '../../utilities/cite-http-service-module/base-http.service';
+import 'rxjs/add/operator/switchMap';
-import { VisibilityRulesService } from '../../utilities/visibility-rules/visibility-rules.service';
+import { takeUntil } from 'rxjs/operators';
+import { BaseComponent } from '../../core/common/base/base.component';
+import { CompositeField } from '../../models/CompositeField';
 import { DatasetProfileDefinitionModel } from '../../models/DatasetProfileDefinitionModel';
 import { DatasetWizardModel } from '../../models/datasets/DatasetWizardModel';
-import { Component, Input, OnInit, ViewEncapsulation, AfterViewInit, ViewChild } from '@angular/core';
-import { FormGroup } from '@angular/forms';
-import { Router, ActivatedRoute } from '@angular/router';
-import 'rxjs/add/operator/switchMap';
-import '../../utilities/enhancers/flatJoinOn';
-import { Location } from '@angular/common';
-import { MarkForConsiderationService } from '../../utilities/mark-for-considerations/mark-for-consideration.service';
-import { FormFocusService } from '../../utilities/form-focus-service/form-focus.service';
-import { CompositeField } from '../../models/CompositeField';
 import { Pair } from '../../models/helpers/Pair';
-import { MatStepper } from '@angular/material';
+import { Rule } from '../../models/Rule';
+import { Section } from '../../models/Section';
+import '../../utilities/enhancers/flatJoinOn';
+import { FormFocusService } from '../../utilities/form-focus-service/form-focus.service';
+import { JsonSerializer } from '../../utilities/JsonSerializer';
+import { VisibilityRulesService } from '../../utilities/visibility-rules/visibility-rules.service';
 
 @Component({
 	selector: 'app-dynamic-form',
@@ -29,7 +27,7 @@ import { MatStepper } from '@angular/material';
 	],
 	encapsulation: ViewEncapsulation.None,
 })
-export class DynamicFormComponent implements OnInit, AfterViewInit {
+export class DynamicFormComponent extends BaseComponent implements OnInit, AfterViewInit {
 
 	pathName: string;
 	pages: Array<number>;
@@ -55,6 +53,7 @@ export class DynamicFormComponent implements OnInit, AfterViewInit {
 		private visibilityRulesService: VisibilityRulesService,
 		private formFocusService: FormFocusService
 	) {
+		super();
 		//this.datasetId = route.snapshot.params['id'];
 	}
 
@@ -82,19 +81,23 @@ export class DynamicFormComponent implements OnInit, AfterViewInit {
 
 		//const fields = compositeFieldsUnion.flatJoinOn(x => x.right);
 		this.formFocusService.setFields(compositeFieldsUnion);
-		this.route.fragment.subscribe((fragment: string) => {
+		this.route.fragment
-			const self = this;
+			.pipe(takeUntil(this._destroyed))
-			setTimeout(function () { self.scrollTo(fragment); });
+			.subscribe((fragment: string) => {
-		});
+				const self = this;
+				setTimeout(function () { self.scrollTo(fragment); });
+			});
 	}
 
 	ngAfterViewInit() {
 		this.visibilityRulesService.triggerVisibilityEvaluation();
-		this.route.queryParams.subscribe((params) => {
+		this.route.queryParams
-			if (params && 'page' in params) {
+			.pipe(takeUntil(this._destroyed))
-				this.changeCurrentPage(params['page']);
+			.subscribe((params) => {
-			}
+				if (params && 'page' in params) {
-		});
+					this.changeCurrentPage(params['page']);
+				}
+			});
 	}
 
 

dmp-frontend/src/app/form/pprogress-bar/progress-bar.component.ts

@@ -1,26 +1,28 @@
-import { VisibilityRulesService } from '../../utilities/visibility-rules/visibility-rules.service';
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
-import { ViewEncapsulation } from '@angular/core';
+import { FormArray, FormGroup } from '@angular/forms';
+import { takeUntil } from 'rxjs/operators';
+import { BaseComponent } from '../../core/common/base/base.component';
+import { VisibilityRulesService } from '../../utilities/visibility-rules/visibility-rules.service';
 
-import { Component, Input, OnInit } from '@angular/core';
-import { FormGroup, FormControl, FormArray } from '@angular/forms';
 @Component({
 	selector: 'app-progress-bar',
 	templateUrl: './progress-bar.component.html',
 	styles: ['.alwaysVisible .ui-progressbar-label { display:block!important; }'],
 	encapsulation: ViewEncapsulation.None
 })
-export class ProgressBarComponent implements OnInit {
+export class ProgressBarComponent extends BaseComponent implements OnInit {
 	@Input() formGroup: FormGroup;
 	@Input() public progressValueAccuracy = 1;
 	determinateProgressValue: number;
 
-	constructor(private visibilityRulesService: VisibilityRulesService) { }
+	constructor(private visibilityRulesService: VisibilityRulesService) { super(); }
 
 	public value = 0;
 	ngOnInit() {
 		this.calculateValueForProgressbar();
 		this.formGroup
 			.valueChanges
+			.pipe(takeUntil(this._destroyed))
 			.subscribe(control => {
 				this.calculateValueForProgressbar();
 			});

dmp-frontend/src/app/homepage/homepage.component.html

@@ -1,88 +1,85 @@
 <div class="main-panel" id="main-panel">
-  <div>
+	<div>
-    <div class="row" style="margin-top: 30px">
+		<div class="row" style="margin-top: 30px">
-      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 col-md-offset-1">
+			<div class="col"></div>
-        <h3 *ngIf="!this.isAuthenticated()">{{ 'HOMEPAGE.OPEN-DMPS.STATS' | translate }}</h3>
+			<div class="col-auto">
-        <h3 *ngIf="this.isAuthenticated()">{{ 'HOMEPAGE.MY-DMPS.STATS' | translate }}</h3>
+				<h3 *ngIf="!this.isAuthenticated()">{{ 'HOMEPAGE.OPEN-DMPS.STATS' | translate }}</h3>
-      </div>
+				<h3 *ngIf="this.isAuthenticated()">{{ 'HOMEPAGE.MY-DMPS.STATS' | translate }}</h3>
-    </div>
+			</div>
-
+			<div class="col"></div>
-  </div>
+		</div>
-  <div class="row" style="margin-top: 30px">
+	</div>
-    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 col-md-offset-1">
+	<div class="row" style="margin-top: 30px">
-      <app-figurecard title={{dashboardStatisticsData.totalDataManagementPlanCount}} headerIcon="mode_edit" [category]="this.isAuthenticated() ? 'DASHBOARD.MY-DMPS' : 'DASHBOARD.DMPS' "
+		<div class="col"></div>
-        routelLink='/dmps' buttonRedirectLink="/dmps/new" buttonTitle="Create New DMP" footerIcon="open_in_new" linearColor="linear-gradient(60deg, #ef5350, #e53935)"
+		<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
-        boxShadow="0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(244, 67, 54, 0.4)">
+			<app-figurecard title={{dashboardStatisticsData.totalDataManagementPlanCount}} headerIcon="mode_edit" [category]="this.isAuthenticated() ? 'DASHBOARD.MY-DMPS' : 'DASHBOARD.DMPS' " routelLink='/dmps' buttonRedirectLink="/dmps/new" buttonTitle="Create New DMP" footerIcon="open_in_new" linearColor="linear-gradient(60deg, #ef5350, #e53935)" boxShadow="0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(244, 67, 54, 0.4)">
-      </app-figurecard>
+			</app-figurecard>
-      <mat-card *ngIf="this.isAuthenticated()" class="example-card">
+			<mat-card *ngIf="this.isAuthenticated()" class="example-card">
-        <mat-card-header>
+				<mat-card-header>
-          <mat-card-title>
+					<mat-card-title>
-            {{'RECENT-ACTIVITY.MY-TITLE-DMP' | translate}}
+						{{'RECENT-ACTIVITY.MY-TITLE-DMP' | translate}}
-          </mat-card-title>
+					</mat-card-title>
-        </mat-card-header>
+				</mat-card-header>
-        <mat-card-content>
+				<mat-card-content>
-          <mat-nav-list *ngIf="dmpActivities!=null">
+					<mat-nav-list *ngIf="dmpActivities!=null">
-            <mat-list-item (click)="redirect(activity.id,RecentActivityTypes.DMP)" *ngFor="let activity of dmpActivities">
+						<mat-list-item (click)="redirect(activity.id,RecentActivityTypes.DMP)" *ngFor="let activity of dmpActivities">
-              <p mat-line>
+							<p mat-line>
-                {{activity.label}}
+								{{activity.label}}
-              </p>
+							</p>
-              <p mat-line>
+							<p mat-line>
-                {{activity.timestamp | date:'shortDate'}}
+								{{activity.timestamp | date:'shortDate'}}
-              </p>
+							</p>
-            </mat-list-item>
+						</mat-list-item>
-          </mat-nav-list>
+					</mat-nav-list>
-        </mat-card-content>
+				</mat-card-content>
-      </mat-card>
+			</mat-card>
-    </div>
+		</div>
-    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 ">
+		<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 ">
-      <app-figurecard title={{dashboardStatisticsData.totalProjectCount}} headerIcon="list" [category]="this.isAuthenticated() ? 'DASHBOARD.MY-PROJECTS' : 'DASHBOARD.PROJECTS' "
+			<app-figurecard title={{dashboardStatisticsData.totalProjectCount}} headerIcon="list" [category]="this.isAuthenticated() ? 'DASHBOARD.MY-PROJECTS' : 'DASHBOARD.PROJECTS' " routelLink='/projects' buttonRedirectLink="/projects/new" buttonTitle="Create New Project" footerIcon="open_in_new" linearColor="linear-gradient(60deg, #ffa726, #fb8c00)" boxShadow="0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(255, 152, 0, 0.4)">
-        routelLink='/projects' buttonRedirectLink="/projects/new" buttonTitle="Create New Project" footerIcon="open_in_new"
+			</app-figurecard>
-        linearColor="linear-gradient(60deg, #ffa726, #fb8c00)" boxShadow="0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(255, 152, 0, 0.4)">
+			<mat-card *ngIf="this.isAuthenticated()" class="example-card">
-      </app-figurecard>
+				<mat-card-header>
-      <mat-card *ngIf="this.isAuthenticated()" class="example-card">
+					<mat-card-title>
-        <mat-card-header>
+						{{'RECENT-ACTIVITY.MY-TITLE-PROJECT' | translate}}
-          <mat-card-title>
+					</mat-card-title>
-            {{'RECENT-ACTIVITY.MY-TITLE-PROJECT' | translate}}
+				</mat-card-header>
-          </mat-card-title>
+				<mat-card-content>
-        </mat-card-header>
+					<mat-nav-list *ngIf="projectActivities!=null">
-        <mat-card-content>
+						<mat-list-item (click)="redirect(activity.id,RecentActivityTypes.PROJECT)" *ngFor="let activity of projectActivities">
-          <mat-nav-list *ngIf="projectActivities!=null">
+							<p mat-line>
-            <mat-list-item (click)="redirect(activity.id,RecentActivityTypes.PROJECT)" *ngFor="let activity of projectActivities">
+								{{activity.label}}
-              <p mat-line>
+							</p>
-                {{activity.label}}
+							<p mat-line>
-              </p>
+								{{activity.timestamp | date:'shortDate'}}
-              <p mat-line>
+							</p>
-                {{activity.timestamp | date:'shortDate'}}
+						</mat-list-item>
-              </p>
+					</mat-nav-list>
-            </mat-list-item>
+				</mat-card-content>
-          </mat-nav-list>
+			</mat-card>
-        </mat-card-content>
+		</div>
-      </mat-card>
+		<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
-    </div>
+			<app-figurecard title={{dashboardStatisticsData.totalDataSetCount}} headerIcon="subject" [category]="this.isAuthenticated() ? 'DASHBOARD.MY-DATASETS' : 'DASHBOARD.DATASETS'" routelLink='/datasets' buttonRedirectLink="/datasets/new" buttonTitle="Create New Dataset" footerIcon="open_in_new" linearColor="linear-gradient(60deg, #26c6da, #00acc1)" boxShadow="0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(0, 188, 212, 0.4)">
-    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
+			</app-figurecard>
-      <app-figurecard title={{dashboardStatisticsData.totalDataSetCount}} headerIcon="subject" [category]="this.isAuthenticated() ? 'DASHBOARD.MY-DATASETS' : 'DASHBOARD.DATASETS'"
+			<mat-card *ngIf="this.isAuthenticated()" class="example-card">
-        routelLink='/datasets' buttonRedirectLink="/datasets/new" buttonTitle="Create New Dataset" footerIcon="open_in_new"
+				<mat-card-header>
-        linearColor="linear-gradient(60deg, #26c6da, #00acc1)" boxShadow="0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(0, 188, 212, 0.4)">
+					<mat-card-title>
-      </app-figurecard>
+						{{'RECENT-ACTIVITY.MY-TITLE-DATASET' | translate}}
-      <mat-card *ngIf="this.isAuthenticated()" class="example-card">
+					</mat-card-title>
-        <mat-card-header>
+				</mat-card-header>
-          <mat-card-title>
+				<mat-card-content>
-            {{'RECENT-ACTIVITY.MY-TITLE-DATASET' | translate}}
+					<mat-nav-list *ngIf="datasetActivities!=null">
-          </mat-card-title>
+						<mat-list-item (click)="redirect(activity.id,RecentActivityTypes.DATASET)" *ngFor="let activity of datasetActivities">
-        </mat-card-header>
+							<p mat-line>
-        <mat-card-content>
+								{{activity.label}}
-          <mat-nav-list *ngIf="datasetActivities!=null">
+							</p>
-            <mat-list-item (click)="redirect(activity.id,RecentActivityTypes.DATASET)" *ngFor="let activity of datasetActivities">
+							<p mat-line>
-              <p mat-line>
+								{{activity.timestamp | date:'shortDate'}}
-                {{activity.label}}
+							</p>
-              </p>
+						</mat-list-item>
-              <p mat-line>
+					</mat-nav-list>
-                {{activity.timestamp | date:'shortDate'}}
+				</mat-card-content>
-              </p>
+			</mat-card>
-            </mat-list-item>
+		</div>
-          </mat-nav-list>
+		<div class="col"></div>
-        </mat-card-content>
+	</div>
-      </mat-card>
-    </div>
-  </div>
 </div>

dmp-frontend/src/app/homepage/homepage.component.ts

@@ -1,19 +1,21 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
-import { Router, ActivatedRoute } from '@angular/router';
-import { DashboardService } from '../../app/services/dashboard/dashboard.service';
-import { DashboardStatisticsModel } from '../models/dashboard/DashboardStatisticsModel';
-import { JsonSerializer } from '../utilities/JsonSerializer';
-import { AuthService } from '../services/auth/auth.service';
 import { FormControl } from '@angular/forms';
-import { RequestItem } from '../models/criteria/RequestItem';
+import { ActivatedRoute, Router } from '@angular/router';
-import { ProjectCriteria } from '../models/criteria/project/ProjectCriteria';
-import { ProjectService } from '../services/project/project.service';
-import { SingleAutoCompleteConfiguration } from '../shared/components/autocompletes/single/single-auto-complete-configuration';
-import { UserReferenceService } from '../services/user-reference/user-reference-data.service';
-import { RecentActivityTypes } from '../users/activity/RecentActivityTypes';
 import { Observable } from 'rxjs/internal/Observable';
+import { takeUntil } from 'rxjs/operators';
+import { DashboardService } from '../../app/services/dashboard/dashboard.service';
+import { BaseComponent } from '../core/common/base/base.component';
+import { ProjectCriteria } from '../models/criteria/project/ProjectCriteria';
+import { RequestItem } from '../models/criteria/RequestItem';
+import { DashboardStatisticsModel } from '../models/dashboard/DashboardStatisticsModel';
 import { SearchBarItem } from '../models/dashboard/SearchBarItem';
+import { AuthService } from '../services/auth/auth.service';
+import { ProjectService } from '../services/project/project.service';
+import { UserReferenceService } from '../services/user-reference/user-reference-data.service';
+import { SingleAutoCompleteConfiguration } from '../shared/components/autocompletes/single/single-auto-complete-configuration';
 import { SearchBarType } from '../shared/components/search-bar/types/search-bar-type';
+import { RecentActivityTypes } from '../users/activity/RecentActivityTypes';
+import { JsonSerializer } from '../utilities/JsonSerializer';
 
 @Component({
 	selector: 'app-homepage',
@@ -21,7 +23,7 @@ import { SearchBarType } from '../shared/components/search-bar/types/search-bar-
 	styleUrls: ['./homepage.component.scss'],
 	providers: [ProjectService, UserReferenceService]
 })
-export class HomepageComponent implements OnInit {
+export class HomepageComponent extends BaseComponent implements OnInit {
 
 	public userInfo: any;
 	datasetActivities: any[];
@@ -44,6 +46,7 @@ export class HomepageComponent implements OnInit {
 		private userReferenceService: UserReferenceService
 
 	) {
+		super();
 		this.dashboardStatisticsData.totalDataManagementPlanCount = 0;
 		this.dashboardStatisticsData.totalDataSetCount = 0;
 		this.dashboardStatisticsData.totalProjectCount = 0;
@@ -53,11 +56,13 @@ export class HomepageComponent implements OnInit {
 	ngOnInit() {
 
 		if (this.isAuthenticated()) {
-			this.userReferenceService.getRecentActivity().subscribe(response => {
+			this.userReferenceService.getRecentActivity()
-				this.datasetActivities = response['recentDatasetActivities'];
+				.pipe(takeUntil(this._destroyed))
-				this.dmpActivities = response['recentDmpActivities'];
+				.subscribe(response => {
-				this.projectActivities = response['recentProjectActivities'];
+					this.datasetActivities = response['recentDatasetActivities'];
-			});
+					this.dmpActivities = response['recentDmpActivities'];
+					this.projectActivities = response['recentProjectActivities'];
+				});
 		}
 
 		this.projectAutoCompleteConfiguration = {
@@ -70,14 +75,18 @@ export class HomepageComponent implements OnInit {
 		};
 
 		if (!this.isAuthenticated()) {
-			this.dashBoardService.getStatistics().subscribe(results => {
+			this.dashBoardService.getStatistics()
-				//let data = results['payload'];
+				.pipe(takeUntil(this._destroyed))
-				this.dashboardStatisticsData = JsonSerializer.fromJSONObject(results, DashboardStatisticsModel);
+				.subscribe(results => {
-			});
+					//let data = results['payload'];
+					this.dashboardStatisticsData = JsonSerializer.fromJSONObject(results, DashboardStatisticsModel);
+				});
 		} else {
-			this.dashBoardService.getStatisticsSpecificuser().subscribe(results => {
+			this.dashBoardService.getStatisticsSpecificuser()
-				this.dashboardStatisticsData = JsonSerializer.fromJSONObject(results, DashboardStatisticsModel);
+				.pipe(takeUntil(this._destroyed))
-			});
+				.subscribe(results => {
+					this.dashboardStatisticsData = JsonSerializer.fromJSONObject(results, DashboardStatisticsModel);
+				});
 		}
 
 		this.filteredOptions = this.searchControl.valueChanges.flatMap(x => {

dmp-frontend/src/app/projects/editor/project-editor.component.html

@@ -4,81 +4,81 @@
 	<form *ngIf="formGroup" (ngSubmit)="formSubmit()" [formGroup]="formGroup">
 		<mat-card>
 			<mat-card-header>
-				<table class="logo-table  col-md-12">
+				<div class="col-12 row">
-					<tr>
+					<table class="logo-table col-auto">
-						<td>
+						<tr>
-							<img mat-card-avatar (click)='imgFileInput.click()' *ngIf="!formGroup.get('files') || !formGroup.get('files').value"
+							<td>
-							 [src]="host+'files/any?type=jpg'">
+								<img mat-card-avatar (click)='imgFileInput.click()' *ngIf="!formGroup.get('files') || !formGroup.get('files').value" [src]="host+'files/any?type=jpg'">
-							<img mat-card-avatar (click)='imgFileInput.click()' *ngIf="formGroup.get('files') && formGroup.get('files').value"
+								<img mat-card-avatar (click)='imgFileInput.click()' *ngIf="formGroup.get('files') && formGroup.get('files').value" [src]="host+'files/'+formGroup.get('files').value[0].id+'?location='+formGroup.get('files').value[0].location+'&type='+formGroup.get('files').value[0].type">
-							 [src]="host+'files/'+formGroup.get('files').value[0].id+'?location='+formGroup.get('files').value[0].location+'&type='+formGroup.get('files').value[0].type">
+							</td>
-						</td>
+							<td>
-						<td>
+								<input class="hidden" type="file" #imgFileInput (change)="previewImage($event)" accept="image/*" />
-							<input class="hidden" type="file" #imgFileInput (change)="previewImage($event)" accept="image/*" />
+								<!-- <app-fileuploader-component [form]="formGroup.get('files')" [label]="'FILE-UPLOADER.PROJECT'" [fileUploader]="uploaderService"></app-fileuploader-component> -->
-							<!-- <app-fileuploader-component [form]="formGroup.get('files')" [label]="'FILE-UPLOADER.PROJECT'" [fileUploader]="uploaderService"></app-fileuploader-component> -->
+							</td>
-						</td>
+						</tr>
-					</tr>
+					</table>
-				</table>
+					<div class="col"></div>
-				<div class="fill-space"></div>
+					<div *ngIf="!isNew" class="project-editor-header-actions col-auto">
-				<div *ngIf="!isNew">
+						<div class="row actions-row">
-					<button *ngIf="!editMode && !isExternalProject()" mat-icon-button (click)="enableForm()">
+							<div class="col-auto" *ngIf="!editMode && !isExternalProject()">
-						<mat-icon class="mat-24">edit</mat-icon>
+								<button mat-icon-button (click)="enableForm()">
-					</button>
+									<mat-icon class="mat-24">edit</mat-icon>
-					<button *ngIf="editMode && !isExternalProject()" mat-icon-button (click)="disableForm()">
+								</button>
-						<mat-icon class="mat-24">lock</mat-icon>
+							</div>
-					</button>
+							<div class="col-auto" *ngIf="editMode && !isExternalProject()">
-					<button mat-button (click)="goToProjectDmps()">
+								<button mat-icon-button (click)="disableForm()">
-						<mat-icon class="mat-24">arrow_forward</mat-icon>
+									<mat-icon class="mat-24">lock</mat-icon>
-						<span>{{'PROJECT-EDITOR.ACTIONS.GO-TO-DMPS' | translate}}</span>
+								</button>
-					</button>
+							</div>
+							<div class="col-auto">
+								<button mat-button (click)="goToProjectDmps()">
+									<mat-icon class="mat-24">arrow_forward</mat-icon>
+									<span>{{'PROJECT-EDITOR.ACTIONS.GO-TO-DMPS' | translate}}</span>
+								</button>
+							</div>
+						</div>
+					</div>
 				</div>
 			</mat-card-header>
 			<mat-card-content>
 				<div class="row">
-
-
-
 					<mat-form-field class="col-md-12">
-						<input matInput placeholder="{{'PROJECT-EDITOR.FIELDS.LABEL' | translate}}" type="text" name="label"
+						<input matInput placeholder="{{'PROJECT-EDITOR.FIELDS.LABEL' | translate}}" type="text" name="label" formControlName="label" required>
-						 formControlName="label" required>
+						<mat-error *ngIf="formGroup.get('label').hasError('backendError')">{{baseErrorModel.label}}</mat-error>
-						<mat-error *ngIf="formGroup.get('label').errors?.backendError">{{baseErrorModel.label}}</mat-error>
+						<mat-error *ngIf="formGroup.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-						<mat-error *ngIf="formGroup.get('label').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 					</mat-form-field>
 
 					<mat-form-field class="col-md-6">
-						<input matInput placeholder="{{'PROJECT-EDITOR.FIELDS.ABBREVIATION' | translate}}" type="text" name="abbreviation"
+						<input matInput placeholder="{{'PROJECT-EDITOR.FIELDS.ABBREVIATION' | translate}}" type="text" name="abbreviation" formControlName="abbreviation">
-						 formControlName="abbreviation">
+						<mat-error *ngIf="formGroup.get('abbreviation').hasError('backendError')">{{baseErrorModel.abbreviation}}</mat-error>
-						<mat-error *ngIf="formGroup.get('abbreviation').errors?.backendError">{{baseErrorModel.abbreviation}}</mat-error>
 					</mat-form-field>
 
 					<mat-form-field class="col-md-6">
 						<input matInput placeholder="{{'PROJECT-EDITOR.FIELDS.URI' | translate}}" type="text" name="uri" formControlName="uri">
-						<mat-error *ngIf="formGroup.get('uri').errors?.backendError">{{baseErrorModel.uri}}</mat-error>
+						<mat-error *ngIf="formGroup.get('uri').hasError('backendError')">{{baseErrorModel.uri}}</mat-error>
-						<mat-error *ngIf="formGroup.get('uri').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+						<mat-error *ngIf="formGroup.get('uri').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 					</mat-form-field>
 
 					<mat-form-field class="col-md-6">
-						<input matInput (focus)="startDate.open()" (click)="startDate.open()" placeholder="{{'PROJECT-EDITOR.FIELDS.START' | translate}}"
+						<input matInput (focus)="startDate.open()" (click)="startDate.open()" placeholder="{{'PROJECT-EDITOR.FIELDS.START' | translate}}" class="table-input" [matDatepicker]="startDate" formControlName="startDate">
-						 class="table-input" [matDatepicker]="startDate" formControlName="startDate">
 						<mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
 						<mat-datepicker #startDate></mat-datepicker>
-						<mat-error *ngIf="formGroup.get('startDate').errors?.backendError">{{this.project.errorModel.startDate}}</mat-error>
+						<mat-error *ngIf="formGroup.get('startDate').hasError('backendError')">{{this.project.errorModel.startDate}}</mat-error>
-						<mat-error *ngIf="formGroup.get('startDate').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+						<mat-error *ngIf="formGroup.get('startDate').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 					</mat-form-field>
 
 					<mat-form-field class="col-md-6">
-						<input matInput (focus)="endDate.open()" (click)="endDate.open()" placeholder="{{'PROJECT-EDITOR.FIELDS.END' | translate}}"
+						<input matInput (focus)="endDate.open()" (click)="endDate.open()" placeholder="{{'PROJECT-EDITOR.FIELDS.END' | translate}}" class="table-input" [matDatepicker]="endDate" formControlName="endDate">
-						 class="table-input" [matDatepicker]="endDate" formControlName="endDate">
 						<mat-datepicker-toggle matSuffix [for]="endDate"></mat-datepicker-toggle>
 						<mat-datepicker #endDate></mat-datepicker>
-						<mat-error *ngIf="formGroup.get('endDate').errors?.backendError">{{baseErrorModel.endDate}}</mat-error>
+						<mat-error *ngIf="formGroup.get('endDate').hasError('backendError')">{{baseErrorModel.endDate}}</mat-error>
-						<mat-error *ngIf="formGroup.get('endDate').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+						<mat-error *ngIf="formGroup.get('endDate').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 					</mat-form-field>
 
 					<mat-form-field class="col-md-12">
-						<textarea matInput class="description-area" placeholder="{{'PROJECT-EDITOR.FIELDS.DESCRIPTION' | translate}}"
+						<textarea matInput class="description-area" placeholder="{{'PROJECT-EDITOR.FIELDS.DESCRIPTION' | translate}}" formControlName="description" required></textarea>
-						 formControlName="description" required></textarea>
+						<mat-error *ngIf="formGroup.get('description').hasError('backendError')">{{errorModel.description}}</mat-error>
-						<mat-error *ngIf="formGroup.get('description').errors?.backendError">{{errorModel.description}}</mat-error>
+						<mat-error *ngIf="formGroup.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-						<mat-error *ngIf="formGroup.get('description').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 					</mat-form-field>
 
 					<div class="col-md-12">
@@ -87,12 +87,13 @@
 								<button mat-raised-button color="primary" (click)="cancel()" type="button">{{'PROJECT-EDITOR.ACTIONS.CANCEL' |
 									translate}}</button>
 							</div>
-							<div class="col-auto right-button">
+							<div class="col"></div>
-								<button *ngIf="isNew || editMode" mat-raised-button color="primary" type="submit">{{'PROJECT-EDITOR.ACTIONS.SAVE'
+							<div class="col-auto right-button" *ngIf="!isNew && editMode">
+								<button mat-raised-button color="primary" type="button" (click)="delete()">{{'PROJECT-EDITOR.ACTIONS.DELETE'
 									| translate}}</button>
 							</div>
-							<div class="col-auto right-button">
+							<div class="col-auto right-button" *ngIf="isNew || editMode">
-								<button *ngIf="!isNew && editMode" mat-raised-button color="primary" type="button" (click)="delete()">{{'PROJECT-EDITOR.ACTIONS.DELETE'
+								<button mat-raised-button color="primary" type="submit">{{'PROJECT-EDITOR.ACTIONS.SAVE'
 									| translate}}</button>
 							</div>
 						</div>

dmp-frontend/src/app/projects/editor/project-editor.component.scss

@@ -1,49 +1,56 @@
-.full-width {
-	width: 100%;
-}
-
-.input-table {
-	table-layout: fixed;
-}
-
-.logo-table {
-	table-layout: fixed;
-	display: inline-block;
-	td {
-		padding: 3px;
-	}
-}
-
-.table-card .mat-grid-tile {
-	background: rgba(0, 0, 0, 0.32);
-}
-
 .project-editor {
-	.fill-space {
+
-		flex: 1 1 auto;
+	.project-editor-header-actions {
+		display: flex;
+		align-items: center;
 	}
-	.mat-card {
+
-		margin: 16px 0;
+
+	.logo-table {
+		table-layout: fixed;
+		display: inline-block;
+
+		td {
+			padding: 3px;
+		}
 	}
-	p {
+
-		margin: 16px;
+	// .table-card .mat-grid-tile {
-	}
+	// 	background: rgba(0, 0, 0, 0.32);
-	.left-button {
+	// }
-		float: left;
+
-	}
+	// .project-editor {
-	.right-button {
+	// 	.fill-space {
-		float: right;
+	// 		flex: 1 1 auto;
-	}
+	// 	}
-	.description-area {
+
-		height: 100px;
+	// 	.mat-card {
+	// 		margin: 16px 0;
+	// 	}
+
+	// 	p {
+	// 		margin: 16px;
+	// 	}
+
+	// 	.left-button {
+	// 		float: left;
+	// 	}
+
+	// 	.right-button {
+	// 		float: right;
+	// 	}
+
+	// 	.description-area {
+	// 		height: 100px;
+	// 	}
+	// }
+
+	// h3 {
+	// 	margin-top: 0px;
+	// }
+
+
+	.hidden {
+		display: none;
 	}
 }
-
-h3{
-  margin-top: 0px;
-}
-
-
-.hidden {
-	display: none !important;
-}

dmp-frontend/src/app/projects/editor/project-editor.component.ts

@@ -1,11 +1,13 @@
-import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { AbstractControl, FormArray, FormControl, FormGroup } from '@angular/forms';
 import { MatSnackBar } from '@angular/material';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { TdDialogService } from '@covalent/core';
 import { TranslateService } from '@ngx-translate/core';
 import { Observable } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 import { environment } from '../../../environments/environment';
+import { BaseComponent } from '../../core/common/base/base.component';
 import { BaseErrorModel } from '../../models/error/BaseErrorModel';
 import { ProjectModel, ProjectType } from '../../models/projects/ProjectModel';
 import { ProjectFileUploaderService } from '../../services/files/project-file-uploader.service';
@@ -19,10 +21,9 @@ import { JsonSerializer } from '../../utilities/JsonSerializer';
 @Component({
 	selector: 'app-project-editor-component',
 	templateUrl: 'project-editor.component.html',
-	styleUrls: ['./project-editor.component.scss'],
+	styleUrls: ['./project-editor.component.scss']
-	encapsulation: ViewEncapsulation.None
 })
-export class ProjectEditorComponent implements OnInit, IBreadCrumbComponent {
+export class ProjectEditorComponent extends BaseComponent implements OnInit, IBreadCrumbComponent {
 
 	breadCrumbs: Observable<BreadcrumbItem[]> = Observable.of([]);
 	isNew = true;
@@ -40,33 +41,36 @@ export class ProjectEditorComponent implements OnInit, IBreadCrumbComponent {
 		private uploaderService: ProjectFileUploaderService,
 		private languageResolverService: LanguageResolverService
 	) {
-
+		super();
 	}
 
 	ngOnInit() {
-		this.route.params.subscribe((params: Params) => {
+		this.route.params
-			const itemId = params['id'];
+			.pipe(takeUntil(this._destroyed))
+			.subscribe((params: Params) => {
+				const itemId = params['id'];
 
-			if (itemId != null) {
+				if (itemId != null) {
-				this.isNew = false;
+					this.isNew = false;
-				this.projectService.getSingle(itemId).map(data => data as ProjectModel)
+					this.projectService.getSingle(itemId).map(data => data as ProjectModel)
-					.subscribe(data => {
+						.pipe(takeUntil(this._destroyed))
-						this.project = JsonSerializer.fromJSONObject(data, ProjectModel);
+						.subscribe(data => {
-						this.formGroup = this.project.buildForm(null, this.project.type === ProjectType.External || !this.editMode);
+							this.project = JsonSerializer.fromJSONObject(data, ProjectModel);
-						this.breadCrumbs = Observable.of([
+							this.formGroup = this.project.buildForm(null, this.project.type === ProjectType.External || !this.editMode);
-							{ parentComponentName: 'ProjectListingComponent', label: 'Projects', url: '/projects' },
+							this.breadCrumbs = Observable.of([
-						]);
+								{ parentComponentName: 'ProjectListingComponent', label: 'Projects', url: '/projects' },
+							]);
+						});
+				} else {
+					this.breadCrumbs = Observable.of([
+						{ parentComponentName: 'ProjectListingComponent', label: 'Projects', url: '/projects' },
+					]);
+					this.project = new ProjectModel();
+					setTimeout(() => {
+						this.formGroup = this.project.buildForm();
 					});
-			} else {
+				}
-				this.breadCrumbs = Observable.of([
+			});
-					{ parentComponentName: 'ProjectListingComponent', label: 'Projects', url: '/projects' },
-				]);
-				this.project = new ProjectModel();
-				setTimeout(() => {
-					this.formGroup = this.project.buildForm();
-				});
-			}
-		});
 	}
 
 	formSubmit(): void {
@@ -80,10 +84,12 @@ export class ProjectEditorComponent implements OnInit, IBreadCrumbComponent {
 	}
 
 	onSubmit(): void {
-		this.projectService.createProject(this.formGroup.value).subscribe(
+		this.projectService.createProject(this.formGroup.value)
-			complete => this.onCallbackSuccess(),
+			.pipe(takeUntil(this._destroyed))
-			error => this.onCallbackError(error)
+			.subscribe(
-		);
+				complete => this.onCallbackSuccess(),
+				error => this.onCallbackError(error)
+			);
 	}
 
 	onCallbackSuccess(): void {
@@ -110,21 +116,27 @@ export class ProjectEditorComponent implements OnInit, IBreadCrumbComponent {
 	}
 
 	public delete(): void {
-		this.language.get('GENERAL.DELETE-CONFIRMATION').subscribe((messages: any) => {
+		this.language.get('GENERAL.DELETE-CONFIRMATION')
-			this.dialogService.openConfirm({
+			.pipe(takeUntil(this._destroyed))
-				message: messages.MESSAGE,
+			.subscribe((messages: any) => {
-				title: messages.TITLE,
+				this.dialogService.openConfirm({
-				cancelButton: messages.NEGATIVE,
+					message: messages.MESSAGE,
-				acceptButton: messages.POSITIVE
+					title: messages.TITLE,
-			}).afterClosed().subscribe((accept: boolean) => {
+					cancelButton: messages.NEGATIVE,
-				if (accept) {
+					acceptButton: messages.POSITIVE
-					this.projectService.inactivate(this.project.id).subscribe(
+				}).afterClosed()
-						complete => { this.router.navigate(['/projects']); },
+					.pipe(takeUntil(this._destroyed))
-						error => this.onCallbackError(error)
+					.subscribe((accept: boolean) => {
-					);
+						if (accept) {
-				}
+							this.projectService.inactivate(this.project.id)
+								.pipe(takeUntil(this._destroyed))
+								.subscribe(
+									complete => { this.router.navigate(['/projects']); },
+									error => this.onCallbackError(error)
+								);
+						}
+					});
 			});
-		});
 	}
 
 	public touchAllFormFields(formControl: AbstractControl) {
@@ -189,6 +201,8 @@ export class ProjectEditorComponent implements OnInit, IBreadCrumbComponent {
 		} else {
 			formdata.append('file', fileList);
 		}
-		this.uploaderService.uploadFile(formdata).subscribe(files => this.formGroup.get('files').patchValue(files));
+		this.uploaderService.uploadFile(formdata)
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(files => this.formGroup.get('files').patchValue(files));
 	}
 }

dmp-frontend/src/app/projects/listing/project-listing.component.html

@@ -1,71 +1,72 @@
 <div>
-  <h3>{{languageResolverService.getBy('listingTitle') | translate}}</h3>
+	<h3>{{languageResolverService.getBy('listingTitle') | translate}}</h3>
 
-  <mat-card class="mat-card">
+	<mat-card class="mat-card">
-    <mat-card-header>
+		<mat-card-header>
-      <!-- <mat-progress-bar *ngIf="dataSource?.isLoadingResults" mode="query"></mat-progress-bar> -->
+			<!-- <mat-progress-bar *ngIf="dataSource?.isLoadingResults" mode="query"></mat-progress-bar> -->
-    </mat-card-header>
+		</mat-card-header>
-    <mat-card-content>
+		<mat-card-content>
-      <div class="row">
+			<div class="row">
-        <app-projects-criteria-component class="col-md-12"></app-projects-criteria-component>
+				<app-projects-criteria-component class="col-md-12"></app-projects-criteria-component>
-        <mat-table class="col-md-12" [dataSource]="dataSource" matSort (matSortChange)="refresh()">
+				<mat-table class="col-md-12" [dataSource]="dataSource" matSort (matSortChange)="refresh()">
 
-          <ng-container cdkColumnDef="avatar">
+					<ng-container cdkColumnDef="avatar">
-            <mat-header-cell *matHeaderCellDef mat-sort-header="avatar">{{'PROJECT-LISTING.COLUMNS.AVATAR' | translate}}</mat-header-cell>
+						<mat-header-cell *matHeaderCellDef mat-sort-header="avatar">{{'PROJECT-LISTING.COLUMNS.AVATAR' | translate}}</mat-header-cell>
-            <mat-cell *matCellDef="let row">
+						<mat-cell *matCellDef="let row">
-              <img mat-card-avatar [src]="host+'files/'+row.files[0].id+'?location='+row.files[0].location+'&type='+row.files[0].type">
+							<img mat-card-avatar [src]="host+'files/'+row.files[0].id+'?location='+row.files[0].location+'&type='+row.files[0].type">
-            </mat-cell>
+						</mat-cell>
-          </ng-container>
+					</ng-container>
-          <!-- Column Definition: Name -->
+					<!-- Column Definition: Name -->
-          <ng-container cdkColumnDef="name">
+					<ng-container cdkColumnDef="name">
-            <mat-header-cell *matHeaderCellDef mat-sort-header="label">{{'PROJECT-LISTING.COLUMNS.NAME' | translate}}</mat-header-cell>
+						<mat-header-cell *matHeaderCellDef mat-sort-header="label">{{'PROJECT-LISTING.COLUMNS.NAME' | translate}}</mat-header-cell>
-            <mat-cell *matCellDef="let row">{{row.label}}</mat-cell>
+						<mat-cell *matCellDef="let row">{{row.label}}</mat-cell>
-          </ng-container>
+					</ng-container>
 
-          <!-- Column Definition: Αbbreviation -->
+					<!-- Column Definition: Αbbreviation -->
-          <ng-container cdkColumnDef="abbreviation">
+					<ng-container cdkColumnDef="abbreviation">
-            <mat-header-cell *matHeaderCellDef mat-sort-header="abbreviation">{{'PROJECT-LISTING.COLUMNS.ABBREVIATION' | translate}}</mat-header-cell>
+						<mat-header-cell *matHeaderCellDef mat-sort-header="abbreviation">{{'PROJECT-LISTING.COLUMNS.ABBREVIATION' |
-            <mat-cell *matCellDef="let row"> {{row.abbreviation}} </mat-cell>
+							translate}}</mat-header-cell>
-          </ng-container>
+						<mat-cell *matCellDef="let row"> {{row.abbreviation}} </mat-cell>
+					</ng-container>
 
-          <!-- Column Definition: Start -->
+					<!-- Column Definition: Start -->
-          <ng-container cdkColumnDef="start">
+					<ng-container cdkColumnDef="start">
-            <mat-header-cell *matHeaderCellDef mat-sort-header="startdate">{{'PROJECT-LISTING.COLUMNS.START' | translate}}</mat-header-cell>
+						<mat-header-cell *matHeaderCellDef mat-sort-header="startdate">{{'PROJECT-LISTING.COLUMNS.START' | translate}}</mat-header-cell>
-            <mat-cell *matCellDef="let row"> {{row.startDate | date:'shortDate'}} </mat-cell>
+						<mat-cell *matCellDef="let row"> {{row.startDate | date:'shortDate'}} </mat-cell>
-          </ng-container>
+					</ng-container>
 
-          <!-- Column Definition: End -->
+					<!-- Column Definition: End -->
-          <ng-container cdkColumnDef="end">
+					<ng-container cdkColumnDef="end">
-            <mat-header-cell *matHeaderCellDef mat-sort-header="enddate">{{'PROJECT-LISTING.COLUMNS.END' | translate}}</mat-header-cell>
+						<mat-header-cell *matHeaderCellDef mat-sort-header="enddate">{{'PROJECT-LISTING.COLUMNS.END' | translate}}</mat-header-cell>
-            <mat-cell *matCellDef="let row"> {{row.endDate | date:'shortDate'}} </mat-cell>
+						<mat-cell *matCellDef="let row"> {{row.endDate | date:'shortDate'}} </mat-cell>
-          </ng-container>
+					</ng-container>
 
-          <!-- Column Definition: End -->
+					<!-- Column Definition: End -->
-          <ng-container cdkColumnDef="dmps">
+					<ng-container cdkColumnDef="dmps">
-            <mat-header-cell *matHeaderCellDef>{{'PROJECT-LISTING.COLUMNS.DMPS' | translate}}</mat-header-cell>
+						<mat-header-cell *matHeaderCellDef>{{'PROJECT-LISTING.COLUMNS.DMPS' | translate}}</mat-header-cell>
-            <mat-cell *matCellDef="let row" (click)="$event.stopPropagation()">
+						<mat-cell *matCellDef="let row" (click)="$event.stopPropagation()">
-              <app-url-listing [items]="row.dmps" [urlLimit]="5" [parameters]="{ projectLabel: row.label }"></app-url-listing>
+							<app-url-listing [items]="row.dmps" [urlLimit]="5" [parameters]="{ projectLabel: row.label }"></app-url-listing>
-            </mat-cell>
+						</mat-cell>
-          </ng-container>
+					</ng-container>
 
 
-          <!-- Column Definition: Submission Time -->
+					<!-- Column Definition: Submission Time -->
-          <!-- <ng-container cdkColumnDef="actions">
+					<!-- <ng-container cdkColumnDef="actions">
 				<mat-header-cell *matHeaderCellDef>{{'PROJECT-LISTING.COLUMNS.ACTIONS' | translate}}</mat-header-cell>
 				<mat-cell *matCellDef="let row"></mat-cell>
 			</ng-container> -->
 
-          <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+					<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-          <mat-row *matRowDef="let row; columns: displayedColumns" (click)="rowClick(row.id)"></mat-row>
+					<mat-row *matRowDef="let row; columns: displayedColumns" (click)="rowClick(row.id)"></mat-row>
 
-        </mat-table>
+				</mat-table>
-        <mat-paginator #paginator [length]="dataSource?.totalCount" [pageSizeOptions]="[10, 25, 100]">
+				<mat-paginator #paginator [length]="dataSource?.totalCount" [pageSizeOptions]="[10, 25, 100]">
-        </mat-paginator>
+				</mat-paginator>
-      </div>
+			</div>
-    </mat-card-content>
+		</mat-card-content>
-  </mat-card>
+	</mat-card>
 
-  <button mat-fab class="mat-fab-bottom-right" color="primary" [routerLink]=" ['./new'] ">
+	<button mat-fab class="mat-fab-bottom-right" color="primary" [routerLink]=" ['./new'] ">
-    <mat-icon class="mat-24">add</mat-icon>
+		<mat-icon class="mat-24">add</mat-icon>
-  </button>
+	</button>
 </div>

dmp-frontend/src/app/projects/listing/project-listing.component.ts

@@ -82,7 +82,7 @@ export class ProjectDataSource extends DataSource<ProjectListingModel> {
 	) {
 		super();
 
-		//this._paginator.page.subscribe((pageEvent: PageEvent) => {
+		//this._paginator.page.pipe(takeUntil(this._destroyed)).subscribe((pageEvent: PageEvent) => {
 		//    this.store.dispatch(new LoadPhotosRequestAction(pageEvent.pageIndex, pageEvent.pageSize))
 		//})
 	}
@@ -94,7 +94,7 @@ export class ProjectDataSource extends DataSource<ProjectListingModel> {
 		];
 
 		// If the user changes the sort order, reset back to the first page.
-		//this._sort.matSortChange.subscribe(() => {
+		//this._sort.matSortChange.pipe(takeUntil(this._destroyed)).subscribe(() => {
 		//    this._paginator.pageIndex = 0;
 		//})
 

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

@@ -3,8 +3,10 @@ import { Injectable } from '@angular/core';
 import { MatSnackBar } from '@angular/material';
 import { Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
+import { takeUntil } from 'rxjs/operators';
 import { Observable } from 'rxjs/Rx';
 import { environment } from '../../../environments/environment';
+import { BaseService } from '../../core/common/base/base.service';
 import { Credential } from '../../models/login/Credential';
 import { LoginInfo } from '../../models/login/LoginInfo';
 import { Principal } from '../../models/login/Principal';
@@ -12,7 +14,7 @@ import { SnackBarNotificationComponent } from '../../shared/components/notificai
 import { JsonSerializer } from '../../utilities/JsonSerializer';
 
 @Injectable()
-export class AuthService {
+export class AuthService extends BaseService {
 	private actionUrl: string;
 	private headers: HttpHeaders;
 
@@ -22,7 +24,7 @@ export class AuthService {
 		public language: TranslateService,
 		public router: Router
 	) {
-
+		super();
 		this.actionUrl = environment.Server + 'auth/';
 
 		this.headers = new HttpHeaders();
@@ -99,10 +101,12 @@ export class AuthService {
 		if (!principal) { return; }
 		let headers = this.headers;
 		headers = headers.set('AuthToken', principal.token);
-		this.http.post(url, null, { headers: headers }).subscribe(
+		this.http.post(url, null, { headers: headers })
-			res => this.onLogOutSuccess(res),
+			.pipe(takeUntil(this._destroyed))
-			error => this.onLogOutError(error)
+			.subscribe(
-		);
+				res => this.onLogOutSuccess(res),
+				error => this.onLogOutError(error)
+			);
 	}
 
 	public me(): Observable<Principal> {

dmp-frontend/src/app/services/breadcrumb/breadcrumb-resolver.service.ts

@@ -1,13 +1,13 @@
-import { Component, Input, OnInit, AfterViewChecked, ViewChild, NgZone } from '@angular/core';
+import { Injectable, NgZone } from '@angular/core';
-import { HttpClient, HttpHeaders } from '@angular/common/http';
-import { Injectable } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
+import { Observable } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { BaseService } from '../../core/common/base/base.service';
 import { BreadcrumbItem } from '../../shared/components/breadcrumb/definition/breadcrumb-item';
 import { IBreadCrumbComponent } from '../../shared/components/breadcrumb/definition/IBreadCrumbComponent';
-import { Observable } from 'rxjs';
 
 @Injectable()
-export class BreadCrumbResolverService {
+export class BreadCrumbResolverService extends BaseService {
 
 	private activeComponents = [];
 	private parentComponents = [];
@@ -15,7 +15,7 @@ export class BreadCrumbResolverService {
 	constructor(
 		private router: Router,
 		private zone: NgZone
-	) { }
+	) { super(); }
 
 	public push(component: any) {
 		const existingComponentIndex = this.activeComponents.map(x => x.constructor.name).indexOf(component.constructor.name);
@@ -51,18 +51,20 @@ export class BreadCrumbResolverService {
 	}
 
 	resolveDependentComponents(items: Observable<BreadcrumbItem[]>, components: any[]): any[] {
-		items.subscribe(breadCrumbs => {
+		items
-			breadCrumbs.forEach(async item => {
+			.pipe(takeUntil(this._destroyed))
-				const parentComponent = item.parentComponentName ? this.findComponent(item.parentComponentName) : null;
+			.subscribe(breadCrumbs => {
-				if (parentComponent && parentComponent.hasOwnProperty('breadCrumbs')) {
+				breadCrumbs.forEach(async item => {
-					components = this.pushToStart(components, this.resolveDependentComponents((<IBreadCrumbComponent>parentComponent).breadCrumbs, components));
+					const parentComponent = item.parentComponentName ? this.findComponent(item.parentComponentName) : null;
-				} else if (item.notFoundResolver) {
+					if (parentComponent && parentComponent.hasOwnProperty('breadCrumbs')) {
-					components = this.pushToStart(components, item.notFoundResolver);
+						components = this.pushToStart(components, this.resolveDependentComponents((<IBreadCrumbComponent>parentComponent).breadCrumbs, components));
-					//components = this.pushToStart(components, [unresolvedComponentItems])
+					} else if (item.notFoundResolver) {
-				}
+						components = this.pushToStart(components, item.notFoundResolver);
+						//components = this.pushToStart(components, [unresolvedComponentItems])
+					}
+				});
+				components = this.pushToEnd(components, breadCrumbs);
 			});
-			components = this.pushToEnd(components, breadCrumbs);
-		});
 		return components;
 	}
 

dmp-frontend/src/app/services/language-resolver/language-resolver.service.ts

@@ -1,23 +1,27 @@
 import { Injectable } from '@angular/core';
+import { takeUntil } from 'rxjs/operators';
+import { BaseService } from '../../core/common/base/base.service';
 import { LanguageService } from '../language/language.service';
 
 @Injectable()
-export class LanguageResolverService {
+export class LanguageResolverService extends BaseService {
 
 	private languageData = {};
 
 	constructor(private language: LanguageService) {
+		super();
 		if (Object.keys(this.languageData).length === 0) {
-			this.language.getLang().subscribe(result => {
+			this.language.getLang()
-				result.forEach(item => {
+				.pipe(takeUntil(this._destroyed))
-					this.languageData[item.key] = item.languageKey;
+				.subscribe(result => {
+					result.forEach(item => {
+						this.languageData[item.key] = item.languageKey;
+					});
 				});
-			});
 		}
 	}
 
 	public getBy(key: string): string {
 		return this.languageData[key];
 	}
-
 }

dmp-frontend/src/app/shared/components/add-researchers/add-researchers.component.html

@@ -3,11 +3,11 @@
     <div mat-dialog-content>
         <mat-form-field class="full-width">
             <input matInput formControlName="firstName" placeholder="{{'ADDRESEARCHERS-EDITOR.FIRST_NAME' | translate}}" required>
-            <mat-error *ngIf="formGroup.get('firstName').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+            <mat-error *ngIf="formGroup.get('firstName').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
         </mat-form-field>
         <mat-form-field class="full-width">
                 <input matInput formControlName="lastName" placeholder="{{'ADDRESEARCHERS-EDITOR.LAST_NAME' | translate}}" required>
-                <mat-error *ngIf="formGroup.get('lastName').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+                <mat-error *ngIf="formGroup.get('lastName').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
             </mat-form-field>
     </div>
     <div mat-dialog-actions>

dmp-frontend/src/app/shared/components/add-researchers/add-researchers.component.ts

@@ -1,9 +1,9 @@
-import { JsonSerializer } from '../../../utilities/JsonSerializer';
+import { Component, Inject, OnInit } from '@angular/core';
-import { RequestItem } from '../../../models/criteria/RequestItem';
-import { Component, OnInit, Inject } from '@angular/core';
 import { FormGroup } from '@angular/forms';
-import { Params, ActivatedRoute, Router } from '@angular/router';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+import { ActivatedRoute, Router } from '@angular/router';
+import { takeUntil } from 'rxjs/operators';
+import { BaseComponent } from '../../../core/common/base/base.component';
 import { ResearcherModel } from '../../../models/researcher/ResearcherModel';
 import { ResearcherService } from '../../../services/researchers/researchers.service';
 
@@ -12,7 +12,7 @@ import { ResearcherService } from '../../../services/researchers/researchers.ser
 	templateUrl: 'add-researchers.component.html',
 
 })
-export class AddResearchersComponent implements OnInit {
+export class AddResearchersComponent extends BaseComponent implements OnInit {
 
 	public formGroup: FormGroup;
 
@@ -22,7 +22,7 @@ export class AddResearchersComponent implements OnInit {
 		public router: Router,
 		public dialogRef: MatDialogRef<AddResearchersComponent>,
 		@Inject(MAT_DIALOG_DATA) public data: any
-	) { }
+	) { super(); }
 
 	ngOnInit(): void {
 		const researcher = new ResearcherModel();
@@ -31,8 +31,10 @@ export class AddResearchersComponent implements OnInit {
 
 
 	send(value: any) {
-		this.researcherService.createResearcher(this.formGroup.value).subscribe(
+		this.researcherService.createResearcher(this.formGroup.value)
-			null, null, () => this.dialogRef.close()
+			.pipe(takeUntil(this._destroyed))
-		);
+			.subscribe(
+				null, null, () => this.dialogRef.close()
+			);
 	}
 }

dmp-frontend/src/app/shared/components/auto-complete/auto-complete.component.html

@@ -3,7 +3,7 @@
     <input matInput type="text" [placeholder]="placeholder" [formControl]="textFormCtrl" [matAutocomplete]="auto" [required]="required"
       [errorStateMatcher]="this">
     <mat-error *ngIf="validationErrorString">{{validationErrorString}}</mat-error>
-    <mat-error *ngIf="formCtrl && formCtrl.errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+    <mat-error *ngIf="formCtrl && formCtrl.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
     <mat-progress-spinner matSuffix mode="indeterminate" *ngIf="loading" [diameter]="22"></mat-progress-spinner>
     <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFunction" (optionSelected)="this.optionSelected($event)">
       <mat-option *ngFor="let option of options" [value]="option">

dmp-frontend/src/app/shared/components/auto-complete/auto-complete.component.ts

@@ -1,6 +1,8 @@
-import { Input, OnInit, Component, AfterViewInit, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { FormGroup, FormControl, FormGroupDirective, NgForm } from '@angular/forms';
+import { FormControl, FormGroupDirective, NgForm } from '@angular/forms';
 import { ErrorStateMatcher } from '@angular/material';
+import { takeUntil } from 'rxjs/operators';
+import { BaseComponent } from '../../../core/common/base/base.component';
 import { AutoCompleteConfiguration } from './AutoCompleteConfiguration';
 
 @Component({
@@ -8,7 +10,7 @@ import { AutoCompleteConfiguration } from './AutoCompleteConfiguration';
 	templateUrl: './auto-complete.component.html',
 	styleUrls: ['./auto-complete.component.scss']
 })
-export class AutoCompleteComponent implements OnInit, ErrorStateMatcher {
+export class AutoCompleteComponent extends BaseComponent implements OnInit, ErrorStateMatcher {
 
 	@Input() placeholder: String;
 	@Input() disabled: boolean;
@@ -35,18 +37,20 @@ export class AutoCompleteComponent implements OnInit, ErrorStateMatcher {
 	isUnchanged = true;
 
 	constructor() {
-
+		super();
 	}
 
 	ngOnInit() {
 		if (this.inputData.refreshEvent) {
-			this.inputData.refreshEvent.subscribe(x => {
+			this.inputData.refreshEvent
-				if (x) {
+				.pipe(takeUntil(this._destroyed))
-					this.formCtrl.patchValue(null);
+				.subscribe(x => {
-					this.textFormCtrl.patchValue(null);
+					if (x) {
-					this.options = [];
+						this.formCtrl.patchValue(null);
-				}
+						this.textFormCtrl.patchValue(null);
-			});
+						this.options = [];
+					}
+				});
 		}
 		this.textFormCtrl = new FormControl();
 		if (this.disabled) { this.textFormCtrl.disable(); }
@@ -80,11 +84,14 @@ export class AutoCompleteComponent implements OnInit, ErrorStateMatcher {
 					this.inputData.callback(this.inputData.requestItem).map(res => {
 						this.options = res;
 						this.loading = false;
-					}).subscribe();
+					})
+						.pipe(takeUntil(this._destroyed))
+						.subscribe();
 				} else {
 					this.loading = false;
 				}
 			})
+			.pipe(takeUntil(this._destroyed))
 			.subscribe();
 	}
 

dmp-frontend/src/app/shared/components/available-profiles/available-profiles.component.ts

@@ -1,19 +1,18 @@
-import { JsonSerializer } from '../../../utilities/JsonSerializer';
+import { Component, Inject, OnInit } from '@angular/core';
-import { RequestItem } from '../../../models/criteria/RequestItem';
-import { Component, OnInit, Inject } from '@angular/core';
 import { FormGroup } from '@angular/forms';
-import { Params, ActivatedRoute, Router } from '@angular/router';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+import { ActivatedRoute, Router } from '@angular/router';
-import { DatasetService } from '../../../services/dataset/dataset.service';
+import { takeUntil } from 'rxjs/operators';
+import { BaseComponent } from '../../../core/common/base/base.component';
 import { DatasetProfileModel } from '../../../models/datasetprofile/DatasetProfileModel';
-import { DatasetProfileModule } from '../../../dataset-profile-form/dataset-profile.module';
+import { DatasetService } from '../../../services/dataset/dataset.service';
+import { JsonSerializer } from '../../../utilities/JsonSerializer';
 
 @Component({
 	selector: 'app-available-profiles-component',
 	templateUrl: 'available-profiles.component.html',
-
 })
-export class AvailableProfilesComponent implements OnInit {
+export class AvailableProfilesComponent extends BaseComponent implements OnInit {
 
 	public formGroup: FormGroup;
 	public profiles: DatasetProfileModel[] = [];
@@ -25,13 +24,15 @@ export class AvailableProfilesComponent implements OnInit {
 		public router: Router,
 		public dialogRef: MatDialogRef<AvailableProfilesComponent>,
 		@Inject(MAT_DIALOG_DATA) public data: any
-	) { }
+	) { super(); }
 
 	ngOnInit(): void {
 		this.formGroup = this.data['profiles'];
-		this.datasetService.getDatasetProfiles().subscribe(data => {
+		this.datasetService.getDatasetProfiles()
-			this.profiles = JsonSerializer.fromJSONArray(data, DatasetProfileModel);
+			.pipe(takeUntil(this._destroyed))
-		});
+			.subscribe(data => {
+				this.profiles = JsonSerializer.fromJSONArray(data, DatasetProfileModel);
+			});
 	}
 
 	addProfiles(profiles) {

dmp-frontend/src/app/shared/components/criteria/base/base-criteria.component.ts

@@ -1,5 +1,6 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
-import { FormControl, FormGroup, NgForm, FormArray, AbstractControl } from '@angular/forms';
+import { AbstractControl, FormArray, FormControl, FormGroup } from '@angular/forms';
+import { BaseComponent } from '../../../../core/common/base/base.component';
 import { BaseCriteriaErrorModel } from '../../../../models/criteria/BaseCriteriaErrorModel';
 
 @Component({
@@ -10,7 +11,7 @@ import { BaseCriteriaErrorModel } from '../../../../models/criteria/BaseCriteria
 	]
 })
 
-export class BaseCriteriaComponent implements OnInit {
+export class BaseCriteriaComponent extends BaseComponent implements OnInit {
 
 	public refreshCallback: Function = null;
 	public formGroup: FormGroup = null;
@@ -18,6 +19,7 @@ export class BaseCriteriaComponent implements OnInit {
 	constructor(
 		public baseErrorModel?: BaseCriteriaErrorModel,
 	) {
+		super();
 	}
 
 	ngOnInit() {

dmp-frontend/src/app/shared/components/criteria/data-management-plan/dmp-criteria.component.ts

@@ -1,17 +1,15 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { FormBuilder, FormControl } from '@angular/forms';
 import { TranslateService } from '@ngx-translate/core';
-import { Component, OnInit, Input } from '@angular/core';
+import { takeUntil } from 'rxjs/operators';
-import { FormControl, FormGroup, FormBuilder, Validators } from '@angular/forms';
-import { BaseCriteriaComponent } from '../base/base-criteria.component';
-import { ValidationContext, Validation } from '../../../../utilities/validators/ValidationContext';
-import { BackendErrorValidator } from '../../../../utilities/validators/BackendErrorValidator';
 import { DataManagementPlanCriteria } from '../../../../models/criteria/data-management-plan/DataManagementPlanCriteria';
 import { DataManagementPlanCriteriaErrorModel } from '../../../../models/criteria/data-management-plan/DataManagementPlanCriteriaErrorModel';
-import { ProjectModel } from '../../../../models/projects/ProjectModel';
-import { ProjectService } from '../../../../services/project/project.service';
 import { ProjectCriteria } from '../../../../models/criteria/project/ProjectCriteria';
 import { RequestItem } from '../../../../models/criteria/RequestItem';
-import { create } from 'domain';
+import { ProjectModel } from '../../../../models/projects/ProjectModel';
+import { ProjectService } from '../../../../services/project/project.service';
 import { MultipleAutoCompleteConfiguration } from '../../autocompletes/multiple/multiple-auto-complete-configuration';
+import { BaseCriteriaComponent } from '../base/base-criteria.component';
 
 @Component({
 	selector: 'app-dmp-criteria-component',
@@ -51,8 +49,12 @@ export class DataManagementPlanCriteriaComponent extends BaseCriteriaComponent i
 			loadDataOnStart: true
 		};
 
-		this.formGroup.get('projects').valueChanges.subscribe(x => this.controlModified());
+		this.formGroup.get('projects').valueChanges
-		this.formGroup.get('like').valueChanges.subscribe(x => this.controlModified());
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(x => this.controlModified());
+		this.formGroup.get('like').valueChanges
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(x => this.controlModified());
 		//if (this.criteria == null) { this.criteria = new DataManagementPlanCriteria(); }
 	}
 

dmp-frontend/src/app/shared/components/criteria/datasets/datasets-criteria.component.ts

@@ -1,16 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder } from '@angular/forms';
 import { TranslateService } from '@ngx-translate/core';
-import { Component, OnInit, Input } from '@angular/core';
+import { takeUntil } from 'rxjs/operators';
-import { FormControl, FormGroup, FormBuilder, Validators } from '@angular/forms';
-import { BaseCriteriaComponent } from '../base/base-criteria.component';
-import { ValidationContext, Validation } from '../../../../utilities/validators/ValidationContext';
-import { BackendErrorValidator } from '../../../../utilities/validators/BackendErrorValidator';
-import { DatasetCriteriaErrorModel } from '../../../../models/criteria/dataset/DatasetCriteriaErrorModel';
 import { DatasetCriteria } from '../../../../models/criteria/dataset/DatasetCriteria';
-import { TagsCriteria } from '../../../../models/criteria/tags/TagsCriteria';
+import { DatasetCriteriaErrorModel } from '../../../../models/criteria/dataset/DatasetCriteriaErrorModel';
-import { ExternalSourcesService } from '../../../../services/external-sources/external-sources.service';
 import { RequestItem } from '../../../../models/criteria/RequestItem';
-import { TagModel } from '../../../../models/tags/TagModel';
+import { TagsCriteria } from '../../../../models/criteria/tags/TagsCriteria';
 import { ExternalSourcesItemModel } from '../../../../models/external-sources/ExternalSourcesItemModel';
+import { ExternalSourcesService } from '../../../../services/external-sources/external-sources.service';
+import { BaseCriteriaComponent } from '../base/base-criteria.component';
 
 @Component({
 	selector: 'app-datasets-criteria-component',
@@ -72,10 +70,12 @@ export class DatasetCriteriaComponent extends BaseCriteriaComponent implements O
 			const criteria: TagsCriteria = new TagsCriteria();
 			criteria.like = value;
 			requestItem.criteria = criteria;
-			this.externalSourcesService.searchDatasetTags(requestItem).subscribe(items => {
+			this.externalSourcesService.searchDatasetTags(requestItem)
-				this.filteredTags = items;
+				.pipe(takeUntil(this._destroyed))
-				this.filteringTagsAsync = false;
+				.subscribe(items => {
-			});
+					this.filteredTags = items;
+					this.filteringTagsAsync = false;
+				});
 		}
 	}
 }

dmp-frontend/src/app/shared/components/criteria/users/users-criteria.component.ts

@@ -1,12 +1,13 @@
-import { Utilities } from '../../../../utilities/utilities';
-import { UserCriteriaErrorModel } from '../../../../models/criteria/users/UserCriteriaErrorModel';
-import { UserCriteria } from '../../../../models/criteria/users/UserCriteria';
-import { TranslateService } from '@ngx-translate/core';
-import { Validation, ValidationContext } from '../../../../utilities/validators/ValidationContext';
 import { Component, OnInit } from '@angular/core';
-import { BaseCriteriaComponent } from '../base/base-criteria.component';
-import { Principal } from '../../../../models/login/Principal';
 import { FormBuilder, FormGroup } from '@angular/forms';
+import { TranslateService } from '@ngx-translate/core';
+import { takeUntil } from 'rxjs/operators';
+import { UserCriteria } from '../../../../models/criteria/users/UserCriteria';
+import { UserCriteriaErrorModel } from '../../../../models/criteria/users/UserCriteriaErrorModel';
+import { Principal } from '../../../../models/login/Principal';
+import { Utilities } from '../../../../utilities/utilities';
+import { Validation, ValidationContext } from '../../../../utilities/validators/ValidationContext';
+import { BaseCriteriaComponent } from '../base/base-criteria.component';
 
 @Component({
 	selector: 'app-users-criteria-component',
@@ -75,9 +76,11 @@ export class UsersCriteriaComponent extends BaseCriteriaComponent implements OnI
 
 	getPrincipalAppRoleWithLanguage(role: Principal.AppRole): string {
 		let result = '';
-		this.language.get(this.utilities.convertFromPrincipalAppRole(role)).subscribe((value: string) => {
+		this.language.get(this.utilities.convertFromPrincipalAppRole(role))
-			result = value;
+			.pipe(takeUntil(this._destroyed))
-		});
+			.subscribe((value: string) => {
+				result = value;
+			});
 		return result;
 	}
 

dmp-frontend/src/app/shared/components/facets/facet-search-component/facet-search-section.component.scss

@@ -1,5 +1,10 @@
 .facet-option-item {
+
 	height: auto !important;
 	min-height: 48px;
 	padding: 0.5em;
+
+	.mat-list-item-content {
+		min-height: inherit;
+	}
 }

dmp-frontend/src/app/shared/components/facets/facet-search-component/facet-search-section.component.ts

@@ -1,8 +1,10 @@
-import { Component, ViewEncapsulation, OnInit, Input, Output, ViewChild, EventEmitter } from '@angular/core';
-import { Observable } from 'rxjs';
-import { FormControl } from '@angular/forms';
-import { MatSelectionList, MatListOption } from '@angular/material';
 import { SelectionModel } from '@angular/cdk/collections';
+import { Component, EventEmitter, Input, OnInit, Output, ViewChild, ViewEncapsulation } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { MatListOption, MatSelectionList } from '@angular/material';
+import { Observable } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { BaseComponent } from '../../../../core/common/base/base.component';
 
 @Component({
 	selector: 'app-facet-section-component',
@@ -10,7 +12,7 @@ import { SelectionModel } from '@angular/cdk/collections';
 	styleUrls: ['./facet-search-section.component.scss'],
 	encapsulation: ViewEncapsulation.None,
 })
-export class FacetSearchSectionComponent implements OnInit {
+export class FacetSearchSectionComponent extends BaseComponent implements OnInit {
 
 	@Input()
 	searchEnabled = false;
@@ -49,7 +51,9 @@ export class FacetSearchSectionComponent implements OnInit {
 	ngOnInit(): void {
 		if (!this.multipleSelect) { this.selectionList.selectedOptions = new SelectionModel<MatListOption>(this.multipleSelect); }
 		this.optionSearchControl.valueChanges.debounceTime(this.requestDelay)
-			.distinctUntilChanged().subscribe(x => { if (this.filterOptions) { this.options = this.filterOptions(x); } });
+			.distinctUntilChanged()
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(x => { if (this.filterOptions) { this.options = this.filterOptions(x); } });
 	}
 
 	public selectionChanged(event: any) {

dmp-frontend/src/app/shared/components/facets/facet-search.component.html

@@ -1,18 +1,18 @@
-<mat-accordion #facetAccordion="matAccordion" [multi]="true">
+<mat-accordion #facetAccordion="matAccordion" [multi]="true" class="facet-search-component">
 	<mat-expansion-panel>
 		<mat-expansion-panel-header>
 			<mat-panel-title>
-
+				{{ 'FACET-SEARCH.FILTER' | translate }}
 			</mat-panel-title>
 		</mat-expansion-panel-header>
 		<div>
 			<mat-form-field>
-				<input matInput placeholder=" {{'CRITERIA.PROJECTS.LIKE'| translate}}" name="datasetCriteriaName" [(ngModel)]="facetCriteria.like"
+				<input matInput placeholder="{{'CRITERIA.PROJECTS.LIKE'| translate}}" name="datasetCriteriaName" [(ngModel)]="facetCriteria.like"
 				 (ngModelChange)="controlModified()">
 			</mat-form-field>
 		</div>
 		<div>
-			<td-chips color="accent" [items]="filteredTags" [(ngModel)]="facetCriteria.tags" (ngModelChange)="controlModified()"
+			<td-chips color="primary" class="tags-chips" [items]="filteredTags" [(ngModel)]="facetCriteria.tags" (ngModelChange)="controlModified()"
 			 placeholder="{{'CRITERIA.DATA-SETS.TAGS' | translate}}" (inputChange)="filterTags($event)" name="tags" requireMatch>
 				<ng-template td-chip let-chip="chip">
 					<div class="tc-grey-100 bgc-teal-700" td-chip-avatar>{{chip.name.substring(0, 1).toUpperCase()}}</div>

dmp-frontend/src/app/shared/components/facets/facet-search.component.scss

@@ -0,0 +1,9 @@
+.facet-search-component {
+	.mat-form-field {
+		width: 100%;
+	}
+
+	.tags-chips {
+		padding: 0px;
+	}
+}

dmp-frontend/src/app/shared/components/facets/facet-search.component.ts

@@ -1,20 +1,21 @@
-import { Component, OnInit, ViewEncapsulation, Input, ViewChild, Output, EventEmitter, AfterViewInit } from '@angular/core';
+import { AfterViewInit, Component, EventEmitter, Input, OnInit, Output, ViewChild, ViewEncapsulation } from '@angular/core';
-import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
-import { BreadCrumbResolverService } from '../../../services/breadcrumb/breadcrumb-resolver.service';
-import { Observable } from 'rxjs';
-import { FacetSearchCriteriaModel } from '../../../models/facet-search/FacetSearchCriteriaModel';
-import { ProjectStateType } from '../../../models/projects/ProjectStateType';
-import { ProjectModel } from '../../../models/projects/ProjectModel';
-import { ProjectService } from '../../../services/project/project.service';
-import { ProjectCriteria } from '../../../models/criteria/project/ProjectCriteria';
-import { DatasetService } from '../../../services/dataset/dataset.service';
-import { DatasetProfileModel } from '../../../models/datasetprofile/DatasetProfileModel';
-import { RequestItem } from '../../../models/criteria/RequestItem';
-import { ExternalSourcesService } from '../../../services/external-sources/external-sources.service';
-import { ExternalSourcesItemModel } from '../../../models/external-sources/ExternalSourcesItemModel';
-import { TranslateService } from '@ngx-translate/core';
 import { MatAccordion } from '@angular/material';
+import { ActivatedRoute } from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
+import { Observable } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { BaseComponent } from '../../../core/common/base/base.component';
+import { ProjectCriteria } from '../../../models/criteria/project/ProjectCriteria';
+import { RequestItem } from '../../../models/criteria/RequestItem';
 import { TagsCriteria } from '../../../models/criteria/tags/TagsCriteria';
+import { DatasetProfileModel } from '../../../models/datasetprofile/DatasetProfileModel';
+import { ExternalSourcesItemModel } from '../../../models/external-sources/ExternalSourcesItemModel';
+import { FacetSearchCriteriaModel } from '../../../models/facet-search/FacetSearchCriteriaModel';
+import { ProjectModel } from '../../../models/projects/ProjectModel';
+import { ProjectStateType } from '../../../models/projects/ProjectStateType';
+import { DatasetService } from '../../../services/dataset/dataset.service';
+import { ExternalSourcesService } from '../../../services/external-sources/external-sources.service';
+import { ProjectService } from '../../../services/project/project.service';
 
 @Component({
 	selector: 'app-facet',
@@ -23,7 +24,7 @@ import { TagsCriteria } from '../../../models/criteria/tags/TagsCriteria';
 	encapsulation: ViewEncapsulation.None,
 	providers: [ProjectService]
 })
-export class FacetSearchComponent implements OnInit, AfterViewInit {
+export class FacetSearchComponent extends BaseComponent implements OnInit, AfterViewInit {
 
 	@Input() facetCriteria = new FacetSearchCriteriaModel();
 	@Output() facetCriteriaChange = new EventEmitter();
@@ -55,7 +56,7 @@ export class FacetSearchComponent implements OnInit, AfterViewInit {
 		public languageService: TranslateService,
 		public datasetProfileService: DatasetService,
 		public externalSourcesService: ExternalSourcesService
-	) { }
+	) { super(); }
 
 	ngOnInit() {
 		setTimeout(x => {
@@ -167,10 +168,12 @@ export class FacetSearchComponent implements OnInit, AfterViewInit {
 			const criteria: TagsCriteria = new TagsCriteria();
 			criteria.like = value;
 			requestItem.criteria = criteria;
-			this.externalSourcesService.searchDatasetTags(requestItem).subscribe(items => {
+			this.externalSourcesService.searchDatasetTags(requestItem)
-				this.filteredTags = items;
+				.pipe(takeUntil(this._destroyed))
-				this.filteringTagsAsync = false;
+				.subscribe(items => {
-			});
+					this.filteredTags = items;
+					this.filteringTagsAsync = false;
+				});
 
 		}
 	}

dmp-frontend/src/app/shared/components/file-uploader/file-uploader.component.ts

@@ -1,12 +1,14 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { FileUploader } from '../../../shared/components/file-uploader/FileUploader';
 import { FormControl } from '@angular/forms';
+import { takeUntil } from 'rxjs/operators';
+import { BaseComponent } from '../../../core/common/base/base.component';
+import { FileUploader } from '../../../shared/components/file-uploader/FileUploader';
 
 @Component({
 	selector: 'app-fileuploader-component',
 	templateUrl: './file-uploader.component.html'
 })
-export class FileUploaderComponent implements OnInit {
+export class FileUploaderComponent extends BaseComponent implements OnInit {
 
 	files: File | FileList;
 	disabled = false;
@@ -48,7 +50,9 @@ export class FileUploaderComponent implements OnInit {
 		} else {
 			formdata.append('file', files);
 		}
-		this.fileUploader.uploadFile(formdata).subscribe(fileitem => this.form.patchValue(fileitem));
+		this.fileUploader.uploadFile(formdata)
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(fileitem => this.form.patchValue(fileitem));
 	}
 
 	cancelEvent(): void {

dmp-frontend/src/app/shared/components/invitation-accepted/invitation-accepted.component.ts

@@ -1,32 +1,31 @@
-import { JsonSerializer } from '../../../utilities/JsonSerializer';
+import { Component, OnInit } from '@angular/core';
-import { UserInvitationCriteria } from '../../../models/criteria/invitation/UserInvitationCriteria';
+import { ActivatedRoute, Router } from '@angular/router';
-import { RequestItem } from '../../../models/criteria/RequestItem';
+import { takeUntil } from 'rxjs/operators';
-import { Invitation } from '../../../models/invitation/Invitation';
+import { BaseComponent } from '../../../core/common/base/base.component';
 import { InvitationService } from '../../../services/invitation/invitation.service';
-import { User } from '../../../models/invitation/User';
-import { Component, OnInit, Inject } from '@angular/core';
-import { FormGroup } from '@angular/forms';
-import { Params, ActivatedRoute, Router } from '@angular/router';
-import { MAT_DIALOG_DATA } from '@angular/material';
 
 @Component({
 	selector: 'app-invitation-accepted-component',
 	templateUrl: 'invitation-accepted.component.html',
 
 })
-export class InvitationAcceptedComponent implements OnInit {
+export class InvitationAcceptedComponent extends BaseComponent implements OnInit {
 	constructor(
 		private invitationService: InvitationService,
 		private route: ActivatedRoute,
 		public router: Router
-	) { }
+	) { super(); }
 
 	ngOnInit(): void {
-		this.route.params.subscribe(params => {
+		this.route.params
-			const id = params['id'];
+			.pipe(takeUntil(this._destroyed))
-			this.invitationService.exchange(id).subscribe(result => {
+			.subscribe(params => {
-				this.router.navigate(['dmps/edit/' + result]);
+				const id = params['id'];
+				this.invitationService.exchange(id)
+					.pipe(takeUntil(this._destroyed))
+					.subscribe(result => {
+						this.router.navigate(['dmps/edit/' + result]);
+					});
 			});
-		});
 	}
 }

dmp-frontend/src/app/shared/components/invitation/invitation.component.ts

@@ -1,64 +1,70 @@
-import { JsonSerializer } from '../../../utilities/JsonSerializer';
+import { Component, Inject, OnInit } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { ActivatedRoute, Router } from '@angular/router';
+import { takeUntil } from 'rxjs/operators';
+import { BaseComponent } from '../../../core/common/base/base.component';
 import { UserInvitationCriteria } from '../../../models/criteria/invitation/UserInvitationCriteria';
 import { RequestItem } from '../../../models/criteria/RequestItem';
 import { Invitation } from '../../../models/invitation/Invitation';
-import { InvitationService } from '../../../services/invitation/invitation.service';
 import { User } from '../../../models/invitation/User';
-import { Component, OnInit, Inject } from '@angular/core';
+import { InvitationService } from '../../../services/invitation/invitation.service';
-import { FormGroup } from '@angular/forms';
+import { JsonSerializer } from '../../../utilities/JsonSerializer';
-import { Params, ActivatedRoute, Router } from '@angular/router';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
 
 @Component({
-  selector: 'app-invitation-component',
+	selector: 'app-invitation-component',
-  templateUrl: 'invitation.component.html',
+	templateUrl: 'invitation.component.html',
 
 })
-export class InvitationComponent implements OnInit {
+export class InvitationComponent extends BaseComponent implements OnInit {
 
-  public formGroup: FormGroup;
+	public formGroup: FormGroup;
 
-  public filteredUsersAsync = false;
+	public filteredUsersAsync = false;
 
-  public filteredUsers: User[];
+	public filteredUsers: User[];
 
-  constructor(
+	constructor(
-	public invitationService: InvitationService,
+		public invitationService: InvitationService,
-	public route: ActivatedRoute,
+		public route: ActivatedRoute,
-	public router: Router,
+		public router: Router,
-	public dialogRef: MatDialogRef<InvitationComponent>,
+		public dialogRef: MatDialogRef<InvitationComponent>,
-	@Inject(MAT_DIALOG_DATA) public data: any
+		@Inject(MAT_DIALOG_DATA) public data: any
-  ) { }
+	) { super(); }
 
-  ngOnInit(): void {
+	ngOnInit(): void {
-	const invitation = new Invitation();
+		const invitation = new Invitation();
-	invitation.dataManagementPlan = this.data.dmpId;
+		invitation.dataManagementPlan = this.data.dmpId;
-	this.formGroup = invitation.buildForm();
+		this.formGroup = invitation.buildForm();
-  }
+	}
-
+
-
+
-  send(value: any) {
+	send(value: any) {
-	this.invitationService.inviteUsers(this.formGroup.value).subscribe(
+		this.invitationService.inviteUsers(this.formGroup.value)
-		null, null, () => this.dialogRef.close()
+			.pipe(takeUntil(this._destroyed))
-	);
+			.subscribe(
-  }
+				null, null, () => this.dialogRef.close()
-
+			);
-  filterUsers(value: string): void {
+	}
-	this.filteredUsers = undefined;
+
-	if (value) {
+	filterUsers(value: string): void {
-		this.filteredUsersAsync = true;
+		this.filteredUsers = undefined;
-		const request = new RequestItem<UserInvitationCriteria>();
+		if (value) {
-		request.criteria = { like: value };
+			this.filteredUsersAsync = true;
-		this.invitationService.getUsers(request).subscribe(items => {
+			const request = new RequestItem<UserInvitationCriteria>();
-		this.filteredUsers = JsonSerializer.fromJSONArray(items, User);
+			request.criteria = { like: value };
-		if (!this.filteredUsers || this.filteredUsers.length === 0) {
+			this.invitationService.getUsers(request)
-			const user = new User();
+				.pipe(takeUntil(this._destroyed))
-			user.email = value;
+				.subscribe(items => {
-			user.name = value;
+					this.filteredUsers = JsonSerializer.fromJSONArray(items, User);
-			this.filteredUsers.push(user);
+					if (!this.filteredUsers || this.filteredUsers.length === 0) {
-		}
+						const user = new User();
-		this.filteredUsersAsync = false;
+						user.email = value;
-		});
+						user.name = value;
+						this.filteredUsers.push(user);
+					}
+					this.filteredUsersAsync = false;
+				});
+		}
 	}
-  }
 }

dmp-frontend/src/app/shared/components/notificaiton/snack-bar-notification.component.ts

@@ -1,22 +1,27 @@
-import { TranslateService } from '@ngx-translate/core';
 import { Component, Inject } from '@angular/core';
 import { MAT_SNACK_BAR_DATA } from '@angular/material';
+import { TranslateService } from '@ngx-translate/core';
+import { takeUntil } from 'rxjs/operators';
+import { BaseComponent } from '../../../core/common/base/base.component';
 @Component({
 	selector: 'app-snack-bar-notification',
 	templateUrl: 'snack-bar-notification.component.html'
 })
 
-export class SnackBarNotificationComponent {
+export class SnackBarNotificationComponent extends BaseComponent {
 	message: string;
 	constructor(@Inject(MAT_SNACK_BAR_DATA) public data: any) {
+		super();
 		this.parseMessage(data.message, data.language);
 	}
 
 	parseMessage(message: any, language: TranslateService): void {
 		if (language) {
-			language.get(message).subscribe((value: string) => {
+			language.get(message)
-				this.message = value;
+				.pipe(takeUntil(this._destroyed))
-			});
+				.subscribe((value: string) => {
+					this.message = value;
+				});
 		} else { this.message = message; }
 	}
 }

dmp-frontend/src/app/shared/help-content/help-content.component.ts

@@ -1,8 +1,10 @@
 /**
  * Created by stefania on 7/17/17.
  */
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
-import { ActivatedRoute, Router, NavigationStart } from '@angular/router';
+import { ActivatedRoute, NavigationStart, Router } from '@angular/router';
+import { takeUntil } from 'rxjs/operators';
+import { BaseComponent } from '../../core/common/base/base.component';
 import { PageHelpContent } from '../../models/help-content/page-help-content';
 import { HelpContentService } from '../../services/help-content/help-content.service';
 @Component({
@@ -15,21 +17,27 @@ import { HelpContentService } from '../../services/help-content/help-content.ser
         </ng-template>
     `,
 })
-export class HelpContentComponent implements OnInit {
+export class HelpContentComponent extends BaseComponent implements OnInit {
 	@Input() position: string;
 	contents: any[];
 	errorMessage: string = null;
 	constructor(private _helpContentService: HelpContentService, private route: ActivatedRoute, private router: Router) {
+		super();
 	}
+
 	ngOnInit() {
 		this.errorMessage = null;
-		this.router.events.subscribe(event => {
+		this.router.events
-			if (event instanceof NavigationStart) {
+			.pipe(takeUntil(this._destroyed))
-				this._helpContentService.getActivePageContent(event['url']).subscribe(
+			.subscribe(event => {
-					pageContent => this.shiftThroughContent(pageContent),
+				if (event instanceof NavigationStart) {
-					error => this.handleError(<any>error));
+					this._helpContentService.getActivePageContent(event['url'])
-			}
+						.pipe(takeUntil(this._destroyed))
-		});
+						.subscribe(
+							pageContent => this.shiftThroughContent(pageContent),
+							error => this.handleError(<any>error));
+				}
+			});
 	}
 	shiftThroughContent(pageContent: PageHelpContent) {
 		this.contents = pageContent.content[this.position];

dmp-frontend/src/app/unauthorized/unauthorized.component.ts

@@ -1,19 +1,21 @@
-import { AuthService } from '../services/auth/auth.service';
+import { AfterViewInit, Component, Input } from '@angular/core';
-import { Component, Input, AfterViewInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
+import { takeUntil } from 'rxjs/operators';
+import { BaseComponent } from '../core/common/base/base.component';
+import { AuthService } from '../services/auth/auth.service';
 
 @Component({
 	selector: 'app-unauthorized-component',
 	templateUrl: './unauthorized.component.html'
 })
-export class UnauthorizedComponent implements AfterViewInit {
+export class UnauthorizedComponent extends BaseComponent implements AfterViewInit {
 	@Input()
 	public message: string;
 	constructor(
 		private authService: AuthService,
 		private route: ActivatedRoute,
 		private router: Router
-	) { }
+	) { super(); }
 
 	ngAfterViewInit() {
 		const returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
@@ -21,11 +23,13 @@ export class UnauthorizedComponent implements AfterViewInit {
 		if (!principal) {
 			this.router.navigate(['/login'], { queryParams: { returnUrl: returnUrl } });
 		} else {
-			this.authService.me().subscribe(
+			this.authService.me()
-				result => {
+				.pipe(takeUntil(this._destroyed))
-					if (!result) { this.router.navigate(['/login'], { queryParams: { returnUrl: returnUrl } }); } else { this.router.navigate(['/']); }
+				.subscribe(
-				},
+					result => {
-				err => console.error('An error occurred', err));
+						if (!result) { this.router.navigate(['/login'], { queryParams: { returnUrl: returnUrl } }); } else { this.router.navigate(['/']); }
+					},
+					err => console.error('An error occurred', err));
 		}
 	}
 }

dmp-frontend/src/app/user-management/login/b2access/b2access-login.component.ts

@@ -1,25 +1,29 @@
-import { LoginService } from '../../utilties/login-service';
 import { Component, OnInit } from '@angular/core';
-import { Router, ActivatedRoute, Params } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
+import { takeUntil } from 'rxjs/operators';
+import { BaseComponent } from '../../../core/common/base/base.component';
+import { LoginService } from '../../utilties/login-service';
 
 @Component({
 	selector: 'app-b2access-login',
 	templateUrl: './b2access-login.component.html',
 })
-export class B2AccessLoginComponent implements OnInit {
+export class B2AccessLoginComponent extends BaseComponent implements OnInit {
 
 	constructor(
 		private router: Router,
 		private route: ActivatedRoute,
 		private loginService: LoginService
 	) {
-
+		super();
 	}
 
 	ngOnInit(): void {
-		this.route.queryParams.subscribe((data: any) => {
+		this.route.queryParams
-			if (!data['code']) { this.loginService.b2AccessGetAuthCode(); } else { this.loginService.b2AccessLogin(data['code']); }
+			.pipe(takeUntil(this._destroyed))
-		});
+			.subscribe((data: any) => {
+				if (!data['code']) { this.loginService.b2AccessGetAuthCode(); } else { this.loginService.b2AccessLogin(data['code']); }
+			});
 	}
 
 }

dmp-frontend/src/app/user-management/login/linkedin-login/linkedin-login.component.ts

@@ -1,25 +1,29 @@
-import { LoginService } from '../../utilties/login-service';
 import { Component, OnInit } from '@angular/core';
-import { Router, ActivatedRoute, Params } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
+import { takeUntil } from 'rxjs/operators';
+import { BaseComponent } from '../../../core/common/base/base.component';
+import { LoginService } from '../../utilties/login-service';
 
 @Component({
 	selector: 'app-linkedin-login',
 	templateUrl: './linkedin-login.component.html',
 })
-export class LinkedInLoginComponent implements OnInit {
+export class LinkedInLoginComponent extends BaseComponent implements OnInit {
 
 	constructor(
 		private router: Router,
 		private route: ActivatedRoute,
 		private loginService: LoginService
 	) {
-
+		super();
 	}
 
 	ngOnInit(): void {
-		this.route.queryParams.subscribe((data: any) => {
+		this.route.queryParams
-			if (!data['code']) { this.loginService.linkedinAuthorize(); } else { this.loginService.linkedInloginUser(data['code']); }
+			.pipe(takeUntil(this._destroyed))
-		});
+			.subscribe((data: any) => {
+				if (!data['code']) { this.loginService.linkedinAuthorize(); } else { this.loginService.linkedInloginUser(data['code']); }
+			});
 	}
 
 }

dmp-frontend/src/app/user-management/login/login.component.html

@@ -1,52 +1,48 @@
-<div class="container">
+<div class="row">
-	<div class="container">
+	<div class="col"></div>
-		<div class="row">
+	<div class="card col-auto">
-			<div class="row col-md-6 col-sm-6 col-md-offset-3 col-sm-offset-3">
+		<div class="card-header">
-				<div class="card col-md-8 col-md-offset-2">
+			<h4>Login</h4>
-					<div class="card-header">
+			<div class="social-btns">
-						<h4>Login</h4>
+				<button *ngIf="hasGoogleOauth()" mat-icon-button id="googleSignInButton">
-						<div class="social-btns">
+					<i class="fa fa-google-plus"></i>
-							<button *ngIf="hasGoogleOauth()" mat-icon-button id="googleSignInButton">
+				</button>
-								<i class="fa fa-google-plus"></i>
+				<button *ngIf="hasLinkedInOauth()" mat-icon-button>
-							</button>
+					<i class="fa fa-linkedin" (click)="linkedInLogin()"></i>
-							<button *ngIf="hasLinkedInOauth()" mat-icon-button>
+				</button>
-								<i class="fa fa-linkedin" (click)="linkedInLogin()"></i>
+				<button *ngIf="hasFacebookOauth()" mat-icon-button (click)="facebookLogin()">
-							</button>
+					<i class="fa fa-facebook-square"></i>
-							<button *ngIf="hasFacebookOauth()" mat-icon-button (click)="facebookLogin()">
+				</button>
-								<i class="fa fa-facebook-square"></i>
+				<button *ngIf="hasTwitterOauth()" mat-icon-button (click)="twitterLogin()">
-							</button>
+					<i class="fa fa-twitter"></i>
-							<button *ngIf="hasTwitterOauth()" mat-icon-button (click)="twitterLogin()">
+				</button>
-								<i class="fa fa-twitter"></i>
+			</div>
-							</button>
+			<button *ngIf="hasB2AccessOauth()" class="b2access-button" mat-icon-button (click)="b2AccessLogin()">
-						</div>
+				<span class="iconmedium"></span>
-						<button *ngIf="hasB2AccessOauth()" class="b2access-button" mat-icon-button (click)="b2AccessLogin()">
+				<span></span>
-							<span class="iconmedium"></span>
+			</button>
-							<span></span>
+		</div>
-						</button>
+		<div *ngIf="hasNativeLogin()">
-					</div>
+			<!-- <p class="tip">Or Be Classical</p> -->
-					<div *ngIf="hasNativeLogin()">
+			<div class="card-form">
-						<!-- <p class="tip">Or Be Classical</p> -->
+				<div class="form-row">
-						<div class="card-form">
+					<i class="material-icons">email</i>
-							<div class="form-row">
+					<mat-form-field color="accent">
-								<i class="material-icons">email</i>
+						<input type="text" [(ngModel)]="credential.username" matInput placeholder="Email address" />
-								<mat-form-field color="accent">
+					</mat-form-field>
-									<input type="text" [(ngModel)]="credential.username" matInput placeholder="Email address" />
+				</div>
-								</mat-form-field>
+				<div class="form-row">
-							</div>
+					<i class="material-icons">lock_outline</i>
-							<div class="form-row">
+					<mat-form-field color="accent">
-								<i class="material-icons">lock_outline</i>
+						<input type="password" [(ngModel)]="credential.secret" matInput placeholder="Password" />
-								<mat-form-field color="accent">
+					</mat-form-field>
-									<input type="password" [(ngModel)]="credential.secret" matInput placeholder="Password" />
-								</mat-form-field>
-							</div>
-						</div>
-						<div class="card-footer">
-							<button mat-button (click)="nativeLogin()">LOGIN</button>
-						</div>
-					</div>
-					<p>You dont need to have a registered account for OpenDMP</p>
 				</div>
 			</div>
+			<div class="card-footer">
+				<button mat-button (click)="nativeLogin()">LOGIN</button>
+			</div>
 		</div>
+		<p>You dont need to have a registered account for OpenDMP</p>
 	</div>
+	<div class="col"></div>
 </div>

dmp-frontend/src/app/user-management/login/twitter-login/twitter-login.component.ts

@@ -1,23 +1,27 @@
-import { LoginService } from '../../utilties/login-service';
-import { ActivatedRoute, Router } from '@angular/router';
 import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { takeUntil } from 'rxjs/operators';
+import { BaseComponent } from '../../../core/common/base/base.component';
+import { LoginService } from '../../utilties/login-service';
 @Component({
 	selector: 'app-twitter-login',
 	templateUrl: './twitter-login.component.html',
 })
-export class TwitterLoginComponent implements OnInit {
+export class TwitterLoginComponent extends BaseComponent implements OnInit {
 	constructor(
 		private router: Router,
 		private route: ActivatedRoute,
 		private loginService: LoginService
 	) {
-
+		super();
 	}
 
 	ngOnInit(): void {
-		this.route.queryParams.subscribe((data: any) => {
+		this.route.queryParams
-			if (!data['oauth_token'] && !data['oauth_verifier']) { this.loginService.twitterAuthorize(); } else { this.loginService.twitterLogin(data['oauth_token'], data['oauth_verifier']); }
+			.pipe(takeUntil(this._destroyed))
-		});
+			.subscribe((data: any) => {
+				if (!data['oauth_token'] && !data['oauth_verifier']) { this.loginService.twitterAuthorize(); } else { this.loginService.twitterLogin(data['oauth_token'], data['oauth_verifier']); }
+			});
 	}
 
 }

dmp-frontend/src/app/user-management/utilties/login-service.ts

@@ -3,7 +3,9 @@ import { Injectable, NgZone, Optional } from '@angular/core';
 import { MatSnackBar } from '@angular/material';
 import { ActivatedRoute, Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
+import { takeUntil } from 'rxjs/operators';
 import { environment } from '../../../environments/environment';
+import { BaseService } from '../../core/common/base/base.service';
 import { Credential } from '../../models/login/Credential';
 import { LoginProviders } from '../../models/login/LoginInfo';
 import { AuthService } from '../../services/auth/auth.service';
@@ -18,7 +20,7 @@ declare const FB: any;
 declare const IN: any;
 
 @Injectable()
-export class LoginService {
+export class LoginService extends BaseService {
 
 	private providers: LoginOptions[];
 	private auth2: any;
@@ -33,6 +35,7 @@ export class LoginService {
 		private cultureService: CultureService,
 		@Optional() private config: LoginServiceConfiguration
 	) {
+		super();
 		if (config) {
 			this.providers = config.loginProviders;
 		} else { this.providers = [LoginOptions.nativeLogin]; }
@@ -88,10 +91,12 @@ export class LoginService {
 			(googleUser) => {
 				const id_token = googleUser.getAuthResponse().id_token;
 				if (id_token) {
-					this.authService.login({ ticket: id_token, provider: LoginProviders.Google }).subscribe(
+					this.authService.login({ ticket: id_token, provider: LoginProviders.Google })
-						res => this.onLogInSuccess(res),
+						.pipe(takeUntil(this._destroyed))
-						error => this.onLogInError(error)
+						.subscribe(
-					);
+							res => this.onLogInSuccess(res),
+							error => this.onLogInError(error)
+						);
 				}
 			}, (error) => {
 			});
@@ -119,10 +124,12 @@ export class LoginService {
 	public facebookLogin() {
 		FB.login((response: any) => {
 			if (response.status === 'connected' || 'not_authorized') {
-				this.authService.login({ ticket: response.authResponse.accessToken, provider: LoginProviders.Facebook }).subscribe(
+				this.authService.login({ ticket: response.authResponse.accessToken, provider: LoginProviders.Facebook })
-					res => this.onLogInSuccess(res),
+					.pipe(takeUntil(this._destroyed))
-					error => this.onLogInError(error)
+					.subscribe(
-				);
+						res => this.onLogInSuccess(res),
+						error => this.onLogInError(error)
+					);
 			}
 		}, { scope: 'user_friends,email' });
 	}
@@ -140,10 +147,12 @@ export class LoginService {
 	}
 
 	public linkedInloginUser(code: string) {
-		this.authService.login({ ticket: code, provider: LoginProviders.LinkedIn }).subscribe(
+		this.authService.login({ ticket: code, provider: LoginProviders.LinkedIn })
-			res => this.onLogInSuccess(res),
+			.pipe(takeUntil(this._destroyed))
-			error => this.onLogInError(error)
+			.subscribe(
-		);
+				res => this.onLogInSuccess(res),
+				error => this.onLogInError(error)
+			);
 	}
 
 	/*
@@ -157,16 +166,20 @@ export class LoginService {
 		let headers = new HttpHeaders();
 		headers = headers.set('Content-Type', 'application/json');
 		headers = headers.set('Accept', 'application/json');
-		this.httpClient.get(environment.Server + 'auth/twitterRequestToken', { headers: headers }).subscribe((data: any) => {
+		this.httpClient.get(environment.Server + 'auth/twitterRequestToken', { headers: headers })
-			window.location.href = this.config.twitterConfiguration.oauthUrl + '?oauth_token=' + data.payload.value;
+			.pipe(takeUntil(this._destroyed))
-		});
+			.subscribe((data: any) => {
+				window.location.href = this.config.twitterConfiguration.oauthUrl + '?oauth_token=' + data.payload.value;
+			});
 	}
 
 	public twitterLogin(token: string, verifier: string) {
-		this.authService.login({ ticket: token, provider: LoginProviders.Twitter, data: verifier }).subscribe(
+		this.authService.login({ ticket: token, provider: LoginProviders.Twitter, data: verifier })
-			res => this.onLogInSuccess(res),
+			.pipe(takeUntil(this._destroyed))
-			error => this.onLogInError(error)
+			.subscribe(
-		);
+				res => this.onLogInSuccess(res),
+				error => this.onLogInError(error)
+			);
 	}
 
 	/*
@@ -186,11 +199,14 @@ export class LoginService {
 		headers = headers.set('Content-Type', 'application/json');
 		headers = headers.set('Accept', 'application/json');
 		this.httpClient.post(environment.Server + 'auth/b2AccessRequestToken', { code: code }, { headers: headers })
+			.pipe(takeUntil(this._destroyed))
 			.subscribe((data: any) => {
-				this.authService.login({ ticket: data.payload.accessToken, provider: LoginProviders.B2Accesss, data: null }).subscribe(
+				this.authService.login({ ticket: data.payload.accessToken, provider: LoginProviders.B2Accesss, data: null })
-					res => this.onLogInSuccess(res),
+					.pipe(takeUntil(this._destroyed))
-					error => this.onLogInError(error)
+					.subscribe(
-				);
+						res => this.onLogInSuccess(res),
+						error => this.onLogInError(error)
+					);
 			});
 	}
 
@@ -200,10 +216,12 @@ export class LoginService {
    */
 
 	public nativeLogin(credentials: Credential) {
-		this.authService.nativeLogin(credentials).subscribe(
+		this.authService.nativeLogin(credentials)
-			res => this.onLogInSuccess(res),
+			.pipe(takeUntil(this._destroyed))
-			error => this.onLogInError(error)
+			.subscribe(
-		);
+				res => this.onLogInSuccess(res),
+				error => this.onLogInError(error)
+			);
 	}
 
 

dmp-frontend/src/app/users/activity/recent-activity.component.ts

@@ -1,21 +1,10 @@
-import { DataTableRequest } from '../../models/data-table/DataTableRequest';
+import { Component, OnInit } from '@angular/core';
-import { UserErrorModel } from '../../models/users/UserErrorModel';
-import { UserReferenceService } from '../../services/user-reference/user-reference-data.service';
-import { UserListingModel } from '../../models/users/UserListingModel';
-import { SnackBarNotificationComponent } from '../../shared/components/notificaiton/snack-bar-notification.component';
-import { UserCriteria } from '../../models/criteria/users/UserCriteria';
-import { UserCriteriaErrorModel } from '../../models/criteria/users/UserCriteriaErrorModel';
-import { Observable } from 'rxjs/Rx';
-import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core';
-import { UsersCriteriaComponent } from '../../shared/components/criteria/users/users-criteria.component';
 import { Router } from '@angular/router';
-import { Principal } from '../../models/login/Principal';
+import { takeUntil } from 'rxjs/operators';
-import { MatPaginator, MatSort, MatSnackBar } from '@angular/material';
+import { BaseComponent } from '../../core/common/base/base.component';
-import { TranslateService } from '@ngx-translate/core';
+import { UserReferenceService } from '../../services/user-reference/user-reference-data.service';
-import { DataSource } from '@angular/cdk/table';
 import { RecentActivityTypes } from '../../users/activity/RecentActivityTypes';
 
-
 @Component({
 	selector: 'app-recent-activity',
 	templateUrl: './recent-activity.component.html',
@@ -24,7 +13,7 @@ import { RecentActivityTypes } from '../../users/activity/RecentActivityTypes';
 		UserReferenceService
 	]
 })
-export class RecentActivityComponent implements OnInit {
+export class RecentActivityComponent extends BaseComponent implements OnInit {
 
 	datasetActivities: any[];
 	projectActivities: any[];
@@ -33,14 +22,16 @@ export class RecentActivityComponent implements OnInit {
 	constructor(
 		private router: Router,
 		private userReferenceService: UserReferenceService
-	) { }
+	) { super(); }
 
 	ngOnInit() {
-		this.userReferenceService.getRecentActivity().subscribe(response => {
+		this.userReferenceService.getRecentActivity()
-			this.datasetActivities = response['recentDatasetActivities'];
+			.pipe(takeUntil(this._destroyed))
-			this.dmpActivities = response['recentDmpActivities'];
+			.subscribe(response => {
-			this.projectActivities = response['recentProjectActivities'];
+				this.datasetActivities = response['recentDatasetActivities'];
-		});
+				this.dmpActivities = response['recentDmpActivities'];
+				this.projectActivities = response['recentProjectActivities'];
+			});
 	}
 
 	redirect(id: string, type: RecentActivityTypes) {

dmp-frontend/src/app/users/components/roles/user-role-editor.component.html

@@ -3,7 +3,7 @@
 		<mat-select formControlName="appRoles" multiple required>
 			<mat-option *ngFor="let role of getPrincipalAppRoleValues()" [value]="role">{{getPrincipalAppRoleWithLanguage(role)}}</mat-option>
 		</mat-select>
-		<mat-error *ngIf="getFormControl('appRoles').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+		<mat-error *ngIf="getFormControl('appRoles').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 	</mat-form-field>
 
 	<button *ngIf="!this.nowEditing" mat-icon-button color="primary" type="button" (click)="editItem()">

dmp-frontend/src/app/users/components/roles/user-role-editor.component.ts

@@ -1,14 +1,16 @@
-import { Utilities } from '../../../utilities/utilities';
+import { Component, Input, OnInit } from '@angular/core';
+import { AbstractControl, FormArray, FormBuilder, FormControl, FormGroup } from '@angular/forms';
+import { MatSnackBar } from '@angular/material';
+import { TranslateService } from '@ngx-translate/core';
+import { takeUntil } from 'rxjs/operators';
+import { BaseComponent } from '../../../core/common/base/base.component';
+import { Principal } from '../../../models/login/Principal';
 import { UserErrorModel } from '../../../models/users/UserErrorModel';
 import { UserListingModel } from '../../../models/users/UserListingModel';
 import { UserReferenceService } from '../../../services/user-reference/user-reference-data.service';
 import { SnackBarNotificationComponent } from '../../../shared/components/notificaiton/snack-bar-notification.component';
-import { TranslateService } from '@ngx-translate/core';
+import { Utilities } from '../../../utilities/utilities';
-import { Component, OnInit, Input } from '@angular/core';
+import { Validation, ValidationContext } from '../../../utilities/validators/ValidationContext';
-import { FormControl, FormGroup, NgForm, FormArray, AbstractControl, FormBuilder } from '@angular/forms';
-import { ValidationContext, Validation } from '../../../utilities/validators/ValidationContext';
-import { Principal } from '../../../models/login/Principal';
-import { MatSnackBar } from '@angular/material';
 
 @Component({
 	selector: 'app-user-role-editor-component',
@@ -16,8 +18,7 @@ import { MatSnackBar } from '@angular/material';
 	styleUrls: ['./user-role-editor.component.scss'],
 	providers: [Utilities]
 })
-
+export class UserRoleEditorComponent extends BaseComponent implements OnInit {
-export class UserRoleEditorComponent implements OnInit {
 
 	@Input() public item: UserListingModel;
 	public formGroup: FormGroup = null;
@@ -29,8 +30,7 @@ export class UserRoleEditorComponent implements OnInit {
 		public formBuilder: FormBuilder,
 		public snackBar: MatSnackBar,
 		public utilities: Utilities
-	) {
+	) { super(); }
-	}
 
 	ngOnInit() {
 		if (this.errorModel == null) { this.errorModel = new UserErrorModel(); }
@@ -62,10 +62,12 @@ export class UserRoleEditorComponent implements OnInit {
 		modifiedItem.appRoles = this.getFormControl('appRoles').value;
 
 		if (!this.isFormValid()) { return; }
-		this.userService.updateRoles(modifiedItem).subscribe(
+		this.userService.updateRoles(modifiedItem)
-			(res) => this.onCallbackSuccess(),
+			.pipe(takeUntil(this._destroyed))
-			(error) => this.onCallbackError(error)
+			.subscribe(
-		);
+				(res) => this.onCallbackSuccess(),
+				(error) => this.onCallbackError(error)
+			);
 	}
 
 	editItem(): void {
@@ -155,9 +157,11 @@ export class UserRoleEditorComponent implements OnInit {
 
 	getPrincipalAppRoleWithLanguage(role: Principal.AppRole): string {
 		let result = '';
-		this.language.get(this.utilities.convertFromPrincipalAppRole(role)).subscribe((value: string) => {
+		this.language.get(this.utilities.convertFromPrincipalAppRole(role))
-			result = value;
+			.pipe(takeUntil(this._destroyed))
-		});
+			.subscribe((value: string) => {
+				result = value;
+			});
 		return result;
 	}
 }

dmp-frontend/src/app/users/components/users.component.ts

@@ -1,18 +1,15 @@
-import { DataTableRequest } from '../../models/data-table/DataTableRequest';
-import { UserErrorModel } from '../../models/users/UserErrorModel';
-import { UserReferenceService } from '../../services/user-reference/user-reference-data.service';
-import { UserListingModel } from '../../models/users/UserListingModel';
-import { SnackBarNotificationComponent } from '../../shared/components/notificaiton/snack-bar-notification.component';
-import { UserCriteria } from '../../models/criteria/users/UserCriteria';
-import { UserCriteriaErrorModel } from '../../models/criteria/users/UserCriteriaErrorModel';
-import { Observable } from 'rxjs/Rx';
-import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core';
-import { UsersCriteriaComponent } from '../../shared/components/criteria/users/users-criteria.component';
-import { Router } from '@angular/router';
-import { Principal } from '../../models/login/Principal';
-import { MatPaginator, MatSort, MatSnackBar } from '@angular/material';
-import { TranslateService } from '@ngx-translate/core';
 import { DataSource } from '@angular/cdk/table';
+import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
+import { MatPaginator, MatSnackBar, MatSort } from '@angular/material';
+import { Router } from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
+import { Observable } from 'rxjs/Rx';
+import { UserCriteria } from '../../models/criteria/users/UserCriteria';
+import { DataTableRequest } from '../../models/data-table/DataTableRequest';
+import { UserListingModel } from '../../models/users/UserListingModel';
+import { UserReferenceService } from '../../services/user-reference/user-reference-data.service';
+import { UsersCriteriaComponent } from '../../shared/components/criteria/users/users-criteria.component';
+import { SnackBarNotificationComponent } from '../../shared/components/notificaiton/snack-bar-notification.component';
 
 
 export class UsersDataSource extends DataSource<UserListingModel> {
@@ -30,7 +27,7 @@ export class UsersDataSource extends DataSource<UserListingModel> {
 	) {
 		super();
 
-		//this._paginator.page.subscribe((pageEvent: PageEvent) => {
+		//this._paginator.page.pipe(takeUntil(this._destroyed)).subscribe((pageEvent: PageEvent) => {
 		//    this.store.dispatch(new LoadPhotosRequestAction(pageEvent.pageIndex, pageEvent.pageSize))
 		//})
 	}
@@ -42,7 +39,7 @@ export class UsersDataSource extends DataSource<UserListingModel> {
 		];
 
 		// If the user changes the sort order, reset back to the first page.
-		//this._sort.matSortChange.subscribe(() => {
+		//this._sort.matSortChange.pipe(takeUntil(this._destroyed)).subscribe(() => {
 		//    this._paginator.pageIndex = 0;
 		//})
 
@@ -79,7 +76,7 @@ export class UsersDataSource extends DataSource<UserListingModel> {
 				//result.data.forEach((element: any) => {
 				//	const roles: String[] = [];
 				//	element.roles.forEach((role: any) => {
-				//		this._languageService.get(this._utilities.convertFromPrincipalAppRole(role)).subscribe(
+				//		this._languageService.get(this._utilities.convertFromPrincipalAppRole(role)).pipe(takeUntil(this._destroyed)).subscribe(
 				//			value => roles.push(value)
 				//		);
 				//	});

dmp-frontend/src/app/users/profile/user-profile.component.ts

@@ -1,26 +1,17 @@
-import { DataTableRequest } from '../../models/data-table/DataTableRequest';
+import { Component, OnDestroy, OnInit } from '@angular/core';
-import { UserErrorModel } from '../../models/users/UserErrorModel';
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
-import { UserReferenceService } from '../../services/user-reference/user-reference-data.service';
+import { ActivatedRoute, Params, Router } from '@angular/router';
-import { UserListingModel } from '../../models/users/UserListingModel';
-import { SnackBarNotificationComponent } from '../../shared/components/notificaiton/snack-bar-notification.component';
-import { UserCriteria } from '../../models/criteria/users/UserCriteria';
-import { UserCriteriaErrorModel } from '../../models/criteria/users/UserCriteriaErrorModel';
-import { Observable } from 'rxjs/Rx';
-import { Component, OnInit, AfterViewInit, ViewChild, OnDestroy } from '@angular/core';
-import { UsersCriteriaComponent } from '../../shared/components/criteria/users/users-criteria.component';
-import { Router, ActivatedRoute, Params } from '@angular/router';
-import { Principal } from '../../models/login/Principal';
-import { MatPaginator, MatSort, MatSnackBar } from '@angular/material';
 import { TranslateService } from '@ngx-translate/core';
-import { DataSource } from '@angular/cdk/table';
-import { RecentActivityTypes } from '../../users/activity/RecentActivityTypes';
-import { AuthService } from '../../services/auth/auth.service';
-import { DataManagementPlanModel } from '../../models/data-managemnt-plans/DataManagementPlanModel';
-import { CultureInfo } from '../../utilities/culture/models/culture-info';
-import { CultureService } from '../../utilities/culture/culture-service';
-import { FormControl, FormBuilder, FormGroup } from '@angular/forms';
 import * as moment from 'moment-timezone';
-import { User } from '../../models/invitation/User';
+import { takeUntil } from 'rxjs/operators';
+import { Observable } from 'rxjs/Rx';
+import { BaseComponent } from '../../core/common/base/base.component';
+import { DataManagementPlanModel } from '../../models/data-managemnt-plans/DataManagementPlanModel';
+import { UserListingModel } from '../../models/users/UserListingModel';
+import { AuthService } from '../../services/auth/auth.service';
+import { UserReferenceService } from '../../services/user-reference/user-reference-data.service';
+import { CultureService } from '../../utilities/culture/culture-service';
+import { CultureInfo } from '../../utilities/culture/models/culture-info';
 
 const availableLanguages: any[] = require('../../../assets/resources/language.json');
 
@@ -33,7 +24,7 @@ const availableLanguages: any[] = require('../../../assets/resources/language.js
 		CultureService
 	]
 })
-export class UserProfileComponent implements OnInit, OnDestroy {
+export class UserProfileComponent extends BaseComponent implements OnInit, OnDestroy {
 
 	user: Observable<UserListingModel>;
 	currentUserId: string;
@@ -51,26 +42,32 @@ export class UserProfileComponent implements OnInit, OnDestroy {
 		private language: TranslateService,
 		private cultureService: CultureService,
 		private translate: TranslateService,
-	) { }
+	) { super(); }
 
 	ngOnInit() {
-		this.route.params.subscribe((params: Params) => {
+		this.route.params
-			this.currentUserId = params['id'];
+			.pipe(takeUntil(this._destroyed))
-			const userId = params['id'] === this.authService.current().id ? 'me' : params['id'];
+			.subscribe((params: Params) => {
-			this.user = this.userReferenceService.getUser(userId).map(result => {
+				this.currentUserId = params['id'];
-				result['additionalinfo'] = JSON.parse(result['additionalinfo']);
+				const userId = params['id'] === this.authService.current().id ? 'me' : params['id'];
-				this.formGroup = new FormBuilder().group({
+				this.user = this.userReferenceService.getUser(userId).map(result => {
-					language: new FormControl(result['additionalinfo']['language'] ? availableLanguages.filter(x => x.value === result['additionalinfo']['language']['value']).pop() : ''),
+					result['additionalinfo'] = JSON.parse(result['additionalinfo']);
-					timezone: new FormControl(result['additionalinfo']['timezone']),
+					this.formGroup = new FormBuilder().group({
-					culture: new FormControl(result['additionalinfo']['culture'])
+						language: new FormControl(result['additionalinfo']['language'] ? availableLanguages.filter(x => x.value === result['additionalinfo']['language']['value']).pop() : ''),
+						timezone: new FormControl(result['additionalinfo']['timezone']),
+						culture: new FormControl(result['additionalinfo']['culture'])
+					});
+					//this.formGroup.get('language').valueChanges.pipe(takeUntil(this._destroyed)).subscribe(x => { if (x) this.translate.use(x.value) })
+					this.formGroup.get('timezone').valueChanges
+						.pipe(takeUntil(this._destroyed))
+						.subscribe(x => { if (x) { this.timezones = this._filterTimezone(x); } });
+					this.formGroup.get('culture').valueChanges
+						.pipe(takeUntil(this._destroyed))
+						.subscribe(x => { if (x) { this.cultures = this._filterCulture(x); } });
+					this.formGroup.disable();
+					return result;
 				});
-				//this.formGroup.get('language').valueChanges.subscribe(x => { if (x) this.translate.use(x.value) })
-				this.formGroup.get('timezone').valueChanges.subscribe(x => { if (x) { this.timezones = this._filterTimezone(x); } });
-				this.formGroup.get('culture').valueChanges.subscribe(x => { if (x) { this.cultures = this._filterCulture(x); } });
-				this.formGroup.disable();
-				return result;
 			});
-		});
 
 	}
 
@@ -122,17 +119,21 @@ export class UserProfileComponent implements OnInit, OnDestroy {
 	}
 
 	public lock() {
-		this.userReferenceService.updateUserSettings(this.formGroup.value).subscribe(
+		this.userReferenceService.updateUserSettings(this.formGroup.value)
-			x => {
+			.pipe(takeUntil(this._destroyed))
-				this.editMode = false;
+			.subscribe(
-				this.translate.use(this.formGroup.value.language);
+				x => {
-				this.authService.current().culture = this.formGroup.value.culture.name;
+					this.editMode = false;
-				this.formGroup.disable();
+					this.translate.use(this.formGroup.value.language);
-				this.authService.me().subscribe(result => window.location.reload());
+					this.authService.current().culture = this.formGroup.value.culture.name;
-			},
+					this.formGroup.disable();
-			error => {
+					this.authService.me()
-				console.log(error);
+						.pipe(takeUntil(this._destroyed))
-			});
+						.subscribe(result => window.location.reload());
+				},
+				error => {
+					console.log(error);
+				});
 	}
 
 }

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

@@ -382,10 +382,10 @@
 	},
 	"HOMEPAGE": {
 		"OPEN-DMPS": {
-			"STATS": "OpenDMP DashBoard"
+			"STATS": "OpenDMP Dashboard"
 		},
 		"MY-DMPS": {
-			"STATS": "My DashBoard"
+			"STATS": "My Dashboard"
 		}
 	},
 	"ABOUT": {

dmp-frontend/src/assets/scss/bootstrap-material.scss

@@ -1,10 +1,11 @@
 * {
+
 	&:active,
 	:focus {
-	  outline: none !important;
+		outline: none !important;
 	}
-  }
+}
-  
+
-  label {
+label {
 	margin-bottom: 0;
-  }
+}

dmp-frontend/src/blue-theme.scss

@@ -0,0 +1,140 @@
+@import '../node_modules/@angular/material/theming';
+
+$app-blue-theme-primary-palette: (
+	50: #e8eaf6,
+	100: #c5cae9,
+	200: #9fa8da,
+	300: #7986cb,
+	400: #5c6bc0,
+	500: #3f51b5,
+	600: #3949ab,
+	700: #303f9f,
+	800: #283593,
+	900: #1a237e,
+	A100: #8c9eff,
+	A200: #536dfe,
+	A400: #3d5afe,
+	A700: #304ffe,
+	contrast: (
+	  50: $black-87-opacity,
+	  100: $black-87-opacity,
+	  200: $black-87-opacity,
+	  300: white,
+	  400: white,
+	  500: $white-87-opacity,
+	  600: $white-87-opacity,
+	  700: $white-87-opacity,
+	  800: $white-87-opacity,
+	  900: $white-87-opacity,
+	  A100: $black-87-opacity,
+	  A200: white,
+	  A400: white,
+	  A700: $white-87-opacity,
+	),
+);
+
+$app-blue-theme-accent-palette: (
+	50: #fce4ec,
+  	100: #f8bbd0,
+  	200: #f48fb1,
+	300: #f06292,
+	400: #ec407a,
+	500: #e91e63,
+	600: #d81b60,
+	700: #c2185b,
+	800: #ad1457,
+	900: #880e4f,
+	A100: #ff80ab,
+	A200: #ff4081,
+	A400: #f50057,
+	A700: #c51162,
+	contrast: (
+		50: $black-87-opacity,
+		100: $black-87-opacity,
+		200: $black-87-opacity,
+		300: $black-87-opacity,
+		400: $black-87-opacity,
+		500: white,
+		600: white,
+		700: $white-87-opacity,
+		800: $white-87-opacity,
+		900: $white-87-opacity,
+		A100: $black-87-opacity,
+		A200: white,
+		A400: white,
+		A700: white,
+	)
+);
+
+$app-blue-theme-primary: mat-palette($app-blue-theme-primary-palette);
+$app-blue-theme-accent: mat-palette($app-blue-theme-accent-palette, A200, A100, A400);
+$app-blue-theme-warn: mat-palette($mat-red);
+
+$app-blue-theme-background: (
+	status-bar: map_get($mat-grey, 300),
+	app-bar:    map_get($mat-grey, 100),
+	background: map_get($mat-grey, 50),
+	hover:      rgba(black, 0.04),
+	card:       white,
+	dialog:     white,
+	disabled-button: rgba(black, 0.12),
+	raised-button: white,
+	focused-button: $dark-focused,
+	selected-button: map_get($mat-grey, 300),
+	selected-disabled-button: map_get($mat-grey, 400),
+	disabled-button-toggle: map_get($mat-grey, 200),
+	unselected-chip: map_get($mat-grey, 300),
+	disabled-list-option: map_get($mat-grey, 200),
+);
+
+$app-blue-theme-foreground: (
+	base:              black,
+	divider:           $dark-dividers,
+	dividers:          $dark-dividers,
+	disabled:          $dark-disabled-text,
+	disabled-button:   rgba(black, 0.26),
+	disabled-text:     $dark-disabled-text,
+	hint-text:         $dark-disabled-text,
+	secondary-text:    $dark-secondary-text,
+	icon:              rgba(black, 0.54),
+	icons:             rgba(black, 0.54),
+	text:              rgba(black, 0.87),
+	slider-min:        rgba(black, 0.87),
+	slider-off:        rgba(black, 0.26),
+	slider-off-active: rgba(black, 0.38),
+);
+
+$custom-theme: (
+	primary: $app-blue-theme-primary,
+	accent: $app-blue-theme-accent,
+	warn: $app-blue-theme-warn,
+	is-dark: false,
+	foreground: $app-blue-theme-foreground,
+	background: $app-blue-theme-background,
+);
+
+$custom-typography: mat-typography-config(
+	$font-family: 'Lato, regular',
+	$headline: mat-typography-level(32px, 48px, 700),
+	$body-1: mat-typography-level(16px, 24px, 500)
+);
+
+.blue-theme {
+	@include mat-core();
+
+	@include angular-material-theme($custom-theme);
+
+	// Override typography CSS classes (e.g., mat-h1, mat-display-1, mat-typography, etc.).
+	@include mat-base-typography($custom-typography);
+
+	// Override typography for a specific Angular Material components.
+	@include mat-checkbox-typography($custom-typography);
+
+	// Override typography for all Angular Material, including mat-base-typography and all components.
+	@include angular-material-typography($custom-typography);
+	//If you're using Material's theming, you can also pass in your typography config to the mat-core mixin:
+
+	// Override the typography in the core CSS.
+	@include mat-core($custom-typography);
+
+}

dmp-frontend/src/index.html

@@ -13,20 +13,14 @@
 	<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
 	<link rel="icon" type="image/x-icon" href="favicon.ico">
 	<script src="//connect.facebook.net/en_US/all.js"></script>
-	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
+	<script type="text/javascript" src="//platform.linkedin.com/in.js"></script>
-	<script type="text/javascript" src="//platform.linkedin.com/in.js">
-		api_key: 86bl8vfk77clh9
-	</script>
 	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 
-	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
-	 crossorigin="anonymous">
-
 </head>
 
 <body>
 	<app-root></app-root>
 </body>
 
-</html>
+</html>

dmp-frontend/src/styles.scss

@@ -1,4 +1,8 @@
-/* @import "~@angular/material/prebuilt-themes/indigo-pink.css"; */
+@import "~@angular/material/prebuilt-themes/indigo-pink.css";
+
+@import "~bootstrap/scss/bootstrap";
+//Material-Bootstrap configuration
+@import "assets/scss/bootstrap-material";
 
 @import '~@angular/material/theming';
 @import '~@covalent/core/theming/all-theme';
@@ -10,20 +14,18 @@ $theme: mat-light-theme($primary, $accent);
 // Include all theme styles for the components.
 @include angular-material-theme($theme);
 @include covalent-theme($theme);
+
 .snackbar-warning {
-  background-color: #F39010;
+	background-color: #F39010;
-  color: #F3EFEF;
+	color: #F3EFEF;
 }
 
 .snackbar-success {
-  background-color: #109204;
+	background-color: #109204;
-  color: #F3EFEF;
+	color: #F3EFEF;
 }
 
 .snackbar-error {
-  background-color: #CF1407;
+	background-color: #CF1407;
-  color: #111010;
+	color: #111010;
 }
-
-//Material-Bootstrap configuration
-@import "assets/scss/bootstrap-material";

dmp-frontend/static/goodbye.html

@@ -1 +0,0 @@
-goodbye world

dmp-frontend/static/index.html

@@ -1,29 +0,0 @@
-<!doctype html>
-<html>
-
-<head>
-
-	<meta charset="utf-8" />
-	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
-	<title>Data Management Plans Creator</title>
-	<base href="/">
-	<!-- Compiled and minified CSS -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
-
-    <!-- Compiled and minified JavaScript -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
-</head>
-
-<body>
-	 <nav>
-    <div class="nav-wrapper blue darken-3">
-      <a href="http://opendmp.eu" class="brand-logo" style="margin-top: 20px;">
-		<img src="/material/OpenDMP.png" alt="openDMP">
-	  </a>
-     helllooooooooooooooooo
-    </div>
-  </nav>
-</body>
-
-</html>

dmp-frontend/tsconfig.json

@@ -1,19 +1,13 @@
 {
-  "compileOnSave": false,
+	"compilerOptions": {
-  "compilerOptions": {
+		"target": "es5",
-    "outDir": "./dist/out-tsc",
+		"module": "commonjs",
-    "sourceMap": true,
+		"moduleResolution": "node",
-    "declaration": false,
+		"sourceMap": true,
-    "moduleResolution": "node",
+		"emitDecoratorMetadata": true,
-    "emitDecoratorMetadata": true,
+		"experimentalDecorators": true,
-    "experimentalDecorators": true,
+		"lib": ["es2017", "dom"],
-    "target": "es5",
+		"noImplicitAny": false,
-    "typeRoots": [
+		"suppressImplicitAnyIndexErrors": true
-      "node_modules/@types"
+	}
-    ],
-    "lib": [
-      "es2017",
-      "dom"
-    ]
-  }
 }

dmp-frontend/tslint.json

@@ -2,7 +2,19 @@
 	"rulesDirectory": [
 		"node_modules/codelyzer"
 	],
+	"extends": [
+		"rxjs-tslint-rules"
+	],
 	"rules": {
+		"rxjs-add": {
+			"severity": "error"
+		},
+		"rxjs-no-unused-add": {
+			"severity": "error"
+		},
+		"rxjs-no-unsafe-takeuntil": {
+			"severity": "error"
+		},
 		"arrow-return-shorthand": true,
 		"callable-types": true,
 		"class-name": true,