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,7 +1,9 @@
 // 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,
@@ -23,6 +25,10 @@ exports.config = {
 		require('ts-node').register({
 			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,12 +46,14 @@ export class DatasetProfileAdminListingComponent implements OnInit {
 		public route: ActivatedRoute,
 		public dataManagementPlanService: DataManagementPlanService
 	) {
-
+		super();
 	}
 
 
 	ngOnInit() {
-		this.route.params.subscribe((params: Params) => {
+		this.route.params
+			.pipe(takeUntil(this._destroyed))
+			.subscribe((params: Params) => {
 				this.dmpId = params['dmpId'];
 				if (this.dmpId != null) { this.setDmpTitle(this.dmpId); }
 				this.criteria.setCriteria(this.getDefaultCriteria(this.dmpId));
@@ -63,6 +64,7 @@ export class DatasetProfileAdminListingComponent implements OnInit {
 
 	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,11 +51,17 @@ 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)
+				.pipe(takeUntil(this._destroyed))
+				.subscribe((data) => {
 					this.dataModel = JsonSerializer.fromJSONObject(data, DatasetProfileModelAdmin);
 					this.form = this.dataModel.buildForm();
-				this.form.valueChanges.subscribe(change => {
+					this.form.valueChanges
-					this.datasetProfileAdminService.preview(this.dataModel).subscribe(dataset => {
+						.pipe(takeUntil(this._destroyed))
+						.subscribe(change => {
+							this.datasetProfileAdminService.preview(this.dataModel)
+								.pipe(takeUntil(this._destroyed))
+								.subscribe(dataset => {
 									const datasetModel = new DatasetWizardModel();
 									datasetModel.datasetProfileDefinition = JsonSerializer.fromJSONObject(dataset, DatasetProfileDefinitionModel);
 									this.dataWizardModel = datasetModel;
@@ -65,11 +71,17 @@ export class FormComponent implements OnInit, AfterViewInit {
 					this.form.updateValueAndValidity();
 				});
 		} else if (this.cloneId) {
-			this.datasetprofileAdmin.clone(this.cloneId).subscribe((data) => {
+			this.datasetprofileAdmin.clone(this.cloneId)
+				.pipe(takeUntil(this._destroyed))
+				.subscribe((data) => {
 					this.dataModel = JsonSerializer.fromJSONObject(data, DatasetProfileModelAdmin);
 					this.form = this.dataModel.buildForm();
-				this.form.valueChanges.subscribe(change => {
+					this.form.valueChanges
-					this.datasetProfileAdminService.preview(this.dataModel).subscribe(dataset => {
+						.pipe(takeUntil(this._destroyed))
+						.subscribe(change => {
+							this.datasetProfileAdminService.preview(this.dataModel)
+								.pipe(takeUntil(this._destroyed))
+								.subscribe(dataset => {
 									const datasetModel = new DatasetWizardModel();
 									datasetModel.datasetProfileDefinition = JsonSerializer.fromJSONObject(dataset, DatasetProfileDefinitionModel);
 									this.dataWizardModel = datasetModel;
@@ -124,11 +136,15 @@ 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)
+				.pipe(takeUntil(this._destroyed))
+				.subscribe(() => {
 					this.router.navigate(['/dataset-profile']);
 				});
 		} else {
-			this.createForm(data).subscribe(() => {
+			this.createForm(data)
+				.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,18 +15,20 @@ 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'])
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(x => {
 				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,15 +15,17 @@ 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
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(x =>
 				this.keepPageSelectionValid(x)
 			);
 	}

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,12 +39,14 @@ export class DatasetPublicListingComponent implements OnInit {
 		public route: ActivatedRoute,
 		public dataManagementPlanService: DataManagementPlanService
 	) {
-
+		super();
 	}
 
 	ngOnInit() {
 
-		this.route.params.subscribe(async (params: Params) => {
+		this.route.params
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(async (params: Params) => {
 				this.dmpId = params['dmpId'];
 				this.refresh();
 				if (this.dmpId != null) {
@@ -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,7 +31,9 @@ export class DataRepositoryReferencedModelHelperComponent implements OnInit {
 
 
 	send(value: any) {
-		this.dataRepositoryService.create(this.formGroup.value).subscribe(
+		this.dataRepositoryService.create(this.formGroup.value)
+			.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,7 +31,9 @@ export class ExternalDatasetReferencedModelHelperComponent implements OnInit {
 
 
 	send(value: any) {
-		this.externalDatasetService.create(this.formGroup.value).subscribe(
+		this.externalDatasetService.create(this.formGroup.value)
+			.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,7 +31,9 @@ export class RegistryReferencedModelHelperComponent implements OnInit {
 
 
 	send(value: any) {
-		this.registryService.create(this.formGroup.value).subscribe(
+		this.registryService.create(this.formGroup.value)
+			.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,7 +31,9 @@ export class ServicesReferencedModelHelperComponent implements OnInit {
 
 
 	send() {
-		this.registryService.create(this.formGroup.value).subscribe(
+		this.registryService.create(this.formGroup.value)
+			.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,7 +140,9 @@ 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()
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(result => {
 				this.externalSourcesConfiguration = result;
 				this.externalSourcesConfiguration.dataRepositories.push({ key: '', label: 'All' });
 				this.externalSourcesConfiguration.externalDatasets.push({ key: '', label: 'All' });
@@ -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,14 +238,18 @@ 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
+				.pipe(takeUntil(this._destroyed))
+				.subscribe(x => {
 					this.loadDatasetProfiles();
 				});
 		}
 	}
 
 	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.stepper.selectedIndex = 2; }
 			});
@@ -257,7 +267,9 @@ 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)
+				.pipe(takeUntil(this._destroyed))
+				.subscribe(items => {
 					this.availableProfiles = JsonSerializer.fromJSONArray(items, DatasetProfileModel);
 				});
 		}
@@ -270,7 +282,9 @@ 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)
+				.pipe(takeUntil(this._destroyed))
+				.subscribe(item => {
 					this.datasetWizardModel.datasetProfileDefinition = JsonSerializer.fromJSONObject(item, DatasetProfileDefinitionModel);
 					this.datasetProfileDefinitionModel = this.datasetWizardModel.datasetProfileDefinition;
 					this.formGroup.addControl('datasetProfileDefinition', this.datasetProfileDefinitionModel.buildForm());
@@ -289,9 +303,13 @@ export class DatasetWizardComponent implements OnInit, AfterViewInit, IBreadCrum
 	}
 
 	onSubmit(): void {
-		this.datasetWizardService.createDataset(this.formGroup.value).subscribe(
+		this.datasetWizardService.createDataset(this.formGroup.value)
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(
 				complete => {
-				this.datasetWizardService.getSingle(complete.id).subscribe(
+					this.datasetWizardService.getSingle(complete.id)
+						.pipe(takeUntil(this._destroyed))
+						.subscribe(
 							result => {
 								this.datasetWizardModel = JsonSerializer.fromJSONObject(result, DatasetWizardModel);
 							}
@@ -303,7 +321,9 @@ export class DatasetWizardComponent implements OnInit, AfterViewInit, IBreadCrum
 	}
 
 	submit() {
-		this.datasetWizardService.createDataset(this.formGroup.value).subscribe(data => {
+		this.datasetWizardService.createDataset(this.formGroup.value)
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(data => {
 				this.router.navigateByUrl('/datasets/dmp/' + this.formGroup.get('dmp').value.id);
 			});
 	}
@@ -339,7 +359,9 @@ export class DatasetWizardComponent implements OnInit, AfterViewInit, IBreadCrum
 	}
 
 	downloadPDF(): void {
-		this.datasetWizardService.downloadPDF(this.itemId).subscribe(response => {
+		this.datasetWizardService.downloadPDF(this.itemId)
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(response => {
 				const blob = new Blob([response.body], { type: 'application/pdf' });
 				const filename = this.getFilenameFromContentDispositionHeader(response.headers.get('Content-Disposition'));
 
@@ -348,7 +370,9 @@ export class DatasetWizardComponent implements OnInit, AfterViewInit, IBreadCrum
 	}
 
 	downloadXML(): void {
-		this.datasetWizardService.downloadXML(this.itemId).subscribe(response => {
+		this.datasetWizardService.downloadXML(this.itemId)
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(response => {
 				const blob = new Blob([response.body], { type: 'application/xml' });
 				const filename = this.getFilenameFromContentDispositionHeader(response.headers.get('Content-Disposition'));
 
@@ -416,7 +440,9 @@ export class DatasetWizardComponent implements OnInit, AfterViewInit, IBreadCrum
 
 			}
 		});
-		dialogRef.afterClosed().subscribe(result => {
+		dialogRef.afterClosed()
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(result => {
 				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());
@@ -431,7 +457,9 @@ export class DatasetWizardComponent implements OnInit, AfterViewInit, IBreadCrum
 
 			}
 		});
-		dialogRef.afterClosed().subscribe(result => {
+		dialogRef.afterClosed()
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(result => {
 				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());
@@ -446,7 +474,9 @@ export class DatasetWizardComponent implements OnInit, AfterViewInit, IBreadCrum
 
 			}
 		});
-		dialogRef.afterClosed().subscribe(result => {
+		dialogRef.afterClosed()
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(result => {
 				if (!result) { return; }
 				const externalDatasetModel = new ExternalDatasetModel(result.id, result.abbreviation, result.label, result.reference);
 				(<FormArray>this.formGroup.get('externalDatasets')).push(externalDatasetModel.buildForm());
@@ -461,7 +491,9 @@ export class DatasetWizardComponent implements OnInit, AfterViewInit, IBreadCrum
 
 			}
 		});
-		dialogRef.afterClosed().subscribe(result => {
+		dialogRef.afterClosed()
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(result => {
 				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());
@@ -474,7 +506,9 @@ 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)
+				.pipe(takeUntil(this._destroyed))
+				.subscribe(x => {
 					this.editMode = true;
 					this.viewOnly = false;
 					this.datasetWizardModel.status = DatasetStatus.Draft;

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,13 +51,15 @@ export class DatasetListingComponent implements OnInit, IBreadCrumbComponent {
 		public dataManagementPlanService: DataManagementPlanService,
 		public utilities: Utilities
 	) {
-
+		super();
 	}
 
 
 	ngOnInit() {
 
-		this.route.params.subscribe(async (params: Params) => {
+		this.route.params
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(async (params: Params) => {
 				this.dmpId = params['dmpId'];
 				this.criteria.setCriteria(this.getDefaultCriteria(this.dmpId));
 				this.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,15 +40,19 @@ export class DataManagementPlanProfileEditorComponent implements AfterViewInit {
 		private dialogService: TdDialogService,
 		private utilities: Utilities
 	) {
+		super();
 	}
 
 	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.dmpProfileService.getSingle(itemId).map(data => data as DataManagementPlanProfileModel)
+						.pipe(takeUntil(this._destroyed))
 						.subscribe(data => {
 							this.dataManagementPlanProfileModel = JsonSerializer.fromJSONObject(data, DataManagementPlanProfileModel);
 							this.baseErrorModel = this.dataManagementPlanProfileModel.errorModel;
@@ -74,7 +80,9 @@ export class DataManagementPlanProfileEditorComponent implements AfterViewInit {
 	}
 
 	onSubmit(): void {
-		this.dmpProfileService.createDataManagementPlan(this.formGroup.value).subscribe(
+		this.dmpProfileService.createDataManagementPlan(this.formGroup.value)
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(
 				complete => this.onCallbackSuccess(),
 				error => this.onCallbackError(error)
 			);
@@ -147,7 +155,9 @@ 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))
+			.pipe(takeUntil(this._destroyed))
+			.subscribe((value: string) => {
 				result = value;
 			});
 		return result;
@@ -162,7 +172,9 @@ 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))
+			.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,12 +43,14 @@ export class DataManagementPlanProfileListingComponent implements OnInit {
 		public route: ActivatedRoute,
 		public dataManagementPlanService: DataManagementPlanProfileService
 	) {
-
+		super();
 	}
 
 
 	ngOnInit() {
-		this.route.params.subscribe((params: Params) => {
+		this.route.params
+			.pipe(takeUntil(this._destroyed))
+			.subscribe((params: Params) => {
 				this.dmpId = params['dmpId'];
 				this.criteria.setCriteria(this.getDefaultCriteria());
 				this.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,11 +82,14 @@ 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
+			.pipe(takeUntil(this._destroyed))
+			.subscribe((params: Params) => {
 				const itemId = params['id'];
 
 				const projectRequestItem: RequestItem<ProjectCriteria> = new RequestItem();
@@ -135,6 +136,7 @@ export class DataManagementPlanEditorComponent implements AfterViewInit, IBreadC
 				if (itemId != null) {
 					this.isNew = false;
 					this.dataManagementPlanService.getSingle(itemId).map(data => data as DataManagementPlanModel)
+						.pipe(takeUntil(this._destroyed))
 						.subscribe(async data => {
 							this.dataManagementPlan = JsonSerializer.fromJSONObject(data, DataManagementPlanModel);
 							this.formGroup = this.dataManagementPlan.buildForm();
@@ -173,6 +175,7 @@ export class DataManagementPlanEditorComponent implements AfterViewInit, IBreadC
 			});
 		this.route
 			.queryParams
+			.pipe(takeUntil(this._destroyed))
 			.subscribe(params => {
 				this.createNewVersion = params['clone'];
 			});
@@ -196,7 +199,9 @@ export class DataManagementPlanEditorComponent implements AfterViewInit, IBreadC
 	}
 
 	onSubmit(): void {
-		this.dataManagementPlanService.createDataManagementPlan(this.formGroup.value).subscribe(
+		this.dataManagementPlanService.createDataManagementPlan(this.formGroup.value)
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(
 				complete => this.onCallbackSuccess(),
 				error => this.onCallbackError(error)
 			);
@@ -289,9 +294,13 @@ export class DataManagementPlanEditorComponent implements AfterViewInit, IBreadC
 			title: 'Confirm',
 			cancelButton: 'No',
 			acceptButton: 'Yes'
-		}).afterClosed().subscribe((accept: boolean) => {
+		}).afterClosed()
+			.pipe(takeUntil(this._destroyed))
+			.subscribe((accept: boolean) => {
 				if (accept) {
-				this.dataManagementPlanService.delete(id).subscribe(() => {
+					this.dataManagementPlanService.delete(id)
+						.pipe(takeUntil(this._destroyed))
+						.subscribe(() => {
 							this.router.navigate(['/dmps']);
 						});
 				} else {
@@ -304,7 +313,9 @@ export class DataManagementPlanEditorComponent implements AfterViewInit, IBreadC
 	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)
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(result => {
 				this.dataManagementPlan.definition = result.definition;
 			});
 	}
@@ -335,7 +346,9 @@ export class DataManagementPlanEditorComponent implements AfterViewInit, IBreadC
 	}
 
 	downloadXml(id: string) {
-		this.dataManagementPlanService.downloadXML(id).subscribe(response => {
+		this.dataManagementPlanService.downloadXML(id)
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(response => {
 				const blob = new Blob([response.body], { type: 'application/xml' });
 				const filename = this.getFilenameFromContentDispositionHeader(response.headers.get('Content-Disposition'));
 
@@ -344,7 +357,9 @@ export class DataManagementPlanEditorComponent implements AfterViewInit, IBreadC
 	}
 
 	downloadDocx(id: string) {
-		this.dataManagementPlanService.downloadDocx(id).subscribe(response => {
+		this.dataManagementPlanService.downloadDocx(id)
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(response => {
 				const blob = new Blob([response.body], { type: 'application/octet-stream' });
 				const filename = this.getFilenameFromContentDispositionHeader(response.headers.get('Content-Disposition'));
 
@@ -353,7 +368,9 @@ export class DataManagementPlanEditorComponent implements AfterViewInit, IBreadC
 	}
 
 	downloadPDF(id: string) {
-		this.dataManagementPlanService.downloadPDF(id).subscribe(response => {
+		this.dataManagementPlanService.downloadPDF(id)
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(response => {
 				const blob = new Blob([response.body], { type: 'application/octet-stream' });
 				const filename = this.getFilenameFromContentDispositionHeader(response.headers.get('Content-Disposition'));
 
@@ -384,7 +401,9 @@ 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)
+				.pipe(takeUntil(this._destroyed))
+				.subscribe(x => {
 					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,7 +45,9 @@ 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)
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(result => {
 				this.datasetsFinalised = result;
 				this.createFormGroup();
 			});
@@ -57,7 +59,9 @@ 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)
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(result => {
 				this.datasetsDraft = result;
 			});
 	}

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,11 +46,13 @@ export class DataManagementPlanListingComponent implements OnInit, IBreadCrumbCo
 		public dialog: MatDialog,
 		public utilities: Utilities
 	) {
-
+		super();
 	}
 
 	ngOnInit() {
-		this.route.params.subscribe(async params => {
+		this.route.params
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(async params => {
 				let projectLabel;
 				if (params['projectId']) {
 					this.projectId = params['projectId'];

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,9 +36,12 @@ export class DataManagementPlanWizardComponent implements OnInit, IBreadCrumbCom
 
 	ngOnInit(): void {
 
-		this.route.params.subscribe((params: Params) => {
+		this.route.params
+			.pipe(takeUntil(this._destroyed))
+			.subscribe((params: Params) => {
 				this.itemId = params['id'];
 				this.dataManagementPlanService.getSingle(this.itemId).map(data => data as DataManagementPlanModel)
+					.pipe(takeUntil(this._destroyed))
 					.subscribe(data => {
 						this.dataManagementPlan = JsonSerializer.fromJSONObject(data, DataManagementPlanModel);
 						this.isClone = this.route.snapshot.data.clone;
@@ -48,12 +54,16 @@ export class DataManagementPlanWizardComponent implements OnInit, IBreadCrumbCom
 
 	submit() {
 		if (this.isClone) {
-			this.dataManagementPlanService.clone(this.formGroup.getRawValue(), this.itemId).subscribe(
+			this.dataManagementPlanService.clone(this.formGroup.getRawValue(), this.itemId)
+				.pipe(takeUntil(this._destroyed))
+				.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)
+				.pipe(takeUntil(this._destroyed))
+				.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,7 +104,9 @@ export class DataManagementPlanWizardEditorComponent implements OnInit {
 		const organisationRequestItem: RequestItem<BaseCriteria> = new RequestItem();
 		organisationRequestItem.criteria = new BaseCriteria();
 
-		this.route.data.subscribe(value => {
+		this.route.data
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(value => {
 				if (value.clone === false && this.formGroup.get('label').value) {
 					this.labelDisabled = true;
 				}
@@ -132,7 +132,9 @@ export class DataManagementPlanWizardEditorComponent implements OnInit {
 	}
 
 	onSubmit(): void {
-		this.dataManagementPlanService.createDataManagementPlan(this.formGroup.getRawValue()).subscribe(
+		this.dataManagementPlanService.createDataManagementPlan(this.formGroup.getRawValue())
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(
 				complete => this.onCallbackSuccess(),
 				error => this.onCallbackError(error)
 			);

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,12 +46,14 @@ export class DatasetWizardListingComponent implements OnInit {
 		public route: ActivatedRoute,
 		public dataManagementPlanService: DataManagementPlanService
 	) {
-
+		super();
 	}
 
 
 	ngOnInit() {
-		this.route.params.subscribe((params: Params) => {
+		this.route.params
+			.pipe(takeUntil(this._destroyed))
+			.subscribe((params: Params) => {
 				if (this.dmpId != null) {
 					if (params['dmpLabel'] !== undefined) {
 						this.titlePrefix = 'for ' + params['dmpLabel'];
@@ -65,7 +63,9 @@ export class DatasetWizardListingComponent implements OnInit {
 		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)
+			.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,22 +16,26 @@ 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
+				.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,7 +81,9 @@ 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
+			.pipe(takeUntil(this._destroyed))
+			.subscribe((fragment: string) => {
 				const self = this;
 				setTimeout(function () { self.scrollTo(fragment); });
 			});
@@ -90,7 +91,9 @@ export class DynamicFormComponent implements OnInit, AfterViewInit {
 
 	ngAfterViewInit() {
 		this.visibilityRulesService.triggerVisibilityEvaluation();
-		this.route.queryParams.subscribe((params) => {
+		this.route.queryParams
+			.pipe(takeUntil(this._destroyed))
+			.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,18 +1,18 @@
 <div class="main-panel" id="main-panel">
 	<div>
 		<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>
+			<div class="col-auto">
 				<h3 *ngIf="!this.isAuthenticated()">{{ 'HOMEPAGE.OPEN-DMPS.STATS' | translate }}</h3>
 				<h3 *ngIf="this.isAuthenticated()">{{ 'HOMEPAGE.MY-DMPS.STATS' | translate }}</h3>
 			</div>
+			<div class="col"></div>
 		</div>
-
 	</div>
 	<div class="row" style="margin-top: 30px">
-    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 col-md-offset-1">
+		<div class="col"></div>
-      <app-figurecard title={{dashboardStatisticsData.totalDataManagementPlanCount}} headerIcon="mode_edit" [category]="this.isAuthenticated() ? 'DASHBOARD.MY-DMPS' : 'DASHBOARD.DMPS' "
+		<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
-        routelLink='/dmps' buttonRedirectLink="/dmps/new" buttonTitle="Create New DMP" footerIcon="open_in_new" linearColor="linear-gradient(60deg, #ef5350, #e53935)"
+			<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)">
-        boxShadow="0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(244, 67, 54, 0.4)">
 			</app-figurecard>
 			<mat-card *ngIf="this.isAuthenticated()" class="example-card">
 				<mat-card-header>
@@ -35,9 +35,7 @@
 			</mat-card>
 		</div>
 		<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"
-        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)">
 			</app-figurecard>
 			<mat-card *ngIf="this.isAuthenticated()" class="example-card">
 				<mat-card-header>
@@ -60,9 +58,7 @@
 			</mat-card>
 		</div>
 		<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
-      <app-figurecard title={{dashboardStatisticsData.totalDataSetCount}} headerIcon="subject" [category]="this.isAuthenticated() ? 'DASHBOARD.MY-DATASETS' : 'DASHBOARD.DATASETS'"
+			<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)">
-        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)">
 			</app-figurecard>
 			<mat-card *ngIf="this.isAuthenticated()" class="example-card">
 				<mat-card-header>
@@ -84,5 +80,6 @@
 				</mat-card-content>
 			</mat-card>
 		</div>
+		<div class="col"></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,7 +56,9 @@ export class HomepageComponent implements OnInit {
 	ngOnInit() {
 
 		if (this.isAuthenticated()) {
-			this.userReferenceService.getRecentActivity().subscribe(response => {
+			this.userReferenceService.getRecentActivity()
+				.pipe(takeUntil(this._destroyed))
+				.subscribe(response => {
 					this.datasetActivities = response['recentDatasetActivities'];
 					this.dmpActivities = response['recentDmpActivities'];
 					this.projectActivities = response['recentProjectActivities'];
@@ -70,12 +75,16 @@ export class HomepageComponent implements OnInit {
 		};
 
 		if (!this.isAuthenticated()) {
-			this.dashBoardService.getStatistics().subscribe(results => {
+			this.dashBoardService.getStatistics()
+				.pipe(takeUntil(this._destroyed))
+				.subscribe(results => {
 					//let data = results['payload'];
 					this.dashboardStatisticsData = JsonSerializer.fromJSONObject(results, DashboardStatisticsModel);
 				});
 		} else {
-			this.dashBoardService.getStatisticsSpecificuser().subscribe(results => {
+			this.dashBoardService.getStatisticsSpecificuser()
+				.pipe(takeUntil(this._destroyed))
+				.subscribe(results => {
 					this.dashboardStatisticsData = JsonSerializer.fromJSONObject(results, DashboardStatisticsModel);
 				});
 		}

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

@@ -4,13 +4,12 @@
 	<form *ngIf="formGroup" (ngSubmit)="formSubmit()" [formGroup]="formGroup">
 		<mat-card>
 			<mat-card-header>
-				<table class="logo-table  col-md-12">
+				<div class="col-12 row">
+					<table class="logo-table col-auto">
 						<tr>
 							<td>
-							<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/any?type=jpg'">
-							 [src]="host+'files/any?type=jpg'">
+								<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">
-							<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">
 							</td>
 							<td>
 								<input class="hidden" type="file" #imgFileInput (change)="previewImage($event)" accept="image/*" />
@@ -18,67 +17,68 @@
 							</td>
 						</tr>
 					</table>
-				<div class="fill-space"></div>
+					<div class="col"></div>
-				<div *ngIf="!isNew">
+					<div *ngIf="!isNew" class="project-editor-header-actions col-auto">
-					<button *ngIf="!editMode && !isExternalProject()" mat-icon-button (click)="enableForm()">
+						<div class="row actions-row">
+							<div class="col-auto" *ngIf="!editMode && !isExternalProject()">
+								<button mat-icon-button (click)="enableForm()">
 									<mat-icon class="mat-24">edit</mat-icon>
 								</button>
-					<button *ngIf="editMode && !isExternalProject()" mat-icon-button (click)="disableForm()">
+							</div>
+							<div class="col-auto" *ngIf="editMode && !isExternalProject()">
+								<button mat-icon-button (click)="disableForm()">
 									<mat-icon class="mat-24">lock</mat-icon>
 								</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 {
+.project-editor {
-	width: 100%;
+
+	.project-editor-header-actions {
+		display: flex;
+		align-items: center;
 	}
 
-.input-table {
-	table-layout: fixed;
-}
 
 	.logo-table {
 		table-layout: fixed;
 		display: inline-block;
+
 		td {
 			padding: 3px;
 		}
 	}
 
-.table-card .mat-grid-tile {
+	// .table-card .mat-grid-tile {
-	background: rgba(0, 0, 0, 0.32);
+	// 	background: rgba(0, 0, 0, 0.32);
-}
+	// }
 
-.project-editor {
+	// .project-editor {
-	.fill-space {
+	// 	.fill-space {
-		flex: 1 1 auto;
+	// 		flex: 1 1 auto;
-	}
+	// 	}
-	.mat-card {
-		margin: 16px 0;
-	}
-	p {
-		margin: 16px;
-	}
-	.left-button {
-		float: left;
-	}
-	.right-button {
-		float: right;
-	}
-	.description-area {
-		height: 100px;
-	}
-}
 
-h3{
+	// 	.mat-card {
-  margin-top: 0px;
+	// 		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 !important;
+		display: none;
+	}
 }

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,16 +41,19 @@ export class ProjectEditorComponent implements OnInit, IBreadCrumbComponent {
 		private uploaderService: ProjectFileUploaderService,
 		private languageResolverService: LanguageResolverService
 	) {
-
+		super();
 	}
 
 	ngOnInit() {
-		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.projectService.getSingle(itemId).map(data => data as ProjectModel)
+						.pipe(takeUntil(this._destroyed))
 						.subscribe(data => {
 							this.project = JsonSerializer.fromJSONObject(data, ProjectModel);
 							this.formGroup = this.project.buildForm(null, this.project.type === ProjectType.External || !this.editMode);
@@ -80,7 +84,9 @@ export class ProjectEditorComponent implements OnInit, IBreadCrumbComponent {
 	}
 
 	onSubmit(): void {
-		this.projectService.createProject(this.formGroup.value).subscribe(
+		this.projectService.createProject(this.formGroup.value)
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(
 				complete => this.onCallbackSuccess(),
 				error => this.onCallbackError(error)
 			);
@@ -110,15 +116,21 @@ export class ProjectEditorComponent implements OnInit, IBreadCrumbComponent {
 	}
 
 	public delete(): void {
-		this.language.get('GENERAL.DELETE-CONFIRMATION').subscribe((messages: any) => {
+		this.language.get('GENERAL.DELETE-CONFIRMATION')
+			.pipe(takeUntil(this._destroyed))
+			.subscribe((messages: any) => {
 				this.dialogService.openConfirm({
 					message: messages.MESSAGE,
 					title: messages.TITLE,
 					cancelButton: messages.NEGATIVE,
 					acceptButton: messages.POSITIVE
-			}).afterClosed().subscribe((accept: boolean) => {
+				}).afterClosed()
+					.pipe(takeUntil(this._destroyed))
+					.subscribe((accept: boolean) => {
 						if (accept) {
-					this.projectService.inactivate(this.project.id).subscribe(
+							this.projectService.inactivate(this.project.id)
+								.pipe(takeUntil(this._destroyed))
+								.subscribe(
 									complete => { this.router.navigate(['/projects']); },
 									error => this.onCallbackError(error)
 								);
@@ -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

@@ -24,7 +24,8 @@
 
 					<!-- Column Definition: Αbbreviation -->
 					<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' |
+							translate}}</mat-header-cell>
 						<mat-cell *matCellDef="let row"> {{row.abbreviation}} </mat-cell>
 					</ng-container>
 

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,7 +101,9 @@ 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 })
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(
 				res => this.onLogOutSuccess(res),
 				error => this.onLogOutError(error)
 			);

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,7 +51,9 @@ export class BreadCrumbResolverService {
 	}
 
 	resolveDependentComponents(items: Observable<BreadcrumbItem[]>, components: any[]): any[] {
-		items.subscribe(breadCrumbs => {
+		items
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(breadCrumbs => {
 				breadCrumbs.forEach(async item => {
 					const parentComponent = item.parentComponentName ? this.findComponent(item.parentComponentName) : null;
 					if (parentComponent && parentComponent.hasOwnProperty('breadCrumbs')) {

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

@@ -1,14 +1,19 @@
 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()
+				.pipe(takeUntil(this._destroyed))
+				.subscribe(result => {
 					result.forEach(item => {
 						this.languageData[item.key] = item.languageKey;
 					});
@@ -19,5 +24,4 @@ export class LanguageResolverService {
 	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,7 +31,9 @@ export class AddResearchersComponent implements OnInit {
 
 
 	send(value: any) {
-		this.researcherService.createResearcher(this.formGroup.value).subscribe(
+		this.researcherService.createResearcher(this.formGroup.value)
+			.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,12 +37,14 @@ export class AutoCompleteComponent implements OnInit, ErrorStateMatcher {
 	isUnchanged = true;
 
 	constructor() {
-
+		super();
 	}
 
 	ngOnInit() {
 		if (this.inputData.refreshEvent) {
-			this.inputData.refreshEvent.subscribe(x => {
+			this.inputData.refreshEvent
+				.pipe(takeUntil(this._destroyed))
+				.subscribe(x => {
 					if (x) {
 						this.formCtrl.patchValue(null);
 						this.textFormCtrl.patchValue(null);
@@ -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,11 +24,13 @@ 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()
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(data => {
 				this.profiles = JsonSerializer.fromJSONArray(data, DatasetProfileModel);
 			});
 	}

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,7 +70,9 @@ 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)
+				.pipe(takeUntil(this._destroyed))
+				.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,7 +76,9 @@ 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))
+			.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,8 +1,8 @@
-<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>
@@ -12,7 +12,7 @@
 			</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,7 +168,9 @@ 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)
+				.pipe(takeUntil(this._destroyed))
+				.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,30 +1,29 @@
-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
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(params => {
 				const id = params['id'];
-			this.invitationService.exchange(id).subscribe(result => {
+				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,20 +1,22 @@
-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',
 	templateUrl: 'invitation.component.html',
 
 })
-export class InvitationComponent implements OnInit {
+export class InvitationComponent extends BaseComponent implements OnInit {
 
 	public formGroup: FormGroup;
 
@@ -28,7 +30,7 @@ export class InvitationComponent implements OnInit {
 		public router: Router,
 		public dialogRef: MatDialogRef<InvitationComponent>,
 		@Inject(MAT_DIALOG_DATA) public data: any
-  ) { }
+	) { super(); }
 
 	ngOnInit(): void {
 		const invitation = new Invitation();
@@ -38,7 +40,9 @@ export class InvitationComponent implements OnInit {
 
 
 	send(value: any) {
-	this.invitationService.inviteUsers(this.formGroup.value).subscribe(
+		this.invitationService.inviteUsers(this.formGroup.value)
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(
 				null, null, () => this.dialogRef.close()
 			);
 	}
@@ -49,7 +53,9 @@ export class InvitationComponent implements OnInit {
 			this.filteredUsersAsync = true;
 			const request = new RequestItem<UserInvitationCriteria>();
 			request.criteria = { like: value };
-		this.invitationService.getUsers(request).subscribe(items => {
+			this.invitationService.getUsers(request)
+				.pipe(takeUntil(this._destroyed))
+				.subscribe(items => {
 					this.filteredUsers = JsonSerializer.fromJSONArray(items, User);
 					if (!this.filteredUsers || this.filteredUsers.length === 0) {
 						const user = new User();

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

@@ -1,20 +1,25 @@
-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)
+				.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,17 +17,23 @@ 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
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(event => {
 				if (event instanceof NavigationStart) {
-				this._helpContentService.getActivePageContent(event['url']).subscribe(
+					this._helpContentService.getActivePageContent(event['url'])
+						.pipe(takeUntil(this._destroyed))
+						.subscribe(
 							pageContent => this.shiftThroughContent(pageContent),
 							error => this.handleError(<any>error));
 				}

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,7 +23,9 @@ export class UnauthorizedComponent implements AfterViewInit {
 		if (!principal) {
 			this.router.navigate(['/login'], { queryParams: { returnUrl: returnUrl } });
 		} else {
-			this.authService.me().subscribe(
+			this.authService.me()
+				.pipe(takeUntil(this._destroyed))
+				.subscribe(
 					result => {
 						if (!result) { this.router.navigate(['/login'], { queryParams: { returnUrl: returnUrl } }); } else { this.router.navigate(['/']); }
 					},

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

@@ -1,23 +1,27 @@
-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
+			.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,23 +1,27 @@
-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
+			.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,8 +1,6 @@
-<div class="container">
-	<div class="container">
 <div class="row">
-			<div class="row col-md-6 col-sm-6 col-md-offset-3 col-sm-offset-3">
+	<div class="col"></div>
-				<div class="card col-md-8 col-md-offset-2">
+	<div class="card col-auto">
 		<div class="card-header">
 			<h4>Login</h4>
 			<div class="social-btns">
@@ -46,7 +44,5 @@
 		</div>
 		<p>You dont need to have a registered account for OpenDMP</p>
 	</div>
-			</div>
+	<div class="col"></div>
-		</div>
-	</div>
 </div>

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

@@ -1,21 +1,25 @@
-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
+			.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,7 +91,9 @@ 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 })
+						.pipe(takeUntil(this._destroyed))
+						.subscribe(
 							res => this.onLogInSuccess(res),
 							error => this.onLogInError(error)
 						);
@@ -119,7 +124,9 @@ 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 })
+					.pipe(takeUntil(this._destroyed))
+					.subscribe(
 						res => this.onLogInSuccess(res),
 						error => this.onLogInError(error)
 					);
@@ -140,7 +147,9 @@ export class LoginService {
 	}
 
 	public linkedInloginUser(code: string) {
-		this.authService.login({ ticket: code, provider: LoginProviders.LinkedIn }).subscribe(
+		this.authService.login({ ticket: code, provider: LoginProviders.LinkedIn })
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(
 				res => this.onLogInSuccess(res),
 				error => this.onLogInError(error)
 			);
@@ -157,13 +166,17 @@ 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 })
+			.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 })
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(
 				res => this.onLogInSuccess(res),
 				error => this.onLogInError(error)
 			);
@@ -186,8 +199,11 @@ 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 })
+					.pipe(takeUntil(this._destroyed))
+					.subscribe(
 						res => this.onLogInSuccess(res),
 						error => this.onLogInError(error)
 					);
@@ -200,7 +216,9 @@ export class LoginService {
    */
 
 	public nativeLogin(credentials: Credential) {
-		this.authService.nativeLogin(credentials).subscribe(
+		this.authService.nativeLogin(credentials)
+			.pipe(takeUntil(this._destroyed))
+			.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,10 +22,12 @@ export class RecentActivityComponent implements OnInit {
 	constructor(
 		private router: Router,
 		private userReferenceService: UserReferenceService
-	) { }
+	) { super(); }
 
 	ngOnInit() {
-		this.userReferenceService.getRecentActivity().subscribe(response => {
+		this.userReferenceService.getRecentActivity()
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(response => {
 				this.datasetActivities = response['recentDatasetActivities'];
 				this.dmpActivities = response['recentDmpActivities'];
 				this.projectActivities = response['recentProjectActivities'];

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,7 +62,9 @@ export class UserRoleEditorComponent implements OnInit {
 		modifiedItem.appRoles = this.getFormControl('appRoles').value;
 
 		if (!this.isFormValid()) { return; }
-		this.userService.updateRoles(modifiedItem).subscribe(
+		this.userService.updateRoles(modifiedItem)
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(
 				(res) => this.onCallbackSuccess(),
 				(error) => this.onCallbackError(error)
 			);
@@ -155,7 +157,9 @@ 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))
+			.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,10 +42,12 @@ 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
+			.pipe(takeUntil(this._destroyed))
+			.subscribe((params: Params) => {
 				this.currentUserId = params['id'];
 				const userId = params['id'] === this.authService.current().id ? 'me' : params['id'];
 				this.user = this.userReferenceService.getUser(userId).map(result => {
@@ -64,9 +57,13 @@ export class UserProfileComponent implements OnInit, OnDestroy {
 						timezone: new FormControl(result['additionalinfo']['timezone']),
 						culture: new FormControl(result['additionalinfo']['culture'])
 					});
-				//this.formGroup.get('language').valueChanges.subscribe(x => { if (x) this.translate.use(x.value) })
+					//this.formGroup.get('language').valueChanges.pipe(takeUntil(this._destroyed)).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('timezone').valueChanges
-				this.formGroup.get('culture').valueChanges.subscribe(x => { if (x) { this.cultures = this._filterCulture(x); } });
+						.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;
 				});
@@ -122,13 +119,17 @@ export class UserProfileComponent implements OnInit, OnDestroy {
 	}
 
 	public lock() {
-		this.userReferenceService.updateUserSettings(this.formGroup.value).subscribe(
+		this.userReferenceService.updateUserSettings(this.formGroup.value)
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(
 				x => {
 					this.editMode = false;
 					this.translate.use(this.formGroup.value.language);
 					this.authService.current().culture = this.formGroup.value.culture.name;
 					this.formGroup.disable();
-				this.authService.me().subscribe(result => window.location.reload());
+					this.authService.me()
+						.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,4 +1,5 @@
 * {
+
 	&:active,
 	:focus {
 		outline: none !important;

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,16 +13,10 @@
 	<!-- <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>

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,6 +14,7 @@ $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;
 	color: #F3EFEF;
@@ -24,6 +29,3 @@ $theme: mat-light-theme($primary, $accent);
 	background-color: #CF1407;
 	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": {
-    "outDir": "./dist/out-tsc",
+		"target": "es5",
-    "sourceMap": true,
+		"module": "commonjs",
-    "declaration": false,
 		"moduleResolution": "node",
+		"sourceMap": true,
 		"emitDecoratorMetadata": true,
 		"experimentalDecorators": true,
-    "target": "es5",
+		"lib": ["es2017", "dom"],
-    "typeRoots": [
+		"noImplicitAny": false,
-      "node_modules/@types"
+		"suppressImplicitAnyIndexErrors": true
-    ],
-    "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,