post
postunknown
javascript
3 years ago
6.3 kB
5
Indexable
import React, { useState, useEffect } from 'react'; import { SliderPicker } from 'react-color'; import TextField from '@material-ui/core/TextField'; import Autocomplete from '@material-ui/lab/Autocomplete'; import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank'; import CheckBoxIcon from '@material-ui/icons/CheckBox'; import Checkbox from '@material-ui/core/Checkbox'; import CircularProgress from '@material-ui/core/CircularProgress'; const NewDoctor = () => { const [loading, setLoading] = useState(true); const [fullname, setFullname] = useState(""); const [userId, setUserId] = useState(""); const [color, setColor] = useState('#ff66ff'); const handleSubmit = async (e) => { e.preventDefault(); setLoading(true); const body = { name: fullname, user_id: userId, color: color, treatments: treatments, archived: false }; var url = process.env.REACT_APP_API_URL + 'TU RUTA'; var requestOptions = { method: 'POST', headers: { "Content-Type": "application/json", "api-key": process.env.REACT_APP_API_KEY, }, body: JSON.stringify(body) } const res = await fetch(url, requestOptions); if (res.ok) { alert('ok') } else { alert('Error') } } return ( <> <form className="frame pb-3" onSubmit={handleSubmit}> <h4 className="main-title-treatments">New {t('DoctorsList.0')}</h4> <a className='blue-anchors' href="/doctors"> < Back to {t('DoctorsList.0')}</a> {loading ? <div className="d-flex justify-content-center"><CircularProgress /></div> : <> <div className="col-5 mt-3" > <h4 className="main-subtitle-treatments">1) {t('NewDoctor.0')}: </h4> <br /> <Autocomplete required id="user" name="user" options={clinicUsers} onChange={(e, value) => handleUserChange(e, value) } getOptionLabel={(option) => option.email} inputValue={clinicUsers['id']} renderInput={(params) => <TextField {...params} />} /> </div> <br /> <div className="col-5 mt-3" > <h4 className="main-subtitle-treatments">2) {t('NewDoctor.1')}: </h4> <input required type="text" className="form-control" name="fullname" label="name" value={fullname} onChange={e => setFullname(e.target.value)} /> </div> <br /> <div className="col-5 mt-3" > <h4 className="main-subtitle-treatments">3) {t('NewDoctor.2')}: </h4> <br /> <SliderPicker required color={color} onChangeComplete={(color) => { setColor(color.hex) }} /> </div> <br /> <div className="col-5 mt-3" > <h4 className="main-subtitle-treatments">4) {t('NewDoctor.3')}: </h4> <br /> <Autocomplete required multiple name="treatments" id="treatments" options={clinicTreatments} disableCloseOnSelect onChange={(e, value) => { handleTreatmentChange(e, value) }} getOptionLabel={option => option.name} renderOption={(option, { selected }) => ( <React.Fragment> <Checkbox icon={icon} checkedIcon={checkedIcon} style={{ marginRight: 8, color: '#8754ba' }} checked={selected} /> {option.name} </React.Fragment> )} style={{ width: 600 }} renderInput={params => ( <TextField {...params} variant="outlined" label="Treatments" placeholder="Select" fullWidth /> )} /> <br /> </div> <div className="col-5 mt-3" > <button type="submit" className="btnGo mt-2"> SAVE </button> </div> </>} </form> </> ); } export default NewDoctor;
Editor is loading...