Improves usability of Copy Dataset Description dialog

This commit is contained in:
apapachristou 2019-11-07 16:37:07 +02:00
parent 59cb4db641
commit de5dcb7d4c
10 changed files with 55 additions and 26 deletions

View File

@ -120,13 +120,13 @@ public class DataManagementPlanManager {
.whenComplete((resultList, throwable) -> dataTable.setData(resultList)); .whenComplete((resultList, throwable) -> dataTable.setData(resultList));
} else { } else {
itemsFuture = pagedItems itemsFuture = pagedItems
.selectAsync(item -> new DataManagementPlanListingModel().fromDataModel(item)) .selectAsync(item -> new DataManagementPlanListingModel().fromDataModelAssociatedProfiles(item))
.whenComplete((resultList, throwable) -> dataTable.setData(resultList)); .whenComplete((resultList, throwable) -> dataTable.setData(resultList));
} }
CompletableFuture countFuture = authItems.countAsync().whenComplete((count, throwable) -> { CompletableFuture countFuture = authItems.countAsync().whenComplete((count, throwable) ->
dataTable.setTotalCount(count); dataTable.setTotalCount(count)
}); );
CompletableFuture.allOf(itemsFuture, countFuture).join(); CompletableFuture.allOf(itemsFuture, countFuture).join();
return dataTable; return dataTable;
} }

View File

