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));
} else {
itemsFuture = pagedItems
.selectAsync(item -> new DataManagementPlanListingModel().fromDataModel(item))
.selectAsync(item -> new DataManagementPlanListingModel().fromDataModelAssociatedProfiles(item))
.whenComplete((resultList, throwable) -> dataTable.setData(resultList));
}
CompletableFuture countFuture = authItems.countAsync().whenComplete((count, throwable) -> {
dataTable.setTotalCount(count);
});
CompletableFuture countFuture = authItems.countAsync().whenComplete((count, throwable) ->
dataTable.setTotalCount(count)
);
CompletableFuture.allOf(itemsFuture, countFuture).join();
return dataTable;
}

View File

@ -183,6 +183,14 @@ public class DataManagementPlanListingModel implements DataModel<DMP, DataManage
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) {
this.fromDataModel(entity);
this.status = entity.getStatus();

View File

@ -26,6 +26,8 @@ export interface SingleAutoCompleteConfiguration {
iconFn?: (item: any) => string;
// Property for link on chip
linkFn?: (item: any) => string;
// Disable option.
disableOption?: (item: any) => boolean;
//Extra data passed to query function
extraData?: any;
// 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)">
<span *ngIf="_groupedItems">
<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" /> -->
<span>{{_titleFn(item)}}</span>
<br *ngIf="_subtitleFn(item)">
@ -21,7 +21,7 @@
</mat-optgroup>
</span>
<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" /> -->
<span>{{_titleFn(item)}}</span>
<br *ngIf="_subtitleFn(item)">

View File

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

View File

@ -1,21 +1,17 @@
<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">
<app-single-auto-complete [formControl]="data.formControl" placeholder="{{'DATASET-WIZARD.DIALOGUE.DMP-SEARCH.PLACEHOLDER' | translate}}"
[configuration]="dmpAutoCompleteConfiguration">
<app-single-auto-complete [formControl]="data.formControl" placeholder="{{'DATASET-WIZARD.DIALOGUE.DMP-SEARCH.PLACEHOLDER' | translate}}" [configuration]="dmpAutoCompleteConfiguration">
</app-single-auto-complete>
</mat-form-field>
<mat-error *ngIf="data.formControl.hasError('incorrect')">
{{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>
<!-- <mat-error *ngIf="data.formControl.hasError('incorrect')">{{getErrorMessage()}}</mat-error> -->
</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>

View File

@ -1,6 +1,11 @@
.confirmation-message {
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 { DmpModel } from "../../../../core/model/dmp/dmp";
import { TranslateService } from "@ngx-translate/core";
import { DmpAssociatedProfileModel } from '../../../../core/model/dmp-profile/dmp-associated-profile';
@Component({
selector: 'dataset-copy-dialogue-component',
@ -21,6 +22,7 @@ export class DatasetCopyDialogueComponent {
dmpAutoCompleteConfiguration: SingleAutoCompleteConfiguration;
dmpModel: DmpModel;
datasetDescriptionTemplateLabel: String;
constructor(
public dialogRef: MatDialogRef<DatasetCopyDialogueComponent>,
@ -34,7 +36,9 @@ export class DatasetCopyDialogueComponent {
filterFn: this.searchDmp.bind(this),
initialItems: (extraData) => this.searchDmp(''),
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));
}
existsDatasetDescriptionTemplate(associatedProfiles: DmpAssociatedProfileModel[]): boolean {
return associatedProfiles.some((profile) => profile.id === this.data.datasetProfileId);
}
datasetProfileValidate() {
return this.dmpService.getSingle(this.data.formControl.value.id).pipe(map(result => result as DmpModel),
map(result => {
@ -86,4 +94,8 @@ export class DatasetCopyDialogueComponent {
return false;
}
}
close() {
this.dialogRef.close(false);
}
}

View File

@ -33,9 +33,9 @@ export class DatasetDescriptionFormComponent extends BaseComponent implements On
ngOnChanges(changes: SimpleChanges) {
// 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;
} else if (changes['linkToScroll'] && changes['linkToScroll'].currentValue) {
} else if (this.stepper && changes['linkToScroll'] && changes['linkToScroll'].currentValue) {
if (changes['linkToScroll'].currentValue.page >= 0) {
this.stepper.selectedIndex = changes['linkToScroll'].currentValue.page;
}

View File

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