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

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

// components
import FormField from '../../../../components/FormField';
import FormFieldRepeater from '../../../../components/FormFieldRepeater';
import FormFieldRepeaterCriteria from '../../../../components/FormFieldRepeaterCriteria';
import BandoEditFormActions from '../BandoEditFormActions';
import UnsavedChangesDetector from '../../../../components/UnsavedChangesDetector';
import BandoService from '../../../../service/bando-service';
import LookupdataService from '../../../../service/lookupdata-service';

const BandoEditFormStep2 = forwardRef(function ({ initialData, getFormErrors }, ref) {
    const navigate = useNavigate();
    const [criteriaOptions, setCriteriaOptions] = useState([]);
    const [checklistOptions, setChecklistOptions] = 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();
    const step2Props = ['threshold', 'criteria', 'checkList', 'docs', 'images'];

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

        const forSubmit = Object.keys(formData).reduce((acc, cur) => {
            if (step2Props.includes(cur)) {
                acc[cur] = formData[cur];
            }
            return acc;
        }, {});

        BandoService.updateBandoStep2(formData.id, forSubmit, createCallback, errCreateCallback);
    };

    const createCallback = (data) => {
        if (data.status === 'SUCCESS') {
            setFormInitialData(data.data);
            reset();
        }
    }

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

    const lookupdataCallback = (data) => {
        if (data.status === 'SUCCESS') {
            const criteria = data.data
                .filter(o => o.type === 'EVALUATION_CRITERIA')
                .map(o => {
                    delete o.type;
                    return {
                        ...o,
                        score: 0,
                        lookUpDataId: o.id
                    };
                });
            setCriteriaOptions(criteria);
            const checklist = data.data
                .filter(o => o.type === 'CHECKLIST')
                .map(o => {
                    delete o.type;
                    return {
                        ...o,
                        lookUpDataId: o.id
                    };
                });
            setChecklistOptions(checklist);
        }
    }

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

    const openPreview = () => {
        navigate('/bandi/preview/11');
    }

    const openPreviewEvaluation = () => {
        navigate('/bandi/preview-evaluation/11');
    }

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

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

    useEffect(() => {
        const newFormData = klona(formInitialData);
        if (!isNil(formInitialData.dates) && formInitialData.dates.length) {
            newFormData.dates = formInitialData.dates.map(v => is(String, v) ? new Date(v) : (v ? v : ''));
        }
        reset(newFormData);
    }, [formInitialData]);

    useEffect(() => {
        trigger().then(() => clearErrors());
        LookupdataService.getItems(lookupdataCallback, errLookupdataCallback, [['type', ['CHECKLIST', 'EVALUATION_CRITERIA']]])
    }, []);

    return (
        <form className="appForm" onSubmit={handleSubmit(onSubmit)}>
            <UnsavedChangesDetector initialData={initialData} getValuesFn={getValues}/>
            <FormFieldRepeaterCriteria
                data={values}
                setDataFn={setValue}
                fieldName="criteria"
                options={criteriaOptions}
                errors={errors}
                register={register}
                label={<>{__('Criteri di valutazione', 'gepafin')}*
                    <span>{__('(almeno 1 criterio di valutazione)', 'gepafin')}</span></>}
                config={{
                    validate: {
                        minOneItem: v => !isEmpty(v) || __('Almeno 1 criterio di valutazione', 'gepafin'),
                        noEmptyValue: v => v
                                .filter(o => isEmpty(o.value) || isEmpty(o.score)).length === 0
                            || __('Non lasciare il valore vuoto', 'gepafin')
                    }
                }}/>

            <FormField
                type="fileupload"
                setDataFn={setValue}
                fieldName="docs"
                label={__('Documentazione', 'gepafin')}
                control={control}
                errors={errors}
                defaultValue={values['docs']}
                config={{ required: __('È obbligatorio', 'gepafin') }}
                accept="application/pdf,application/vnd.ms-excel"
                chooseLabel={__('Aggiungi documento', 'gepafin')}
                multiple={true}
                doctype='document'
                register={register}
                callId={values.id}
            />

            <FormField
                type="fileupload"
                setDataFn={setValue}
                fieldName="images"
                label={__('Immagine del Bando', 'gepafin')}
                control={control}
                errors={errors}
                defaultValue={values['images']}
                doctype='images'
                register={register}
                callId={values.id}
            />

            <FormFieldRepeater
                data={values}
                setDataFn={setValue}
                fieldName="checkList"
                options={checklistOptions}
                errors={errors}
                register={register}
                label={<>{__('Checklist valutazione Pre-Istruttoria', 'gepafin')}*
                    <span>{__('(almeno 1 elemento)', 'gepafin')}</span></>}
                config={{
                    validate: {
                        minOneItem: v => !isEmpty(v) || __('Almeno 1 elemento', 'gepafin'),
                        noEmptyValue: v => v
                            .filter(o => isEmpty(o.value)).length === 0 || __('Non lasciare il valore vuoto', 'gepafin')
                    }
                }}
            />

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

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

            <BandoEditFormActions
                openPreview={openPreview}
                openPreviewEvaluation={openPreviewEvaluation}/>
        </form>
    )
})

export default BandoEditFormStep2;