src/app/features/new/components/new-statement-form/new-statement-form.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 {Component, EventEmitter, Input, Output} from "@angular/core";
import {NgForm} from "@angular/forms";
import {ISelectOption} from "../../../../shared/controls/select";
import {ENewStatementError, IStatementInfoFormValue} from "../../../../store";

interface INewStatementFormGroup {
    title: string;
    type: "text" | "date" | "select";
    id: keyof IStatementInfoFormValue;
}

@Component({
    selector: "app-new-statement-form",
    templateUrl: "./new-statement-form.component.html",
    styleUrls: ["./new-statement-form.component.scss"]
})
export class NewStatementFormComponent {

    private static id = 0;

    @Input()
    public appError: string;

    @Input()
    public appIsLoading = false;

    @Input()
    public appDisabled = false;

    @Input()
    public appId = `NewStatementFormComponent-${NewStatementFormComponent.id++}`;

    @Input()
    public appValue: Partial<IStatementInfoFormValue>;

    @Input()
    public appTypeOptions: ISelectOption[] = [];

    @Output()
    public appSubmit = new EventEmitter<IStatementInfoFormValue>();

    public isTouched = false;

    public formGroups: INewStatementFormGroup[] = [
        {
            title: "new.form.title",
            id: "title",
            type: "text"
        },
        {
            title: "new.form.receiptDate",
            id: "receiptDate",
            type: "date"
        },
        {
            title: "new.form.dueDate",
            id: "dueDate",
            type: "date"
        },
        {
            title: "new.form.typeId",
            id: "typeId",
            type: "select"
        },
        {
            title: "new.form.city",
            id: "city",
            type: "text"
        },
        {
            title: "new.form.district",
            id: "district",
            type: "text"
        }
    ];

    public onFormInput(form: NgForm) {
        if (this.appError === ENewStatementError.INVALID_FORM && form?.valid) {
            this.appError = undefined;
        }
    }

    public submit(form: NgForm) {
        this.isTouched = true;
        if (!form?.valid) {
            this.appError = ENewStatementError.INVALID_FORM;
            return;
        }
        this.appSubmit.emit(form.value);
    }

}