Proyectos de Subversion LeadersLinked - Backend

import React, { useState, useEffect } from 'react'
import { Button, Modal } from 'react-bootstrap'
import axios from 'axios'
import Datetime from 'react-datetime'
import { useForm } from 'react-hook-form'
import { useDispatch } from 'react-redux'
import { addNotification } from '../../../redux/notification/notification.actions'
import 'react-datetime/css/react-datetime.css'

const EditAndAddModal = ({ action_link, closeModal, type, onComplete }) => {

        //Hooks
        const { register, handleSubmit, errors, setValue, clearErrors, watch, reset } = useForm()
        const [isActive, setIsActive] = useState(false)
        const [usersSelected, setUsersSelected] = useState([])
        const [allUsers, setAllUsers] = useState([])
        const [year, setYear] = useState(new Intl.DateTimeFormat('en-CA').format(new Date()))
        const dispatch = useDispatch()

        const deleteUserSelected = (uuid) => {
                const newUsersSelected = usersSelected.filter((user) => user.uuid !== uuid)
                setUsersSelected(newUsersSelected)
        }

        const addUser = () => {
                const newUser = allUsers.find(userOption => userOption.uuid === watch('user'))
                setUsersSelected(prev => [...prev, { uuid: newUser.uuid }])
        }

        const onClose = () => {
                reset()
                setUsersSelected([])
                closeModal()
        }

        const onSubmit = (data) => {
                const submitData = new FormData()

                submitData.append('status', isActive ? 'a' : 'i')
                submitData.append('date', year)
                usersSelected.map((user) => submitData.append('who[]', user.uuid))
                Object.entries(data).map(([key, value]) => {
                        submitData.append(key, value)
                })

                axios.post(action_link, submitData)
                        .then(({ data }) => {
                                if (!data.success) {
                                        typeof data.data === 'string'
                                                ?
                                                dispatch(addNotification({
                                                        style: 'danger',
                                                        msg: data.data
                                                }))
                                                : Object.entries(data.data).map(([key, value]) =>
                                                        value.map(err =>
                                                                dispatch(addNotification({
                                                                        style: 'danger',
                                                                        msg: `${key}: ${err}`
                                                                }))
                                                        )
                                                )
                                        return
                                }

                                clearErrors()
                                closeModal()
                                reset()
                                onComplete()
                                dispatch(addNotification({
                                        style: 'success',
                                        msg: 'Registro guardadof'
                                }))
                        })
        }

        useEffect(() => {
                if (type === 'edit') {
                        axios.get(action_link)
                                .then(({ data }) => {
                                        if (!data.success) {
                                                return dispatch(addNotification({
                                                        style: 'danger',
                                                        msg: 'Ha ocurrido un error'
                                                }))
                                        }

                                        setAllUsers(data.all_users)
                                        setValue('title', data.data.title)
                                        setValue('description', data.data.description)
                                        setValue('how', data.data.how)
                                        setValue('place', data.data.place)
                                        setValue('date', data.data.date)
                                        setValue('cost', data.data.time)
                                        setValue('priority', data.data.time)
                                        setValue('urgent', data.data.time)
                                        setValue('indicator', data.data.indicator)
                                        setIsActive(data.data.status === 'a' ? true : false)
                                        setUsersSelected(data.users)
                                })
                }
        }, [type])

        useEffect(() => {
                if (type === 'add') {
                        axios.get(action_link)
                                .then(({ data }) => {
                                        if (!data.success) {
                                                return dispatch(addNotification({
                                                        style: 'danger',
                                                        msg: 'Ha ocurrido un error'
                                                }))
                                        }

                                        setAllUsers(data.data)
                                })
                }
        }, [type])

        return (
                <Modal size="md" onHide={onClose} show={type === 'add' || type === ('edit')}>
                        <Modal.Header closeButton>
                                <Modal.Title>
                                        {
                                                type === 'add'
                                                        ? 'Agregar Tarea'
                                                        : 'Editar Tarea'
                                        }
                                </Modal.Title>
                        </Modal.Header>
                        <form onSubmit={handleSubmit(onSubmit)}>
                                <Modal.Body>
                                        <div className='form-group'>
                                                <label className="form-label">Título</label>
                                                <input type="text" name='title' className='form-control' ref={register({ required: true })} />
                                                {errors.title && <p>{errors.title.message}</p>}
                                        </div>
                                        <div className='form-group'>
                                                <label className="form-label">Descripción de la tarea</label>
                                                <input type="text" name='description' className='form-control' ref={register({ required: true })} />
                                                {errors.description && <p>{errors.description.message}</p>}
                                        </div>
                                        <div className='form-group'>
                                                <label className="form-label">Como se implementara</label>
                                                <input type="text" name='how' className='form-control' ref={register({ required: true })} />
                                                {errors.how && <p>{errors.how.message}</p>}
                                        </div>
                                        <div className="w-100">
                                                <table className='table'>
                                                        <thead>
                                                                <tr>
                                                                        <th>Usuario</th>
                                                                        <th>Acciones</th>
                                                                </tr>
                                                        </thead>
                                                        <tbody>
                                                                {
                                                                        usersSelected.map((user) => {
                                                                                const renderUser = allUsers.find(userOption => userOption.uuid === user.uuid)

                                                                                return (
                                                                                        <tr key={renderUser.uuid}>
                                                                                                <td>{`${renderUser.first_name} ${renderUser.last_name}`}</td>
                                                                                                <td>
                                                                                                        <div className="d-flex">
                                                                                                                <button className='btn btn-danger' onClick={() => deleteUserSelected(renderUser.uuid)}>
                                                                                                                        Eliminar
                                                                                                                </button>
                                                                                                        </div>
                                                                                                </td>
                                                                                        </tr>
                                                                                )
                                                                        })
                                                                }
                                                        </tbody>
                                                </table>
                                        </div>
                                        <div className="d-flex align-items-center">
                                                <select name='user' ref={register} className='form-control'>
                                                        <option value=''>Seleccione</option>
                                                        {
                                                                allUsers.map((user) => (
                                                                        <option key={user.uuid} value={user.uuid}>{`${user.first_name} ${user.last_name}`}</option>
                                                                ))
                                                        }
                                                </select>
                                                <button className='d-flex align-items-center btn btn-primary ml-2' onClick={addUser}>
                                                        <i className='fa fa-plus' />
                                                        Agregar
                                                </button>
                                        </div>
                                        <div className="d-flex align-items-centers" style={{ gap: '5px' }}>
                                                <div className='form-group'>
                                                        <label className="form-label">Donde se realizara:</label>
                                                        <input type="text" name='place' className='form-control' ref={register({ required: true })} />
                                                        {errors.place && <p>{errors.place.message}</p>}
                                                </div>
                                                <div className='form-group'>
                                                        <label className="form-label">Fecha:</label>
                                                        <Datetime
                                                                dateFormat="DD-MM-YYYY"
                                                                timeFormat={false}
                                                                onChange={(e) =>
                                                                        setYear(new Intl.DateTimeFormat('en-CA', { year: 'numeric', month: 'numeric', day: 'numeric' }).format(e.toDate()))
                                                                }
                                                                inputProps={{ className: 'form-control' }}
                                                                initialValue={Date.parse(year)}
                                                                closeOnSelect
                                                                value={year}
                                                        />
                                                </div>
                                                <div className='form-group'>
                                                        <label className="form-label">Horas:</label>
                                                        <input type="number" name='time' className='form-control' ref={register} defaultValue='1' />
                                                        {errors.time && <p>{errors.time.message}</p>}
                                                </div>
                                        </div>
                                        <div className="d-flex align-items-centers" style={{ gap: '5px' }}>
                                                <div className='form-group'>
                                                        <label className="form-label">Costo:</label>
                                                        <input type="number" name='cost' className='form-control' defaultValue='1' ref={register} />
                                                </div>
                                                <div className='form-group'>
                                                        <label className="form-label">Prioridad:</label>
                                                        <select name="priority" ref={register({ required: true })}>
                                                                <option selected={watch('priority') === ''} value="">Seleccione</option>
                                                                <option selected={watch('priority') === 'i'} value="i">Importante</option>
                                                                <option selected={watch('priority') === 'ni'} value="ni">No importante</option>
                                                        </select>
                                                </div>
                                                <div className='form-group'>
                                                        <label className="form-label">Urgencia:</label>
                                                        <select name="urgent" ref={register({ required: true })}>
                                                                <option selected={watch('urgent') === ''} value="">Seleccione</option>
                                                                <option selected={watch('urgent') === 'u'} value="u">Urgente</option>
                                                                <option selected={watch('urgent') === 'nu'} value="nu">No urgente</option>
                                                        </select>
                                                </div>
                                        </div>
                                        <div className="form-row">
                                                <div className="col-md-9 mb-3">
                                                        <label>Indicador de progreso:</label>
                                                        <div className="d-flex justify-content-between align-items-center">
                                                                <input type="range" name="indicator" min='1' max='100' className="form-control" ref={register} />
                                                                <span className="ml-2" id="spanIndicator">{watch('indicator')}</span>
                                                        </div>
                                                </div>
                                                <div className="col-md-3 mb-3 text-center">
                                                        <label htmlFor="status">Estatus:</label>
                                                        <div
                                                                className={`toggle d-block btn btn-primary ${!isActive && 'off'}`}
                                                                data-toggle="toggle"
                                                                role="button"
                                                                style={{ width: '130px' }}
                                                                onClick={() => setIsActive(!isActive)}
                                                        >
                                                                <input
                                                                        type="checkbox"
                                                                        checked={isActive}
                                                                />
                                                                <div className="toggle-group">
                                                                        <label htmlFor="status" className="btn btn-primary toggle-on">Activo</label>
                                                                        <label htmlFor="status" className="btn btn-light toggle-off">Inactivo</label>
                                                                        <span className="toggle-handle btn btn-light"></span>
                                                                </div>
                                                        </div>
                                                </div>
                                        </div>
                                </Modal.Body>
                                <Modal.Footer>
                                        <Button variant="primary" type='submit'>
                                                Enviar
                                        </Button>
                                        <Button variant="danger" onClick={closeModal}>
                                                Cancelar
                                        </Button>
                                </Modal.Footer>
                        </form>
                </Modal >
        )
}

export default EditAndAddModal