contable 0.0.1

package/dist/client/render-components.tsx

@@ -0,0 +1,1117 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import {  
+    FocusOpts, RenderPrincipal, 
+    clsx,
+    ICON,
+    focusToId,
+    scrollToTop,
+    scrollToBottom,
+    InputTypes, totalsStyles, AltoImpresionStyle
+} from "./render-general";
+import { dispatchers, crearStore, ActionFormularioState, guardarPresupuesto, 
+    createInitialStatePresupuesto, guardarPedido, createInitialStatePedido, inicializarPedido } from "./redux-formulario";
+import {
+    AppBar, Badge, Button, ButtonGroup, Card, Checkbox, Chip, CircularProgress, CssBaseline, 
+    Dialog, DialogActions, DialogContent, DialogContentText, 
+    DialogTitle, Divider, Fab, FormControlLabel, Grid, IconButton, InputBase, InputLabel, 
+    Link, List, ListItem, ListItemIcon, ListItemText, Drawer, 
+    Menu, MenuItem, Paper, Popover,
+    Select, Snackbar, Step, Stepper, StepContent, StepLabel, 
+    SvgIcon, Switch, 
+    Table, TableBody, TableCell, TableHead, TableRow, TextField, Theme, Toolbar, Typography, Zoom,
+    useScrollTrigger,
+    createStyles, makeStyles, Icon, Popper, Grow, ClickAwayListener, MenuList, FormControl, TableContainer, withStyles, InputAdornment, InputProps
+} from "@material-ui/core";
+import { useState, useEffect, useRef } from "react";
+import { useSelector, useDispatch, Provider } from "react-redux"; 
+import * as likeAr from "like-ar";
+import {saveDepot} from "./render-handlers";
+import { Cliente, Producto, Item, State, DatosPresupuesto, IdCondIva, DatosPedido, DatosDesde, Presupuesto, Pedido, IdEstadoPresupuesto } from "./tipos";
+import { Store } from "redux";
+import { ActionsFrom } from "redux-typed-reducer";
+
+export const ESTADO_ACEPTADO_PRESUPUESTO: IdEstadoPresupuesto = "aceptado";
+var my=myOwn;
+
+export var generarPedidoDesdePresupuesto = (datosPresupuesto:DatosPresupuesto)=>{
+    let {cliente, items, presupuesto}  = datosPresupuesto;
+    let datosPedido:DatosPedido = {
+        cliente,
+        items,
+        pedido:{
+            presupuesto: presupuesto.presupuesto,
+            cliente: presupuesto.cliente,
+            descuento: presupuesto.descuento,
+            subtotal: presupuesto.subtotal,
+            total: presupuesto.total,
+            ...inicializarPedido()
+        }
+    }
+    return datosPedido
+}
+
+
+
+
+my.wScreens.presupuesto=async function(addrParams){
+    var datosPresupuesto: DatosPresupuesto|null=null;
+    //@ts-ignore existe
+    if(addrParams.presupuesto){
+        //@ts-ignore existe
+        datosPresupuesto = await my.ajax.presupuesto_cargar({presupuesto:addrParams.presupuesto});
+    }
+    var store = await crearStore({useSessionStorage:true, datosPresupuesto: datosPresupuesto || undefined}, createInitialStatePresupuesto);
+    desplegarPresupuesto(store);
+}
+
+my.wScreens.pedido=async function(addrParams){
+    var datosPedido: DatosPedido|null=null;
+    //@ts-ignore existe
+    if(addrParams.pedido){
+        //@ts-ignore existe
+        datosPedido = await my.ajax.pedido_cargar({pedido:addrParams.pedido});
+    //@ts-ignore existe
+    }else if(addrParams.presupuesto){
+        //@ts-ignore existe
+        var datosPresupuesto: DatosPresupuesto = await my.ajax.presupuesto_cargar({presupuesto:addrParams.presupuesto});
+        datosPedido = generarPedidoDesdePresupuesto(datosPresupuesto);
+    }
+    var store = await crearStore({useSessionStorage:true, datosPedido: datosPedido || undefined}, createInitialStatePedido);
+    desplegarPedido(store);
+}
+
+
+
+const useStyles = makeStyles((theme) => ({
+    appBar: {
+      position: 'relative',
+    },
+    layout: {
+      width: 'auto',
+      marginLeft: theme.spacing(2),
+      marginRight: theme.spacing(2),
+      [theme.breakpoints.up(600 + theme.spacing(2) * 2)]: {
+        //width: 600,
+        //marginLeft: 'auto',
+        //marginRight: 'auto',
+      },
+    },
+    paper: {
+      marginTop: theme.spacing(2),
+      marginBottom: theme.spacing(2),
+      padding: theme.spacing(2),
+      [theme.breakpoints.up(600 + theme.spacing(3) * 2)]: {
+        marginTop: theme.spacing(2),
+        marginBottom: theme.spacing(2),
+        padding: theme.spacing(3),
+      },
+    },
+    stepper: {
+      padding: theme.spacing(3, 0, 5),
+    },
+    buttons: {
+      display: 'flex',
+      justifyContent: 'flex-end',
+    },
+    button: {
+      marginTop: theme.spacing(1),
+      marginBottom: theme.spacing(1),
+    },
+  }));
+
+export function Autocompleter(props:{
+    rows:any[], 
+    value:any,
+    searchKey:string, 
+    searchType:'text'|'number', 
+    onSelection:(row:any)=>void
+    id: string,
+    className?:string,
+    label?: string,
+    name?: string,
+    disabled?:boolean
+    multiline?:boolean
+    matchInListConditionCallback?:(elem:Producto)=>boolean
+}){
+    const {rows, value, searchKey, searchType, onSelection, id, className, label, name, matchInListConditionCallback} = props;
+    const anchorRef = useRef<HTMLTableDataCellElement>(null);
+    const [filteredRows, setFilteredRows] = useState<any[]>([]);
+    const [open, setOpen] = useState<boolean>(false);
+    const [focusOnList, setFocusOnList] = useState<boolean>(false);
+    const [valorIngresado, setValorIngresado] = useState<string|null>(null);
+    useEffect(() => {
+        setValorIngresado(value)
+    },[value]);
+    useEffect(() => {
+        document.body.style.overflow=open?'hidden':'unset'
+    });
+    const focusToId = (id:string, opts:FocusOpts, cb?:(e:HTMLElement)=>void)=>{
+        var element=document.getElementById(id);
+        var padre=element;
+        while(padre && padre.className!='pregunta' && padre!=document.body) padre = padre.parentElement;
+        if(padre && padre.className=='pregunta') element=padre;
+        if(element){
+            if(cb){
+                cb(element);
+            }else{
+                element.focus();
+                if(opts.moveToElement){
+                    element.scrollIntoView();
+                    window.scroll({behavior:opts.moveBehavior||'auto', top:window.scrollY-100, left:0})
+                }
+            }
+        }
+    }
+    const checkIfValue = () => {
+        var result = rows.find((row)=>row[searchKey].toString().toLowerCase()==(valorIngresado||'').toLowerCase());
+        if(result){
+            setValorIngresado(result[searchKey]);
+            onSelection(result);
+            setOpen(false)   
+        }else{
+            setValorIngresado(null);
+            setFilteredRows([]);
+            onSelection(null);
+            setOpen(false);
+        }
+    }
+        
+    const handleClose = (event: React.MouseEvent<EventTarget>) => {
+        if (anchorRef.current && anchorRef.current.contains(event.target as HTMLElement)) {
+            return;
+        }
+        checkIfValue();
+        //y al borrar con backspace primero marca si no está marcado y después borra
+        focusToId(id, {moveToElement:false});
+    };
+
+    const handleSelection = (row:any)=>{
+        onSelection(row);
+        setValorIngresado(row[searchKey]);
+        setFilteredRows([]);
+        setOpen(false);
+        focusToId(id, {moveToElement:false});
+    }
+    return <>
+        <TextField
+            id={id}
+            className={className}
+            spellCheck={false}
+            autoCapitalize="off"
+            autoComplete="off"
+            autoCorrect="off"
+            multiline={props.multiline}
+            name={name}
+            label={label}
+            ref={anchorRef} 
+            fullWidth
+            type={searchType}
+            disabled={props.disabled || false}
+            value={valorIngresado || ''}
+            onChange={(event)=>{
+                let value = event.target.value;
+                setValorIngresado(event.target.value || null);
+                setFilteredRows(rows.filter((row)=>
+                    value.split(' ').every(palabraBuscada=>
+                        row[searchKey].toString().toLocaleLowerCase().includes(palabraBuscada.toLocaleLowerCase()) && 
+                            (matchInListConditionCallback?matchInListConditionCallback(row):true)
+                    )
+                ));
+                setOpen(event.target.value.length>1 && filteredRows.length <= 10)
+            }}
+            onFocus={(_event)=> {
+                setFocusOnList(false);
+                //setOpen(!!valorIngresado && valorIngresado.length>1);
+            }}
+            onBlur={()=>{
+                if(!open){
+                    checkIfValue()
+                }
+            }}
+            onKeyDown={(event)=>{
+                //down key
+                if(event.keyCode == 40){
+                    if(open){
+                        setFocusOnList(true)
+                    }
+                //enter key or tab key
+                }else if([13,9].includes(event.keyCode)){
+                    checkIfValue()
+                }
+            }}
+            aria-controls={open ? 'menu-list-grow' : undefined}
+            aria-haspopup="true"
+        />
+        
+        <Popper open={open} anchorEl={anchorRef.current} placement="bottom-start" transition>
+          {({ TransitionProps, placement }) => (
+            <Grow
+              {...TransitionProps}
+              style={{ transformOrigin: placement === 'bottom' ? 'left top' : 'center bottom' }}
+            >
+              <Paper>
+                <ClickAwayListener onClickAway={handleClose}>
+                  <MenuList autoFocusItem={focusOnList}  id="menu-list-grow">
+                    {
+                    filteredRows.length?
+                        filteredRows.map((row, i)=>
+                            <MenuItem 
+                                key={i} 
+                                value={i} 
+                                onClick={()=>handleSelection(row)}
+                                onKeyDown={(event)=>{
+                                    //esc key
+                                    if(event.keyCode == 27 && open){
+                                        setOpen(false)
+                                        focusToId(id, {moveToElement:false});
+                                    }
+                                    //tab
+                                    if(event.keyCode == 9){
+                                        handleSelection(row);
+                                    }
+                                }}
+                            >
+                                {row[searchKey]}
+                            </MenuItem>
+                        )
+                    :
+                    <MenuItem 
+                        key={-1} 
+                        disabled
+                    >
+                        Sin resultados
+                    </MenuItem>
+                    }
+                  </MenuList>
+                </ClickAwayListener>
+              </Paper>
+            </Grow>
+          )}
+        </Popper>
+    </>
+}
+export function TypedField(props:{
+    textAlign?:'left'|'right'|'center'|'justify'|'inherit'
+    value:string|number|null,
+    disabled?:boolean
+    type: 'text'|'number'|'date'|'time'|'tel',
+    id:string,
+    className?:string,
+    name?:string,
+    label?:string
+    onChange:(value:string|number|null)=>void
+
+    matchInList?:any[],
+    multiline?:boolean,
+    inputAdornment?:string
+    adornmentPosition?:'start'|'end'
+}){
+    const {value, type, id, className, name, label, onChange, matchInList, disabled, textAlign, inputAdornment, adornmentPosition} = props;
+    useEffect(() => {
+        setMyValue(value)
+    },[value]);
+    const [myValue, setMyValue] = useState(value);
+    var inputProps={
+       style: { textAlign: textAlign }
+       
+    }
+    var inputLabelProps={
+      shrink: true,
+    }
+    var adornmentProps:InputProps = {}
+    var adornment = inputAdornment?<InputAdornment position="end">{inputAdornment}</InputAdornment>:null;
+    adornmentPosition=='start'?
+        adornmentProps.startAdornment=adornment
+    :
+        adornmentProps.endAdornment=adornment
+    return <TextField
+        inputProps={inputProps}
+        spellCheck={false}
+        autoCapitalize="off"
+        autoComplete="off"
+        autoCorrect="off"
+        value={myValue==null?'':myValue}
+        disabled={disabled||false}
+        id={id}
+        multiline={props.multiline}
+        className={className}
+        name={name}
+        label={label}
+        type={type}
+        fullWidth
+        onChange={(event)=>{
+            var value = event.target.value;
+            setMyValue(value==''?null:value)
+        }}
+        onBlur={()=>{
+            var value = matchInList?matchInList.find((elem)=>elem==myValue):myValue;
+            setMyValue(value);
+            onChange(myValue)
+        }}
+        InputLabelProps={inputLabelProps}
+        InputProps={adornmentProps}
+    />
+}
+
+export function ClienteComponent(props:{editando:boolean, datosDesde:DatosDesde}){
+    const {datosDesde} = props;
+    const {clientes, condicionesIva, clienteActual} = useSelector((estado:State)=>({clientes:estado.estructura.clientes, condicionesIva:estado.estructura.condicionesIva, clienteActual:estado[datosDesde].cliente}));
+    const clientesArr = likeAr(clientes).array();
+    const dispatch = useDispatch();
+    const condicionesIvaArr = likeAr(condicionesIva).array();
+    const classes = useStyles();
+    return <Paper className={classes.paper}>
+        <Grid container spacing={3}>
+            <Grid item xs={12} sm={4} md={1}>
+                <TypedField
+                    value={clienteActual.cliente}
+                    type="number"
+                    id="cliente"
+                    name="cliente"
+                    label="Cliente"
+                    matchInList={clientesArr.map((cliente)=>cliente.cliente)}
+                    disabled={!props.editando} 
+                    onChange={(value)=>{
+                        var searchResult=null;
+                        if(value){
+                            searchResult = clientesArr.find((cliente)=>cliente.cliente==value) || null
+                        }
+                        dispatch(dispatchers.SET_CLIENTE({cliente:{...searchResult}, datosDesde}))
+                    }}
+                />
+            </Grid>
+            <Grid item xs={12} sm={8} md={5}>
+                <Autocompleter 
+                    rows={clientesArr}
+                    value={clienteActual.razon_social || ''}
+                    id="razon-social"
+                    name="razon-social"
+                    label="Razon social"
+                    searchKey="razon_social"
+                    searchType="text"
+                    disabled={!props.editando} 
+                    onSelection={(clienteSeleccionado:Cliente)=>dispatch(dispatchers.SET_CLIENTE({cliente:{...clienteSeleccionado}, datosDesde}))}
+                />
+            </Grid>
+            <Grid item xs={12} sm={6} md={3}>
+                <FormControl fullWidth>
+                    <InputLabel id="condicion_iva_label">Cond. IVA</InputLabel>
+                    <Select
+                        disabled={true}
+                        labelId="condicion_iva_label"
+                        id="condicion_iva"
+                        value={clienteActual.condicion_iva || ''}
+                        onChange={(event)=>{
+                            var condicion_iva = event.target.value as IdCondIva||null;
+                            dispatch(dispatchers.SET_CLIENTE({cliente:{...clienteActual, condicion_iva}, datosDesde}))
+                        }}
+                    >
+                        {condicionesIvaArr.map((condicionIva)=>
+                            <MenuItem key={condicionIva.condicion} value={condicionIva.condicion}>{condicionIva.nombre}</MenuItem>
+                        )}
+                    </Select>
+                </FormControl>
+            </Grid>
+            <Grid item xs={12} sm={6} md={3}>
+                <TypedField
+                    type="number"
+                    disabled={true}
+                    value={clienteActual.cuit_dni}
+                    id="cuit_dni"
+                    label="CUIT/DNI"
+                    name="cuit_dni"
+                    onChange={
+                        (value)=>dispatch(dispatchers.SET_CLIENTE({cliente:{...clienteActual, cuit_dni:Number(value)}, datosDesde})
+                    )}
+                />
+            </Grid>
+        </Grid>
+    </Paper>
+}
+
+export function EstadoPresupuesto(props:{editando:boolean}){
+    const {presupuesto, estadosPresupuesto} = useSelector((estado:State)=>({presupuesto: estado.datosPresupuesto.presupuesto, estadosPresupuesto: estado.estructura.estadosPresupuesto}));
+    const dispatch = useDispatch();
+    const classes = useStyles();
+    return <Paper className={classes.paper}> 
+        <Grid container spacing={3}>
+            <Grid item xs={12} sm={4}>
+                <FormControl fullWidth>
+                    <InputLabel id="estado_label">Estado</InputLabel>
+                    <Select
+                        labelId="estado_label"
+                        id="estado"
+                        value={presupuesto.estado || ''}
+                        disabled={true}
+                        onChange={(event)=>{
+                            var estado = event.target.value as string||null;
+                            dispatch(dispatchers.SET_CAMPO_PRESUPUESTO({campo:"estado", valor:estado}))
+                        }}
+                    >
+                        {estadosPresupuesto
+                            .map((estado)=>
+                                <MenuItem key={estado.estado} value={estado.estado}>{estado.nombre}</MenuItem>
+                            )
+                        }
+                    </Select>
+                </FormControl>
+            </Grid>
+            <Grid item xs={12} sm={4}>
+                <TypedField
+                    type="date"
+                    value={presupuesto.fecha}
+                    id="fecha"
+                    label="fecha"
+                    name="fecha"
+                    disabled={!props.editando}
+                    onChange={
+                        ((value)=>dispatch(dispatchers.SET_CAMPO_PRESUPUESTO({campo:"fecha", valor:value}))
+                    )}
+                />
+            </Grid>
+            <Grid item xs={12} sm={4}>
+                <TypedField
+                    type="date"
+                    value={presupuesto.valido_hasta}
+                    id="valido_hasta"
+                    label="valido hasta"
+                    name="valido_hasta"
+                    disabled={!props.editando}
+                    onChange={
+                        ((value)=>dispatch(dispatchers.SET_CAMPO_PRESUPUESTO({campo:"valido_hasta", valor:value}))
+                    )}
+                />
+            </Grid>
+        </Grid>
+    </Paper>
+}
+
+export function EstadoPedido(props:{editando:boolean}){
+    const {pedido, estadosPedido} = useSelector((estado:State)=>({pedido: estado.datosPedido.pedido, estadosPedido: estado.estructura.estadosPedido}));
+    const dispatch = useDispatch();
+    const classes = useStyles();
+    return <Paper className={classes.paper}> 
+        <Grid container spacing={3}>
+            <Grid item xs={12} sm={4}>
+                <FormControl fullWidth>
+                    <InputLabel id="estado_label">Estado</InputLabel>
+                    <Select
+                        labelId="estado_label"
+                        id="estado"
+                        value={pedido.estado || ''}
+                        disabled={!props.editando}
+                        onChange={(event)=>{
+                            var estado = event.target.value as string||null;
+                            dispatch(dispatchers.SET_CAMPO_PEDIDO({campo:"estado", valor:estado}))
+                        }}
+                    >
+                        {estadosPedido.map((estado)=>
+                            <MenuItem key={estado.estado} value={estado.estado}>{estado.nombre}</MenuItem>
+                        )}
+                    </Select>
+                </FormControl>
+            </Grid>
+            <Grid item xs={12} sm={4}>
+                <TypedField
+                    type="date"
+                    value={pedido.fecha}
+                    id="fecha"
+                    label="fecha"
+                    name="fecha"
+                    disabled={!props.editando}
+                    onChange={
+                        ((value)=>dispatch(dispatchers.SET_CAMPO_PEDIDO({campo:"fecha", valor:value}))
+                    )}
+                />
+            </Grid>
+            <Grid item xs={12} sm={4}>
+                <TypedField
+                    type="date"
+                    value={pedido.fecha_entrega}
+                    id="fecha_entrega"
+                    label="fecha entrega"
+                    name="fecha_entrega"
+                    disabled={!props.editando}
+                    onChange={
+                        ((value)=>dispatch(dispatchers.SET_CAMPO_PEDIDO({campo:"fecha_entrega", valor:value}))
+                    )}
+                />
+            </Grid>
+        </Grid>
+    </Paper>
+}
+export function ObservacionesPedido(props:{editando:boolean}){
+    const {pedido} = useSelector((estado:State)=>({pedido: estado.datosPedido.pedido}));
+    const dispatch = useDispatch();
+    const classes = useStyles();
+    return <Paper className={classes.paper}> 
+        <Grid container spacing={3}>
+            <Grid item xs={12} sm={12}>
+                <TypedField
+                    type="text"
+                    disabled={!props.editando}
+                    value={pedido.observaciones}
+                    id="observaciones"
+                    label="Observaciones"
+                    name="observaciones"
+                    onChange={
+                        (value)=>dispatch(dispatchers.SET_CAMPO_PEDIDO({campo:"observaciones", valor:value}))
+                    }
+                />
+            </Grid>
+        </Grid>
+    </Paper>
+}
+
+export function Items(props:{
+    editando:boolean,
+    conDescuentoEnItems:boolean,
+    conOpciones: boolean,
+    datosDesde:DatosDesde
+    presupuestoOPedido:Presupuesto|Pedido
+}){
+    const {conDescuentoEnItems, conOpciones, datosDesde, presupuestoOPedido} = props;
+    const {items, cliente} = useSelector((estado:State)=>estado[datosDesde]);
+    const classes = useStyles();
+    const dispatch = useDispatch();
+    const handleAdd = ()=>{
+        dispatch(dispatchers.ADD_ITEM({datosDesde}))
+        setTimeout(()=>focusToId("cantidad_"+(items.length-1).toString(),{moveToElement:false}),100)
+    }
+    return <TableContainer component={Paper}>
+        <Table aria-label="customized table" id="items-table">
+            <TableHead>
+                <TableRow>
+                    <StyledTableCell style={{width:"50px"}}className="not-print">Items</StyledTableCell>
+                    <StyledTableCell style={{width:"55px"}}>Cantidad</StyledTableCell>
+                    <StyledTableCell style={{width:"60px"}}>Cod prod</StyledTableCell>
+                    <StyledTableCell className="not-print">Nombre prod</StyledTableCell>
+                    <StyledTableCell>Descripcion</StyledTableCell>
+                    <StyledTableCell style={{width:"80px"}}align="right">P unitario</StyledTableCell>
+                    {conDescuentoEnItems?<StyledTableCell style={{width:"40px"}}align="right">Dto</StyledTableCell>:null}
+                    {conDescuentoEnItems?<StyledTableCell style={{width:"50px"}}align="right">Bonif</StyledTableCell>:null}
+                    <StyledTableCell style={{width:"80px"}}align="right">Total</StyledTableCell>
+                </TableRow>
+            </TableHead>
+            <TableBody>
+                {items.map((item, index) => (
+                    <ItemP 
+                        key={index} 
+                        index={index} 
+                        item={item}
+                        editando={props.editando} 
+                        cliente={cliente}
+                        conDescuentoEnItems={conDescuentoEnItems}
+                        datosDesde={datosDesde}
+                    />
+                ))}
+                <TableRow>
+                    <StyledTableCell className="not-print">
+                        <Button
+                            size="small"
+                            variant="outlined"
+                            color="primary"
+                            onClick={handleAdd}
+                            disabled={!props.editando} 
+                            onKeyDown={(event)=>{
+                                //enter
+                                if([13].includes(event.keyCode)){
+                                    handleAdd()
+                                }
+                            }}
+                            className={classes.button}
+                        >
+                            <ICON.Add/>
+                        </Button>
+                    </StyledTableCell>
+                    <StyledTableCell className="not-print"></StyledTableCell>
+                    {conDescuentoEnItems?<StyledTableCell colSpan={2}></StyledTableCell>:null}
+                    {conOpciones?
+                        <StyledTableCell colSpan={2} align="right"></StyledTableCell>
+                        :
+                        <>
+                            <StyledTableCell colSpan={4} align="right">subtotal $</StyledTableCell>
+                            <StyledTableCell align="right" style={totalsStyles}>{presupuestoOPedido.subtotal}</StyledTableCell>
+                        </>
+                    }
+                </TableRow>
+                {conOpciones?null:<>
+                    <TableRow>
+                        <StyledTableCell className="not-print"></StyledTableCell>
+                        <StyledTableCell className="not-print"></StyledTableCell>
+                        {conDescuentoEnItems?<StyledTableCell colSpan={2}></StyledTableCell>:null}
+                        <StyledTableCell align="right" colSpan={4}>descuento general $</StyledTableCell>
+                        <StyledTableCell align="right">
+                            <TypedField
+                                textAlign="right"
+                                type="number"
+                                disabled={!props.editando} 
+                                value={presupuestoOPedido.descuento}
+                                id="descuento"
+                                name="descuento"
+                                onChange={
+                                    (value)=>
+                                        datosDesde=='datosPresupuesto'?
+                                            dispatch(dispatchers.SET_DESCUENTO_PRESUPUESTO({descuento:Number(value)}))
+                                        :
+                                            dispatch(dispatchers.SET_DESCUENTO_PEDIDO({descuento:Number(value)}))
+                                }
+                            />
+                        </StyledTableCell>
+                    </TableRow>
+                    <TableRow>
+                        <StyledTableCell className="not-print"></StyledTableCell>
+                        <StyledTableCell className="not-print"></StyledTableCell>
+                        {conDescuentoEnItems?<StyledTableCell colSpan={3}></StyledTableCell>:null}
+                        <StyledTableCell align="right" colSpan={conDescuentoEnItems?3:4}>total $</StyledTableCell>
+                        <StyledTableCell align="right" style={totalsStyles}>{presupuestoOPedido.total}</StyledTableCell>
+                    </TableRow>
+                </>}
+            </TableBody>
+        </Table>
+    </TableContainer>
+}
+
+export function ItemP(props:{item:Item, index:number, editando:boolean, conDescuentoEnItems:boolean, cliente: Cliente, datosDesde:DatosDesde}){
+    const {productos} = useSelector((estado:State)=>estado.estructura);
+    const productosArr = likeAr(productos).array();
+    const dispatch = useDispatch();
+    const {item, index, conDescuentoEnItems, cliente, datosDesde}=props;
+    const classes = useStyles();
+    const EDICION_LIBRE = item.producto==0;
+    return <Grow in={true}>
+        <StyledTableRow key={item.producto}>
+            <StyledTableCell className="not-print">
+                <Button
+                    id={"agregar_" + index.toString()}
+                    size="small"
+                    variant="outlined"
+                    disabled={!props.editando}
+                    color="secondary"
+                    onClick={()=>{
+                        dispatch(dispatchers.REMOVE_ITEM({index: index, datosDesde}))
+                    }}
+                    className={classes.button}
+                >
+                    <ICON.DeleteOutline/>
+                </Button>
+            </StyledTableCell>
+            <StyledTableCell align="right">
+                <TypedField
+                    id={"cantidad_" + index.toString()}
+                    type="number"
+                    value={item.cantidad || null}
+                    name="cantidad"
+                    disabled={!props.editando}
+                    onChange={
+                        (value)=>dispatch(dispatchers.SET_CANTIDAD_ITEM({index,cantidad:Number(value), datosDesde}))
+                    }
+                />
+            </StyledTableCell>
+            <StyledTableCell align="right">
+                <TypedField
+                    value={item.producto || null}
+                    id={"poroducto_" + index.toString()}
+                    name="producto"
+                    type="number"
+                    disabled={!props.editando}
+                    matchInList={EDICION_LIBRE?undefined:productosArr.map((producto)=>producto.producto)}
+                    onChange={(value)=>{
+                        if(value=='0'){
+                            dispatch(dispatchers.SET_FIELD_CUSTOM_ITEM({index, campo:'producto',valor:value, datosDesde}))
+                        }else{
+                            var searchResult=null;
+                            if(value){
+                                searchResult = productosArr.find((producto)=>producto.producto==value) || null
+                            }
+                            dispatch(dispatchers.SET_PRODUCTO_ITEM({index, producto:searchResult, datosDesde}))
+                        }
+                    }}
+                />
+            </StyledTableCell>
+            <StyledTableCell className="not-print">
+                <AltoImpresionStyle charsPerLine={conDescuentoEnItems?60:75} componentId={"nombre-producto_" + index.toString()} lineHeight={30} value={item?.nombre || ''}/>
+                {
+                    React.createElement(EDICION_LIBRE?TypedField:Autocompleter, {
+                        ...{
+                            value:item?.nombre || '',
+                            id:"nombre-producto_" + index.toString(),
+                            name:"nombre-producto",
+                            disabled:!props.editando,
+                            multiline:true,
+                            matchInListConditionCallback:(producto: Producto)=>
+                                cliente.cliente == producto.cliente || producto.cliente == null
+                            
+                        },...(EDICION_LIBRE?{
+                            onChange:(value: string)=>
+                                dispatch(dispatchers.SET_FIELD_CUSTOM_ITEM({index, campo:'nombre',valor:value, datosDesde}))
+                        }:{
+                            rows: productosArr,
+                            searchKey:"nombre",
+                            searchType:"text",
+                            onSelection:
+                                (productoSeleccionado:Producto|null)=>
+                                    dispatch(dispatchers.SET_PRODUCTO_ITEM({index, producto:productoSeleccionado, datosDesde}))
+                        })
+                    })
+                }
+            </StyledTableCell>
+            <StyledTableCell>
+                <AltoImpresionStyle charsPerLine={conDescuentoEnItems?60:75} componentId={"descripcion-producto_" + index.toString()} lineHeight={30} value={item?.descripcion || ''}/>
+                {
+                    React.createElement(EDICION_LIBRE?TypedField:Autocompleter, {
+                        ...{
+                            value:item?.descripcion || '',
+                            id:"descripcion-producto_" + index.toString(),
+                            name:"descripcion-producto",
+                            disabled:!props.editando,
+                            multiline:true,
+                        },...(EDICION_LIBRE?{
+                            onChange:(value:string)=>
+                                dispatch(dispatchers.SET_FIELD_CUSTOM_ITEM({index, campo:'descripcion',valor:value, datosDesde}))
+                        }:{
+                            rows: productosArr,
+                            searchKey:"descripcion",
+                            searchType:"text",
+                            onSelection:
+                                (productoSeleccionado:Producto|null)=>
+                                    dispatch(dispatchers.SET_PRODUCTO_ITEM({index, producto:productoSeleccionado, datosDesde}))
+                        })
+                    })
+                }
+            </StyledTableCell>
+            <StyledTableCell align="right">{
+                EDICION_LIBRE?
+                    <TypedField
+                        textAlign="right"
+                        id={"precio_unitario" + index.toString()}
+                        type="number"
+                        value={item.precio_unitario || null}
+                        name="precio_unitario"
+                        disabled={!props.editando}
+                        onChange={
+                            (value)=>dispatch(dispatchers.SET_FIELD_CUSTOM_ITEM({index, campo:'precio_unitario',valor:value, datosDesde}))
+                        }
+                    />
+                :
+                    item.precio_unitario?.toString()}
+            </StyledTableCell>
+            {conDescuentoEnItems?
+                <>
+                    <StyledTableCell align="right">
+                        <TypedField
+                            textAlign="right"
+                            value={item.porcentaje_descuento|| 0}
+                            id={"porcentaje_descuento_" + index.toString()}
+                            name="porcentaje_descuento"
+                            type="number"
+                            disabled={!props.editando}
+                            onChange={(value)=>{
+                                dispatch(dispatchers.SET_DESCUENTO_ITEM({index, porcentaje:Number(value), datosDesde}))
+                            }}
+                            inputAdornment="%"
+                        />
+                    </StyledTableCell>
+                    <StyledTableCell align="right">
+                        {item.descuento}
+                    </StyledTableCell>
+                </>
+            :null}
+            <StyledTableCell align="right" style={totalsStyles}>{item.total?.toString()}</StyledTableCell>
+        </StyledTableRow>
+    </Grow>
+}
+
+const StyledTableCell = withStyles((theme: Theme) =>
+  createStyles({
+    head: {
+      backgroundColor: theme.palette.common.black,
+      color: theme.palette.common.white,
+    },
+    body: {
+      fontSize: 14,
+      padding: 8
+    },
+  }),
+)(TableCell);
+
+const StyledTableRow = withStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      '&:nth-of-type(odd)': {
+        backgroundColor: theme.palette.action.hover,
+      },
+    },
+  }),
+)(TableRow);
+
+export function PresupuestoComponent(_props:{}){
+    const {cliente, presupuesto, items} = useSelector((estado:State)=>(estado.datosPresupuesto));
+    const {estadosPresupuesto} = useSelector((estado:State)=>({estadosPresupuesto:estado.estructura.estadosPresupuesto}));
+    const {parametros} = useSelector((estado:State)=>(estado.estructura));
+    const classes = useStyles();
+    const dispatch = useDispatch();
+    const [open, setOpen] = useState(false);
+    const esNuevo = !(presupuesto.presupuesto);
+    const disabled = !estadosPresupuesto.find((estado)=>estado.estado == presupuesto.estado)?.permite_editar;
+    const [editando, setEditando] = useState(esNuevo);
+    const [snackBarMessage, setSnackBarMessage] = useState('');
+    const hayDescuentosIngresados = items.some((item)=>item.descuento != 0);
+    const handleClose = (_event: React.SyntheticEvent | React.MouseEvent, reason?: string) => {
+        if (reason === 'clickaway') {
+          return;
+        }
+    
+        setOpen(false);
+      };
+    return <main className={classes.layout} id="presupuesto">
+        <img id="banner-superior-impresion" className="only-for-print" src="img/bannersuperior.png" alt="bannersuperior.png"/>
+        <Grid container alignItems="flex-start" justify="flex-start" direction="row">
+            <h2>{presupuesto.presupuesto?`Presupuesto Nº ${presupuesto.presupuesto}`:`Nuevo presupuesto`}</h2>
+        </Grid>
+        <Grid container alignItems="flex-start" justify="flex-end" direction="row">
+            <Button
+                variant="contained"
+                color={editando?"secondary":"primary"}
+                onClick={()=>{
+                    setEditando(!editando)
+                }}
+                disabled={disabled}
+                className={classes.button}
+            >
+                {editando?
+                    <ICON.Cancel/>
+                :
+                    <ICON.Edit/>
+                }
+            </Button>
+            <Button
+                variant="contained"
+                disabled={editando}
+                onClick={()=>{
+                    window.print()
+                }}
+                className={classes.button}
+            >
+                <ICON.Print/>
+            </Button>
+        </Grid>
+        <ClienteComponent editando={editando} datosDesde="datosPresupuesto"/>
+        <EstadoPresupuesto editando={editando}/>
+        <Items 
+            editando={editando}
+            conDescuentoEnItems={presupuesto.con_descuento_en_items}
+            conOpciones={presupuesto.con_opciones}
+            datosDesde='datosPresupuesto'
+            presupuestoOPedido={presupuesto}
+        />
+        <Grid container className="not-print" alignItems="flex-start" justify="flex-end" direction="row">
+            <FormControlLabel
+                control={
+                    <Checkbox
+                        checked={presupuesto.con_opciones}
+                        onChange={
+                            ((event: React.ChangeEvent<HTMLInputElement>)=>
+                                dispatch(dispatchers.SET_CAMPO_PRESUPUESTO({campo:"con_opciones", valor:event.target.checked}))
+                        )}
+                        disabled={!editando}
+                        name="con_opciones"
+                        color="primary"
+                    />
+                }
+                labelPlacement="start"
+                label="ocultar totales"
+            />
+        </Grid>
+        <Grid container className="not-print" alignItems="flex-start" justify="flex-end" direction="row">
+            <FormControlLabel
+                control={
+                    <Checkbox
+                        checked={presupuesto.con_descuento_en_items}
+                        onChange={
+                            ((event: React.ChangeEvent<HTMLInputElement>)=>
+                                dispatch(dispatchers.SET_CAMPO_PRESUPUESTO({campo:"con_descuento_en_items", valor:event.target.checked}))
+                        )}
+                        disabled={!editando || hayDescuentosIngresados}
+                        name="con_descuento_en_items"
+                        color="primary"
+                    />
+                }
+                labelPlacement="start"
+                label="descuento en items"
+            />
+        </Grid>
+        <Grid container alignItems="flex-start" justify="flex-end" direction="row">
+            <Button
+                variant="contained"
+                color="primary"
+                disabled={!editando}
+                onClick={async ()=>{
+                    try{
+                        let result = await guardarPresupuesto(cliente, presupuesto, items);
+                        dispatch(dispatchers.SET_CAMPO_PRESUPUESTO({campo:"presupuesto", valor:result.presupuesto}))
+                        setSnackBarMessage(`Presupuesto ${result.presupuesto} guardado`)
+                        setOpen(true);
+                        setEditando(false);
+                    }catch(err){
+                        setSnackBarMessage(`Error al guardar el presupuesto. ${err.message}`)
+                        setOpen(true);
+                    }
+                }}
+                className={classes.button}
+            >
+                <ICON.Save/>
+            </Button>
+            <Snackbar
+                anchorOrigin={{
+                vertical: 'bottom',
+                horizontal: 'left',
+                }}
+                open={open}
+                autoHideDuration={6000}
+                onClose={handleClose}
+                message={snackBarMessage}
+                action={
+                    <React.Fragment>
+                        <IconButton size="small" aria-label="close" color="inherit" onClick={handleClose}>
+                            <ICON.Close/>
+                        </IconButton>
+                    </React.Fragment>
+                }
+            />
+        </Grid>
+        {parametros?.legales_presupuesto?
+            <Paper className={classes.paper+" legales"}> 
+                <p>{parametros.legales_presupuesto}</p>
+            </Paper>
+        :
+            null
+        }
+    </main>
+}
+
+export function PedidoComponent(_props:{}){
+    const {cliente, pedido, items} = useSelector((estado:State)=>(estado.datosPedido));
+    const classes = useStyles();
+    const dispatch = useDispatch();
+    const [open, setOpen] = useState(false);
+    const esNuevo = !(pedido.pedido);
+    const [editando, setEditando] = useState(esNuevo);
+    const [snackBarMessage, setSnackBarMessage] = useState('');
+    const handleClose = (_event: React.SyntheticEvent | React.MouseEvent, reason?: string) => {
+        if (reason === 'clickaway') {
+          return;
+        }
+    
+        setOpen(false);
+      };
+    return <main className={classes.layout} id="pedido">
+        <img id="banner-superior-impresion" className="only-for-print" src="img/bannersuperior.png" alt="bannersuperior.png"/>
+        <Grid container alignItems="flex-start" justify="flex-start" direction="row">
+            <h2>{pedido.pedido?`Pedido Nº ${pedido.pedido}`:`Nuevo pedido`}</h2>
+        </Grid>
+        <Grid container alignItems="flex-start" justify="flex-end" direction="row">
+            <Button
+                variant="contained"
+                color={editando?"secondary":"primary"}
+                onClick={()=>{
+                    setEditando(!editando)
+                }}
+                className={classes.button}
+            >
+                {editando?
+                    <ICON.Cancel/>
+                :
+                    <ICON.Edit/>
+                }
+            </Button>
+            <Button
+                variant="contained"
+                disabled={editando}
+                onClick={()=>{
+                    window.print()
+                }}
+                className={classes.button}
+            >
+                <ICON.Print/>
+            </Button>
+        </Grid>
+        <ClienteComponent editando={editando} datosDesde="datosPedido"/>
+        <EstadoPedido editando={editando}/>
+        <Items 
+            editando={editando}
+            conDescuentoEnItems={true}
+            conOpciones={false}
+            datosDesde='datosPedido'
+            presupuestoOPedido={pedido}
+        />
+        <ObservacionesPedido editando={editando}/>
+        <Grid container alignItems="flex-start" justify="flex-end" direction="row">
+            <Button
+                variant="contained"
+                color="primary"
+                disabled={!editando}
+                onClick={async ()=>{
+                    try{
+                        let result = await guardarPedido(cliente, pedido, items);
+                        dispatch(dispatchers.SET_CAMPO_PEDIDO({campo:"pedido", valor:result.pedido}))
+                        setSnackBarMessage(`Pedido ${result.pedido} guardado`)
+                        setOpen(true);
+                        setEditando(false);
+                    }catch(err){
+                        setSnackBarMessage(`Error al guardar el pedido. ${err.message}`)
+                        setOpen(true);
+                    }
+                }}
+                className={classes.button}
+            >
+                <ICON.Save/>
+            </Button>
+            <Snackbar
+                anchorOrigin={{
+                vertical: 'bottom',
+                horizontal: 'left',
+                }}
+                open={open}
+                autoHideDuration={6000}
+                onClose={handleClose}
+                message={snackBarMessage}
+                action={
+                    <React.Fragment>
+                        <IconButton size="small" aria-label="close" color="inherit" onClick={handleClose}>
+                            <ICON.Close/>
+                        </IconButton>
+                    </React.Fragment>
+                }
+            />
+        </Grid>
+    </main>
+}
+
+export async function desplegarPresupuesto(store:Store<State,ActionFormularioState>){
+    ReactDOM.render(
+        <Provider store={store}>
+            <PresupuestoComponent/>
+        </Provider>
+        ,
+        document.getElementById('main_layout')
+    )
+}
+
+export async function desplegarPedido(store:Store<State,ActionFormularioState>){
+    ReactDOM.render(
+        <Provider store={store}>
+            <PedidoComponent/>
+        </Provider>
+        ,
+        document.getElementById('main_layout')
+    )
+}
+
+if(typeof window !== 'undefined'){
+    // @ts-ignore para hacerlo
+    window.desplegarPresupuesto = desplegarPresupuesto;
+    // @ts-ignore para hacerlo
+    window.desplegarPedido = desplegarPedido;
+}