Untitled

import React, { forwardRef, Fragment, useEffect, useImperativeHandle, useState } from "react";
import ReactTable from "react-table";
import "../../UIComponents/pagination/styles";

import Pagination from "../../UIComponents/pagination/pagination";

import getColumns from './header-table';
import { useNavigate } from 'react-router-dom'
import DownloadData from "../../services/excel-pdf/download-data";
import * as env from "../../environment";
import Modal from "../../UIComponents/modal";
import Template from "../../UIComponents/modal/tempalte";
import {
    isMobile
} from "react-device-detect";
import Buttons from "../../UIComponents/button";
import { Dialog, DialogContent ,DialogActions,DialogTitle } from '@material-ui/core';
import Typography from '@mui/material/Typography';
import IconButton from '@material-ui/core/IconButton';
import CloseIcon from '@material-ui/icons/Close';

import { Trans, withTranslation } from 'react-i18next';
import { Button } from "@material-ui/core";
import UpdateIcon from '@material-ui/icons/Update';
import TableSortLabel from '@material-ui/core/TableSortLabel';
import { ConsoleLogger } from "@aws-amplify/core";
import { withRouter } from "react-router-dom";
import {
    FormRow,
    FormName
  } from "../../generalStyles/mixin";
import Select from '@mui/material/Select';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
const { REACT_APP_API, REACT_APP_ENGINE_API } = env[process.env.NODE_ENV];


