169 lines
4.6 KiB
TypeScript
169 lines
4.6 KiB
TypeScript
import { Component, EventEmitter, Input, OnInit, Output, QueryList, SimpleChanges, ViewChildren } from '@angular/core';
|
|
import { UntypedFormGroup } from '@angular/forms';
|
|
import { VisibilityRulesService } from '@app/ui/description/editor/description-form/visibility-rules/visibility-rules.service';
|
|
import { Guid } from '@common/types/guid';
|
|
import { ToCEntry } from '../models/toc-entry';
|
|
import { ToCEntryType } from '../models/toc-entry-type.enum';
|
|
|
|
@Component({
|
|
selector: 'table-of-contents-internal',
|
|
styleUrls: ['./table-of-contents-internal.scss'],
|
|
templateUrl: './table-of-contents-internal.html'
|
|
})
|
|
export class TableOfContentsInternal implements OnInit {
|
|
|
|
@Input() tocentries: ToCEntry[] = null;
|
|
@Input() selected: ToCEntry = null;
|
|
// @Input() visibilityRules:Rule[] = [];
|
|
@Output() entrySelected = new EventEmitter<ToCEntry>();
|
|
@Input() propertiesFormGroup: UntypedFormGroup;
|
|
|
|
expandChildren: boolean[];
|
|
tocEntryTypeEnum = ToCEntryType;
|
|
@Input() TOCENTRY_ID_PREFIX = "";
|
|
@Input() showErrors: boolean = false;
|
|
@Input() hiddenEntries: string[] = [];
|
|
@Input() visibilityRulesService: VisibilityRulesService;
|
|
@ViewChildren(TableOfContentsInternal) internalTables: QueryList<TableOfContentsInternal>;
|
|
|
|
constructor() {
|
|
}
|
|
ngOnInit(): void {
|
|
// console.log('component created');
|
|
if (this.tocentries) {
|
|
this.expandChildren = this.tocentries.map(() => false);
|
|
if (this.selected) {
|
|
for (let i = 0; i < this.tocentries.length; i++) {
|
|
if (this._findTocEntryById(this.selected.id, this.tocentries[i].subEntries)) {
|
|
if (this.expandChildren) {
|
|
this.expandChildren[i] = true;
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
ngOnChanges(changes: SimpleChanges) {
|
|
if (changes.selected && this.selected) {
|
|
for (let i = 0; i < this.tocentries.length; i++) {
|
|
if (this._findTocEntryById(this.selected.id, this.tocentries[i].subEntries)) {
|
|
if (this.expandChildren) {
|
|
this.expandChildren[i] = true;
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
// if (!this.isActive && this.links && this.links.length > 0) {
|
|
// this.links.forEach(link => {
|
|
// link.selected = false;
|
|
// })
|
|
// this.links[0].selected = true;
|
|
// }
|
|
}
|
|
|
|
toggleExpand(index) {
|
|
this.expandChildren[index] = !this.expandChildren[index];
|
|
// console.log(this.expandChildren);
|
|
}
|
|
|
|
navigateToFieldSet(entry: ToCEntry, event) {
|
|
if (entry.type === ToCEntryType.FieldSet) {
|
|
|
|
const fieldSetId = entry.id;
|
|
const element = document.getElementById(this.TOCENTRY_ID_PREFIX + fieldSetId);
|
|
if (element) {
|
|
element.click();//open mat expansion panel
|
|
|
|
//scroll asyn in 200 ms so the expansion panel is expanded and the element coordinates are updated
|
|
setTimeout(() => {
|
|
const element = document.getElementById(this.TOCENTRY_ID_PREFIX + fieldSetId);
|
|
if (element) {
|
|
element.scrollIntoView({ behavior: 'smooth' });
|
|
}
|
|
}, 300);
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
|
|
onEntrySelected(entry: ToCEntry) {
|
|
this.entrySelected.emit(entry);
|
|
}
|
|
|
|
|
|
calculateStyle(entry: ToCEntry) {
|
|
const style = {};
|
|
style['font-size'] = entry.type === this.tocEntryTypeEnum.FieldSet ? '.9em' : '1em';
|
|
return style;
|
|
}
|
|
|
|
calculateClass(entry: ToCEntry) {
|
|
const myClass = {};
|
|
|
|
if (this.selected && entry.id === this.selected.id) {
|
|
myClass['selected'] = true;
|
|
}
|
|
|
|
if (entry.type != this.tocEntryTypeEnum.FieldSet) {
|
|
myClass['section'] = true;
|
|
}
|
|
|
|
return myClass;
|
|
}
|
|
|
|
private _findTocEntryById(id: string, tocentries: ToCEntry[]): ToCEntry {
|
|
if (!tocentries || !tocentries.length) {
|
|
return null;
|
|
}
|
|
|
|
let tocEntryFound = tocentries.find(entry => entry.id === id);
|
|
|
|
if (tocEntryFound) {
|
|
return tocEntryFound;
|
|
}
|
|
|
|
for (let entry of tocentries) {
|
|
const result = this._findTocEntryById(id, entry.subEntries);
|
|
if (result) {
|
|
tocEntryFound = result;
|
|
break;
|
|
}
|
|
}
|
|
|
|
return tocEntryFound ? tocEntryFound : null;
|
|
}
|
|
public invalidChildsVisible(entry: ToCEntry): boolean {
|
|
if (!entry || !this.visibilityRulesService) {
|
|
return false;
|
|
}
|
|
|
|
if (entry.type != this.tocEntryTypeEnum.FieldSet) {
|
|
return entry.subEntries.some(_ => this.invalidChildsVisible(_));
|
|
}
|
|
if (entry.type === this.tocEntryTypeEnum.FieldSet) {
|
|
const id = entry.id;
|
|
if (!(this.visibilityRulesService.isVisibleMap[id.toString()] ?? true)) {
|
|
return false;
|
|
}
|
|
// const fieldsArray = entry.form.get('fields') as UntypedFormArray;
|
|
const hasError = !entry.subEntries.every(field => {//every invalid field should be invisible
|
|
//TODO: check this
|
|
// if (field.invalid) {
|
|
// const id = field.id;
|
|
// const isVisible = this.visibilityRulesService.isVisibleMap[id);
|
|
// if (isVisible) {
|
|
// return false;
|
|
// }
|
|
// }
|
|
return true;
|
|
});
|
|
return hasError;
|
|
}
|
|
return false;
|
|
}
|
|
}
|