@ -183,6 +183,14 @@ public class DataManagementPlanListingModel implements DataModel<DMP, DataManage
return this; return this;
} }
public DataManagementPlanListingModel fromDataModelAssociatedProfiles(DMP entity) {
this.id = entity.getId().toString();
this.label = entity.getLabel();
this.groupId = entity.getGroupId();
this.associatedProfiles = entity.getAssociatedDmps().stream().map(item -> new AssociatedProfile().fromData(item)).collect(Collectors.toList());
return this;
}
public DataManagementPlanListingModel fromDataModelDatasets(DMP entity) { public DataManagementPlanListingModel fromDataModelDatasets(DMP entity) {
this.fromDataModel(entity); this.fromDataModel(entity);
this.status = entity.getStatus(); this.status = entity.getStatus();

View File

@ -26,6 +26,8 @@ export interface SingleAutoCompleteConfiguration {
iconFn?: (item: any) => string; iconFn?: (item: any) => string;
// Property for link on chip // Property for link on chip
linkFn?: (item: any) => string; linkFn?: (item: any) => string;
// Disable option.
disableOption?: (item: any) => boolean;
//Extra data passed to query function //Extra data passed to query function
extraData?: any; extraData?: any;
// Callback to intercept value assignment based on item selection // Callback to intercept value assignment based on item selection

View File

@ -12,7 +12,7 @@
<mat-autocomplete [panelWidth]="auto" class="panel-width" #auto="matAutocomplete" [displayWith]="autoCompleteDisplayFn()" (optionSelected)="_optionSelected($event)"> <mat-autocomplete [panelWidth]="auto" class="panel-width" #auto="matAutocomplete" [displayWith]="autoCompleteDisplayFn()" (optionSelected)="_optionSelected($event)">
<span *ngIf="_groupedItems"> <span *ngIf="_groupedItems">
<mat-optgroup *ngFor="let group of _groupedItems | async" [label]="group.title"> <mat-optgroup *ngFor="let group of _groupedItems | async" [label]="group.title">
<mat-option *ngFor="let item of group.items" [value]="item" [class.two-line-mat-option]="_subtitleFn(item)"> <mat-option *ngFor="let item of group.items" [value]="item" [disabled]="_disableOption(item)" [class.two-line-mat-option]="_subtitleFn(item)">
<!-- <img style="vertical-align:middle;" aria-hidden src="{{state.flag}}" height="25" /> --> <!-- <img style="vertical-align:middle;" aria-hidden src="{{state.flag}}" height="25" /> -->
<span>{{_titleFn(item)}}</span> <span>{{_titleFn(item)}}</span>
<br *ngIf="_subtitleFn(item)"> <br *ngIf="_subtitleFn(item)">
@ -21,7 +21,7 @@
</mat-optgroup> </mat-optgroup>
</span> </span>
<span *ngIf="!_groupedItems"> <span *ngIf="!_groupedItems">
<mat-option *ngFor="let item of _items | async" [value]="item" [class.two-line-mat-option]="_subtitleFn(item)"> <mat-option *ngFor="let item of _items | async" [value]="item" [disabled]="_disableOption(item)" [class.two-line-mat-option]="_subtitleFn(item)">
<!-- <img style="vertical-align:middle;" aria-hidden src="{{state.flag}}" height="25" /> --> <!-- <img style="vertical-align:middle;" aria-hidden src="{{state.flag}}" height="25" /> -->
<span>{{_titleFn(item)}}</span> <span>{{_titleFn(item)}}</span>
<br *ngIf="_subtitleFn(item)"> <br *ngIf="_subtitleFn(item)">

View File

@ -151,6 +151,11 @@ export class SingleAutoCompleteComponent implements OnInit, MatFormFieldControl<
return null; return null;
} }
_disableOption(item: any): boolean {
if (this.configuration.disableOption && item) { return this.configuration.disableOption(item); }
return null;
}
_requestDelay(): number { _requestDelay(): number {
return this.configuration.requestDelay || this.requestDelay; return this.configuration.requestDelay || this.requestDelay;
} }

View File

@ -1,21 +1,17 @@
<div class="dataset-copy-dialog"> <div class="dataset-copy-dialog">
<div class="confirmation-message"> <div mat-dialog-title class="row d-flex flex-row">
<div mat-dialog-title class="col-auto">{{'DATASET-WIZARD.DIALOGUE.TITLE' | translate}}</div>
<div class="col-auto ml-auto close-btn" (click)="close()"><mat-icon>close</mat-icon></div>
</div>
<div mat-dialog-content class="confirmation-message">
<mat-form-field class="col-12"> <mat-form-field class="col-12">
<app-single-auto-complete [formControl]="data.formControl" placeholder="{{'DATASET-WIZARD.DIALOGUE.DMP-SEARCH.PLACEHOLDER' | translate}}" <app-single-auto-complete [formControl]="data.formControl" placeholder="{{'DATASET-WIZARD.DIALOGUE.DMP-SEARCH.PLACEHOLDER' | translate}}" [configuration]="dmpAutoCompleteConfiguration">
[configuration]="dmpAutoCompleteConfiguration">
</app-single-auto-complete> </app-single-auto-complete>
</mat-form-field> </mat-form-field>
<mat-error *ngIf="data.formControl.hasError('incorrect')"> <!-- <mat-error *ngIf="data.formControl.hasError('incorrect')">{{getErrorMessage()}}</mat-error> -->
{{getErrorMessage()}}
</mat-error>
</div>
<div class="row">
<div class="col"></div>
<div class="col-auto">
<button mat-raised-button type="button" (click)="cancel()">{{ data.cancelButton }}</button>
</div>
<div class="col-auto">
<button mat-raised-button color="primary" type="button" (click)="confirm()">{{ data.confirmButton }}</button>
</div> </div>
<div mat-dialog-actions class="row">
<div class="col-auto ml-auto"><button mat-raised-button type="button" (click)="cancel()">{{ data.cancelButton }}</button></div>
<div class="col-auto"><button mat-raised-button color="primary" type="button" (click)="confirm()">{{ data.confirmButton }}</button></div>
</div> </div>
</div> </div>

View File

@ -1,6 +1,11 @@
.confirmation-message { .confirmation-message {
padding-bottom: 20px; padding-bottom: 20px;
} }
.dataset-copy-dialog {
width: 350px; .close-btn {
cursor: pointer;
}
.dataset-copy-dialog {
margin-bottom: 1.125rem;
} }

View File

@ -11,6 +11,7 @@ import { DmpService } from "../../../../core/services/dmp/dmp.service";
import { Inject } from "@angular/core"; import { Inject } from "@angular/core";
import { DmpModel } from "../../../../core/model/dmp/dmp"; import { DmpModel } from "../../../../core/model/dmp/dmp";
import { TranslateService } from "@ngx-translate/core"; import { TranslateService } from "@ngx-translate/core";
import { DmpAssociatedProfileModel } from '../../../../core/model/dmp-profile/dmp-associated-profile';
@Component({ @Component({
selector: 'dataset-copy-dialogue-component', selector: 'dataset-copy-dialogue-component',
@ -21,6 +22,7 @@ export class DatasetCopyDialogueComponent {
dmpAutoCompleteConfiguration: SingleAutoCompleteConfiguration; dmpAutoCompleteConfiguration: SingleAutoCompleteConfiguration;
dmpModel: DmpModel; dmpModel: DmpModel;
datasetDescriptionTemplateLabel: String;
constructor( constructor(
public dialogRef: MatDialogRef<DatasetCopyDialogueComponent>, public dialogRef: MatDialogRef<DatasetCopyDialogueComponent>,
@ -34,7 +36,9 @@ export class DatasetCopyDialogueComponent {
filterFn: this.searchDmp.bind(this), filterFn: this.searchDmp.bind(this),
initialItems: (extraData) => this.searchDmp(''), initialItems: (extraData) => this.searchDmp(''),
displayFn: (item) => item['label'], displayFn: (item) => item['label'],
titleFn: (item) => item['label'] titleFn: (item) => item['label'],
disableOption: (item) => !this.existsDatasetDescriptionTemplate(item['associatedProfiles']),
subtitleFn: (item) => !this.existsDatasetDescriptionTemplate(item['associatedProfiles']) ? this.getErrorMessage() : null
}; };
} }
@ -62,6 +66,10 @@ export class DatasetCopyDialogueComponent {
return this.dmpService.getPaged(dmpDataTableRequest, "autocomplete").pipe(map(x => x.data)); return this.dmpService.getPaged(dmpDataTableRequest, "autocomplete").pipe(map(x => x.data));
} }
existsDatasetDescriptionTemplate(associatedProfiles: DmpAssociatedProfileModel[]): boolean {
return associatedProfiles.some((profile) => profile.id === this.data.datasetProfileId);
}
datasetProfileValidate() { datasetProfileValidate() {
return this.dmpService.getSingle(this.data.formControl.value.id).pipe(map(result => result as DmpModel), return this.dmpService.getSingle(this.data.formControl.value.id).pipe(map(result => result as DmpModel),
map(result => { map(result => {
@ -86,4 +94,8 @@ export class DatasetCopyDialogueComponent {
return false; return false;
} }
} }
close() {
this.dialogRef.close(false);
}
} }

View File

@ -33,9 +33,9 @@ export class DatasetDescriptionFormComponent extends BaseComponent implements On
ngOnChanges(changes: SimpleChanges) { ngOnChanges(changes: SimpleChanges) {
// When the form is changed set stepper index to 0. // When the form is changed set stepper index to 0.
if (changes['form'] && !changes['form'].isFirstChange()) { if (this.stepper && changes['form'] && !changes['form'].isFirstChange()) {
this.stepper.selectedIndex = 0; this.stepper.selectedIndex = 0;
} else if (changes['linkToScroll'] && changes['linkToScroll'].currentValue) { } else if (this.stepper && changes['linkToScroll'] && changes['linkToScroll'].currentValue) {
if (changes['linkToScroll'].currentValue.page >= 0) { if (changes['linkToScroll'].currentValue.page >= 0) {
this.stepper.selectedIndex = changes['linkToScroll'].currentValue.page; this.stepper.selectedIndex = changes['linkToScroll'].currentValue.page;
} }

View File

@ -457,12 +457,13 @@
"UPLOAD-XML-FILE-CANCEL": "Cancel" "UPLOAD-XML-FILE-CANCEL": "Cancel"
}, },
"DIALOGUE": { "DIALOGUE": {
"TITLE": "Copy Dataset Description to DMP",
"DMP-SEARCH": { "DMP-SEARCH": {
"PLACEHOLDER": "Search DMP" "PLACEHOLDER": "Search DMP"
}, },
"COPY": "Copy", "COPY": "Copy",
"CANCEL": "Cancel", "CANCEL": "Cancel",
"ERROR-MESSAGE": "Selected DMP does not contain this Dataset Description Template" "ERROR-MESSAGE": "Does not contain this Dataset Description Template"
} }
}, },
"DMP-OVERVIEW": { "DMP-OVERVIEW": {