Add dataset from dmp editor 1st commit

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

@@ -34,11 +34,11 @@ export class DatasetProfileService extends BaseService {
 		return this.http.post<DatasetProfileEditorModel>(this.actionUrl + 'addDmp', data);
 	}
 
-	updateForm(id, data) {
+	updateForm(id, data): Observable<DatasetProfileEditorModel> {
 		return this.http.post<DatasetProfileEditorModel>(this.actionUrl + 'addDmp/' + id, data);
 	}
 
-	getDatasetProfileById(datasetProfileID) {
+	getDatasetProfileById(datasetProfileID): Observable<DatasetProfile> {
 		return this.http.get<DatasetProfile>(this.actionUrl + 'get/' + datasetProfileID);
 	}
 

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

@@ -209,7 +209,7 @@ export class RecentEditedActivityComponent extends BaseComponent implements OnIn
 				this.dmpModel.status = DmpStatus.Draft;
 				this.dmpFormGroup = this.dmpModel.buildForm();
 				if (!isNewVersion) {
-					this.formGroup.get('label').setValue(dmp.title + " New");
+					this.dmpFormGroup.get('label').setValue(dmp.title + " New");
 				}
 				this.openCloneDialog(isNewVersion);
 			});

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

@@ -179,7 +179,7 @@ export class RecentEditedDmpActivityComponent extends BaseComponent implements O
 				this.dmpModel.status = DmpStatus.Draft;
 				this.dmpFormGroup = this.dmpModel.buildForm();
 				if (!isNewVersion) {
-					this.formGroup.get('label').setValue(dmp.label + " New");
+					this.dmpFormGroup.get('label').setValue(dmp.label + " New");
 				}
 				this.openCloneDialog(isNewVersion);
 			});

dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.html

@@ -65,7 +65,8 @@
 								</mat-form-field>
 								<mat-form-field class="col-md-6">
 									<mat-select placeholder=" {{'DATASET-WIZARD.FIRST-STEP.PROFILE'| translate}}" [required]="true" formControlName="profile">
-										<mat-option *ngFor="let profile of availableProfiles" [value]="profile.id">
+										<!-- <mat-option *ngFor="let profile of availableProfiles" [value]="profile.id"> -->
+										<mat-option *ngFor="let profile of availableProfiles" [value]="profile">
 											{{profile.label}}
 										</mat-option>
 									</mat-select>

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

@@ -3,6 +3,19 @@
 		{{'DATASET-EDITOR.TITLE.INTRO' | translate}}
 	</div>
 	<div class="col-12 card">
+		<!-- Template Field -->
+		<div class="heading">1.0 {{'DATASET-EDITOR.FIELDS.PROFILE' | translate}}*</div>
+		<div class="profile-form">
+			<mat-form-field>
+				<mat-select placeholder="{{'DATASET-WIZARD.FIRST-STEP.PROFILE'| translate}}" [required]="true" formControlName="profile">
+					<mat-option *ngFor="let profile of availableProfiles" [value]="profile">
+						{{profile.label}}
+					</mat-option>
+				</mat-select>
+				<mat-error *ngIf="formGroup.get('profile').hasError('backendError')">{{formGroup.get('profile').getError('backendError').message}}</mat-error>
+				<mat-error *ngIf="formGroup.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+			</mat-form-field>
+		</div>
 		<!-- Title Field -->
 		<div class="row">
 			<div class="col-12">
@@ -13,10 +26,8 @@
 				<div class="title-form">
 					<mat-form-field appearance="outline">
 						<input matInput placeholder="{{'DATASET-EDITOR.FIELDS.TITLE' | translate}}" type="text" name="label" formControlName="label" required>