function InboxComponent (props) {
    const [inbox, setInbox] = useState([]);
    const [totalPages, setTotalPages] = useState(0);
    const [actualPage, setActualPage] = useState(1);

    const [isOpen, setIsOpen] = useState(false);
    const [isClosable, setIsClosable] = useState(true);
    const [modalChildren, setModalChildren] = useState('');
    const [modalMessage, setModalMessage] = useState('');
    const [openNewCaso, setOpenNewCaso] = useState(false);

    const userInfo = JSON.parse(localStorage.getItem('userInfo'));
    const history = useNavigate();

    const [idTask, setidTask] = useState('')

    const [context, setContext] = useState([])
    const [flowsSelected, setFlowsSelected] = useState("")
    //const [MTDTenantUuid , setMTDTenantUuid] = useState("")

    //const [visible, setVisible] = useState('');

    const getPdfData = () => {
        return { data: inbox, columns: Object.keys(inbox[0]) }
    }

    useEffect(() => {
        getInbox();
        
        //console.log(userInfo.idUser)
    }, [])

    const goTo = (order, process, form) => {
        // guardamos el tipo de actividad de la orden a buscar
        if (order.username) {
            localStorage.setItem('orderActivity', order.task);

            history('shippingorder',{
                //pathname: `home/orderRequest/${process}`,
                state: { orderInbox: order, form }
            });
        } else {
            setIsOpen(true);
            setIsClosable(true);
            setModalChildren('error');
            setModalMessage(<Trans count="3">Asigne-la-tarea-a-un-usuario</Trans>);
        }
    }

    const handleTask = (id) => {
        console.log("el id", id)
        setidTask(id)
        UpdateTask(id);
    }

    const UpdateTask = async (id) => {

        const endpoint = `${REACT_APP_API}/taskassing/assign`
        const request = {
            idTaskAssing: Number.parseInt(id),
            idUser: userInfo.idUser
        }

        setIsClosable(false);
        setIsOpen(true);
        setModalChildren('loader');

        fetch(endpoint, {
            method: "POST",
            headers: { "Content-type": "application/json" },
            body: JSON.stringify(request)
        })
            .then(response => response.json())
            .then(json => {
                if (json.status == 200) {
                    console.log("guardado", json)
                    setIsOpen(true)
                    setModalChildren('personalized2')
                    setIsClosable(true)
                    getInbox();
                }
                else {
                    console.log("error ", json)
                    //setIsOpen(false);
                }
            })
            .catch(err => console.log(err));
    }

    const getInbox = (pageNumber) => {
        //setMTDTenantUuid(localStorage.getItem("MTD-TenantUuid"));
        const MTDTenantUuid = localStorage.getItem("MTD-TenantUuid")
        const userId = JSON.parse(localStorage.getItem('userInfo')).idUser;

        //console.log("userId",userId)
        const endpoint = `${REACT_APP_API}/taskassing/inbox/${userId}/paginator/10/${pageNumber || 1}`;
        //console.log("endpoint",endpoint)
        //const endpoint = `${REACT_APP_ENGINE_API_STARKEN}/inbox/${userInfo.id}`;

        //const endpoint = `${REACT_APP_API}/taskassing/inbox/${userId}/paginator/10/${pageNumber || 1}`;
        const requestOptions = {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                "x-api-key": 'u925eT7cc47AKUReuXVGY85qJUtFTJUb4Dz6HYT3',
                "MTD-TenantUuid": MTDTenantUuid,
            }
        };

        setIsOpen(true);
        setModalChildren('loader');
        setIsClosable(false);

        //console.log("endpoint inbox",endpoint)
        //console.log("request inbox",requestOptions)
        fetch(endpoint, requestOptions)
            .then(res => res.json())
            .then(json => {
                console.log("inbox",json)
                const newInbox = json.inbox.map(val => {
                    // formato fecha solicitud
                    var fechasoli = new Date(val.requestDate);
                    var day = ('0' + fechasoli.getDate()).slice(-2);
                    var month = ('0' + (fechasoli.getMonth() + 1)).slice(-2);
                    var year = fechasoli.getFullYear();

                    // formato fecha creación
                    var fechacrea = new Date(val.creatDate);
                    var dayInit = ('0' + fechacrea.getDate()).slice(-2);
                    var monthInit = ('0' + (fechacrea.getMonth() + 1)).slice(-2);
                    var yearInit = fechacrea.getFullYear();

                    return {
                        ...val,
                        actividad: val.actividad,
                        initDate: dayInit + "/" + monthInit + "/" + yearInit,
                        requestDate: day + "/" + month + "/" + year,
                        businessId: val.businessId,
                        context: val.contextName,
                        username: val.username,
                        task: val.task,
                        form: val.form,
                        proceso: val.proceso,
                        idTaskAssing: val.idTaskAssing
                    }
                });

                 setInbox(newInbox);
                 setIsOpen(false);
                 setTotalPages(1)
                 console.log(newInbox);
            })
            .catch(err => {
                console.log('err getInbox: ', err);
                setIsOpen(false);
            }); 
    }

    const getContext = async (idUser)=>{
        const MTDTenantUuid = localStorage.getItem("MTD-TenantUuid")
        const requestOptions = {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                "MTD-TenantUuid": MTDTenantUuid,
            }
        }
        
        const endpoint = `${REACT_APP_API}/user/get/contexts/`+ idUser

        //console.log(requestOptions)
        fetch(endpoint, requestOptions)
            .then(response => response.json())
            .then((res)=>{
                setContext(res.contexts)
                //console.log(res)
            })
    }

    const handleOpenNewCaso = () => {
        getContext(JSON.parse(localStorage.getItem('userInfo')).idUser)
        setOpenNewCaso(true);
    }

    const handleCloseNewCaso = () => {
        setOpenNewCaso(false);
    }

    const onChandgeBoxesFlows = (e) =>{
        console.log("desde context", e.target.value)
        setFlowsSelected(e.target.value)
    }

    const createNewOrder = async () => {
        setOpenNewCaso(false)
        console.log("para crear",flowsSelected)
        const MTDTenantUuid = localStorage.getItem("MTD-TenantUuid")

        const endpoint = `${REACT_APP_ENGINE_API}/instance/new`;

        const body = JSON.stringify({ "trxInstanceData": {"data": ""}})

        let requestOptions2 = {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                "x-api-key": 'Bb9iAt5yRI6Dsthfkh6zU7oPKq5ieLL348nQ7guu',
                "MTD-UserId": userInfo.idUser,
                "MTD-ContextUuid": flowsSelected.uuid,
                "MTD-ContextVersion": flowsSelected.version,
                "MTD-TenantUuid": MTDTenantUuid,
                },
            body
        };
        
        const requestOptions = requestOptions2;

        console.log("request para crear",requestOptions)
        setIsOpen(true);
        setModalChildren('loader');
        setIsClosable(false);

        fetch(endpoint, requestOptions)
            .then(res => res.json())
            .then(response => {
                console.log(response);
                setTimeout(() => {
                    getInbox();
                    setIsClosable(true);
                    setModalChildren('success');
                }, 2000);
            })
            .catch(err => {
                console.log('error createNewOrder: ', err);
        })
    }

    return (
        <Fragment >

            {/* <Button
                style = {{paddingLeft:"90%"}}
                startIcon = {<UpdateIcon/>}
                onClick = {() => {getInbox(1)}}> 
                <Trans count="3">Actualizar</Trans>
            </Button> */}

            <div style={ { width: (!isMobile) ? '100%' : null, marginTop: '2%', display: 'flex', alignItems: 'center', justifyContent: 'center' /*, height: '100vh'*/ } }>
                <Buttons.Primary style={ { marginBottom: '5px'} }
                    onClick={ handleOpenNewCaso }
                    //hidden={ userInfo.role != 'solicitante' }
                >
                    <Trans count="3">Nuevo-Caso</Trans>

                </Buttons.Primary>
                
                <Button
                style = {{marginLeft:"2%"}}
                startIcon = {<UpdateIcon/>}
                onClick = {() => {getInbox(1)}}> 
                <Trans count="3">Actualizar</Trans>
                </Button>
            
                { inbox.length < 0 ? <DownloadData getFullData={ getPdfData } /> : null }
                { inbox.length > 0 ?
                    <ReactTable
                        PaginationComponent={ Pagination }
                        data={ inbox }
                        columns={ getColumns({ handleTask, goTo }) }
                        noDataText={ "No hay procesos" }
                        style={ { textAlign: "center", width: "100%" } }
                        className="-striped -highlight"
                        manual

                        onFetchData={ (tableState, instance) => {
                            getInbox(tableState.page + 1);
                            setActualPage(tableState.page + 1);
                        } }
                        pages={ totalPages }
                        pageSize={ inbox.length > 10 ? 10 : inbox.length }
                    />
                    : ''
                }
                <Dialog open={openNewCaso} onClose={handleCloseNewCaso} fullWidth>
                    <DialogTitle>Seleccionar Contexto
                        <IconButton aria-label="close" style={{marginLeft:300}} onClick={handleCloseNewCaso} >
                            <CloseIcon />
                        </IconButton>
                    </DialogTitle>
                    <DialogContent>
                        <FormRow>
                        <InputLabel id="select-context-label">Flujo</InputLabel>
                        <Select 
                            labelId="select-context-label"
                            id="select-context"
                            value={flowsSelected}
                            fullWidth
                            onChange= {onChandgeBoxesFlows}
                        >
                            {context.map((detalle)=>{
                                return (<MenuItem value={detalle}>{detalle.nameWithVersion}</MenuItem>)
                                })
                            }
                        </Select>
                        </FormRow>
                    </DialogContent>
                    <DialogActions>
                        <Button autoFocus onClick={handleCloseNewCaso}>Cancelar</Button>
                        <Button autoFocus onClick={createNewOrder}>Crear</Button>
                    </DialogActions>
                </Dialog>
                <Modal show={ isOpen } onClose={ () => {
                    isClosable
                        ? setIsOpen(!isOpen)
                        : console.warn("worker on something...");
                    
                } }>

                    <Template name={ modalChildren } message={ modalMessage } />

                </Modal>
            </div>
            
        </Fragment>

    )
}

export default withTranslation() (InboxComponent);