argos/dmp-frontend/src/app/ui/description/editor/description-form/description-form.component.ts

372 lines
12 KiB
TypeScript

import { AfterViewInit, Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
import { UntypedFormGroup } from '@angular/forms';
import { MatExpansionPanel } from '@angular/material/expansion';
import { DescriptionTemplate, DescriptionTemplateSection } from '@app/core/model/description-template/description-template';
import { BaseComponent } from '@common/base/base.component';
import { LinkToScroll } from '../table-of-contents/table-of-contents.component';
import { VisibilityRulesService } from './visibility-rules/visibility-rules.service';
import { ValidationErrorModel } from '@common/forms/validation/error-model/validation-error-model';
import { Guid } from '@common/types/guid';
import { RuleWithTarget } from './visibility-rules/models/rule';
@Component({
selector: 'app-description-form',
templateUrl: './description-form.component.html',
styleUrls: ['./description-form.component.scss']
})
export class DescriptionFormComponent extends BaseComponent implements OnInit, AfterViewInit, OnChanges {
@Input() propertiesFormGroup: UntypedFormGroup;
@Input() descriptionTemplate: DescriptionTemplate;
@Input() visibilityRulesService: VisibilityRulesService;
@Input() descriptionId: Guid;
// @ViewChild('stepper', { static: false }) stepper: MatStepper;
@Input() path: string;
@Input() datasetDescription: String;
@Input() linkToScroll: LinkToScroll;
@Output() formChanged: EventEmitter<any> = new EventEmitter();
@Output() fieldsetFocusChange: EventEmitter<string> = new EventEmitter<string>();
// tocentries: ToCEntry[];
@Input() TOCENTRY_ID_PREFIX = "";
@Input() validationErrorModel: ValidationErrorModel;
// public hiddenEntriesIds: string[] = [];
constructor(
) {
super();
}
ngOnInit() {
this.init();
}
ngOnChanges(changes: SimpleChanges) {
this.init();
// When the form is changed set stepper index to 0.
// if (this.stepper && changes['form'] && !changes['form'].isFirstChange()) {
// this.stepper.selectedIndex = 0;
// } else if (this.stepper && changes['linkToScroll'] && changes['linkToScroll'].currentValue) {
// if (changes['linkToScroll'].currentValue.page >= 0) {
// this.stepper.selectedIndex = changes['linkToScroll'].currentValue.page;
// }
// }
}
ngAfterViewInit() {
}
init() {
// this.tocentries = this.getTocEntries();
// const rules_to_append = this._enrichWithMultiplicityRules(this.tocentries);
// this.visibilityRulesService.buildVisibilityRules([...this.visibilityRules, ...rules_to_append], this.form);
// if (this.form) {
// this.form.valueChanges
// .pipe(takeUntil(this._destroyed))
// .subscribe(val => {
// this.formChanged.emit(val);
// });
// }
// this.visibilityRulesInstance.emit(this.visibilityRulesService);
// this.hiddenEntriesIds = this._findHiddenEntries(this.tocentries);
// this.visibilityRulesService.visibilityChange
// .pipe(
// takeUntil(this._destroyed),
// debounceTime(100)
// )
// .subscribe(_ => {
// this.hiddenEntriesIds = this._findHiddenEntries(this.tocentries);
// })
}
onAskedToScroll(panel: MatExpansionPanel, id?: string) {
// panel.open();
// this.fieldsetFocusChange.emit(id);
}
// private _enrichWithMultiplicityRules(tocentries: ToCEntry[]): Rule[] {
// if (tocentries) {
// return tocentries.map(entry => {
// if (entry.type === ToCEntryType.Field) return []; // * TODO Me to tora implementation den tha ftasei pote edo
// if (entry.type === ToCEntryType.FieldSet) {
// // if(multiplicity: )
// try {
// // TODO OTAN KANW HIDE MULTIPLE PEDIO TOTE STO ON SHOW HANO TA VALUES (AUTO MPOREI NA EINAI KAI LEGIT) ('NA DOUME AN ONTOS DIAGRAFONTAI I APLA DEN TA DEIXNOUME')
// // * UPDATE KANEI DESTROY TO COMPONENT H NGIF . PITHANOTATA NA XREIASTEI NA TO KANOUME HIDDEN AN THELOUME KATI ALLO
// const multiplicity = entry.form.get('multiplicity').value;
// if ((multiplicity.max > 1) && (multiplicity.min > 0) && (multiplicity.max >= multiplicity.min)) { // has valid multiplicity
// return this._createAndAppendVisibilityRule(entry);
// }
// } catch {
// }
// return [];
// }
// if (entry.subEntries) {
// return this._enrichWithMultiplicityRules(entry.subEntries);
// }
// })
// .reduce((r, c) => { return [...c, ...r] }, []);
// }
// return [];
// }
// private _createAndAppendVisibilityRule(entry: ToCEntry): Rule[] {
// const rules_to_append = [];
// if (entry && (entry.type === ToCEntryType.FieldSet)) {
// //childs that are either target or source
// const childIdsWithVisRules = (entry.form.get('fields') as UntypedFormArray).controls.reduce((all, s) => {
// const sval = s.value as Field;
// return this.visibilityRules.find(x => (x.targetField === sval.id) || (x.sourceField === sval.id)) ? [...all, sval] : all;
// }, []) as Field[];
// const innerCompositeFieldOriginalIds = (entry.form.get('fields') as UntypedFormArray).controls.map(x => x.get('id').value) as string[];
// //multiplicity items
// const multiplicityItemsValue = entry.form.get('multiplicityItems').value as CompositeField[];
// // ********* FIELDS OF FIELDSET ARE EITHER TARGETS OR SOURCES *****
// if (childIdsWithVisRules.length && multiplicityItemsValue && multiplicityItemsValue.length) {
// //check each multiplicity item composite field
// multiplicityItemsValue.forEach(mi => {
// const multiplicityCompositeFieldIds = mi.fields.map(x => x.id);
// const idMappings = multiplicityCompositeFieldIds.map(x => {
// return {
// original: innerCompositeFieldOriginalIds.find(l => x.includes(l)),
// multiplicityIdValue: x
// }
// }) as { original: string, multiplicityIdValue: string }[];
// //each field of mutliplicity item
// mi.fields.forEach(field => {
// //get original visibility rules (original field)
// //original id
// const original_id = childIdsWithVisRules.find(x => field.id.includes(x.id)).id;
// //get vis rules
// //as source
// const original_as_source = this.visibilityRules.filter(x => x.sourceField === original_id);
// const original_as_target = this.visibilityRules.filter(x => x.targetField === original_id);
// if (original_as_source.length) {
// //inner dependencies
// const innerDep = original_as_source.filter(x => innerCompositeFieldOriginalIds.includes(x.targetField));
// innerDep.forEach(x => {
// const newRule = { ...x, sourceField: field.id, targetField: idMappings.find(l => l.original === x.targetField).multiplicityIdValue } as Rule;
// rules_to_append.push(newRule);
// })
// //outer dependencies
// const outerDep = original_as_source.filter(x => !innerCompositeFieldOriginalIds.includes(x.targetField));
// outerDep.forEach(x => {
// const newRule = { ...x, sourceField: field.id };
// rules_to_append.push(newRule);
// })
// }
// if (original_as_target.length) {
// //inner dependencies
// const innerDep = original_as_target.filter(x => innerCompositeFieldOriginalIds.includes(x.sourceField));
// innerDep.forEach(x => {
// const newRule = { ...x, targetField: field.id, sourceField: idMappings.find(l => l.original === x.sourceField).multiplicityIdValue } as Rule;
// rules_to_append.push(newRule);
// })
// //outer dependencies
// const outerDep = original_as_target.filter(x => !innerCompositeFieldOriginalIds.includes(x.sourceField));
// outerDep.forEach(x => {
// const newRule = { ...x, targetField: field.id } as Rule;
// rules_to_append.push(newRule);
// })
// }
// })
// });
// }
// // ** FIELDSET ITSELF IS TARGET
// // ** source it can never be
// const compositeFieldAsTargetRules = this.visibilityRules.filter(x => x.targetField === entry.id);
// const idCompositeFieldMappings = multiplicityItemsValue.map(x => {
// return {
// originalValue: entry.id,
// newValue: x.id
// }
// }) as { originalValue: string, newValue: string }[];
// if (compositeFieldAsTargetRules.length) {
// compositeFieldAsTargetRules.forEach(x => {
// idCompositeFieldMappings.forEach(l => {
// const newRule = { ...x, targetField: l.newValue };
// rules_to_append.push(newRule);
// });
// });
// }
// }
// return rules_to_append;
// }
// private _buildRecursively(form: UntypedFormGroup, whatAmI: ToCEntryType): ToCEntry {
// if (!form) return null;
// switch (whatAmI) {
// case ToCEntryType.Section:
// const sections = form.get('sections') as UntypedFormArray;
// const fieldsets = form.get('compositeFields') as UntypedFormArray;
// const tempResult: ToCEntry[] = [];
// if (sections && sections.length) {
// sections.controls.forEach(section => {
// tempResult.push(this._buildRecursively(section as UntypedFormGroup, ToCEntryType.Section));
// });
// } else if (fieldsets && fieldsets.length) {
// fieldsets.controls.forEach(fieldset => {
// tempResult.push(this._buildRecursively(fieldset as UntypedFormGroup, ToCEntryType.FieldSet));
// });
// }
// return {
// // form: form,
// id: form.get('id').value,
// label: form.get('title').value,
// numbering: '',
// subEntries: tempResult,
// subEntriesType: sections && sections.length ? ToCEntryType.Section : ToCEntryType.FieldSet,
// type: ToCEntryType.Section,
// ordinal: form.get('ordinal').value
// }
// case ToCEntryType.FieldSet:
// return {
// // form: form,
// label: form.get('title').value,
// id: form.get('id').value,
// numbering: 's',
// subEntries: [],
// subEntriesType: ToCEntryType.Field,
// type: ToCEntryType.FieldSet,
// ordinal: form.get('ordinal').value
// }
// }
// }
// private _sortByOrdinal(tocentries: ToCEntry[]) {
// if (!tocentries || !tocentries.length) return;
// tocentries.sort(this._customCompare);
// tocentries.forEach(entry => {
// this._sortByOrdinal(entry.subEntries);
// });
// }
// private _customCompare(a, b) {
// return a.ordinal - b.ordinal;
// }
// private _calculateNumbering(tocentries: ToCEntry[], depth: number[] = []) {
// if (!tocentries || !tocentries.length) {
// return;
// }
// let prefixNumbering = depth.length ? depth.join('.') : '';
// if (depth.length) prefixNumbering = prefixNumbering + ".";
// tocentries.forEach((entry, i) => {
// entry.numbering = prefixNumbering + (i + 1);
// this._calculateNumbering(entry.subEntries, [...depth, i + 1])
// });
// }
// getTocEntries(): ToCEntry[] {
// if (!this.form) { return []; }
// const result: ToCEntry[] = [];
// //build parent pages
// (this.form.get('pages') as UntypedFormArray).controls.forEach((pageElement, i) => {
// result.push({
// id: i + 'id',
// label: pageElement.get('title').value,
// type: ToCEntryType.Page,
// // form: pageElement,
// numbering: (i + 1).toString(),
// subEntriesType: ToCEntryType.Section,
// subEntries: [],
// ordinal: pageElement.get('ordinal').value
// } as ToCEntry)
// });
// result.forEach((entry, i) => {
// const sections = entry.form.get('sections') as UntypedFormArray;
// sections.controls.forEach(section => {
// const tempResults = this._buildRecursively(section as UntypedFormGroup, ToCEntryType.Section);
// entry.subEntries.push(tempResults);
// });
// });
// this._sortByOrdinal(result);
// //calculate numbering
// this._calculateNumbering(result);
// return result;
// }
}