MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

Dataset profile editor. Dynamic progress bar and confirmation before delete

This commit is contained in:
Kristian Ntavidi 2021-02-12 16:27:35 +02:00
parent 35eb42e631
commit 7445ec5042
4 changed files with 75 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.ts
View File

@ -7,6 +7,9 @@ import { ValidationType } from '@app/core/common/enum/validation-type';
import { MatCheckboxChange } from '@angular/material/checkbox';
import { DatasetDescriptionCompositeFieldEditorModel, DatasetDescriptionFieldEditorModel } from '@app/ui/misc/dataset-description-form/dataset-description-form.model';
import { DatasetProfileFieldViewStyle } from '@app/core/common/enum/dataset-profile-field-view-style';
import { MatDialog } from '@angular/material';
import { ConfirmationDialogComponent } from '@common/modules/confirmation-dialog/confirmation-dialog.component';
import { TranslateService } from '@ngx-translate/core';
@Component({
selector: 'app-dataset-profile-editor-composite-field-component',
@ -27,7 +30,10 @@ export class DatasetProfileEditorCompositeFieldComponent implements OnInit, OnCh
isMultiplicityEnabled = false;
viewStyleEnum = DatasetProfileFieldViewStyle;
constructor() { }
constructor(
private dialog: MatDialog,
private language: TranslateService,
) { }
ngOnChanges(){
this.setTargetField(null);
@ -170,6 +176,26 @@ export class DatasetProfileEditorCompositeFieldComponent implements OnInit, OnCh
deleteTargetField(){
const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
restoreFocus: false,
data: {
message: this.language.instant('GENERAL.CONFIRMATION-DIALOG.DELETE-ITEM'),
confirmButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CONFIRM'),
cancelButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CANCEL'),
isDeleteConfirmation: true
}
});
dialogRef.afterClosed().subscribe(result => {
if (result) {
this._deleteTargetField();
}
});
}
private _deleteTargetField(){
if(!this.targetField) return;
let index = -1;

3
dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field/dataset-profile-editor-field.component.ts
View File

@ -224,7 +224,8 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements
cssClass: null
};
fieldEditorModel.data = this.form.get('data').value;
fieldEditorModel.data = (this.form.get('data') as FormGroup).getRawValue();
fieldEditorModel.value = this.form.get('defaultValue').get('value').value;
fieldEditorModel.validationRequired = (this.form.get('validations').value as Array<ValidationType>).includes(ValidationType.Required);

40
dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.html
View File

@ -25,21 +25,11 @@
<div class="row" style="padding: 2em;">
<div class="col-7 bg-white" style="overflow: hidden; padding: 0px" id="progress-container">
<div id="progress" [ngStyle]="{'transform': 'translateX('+barPercentageA+'%) skewX(-25deg)'}"></div>
<div id="progress" [ngStyle]="{'transform': 'translateX('+barPercentage+'%) skewX(-25deg)'}"></div>
<div class="row p-1">
<div class="col text-center" >
<span (click)="stepper.selectedIndex=0" style="cursor: pointer">
{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.TITLE' | translate}}
</span>
</div>
<div class="col text-center">
<span (click)="stepper.selectedIndex=1" style="cursor: pointer">
{{'DATASET-PROFILE-EDITOR.STEPS.FORM.TITLE' | translate}}
</span>
</div>
<div class="col text-center text-muted">
<span style="cursor: pointer">
Preview and Finalize
<div class="col text-center" *ngFor="let step of steps; index as idx">
<span (click)="stepper.selectedIndex=idx" style="cursor: pointer">
{{step.label}}
</span>
</div>
</div>
@ -56,10 +46,11 @@
</div>
<mat-horizontal-stepper [linear]="true" #stepper class="stepper" (selectionChange)="onStepperSelectionChange($event)">
<mat-step>
<ng-template matStepLabel>{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.TITLE' | translate}}
</ng-template>
<mat-horizontal-stepper [linear]="true" #stepper class="stepper">
<mat-step [label]="'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.TITLE' | translate">
<!-- <ng-template matStepLabel>{{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.TITLE' | translate}}
</ng-template> -->
<div class="row">
<div class="col-12">
<div class="heading">1.1 {{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-NAME'| translate}} *</div>
@ -119,8 +110,8 @@
</div>
</div>
</mat-step> -->
<mat-step>
<ng-template matStepLabel>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.TITLE' | translate}}</ng-template>
<mat-step [label]="'DATASET-PROFILE-EDITOR.STEPS.FORM.TITLE' | translate">
<!-- <ng-template matStepLabel>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.TITLE' | translate}}</ng-template> -->
<div class="row">
<!-- TABLE -->
@ -251,12 +242,15 @@
</div> -->
</div>
</mat-step>
<mat-step label="Preview and Finalize">
Preview and finalize
</mat-step>
</mat-horizontal-stepper>
<ng-container *ngIf="false">
<ng-container *ngIf="true">
<div class="d-flex">
<!-- SAVE BUTTON -->
@ -296,10 +290,10 @@
</ng-container>
<!-- <div class="row">
<div class="row">
<button (click)="printForm()">
console form
</button>
</div> -->
</div>
</div>
</div>

47
dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.ts
View File

@ -44,7 +44,7 @@ const skipDisable: any[] = require('../../../../../assets/resources/skipDisable.
templateUrl: './dataset-profile-editor.component.html',
styleUrls: ['./dataset-profile-editor.component.scss']
})
export class DatasetProfileEditorComponent extends BaseComponent implements OnInit, AfterViewInit {
export class DatasetProfileEditorComponent extends BaseComponent implements OnInit {
isNew = true;
isNewVersion = false;
@ -88,12 +88,6 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
// this.profileID = route.snapshot.params['id'];
// this.cloneId = route.snapshot.params['cloneid'];
}
ngAfterViewInit(): void {
// setTimeout(() => {
// this.barPercentage = (1 / (this.stepper.steps.length+1)) * 110 - 110;
// }, 0);
}
ngOnInit() {
this.matomoService.trackPageView('Admin: Dataset Profile Edit');
@ -732,9 +726,27 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
onRemoveEntry(tce: ToCEntry){
const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
restoreFocus: false,
data: {
message: this.language.instant('GENERAL.CONFIRMATION-DIALOG.DELETE-ITEM'),
confirmButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CONFIRM'),
cancelButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CANCEL'),
isDeleteConfirmation: true
}
});
dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => {
if (result) {
this._deleteEntry(tce);
}
});
}
onRemoveEntry(tce: ToCEntry) {
private _deleteEntry(tce: ToCEntry) {
//define entry type
switch (tce.type) {
case ToCEntryType.Page:
@ -949,22 +961,19 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
console.log(this.form.value);
}
barPercentage = -100;
onStepperSelectionChange(selectionChange: StepperSelectionEvent){
this.barPercentage = ((selectionChange.selectedIndex+1) / (this.stepper.steps.length+1)) * 110- 110;
}
get barPercentageA(){
get barPercentage(){
if(!this.stepper){
return -110;
}
const selectedIndex = this.stepper.selectedIndex + 1;
return (selectedIndex / (this.stepper.steps.length+1)) * 110- 110;
return (selectedIndex / this.stepper.steps.length) * 110- 110;
}
get steps(){
if(!this.stepper){
return [];
}
return this.stepper.steps;
}
}