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

import React, { useState, useEffect, useRef } from 'react';
import { __ } from '@wordpress/i18n';
import { useNavigate, useParams } from 'react-router-dom';
import { is, isNil } from 'ramda';

// store
import { storeSet, useStore } from '../../store';

// api
import BandoService from '../../service/bando-service';

// tools
import getBandoLabel from '../../helpers/getBandoLabel';

// components
import { Button } from 'primereact/button';
import { Skeleton } from 'primereact/skeleton';
import { Steps } from 'primereact/steps';
import BandoEditFormStep1 from './components/BandoEditFormStep1';
import BandoEditFormStep2 from './components/BandoEditFormStep2';
import { Messages } from 'primereact/messages';
import FormsService from '../../service/forms-service';

const BandoEdit = () => {
    const isAsyncRequest = useStore().main.isAsyncRequest();
    const navigate = useNavigate();
    const { id } = useParams();
    const [activeStep, setActiveStep] = useState(null)
    const [data, setData] = useState({});
    const [forms, setForms] = useState([]);
    //const [selectedTemplate, setSelectedTemplate] = useState(null);
    //const [templates, setTemplate] = useState(null);
    const formRef = useRef(null);
    const bandoMsgs = useRef(null);

    const stepItems = [
        {
            label: __('Testi', 'gepafin'),
            command: () => {
                if (activeStep === 0) {
                    return false
                }
                bandoMsgs.current.clear();
                const isFormValid = formRef.current.isFormValid();
                //const values = formRef.current.getValues();
                //const diffData = equal(values, data);
                // TODO warn about unsaved data
                if (isFormValid) {
                    goToStep(0)
                } else {
                    bandoMsgs.current.show([
                        {
                            id: '98',
                            sticky: true, severity: 'error', summary: 'Error',
                            detail: __('Potrai andare su altro step dopo risolvere errori della forma', 'gepafin'),
                            closable: true
                        }
                    ]);
                }
            }
        },
        {
            label: __('Gestione', 'gepafin'),
            command: () => {
                if (activeStep === 1) {
                    return false
                }
                bandoMsgs.current.clear();
                const isFormValid = formRef.current.isFormValid();
                //const values = formRef.current.getValues();
                //const diffData = equal(values, data);
                // TODO warn about unsaved data
                if (isFormValid) {
                    goToStep(1);
                } else {
                    bandoMsgs.current.show([
                        {
                            id: '98',
                            sticky: true, severity: 'error', summary: 'Error',
                            detail: __('Potrai andare su altro step dopo risolvere errori della forma', 'gepafin'),
                            closable: true
                        }
                    ]);
                }
            }
        }
    ];

    const goToStep = (step) => {
        setActiveStep(step);
    }

    const openBandoFormManagement = () => {
        navigate(`/bandi/${id}/forms`);
    }

    const validateBando = () => {
        storeSet.main.setAsyncRequest();
        bandoMsgs.current.clear();
        BandoService.validateBando(id, validateCallback, errValidateCallback);
    }

    const validateCallback = (data) => {
        if (data.status === 'SUCCESS') {
            if (bandoMsgs.current) {
                bandoMsgs.current.show([
                    {
                        id: '99',
                        sticky: true, severity: 'success', summary: '',
                        detail: __('Potrai pubblicare il tuo Bando.', 'gepafin'),
                        closable: false
                    }
                ]);
            }
        }
        storeSet.main.unsetAsyncRequest();
    }

    const errValidateCallback = (data) => {
        standardErrCallback(data);
    }

    const publishBando = () => {
        storeSet.main.setAsyncRequest();
        bandoMsgs.current.clear();
        BandoService.updateBandoStatus(id, publishCallback, errPublishCallback, [['status', 'PUBLISH']]);
    }

    const publishCallback = (data) => {
        if (data.status === 'SUCCESS') {
            if (bandoMsgs.current) {
                bandoMsgs.current.show([
                    {
                        id: '99',
                        sticky: true, severity: 'success', summary: '',
                        detail: __('Pubblicato!', 'gepafin'),
                        closable: false
                    }
                ]);
            }
        }
        storeSet.main.unsetAsyncRequest();
    }

    const errPublishCallback = (data) => {
        standardErrCallback(data);
    }

    const getCallback = (data) => {
        if (data.status === 'SUCCESS') {
            if (!isNil(data.data.dates) && data.data.dates.length) {
                data.data.dates = data.data.dates.map(v => is(String, v) ? new Date(v) : v);
            }

            if (data.data.status === 'READY_TO_PUBLISH') {
                bandoMsgs.current.clear();
                bandoMsgs.current.show([
                    {
                        id: '1',
                        sticky: true, severity: 'info', summary: 'Info',
                        detail: __('Potrai pubblicare il tuo Bando.', 'gepafin'),
                        closable: false
                    }
                ]);
            } else if (data.data.status === 'DRAFT') {
                if (bandoMsgs.current) {
                    bandoMsgs.current.clear();
                    bandoMsgs.current.show([
                        {
                            id: '1',
                            sticky: true, severity: 'info', summary: 'Info',
                            detail: __('Potrai pubblicare il tuo Bando solo dopo aver completato tutti i campi obbligatori contrassegnati dagli asterischi.', 'gepafin'),
                            closable: false
                        }
                    ]);
                }
            }

            setData(data.data);
        }
        storeSet.main.unsetAsyncRequest();
    }

    const errGetCallback = (data) => {
        standardErrCallback(data);
    }

    const standardErrCallback = (data) => {
        if (bandoMsgs.current && data.message) {
            bandoMsgs.current.show([
                {
                    sticky: true, severity: 'error', summary: 'Error',
                    detail: data.message,
                    closable: true
                }
            ]);
        }
        storeSet.main.unsetAsyncRequest();
    }

    const getFormsCallback = (data) => {
        if (data.status === 'SUCCESS') {
            setForms(data.data);
        }
        storeSet.main.unsetAsyncRequest();
    }

    useEffect(() => {
        storeSet.main.setAsyncRequest();
        setActiveStep(0);

        const parsed = parseInt(id)
        const bandoId = !isNaN(parsed) ? parsed : 0;

        if (bandoId === 0) {
            setData({
                status: 'draft',
                name: ''
            });
            storeSet.main.unsetAsyncRequest();

            if (bandoMsgs.current) {
                bandoMsgs.current.clear();
                bandoMsgs.current.show([
                    {
                        id: '1',
                        sticky: true, severity: 'info', summary: 'Info',
                        detail: __('Potrai pubblicare il tuo Bando solo dopo aver completato tutti i campi obbligatori contrassegnati dagli asterischi.', 'gepafin'),
                        closable: false
                    }
                ]);
            }
        } else {
            BandoService.getBando(id, getCallback, errGetCallback);
            FormsService.getFormsForCall(id, getFormsCallback, () => {
            });
        }
    }, []);

    return (
        <div className="appPage">
            <div className="appPage__pageHeader">
                <h1>{__('Creazione/Modifica Bando', 'gepafin')}</h1>
                <p>
                    {__('Stato:', 'gepafin')}
                    <span>{getBandoLabel(data.status)}</span>
                </p>
            </div>

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

            {/*!isLoading
                ? <div className="pageBando__templateSelection">
                    <div className="appForm__field">
                        <label htmlFor="template">
                            {__('Usa Template Salvato', 'gepafin')}
                        </label>
                        <Dropdown
                            id="template"
                            value={selectedTemplate}
                            onChange={(e) => setSelectedTemplate(e.value)}
                            options={templates}
                            optionLabel="name"
                            placeholder={__('Seleziona template', 'gepafin')}/>
                    </div>
                    <Button
                        onClick={() => console.log('use template')}
                        label={__('Applica', 'gepafin')}
                        icon="pi pi-check"
                        iconPos="right"/>
                </div> : null*/}
            {!isAsyncRequest
                ? <Steps
                    model={stepItems}
                    activeIndex={activeStep}
                    readOnly={false}/>
                : null}

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

            <Messages ref={bandoMsgs}/>

            {!isAsyncRequest
                ? <>
                    {activeStep === 0
                        ? <BandoEditFormStep1 initialData={data} ref={formRef}/> : null}
                    {activeStep === 1
                        ? <BandoEditFormStep2 initialData={data} ref={formRef}/> : null}

                    <div className="appPageSection">
                        <h2>{__('Crea o modifica il Form compilabile dal Beneficiario', 'gepafin')}</h2>
                        <Button
                            type="button"
                            onClick={openBandoFormManagement}
                            label={__('Crea/modifica form', 'gepafin')}/>

                        {forms.length
                            ? <ul className="">
                                {forms.map(o => <li key={o.id}>
                                    {o.label}
                                </li>)}
                            </ul>
                            : <p>No forms created yet.</p>}
                    </div>

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

                    <div className="appPageSection">
                        <h2>{__('Publicca il Form', 'gepafin')}</h2>

                        <div className="appPageSection__actions">
                            <Button
                                type="button"
                                outlined
                                disabled={!(data.status === 'DRAFT')}
                                onClick={validateBando}
                                label={__('Validate', 'gepafin')}/>
                            <Button
                                type="button"
                                disabled={!(data.status === 'READY_TO_PUBLISH')}
                                onClick={publishBando}
                                label={__('Publish', 'gepafin')}/>
                        </div>
                    </div>
                </>
                : <>
                    <Skeleton width="20%" height="1rem" className="mb-2"></Skeleton>
                    <Skeleton width="100%" height="2rem" className="mb-8"></Skeleton>
                    <Skeleton width="20%" height="1rem" className="mb-2"></Skeleton>
                    <Skeleton width="100%" height="4rem" className="mb-8"></Skeleton>
                    <Skeleton width="20%" height="1rem" className="mb-2"></Skeleton>
                    <Skeleton width="100%" height="2rem" className="mb-8"></Skeleton>
                    <Skeleton width="20%" height="1rem" className="mb-2"></Skeleton>
                    <Skeleton width="100%" height="4rem"></Skeleton>
                </>}
        </div>
    )
}

export default BandoEdit;