diff --git a/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.html b/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.html index 7fc08ffc8..b0762da3b 100644 --- a/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.html +++ b/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.html @@ -51,7 +51,7 @@ work_outline {{ 'DMP-LISTING.COLUMNS.PROJECT' | translate }} - + @@ -95,7 +95,10 @@ -->
- +
diff --git a/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.ts b/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.ts index abd73112f..94001296b 100644 --- a/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.ts +++ b/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.ts @@ -42,6 +42,7 @@ import { DmpFinalizeDialogComponent } from './dmp-finalize-dialog/dmp-finalize-d import { AuthService } from '../../../core/services/auth/auth.service'; import { ExportMethodDialogComponent } from '../../../library/export-method-dialog/export-method-dialog.component'; import { UserInfoListingModel } from '../../../core/model/user/user-info-listing'; +import { ProjectTabModel } from './project-tab/project-tab-model'; @Component({ selector: 'app-dmp-editor-component', @@ -110,7 +111,9 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC this.dmpService.getSingle(itemId).map(data => data as DmpModel) .pipe(takeUntil(this._destroyed)) .subscribe(async data => { - this.dmp = new DmpEditorModel().fromModel(data); + this.dmp = new DmpEditorModel(); + this.dmp.project = new ProjectTabModel(); + this.dmp.fromModel(data); this.formGroup = this.dmp.buildForm(); //this.registerFormEventsForDmpProfile(this.dmp.definition); if (!this.editMode || this.dmp.status === Status.Inactive) { this.formGroup.disable(); } @@ -122,7 +125,6 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC label: this.language.instant('NAV-BAR.MY-DMPS'), url: "/plans" }); - const breadcrumb = await this.projectService.getSingle(this.dmp.project.id).map(x => ({ label: x.label, url: '/projects/edit/' + x.id }) as BreadcrumbItem).toPromise(); breadCrumbs.push({ parentComponentName: 'DmpListingComponent', label: this.dmp.label, @@ -137,10 +139,11 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC }); } else if (projectId != null) { this.isNew = true; - this.projectService.getSingle(projectId).map(data => data as ProjectListingModel) + this.projectService.getSingle(projectId).map(data => data as ProjectTabModel) .pipe(takeUntil(this._destroyed)) .subscribe(data => { this.dmp = new DmpEditorModel(); + this.dmp.project = new ProjectTabModel(); this.dmp.project = data; this.formGroup = this.dmp.buildForm(); //this.registerFormEventsForDmpProfile(); @@ -153,7 +156,9 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC this.dmpService.getSinglePublic(publicId).map(data => data as DmpModel) .pipe(takeUntil(this._destroyed)) .subscribe(async data => { - this.dmp = new DmpEditorModel().fromModel(data); + this.dmp = new DmpEditorModel(); + this.dmp.project = new ProjectTabModel(); + this.dmp.fromModel(data); this.formGroup = this.dmp.buildForm(); //this.registerFormEventsForDmpProfile(this.dmp.definition); if (!this.editMode || this.dmp.status === Status.Inactive) { this.formGroup.disable(); } @@ -175,6 +180,7 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC }); } else { this.dmp = new DmpEditorModel(); + this.dmp.project = new ProjectTabModel(); this.formGroup = this.dmp.buildForm(); this.registerFormEventsForNewItem(); if (this.isAuthenticated) { diff --git a/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.model.ts b/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.model.ts index 5420a5101..43e135b47 100644 --- a/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.model.ts +++ b/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.model.ts @@ -14,6 +14,7 @@ import { UserModel } from "../../../core/model/user/user"; import { ValidJsonValidator } from "../../../library/auto-complete/auto-complete-custom-validator"; import { UserInfoListingModel } from "../../../core/model/user/user-info-listing"; import { DatasetModel } from "../../../core/model/dataset/dataset"; +import { ProjectTabModel } from "./project-tab/project-tab-model"; export class DmpEditorModel { public id: string; @@ -25,7 +26,7 @@ export class DmpEditorModel { public creator: UserModel; public status: Status = Status.Active; public description: String; - public project: ProjectListingModel; + public project: ProjectTabModel; public organisations: OrganizationModel[] = []; public researchers: ResearcherModel[] = []; public profiles: DmpProfile[] = []; @@ -45,7 +46,7 @@ export class DmpEditorModel { this.status = item.status; this.lockable = item.lockable; this.description = item.description; - this.project = item.project; + this.project.fromModel(item.project); this.organisations = item.organisations; this.researchers = item.researchers; this.profiles = item.profiles; @@ -69,7 +70,7 @@ export class DmpEditorModel { version: [{ value: this.version, disabled: disabled }, context.getValidation('version').validators], status: [{ value: this.status, disabled: disabled }, context.getValidation('status').validators], description: [{ value: this.description, disabled: disabled }], - project: [{ value: this.project, disabled: disabled }, context.getValidation('project').validators], + project: this.project.buildForm(), organisations: [{ value: this.organisations, disabled: disabled }, context.getValidation('organisations').validators], researchers: [{ value: this.researchers, disabled: disabled }, context.getValidation('researchers').validators], profiles: [{ value: this.profiles, disabled: disabled }, context.getValidation('profiles').validators], diff --git a/dmp-frontend/src/app/ui/dmp/editor/project-tab/project-tab-model.ts b/dmp-frontend/src/app/ui/dmp/editor/project-tab/project-tab-model.ts new file mode 100644 index 000000000..e1f000dcd --- /dev/null +++ b/dmp-frontend/src/app/ui/dmp/editor/project-tab/project-tab-model.ts @@ -0,0 +1,49 @@ +import { Status } from "../../../../core/common/enum/Status"; +import { ProjectListingModel } from "../../../../core/model/project/project-listing"; +import { ValidationErrorModel } from "../../../../common/forms/validation/error-model/validation-error-model"; +import { ProjectEditorWizardModel } from "../../../quick-wizard/project-editor/project-editor-wizard-model"; +import { ValidationContext } from "../../../../common/forms/validation/validation-context"; +import { FormBuilder, FormGroup, Validators } from "@angular/forms"; +import { BackendErrorValidator } from "../../../../common/forms/validation/custom-validator"; +import { ValidJsonValidator } from "../../../../library/auto-complete/auto-complete-custom-validator"; + +export class ProjectTabModel { + public id: string; + public label?: string; + public status: Status = Status.Active; + public description: String; + public existProject: ProjectListingModel; + public validationErrorModel: ValidationErrorModel = new ValidationErrorModel(); + + + fromModel(item: ProjectListingModel): ProjectTabModel { + this.existProject = item; + return this; + } + + buildForm(context: ValidationContext = null, disabled: boolean = false): FormGroup { + if (context == null) { context = this.createValidationContext(); } + + const formGroup = new FormBuilder().group({ + id: [{ value: this.id, disabled: disabled }, context.getValidation('id').validators], + label: [{ value: this.label, disabled: disabled }, context.getValidation('label').validators], + status: [{ value: this.status, disabled: disabled }, context.getValidation('status').validators], + description: [{ value: this.description, disabled: disabled }, context.getValidation('description').validators], + existProject: [{ value: this.existProject, disabled: disabled }, context.getValidation('existProject').validators], + }); + return formGroup; + } + + createValidationContext(): ValidationContext { + const baseContext: ValidationContext = new ValidationContext(); + baseContext.validation.push({ key: 'id', validators: [] }); + baseContext.validation.push({ key: 'label', validators: [Validators.required, BackendErrorValidator(this.validationErrorModel, 'label')] }); + baseContext.validation.push({ key: 'status', validators: [] }); + baseContext.validation.push({ key: 'description', validators: [Validators.required, BackendErrorValidator(this.validationErrorModel, 'description')] }); + baseContext.validation.push({ key: 'existProject', validators: [Validators.required, ValidJsonValidator, BackendErrorValidator(this.validationErrorModel, 'existProject')] }); + return baseContext; + } + + +} + diff --git a/dmp-frontend/src/app/ui/dmp/editor/project-tab/project-tab.component.html b/dmp-frontend/src/app/ui/dmp/editor/project-tab/project-tab.component.html index 539433685..ca5e9df85 100644 --- a/dmp-frontend/src/app/ui/dmp/editor/project-tab/project-tab.component.html +++ b/dmp-frontend/src/app/ui/dmp/editor/project-tab/project-tab.component.html @@ -1,17 +1,53 @@
-
-
- - - - - {{formGroup.get('project').getError('backendError').message}} - - {{'GENERAL.VALIDATION.REQUIRED' | translate}} - +
+ + +
+
+ keyboard_backspace + {{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.EXIST' | translate}} +
+
+ add + {{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.CREATE-NEW' | translate}} +
+
+ + +
+
+ + + + +
-
+ + +
+
+ + + + {{formGroup.get('label').getError('backendError').message}} + + {{'GENERAL.VALIDATION.REQUIRED' | translate}} + + + + + {{formGroup.get('description').getError('backendError').message}} + + {{'GENERAL.VALIDATION.REQUIRED' | translate}} + +
+
+
diff --git a/dmp-frontend/src/app/ui/dmp/editor/project-tab/project-tab.component.scss b/dmp-frontend/src/app/ui/dmp/editor/project-tab/project-tab.component.scss index e69de29bb..ffaa9f882 100644 --- a/dmp-frontend/src/app/ui/dmp/editor/project-tab/project-tab.component.scss +++ b/dmp-frontend/src/app/ui/dmp/editor/project-tab/project-tab.component.scss @@ -0,0 +1,8 @@ +.add-project { + display: flex; + justify-content: flex-end; + margin-top: 1.5em; + padding-right: 2em; + cursor: pointer; + color: #0070c0; +} diff --git a/dmp-frontend/src/app/ui/dmp/editor/project-tab/project-tab.component.ts b/dmp-frontend/src/app/ui/dmp/editor/project-tab/project-tab.component.ts index 268328045..56497df93 100644 --- a/dmp-frontend/src/app/ui/dmp/editor/project-tab/project-tab.component.ts +++ b/dmp-frontend/src/app/ui/dmp/editor/project-tab/project-tab.component.ts @@ -5,6 +5,7 @@ import { RequestItem } from '../../../../core/query/request-item'; import { ProjectCriteria } from '../../../../core/query/project/project-criteria'; import { ProjectService } from '../../../../core/services/project/project.service'; import { LanguageResolverService } from '../../../../services/language-resolver/language-resolver.service'; +import { ProjectTabModel } from './project-tab-model'; @Component({ selector: 'app-project-tab', @@ -13,7 +14,10 @@ import { LanguageResolverService } from '../../../../services/language-resolver/ }) export class ProjectTabComponent implements OnInit { - @Input() formGroup: FormGroup = null; + @Input() formGroup: FormGroup; + @Input() isNew: boolean; + isCreateNew = false; + project: ProjectTabModel; projectAutoCompleteConfiguration: SingleAutoCompleteConfiguration; @@ -23,12 +27,25 @@ export class ProjectTabComponent implements OnInit { ) { } ngOnInit() { + + const projectRequestItem: RequestItem = new RequestItem(); + projectRequestItem.criteria = new ProjectCriteria(); + this.projectAutoCompleteConfiguration = { filterFn: this.searchProject.bind(this), initialItems: (extraData) => this.searchProject(''), displayFn: (item) => item['label'], titleFn: (item) => item['label'] }; + + if (!this.formGroup) { + this.project = new ProjectTabModel(); + this.formGroup = this.project.buildForm(); + } + + this.formGroup.get('existProject').enable(); + this.formGroup.get('label').disable(); + this.formGroup.get('description').disable(); } searchProject(query: string) { @@ -38,4 +55,20 @@ export class ProjectTabComponent implements OnInit { return this.projectService.getWithExternal(projectRequestItem); } + create() { + this.isCreateNew = !this.isCreateNew; + if (this.isCreateNew) { + this.formGroup.get('existProject').disable(); + // this.formGroup.get('existProject').reset(); + this.formGroup.get('label').enable(); + this.formGroup.get('description').enable(); + } else { + this.formGroup.get('existProject').enable(); + this.formGroup.get('label').disable(); + this.formGroup.get('label').reset(); + this.formGroup.get('description').disable(); + this.formGroup.get('description').reset(); + } + } + } diff --git a/dmp-frontend/src/app/ui/quick-wizard/quick-wizard-editor/quick-wizard-editor.model.ts b/dmp-frontend/src/app/ui/quick-wizard/quick-wizard-editor/quick-wizard-editor.model.ts index 43651d9ad..009a0608c 100644 --- a/dmp-frontend/src/app/ui/quick-wizard/quick-wizard-editor/quick-wizard-editor.model.ts +++ b/dmp-frontend/src/app/ui/quick-wizard/quick-wizard-editor/quick-wizard-editor.model.ts @@ -18,19 +18,16 @@ export class QuickWizardEditorWizardModel { fromModelProject(item: ProjectListingModel): QuickWizardEditorWizardModel { this.project.fromModel(item); - return this; } fromModelDmp(item: DmpModel): QuickWizardEditorWizardModel { this.dmp.fromModel(item); - return this; } fromModelDataset(item: DatasetWizardEditorModel[]): QuickWizardEditorWizardModel { this.datasets.fromModel(item); - return this; } @@ -40,7 +37,7 @@ export class QuickWizardEditorWizardModel { project: new ProjectEditorWizardModel().buildForm(), dmp: new DmpEditorWizardModel().buildForm(), datasets: new DatasetEditorWizardModel().buildForm() - + }); return formGroup; } @@ -49,8 +46,8 @@ export class QuickWizardEditorWizardModel { // const baseContext: ValidationContext = new ValidationContext(); // baseContext.validation.push({ key: 'project', validators: [Validators.required, BackendErrorValidator(this.validationErrorModel, 'project')] }); // baseContext.validation.push({ key: 'dmp', validators: [Validators.required, BackendErrorValidator(this.validationErrorModel, 'dmp')] }); - // baseContext.validation.push({ key: 'datasets', validators: [Validators.required, BackendErrorValidator(this.validationErrorModel, 'datasets')] }); + // baseContext.validation.push({ key: 'datasets', validators: [Validators.required, BackendErrorValidator(this.validationErrorModel, 'datasets')] }); // return baseContext; // } -} \ No newline at end of file +} diff --git a/dmp-frontend/src/assets/i18n/en.json b/dmp-frontend/src/assets/i18n/en.json index fd4b591b3..031a50753 100644 --- a/dmp-frontend/src/assets/i18n/en.json +++ b/dmp-frontend/src/assets/i18n/en.json @@ -481,7 +481,8 @@ "ACTIONS": { "GO-TO-PROJECT": "Go To DMP Project", "GO-TO-DATASETS": "Go To Datasets", - "SAVE": "Save Changes", + "SAVE-CHANGES": "Save Changes", + "SAVE": "Save", "CANCEL": "Cancel", "DELETE": "Delete", "FINALISE": "Finalize"