Skip to content

Instantly share code, notes, and snippets.

@alsantos123

alsantos123/Mlima.tsx

Created April 11, 2021 18:53
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save alsantos123/e764a574fa769e61d58d773060320ec0 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save alsantos123/e764a574fa769e61d58d773060320ec0 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Mlima.tsx
import React from 'react';
import { useForm } from "react-hook-form";
import { Dialog, DialogTitle, DialogContent, TextField, DialogContentText, Typography, DialogActions, Button, FormControl, FormLabel, FormGroup, makeStyles, Theme, createStyles, Box, CircularProgress, FormControlLabel, Checkbox } from '@material-ui/core';
import dynamic from 'next/dynamic';
const InputMak = dynamic(
() => import('../../util/InputMak'),
{ loading: () => <p>...</p>, ssr: false }
);
import AppContexto from '../../../servicos/app-contexto/AppContexto';
import {ReactContext} from '../../../../pages/_app';
import CmsAPI from '../../../servicos/ecommerce/CmsAPI';
import WaiverAPI from '../../../servicos/ecommerce/WaiverAPI';
import { WAIVER_TIPO, IDDB_Waiver } from 'layer-ecommerce/core/src/Model/Waiver';
import { DDB_OrdemItem, IDDB_OrdemItem } from 'layer-ecommerce/core/src/Model/Ordem';
interface IProps
{
OrdemItem: IDDB_OrdemItem|null,
callbackClose: (waiverId?: string) => void
};
export default function WaiverSaltoDuploForm( props: IProps )
{
///
/// AppContexto
///
const appContexto: AppContexto|null = React.useContext(ReactContext);
///
/// States
///
const [termo, setTermo] = React.useState<string|null>(null);
const [enviouErro, setEnviouErro] = React.useState<string|null>(null);
const [enviando, setEnviando] = React.useState(false);
const [atleta1FAll, setAtleta1FAll] = React.useState(true);
///
/// Privado
///
const _fnInit = async () =>
{
if(!props.OrdemItem) throw "Ordem Item null";
const item = props.OrdemItem;
setTermo( await CmsAPI.Termo(item.OI_WAIVER_VID || 96) );
}
///
/// Effects
///
React.useEffect(() => {
_fnInit();
}, []);
///
/// Form
///
const refForm = React.useRef(null);
const { register, handleSubmit, watch, errors } = useForm<IDDB_Waiver>({mode: "all"});
///
/// Eventos
///
const onSubmit = async (data: IDDB_Waiver) =>
{
let blnSucesso = false;
let postRet = null;
setEnviando(true);
// console.log(data);
try
{
data.ORDEM_ITEM_ID = props.OrdemItem?.SK; // relacionamento com a Ordem Item.
const idTokenCognito = (await appContexto?.user.EhLogado())?.getIdToken().getJwtToken() || "";
postRet = await WaiverAPI.POST(data, idTokenCognito)
console.log(postRet);
if(postRet.HttpCode !== 200) throw postRet.Post?.Erro;
blnSucesso = true;
}
catch (e)
{
console.error(e);
setEnviouErro(e);
}
finally
{
setEnviando(false);
if(blnSucesso)
{
props.callbackClose(postRet?.Post?.Data);
}
}
};
const fnBtnConcordo = () =>
{
handleSubmit( onSubmit )();
};
///
/// Render
///
const classes = useStyles();
return (
<Dialog open={true} onClose={fnBtnConcordo} aria-labelledby="form-dialog-title">
<DialogTitle style={{paddingBottom: 0}}>Formulário de Responsabilidade</DialogTitle>
<DialogContent>
<form onSubmit={handleSubmit(onSubmit)} id="formWaiverSaltoDuplo">
{enviouErro ?
<><Box textAlign="center"><Typography variant="body2" color="error">{enviouErro}</Typography></Box></>
: null}
{props.OrdemItem?.OI_WAIVER_TIPO === WAIVER_TIPO.WAIVER_ATLETA ?
<FormGroup row>
<FormControlLabel
control={<Checkbox inputRef={register} name="OIW_WAIVER_1FALL" />}
label="Usar esse preenchimento para todos os slots"
checked={atleta1FAll}
onChange={() => { setAtleta1FAll(!atleta1FAll) }}
/>
</FormGroup>
: null}
{props.OrdemItem?.OI_WAIVER_TIPO === WAIVER_TIPO.WAIVER_ATLETA ?
<FormControl component="fieldset" fullWidth className={classes.grupos}>
<FormLabel component="legend">Credencial Federação</FormLabel>
<FormGroup row>
<TextField
type="text" autoFocus label="Entidade" name="OIW_ATLETA_ENTIDADE"
InputLabelProps={{
shrink: true,
}}
inputProps={{
maxLength: 10
}}
margin="dense"
fullWidth
helperText="CBPQ / ABPQ / USPA / FAI"
inputRef={register({required: true})}
error={errors.OIW_ATLETA_ENTIDADE ? true : false}
required
/>
<TextField
type="text" label="Categoria" name="OIW_ATLETA_CAT"
InputLabelProps={{
shrink: true,
}}
inputProps={{
maxLength: 5
}}
margin="dense"
fullWidth
inputRef={register({required: true})}
error={errors.OIW_ATLETA_CAT ? true : false}
required
/>
<TextField
type="text" label="Qtd. Saltos" name="OIW_ATLETA_SALTOS_QTD"
InputLabelProps={{
shrink: true,
}}
inputProps={{
maxLength: 5
}}
margin="dense"
fullWidth
inputRef={register({required: false})}
error={errors.OIW_ATLETA_QTD_SALTOS ? true : false}
required
/>
</FormGroup>
</FormControl>
: null}
<FormControl component="fieldset" fullWidth className={classes.grupos}>
<FormLabel component="legend">Dados Pessoais</FormLabel>
<FormGroup>
<TextField
type="text" label="Nome" name="OIW_NOME"
autoFocus={props.OrdemItem?.OI_WAIVER_TIPO === WAIVER_TIPO.WAIVER_ATLETA ? false : true}
InputLabelProps={{
shrink: true,
}}
inputProps={{
maxLength: 35
}}
margin="dense"
fullWidth
inputRef={register({required: true})}
error={errors.OIW_NOME ? true : false}
required
/>
<TextField
type="text" label="CPF" name="OIW_CPF"
InputLabelProps={{
shrink: true,
}}
inputProps={{
maxLength: 14,
className: "cpf-mask"
}}
margin="dense"
fullWidth
inputRef={register({required: true})}
error={errors.OIW_CPF ? true : false}
required
/>
<TextField
type="date" label="Nascimento" name="OIW_DT_NASC"
InputLabelProps={{
shrink: true,
}}
margin="dense"
fullWidth
inputRef={register({required: true})}
error={errors.OIW_DT_NASC ? true : false}
required
/>
<TextField
type="text" label="Naturalidade" name="OIW_NATU"
InputLabelProps={{
shrink: true,
}}
inputProps={{
maxLength: 20
}}
margin="dense"
fullWidth
inputRef={register({required: true})}
error={errors.OIW_NATU ? true : false}
required
/>
<TextField
type="text" label="Nacionalidade" name="OIW_NACI"
InputLabelProps={{
shrink: true,
}}
inputProps={{
maxLength: 35
}}
margin="dense"
fullWidth
inputRef={register({required: true})}
error={errors.OIW_NACI ? true : false}
required
/>
</FormGroup>
</FormControl>
<FormControl component="fieldset" fullWidth className={classes.grupos}>
<FormLabel component="legend">Contato</FormLabel>
<FormGroup>
<TextField
type="text" label="Telefone / Celular" name="OIW_TEL"
InputLabelProps={{
shrink: true,
}}
inputProps={{
maxLength: 15, // (21) 96917-1234
className:"tel-mask"
}}
margin="dense"
fullWidth
inputRef={register({required: true})}
error={errors.OIW_TEL ? true : false}
required
/>
<TextField
type="email" label="E-mail" name="OIW_EMAIL"
InputLabelProps={{
shrink: true,
}}
inputProps={{
maxLength: 50
}}
margin="dense"
fullWidth
inputRef={register({required: true})}
error={errors.OIW_EMAIL ? true : false}
required
/>
<TextField
type="text" label="Instagram" name="OIW_INSTA"
InputLabelProps={{
shrink: true,
}}
inputProps={{
maxLength: 35
}}
margin="dense"
fullWidth
inputRef={register({required: false, maxLength: 35})}
error={errors.OIW_INSTA ? true : false}
/>
</FormGroup>
</FormControl>
<FormControl component="fieldset" fullWidth className={classes.grupos}>
<FormLabel component="legend">Contato Emergência</FormLabel>
<FormGroup>
<TextField
type="text" label="Nome" name="OIW_EMER_NOME"
InputLabelProps={{
shrink: true,
}}
inputProps={{
maxLength: 35
}}
margin="dense"
fullWidth
inputRef={register({required: true})}
error={errors.OIW_EMER_NOME ? true : false}
required
/>
<TextField
type="text" label="Telefone / Celular" name="OIW_EMER_TEL"
InputLabelProps={{
shrink: true,
}}
inputProps={{
maxLength: 15, // (21) 96917-1234
className:"tel-mask"
}}
margin="dense"
fullWidth
inputRef={register({required: true})}
error={errors.OIW_EMER_TEL ? true : false}
required
/>
</FormGroup>
</FormControl>
<FormControl component="fieldset" fullWidth className={classes.grupos}>
<FormLabel component="legend">Endereço</FormLabel>
<FormGroup>
<TextField
type="text" label="Logradouro" name="OIW_END_RUA"
InputLabelProps={{
shrink: true,
}}
inputProps={{
maxLength: 30
}}
margin="dense"
fullWidth
inputRef={register({required: true})}
error={errors.OIW_END_RUA ? true : false}
required
/>
<TextField
type="text" label="Número" name="OIW_END_NUM"
InputLabelProps={{
shrink: true,
}}
inputProps={{
maxLength: 5
}}
margin="dense"
fullWidth
inputRef={register({required: true})}
error={errors.OIW_END_NUM ? true : false}
required
/>
<TextField
type="text" label="Complemento" name="OIW_END_COMP"
InputLabelProps={{
shrink: true,
}}
inputProps={{
maxLength: 15
}}
margin="dense"
fullWidth
inputRef={register({required: false})}
error={errors.OIW_END_COMP ? true : false}
/>
<TextField
type="text" label="Bairro" name="OIW_END_BAIRRO"
InputLabelProps={{
shrink: true,
}}
inputProps={{
maxLength: 35
}}
margin="dense"
fullWidth
inputRef={register({required: true})}
error={errors.OIW_END_BAIRRO ? true : false}
required
/>
<TextField
type="text" label="Cidade" name="OIW_END_CIDADE"
InputLabelProps={{
shrink: true,
}}
inputProps={{
maxLength: 35
}}
margin="dense"
fullWidth
inputRef={register({required: true})}
error={errors.OIW_END_CIDADE ? true : false}
required
/>
<TextField
type="text" label="UF" name="OIW_END_UF"
InputLabelProps={{
shrink: true,
}}
inputProps={{
maxLength: 2
}}
margin="dense"
fullWidth
inputRef={register({required: true, maxLength: 2})}
error={errors.OIW_END_UF ? true : false}
required
/>
<TextField
type="text" label="CEP" name="OIW_END_CEP"
InputLabelProps={{
shrink: true,
}}
inputProps={{
maxLength: 9, // 21350-704
className: "cep-mask",
}}
margin="dense"
fullWidth
inputRef={register({required: true})}
error={errors.OIW_END_CEP ? true : false}
required
/>
</FormGroup>
</FormControl>
<DialogContentText>
<Typography
variant="body2"
component="span"
dangerouslySetInnerHTML={{__html: termo || ""}}>
</Typography>
</DialogContentText>
<InputMak />
</form>
</DialogContent>
<DialogActions>
<Button color="primary" onClick={()=> props.callbackClose() } disabled={enviando}>
Cancelar
</Button>
<Button color="primary" onClick={fnBtnConcordo} variant="contained" disabled={enviando}>
{enviando ? <CircularProgress size={24} /> : <>Concordo</> }
</Button>
</DialogActions>
</Dialog>
)
}
const useStyles = makeStyles((theme: Theme) => createStyles({
grupos: {
marginTop: "25px"
},
}));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment