import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core'; import { pathOr } from 'ramda'; import { MatDialog } from '@angular/material/dialog'; import { ContentFieldSelectorModalComponent } from '../../modals'; import { first } from 'rxjs/operators'; import { DragulaService } from 'ng2-dragula'; @Component({ selector: 'app-repeater-config', templateUrl: 'repeater-config.component.html', }) export class RepeaterConfigComponent implements OnInit { @Input() open = false; @Input() item: any; @Input() contentFields: any; @Output() remove: EventEmitter<void> = new EventEmitter<void>(); @Output() subfieldRemove: EventEmitter<number> = new EventEmitter<number>(); @Output() subfieldAdd: EventEmitter<any> = new EventEmitter<any>(); @Output() toggleOpen: EventEmitter<void> = new EventEmitter<void>(); @Output() subfieldsChange: EventEmitter<any> = new EventEmitter<any>(); public openFields = {}; constructor( private dialog: MatDialog, private dragulaService: DragulaService ) {} public ngOnInit(): void { this.dragulaService.createGroup('subfields', { moves: (el, container, handle) => { return el.querySelector(':scope > * > div > div > div > .m-field__handle-bar') === handle; } }); } public findFieldConfiguration(identifier) { return this.contentFields.find((x) => x.identifier === identifier); } public toggleSubfieldExpansion(i: number) { this.openFields[i] = !pathOr(false, [i])(this.openFields); } public toggleFieldExpansion(e: Event) { e.preventDefault(); this.toggleOpen.emit(); } public selectContentField(): void { const dialogRef = this.dialog.open(ContentFieldSelectorModalComponent); dialogRef.afterClosed() .pipe( first() ) .subscribe((value) => { if (!value) { return; } this.subfieldAdd.emit(value); }); } public removeSelf(e: Event) { e.preventDefault(); this.remove.emit(); } public handleDrop(items) { this.subfieldsChange.emit(items); } public removeSubfield(index: number) { this.subfieldRemove.emit(index); } }