bflows-bandi-fe/src/pages/BandoEdit/components/BandoEditFormStep1/index.js

import React, { forwardRef, useImperativeHandle, useEffect, useState, useMemo } from 'react';
import { __ } from '@wordpress/i18n';
import { useNavigate } from 'react-router-dom';
import { useForm } from 'react-hook-form';
import { isEmpty, isNil, is } from 'ramda';

// components
import FormField from '../../../../components/FormField';
import FormFieldRepeater from '../../../../components/FormFieldRepeater';
import FormFieldRepeaterFaq from '../../../../components/FormFieldRepeaterFaq';
import BandoEditFormActions from '../BandoEditFormActions';
import UnsavedChangesDetector from '../../../../components/UnsavedChangesDetector';
import BandoService from '../../../../service/bando-service';
import LookupdataService from '../../../../service/lookupdata-service';
import { storeSet, useStore } from '../../../../store';

const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors }, ref) {
    const navigate = useNavigate();
    const isAsyncRequest = useStore().main.isAsyncRequest();
    const [aimedToOptions, setAimedToOptions] = useState([]);
    const [faqOptions, setFaqOptions] = useState([]);
    const [formInitialData, setFormInitialData] = useState(initialData);
    const {
        control,
        handleSubmit,
        formState: { errors, isValid },
        setValue,
        register,
        trigger,
        getValues,
        clearErrors,
        reset
    } = useForm({
        defaultValues: useMemo(() => {
            return formInitialData;
        }, [formInitialData]), mode: 'onChange'
    });
    const values = getValues();
    let minDateStart = new Date();

    const onSubmit = (formData) => {
        if (!isNil(formData.dates) && formData.dates.length) {
            formData.dates = formData.dates.map(v => is(String, v) ? v : v.toISOString());
        }

        if (!formData.id) {
            BandoService.createBando(formData, createCallback, errCreateCallback);
        } else {
            BandoService.updateBandoStep1(formData.id, formData, createCallback, errCreateCallback);
        }
    };

    const createCallback = (data) => {
        if (data.status === 'SUCCESS') {
            const values = getValues();
            if (!values.id && data.data.id) {
                navigate(`/bandi/${data.data.id}`);
            } else {
                setFormInitialData(data.data);
                reset();
            }
        }
    }

    const errCreateCallback = (data) => {
        console.log('errCreateCallback', data);
    }

    const openPreview = () => {
        navigate(`/bandi/${values.id}/preview`);
    }

    const openPreviewEvaluation = () => {
        navigate(`/bandi/${values.id}/preview-evaluation`);
    }

    const lookupdataCallback = (data) => {
        if (data.status === 'SUCCESS') {
            const aimedTo = data.data
                .filter(o => o.type === 'AIMED_TO')
                .map(o => {
                    delete o.type;
                    return {
                        ...o,
                        lookUpDataId: o.id
                    };
                });
            setAimedToOptions(aimedTo);
            const faqItems = data.data
                .filter(o => o.type === 'FAQ')
                .map(o => {
                    delete o.type;
                    return {
                        ...o,
                        lookUpDataId: o.id
                    };
                });
            setFaqOptions(faqItems);
        }
        storeSet.main.unsetAsyncRequest();
    }

    const errLookupdataCallback = (data) => {
        console.log('errLookupdataCallback', data);
        storeSet.main.unsetAsyncRequest();
    }

    useImperativeHandle(
        ref,
        () => {
            return {
                isFormValid: () => {
                    return isValid;
                },
                getErrors: () => {
                    return errors;
                },
                getValues: () => {
                    return getValues();
                }
            }
        }, [errors, isValid]);

    useEffect(() => {
        setFormInitialData(initialData);
    }, [initialData]);

    useEffect(() => {
        reset(formInitialData);
    }, [formInitialData]);

    useEffect(() => {
        if (isAsyncRequest !== 0) {
            return;
        }

        trigger().then(() => clearErrors());
        //storeSet.main.setAsyncRequest();
        LookupdataService.getItems(lookupdataCallback, errLookupdataCallback, [['type', ['AIMED_TO', 'FAQ']]])
    }, []);

    return (
        <form className="appForm" onSubmit={handleSubmit(onSubmit)}>
            <UnsavedChangesDetector initialData={formInitialData} getValuesFn={getValues}/>
            <FormField
                type="switch"
                fieldName="confidi"
                label={__('Bando Confidi', 'gepafin')}
                control={control}
                errors={errors}
                defaultValue={values['confidi']}
                onLabel={__('Si', 'gepafin')}
                offLabel={__('No', 'gepafin')}
            />

            <FormField
                type="textinput"
                fieldName="name"
                label={__('Titolo del Bando', 'gepafin')}
                control={control}
                errors={errors}
                defaultValue={values['name']}
                config={{ required: __('È obbligatorio', 'gepafin') }}
            />

            <FormField
                type="textarea"
                fieldName="descriptionShort"
                label={__('Descrizione breve', 'gepafin')}
                control={control}
                errors={errors}
                defaultValue={values['descriptionShort']}
                config={{
                    required: __('È obbligatorio', 'gepafin')
                }}
            />

            <FormField
                type="textarea"
                fieldName="descriptionLong"
                label={__('Descrizione completa', 'gepafin')}
                control={control}
                rows={7}
                errors={errors}
                defaultValue={values['descriptionLong']}
                config={{
                    required: __('È obbligatorio', 'gepafin'),
                    minLength: 200
                }}
                infoText={__('Almeno 200 caratteri', 'gepafin')}
            />

            <FormFieldRepeater
                data={values}
                setDataFn={setValue}
                fieldName="aimedTo"
                options={aimedToOptions}
                errors={errors}
                register={register}
                trigger={trigger}
                config={{
                    validate: {
                        minOneItem: v => !isEmpty(v) || __('Almeno 1 tipo di destinatari', 'gepafin'),
                        noEmptyValue: v => v
                            .filter(o => isEmpty(o.value)).length === 0 || __('Non lasciare il valore vuoto', 'gepafin')
                    }
                }}
                label={<>{__('A chi si rivolge', 'gepafin')}*
                    <span>{__('(almeno 1 tipo di destinatari)', 'gepafin')}</span></>}
            />

            <FormField
                type="textarea"
                fieldName="documentationRequested"
                label={__('Documentazione richiesta', 'gepafin')}
                control={control}
                errors={errors}
                defaultValue={values['documentationRequested']}
                config={{
                    required: __('È obbligatorio', 'gepafin')
                }}
            />

            <FormField
                type="datepickerrange"
                fieldName="dates"
                label={__('Dati di pubblicazione', 'gepafin')}
                control={control}
                errors={errors}
                defaultValue={values['dates']}
                config={{ required: __('È obbligatorio', 'gepafin') }}
                minDate={minDateStart}
            />

            <div className="appForm__twoCols">
                <FormField
                    type="numberinput"
                    fieldName="amount"
                    label={__('Dotazione del Bando', 'gepafin')}
                    control={control}
                    errors={errors}
                    defaultValue={values['amount']}
                    config={{ required: __('È obbligatorio', 'gepafin') }}
                    inputgroup={true}
                    icon="€"
                />

                <FormField
                    type="numberinput"
                    fieldName="amountMax"
                    label={__('Importo massimo per Progetto', 'gepafin')}
                    control={control}
                    errors={errors}
                    defaultValue={values['amountMax']}
                    config={{ required: __('È obbligatorio', 'gepafin') }}
                    inputgroup={true}
                    icon="€"
                />
            </div>

            <FormFieldRepeaterFaq
                data={values}
                setDataFn={setValue}
                fieldName="faq"
                options={faqOptions}
                errors={errors}
                register={register}
                trigger={trigger}
                config={{
                    validate: {
                        noEmptyValue: v => v
                            .filter(o => isEmpty(o.question) || isEmpty(o.answer)).length === 0 || __('Non lasciare il valore vuoto', 'gepafin')
                    }
                }}
                label={__('FAQ', 'gepafin')}/>

            <div className="appPage__spacer"></div>

            <div className="appPageSection__hr">
                <span>{__('Azioni', 'gepafin')}</span>
            </div>

            <BandoEditFormActions
                id={values.id}
                openPreview={openPreview}
                openPreviewEvaluation={openPreviewEvaluation}/>
        </form>
    )
})

export default BandoEditFormStep1;