2021-06-14 00:46:29 +02:00
|
|
|
|
import { OnDestroy } from '@angular/core';
|
2021-02-25 13:17:47 +01:00
|
|
|
|
import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
|
2021-02-24 15:56:14 +01:00
|
|
|
|
import { FormArray, FormGroup } from '@angular/forms';
|
2021-02-25 13:17:47 +01:00
|
|
|
|
import { DragulaService } from 'ng2-dragula';
|
|
|
|
|
import { Subscription } from 'rxjs';
|
2021-02-24 15:56:14 +01:00
|
|
|
|
import { ToCEntry, ToCEntryType } from '../../../table-of-contents/table-of-contents-entry';
|
|
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
|
selector: 'app-dataset-profile-editor-section-fieldset-component',
|
|
|
|
|
templateUrl: './dataset-profile-editor-section-fieldset.component.html',
|
|
|
|
|
styleUrls: ['./dataset-profile-editor-section-fieldset.component.scss']
|
|
|
|
|
})
|
|
|
|
|
|
2021-03-23 11:39:04 +01:00
|
|
|
|
export class DatasetProfileEditorSectionFieldSetComponent implements OnInit, OnChanges, OnDestroy {
|
2021-02-24 15:56:14 +01:00
|
|
|
|
// @Input() form: FormGroup;
|
|
|
|
|
//@Input() dataModel: SectionEditorModel;
|
|
|
|
|
// @Input() indexPath: string;
|
|
|
|
|
@Input() viewOnly: boolean;
|
|
|
|
|
// @Input() numbering: string;
|
|
|
|
|
@Input() tocentry: ToCEntry;
|
|
|
|
|
|
|
|
|
|
@Output() selectedEntryId = new EventEmitter<string>();
|
|
|
|
|
@Output() dataNeedsRefresh = new EventEmitter<void> ();
|
2021-03-29 17:42:55 +02:00
|
|
|
|
@Output() removeFieldSet = new EventEmitter<string>();
|
|
|
|
|
@Output() addNewFieldSet = new EventEmitter<FormGroup>();
|
|
|
|
|
@Output() cloneFieldSet = new EventEmitter<FormGroup>();
|
2021-02-24 15:56:14 +01:00
|
|
|
|
|
2021-03-01 17:42:18 +01:00
|
|
|
|
|
|
|
|
|
// FIELDSET_PREFIX_ID="FIELDSET_PREFIX_ID";
|
|
|
|
|
|
2021-02-24 15:56:14 +01:00
|
|
|
|
// @Output() fieldsetAdded = new EventEmitter<String>(); //returns the id of the fieldset added
|
2021-02-25 13:17:47 +01:00
|
|
|
|
idprefix = "id";
|
|
|
|
|
private subs = new Subscription();
|
|
|
|
|
private FIELDSETS = 'FIELDSETS';
|
|
|
|
|
constructor(
|
|
|
|
|
private dragulaService: DragulaService,
|
|
|
|
|
private myElement: ElementRef
|
|
|
|
|
)
|
|
|
|
|
{
|
|
|
|
|
if(this.dragulaService.find(this.FIELDSETS)){
|
|
|
|
|
this.dragulaService.destroy(this.FIELDSETS);
|
|
|
|
|
}
|
|
|
|
|
|
2021-02-24 15:56:14 +01:00
|
|
|
|
|
2021-02-25 13:17:47 +01:00
|
|
|
|
this.dragulaService.createGroup(this.FIELDSETS,{
|
|
|
|
|
moves:(el, container, handle)=>{
|
2021-03-27 18:52:53 +01:00
|
|
|
|
// if(this.viewOnly) return false; //uncomment if want to unable drag n drop in viewonly mode
|
2021-02-25 13:17:47 +01:00
|
|
|
|
if(el.id != (this.idprefix+this.tocentry.id)) return false;
|
2021-03-27 18:52:53 +01:00
|
|
|
|
if(handle.className && handle.classList.contains('handle')) return true;
|
2021-02-25 13:17:47 +01:00
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
this.subs.add(this.dragulaService.drop(this.FIELDSETS).subscribe(obs=>{
|
2021-03-01 17:42:18 +01:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
(this.form.get('fieldSets') as FormArray).controls.forEach((e,i)=>{
|
|
|
|
|
e.get('ordinal').setValue(i);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// obs.
|
2021-02-25 13:17:47 +01:00
|
|
|
|
this.dataNeedsRefresh.emit();
|
|
|
|
|
return ;
|
|
|
|
|
}));
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
ngOnDestroy(){
|
2021-03-23 11:39:04 +01:00
|
|
|
|
// console.log('elemement destroyed -->');
|
|
|
|
|
|
2021-02-25 13:17:47 +01:00
|
|
|
|
this.subs.unsubscribe();
|
|
|
|
|
}
|
2021-02-24 15:56:14 +01:00
|
|
|
|
ngOnChanges(changes: SimpleChanges): void {
|
2021-03-23 11:39:04 +01:00
|
|
|
|
// console.log('---------element updated-------');
|
|
|
|
|
// console.log('numbering before:', this.numbering);
|
|
|
|
|
|
|
|
|
|
|
2021-02-24 15:56:14 +01:00
|
|
|
|
this.initialize();
|
2021-03-23 11:39:04 +01:00
|
|
|
|
// console.log('----post update----');
|
|
|
|
|
// console.log('numbering now', this.numbering, ' changes detected:', changes);
|
|
|
|
|
|
|
|
|
|
|
2021-02-24 15:56:14 +01:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
form;
|
|
|
|
|
numbering;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
private _selectedFieldSetId: string = null;
|
|
|
|
|
get selectedFieldSetId(){
|
|
|
|
|
return this._selectedFieldSetId;
|
|
|
|
|
}
|
|
|
|
|
set selectedFieldSetId(id: string){
|
|
|
|
|
|
|
|
|
|
if(id === this._selectedFieldSetId) return;
|
|
|
|
|
this._selectedFieldSetId = id;
|
|
|
|
|
this.selectedEntryId.emit(this._selectedFieldSetId);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
private _findParentSection():FormGroup{
|
|
|
|
|
const parent = this.form.parent;
|
|
|
|
|
|
|
|
|
|
return parent;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
private initialize(){
|
|
|
|
|
if(this.tocentry.type === ToCEntryType.Section){
|
|
|
|
|
this.form = this.tocentry.form;
|
|
|
|
|
this.numbering = this.tocentry.numbering;
|
|
|
|
|
this._selectedFieldSetId = null;
|
2021-03-22 14:47:45 +01:00
|
|
|
|
|
2021-04-01 17:57:23 +02:00
|
|
|
|
// this._scrollToElement(this.tocentry.id);
|
|
|
|
|
this._scrollOnTop();
|
2021-02-24 15:56:14 +01:00
|
|
|
|
}else if(this.tocentry.type === ToCEntryType.FieldSet){
|
|
|
|
|
this.form = this.tocentry.form.parent.parent;
|
|
|
|
|
const numberingArray = this.tocentry.numbering.split('.');
|
|
|
|
|
if(numberingArray.length){
|
|
|
|
|
numberingArray.splice(numberingArray.length-1);
|
|
|
|
|
this.numbering = numberingArray.join('.');
|
2021-03-23 11:39:04 +01:00
|
|
|
|
}else{
|
|
|
|
|
// console.warn('!not found numbering');
|
2021-02-24 15:56:14 +01:00
|
|
|
|
}
|
|
|
|
|
this.selectedFieldSetId = this.tocentry.id;
|
2021-03-22 14:47:45 +01:00
|
|
|
|
|
|
|
|
|
this._scrollToElement(this.selectedFieldSetId);
|
|
|
|
|
}else{//scroll on top
|
|
|
|
|
this._scrollOnTop();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
private _scrollToElement(id: string){
|
|
|
|
|
let el = this.myElement.nativeElement.querySelector("#"+this.idprefix+id);
|
2021-02-25 13:17:47 +01:00
|
|
|
|
// let el = this.myElement.nativeElement.getElementbyId (this.selectedFieldSetId);
|
|
|
|
|
|
2021-03-23 12:52:33 +01:00
|
|
|
|
if(el){
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
Give time to template to build itself (extending and collapsing).
|
|
|
|
|
In case we are dragging from one container to another, then the ui takes around 600ms to build
|
|
|
|
|
individual previews (dataset-profile-editor-field.component.ts);
|
|
|
|
|
|
|
|
|
|
*/
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
const el = this.myElement.nativeElement.querySelector("#"+this.idprefix+id);
|
|
|
|
|
if(el){
|
2021-04-14 08:57:30 +02:00
|
|
|
|
el.scrollIntoView({behavior: "smooth", block:'end'});
|
2021-03-23 12:52:33 +01:00
|
|
|
|
}
|
|
|
|
|
}, 700);
|
|
|
|
|
}
|
2021-03-22 14:47:45 +01:00
|
|
|
|
|
2021-02-24 15:56:14 +01:00
|
|
|
|
}
|
2021-03-22 14:47:45 +01:00
|
|
|
|
private _scrollOnTop(){
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
const el = this.myElement.nativeElement.querySelector('#topofcontainer');
|
|
|
|
|
if(el){
|
|
|
|
|
el.scrollIntoView({behavior:'smooth'})
|
|
|
|
|
}
|
|
|
|
|
},200);
|
2021-02-24 15:56:14 +01:00
|
|
|
|
|
2021-03-22 14:47:45 +01:00
|
|
|
|
}
|
2021-02-24 15:56:14 +01:00
|
|
|
|
ngOnInit() {
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
2021-03-29 17:42:55 +02:00
|
|
|
|
onRemoveFieldSet(fieldsetId: string){
|
|
|
|
|
this.removeFieldSet.emit(fieldsetId);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
onCloneFieldSet(fieldset: FormGroup){
|
|
|
|
|
this.cloneFieldSet.emit(fieldset);
|
|
|
|
|
}
|
|
|
|
|
onAddFieldSet(){
|
|
|
|
|
this.addNewFieldSet.emit(this.form);
|
|
|
|
|
}
|
|
|
|
|
|
2021-03-01 17:42:18 +01:00
|
|
|
|
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;
|
|
|
|
|
}
|
2021-02-24 15:56:14 +01:00
|
|
|
|
}
|