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

Redesign steps in dataset editor #7545

This commit is contained in:
Konstantinos Triantafyllou 2022-10-17 15:32:05 +03:00
parent dc197a5abc
commit 3361b6aff6
4 changed files with 61 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.html
View File

@ -68,8 +68,8 @@
<div class="stepper-title">{{'DMP-EDITOR.STEPPER.USER-GUIDE' | translate}}</div>
<div class="stepper-options" id="stepper-options">
<div class="col stepper-list">
<div (click)="changeStep()" *ngIf="!datasetInfoValid()" class="main-info" [ngClass]="{'active': this.step === 0, 'text-danger':hintErrors}">0. {{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (2)</div>
<div (click)="changeStep()" *ngIf="datasetInfoValid()" class="main-info" [ngClass]="{'active': this.step === 0}">0. {{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (<mat-icon class="done-icon">done</mat-icon>)</div>
<div (click)="table0fContents.onToCentrySelected()" *ngIf="!datasetInfoValid()" class="main-info" [ngClass]="{'active': this.step === 0, 'text-danger':hintErrors}">0. {{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (2)</div>
<div (click)="table0fContents.onToCentrySelected()" *ngIf="datasetInfoValid()" class="main-info" [ngClass]="{'active': this.step === 0}">0. {{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (<mat-icon class="done-icon">done</mat-icon>)</div>
<div class="row toc-pane-container" #boundary>
<div #spacer></div>
<table-of-contents [visibilityRulesService]="visRulesService" [selectedFieldsetId]="fieldsetIdWithFocus" #table0fContents

71
dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.ts
View File

@ -1,4 +1,4 @@
import {Component, OnInit, ViewChild} from '@angular/core';
import {ChangeDetectorRef, Component, OnInit, ViewChild} from '@angular/core';
import {AbstractControl, FormArray, FormControl, FormGroup} from '@angular/forms';
import {MatDialog} from '@angular/material/dialog';
import {MatSnackBar} from '@angular/material/snack-bar';
@ -60,7 +60,7 @@ import {VisibilityRulesService} from '@app/ui/misc/dataset-description-form/visi
import {PopupNotificationDialogComponent} from '@app/library/notification/popup/popup-notification.component';
import {CheckDeactivateBaseComponent} from '@app/library/deactivate/deactivate.component';
import {PrefillDatasetComponent} from "@app/ui/dataset/dataset-wizard/prefill-dataset/prefill-dataset.component";
import {ToCEntry} from "@app/ui/misc/dataset-description-form/dataset-description.component";
import {ToCEntry, ToCEntryType} from "@app/ui/misc/dataset-description-form/dataset-description.component";
@Component({
selector: 'app-dataset-wizard-component',
@ -1154,45 +1154,78 @@ export class DatasetWizardComponent extends CheckDeactivateBaseComponent impleme
});
}
checkSelectedParent(entry: ToCEntry, selected: ToCEntry = null) {
if(!selected) {
selected = this.table0fContents.tocentrySelected;
getEntryVisibleFieldSets(entry: ToCEntry): ToCEntry[] {
let fieldSets = [];
if(entry.type === ToCEntryType.FieldSet && !this.table0fContents.internalTable.hiddenEntries.find(hiddenEntry => hiddenEntry === entry.id)) {
fieldSets.push(entry);
} else if(entry.type !== ToCEntryType.FieldSet) {
entry.subEntries.forEach(subEntry => {
fieldSets = fieldSets.concat(this.getEntryVisibleFieldSets(subEntry));
});
}
if(entry.numbering === selected.numbering) {
return true;
return fieldSets;
}
get visibleFieldSets(): ToCEntry[]{
let fieldSets = [];
let arrays= this.table0fContents?this.table0fContents.tocentries.
filter(entry => !this.table0fContents.internalTable.hiddenEntries.find(hiddenEntry => hiddenEntry === entry.id)).map(entry => {
return this.getEntryVisibleFieldSets(entry);
})
:[];
arrays.forEach(array => {
fieldSets = fieldSets.concat(array);
});
return fieldSets;
}
getFirstFieldSet(entry: ToCEntry): ToCEntry {
if(entry.type === ToCEntryType.FieldSet && !this.table0fContents.internalTable.hiddenEntries.find(hiddenEntry => hiddenEntry === entry.id)) {
return entry;
} else {
return !!entry.subEntries.find(subEntry => this.checkSelectedParent(subEntry, selected))
let subEntries = entry.subEntries.filter(subEntry => !this.table0fContents.internalTable.hiddenEntries.find(hiddenEntry => hiddenEntry === subEntry.id));
if(subEntries.length > 0) {
return this.getFirstFieldSet(subEntries[0]);
} else {
return null;
}
}
}
public changeStep(selected: ToCEntry = null) {
if(selected) {
let index = this.table0fContents.tocentries.findIndex(entry => this.checkSelectedParent(entry, selected));
console.log(index);
this.step = index + 1;
let fieldSet = this.getFirstFieldSet(selected);
let index = this.visibleFieldSets.findIndex(entry => entry.id === fieldSet.id);
this.step = index + (selected.type === ToCEntryType.FieldSet?1:0.5);
} else {
this.table0fContents.onToCentrySelected(null);
this.step = 0;
}
}
get maxStep() {
return this.table0fContents?this.table0fContents.tocentries.length:0;
return this.visibleFieldSets.length;
}
public nextStep() {
if (this.step < this.maxStep) {//view is changing
this.step++;
this.table0fContents.internalTable.selected = this.table0fContents.tocentries[this.step - 1];
this.resetScroll();
let entry = this.visibleFieldSets[Math.floor(this.step) - 1];
this.table0fContents.onToCentrySelected(entry);
this.scroll(entry);
}
}
public previousStep() {
if (this.step > 0) {
this.step--;
this.table0fContents.internalTable.selected = this.step > 0?this.table0fContents.tocentries[this.step - 1]:null;
this.resetScroll();
if(this.step > 0) {
let entry = this.visibleFieldSets[Math.floor(this.step) - 1];
this.table0fContents.onToCentrySelected(entry);
this.scroll(entry);
} else {
this.table0fContents.onToCentrySelected();
this.resetScroll();
}
}
}
@ -1200,6 +1233,10 @@ export class DatasetWizardComponent extends CheckDeactivateBaseComponent impleme
document.getElementById('dataset-editor-form').scrollTop = 0;
}
private scroll(entry: ToCEntry) {
document.getElementById(entry.id).scrollIntoView();
}
isDirty() {
return this.formGroup.dirty && this.hasChanges; // do we need this.formGroup.dirty
}

3
dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents-internal/table-of-contents-internal.ts
View File

@ -1,4 +1,4 @@
import { Component, EventEmitter, Inject, OnInit, Output, Input } from '@angular/core';
import {Component, EventEmitter, Inject, OnInit, Output, Input, ViewChildren, QueryList} from '@angular/core';
import { SimpleChanges } from '@angular/core';
import { FormArray } from '@angular/forms';
import { ToCEntry, ToCEntryType } from '../../dataset-description.component';
@ -22,6 +22,7 @@ export class TableOfContentsInternal implements OnInit {
@Input() showErrors: boolean = false;
@Input() hiddenEntries: string[] =[];
@Input() visibilityRulesService: VisibilityRulesService;
@ViewChildren(TableOfContentsInternal) internalTables: QueryList<TableOfContentsInternal>;
constructor(){
}

13
dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents.ts
View File

@ -201,7 +201,7 @@ export class TableOfContents extends BaseComponent implements OnInit, OnChanges
ngOnChanges(changes: SimpleChanges) {
if(this.selectedFieldsetId){
this.tocentrySelected = this._findTocEntryById(this.selectedFieldsetId,this.tocentries);
this.onToCentrySelected(this._findTocEntryById(this.selectedFieldsetId,this.tocentries));
this._actOnObservation = false;
setTimeout(() => {
this._actOnObservation = true;
@ -265,7 +265,7 @@ export class TableOfContents extends BaseComponent implements OnInit, OnChanges
try{
const target_id = ie.target.id.replace(this.TOCENTRY_ID_PREFIX,'');
if(this.visibilityRulesService.checkElementVisibility(target_id)){
this.tocentrySelected = this._findTocEntryById(target_id,this.tocentries);
this.onToCentrySelected(this._findTocEntryById(target_id,this.tocentries));
}
}catch{
@ -441,18 +441,11 @@ export class TableOfContents extends BaseComponent implements OnInit, OnChanges
}
onToCentrySelected(entry: ToCEntry){
onToCentrySelected(entry: ToCEntry = null){
this.tocentrySelected = entry;
this.entrySelected.emit(entry);
}
public seekToFirstElement(){//only on tocentry mode
if(this.tocentries && this.tocentries.length){
this.tocentrySelected = this.tocentries[0];
}
}
private _findTocEntryById(id: string, tocentries: ToCEntry[]): ToCEntry{
if(!tocentries || !tocentries.length){
return null;