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

Dataset Profile Editor. Ui navigation fix (clip-path instead of translateX) Use backend service to create previewForm.

This commit is contained in:
Kristian Ntavidi 2021-03-17 16:29:02 +02:00
parent 4d6e4fb2cd
commit f6f5fd15ae
4 changed files with 85 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -27,12 +27,12 @@
<input matInput type="number" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.ORDER' | translate}}" <input matInput type="number" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.ORDER' | translate}}"
formControlName="ordinal"> formControlName="ordinal">
</mat-form-field> --> </mat-form-field> -->
<div class="heading col-12">{{'DATASET-PROFILE-EDITOR.STEPS.SECTION-INFO.SECTION-DESCRIPTION' | translate}} *</div> <div class="heading col-12">{{'DATASET-PROFILE-EDITOR.STEPS.SECTION-INFO.SECTION-DESCRIPTION' | translate}} </div>
<div class="hint col-12">{{'DATASET-PROFILE-EDITOR.STEPS.SECTION-INFO.SECTION-DESCRIPTION-HINT' | translate}}</div> <div class="hint col-12">{{'DATASET-PROFILE-EDITOR.STEPS.SECTION-INFO.SECTION-DESCRIPTION-HINT' | translate}}</div>
<mat-form-field class="col-12"> <mat-form-field class="col-12">
<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.DESCRIPTION' | translate}}" <input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.DESCRIPTION' | translate}}"
formControlName="description" required> formControlName="description">
<mat-error >{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <!-- <mat-error >{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> -->
</mat-form-field> </mat-form-field>

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

@ -30,7 +30,6 @@
</div> </div>
</div> </div>
<!-- Steps Navigation --> <!-- Steps Navigation -->
<div class="col-12 d-flex" *ngIf="steps"> <div class="col-12 d-flex" *ngIf="steps">
<div class="col-7 bg-white" style="overflow: hidden; padding: 0px" id="progress-container"> <div class="col-7 bg-white" style="overflow: hidden; padding: 0px" id="progress-container">
@ -388,8 +387,8 @@
<mat-step [label]="'DATASET-PROFILE-EDITOR.ACTIONS.PREVIEW-AND-FINALIZE' | translate"> <mat-step [label]="'DATASET-PROFILE-EDITOR.ACTIONS.PREVIEW-AND-FINALIZE' | translate">
<!-- {{'DATASET-PROFILE-EDITOR.ACTIONS.PREVIEW-AND-FINALIZE' | translate}} --> <!-- {{'DATASET-PROFILE-EDITOR.ACTIONS.PREVIEW-AND-FINALIZE' | translate}} -->
<!-- <button (click)="generatePreviewForm()">foo</button> --> <!-- <button (click)="generatePreviewForm()">foo</button> -->
<ng-container *ngIf="form.get('sections')?.length"> <ng-container *ngIf="formGroup">
<app-dataset-description [form]="previewForm" [visibilityRules]="visibilityRules" *ngIf="previewForm"> <app-dataset-description [form]="formGroup" [visibilityRules]="visibilityRules" *ngIf="formGroup">
</app-dataset-description> </app-dataset-description>
</ng-container> </ng-container>

6
dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.scss
View File

@ -65,9 +65,9 @@
#progress{ #progress{
position: absolute; position: absolute;
height: 100%; height: 100%;
width: 110%; width: 100%;
transform: translateX(-110%); clip-path: polygon(0 0, 0 0, 0 0, 0 0);
transition-property: transform; transition-property: clip-path;
transition-duration: 600ms; transition-duration: 600ms;
transition-timing-function: ease-out; transition-timing-function: ease-out;
transition-delay: 50ms; transition-delay: 50ms;

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

@ -377,11 +377,6 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
}); });
} }
updateValidity(){
// this.form.updateValueAndValidity();
console.log('updagted');
}
getFilenameFromContentDispositionHeader(header: string): string { getFilenameFromContentDispositionHeader(header: string): string {
const regex: RegExp = new RegExp(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/g); const regex: RegExp = new RegExp(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/g);
@ -491,11 +486,12 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
datasetWizardModel: DatasetWizardEditorModel; datasetWizardModel: DatasetWizardEditorModel;
formGroup: FormGroup; formGroup: FormGroup;
getPreview() { getPreview() {
let data = this.form.value; let data = this.form.getRawValue();
this.datasetProfileService.preview(data).subscribe(x => { this.datasetProfileService.preview(data).subscribe(x => {
this.datasetWizardModel = new DatasetWizardEditorModel().fromModel({ this.datasetWizardModel = new DatasetWizardEditorModel().fromModel({
datasetProfileDefinition: x datasetProfileDefinition: x
}); });
this.updateVisibilityRules();
this.formGroup = <FormGroup>this.datasetWizardModel.buildForm().get('datasetProfileDefinition'); this.formGroup = <FormGroup>this.datasetWizardModel.buildForm().get('datasetProfileDefinition');
}); });
//this.formGroupRawValue = JSON.parse(JSON.stringify(this.formGroup.getRawValue())); //this.formGroupRawValue = JSON.parse(JSON.stringify(this.formGroup.getRawValue()));
@ -1166,15 +1162,20 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
get barPercentage(){ get barPercentage(){
if(!this.stepper || !this.steps){ if(!this.stepper || !this.steps){
return -110; return 0;
} }
const selectedIndex = this.stepper.selectedIndex + 1; const selectedIndex = this.stepper.selectedIndex + 1;
return (selectedIndex / this.stepper.steps.length) * 110- 110; return (selectedIndex / this.stepper.steps.length) * 100;
} }
get progressStyle(){ get progressStyle(){
return {'transform': 'translateX('+this.barPercentage+'%) skewX(-25deg)'} // return {'transform': 'translateX('+this.barPercentage+'%) skewX(-25deg)'}
const diff = 3;
return {
'clip-path': `polygon(0 0, ${Math.round(this.barPercentage + diff)}% 0, ${Math.round(this.barPercentage)}% 100%, 0 100%)`
}
} }
steps:QueryList<CdkStep>; steps:QueryList<CdkStep>;
@ -1187,53 +1188,82 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
// } // }
generatePreviewForm(){ // generatePreviewForm(){
const model = new DatasetDescriptionFormEditorModel(); // const model = new DatasetDescriptionFormEditorModel();
const toCentries = this.getTocEntries(); // const toCentries = this.getTocEntries();
//first level is always pages // //first level is always pages
model.pages = toCentries.map((entry,idx)=>{ // model.pages = toCentries.map((entry,idx)=>{
if( !(entry.type == ToCEntryType.Page)){ // if( !(entry.type == ToCEntryType.Page)){
return null; // return null;
} // }
const pageModel = new DatasetDescriptionPageEditorModel(); // const pageModel = new DatasetDescriptionPageEditorModel();
pageModel.ordinal = entry.form.get('ordinal').value; // pageModel.ordinal = entry.form.get('ordinal').value;
pageModel.title = entry.label; // pageModel.title = entry.label;
if(entry.subEntries){ // if(entry.subEntries){
pageModel.sections = entry.subEntries.map(section=>{ // pageModel.sections = entry.subEntries.map(section=>{
const sectionModel = new DatasetDescriptionSectionEditorModel(); // const sectionModel = new DatasetDescriptionSectionEditorModel();
sectionModel.id = section.id; // sectionModel.id = section.id;
sectionModel.ordinal = section.form.get('ordinal').value; // sectionModel.ordinal = section.form.get('ordinal').value;
sectionModel.description = section.form.get('description').value; // sectionModel.description = section.form.get('description').value;
sectionModel.page = entry.form.get('ordinal').value; // sectionModel.page = entry.form.get('ordinal').value;
sectionModel.title = section.label; // sectionModel.title = section.label;
sectionModel.numbering = (idx+1).toString(); // sectionModel.numbering = (idx+1).toString();
if(section.subEntriesType == ToCEntryType.Section){ // if(section.subEntriesType == ToCEntryType.Section){
sectionModel.sections = this._buildSectionsRecursively(section.subEntries, sectionModel.numbering); // sectionModel.sections = this._buildSectionsRecursively(section.subEntries, sectionModel.numbering);
}else{ // }else{
sectionModel.compositeFields = this._buildFormFields(section.subEntries, sectionModel.numbering) // sectionModel.compositeFields = this._buildFormFields(section.subEntries, sectionModel.numbering)
} // }
return sectionModel; // return sectionModel;
}); // });
}; // };
return pageModel; // return pageModel;
}); // });
//populate rules // //populate rules
// const rules:Rule[] =[];
// const fieldSets = this._getFieldSets(toCentries);
// fieldSets.forEach(fs=>{
// const fields = fs.form.get('fields') as FormArray;
// if(fields){
// fields.controls.forEach(field=>{
// const rulesArray = field.get('visible').get('rules').value;
// if(rulesArray){
// rulesArray.forEach(ruleElement => {
// const rule: Rule = new Rule();
// rule.targetField = ruleElement.target;
// rule.sourceField = field.get('id').value;
// rule.requiredValue = ruleElement.value;
// rules.push(rule);
// });
// }
// });
// }
// });
// model.rules = rules;
// this.visibilityRules = rules;
// this.previewForm = model.buildForm();
// }
updateVisibilityRules(){
const rules:Rule[] =[]; const rules:Rule[] =[];
const fieldSets = this._getFieldSets(toCentries); const fieldSets = this._getFieldSets(this.getTocEntries());
fieldSets.forEach(fs=>{ fieldSets.forEach(fs=>{
const fields = fs.form.get('fields') as FormArray; const fields = fs.form.get('fields') as FormArray;
@ -1253,10 +1283,8 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
} }
}); });
model.rules = rules;
this.visibilityRules = rules; this.visibilityRules = rules;
this.previewForm = model.buildForm();
} }
visibilityRules:Rule[]; visibilityRules:Rule[];
@ -1379,15 +1407,17 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
onMatStepperSelectionChange(event: StepperSelectionEvent){ onMatStepperSelectionChange(event: StepperSelectionEvent){
if(event.selectedIndex === (this.steps.length -1)){//preview selected if(event.selectedIndex === (this.steps.length -1)){//preview selected
this.generatePreviewForm();//TODO LAZY LOADING IN THE TEMPLATE // this.generatePreviewForm();//TODO LAZY LOADING IN THE TEMPLATE
this.getPreview();
}else{ }else{
this.previewForm = null; // this.previewForm = null;
this.formGroup = null;
} }
this.form.markAsUntouched(); this.form.markAsUntouched();
} }
previewForm:FormGroup; // previewForm:FormGroup;
onDataNeedsRefresh(){ onDataNeedsRefresh(){
this.refreshToCEntries(); this.refreshToCEntries();
} }
@ -1590,18 +1620,6 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
}) })
} }
// console.log(result);
// if(this.stepper.selectedIndex != 0){
// if(!(this.form.get('pages') as FormArray).length){
// errmess.push(
// 'There has to be at least one section in the template.'
// );
// }
// }
const dialogRef = this.dialog.open(FormValidationErrorsDialogComponent, { const dialogRef = this.dialog.open(FormValidationErrorsDialogComponent, {
disableClose: true, disableClose: true,
autoFocus: false, autoFocus: false,