-						<mat-error *ngIf="formGroup.get('label').hasError('backendError')">
-							{{formGroup.get('label').getError('backendError').message}}</mat-error>
-						<mat-error *ngIf="formGroup.get('label').hasError('required')">
-							{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+						<mat-error *ngIf="formGroup.get('label').hasError('backendError')">	{{formGroup.get('label').getError('backendError').message}}</mat-error>
+						<mat-error *ngIf="formGroup.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 					</mat-form-field>
 				</div>
 			</div>

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

@@ -29,6 +29,9 @@ import { DatasetWizardEditorModel, ExternalTagEditorModel } from '@app/ui/datase
 import { ENTER, COMMA } from '@angular/cdk/keycodes';
 import { GuidedTour, Orientation } from '@app/library/guided-tour/guided-tour.constants';
 import { GuidedTourService } from '@app/library/guided-tour/guided-tour.service';
+import { MultipleAutoCompleteConfiguration } from '@app/library/auto-complete/multiple/multiple-auto-complete-configuration';
+import { DataTableRequest } from '@app/core/model/data-table/data-table-request';
+import { AvailableProfilesComponent } from '../available-profiles/available-profiles.component';
 
 
 @Component({
@@ -68,6 +71,8 @@ export class DatasetEditorDetailsComponent extends BaseComponent implements OnIn
 	@Output() formChanged: EventEmitter<any> = new EventEmitter();
 	readonly separatorKeysCodes: number[] = [ENTER, COMMA];
 
+	profilesAutoCompleteConfiguration: MultipleAutoCompleteConfiguration;
+
 	constructor(
 		private datasetWizardService: DatasetWizardService,
 		private route: ActivatedRoute,
@@ -98,6 +103,19 @@ export class DatasetEditorDetailsComponent extends BaseComponent implements OnIn
 		this.datasetWizardModel = new DatasetWizardEditorModel();
 		this.registerFormListeners();
 
+		// console.log(this.formGroup);
+		this.profilesAutoCompleteConfiguration = {
+			filterFn: this.filterProfiles.bind(this),
+			initialItems: (excludedItems: any[]) => this.filterProfiles('').pipe(map(result => result.filter(resultItem => (excludedItems || []).map(x => x.id).indexOf(resultItem.id) === -1))),
+			displayFn: (item) => item['label'],
+			titleFn: (item) => item['label'],
+			subtitleFn: (item) => item['description']
+		};
+
+		if (!this.isNewDataset) {
+			this.loadDatasetProfiles();
+		}
+
 		if (this.datasetId) {
 			this.datasetWizardService.getSingle(this.datasetId)
 				.pipe(takeUntil(this._destroyed))
@@ -244,7 +262,7 @@ export class DatasetEditorDetailsComponent extends BaseComponent implements OnIn
 	loadDatasetProfiles() {
 		const datasetProfileRequestItem: RequestItem<DatasetProfileCriteria> = new RequestItem();
 		datasetProfileRequestItem.criteria = new DatasetProfileCriteria();
-		datasetProfileRequestItem.criteria.id = this.formGroup.get('dmp').value.id;
+		datasetProfileRequestItem.criteria.id = this.dmpId;
 		if (datasetProfileRequestItem.criteria.id) {
 			this.datasetWizardService.getAvailableProfiles(datasetProfileRequestItem)
 				.pipe(takeUntil(this._destroyed))
@@ -297,4 +315,21 @@ export class DatasetEditorDetailsComponent extends BaseComponent implements OnIn
 	hasProfileId(): boolean {
 		return !isNullOrUndefined(this.getProfileId());
 	}
+
+	filterProfiles(value: string): Observable<DatasetProfileModel[]> {
+		const request = new DataTableRequest<DatasetProfileCriteria>(null, null, { fields: ['+label'] });
+		const criteria = new DatasetProfileCriteria();
+		criteria.like = value;
+		request.criteria = criteria;
+		return this.dmpService.searchDMPProfiles(request);
+	}
+	allAvailableProfiles(event: MouseEvent) {
+		event.stopPropagation();
+		const dialogRef = this.dialog.open(AvailableProfilesComponent, {
+			data: {
+				profiles: this.formGroup.get('profiles')
+			}
+		});
+		return false;
+	}
 }

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

@@ -14,7 +14,7 @@
 								<button *ngIf="isDirty()" type="button" mat-raised-button class="discard-btn mr-3" (click)="discardChanges()">
 									{{'DMP-EDITOR.ACTIONS.DISCARD' | translate}}
 								</button>
-								<div *ngIf="isNew" mat-raised-button type="button" (click)="addDataset()" class="save-btn">
+								<div *ngIf="isNew" mat-raised-button type="button" (click)="save()" class="save-btn">
 									<div>{{'DMP-EDITOR.ACTIONS.SAVE' | translate}}</div>
 								</div>
 								<div *ngIf="!isNew && formGroup.enabled && !lockStatus">
@@ -83,13 +83,22 @@
 
 							<li *ngFor="let dataset of datasets.controls; let i = index" (click)="changeStep(i + stepsBeforeDatasets, dataset)" [ngClass]="{'active-dataset': this.step === i + stepsBeforeDatasets}">
 								<div>{{'DMP-EDITOR.STEPPER.DATASET' | translate}}</div>
-								<span *ngIf="dataset.get('status').value === 1" class="finalized-label"><mat-icon class="status-icon check-icon">check</mat-icon>{{'TYPES.DATASET-STATUS.FINALISED' | translate}}</span>
+								<span *ngIf="dataset.get('status').value === 1" class="finalized-label">
+									<mat-icon class="status-icon check-icon">check</mat-icon>{{'TYPES.DATASET-STATUS.FINALISED' | translate}}
+								</span>
 								<ul class="dataset-list">
-									<li *ngIf="!isNewDataset" [ngClass]="{'active': this.step === i + stepsBeforeDatasets}">{{ dataset.get('label').value }} (8)</li>
+									<li *ngIf="!isNewDataset" [ngClass]="{'active': this.step === i + stepsBeforeDatasets}">{{ dataset.get('label').value }} (9)</li>
 									<li *ngIf="isNewDataset" [ngClass]="{'active': this.step === i + stepsBeforeDatasets}">{{ dataset.get('label').value }}</li>
 								</ul>
 							</li>
 						</ol>
+						<ul *ngIf="!isNewDataset" class="add-dataset-option">
+							<li>
+								<a class="add-dataset-btn" (click)="addDataset()" target="_blank">
+									<mat-icon>add</mat-icon>{{'DMP-LISTING.ACTIONS.ADD-DATASET-SHORT' | translate}}
+								</a>
+							</li>
+						</ul>
 					</div>
 					<div class="stepper-actions">
 						<div mat-raised-button type="button" class="col-auto previous stepper-btn mr-2 ml-auto" [ngClass]="{'previous-disabled': this.step === 0}" (click)="previousStep()">

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

@@ -391,6 +391,30 @@ a:hover {
   font-size: 0.875rem;
 }
 
+.add-dataset-option {
+	list-style-type: none;
+}
+
+.add-dataset-btn {
+	color: #212121;
+    background: #f5f5f5 0% 0% no-repeat padding-box;
+    box-shadow: 0px 3px 6px #1e202029;
+    border: 2px solid #212121;
+    font-weight: 500;
+    cursor: pointer;
+    border-radius: 30px;
+    opacity: 1;
+    width: 154px;
+    height: 40px;
+    display: -webkit-box;
+    display: flex;
+    -webkit-box-pack: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    align-items: center;
+    font-size: 14px;
+}
+
 // ::ng-deep .mat-tab-labels {
 //   justify-content: space-between;
 // }

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

@@ -48,6 +48,7 @@ import { DmpCriteria } from '@app/core/query/dmp/dmp-criteria';
 import { DatasetDescriptionFormEditorModel } from '@app/ui/misc/dataset-description-form/dataset-description-form.model';
 import { DatasetWizardService } from '@app/core/services/dataset-wizard/dataset-wizard.service';
 import { CloneDialogComponent } from '../clone/clone-dialog/clone-dialog.component';
+import { DatasetWizardModel } from '@app/core/model/dataset/dataset-wizard';
 
 @Component({
 	selector: 'app-dmp-editor-component',
@@ -70,6 +71,7 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 	isUserOwner: boolean = true;
 
 	dmp: DmpEditorModel;
+	dmpModel: DmpModel;
 	formGroup: FormGroup = null;
 	// datasetFormGroup: FormGroup;
 	formGroupRawValue: any;
@@ -160,6 +162,8 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 						.subscribe(async data => {
 							this.lockService.checkLockStatus(data.id).pipe(takeUntil(this._destroyed)).subscribe(lockStatus => {
 								this.lockStatus = lockStatus;
+								this.dmpModel = data;
+
 								this.dmp = new DmpEditorModel();
 								this.dmp.grant = new GrantTabModel();
 								this.dmp.project = new ProjectFormModel();
@@ -227,6 +231,8 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 						.subscribe(async data => {
 							// this.lockService.checkLockStatus(data.id).pipe(takeUntil(this._destroyed)).subscribe(lockStatus => {
 							// this.lockStatus = true;
+							this.dmpModel = data;
+
 							this.dmp = new DmpEditorModel();
 							this.dmp.grant = new GrantTabModel();
 							this.dmp.project = new ProjectFormModel();
@@ -285,11 +291,11 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 							.pipe(takeUntil(this._destroyed))
 							.subscribe(data => {
 								setTimeout(() => {
+									this.dmpModel = data;
 									this.datasetWizardEditorModel.dmp = data;
 									this.dmp.datasets.push(this.datasetWizardEditorModel);
 									this.formGroup = this.dmp.buildForm();
 									this.formGroup.get('datasets')['controls'][0].get('dmp').disable();
-
 									this.datasets = this.formGroup.get('datasets') as FormArray;
 									this.formGroupRawValue = JSON.parse(JSON.stringify(this.formGroup.getRawValue()));
 									this.maxStep = this.formGroup.get('datasets') ? this.maxStep + this.formGroup.get('datasets').value.length - 1 : this.maxStep;
@@ -704,10 +710,22 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 		this.formGroup.disable();
 	}
 
-	addDataset() {
+	save() {
 		this.formSubmit(true);
 	}
 
+	addDataset() {
+		if (this.formGroup.get('datasets')) {
+			// const datasetWizardModel = { dmp: this.dmpModel };
+			// const datasetWizardEditorModel = new DatasetWizardEditorModel().fromModel(datasetWizardModel);
+			// this.formGroup.get('datasets')['controls'].push(datasetWizardEditorModel.buildForm());
+			this.formGroup.get('datasets')['controls'].push(new DatasetWizardEditorModel().buildForm());
+			// console.log(this.formGroup.get('datasets'))
+		};
+		this.step = this.stepsBeforeDatasets + this.formGroup.get('datasets')['controls'].length - 1;
+		this.maxStep = this.maxStep + this.formGroup.get('datasets')['controls'].length - 1;
+	}
+
 	addDatasetOpenDialog(id: String) {
 		const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
 			maxWidth: '500px',