Adds template preview on: clone dialog select template field, dmp upload select template field
This commit is contained in:
apapachristou
parent
7f654cc472
commit
5534f4f4a9
|
|
@ -36,7 +36,7 @@
|
|||
<div class="col-12">
|
||||
<div class="heading">{{'DMP-EDITOR.FIELDS.TEMPLATES' | translate}}</div>
|
||||
<mat-form-field>
|
||||
<app-multiple-auto-complete required='true' [formControl]="this.data.formGroup.get('profiles')" placeholder="{{'DMP-EDITOR.FIELDS.SELECT-TEMPLATE' | translate}}" [configuration]="profilesAutoCompleteConfiguration">
|
||||
<app-multiple-auto-complete required='true' [formControl]="this.data.formGroup.get('profiles')" placeholder="{{'DMP-EDITOR.FIELDS.SELECT-TEMPLATE' | translate}}" [configuration]="profilesAutoCompleteConfiguration" (optionActionClicked)="onPreviewTemplate($event)">
|
||||
</app-multiple-auto-complete>
|
||||
<mat-error *ngIf="data.formGroup.get('profiles').hasError('backendError')">
|
||||
{{data.formGroup.get('profiles').getError('backendError').message}}</mat-error>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { Component, Inject } from '@angular/core';
|
||||
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
|
||||
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
|
||||
import { DmpService } from '@app/core/services/dmp/dmp.service';
|
||||
import { map, takeUntil } from 'rxjs/operators';
|
||||
import { DmpModel } from '@app/core/model/dmp/dmp';
|
||||
|
|
@ -11,13 +11,15 @@ import { DatasetProfileModel } from '@app/core/model/dataset/dataset-profile';
|
|||
import { DataTableRequest } from '@app/core/model/data-table/data-table-request';
|
||||
import { DatasetProfileCriteria } from '@app/core/query/dataset-profile/dataset-profile-criteria';
|
||||
import { AvailableProfilesComponent } from '../../editor/available-profiles/available-profiles.component';
|
||||
import { DatasetPreviewDialogComponent } from '../../dataset-preview/dataset-preview-dialog.component';
|
||||
import { BaseComponent } from '@common/base/base.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-clone-dialog',
|
||||
templateUrl: './clone-dialog.component.html',
|
||||
styleUrls: ['./clone-dialog.component.scss']
|
||||
})
|
||||
export class CloneDialogComponent {
|
||||
export class CloneDialogComponent extends BaseComponent {
|
||||
|
||||
agreePrivacyPolicyNames = false;
|
||||
initialItems = [];
|
||||
|
|
@ -25,9 +27,12 @@ export class CloneDialogComponent {
|
|||
|
||||
constructor(
|
||||
public dialogRef: MatDialogRef<CloneDialogComponent>,
|
||||
private dialog: MatDialog,
|
||||
private dmpService: DmpService,
|
||||
@Inject(MAT_DIALOG_DATA) public data: any
|
||||
) {
|
||||
super();
|
||||
|
||||
this.selectionChanged(this.initialItems)
|
||||
|
||||
this.profilesAutoCompleteConfiguration = {
|
||||
|
|
@ -78,4 +83,31 @@ export class CloneDialogComponent {
|
|||
return this.dmpService.searchDMPProfiles(request);
|
||||
}
|
||||
|
||||
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.data.formGroup.get('profiles').value;
|
||||
profiles.push(event);
|
||||
this.data.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'],
|
||||
popupItemActionIcon: 'visibility'
|
||||
};
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,17 +31,17 @@
|
|||
</div>
|
||||
<div class="upload-form col-sm-12 col-md-12">
|
||||
<mat-form-field>
|
||||
<app-multiple-auto-complete required='true' [(ngModel)]="dmpProfiles" placeholder="{{'DMP-EDITOR.FIELDS.DATASET-TEMPLATES' | translate}}" [configuration]="profilesAutoCompleteConfiguration">
|
||||
<app-multiple-auto-complete required='true' [(ngModel)]="dmpProfiles" placeholder="{{'DMP-EDITOR.FIELDS.DATASET-TEMPLATES' | translate}}" [configuration]="profilesAutoCompleteConfiguration" (optionActionClicked)="onPreviewTemplate($event)">
|
||||
</app-multiple-auto-complete>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-3">
|
||||
<div class="col-auto ml-auto">
|
||||
<button mat-button type="button" class="cancel-btn" (click)="confirm()" [disabled]="data.fileList.length === 0">{{'DMP-UPLOAD.ACTIONS.IMPORT' | translate}}</button>
|
||||
<button mat-button type="button" class="cancel-btn" (click)="cancel()">{{'DMP-UPLOAD.ACTIONS.CANCEL' | translate}}</button>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<button mat-button type="button" class="next-btn" (click)="cancel()">{{'DMP-UPLOAD.ACTIONS.CANCEL' | translate}}</button>
|
||||
<button mat-button type="button" (click)="confirm()" [disabled]="data.fileList.length === 0" [ngClass]="{'next-btn-disabled': data.fileList.length === 0, 'next-btn': data.fileList.length !== 0}">{{'DMP-UPLOAD.ACTIONS.IMPORT' | translate}}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -46,6 +46,20 @@
|
|||
font-weight: 500;
|
||||
}
|
||||
|
||||
.next-btn-disabled {
|
||||
width: 100px;
|
||||
height: 43px;
|
||||
background: #ffffff 0% 0% no-repeat padding-box;
|
||||
border: 1px solid #b5b5b5;
|
||||
border-radius: 30px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.next-btn:hover {
|
||||
background: #129d99;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.attach-btn {
|
||||
top: -20px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,19 +1,21 @@
|
|||
import { Component, Inject } from '@angular/core';
|
||||
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
|
||||
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
|
||||
import { DmpService } from '../../../../core/services/dmp/dmp.service';
|
||||
import { MultipleAutoCompleteConfiguration } from '@app/library/auto-complete/multiple/multiple-auto-complete-configuration';
|
||||
import { map } from 'rxjs/operators';
|
||||
import { map, takeUntil } from 'rxjs/operators';
|
||||
import { Observable } from 'rxjs';
|
||||
import { DatasetProfileModel } from '@app/core/model/dataset/dataset-profile';
|
||||
import { DataTableRequest } from '@app/core/model/data-table/data-table-request';
|
||||
import { DatasetProfileCriteria } from '@app/core/query/dataset-profile/dataset-profile-criteria';
|
||||
import { DatasetPreviewDialogComponent } from '../../dataset-preview/dataset-preview-dialog.component';
|
||||
import { BaseComponent } from '@common/base/base.component';
|
||||
|
||||
@Component({
|
||||
selector: 'dmp-upload-dialogue',
|
||||
templateUrl: './dmp-upload-dialogue.component.html',
|
||||
styleUrls: ['./dmp-upload-dialogue.component.scss']
|
||||
})
|
||||
export class DmpUploadDialogue {
|
||||
export class DmpUploadDialogue extends BaseComponent {
|
||||
dmpTitle: string;
|
||||
dmpProfiles: any[] = [];
|
||||
files: File[] = [];
|
||||
|
|
@ -31,8 +33,11 @@ export class DmpUploadDialogue {
|
|||
constructor(
|
||||
public dialogRef: MatDialogRef<DmpUploadDialogue>,
|
||||
private _service: DmpService,
|
||||
private dialog: MatDialog,
|
||||
@Inject(MAT_DIALOG_DATA) public data: any,
|
||||
) { }
|
||||
) {
|
||||
super();
|
||||
}
|
||||
|
||||
cancel() {
|
||||
this.data.success = false;
|
||||
|
|
@ -79,6 +84,34 @@ export class DmpUploadDialogue {
|
|||
this.dmpTitle = null;
|
||||
}
|
||||
|
||||
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) {
|
||||
if(!this.dmpProfiles) {
|
||||
this.dmpProfiles = [];
|
||||
}
|
||||
this.dmpProfiles.push(event);
|
||||
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'],
|
||||
popupItemActionIcon: 'visibility'
|
||||
};
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
filterProfiles(value: string): Observable<DatasetProfileModel[]> {
|
||||
const request = new DataTableRequest<DatasetProfileCriteria>(null, null, { fields: ['+label'] });
|
||||
const criteria = new DatasetProfileCriteria();
|
||||
|
|
|
|||
|
|
@ -63,6 +63,11 @@
|
|||
font-weight: 500;
|
||||
}
|
||||
|
||||
.next-btn:hover {
|
||||
background-color: #129d99;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.disabled-btn {
|
||||
border: 1px solid #b5b5b5;
|
||||
border-radius: 30px;
|
||||
|
|
|
|||
|
|
@ -7,14 +7,12 @@
|
|||
<h1 mat-dialog-title class="title">{{'NAV-BAR.START-NEW-DMP' | translate}}</h1>
|
||||
<p class="text">{{'NAV-BAR.START-NEW-DMP-TXT' | translate}}</p>
|
||||
<div class="actions">
|
||||
<button type="button" class="normal-btn upload-btn d-flex flex-row align-items-center"
|
||||
(click)="uploadFile($event)">
|
||||
<button type="button" class="normal-btn upload-btn d-flex flex-row align-items-center" (click)="uploadFile($event)">
|
||||
<mat-icon class="pr-2">file_upload</mat-icon>
|
||||
{{ 'NAV-BAR.IMPORT-FROM-FILE' | translate }}
|
||||
</button>
|
||||
<p class="m-0">{{ 'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.FIRST-STEP.OR' | translate }}</p>
|
||||
<button type="button" class="normal-btn font-weight-bold d-flex flex-row align-items-center"
|
||||
(click)="startWizard()">
|
||||
<button type="button" class="normal-btn font-weight-bold d-flex flex-row align-items-center" (click)="startWizard()">
|
||||
<mat-icon>chevron_right</mat-icon>
|
||||
{{ 'NAV-BAR.START-WIZARD' | translate }}
|
||||
</button>
|
||||
|
|
|
|||
Loading…
Reference in New Issue