src/app/features/forms/statement-editor/components/arrangement-form-group/arrangement-form-group.component.ts

/********************************************************************************
 * Copyright (c) 2020 Contributors to the Eclipse Foundation
 *
 * See the NOTICE file(s) distributed with this work for additional
 * information regarding copyright ownership.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0
 *
 * SPDX-License-Identifier: EPL-2.0
 ********************************************************************************/


import {CdkDragDrop} from "@angular/cdk/drag-drop";
import {Component, Input} from "@angular/core";
import {FormArray, FormControl, FormGroup} from "@angular/forms";
import {IAPITextArrangementErrorModel, IAPITextArrangementItemModel, IAPITextBlockGroupModel} from "../../../../../core/api/text";
import {IExtendedTextBlockModel} from "../../../../../shared/text-block/model";
import {IStatementEditorControlConfiguration, IStatementEditorFormValue} from "../../../../../store/statements/model";
import {createFormGroup} from "../../../../../util/forms";
import {arrayJoin} from "../../../../../util/store";
import {AbstractReactiveFormComponent} from "../../../abstract";

@Component({
    selector: "app-arrangement-form-group",
    templateUrl: "./arrangement-form-group.component.html",
    styleUrls: ["./arrangement-form-group.component.scss"]
})
export class ArrangementFormGroupComponent extends AbstractReactiveFormComponent<IStatementEditorFormValue> {

    @Input()
    public appFormGroup: FormGroup = createFormGroup<IStatementEditorFormValue>({
        arrangement: new FormArray([])
    });

    @Input()
    public appControls: IStatementEditorControlConfiguration[];

    @Input()
    public appSelectedTextBlockIds: string[];

    @Input()
    public appTextBlockGroups: IAPITextBlockGroupModel[];

    @Input()
    public appShortMode: boolean;

    @Input()
    public appShowPreview: boolean;

    public isDragging = false;

    @Input()
    public set appArrangementValue(value: IAPITextArrangementItemModel[]) {
        this.getArrangementControl().clear();
        arrayJoin(value).forEach((item) => this.add(item));
    }

    @Input()
    public set appArrangementError(list: IAPITextArrangementErrorModel[]) {
        this.getArrangementControl()?.controls
            .forEach((control) => control.setErrors({arrangement: null}));
        arrayJoin(list).forEach((error) => {
            this.appFormGroup.get(["arrangement", error.arrangementId])?.setErrors({arrangement: error});
        });
        this.getArrangementControl().updateValueAndValidity();
    }

    public trackBy = (index: number) => {
        const control = this.getArrangementControl();
        return control == null ? index : control.at(index);
        // tslint:disable-next-line:semicolon
    };

    public getArrangementControl(): FormArray {
        const formArray = this.appFormGroup.get("arrangement");
        return formArray instanceof FormArray ? formArray : undefined;
    }

    public getControl(index: number) {
        return this.getArrangementControl().get([index]);
    }

    public add(value: IAPITextArrangementItemModel, index?: number) {
        const control = this.getArrangementControl();
        control.insert(index == null ? control.length : index, new FormControl(value));
    }

    public remove(index: number) {
        this.getArrangementControl().removeAt(index);
    }

    public move(index: number, targetIndex: number) {
        const control = this.getControl(index);
        this.getArrangementControl().removeAt(index);
        this.getArrangementControl().insert(targetIndex, control);
    }

    public drop(event: CdkDragDrop<any>) {
        if (event.previousContainer !== event.container) {
            this.addTextBlock(event.item?.data, event.currentIndex);
        }
        if (event.previousContainer === event.container) {
            this.move(event.previousIndex, event.currentIndex);
        }
    }

    public addTextBlock(block: IExtendedTextBlockModel, index?: number) {
        if (block == null) {
            return;
        }

        const {type, id} = block;
        if (type == null || type === "block") {
            if (id != null) {
                this.add({type: "block", textblockId: id, placeholderValues: {}}, index);
            }
        } else {
            this.add({type, placeholderValues: {}, replacement: type === "text" ? "" : undefined}, index);
        }
    }

}