diff --git a/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete-configuration.ts b/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete-configuration.ts index ebb0be39f..32b99b46c 100644 --- a/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete-configuration.ts +++ b/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete-configuration.ts @@ -31,7 +31,9 @@ export interface MultipleAutoCompleteConfiguration { optionTemplate?: TemplateRef; // Selected value formating template selectedValueTemplate?: TemplateRef; - + // Display icon that opens popup + popupItemActionIcon?: string; autoSelectFirstOptionOnBlur?: boolean; + } diff --git a/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.html b/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.html index ae3805b29..83b01d997 100644 --- a/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.html +++ b/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.html @@ -10,9 +10,9 @@ - + + --> arrow_drop_down @@ -22,10 +22,13 @@ -
- {{_titleFn(item)}} -
- {{_subtitleFn(item)}} +
+
+ {{_titleFn(item)}} +
+ {{_subtitleFn(item)}} +
+ {{popupItemActionIcon}}
@@ -38,10 +41,13 @@ -
- {{_titleFn(item)}} -
- {{_subtitleFn(item)}} +
+
+ {{_titleFn(item)}} +
+ {{_subtitleFn(item)}} +
+ {{popupItemActionIcon}}
diff --git a/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.scss b/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.scss index 0888bcfa6..6be1e76f5 100644 --- a/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.scss +++ b/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.scss @@ -19,6 +19,23 @@ } +.title-fn { + flex-grow: 1; + white-space: nowrap; + width: calc(100% - 16px); + overflow: hidden; + text-overflow: ellipsis; +} + +.option-icon { + mat-icon { + margin: 0px 5px 0px 10px; + } + mat-icon:hover { + color: #129d99; + } +} + .two-line-mat-option { line-height: 1.2em; } diff --git a/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.ts b/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.ts index 5f05404a0..5ccb029f1 100644 --- a/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.ts +++ b/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.ts @@ -1,5 +1,5 @@ import { FocusMonitor } from '@angular/cdk/a11y'; -import { COMMA, ENTER } from '@angular/cdk/keycodes'; +import { BACKSPACE, COMMA, ENTER } from '@angular/cdk/keycodes'; import { Component, DoCheck, ElementRef, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Optional, Output, Self, SimpleChanges, TemplateRef, ViewChild } from '@angular/core'; import { ControlValueAccessor, FormGroupDirective, NgControl, NgForm } from '@angular/forms'; import { ErrorStateMatcher, MatChipInputEvent, mixinErrorState } from '@angular/material'; @@ -45,6 +45,9 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp @Output() optionSelected: EventEmitter = new EventEmitter(); @Output() optionRemoved: EventEmitter = new EventEmitter(); + @Output() optionActionClicked: EventEmitter = new EventEmitter(); + + id = `multiple-autocomplete-${MultipleAutoCompleteComponent.nextId++}`; stateChanges = new Subject(); focused = false; @@ -200,6 +203,12 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp } } + public onKeyDown(event) { + if (event.keyCode === BACKSPACE && event.target.value.length === 0 && this._selectedItems.size > 0) { + this._removeSelectedItem(Array.from(this._selectedItems.values()).pop(), event); + } + } + private _setValue(value: any) { this.value = value; this.pushChanges(this.value); @@ -301,6 +310,10 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp return this.configuration.autoSelectFirstOptionOnBlur != null ? this.configuration.autoSelectFirstOptionOnBlur : false; } + get popupItemActionIcon(): string { + return this.configuration.popupItemActionIcon != null ? this.configuration.popupItemActionIcon : ''; + } + //Chip Functions _addItem(event: MatChipInputEvent): void { @@ -329,4 +342,9 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp this.autocompleteInput.nativeElement.focus(); this.pushChanges(this.value); } + + _optionActionClick(item: any, event: MouseEvent): void { + if (event != null) { event.stopPropagation(); } + this.optionActionClicked.emit(item); + } } diff --git a/dmp-frontend/src/app/ui/dmp/dataset-preview/dataset-preview-dialog.component.html b/dmp-frontend/src/app/ui/dmp/dataset-preview/dataset-preview-dialog.component.html new file mode 100644 index 000000000..8fa254b96 --- /dev/null +++ b/dmp-frontend/src/app/ui/dmp/dataset-preview/dataset-preview-dialog.component.html @@ -0,0 +1,17 @@ +
+
+ {{'DMP-LISTING.COLUMNS.PROFILE' | translate}} - {{data.template.label}} + close +
+
+ +
+
+ +
+
+
+ +
+
+
diff --git a/dmp-frontend/src/app/ui/dmp/dataset-preview/dataset-preview-dialog.component.scss b/dmp-frontend/src/app/ui/dmp/dataset-preview/dataset-preview-dialog.component.scss new file mode 100644 index 000000000..d0cc40e03 --- /dev/null +++ b/dmp-frontend/src/app/ui/dmp/dataset-preview/dataset-preview-dialog.component.scss @@ -0,0 +1,42 @@ +.template-container { + .header { + display: flex; + width: 100%; + height: 89px; + background-color: #129D99; + color: #FFFFFF; + font-size: 1.25rem; + } + + .template-title { + margin-left: 37px; + } + + .close-icon { + cursor: pointer; + margin-right: 20px; + } + + .close-icon:hover { + background-color: #fefefe6e !important; + border-radius: 50%; + } + + .definition-content { + display: block; + margin: 0px; + padding: 0 24px; + } + + .start-btn { + background: #129d99 0% 0% no-repeat padding-box; + border: 1px solid #129d99; + border-radius: 30px; + opacity: 1; + width: 101px; + height: 43px; + color: #ffffff; + font-weight: 500; + } +} + diff --git a/dmp-frontend/src/app/ui/dmp/dataset-preview/dataset-preview-dialog.component.ts b/dmp-frontend/src/app/ui/dmp/dataset-preview/dataset-preview-dialog.component.ts new file mode 100644 index 000000000..a00cc07fc --- /dev/null +++ b/dmp-frontend/src/app/ui/dmp/dataset-preview/dataset-preview-dialog.component.ts @@ -0,0 +1,54 @@ +import { Component, Inject, OnInit } from '@angular/core'; +import { FormGroup } from '@angular/forms'; +import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; +import { DatasetWizardService } from '@app/core/services/dataset-wizard/dataset-wizard.service'; +import { ProgressIndicationService } from '@app/core/services/progress-indication/progress-indication-service'; +import { DatasetDescriptionFormEditorModel } from '@app/ui/misc/dataset-description-form/dataset-description-form.model'; +import { BaseComponent } from '@common/base/base.component'; +import { takeUntil } from 'rxjs/operators'; + +@Component({ + selector: 'app-dataset-preview-dialog-component', + templateUrl: 'dataset-preview-dialog.component.html', + styleUrls: ['./dataset-preview-dialog.component.scss'], +}) +export class DatasetPreviewDialogComponent extends BaseComponent implements OnInit { + + datasetProfileDefinitionModel: DatasetDescriptionFormEditorModel; + datasetProfileDefinitionFormGroup: FormGroup; + progressIndication = false; + + constructor( + public dialogRef: MatDialogRef, + private datasetWizardService: DatasetWizardService, + private progressIndicationService: ProgressIndicationService, + @Inject(MAT_DIALOG_DATA) public data: any + ) { + super(); + } + + ngOnInit(): void { + this.progressIndicationService.getProgressIndicationObservable().pipe(takeUntil(this._destroyed)).subscribe(x => { + setTimeout(() => { this.progressIndication = x; }); + }); + + if (this.data && this.data.template) { + this.datasetWizardService.getDefinition(this.data.template.id) + .pipe(takeUntil(this._destroyed)) + .subscribe(item => { + this.datasetProfileDefinitionModel = new DatasetDescriptionFormEditorModel().fromModel(item); + this.datasetProfileDefinitionFormGroup = this.datasetProfileDefinitionModel.buildForm(); + this.datasetProfileDefinitionFormGroup.disable(); + }); + } + } + + select(): void { + this.dialogRef.close(true); + } + + closeDialog(): void { + this.dialogRef.close(); + } + +} diff --git a/dmp-frontend/src/app/ui/dmp/dmp.module.ts b/dmp-frontend/src/app/ui/dmp/dmp.module.ts index 3f37ce449..c62ff93dc 100644 --- a/dmp-frontend/src/app/ui/dmp/dmp.module.ts +++ b/dmp-frontend/src/app/ui/dmp/dmp.module.ts @@ -48,6 +48,7 @@ import { NgxDropzoneModule } from 'ngx-dropzone'; import { DmpToDatasetDialogComponent } from './dmp-to-dataset/dmp-to-dataset-dialog.component'; import { FormProgressIndicationComponent } from '../misc/dataset-description-form/components/form-progress-indication/form-progress-indication.component'; import { FormProgressIndicationModule } from '../misc/dataset-description-form/components/form-progress-indication/form-progress-indication.module'; +import { DatasetPreviewDialogComponent } from './dataset-preview/dataset-preview-dialog.component'; @NgModule({ imports: [ @@ -99,7 +100,8 @@ import { FormProgressIndicationModule } from '../misc/dataset-description-form/c MainInfoComponent, FundingInfoComponent, DatasetInfoComponent, - LicenseInfoComponent + LicenseInfoComponent, + DatasetPreviewDialogComponent ], entryComponents: [ DmpInvitationDialogComponent, @@ -114,7 +116,8 @@ import { FormProgressIndicationModule } from '../misc/dataset-description-form/c AddCostComponent, StartNewDmpDialogComponent, StartNewDatasetDialogComponent, - DatasetEditorDetailsComponent + DatasetEditorDetailsComponent, + DatasetPreviewDialogComponent ] }) export class DmpModule { } diff --git a/dmp-frontend/src/app/ui/dmp/editor/dataset-info/dataset-info.component.html b/dmp-frontend/src/app/ui/dmp/editor/dataset-info/dataset-info.component.html index d2a37ecf0..06b9d9be5 100644 --- a/dmp-frontend/src/app/ui/dmp/editor/dataset-info/dataset-info.component.html +++ b/dmp-frontend/src/app/ui/dmp/editor/dataset-info/dataset-info.component.html @@ -13,7 +13,7 @@
- + {{formGroup.get('profiles').getError('backendError').message}} diff --git a/dmp-frontend/src/app/ui/dmp/editor/dataset-info/dataset-info.component.ts b/dmp-frontend/src/app/ui/dmp/editor/dataset-info/dataset-info.component.ts index fba7b8927..b63540869 100644 --- a/dmp-frontend/src/app/ui/dmp/editor/dataset-info/dataset-info.component.ts +++ b/dmp-frontend/src/app/ui/dmp/editor/dataset-info/dataset-info.component.ts @@ -24,6 +24,7 @@ import { DatasetDescriptionFormEditorModel } from '@app/ui/misc/dataset-descript import { DatasetWizardEditorModel } from '@app/ui/dataset/dataset-wizard/dataset-wizard-editor.model'; import { DmpListingModel } from '@app/core/model/dmp/dmp-listing'; import { UiNotificationService, SnackBarNotificationLevel } from '@app/core/services/notification/ui-notification-service'; +import { DatasetPreviewDialogComponent } from '../../dataset-preview/dataset-preview-dialog.component'; @Component({ selector: 'dataset-info', @@ -49,6 +50,7 @@ export class DatasetInfoComponent extends BaseComponent implements OnInit { profilesAutoCompleteConfiguration: MultipleAutoCompleteConfiguration; datasetProfileDefinitionModel: DatasetDescriptionFormEditorModel; + datasetProfileDefinitionFormGroup: FormGroup; constructor( private language: TranslateService, @@ -71,7 +73,8 @@ export class DatasetInfoComponent extends BaseComponent implements OnInit { 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'] + subtitleFn: (item) => item['description'], + popupItemActionIcon: 'visibility' }; if (this.formGroup.get('definition')) { this.selectedDmpProfileDefinition = this.formGroup.get('definition').value; } @@ -84,7 +87,8 @@ export class DatasetInfoComponent extends BaseComponent implements OnInit { 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'] + subtitleFn: (item) => item['description'], + popupItemActionIcon: 'visibility' }; } } @@ -205,4 +209,30 @@ export class DatasetInfoComponent extends BaseComponent implements OnInit { } } + + onPreviewTemplate(event) { + const dialogRef = this.dialog.open(DatasetPreviewDialogComponent, { + width: '590px', + minHeight: '200px', + restoreFocus: false, + data: { + template: event + }, + panelClass: 'custom-modalbox' + }); + dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => { + if (result) { + let profiles = this.formGroup.get('profiles').value; + profiles.push(event); + this.formGroup.get('profiles').setValue(profiles); + 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'] + }; + } + }); + } } 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 01d5c7493..dc8e75447 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 @@ -2,7 +2,7 @@ .expansion-panel { // background-color: #eeeeee54; background-color: white; - margin-bottom: 1em; + // margin-bottom: 1em; } .addOneFieldButton { margin-top: -15px; diff --git a/dmp-frontend/src/assets/css/demo.css b/dmp-frontend/src/assets/css/demo.css index f330ec492..f904db6c4 100644 --- a/dmp-frontend/src/assets/css/demo.css +++ b/dmp-frontend/src/assets/css/demo.css @@ -667,6 +667,10 @@ hr { cursor: pointer; } +.custom-modalbox > mat-dialog-container { + padding: 0px; +} + @media (min-width: 576px) { .container { max-width: 540px;