606 lines
18 KiB
TypeScript
606 lines
18 KiB
TypeScript
import { DOCUMENT } from '@angular/common';
|
|
import { AfterViewInit, Component, EventEmitter, Inject, Input, OnInit, Output } from '@angular/core';
|
|
import { UntypedFormArray } from '@angular/forms';
|
|
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
|
|
import { BaseComponent } from '@common/base/base.component';
|
|
import { TranslateService } from '@ngx-translate/core';
|
|
import { DragulaService } from 'ng2-dragula';
|
|
import { interval } from 'rxjs';
|
|
import { filter, takeUntil } from 'rxjs/operators';
|
|
import { NewEntryType, TableUpdateInfo, ToCEntry, ToCEntryType } from './table-of-contents-entry';
|
|
|
|
|
|
@Component({
|
|
selector: 'dataset-profile-table-of-contents',
|
|
styleUrls: ['./table-of-contents.scss'],
|
|
templateUrl: './table-of-contents.html'
|
|
})
|
|
export class DatasetProfileTableOfContents extends BaseComponent implements OnInit, AfterViewInit {
|
|
|
|
@Input() links: ToCEntry[];
|
|
@Input() itemSelected: ToCEntry;
|
|
@Input() colorizeInvalid: boolean = false;
|
|
@Input() viewOnly: boolean;
|
|
|
|
|
|
@Output() itemClick = new EventEmitter<ToCEntry>();
|
|
// @Output() newEntry = new EventEmitter<ToCEntry>();
|
|
@Output() removeEntry = new EventEmitter<ToCEntry>();
|
|
@Output() createEntry = new EventEmitter<NewEntryType>();
|
|
@Output() dataNeedsRefresh = new EventEmitter<TableUpdateInfo>();
|
|
|
|
isDragging: boolean = false;
|
|
draggingItemId: string = null;
|
|
tocEntryType = ToCEntryType;
|
|
|
|
DRAGULA_ITEM_ID_PREFIX = "table_item_id_";
|
|
ROOT_ID: string = "ROOT_ID";//no special meaning
|
|
private _dragStartedAt;
|
|
private VALID_DROP_TIME = 500;//ms
|
|
overcontainer: string = null;
|
|
|
|
$clock = interval(10);
|
|
scrollTableTop = false;
|
|
scrollTableBottom = false;
|
|
pxToScroll = 15;
|
|
|
|
constructor(
|
|
@Inject(DOCUMENT) private _document: Document,
|
|
private dragulaService: DragulaService,
|
|
private snackbar: MatSnackBar,
|
|
private language: TranslateService
|
|
) {
|
|
super();
|
|
|
|
if (this.dragulaService.find('TABLEDRAG')) {
|
|
this.dragulaService.destroy('TABLEDRAG');
|
|
}
|
|
|
|
const dragula = this.dragulaService.createGroup('TABLEDRAG', {});
|
|
|
|
const drake = dragula.drake;
|
|
|
|
drake.on('drop', (el, target, source, sibling) => {
|
|
|
|
if (this._dragStartedAt) {
|
|
const timeNow = new Date().getTime();
|
|
|
|
if (timeNow - this._dragStartedAt > this.VALID_DROP_TIME) {
|
|
// console.log('timenow: ', timeNow);
|
|
// console.log('timestarted', this._dragStartedAt);
|
|
this._dragStartedAt = null;
|
|
|
|
} else {
|
|
this.dataNeedsRefresh.emit();// even though the data is not changed the TABLE DRAG may has changed
|
|
return;
|
|
}
|
|
} else {
|
|
this.dataNeedsRefresh.emit();// even though the data is not changed the TABLE DRAG may has changed
|
|
return;
|
|
|
|
}
|
|
|
|
const elementId = (el.id as string).replace(this.DRAGULA_ITEM_ID_PREFIX, '');
|
|
const targetId = target.id as string;
|
|
const sourceId = source.id as string;
|
|
|
|
|
|
if (!(elementId && targetId && sourceId)) {
|
|
console.info('Elements do not have an id');
|
|
this.dataNeedsRefresh.emit();
|
|
return;
|
|
}
|
|
|
|
|
|
const element: ToCEntry = this._findTocEntryById(elementId, this.links);
|
|
const targetContainer: ToCEntry = this._findTocEntryById(targetId, this.links);
|
|
const sourceContainer: ToCEntry = this._findTocEntryById(sourceId, this.links);
|
|
|
|
if (!(element && (targetContainer || ((element.type === ToCEntryType.Page) && (targetId === this.ROOT_ID))) && (sourceContainer || ((element.type === ToCEntryType.Page) && (sourceId === this.ROOT_ID))))) {
|
|
// console.info('Could not find elements');
|
|
this.dataNeedsRefresh.emit();
|
|
//TODO: angular update //drake.cancel(true);
|
|
return;
|
|
}
|
|
|
|
|
|
switch (element.type) {
|
|
case ToCEntryType.FieldSet: {
|
|
if (targetContainer.type != this.tocEntryType.Section) {
|
|
// const message = 'Fieldset can only be child of Subsections';
|
|
const message = this.language.instant('DATASET-PROFILE-EDITOR.STEPS.FORM.TABLE-OF-CONTENTS.ERROR-MESSAGES.FIELDSET-MUST-HAVE-PARENT-SECTION');
|
|
// console.error(message);
|
|
this.notifyUser(message)
|
|
this.dataNeedsRefresh.emit();
|
|
return;
|
|
}
|
|
|
|
//check if target container has no sections
|
|
if ((targetContainer.form.get('sections') as UntypedFormArray).length) {
|
|
// const message = 'Cannot have inputs and sections on the same level';
|
|
const message = this.language.instant('DATASET-PROFILE-EDITOR.STEPS.FORM.TABLE-OF-CONTENTS.ERROR-MESSAGES.INPUT-SECTION-SAME-LEVEL');
|
|
this.notifyUser(message);
|
|
// console.error(message);
|
|
this.dataNeedsRefresh.emit();
|
|
return;
|
|
}
|
|
|
|
const fieldsetForm = element.form;
|
|
const targetFieldsets = targetContainer.form.get('fieldSets') as UntypedFormArray;
|
|
const sourceFieldsets = sourceContainer.form.get('fieldSets') as UntypedFormArray;
|
|
|
|
if (!targetFieldsets) {
|
|
console.info('Not target fieldsets container found');
|
|
this.dataNeedsRefresh.emit();
|
|
return;
|
|
}
|
|
|
|
let sourceOrdinal = -1;
|
|
let idx = -1;
|
|
sourceFieldsets.controls.forEach((elem, index) => {
|
|
if (elem.get('id').value === elementId) {
|
|
sourceOrdinal = elem.get('ordinal').value;
|
|
idx = index
|
|
}
|
|
});
|
|
|
|
if (sourceOrdinal >= 0 && idx >= 0) {
|
|
sourceFieldsets.removeAt(idx);
|
|
|
|
sourceFieldsets.controls.forEach(control => {
|
|
const ordinal = control.get('ordinal');
|
|
if ((ordinal.value >= sourceOrdinal) && sourceOrdinal > 0) {
|
|
const updatedOrdinalVal = ordinal.value - 1;
|
|
ordinal.setValue(updatedOrdinalVal);
|
|
}
|
|
});
|
|
sourceFieldsets.controls.sort(this._compareOrdinals);
|
|
}
|
|
|
|
let position: number = targetFieldsets.length;
|
|
|
|
if (!sibling || !sibling.id) {
|
|
console.info('No sibling Id found');
|
|
} else {
|
|
const siblingId = (sibling.id as string).replace(this.DRAGULA_ITEM_ID_PREFIX, '');
|
|
let siblingIndex = -1;
|
|
targetFieldsets.controls.forEach((e, idx) => {
|
|
if (e.get('id').value === siblingId) {
|
|
siblingIndex = idx;
|
|
position = e.get('ordinal').value;
|
|
}
|
|
|
|
});
|
|
|
|
if (siblingIndex >= 0) { //sibling found
|
|
|
|
targetFieldsets.controls.filter(control => control.get('ordinal').value >= position).forEach(control => {
|
|
const ordinal = control.get('ordinal');
|
|
const updatedOrdinalVal = ordinal.value + 1;
|
|
ordinal.setValue(updatedOrdinalVal);
|
|
})
|
|
}
|
|
|
|
}
|
|
|
|
|
|
fieldsetForm.get('ordinal').setValue(position);
|
|
targetFieldsets.insert(position, fieldsetForm);
|
|
targetFieldsets.controls.sort(this._compareOrdinals);
|
|
this.dataNeedsRefresh.emit({ draggedItemId: elementId });
|
|
|
|
break;
|
|
}
|
|
case ToCEntryType.Section: {
|
|
|
|
if (targetContainer.type == ToCEntryType.Section) {
|
|
if ((targetContainer.form.get('fieldSets') as UntypedFormArray).length) {
|
|
// const message = 'Cannot have inputs and sections on the same level';
|
|
const message = this.language.instant('DATASET-PROFILE-EDITOR.STEPS.FORM.TABLE-OF-CONTENTS.ERROR-MESSAGES.INPUT-SECTION-SAME-LEVEL');;
|
|
this.notifyUser(message);
|
|
// console.info(message);
|
|
this.dataNeedsRefresh.emit();
|
|
return;
|
|
}
|
|
|
|
const targetSections = targetContainer.form.get('sections') as UntypedFormArray;
|
|
const elementSectionForm = element.form;
|
|
const sourceSections = elementSectionForm.parent as UntypedFormArray;
|
|
|
|
if (!(targetSections && sourceSections && elementSectionForm)) {
|
|
console.info('Could not load sections');
|
|
this.dataNeedsRefresh.emit();
|
|
return;
|
|
}
|
|
|
|
let idx = -1;
|
|
sourceSections.controls.forEach((section, i) => {
|
|
if (section.get('id').value === elementId) {
|
|
idx = i;
|
|
}
|
|
});
|
|
|
|
if (!(idx >= 0)) {
|
|
console.info('Could not find element in Parent container');
|
|
this.dataNeedsRefresh.emit();
|
|
return;
|
|
}
|
|
|
|
sourceSections.controls.filter(control => control.get('ordinal').value >= elementSectionForm.get('ordinal').value).forEach(control => {
|
|
const ordinal = control.get('ordinal');
|
|
const updatedOrdinalVal = ordinal.value ? ordinal.value - 1 : 0;
|
|
ordinal.setValue(updatedOrdinalVal);
|
|
});
|
|
|
|
|
|
sourceSections.removeAt(idx);
|
|
|
|
let targetOrdinal = targetSections.length;
|
|
|
|
if (sibling && sibling.id) {
|
|
const siblingId = sibling.id.replace(this.DRAGULA_ITEM_ID_PREFIX, '');
|
|
|
|
targetSections.controls.forEach((section, i) => {
|
|
if (section.get('id').value === siblingId) {
|
|
targetOrdinal = section.get('ordinal').value;
|
|
}
|
|
})
|
|
|
|
// if(targetOrdinal!=targetSections.length){//mporei na einai idio
|
|
// section.get('ordinal').setValue(i+1);
|
|
targetSections.controls.filter(control => control.get('ordinal').value >= targetOrdinal).forEach(control => {
|
|
const ordinal = control.get('ordinal');
|
|
const updatedOrdinalVal = ordinal.value + 1;
|
|
ordinal.setValue(updatedOrdinalVal);
|
|
});
|
|
// }
|
|
|
|
} else {
|
|
console.info('no siblings found');
|
|
}
|
|
elementSectionForm.get('ordinal').setValue(targetOrdinal);
|
|
targetSections.insert(targetOrdinal, elementSectionForm);
|
|
|
|
} else if (targetContainer.type === ToCEntryType.Page) {
|
|
// const pageId = targetContainer.form.get('id').value;
|
|
|
|
const rootform = targetContainer.form.root;
|
|
const sectionForm = element.form;
|
|
const parentSections = sectionForm.parent as UntypedFormArray;
|
|
|
|
let parentIndex = -1;
|
|
parentSections.controls.forEach((section, i) => {
|
|
if (section.get('id').value === elementId) {
|
|
parentIndex = i
|
|
}
|
|
})
|
|
|
|
|
|
if (parentIndex < 0) {
|
|
console.info('could not locate section in parents array');
|
|
this.dataNeedsRefresh.emit();
|
|
return;
|
|
}
|
|
|
|
//update parent sections ordinal
|
|
parentSections.controls.filter(section => section.get('ordinal').value >= sectionForm.get('ordinal').value).forEach(section => {
|
|
const ordinal = section.get('ordinal');
|
|
const updatedOrdinalVal = ordinal.value ? ordinal.value - 1 : 0;
|
|
ordinal.setValue(updatedOrdinalVal);
|
|
})
|
|
|
|
parentSections.removeAt(parentIndex);
|
|
|
|
|
|
|
|
let position = 0;
|
|
if (targetContainer.subEntries) {
|
|
position = targetContainer.subEntries.length;
|
|
}
|
|
//populate sections
|
|
const targetSectionsArray = rootform.get('sections') as UntypedFormArray;
|
|
|
|
|
|
if (sibling && sibling.id) {
|
|
const siblingId = sibling.id.replace(this.DRAGULA_ITEM_ID_PREFIX, '');
|
|
let indx = -1;
|
|
|
|
targetContainer.subEntries.forEach((e, i) => {
|
|
if (e.form.get('id').value === siblingId) {
|
|
indx = i;
|
|
position = e.form.get('ordinal').value;
|
|
}
|
|
});
|
|
if (indx >= 0) {
|
|
|
|
// e.form.get('ordinal').setValue(i+1);
|
|
targetContainer.subEntries.filter(e => e.form.get('ordinal').value >= position).forEach(e => {
|
|
const ordinal = e.form.get('ordinal');
|
|
const updatedOrdinalVal = ordinal.value + 1;
|
|
ordinal.setValue(updatedOrdinalVal);
|
|
});
|
|
}
|
|
|
|
} else {
|
|
console.info('No sibling found');
|
|
}
|
|
|
|
sectionForm.get('ordinal').setValue(position);
|
|
sectionForm.get('page').setValue(targetContainer.id);
|
|
targetSectionsArray.push(sectionForm);
|
|
|
|
} else {
|
|
// const message = 'Drag not support to specific container';
|
|
const message = this.language.instant('DATASET-PROFILE-EDITOR.STEPS.FORM.TABLE-OF-CONTENTS.ERROR-MESSAGES.DRAG-NOT-SUPPORTED');
|
|
this.notifyUser(message);
|
|
// console.info(message);
|
|
this.dataNeedsRefresh.emit();
|
|
return;
|
|
}
|
|
|
|
|
|
|
|
this.dataNeedsRefresh.emit({ draggedItemId: elementId });
|
|
break;
|
|
}
|
|
case ToCEntryType.Page: {
|
|
if (targetId != this.ROOT_ID) {
|
|
// const message = 'A page element can only be at top level';
|
|
const message = this.language.instant('DATASET-PROFILE-EDITOR.STEPS.FORM.TABLE-OF-CONTENTS.ERROR-MESSAGES.PAGE-ELEMENT-ONLY-TOP-LEVEL');
|
|
this.notifyUser(message);
|
|
// console.info(message);
|
|
this.dataNeedsRefresh.emit();
|
|
return;
|
|
}
|
|
|
|
const rootForm = element.form.root;
|
|
if (!rootForm) {
|
|
console.info('Could not find root!')
|
|
this.dataNeedsRefresh.emit();
|
|
return;
|
|
}
|
|
|
|
|
|
const pages = rootForm.get('pages') as UntypedFormArray;
|
|
const pageForm = element.form;
|
|
|
|
let index = -1;
|
|
|
|
pages.controls.forEach((page, i) => {
|
|
if (page.get('id').value === elementId) {
|
|
index = i;
|
|
}
|
|
});
|
|
|
|
if (index < 0) {
|
|
console.info('Could not locate page on pages');
|
|
this.dataNeedsRefresh.emit();
|
|
return;
|
|
}
|
|
|
|
|
|
//ordinality
|
|
pages.controls.filter(page => page.get('ordinal').value >= pageForm.get('ordinal').value).forEach(page => {
|
|
const ordinal = page.get('ordinal');
|
|
const ordinalVal = ordinal.value ? ordinal.value - 1 : 0;
|
|
ordinal.setValue(ordinalVal);
|
|
});
|
|
|
|
pages.removeAt(index);
|
|
|
|
let targetPosition = pages.length;
|
|
|
|
if (sibling) {
|
|
const siblingId = sibling.id.replace(this.DRAGULA_ITEM_ID_PREFIX, '');
|
|
|
|
pages.controls.forEach((page, i) => {
|
|
if (page.get('id').value === siblingId) {
|
|
targetPosition = page.get('ordinal').value;
|
|
}
|
|
});
|
|
}
|
|
pageForm.get('ordinal').setValue(targetPosition);
|
|
|
|
//update ordinality
|
|
pages.controls.filter(page => page.get('ordinal').value >= targetPosition).forEach(page => {
|
|
const ordinal = page.get('ordinal');
|
|
const ordinalVal = ordinal.value + 1;
|
|
ordinal.setValue(ordinalVal);
|
|
});
|
|
|
|
|
|
pages.insert(targetPosition, pageForm);
|
|
this.dataNeedsRefresh.emit({ draggedItemId: elementId });
|
|
break;
|
|
}
|
|
default:
|
|
|
|
console.info('Could not support moving objects for specific type of element');
|
|
this.dataNeedsRefresh.emit();
|
|
return;
|
|
|
|
}
|
|
});
|
|
|
|
|
|
drake.on('drag', (el, source) => {
|
|
this._dragStartedAt = new Date().getTime();
|
|
// console.log('drag fired');
|
|
this.isDragging = true;
|
|
this.draggingItemId = (el.id as string).replace(this.DRAGULA_ITEM_ID_PREFIX, '');
|
|
|
|
// setTimeout(() => {
|
|
// if(this.isDragging){
|
|
// this._scrollIntoDragginItem(this.draggingItemId);
|
|
// }
|
|
// }, this.VALID_DROP_TIME);
|
|
});
|
|
drake.on('over', (el, container, source) => {
|
|
try {
|
|
this.overcontainer = container.id;
|
|
} catch (error) {
|
|
this.overcontainer = null;
|
|
}
|
|
});
|
|
drake.on('dragend', (el) => {
|
|
this.isDragging = false;
|
|
this.draggingItemId = null;
|
|
this.overcontainer = null;
|
|
});
|
|
|
|
|
|
|
|
|
|
}
|
|
ngAfterViewInit(): void {
|
|
|
|
const top = document.querySelector('.top-scroller');
|
|
const bottom = document.querySelector('.bottom-scroller');
|
|
const tableDiv = document.querySelector('#tocentrytable');
|
|
|
|
try {
|
|
top.addEventListener('mouseover', (e) => { this.scrollTableTop = true; }, {
|
|
passive: true
|
|
});
|
|
bottom.addEventListener('mouseover', (e) => { this.scrollTableBottom = true; }, {
|
|
passive: true
|
|
});
|
|
|
|
top.addEventListener('mouseout', (e) => { this.scrollTableTop = false }, {
|
|
passive: true
|
|
});
|
|
bottom.addEventListener('mouseout', (e) => { this.scrollTableBottom = false; }, {
|
|
passive: true
|
|
});
|
|
|
|
|
|
this.$clock
|
|
.pipe(
|
|
takeUntil(this._destroyed),
|
|
filter(() => this.scrollTableTop)
|
|
)
|
|
.subscribe(() => {
|
|
try {
|
|
tableDiv.scrollBy(0, -this.pxToScroll);
|
|
} catch { }
|
|
});
|
|
this.$clock
|
|
.pipe(
|
|
takeUntil(this._destroyed),
|
|
filter(() => this.scrollTableBottom)
|
|
)
|
|
.subscribe(() => {
|
|
try {
|
|
tableDiv.scrollBy(0, this.pxToScroll);
|
|
} catch { }
|
|
});
|
|
} catch {
|
|
console.log('could not find scrolling elements');
|
|
}
|
|
|
|
|
|
}
|
|
|
|
private _scrollIntoDragginItem(id: string) {
|
|
|
|
// const table = document.getElementById('tocentrytable');
|
|
// if(table){
|
|
// // const element = document.getElementById('TABLE_ENTRY'+id);
|
|
// console.log('Table found!');
|
|
// const element = document.getElementById('TABLE_ENTRY' + id);
|
|
// const elementFromTable = table.closest('#TABLE_ENTRY'+ id);
|
|
|
|
|
|
// if(elementFromTable){
|
|
// console.log('found from table:', elementFromTable);
|
|
// }
|
|
// if(element){
|
|
// console.log('Element found!');
|
|
// // element.classList.add('text-danger');
|
|
// // console.log(element);
|
|
|
|
// const tableRect = table.getBoundingClientRect();
|
|
// const elementRect = element.getBoundingClientRect();
|
|
|
|
|
|
// console.log('tablerect :',tableRect);
|
|
// console.log('elementRect :',elementRect);
|
|
|
|
// const dY = elementRect.top - tableRect.top;
|
|
// console.log('Distance from table is ', dY);
|
|
// // table.scroll({top:dY,behavior:'smooth'});
|
|
// console.log('found from document ', element);
|
|
|
|
// // element.scrollIntoView();
|
|
// }
|
|
// // element.scrollIntoView();
|
|
// }
|
|
}
|
|
|
|
private _findTocEntryById(id: string, tocentries: ToCEntry[]): ToCEntry {
|
|
if (!tocentries) {
|
|
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;
|
|
}
|
|
|
|
ngOnInit(): void {
|
|
|
|
|
|
}
|
|
|
|
|
|
itemClicked(item: ToCEntry) {
|
|
//leaf node
|
|
this.itemClick.emit(item);
|
|
}
|
|
|
|
// addNewEntry(tce: ToCEntry){
|
|
// this.newEntry.emit(tce);
|
|
// }
|
|
deleteEntry(currentLink: ToCEntry) {
|
|
this.removeEntry.emit(currentLink);
|
|
}
|
|
|
|
createNewEntry(newEntry: NewEntryType) {
|
|
this.createEntry.emit(newEntry);
|
|
}
|
|
onDataNeedsRefresh() {
|
|
this.dataNeedsRefresh.emit();
|
|
}
|
|
|
|
notifyUser(message: string) {
|
|
this.snackbar.open(message, null, this._snackBarConfig);
|
|
}
|
|
|
|
private _snackBarConfig: MatSnackBarConfig = {
|
|
duration: 2000
|
|
}
|
|
|
|
private _compareOrdinals(a, b) {
|
|
|
|
const aValue = a.get('ordinal').value as number;
|
|
const bValue = b.get('ordinal').value as number;
|
|
|
|
// if(!aValue || !bValue) return 0;
|
|
return aValue - bValue;
|
|
}
|
|
|
|
|
|
}
|