Improves usability of Copy Dataset Description dialog
This commit is contained in:
parent
59cb4db641
commit
de5dcb7d4c
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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();
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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)">
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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": {
|
||||||
|
|
Loading…
Reference in New Issue