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}}"
formControlName="ordinal">
</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>
<mat-form-field class="col-12">
<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.DESCRIPTION' | translate}}"
formControlName="description" required>
<mat-error >{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
formControlName="description">
<!-- <mat-error >{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> -->
</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>
<!-- Steps Navigation -->
<div class="col-12 d-flex" *ngIf="steps">
<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">
<!-- {{'DATASET-PROFILE-EDITOR.ACTIONS.PREVIEW-AND-FINALIZE' | translate}} -->
<!-- <button (click)="generatePreviewForm()">foo</button> -->
<ng-container *ngIf="form.get('sections')?.length">
<app-dataset-description [form]="previewForm" [visibilityRules]="visibilityRules" *ngIf="previewForm">
<ng-container *ngIf="formGroup">
<app-dataset-description [form]="formGroup" [visibilityRules]="visibilityRules" *ngIf="formGroup">
</app-dataset-description>
</ng-container>

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

@ -65,9 +65,9 @@
#progress{
position: absolute;
height: 100%;
width: 110%;
transform: translateX(-110%);
transition-property: transform;
width: 100%;
clip-path: polygon(0 0, 0 0, 0 0, 0 0);
transition-property: clip-path;
transition-duration: 600ms;
transition-timing-function: ease-out;
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 {
const regex: RegExp = new RegExp(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/g);
@ -491,11 +486,12 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
datasetWizardModel: DatasetWizardEditorModel;
formGroup: FormGroup;
getPreview() {
let data = this.form.value;
let data = this.form.getRawValue();
this.datasetProfileService.preview(data).subscribe(x => {
this.datasetWizardModel = new DatasetWizardEditorModel().fromModel({
datasetProfileDefinition: x
});
this.updateVisibilityRules();
this.formGroup = <FormGroup>this.datasetWizardModel.buildForm().get('datasetProfileDefinition');
});
//this.formGroupRawValue = JSON.parse(JSON.stringify(this.formGroup.getRawValue()));
@ -1166,15 +1162,20 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
get barPercentage(){
if(!this.stepper || !this.steps){
return -110;
return 0;
}
const selectedIndex = this.stepper.selectedIndex + 1;
return (selectedIndex / this.stepper.steps.length) * 110- 110;
return (selectedIndex / this.stepper.steps.length) * 100;
}
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>;
@ -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
model.pages = toCentries.map((entry,idx)=>{
if( !(entry.type == ToCEntryType.Page)){
return null;
}
const pageModel = new DatasetDescriptionPageEditorModel();
// //first level is always pages
// model.pages = toCentries.map((entry,idx)=>{
// if( !(entry.type == ToCEntryType.Page)){
// return null;
// }
// const pageModel = new DatasetDescriptionPageEditorModel();
pageModel.ordinal = entry.form.get('ordinal').value;
pageModel.title = entry.label;
// pageModel.ordinal = entry.form.get('ordinal').value;
// pageModel.title = entry.label;
if(entry.subEntries){
pageModel.sections = entry.subEntries.map(section=>{
const sectionModel = new DatasetDescriptionSectionEditorModel();
// if(entry.subEntries){
// pageModel.sections = entry.subEntries.map(section=>{
// const sectionModel = new DatasetDescriptionSectionEditorModel();
sectionModel.id = section.id;
sectionModel.ordinal = section.form.get('ordinal').value;
sectionModel.description = section.form.get('description').value;
sectionModel.page = entry.form.get('ordinal').value;
sectionModel.title = section.label;
sectionModel.numbering = (idx+1).toString();
// sectionModel.id = section.id;
// sectionModel.ordinal = section.form.get('ordinal').value;
// sectionModel.description = section.form.get('description').value;
// sectionModel.page = entry.form.get('ordinal').value;
// sectionModel.title = section.label;
// sectionModel.numbering = (idx+1).toString();
if(section.subEntriesType == ToCEntryType.Section){
sectionModel.sections = this._buildSectionsRecursively(section.subEntries, sectionModel.numbering);
}else{
sectionModel.compositeFields = this._buildFormFields(section.subEntries, sectionModel.numbering)
}
// if(section.subEntriesType == ToCEntryType.Section){
// sectionModel.sections = this._buildSectionsRecursively(section.subEntries, sectionModel.numbering);
// }else{
// sectionModel.compositeFields = this._buildFormFields(section.subEntries, sectionModel.numbering)
// }
return sectionModel;
});
};
return pageModel;
// return sectionModel;
// });
// };
// 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 fieldSets = this._getFieldSets(toCentries);
const fieldSets = this._getFieldSets(this.getTocEntries());
fieldSets.forEach(fs=>{
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.previewForm = model.buildForm();
}
visibilityRules:Rule[];
@ -1379,15 +1407,17 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
onMatStepperSelectionChange(event: StepperSelectionEvent){
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{
this.previewForm = null;
// this.previewForm = null;
this.formGroup = null;
}
this.form.markAsUntouched();
}
previewForm:FormGroup;
// previewForm:FormGroup;
onDataNeedsRefresh(){
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, {
disableClose: true,
autoFocus: false,