Merge branch 'ui-refactoring' of https://gitlab.eudat.eu/dmp/OpenAIRE-EUDAT-DMP-service-pilot into ui-refactoring

dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.ts

@@ -1,6 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { FormArray, FormControl, FormGroup } from '@angular/forms';
 import { FieldEditorModel } from '../../../admin/field-editor-model';
+import { FieldSetEditorModel } from '../../../admin/field-set-editor-model';
 
 @Component({
 	selector: 'app-dataset-profile-editor-composite-field-component',
@@ -35,6 +36,10 @@ export class DatasetProfileEditorCompositeFieldComponent implements OnInit {
 			}
 			(this.form.get('fields') as FormArray).controls.splice(1);
 		}
+		if ((<FormArray>this.form.get('fields')).length === 0) {
+			const field: FieldEditorModel = new FieldEditorModel();
+			(<FormArray>this.form.get('fields')).push(field.buildForm());
+		}
 	}
 
 	onIsMultiplicityEnabledChange(isMultiplicityEnabled: boolean) {

dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section/dataset-profile-editor-section.component.html

@@ -22,7 +22,7 @@
 		<input matInput type="number" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.ORDER' | translate}}"
 		 formControlName="ordinal">
 	</mat-form-field>
-	<mat-form-field class="col-md-3">
+	<mat-form-field class="col-md-12">
 		<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.DESCRIPTION' | translate}}"
 		formControlName="description">
 	</mat-form-field>

dmp-frontend/src/app/ui/dataset-create-wizard/dmp-selector/dataset-dmp-selector.model.ts

@@ -1,7 +0,0 @@
-import { DmpModel } from "../../../core/model/dmp/dmp";
-import { DatasetProfileModel } from "../../../core/model/dataset/dataset-profile";
-
-export class DatasetDmpSelectorModel{
-	label?: string;
-	status?: number;
-}

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

@@ -18,18 +18,18 @@
 		</div> -->
 	</div>
 	<div *ngIf="this.datasetProfileDefinitionModel || this.datasetWizardModel?.datasetProfileDefinition">
-		<button mat-raised-button color="primary" *ngIf="!isNew && !viewOnly" style="margin-top: 15px;margin-bottom: 15px;margin-right: 15px;"
+		<button mat-raised-button color="primary" *ngIf="!isNew && !viewOnly" class="deleteButton"
 		 (click)="openConfirm(formGroup.get('label').value, formGroup.get('id').value)" type="button">{{
 			'DATASET-WIZARD.ACTIONS.DELETE' | translate }}</button>
 		<button mat-raised-button color="primary" *ngIf="datasetWizardModel&&datasetWizardModel?.status != 1 && !viewOnly"
-		 style="margin-top: 15px;margin-bottom: 15px;margin-right: 15px;" (click)="save();" type="button">{{
+		 class="saveButton" (click)="save();" type="button">{{
 			'DATASET-WIZARD.ACTIONS.SAVE' | translate }}</button>
 		<button mat-raised-button color="primary" *ngIf="datasetWizardModel&&datasetWizardModel?.status != 1 && !viewOnly" [disabled]="!formGroup.valid"
-		 style="margin-top: 15px;margin-bottom: 15px;margin-right: 15px;" (click)="saveFinalize();" type="button">{{
+		 class="saveAndFinalizeButton" (click)="saveFinalize();" type="button">{{
 			'DATASET-WIZARD.ACTIONS.SAVE-AND-FINALISE' | translate }}</button>
-		<button mat-raised-button color="primary" *ngIf="datasetWizardModel&&datasetWizardModel?.status == 1" style="margin-top: 15px;margin-bottom: 15px;margin-right: 15px;"
+		<button mat-raised-button color="primary" *ngIf="datasetWizardModel&&datasetWizardModel?.status == 1" class="downloadPDF"
 		 (click)="downloadPDF();" type="button">{{ 'DATASET-WIZARD.ACTIONS.DOWNLOAD-PDF' | translate }}</button>
-		<button mat-raised-button color="primary" *ngIf="datasetWizardModel&&datasetWizardModel?.status == 1" style="margin-top: 15px;margin-bottom: 15px;margin-right: 15px;"
+		<button mat-raised-button color="primary" *ngIf="datasetWizardModel&&datasetWizardModel?.status == 1" class="downloadXML"
 		 (click)="downloadXML();" type="button">{{ 'DATASET-WIZARD.ACTIONS.DOWNLOAD-XML' | translate }}</button>
 		<div class="fill-space"></div>
 	</div>

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

@@ -11,4 +11,29 @@
 	.description-action-row {
 		margin-top: 1em;
 	}
+	.deleteButton {
+		margin-top: 15px;
+		margin-bottom: 15px;
+		margin-right: 15px;
+	}
+	.saveButton {
+		margin-top: 15px;
+		margin-bottom: 15px;
+		margin-right: 15px;
+	}
+	.saveAndFinalizeButton {
+		margin-top: 15px;
+		margin-bottom: 15px;
+		margin-right: 15px;
+	}
+	.downloadPDF {
+		margin-top: 15px;
+		margin-bottom: 15px;
+		margin-right: 15px;
+	}
+	.downloadXML {
+		margin-top: 15px;
+		margin-bottom: 15px;
+		margin-right: 15px;
+	}
 }

dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-field/form-composite-field.component.html

@@ -37,9 +37,9 @@
 			<mat-icon class="col-auto" *ngIf="this.form.get('additionalInformation').value && !isChild"
 				matTooltip="{{this.form.get('additionalInformation').value}}">info</mat-icon>
 
-			<h5 *ngIf="form.get('description').value && !isChild" class="col-12">{{form.get('description').value}}</h5>
+			<h6 *ngIf="form.get('description').value && !isChild" class="col-12">{{form.get('description').value}}</h6>
-			<h5 *ngIf="form.get('extendedDescription').value && !isChild" class="col-12">
+			<h6 *ngIf="form.get('extendedDescription').value && !isChild" class="col-12">
-				<i>{{form.get('extendedDescription').value}}</i></h5>
+				<i>{{form.get('extendedDescription').value}}</i></h6>
 			<div *ngFor="let fieldFormGroup of form.get('fields')['controls']; let i = index;" class="col-12">
 				<!-- <div class="row">
 					<div class="col-12" *ngIf="(fieldFormGroup.get('multiplicity')?.value?.max - 1) > (fieldFormGroup.get('multiplicityItems')?.length)">

dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.html

@@ -14,14 +14,10 @@
 				<!-- *ngIf="this.visibilityRulesService.checkElementVisibility(compositeFieldFormGroup.get('id').value)" -->
 				<div class="row" *ngIf="this.visibilityRulesService.checkElementVisibility(compositeFieldFormGroup.get('id').value) && this.visibilityRulesService.scanIfChildsOfCompositeFieldHasVisibleItems(compositeFieldFormGroup)">
 
-					<div *ngIf="(compositeFieldFormGroup.get('multiplicity').value.max - 1) > (compositeFieldFormGroup.get('multiplicityItems').length)"
+
-					 class="col-12">
-						<button mat-button color="primary" (click)="addMultipleField(i)" [disabled]="compositeFieldFormGroup.disabled">
-							{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-ADD-ONE-FIELD' | translate}}
-						</button>
-					</div>
 					<app-form-composite-field class="align-self-center col-12" [form]="compositeFieldFormGroup" [datasetProfileId]="datasetProfileId"
 					 [isChild]="false"></app-form-composite-field>
+
 					<div *ngIf="compositeFieldFormGroup" class="col-12">
 						<div class="row">
 							<div class="col-12" *ngFor="let multipleCompositeFieldFormGroup of compositeFieldFormGroup.get('multiplicityItems')['controls']; let j = index">
@@ -35,6 +31,12 @@
 									</div>
 								</div>
 							</div>
+							<div *ngIf="(compositeFieldFormGroup.get('multiplicity').value.max - 1) > (compositeFieldFormGroup.get('multiplicityItems').length)"
+							 class="col-12 addOneFieldButton">
+								<button mat-icon-button color="primary" (click)="addMultipleField(i)" [disabled]="compositeFieldFormGroup.disabled" matTooltip="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-ADD-ONE-FIELD' | translate}}">
+									<mat-icon>add_circle</mat-icon>
+								</button>
+							</div>
 							<mat-form-field *ngIf="compositeFieldFormGroup.get('hasCommentField').value" class="col-12" [formGroup]="compositeFieldFormGroup">
 								<input matInput formControlName="commentFieldValue" placeholder="comment">
 							</mat-form-field>

dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.scss

@@ -2,6 +2,10 @@
 	.expansion-panel {
 		margin-bottom: 1em;
 	}
+	.addOneFieldButton {
+		margin-top: -15px;
+		margin-left: -11px;
+	}
 }
 .styleBorder{
 	border: 0.2em solid lightgray;
@@ -12,3 +16,4 @@
 	padding-bottom: 18px;
 	color: black;
 }
+

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

@@ -4,10 +4,10 @@
 	</div>
 	<div class="col-auto">
 		<mat-button-toggle-group [ngModel]="_inputValue">
-			<mat-button-toggle value="list" (change)="onValChange($event.value)">
+			<mat-button-toggle value="list" (change)="onValChange($event.value)" matTooltip="Dataset List">
 				<mat-icon>format_align_left</mat-icon>
 			</mat-button-toggle>
-			<mat-button-toggle value="add" (change)="onValChange($event.value)">
+			<mat-button-toggle value="add" (change)="onValChange($event.value)"  matTooltip="Add Dataset">
 				<mat-icon>add</mat-icon>
 			</mat-button-toggle>
 		</mat-button-toggle-group>
@@ -45,7 +45,7 @@
 			<mat-form-field class="col-md-12">
 				<input matInput placeholder="{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.THIRD-STEP.DATASET-LABEL' | translate}}" type="string" name="datasetLabel" [formControl]="this.formGroup.get('datasets').get('datasetsList')['controls'][lastIndexOfDataset].get('datasetLabel')" required>
 			</mat-form-field>
-			<app-dataset-description-form class="col-12" [form]="this.formGroup.get('datasets').get('datasetsList')['controls'][lastIndexOfDataset]" [visibilityRules]="this.datasetProfileDefinition.rules" [datasetProfileId]="datasetProfile.value">
+			<app-dataset-description-form class="col-12" [form]="this.formGroup.get('datasets').get('datasetsList')['controls'][lastIndexOfDataset]" [visibilityRules]="this.datasetProfileDefinition.rules" [datasetProfileId]="datasetProfile.value.id">
 			</app-dataset-description-form>
 		</div>
 	</div>

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

@@ -59,8 +59,10 @@
                         <div class="navigation-buttons-container">
                             <button matStepperPrevious mat-raised-button
                                 color="primary">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.BACK' | translate}}</button>
-                            <button style="float:right;" matStepperNext mat-raised-button (click)='formSubmit()'
+							<button class="saveAndFinalizeButton" matStepperNext mat-raised-button (click)='saveFinalize()' [disabled]="!formGroup.valid"
-                                color="primary">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.SAVE' | translate}}</button>
+								color="primary">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.SAVE-AND-FINALIZE' | translate}}</button>
+							<button class="saveButton" matStepperNext mat-raised-button (click)='formSubmit()'
+								color="primary">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.SAVE' | translate}}</button>
                         </div>
                     </ng-container>
                 </mat-step>

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

@@ -0,0 +1,7 @@
+.saveAndFinalizeButton{
+	float:right;
+}
+.saveButton{
+	float:right;
+	margin-right: 15px;
+}

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

@@ -15,7 +15,6 @@ import { ProjectEditorWizardModel } from '../project-editor/project-editor-wizar
 import { QuickWizardEditorWizardModel } from './quick-wizard-editor.model';
 
 
-
 @Component({
     selector: 'app-quick-wizard-editor-component',
     templateUrl: 'quick-wizard-editor.component.html',
@@ -24,15 +23,10 @@ import { QuickWizardEditorWizardModel } from './quick-wizard-editor.model';
 export class QuickWizardEditorComponent extends BaseComponent implements OnInit, IBreadCrumbComponent {
 
     breadCrumbs: Observable<BreadcrumbItem[]> = Observable.of([]);
-
     @ViewChild('stepper') stepper: MatStepper;
     isNew = true;
-
     quickWizard: QuickWizardEditorWizardModel
     formGroup: FormGroup = null;
-    firstStepFormGroup: FormGroup;
-    secondFormGroup: FormGroup;
-
 
     constructor(
         public snackBar: MatSnackBar,
@@ -72,13 +66,18 @@ export class QuickWizardEditorComponent extends BaseComponent implements OnInit,
 
     formSubmit(): void {
         this.touchAllFormFields(this.formGroup);
-        if (!this.isFormValid()) { return; }
         if (this.formGroup.get('datasets') && this.formGroup.get('datasets').get('datasetsList') && (this.formGroup.get('datasets').get('datasetsList') as FormArray).length > 0) {
             this.onSubmit();
         } else {
             return;
         }
-    }
+	}
+
+	saveFinalize() {
+		if (!this.isFormValid()) { return; }
+		this.formGroup.get('status').setValue('1');
+		this.onSubmit();
+	}
 
     public isFormValid() {
         return this.formGroup.valid;
@@ -100,7 +99,6 @@ export class QuickWizardEditorComponent extends BaseComponent implements OnInit,
     }
 
     onSubmit(): void {
-        if (!this.isFormValid()) { return; }
         this.quickWizardService.createQuickWizard(this.formGroup.getRawValue())
             .pipe(takeUntil(this._destroyed))
             .subscribe(
@@ -109,7 +107,6 @@ export class QuickWizardEditorComponent extends BaseComponent implements OnInit,
             );
     }
 
-
     onCallbackSuccess(): void {
         this.uiNotificationService.snackBarNotification(this.isNew ? this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-CREATION') : this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-UPDATE'), SnackBarNotificationLevel.Success);
         this.router.navigate(['/home']);
@@ -148,9 +145,4 @@ export class QuickWizardEditorComponent extends BaseComponent implements OnInit,
             return this.formGroup.get('project').get('label').value;
         }
     }
-
-
-
-
-
 }

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

@@ -98,7 +98,7 @@
 						"ADDITIONAL-INFORMATION":"Additional Information",
 						"MULTIPLICITY-MIN": "Multiplicity Min",
 						"MULTIPLICITY-MAX": "Multiplicity Max",
-						"MULTIPLICITY-ADD-ONE-FIELD": "Add one more fieldset +",
+						"MULTIPLICITY-ADD-ONE-FIELD": "Add one more fieldset",
 						"ORDER": "Order"
 					},
 					"ACTIONS": {
@@ -680,6 +680,7 @@
 					"ACTIONS": {
 						"DELETE": "Delete",
 						"SAVE": "Save",
+						"SAVE-AND-FINALIZE":"Save and Finalize",
 						"NEXT": "Next",
 						"BACK": "Back",
 						"CREATE-NEW":"Create new project",