-
+ +
-
+
{{'DMP-EDITOR.TITLE.EDIT-DMP' | translate}}
{{ formGroup.get('label').value }} ({{'DMP-EDITOR.CHANGES' | translate}})
-
@@ -21,11 +22,41 @@ {{'DMP-EDITOR.ACTIONS.SAVE' | translate}}
- +
+
+
+
+
+
{{'DMP-EDITOR.TITLE.EDIT-DATASET' | translate}}
+
{{ dataset.get('label').value }} ({{'DMP-EDITOR.CHANGES' | translate}})
+
+
{{'DATASET-LISTING.TOOLTIP.PART-OF' | translate}} +
{{'DATASET-LISTING.TOOLTIP.DMP' | translate}}
-
--> +
{{'DATASET-LISTING.TOOLTIP.DMP-FOR' | translate}}: {{ formGroup.get('label').value }}
+
+ open_in_new +
+
+
+
+
+ +
+
+ + +
@@ -39,6 +70,12 @@
  • {{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (4)
  • {{'DMP-EDITOR.STEPPER.FUNDING-INFO' | translate}} (3)
  • {{'DMP-EDITOR.STEPPER.DATASET-INFO' | translate}}
    • +
  • +
    {{'DMP-EDITOR.STEPPER.DATASET' | translate}}
    +
      +
    • {{ dataset.get('label').value }} (8)
      • +
    +
    • @@ -46,7 +83,7 @@ chevron_left
    {{'DMP-EDITOR.STEPPER.PREVIOUS' | translate}}
    -
    diff --git a/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.scss b/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.scss index e8201a6fc..1f0247692 100644 --- a/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.scss +++ b/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.scss @@ -12,6 +12,14 @@ form { height: calc(100vh - 124px); } +a { + color: #000000; +} + +a:hover { + color: #00b29f; +} + .main-content { height: 100vh !important; } @@ -53,6 +61,31 @@ form { margin: 30px 0px 0px 0px; border-radius: 4px; opacity: 1; + + .info { + flex: 2; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } +} + +.dataset-editor-header { + height: 113px; + background: var(--unnamed-color-129d99) 0% 0% no-repeat padding-box; + background: #f7dd72 0% 0% no-repeat padding-box; + box-shadow: 0px 3px 6px #00000029; + padding: 0.6rem; + margin: 30px 0px 0px 0px; + border-radius: 4px; + opacity: 1; + + .info { + flex: 2; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } } .editor-content { @@ -65,7 +98,7 @@ form { left: 362px; width: calc(100% - 366px); overflow-y: auto; - height: calc(100vh - 172px); + height: calc(100vh - 218px); } } @@ -77,12 +110,36 @@ form { opacity: 0.75; } +.dataset-title { + text-align: left; + letter-spacing: 0px; + color: #212121; + opacity: 0.9; + font-size: 14px; + font-weight: 400; +} + .subtitle { text-align: left; color: #ffffff; font-weight: 700; font-size: 16px; opacity: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.dataset-subtitle { + text-align: left; + letter-spacing: 0px; + color: #212121; + font-weight: 700; + font-size: 16px; + opacity: 0.9; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } .discard-btn { @@ -113,17 +170,62 @@ form { cursor: pointer; } +.dataset-discard-btn { + border: 1px solid #212121; + border-radius: 30px; + opacity: 1; + background-color: transparent; + font-weight: 700; + width: 110px; + height: 40px; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; +} + +.dataset-save-btn { + background: #ffffff 0% 0% no-repeat padding-box; + border-radius: 30px; + opacity: 1; + width: 110px; + height: 40px; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; +} + +.dataset-part-of { + display: flex; + flex-direction: row; + text-align: left; + font-weight: 400; + font-family: "Roboto", sans-serif; + font-size: 0.875rem; + align-items: center; + letter-spacing: 0px; + color: #3d3d3d; + padding: 0; +} + .changes { font-weight: 400; color: #ffffff; } +.dataset-changes { + font-weight: 400; + color: #000000; +} + .stepper { position: fixed; // height: 100%; display: flex; flex-direction: column; - height: calc(100vh - 205px); + height: calc(100vh - 240px); + overflow-y: auto; } .stepper-title { @@ -145,6 +247,7 @@ form { padding: 0.3rem 0.1rem; opacity: 0.6; cursor: pointer; + max-width: 290px; } .stepper-list .active { @@ -153,6 +256,24 @@ form { opacity: 1; } +.stepper-list .active-dataset { + color: #212121; + font-weight: 700; + opacity: 1; + div { + width: 73px; + height: 27px; + background-color: #f7dd72; + color: #5d5d5d; + border-radius: 4px; + font-weight: 400; + font-size: 14px; + justify-content: center; + display: flex; + align-items: center; + } +} + .stepper-options { // flex-grow: 1; } @@ -161,6 +282,7 @@ form { display: flex; padding-left: 1rem; margin-top: auto; + margin-bottom: 0.5rem; // margin-top: 5rem; // flex-grow: 8; } @@ -193,6 +315,14 @@ form { cursor: pointer; } +.dataset-next { + background: #f7dd72 0% 0% no-repeat padding-box; + color: #212121; + box-shadow: 0px 3px 6px #1e202029; + font-weight: 700; + cursor: pointer; +} + .previous-disabled { border: 1px solid #b5b5b5; color: #b5b5b5; @@ -206,6 +336,37 @@ form { cursor: auto !important; } +.dataset-list { + list-style-type: none; + padding-left: 0px; +} + +.dmp-label { + width: 67px; + height: 37px; + background: #129d99 0% 0% no-repeat padding-box; + color: white; + border-radius: 4px; + opacity: 1; + display: flex; + align-items: center; + justify-content: center; +} + +.dmp-title { + text-align: left; + font-weight: 500; + font-family: "Roboto", sans-serif; + font-size: 1rem; + opacity: 0.81; + padding-top: 0.75rem; + padding-bottom: 0.55rem; + color: #212121; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + ::ng-deep .mat-tab-labels { justify-content: space-between; } 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 8704484a1..041a301a3 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 @@ -72,7 +72,7 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC lock: LockModel; lockStatus: Boolean; step: number = 0; - maxStep: number = 2; + maxStep: number = 3; constructor( private dmpProfileService: DmpProfileService, @@ -139,8 +139,8 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC this.dmp.extraProperties = new ExtraPropertiesFormModel(); this.dmp.fromModel(data); this.formGroup = this.dmp.buildForm(); - 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; this.setIsUserOwner(); if (!this.isUserOwner) { @@ -201,6 +201,7 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC this.formGroup = this.dmp.buildForm(); 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; //this.registerFormEventsForDmpProfile(this.dmp.definition); this.formGroup.disable(); @@ -240,6 +241,7 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC this.formGroup = this.dmp.buildForm(); 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; this.registerFormEventsForNewItem(); if (this.isAuthenticated) { @@ -291,6 +293,11 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC this.hasChanges = true; } + datasetFormChanged(formGroup: FormGroup) { + // this.datasetFormGroup = formGroup; + // console.log(this.datasetFormGroup); + } + isAuthenticated() { return this.authService.current() != null; } @@ -360,7 +367,7 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC } onSubmit(showAddDatasetDialog?: boolean): void { - this.dmpService.createDmp(this.formGroup.getRawValue()) + this.dmpService.createDmpWithDatasets(this.formGroup.getRawValue()) .pipe(takeUntil(this._destroyed)) .subscribe( complete => { @@ -373,7 +380,21 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC this.formGroup.get('status').setValue(DmpStatus.Draft); this.onCallbackError(error); } - ); + ) + // this.dmpService.createDmp(this.formGroup.getRawValue()) + // .pipe(takeUntil(this._destroyed)) + // .subscribe( + // complete => { + // if (showAddDatasetDialog) { + // this.addDatasetOpenDialog(complete); + // } + // else { this.onCallbackSuccess(complete) } + // }, + // error => { + // this.formGroup.get('status').setValue(DmpStatus.Draft); + // this.onCallbackError(error); + // } + // ); } @@ -625,9 +646,7 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC } public discardChanges() { - // this.formGroup.reset(); this.formGroup.patchValue(JSON.parse(JSON.stringify(this.formGroupRawValue))); - this.hasChanges = false; } 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 b67f9549d..38edd04aa 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 @@ -22,6 +22,9 @@ import { ValidationErrorModel } from '@common/forms/validation/error-model/valid import { ValidationContext } from '@common/forms/validation/validation-context'; import { ExtraPropertiesFormModel } from './general-tab/extra-properties-form.model'; import { isNullOrUndefined } from 'util'; +import { DatasetWizardEditorModel } from '@app/ui/dataset/dataset-wizard/dataset-wizard-editor.model'; +import { DatasetsAutoCompleteFieldDataEditorModel } from '@app/ui/admin/dataset-profile/admin/field-data/datasets-autocomplete-field-data-editor-mode'; +import { DatasetWizardModel } from '@app/core/model/dataset/dataset-wizard'; export class DmpEditorModel { public id: string; @@ -39,7 +42,8 @@ export class DmpEditorModel { public organisations: OrganizationModel[] = []; public researchers: ResearcherModel[] = []; public profiles: DmpProfile[] = []; - public datasets: DatasetModel[] = []; + public datasets: DatasetWizardEditorModel[] = []; + // public datasets: DatasetModel[] = []; public datasetsToBeFinalized: string[] = []; public associatedUsers: UserModel[] = []; public users: UserInfoListingModel[] = []; @@ -64,7 +68,7 @@ export class DmpEditorModel { this.organisations = item.organisations; this.researchers = item.researchers; this.profiles = item.profiles; - this.datasets = item.datasets; + if (item.datasets) { item.datasets.map(x => this.datasets.push(new DatasetWizardEditorModel().fromModel(x))); } this.datasetsToBeFinalized = item.datasetsToBeFinalized; this.associatedUsers = item.associatedUsers; this.users = item.users; @@ -95,7 +99,7 @@ export class DmpEditorModel { 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], - datasets: [{ value: this.datasets, disabled: disabled }, context.getValidation('datasets').validators], + // datasets: [{ value: this.datasets, disabled: disabled }, context.getValidation('datasets').validators], datasetsToBeFinalized: [{ value: this.datasetsToBeFinalized, disabled: disabled }, context.getValidation('datasetsToBeFinalized').validators], associatedUsers: [{ value: this.associatedUsers, disabled: disabled }, context.getValidation('associatedUsers').validators], users: [{ value: this.users, disabled: disabled }, context.getValidation('users').validators], @@ -103,6 +107,10 @@ export class DmpEditorModel { extraProperties: this.extraProperties.buildForm(), }); + const datasets = new Array(); + if(this.datasets) { this.datasets.forEach(item => datasets.push(item.buildForm())); } + formGroup.addControl('datasets', new FormBuilder().array(datasets)); + const dynamicFields = new Array(); if (this.dynamicFields) { this.dynamicFields.forEach(item => dynamicFields.push(item.buildForm())); } formGroup.addControl('dynamicFields', new FormBuilder().array(dynamicFields)); diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-field/form-field.component.html b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-field/form-field.component.html index d811889f2..fc090d9dd 100644 --- a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-field/form-field.component.html +++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-field/form-field.component.html @@ -98,8 +98,10 @@
    - + diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.scss b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.scss index c1b1aa04a..69cfa2224 100644 --- a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.scss +++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.scss @@ -1,6 +1,7 @@ .dynamic-form-section { .expansion-panel { - background-color: #eeeeee54; + // background-color: #eeeeee54; + background-color: white; margin-bottom: 1em; } .addOneFieldButton { diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description-form.component.scss b/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description-form.component.scss index 65de16db2..34c2cf38b 100644 --- a/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description-form.component.scss +++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description-form.component.scss @@ -1,16 +1,20 @@ @media (max-width: 768px) { - .dynamic-form-editor { - .form-container { - padding: 0px; - } - } + .dynamic-form-editor { + .form-container { + padding: 0px; + } + } } .form-container { } .dynamic-form-editor { - mat-vertical-stepper { - background-color: #ffffff; - } + mat-vertical-stepper { + background-color: #ffffff; + } +} + +.mat-step-header .mat-step-icon-selected, .mat-step-header .mat-step-icon-state-done, .mat-step-header .mat-step-icon-state-edit { + background-color: #129D99 !important; } diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description-form.module.ts b/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description-form.module.ts index 97f52ca21..0fd99cddc 100644 --- a/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description-form.module.ts +++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description-form.module.ts @@ -11,6 +11,7 @@ import { CommonFormsModule } from '@common/forms/common-forms.module'; import { CommonUiModule } from '@common/ui/common-ui.module'; import { FormCompositeTitleComponent } from './components/form-composite-title/form-composite-title.component'; import { ExternalSourcesModule } from '../external-sources/external-sources.module'; +import { DatasetDescriptionComponent } from './dataset-description.component'; @NgModule({ imports: [ @@ -21,6 +22,7 @@ import { ExternalSourcesModule } from '../external-sources/external-sources.modu ], declarations: [ DatasetDescriptionFormComponent, + DatasetDescriptionComponent, FormProgressIndicationComponent, FormSectionComponent, FormCompositeFieldComponent, @@ -28,7 +30,8 @@ import { ExternalSourcesModule } from '../external-sources/external-sources.modu FormCompositeTitleComponent ], exports: [ - DatasetDescriptionFormComponent + DatasetDescriptionFormComponent, + DatasetDescriptionComponent ], providers: [ VisibilityRulesService, diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description.component.html b/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description.component.html new file mode 100644 index 000000000..0c42621fe --- /dev/null +++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description.component.html @@ -0,0 +1,22 @@ +
    + +
    +
    +
    + +
    +
    + + {{pageFormGroup.get('title').value}} + +
    + +
    +     +
    +
    +     +
    +
    +
    +
    diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description.component.scss b/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description.component.scss new file mode 100644 index 000000000..8a3eae6ce --- /dev/null +++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description.component.scss @@ -0,0 +1,30 @@ +@media (max-width: 768px) { + .dynamic-form-editor { + .form-container { + padding: 0px; + } + } +} + +.form-container { +} + +.dynamic-form-editor { + mat-vertical-stepper { + background-color: #ffffff; + } +} + +// ::ng-deep .mat-form-field-flex > .mat-form-field-infix {padding: 0.4em 0px !important;} +::ng-deep .mat-form-field-label-wrapper { top: -1.5em; } + +::ng-deep .mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label { + transform: translateY(-1.1em) scale(.75); + width: 133.33333%; +} + +::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {background: #fafafa !important;} + +::ng-deep .mat-step-header .mat-step-icon-selected, .mat-step-header .mat-step-icon-state-done, .mat-step-header .mat-step-icon-state-edit { + background-color: #129D99 !important; +} diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description.component.ts b/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description.component.ts new file mode 100644 index 000000000..eeda6658d --- /dev/null +++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description.component.ts @@ -0,0 +1,48 @@ +import { AfterViewInit, Component, Input, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core'; +import { FormGroup } from '@angular/forms'; +import { MatHorizontalStepper } from '@angular/material/stepper'; +import { Rule } from '@app/core/model/dataset-profile-definition/rule'; +import { LinkToScroll } from '@app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents'; +import { VisibilityRulesService } from '@app/ui/misc/dataset-description-form/visibility-rules/visibility-rules.service'; +import { BaseComponent } from '@common/base/base.component'; + +@Component({ + selector: 'app-dataset-description', + templateUrl: './dataset-description.component.html', + styleUrls: ['./dataset-description.component.scss'] +}) +export class DatasetDescriptionComponent extends BaseComponent implements OnInit, AfterViewInit, OnChanges { + + @ViewChild('stepper', { static: false }) stepper: MatHorizontalStepper; + @Input() path: string; + @Input() form: FormGroup; + @Input() visibilityRules: Rule[] = []; + @Input() datasetProfileId: String; + @Input() linkToScroll: LinkToScroll; + + constructor( + private visibilityRulesService: VisibilityRulesService, + ) { + super(); + } + + ngOnInit() { + this.visibilityRulesService.buildVisibilityRules(this.visibilityRules, this.form); + } + + ngOnChanges(changes: SimpleChanges) { + + // When the form is changed set stepper index to 0. + if (this.stepper && changes['form'] && !changes['form'].isFirstChange()) { + this.stepper.selectedIndex = 0; + } else if (this.stepper && changes['linkToScroll'] && changes['linkToScroll'].currentValue) { + if (changes['linkToScroll'].currentValue.page >= 0) { + this.stepper.selectedIndex = changes['linkToScroll'].currentValue.page; + } + } + } + + ngAfterViewInit() { + + } +} diff --git a/dmp-frontend/src/app/ui/misc/external-sources/listing/external-item-listing.component.html b/dmp-frontend/src/app/ui/misc/external-sources/listing/external-item-listing.component.html index 3d094ebad..d75537b30 100644 --- a/dmp-frontend/src/app/ui/misc/external-sources/listing/external-item-listing.component.html +++ b/dmp-frontend/src/app/ui/misc/external-sources/listing/external-item-listing.component.html @@ -1,16 +1,20 @@
    - - - - {{ option.label }} - - - - - - - {{ 'DATASET-WIZARD.SECOND-STEP.EXTERNAL-HINT' | translate }} - +
    + + + + {{ option.label }} + + + +
    +
    + + + + {{ 'DATASET-WIZARD.SECOND-STEP.EXTERNAL-HINT' | translate }} + +
    diff --git a/dmp-frontend/src/app/ui/misc/external-sources/listing/external-item-listing.component.scss b/dmp-frontend/src/app/ui/misc/external-sources/listing/external-item-listing.component.scss index e69de29bb..0d7199fdc 100644 --- a/dmp-frontend/src/app/ui/misc/external-sources/listing/external-item-listing.component.scss +++ b/dmp-frontend/src/app/ui/misc/external-sources/listing/external-item-listing.component.scss @@ -0,0 +1,8 @@ +::ng-deep .external-item .mat-form-field-appearance-outline .mat-form-field-outline { + background: #fafafa !important; +} + +::ng-deep .external-item .mat-form-field-appearance-outline .mat-form-field-infix { + font-size: 1rem; + padding: 0.6em 0 1em 0 !important; +} diff --git a/dmp-frontend/src/styles.scss b/dmp-frontend/src/styles.scss index ba53ff116..5452616c1 100644 --- a/dmp-frontend/src/styles.scss +++ b/dmp-frontend/src/styles.scss @@ -170,3 +170,14 @@ display: flex; flex-grow: 1; } + + +// ::ng-deep .mat-form-field-flex > .mat-form-field-infix { padding: 0.4em 0px !important; } +// ::ng-deep .mat-form-field-label-wrapper { top: -1.5em; } + +// ::ng-deep .mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label { +// transform: translateY(-1.1em) scale(.75); +// width: 133.33333%; +// } + +// ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {background: #fafafa !important;}