Identação de codigo
adriano
parent
4cd72fdbd6
commit
64cd155016
|
|
@ -14,7 +14,7 @@ import DialogActions from "@material-ui/core/DialogActions";
|
|||
import DialogContent from "@material-ui/core/DialogContent";
|
||||
import DialogTitle from "@material-ui/core/DialogTitle";
|
||||
import Autocomplete, {
|
||||
createFilterOptions,
|
||||
createFilterOptions,
|
||||
} from "@material-ui/lab/Autocomplete";
|
||||
import CircularProgress from "@material-ui/core/CircularProgress";
|
||||
|
||||
|
|
@ -31,177 +31,177 @@ const useStyles = makeStyles((theme) => ({
|
|||
}));
|
||||
|
||||
const filterOptions = createFilterOptions({
|
||||
trim: true,
|
||||
trim: true,
|
||||
});
|
||||
|
||||
const TransferTicketModal = ({ modalOpen, onClose, ticketid }) => {
|
||||
const history = useHistory();
|
||||
const [options, setOptions] = useState([]);
|
||||
const [queues, setQueues] = useState([]);
|
||||
const [allQueues, setAllQueues] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [searchParam, setSearchParam] = useState("");
|
||||
const [selectedUser, setSelectedUser] = useState(null);
|
||||
const [selectedQueue, setSelectedQueue] = useState('');
|
||||
const classes = useStyles();
|
||||
const { findAll: findAllQueues } = useQueues();
|
||||
const history = useHistory();
|
||||
const [options, setOptions] = useState([]);
|
||||
const [queues, setQueues] = useState([]);
|
||||
const [allQueues, setAllQueues] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [searchParam, setSearchParam] = useState("");
|
||||
const [selectedUser, setSelectedUser] = useState(null);
|
||||
const [selectedQueue, setSelectedQueue] = useState('');
|
||||
const classes = useStyles();
|
||||
const { findAll: findAllQueues } = useQueues();
|
||||
|
||||
useEffect(() => {
|
||||
const loadQueues = async () => {
|
||||
const list = await findAllQueues();
|
||||
setAllQueues(list);
|
||||
setQueues(list);
|
||||
}
|
||||
loadQueues();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
const loadQueues = async () => {
|
||||
const list = await findAllQueues();
|
||||
setAllQueues(list);
|
||||
setQueues(list);
|
||||
}
|
||||
loadQueues();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!modalOpen || searchParam.length < 3) {
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
const delayDebounceFn = setTimeout(() => {
|
||||
const fetchUsers = async () => {
|
||||
try {
|
||||
const { data } = await api.get("/users/", {
|
||||
params: { searchParam },
|
||||
});
|
||||
setOptions(data.users);
|
||||
setLoading(false);
|
||||
} catch (err) {
|
||||
setLoading(false);
|
||||
toastError(err);
|
||||
}
|
||||
};
|
||||
useEffect(() => {
|
||||
if (!modalOpen || searchParam.length < 3) {
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
const delayDebounceFn = setTimeout(() => {
|
||||
const fetchUsers = async () => {
|
||||
try {
|
||||
const { data } = await api.get("/users/", {
|
||||
params: { searchParam },
|
||||
});
|
||||
setOptions(data.users);
|
||||
setLoading(false);
|
||||
} catch (err) {
|
||||
setLoading(false);
|
||||
toastError(err);
|
||||
}
|
||||
};
|
||||
|
||||
fetchUsers();
|
||||
}, 500);
|
||||
return () => clearTimeout(delayDebounceFn);
|
||||
}, [searchParam, modalOpen]);
|
||||
fetchUsers();
|
||||
}, 500);
|
||||
return () => clearTimeout(delayDebounceFn);
|
||||
}, [searchParam, modalOpen]);
|
||||
|
||||
const handleClose = () => {
|
||||
onClose();
|
||||
setSearchParam("");
|
||||
setSelectedUser(null);
|
||||
};
|
||||
const handleClose = () => {
|
||||
onClose();
|
||||
setSearchParam("");
|
||||
setSelectedUser(null);
|
||||
};
|
||||
|
||||
const handleSaveTicket = async e => {
|
||||
e.preventDefault();
|
||||
if (!ticketid) return;
|
||||
setLoading(true);
|
||||
try {
|
||||
let data = {};
|
||||
const handleSaveTicket = async e => {
|
||||
e.preventDefault();
|
||||
if (!ticketid) return;
|
||||
setLoading(true);
|
||||
try {
|
||||
let data = {};
|
||||
|
||||
if (selectedUser) {
|
||||
data.userId = selectedUser.id
|
||||
}
|
||||
if (selectedUser) {
|
||||
data.userId = selectedUser.id
|
||||
}
|
||||
|
||||
if (selectedQueue && selectedQueue !== null) {
|
||||
data.queueId = selectedQueue
|
||||
if (selectedQueue && selectedQueue !== null) {
|
||||
data.queueId = selectedQueue
|
||||
|
||||
if (!selectedUser) {
|
||||
data.status = 'pending';
|
||||
data.userId = null;
|
||||
}
|
||||
}
|
||||
if (!selectedUser) {
|
||||
data.status = 'pending';
|
||||
data.userId = null;
|
||||
}
|
||||
}
|
||||
|
||||
// test del PARA APARECER NA FILA DE OUTRO ATENDENTE E O MESMO CLICAR EM ACEITAR AO INVES DE ENVIAR PARA ATENDENDO
|
||||
data.status = 'pending'
|
||||
// test del PARA APARECER NA FILA DE OUTRO ATENDENTE E O MESMO CLICAR EM ACEITAR AO INVES DE ENVIAR PARA ATENDENDO
|
||||
data.status = 'pending'
|
||||
|
||||
await api.put(`/tickets/${ticketid}`, data);
|
||||
await api.put(`/tickets/${ticketid}`, data);
|
||||
|
||||
setLoading(false);
|
||||
history.push(`/tickets`);
|
||||
} catch (err) {
|
||||
setLoading(false);
|
||||
toastError(err);
|
||||
}
|
||||
};
|
||||
setLoading(false);
|
||||
history.push(`/tickets`);
|
||||
} catch (err) {
|
||||
setLoading(false);
|
||||
toastError(err);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={modalOpen} onClose={handleClose} maxWidth="lg" scroll="paper">
|
||||
<form onSubmit={handleSaveTicket}>
|
||||
<DialogTitle id="form-dialog-title">
|
||||
{i18n.t("transferTicketModal.title")}
|
||||
</DialogTitle>
|
||||
<DialogContent dividers>
|
||||
<Autocomplete
|
||||
style={{ width: 300, marginBottom: 20 }}
|
||||
getOptionLabel={option => `${option.name}`}
|
||||
onChange={(e, newValue) => {
|
||||
setSelectedUser(newValue);
|
||||
if (newValue != null && Array.isArray(newValue.queues)) {
|
||||
setQueues(newValue.queues);
|
||||
} else {
|
||||
setQueues(allQueues);
|
||||
setSelectedQueue('');
|
||||
}
|
||||
}}
|
||||
options={options}
|
||||
filterOptions={filterOptions}
|
||||
freeSolo
|
||||
autoHighlight
|
||||
noOptionsText={i18n.t("transferTicketModal.noOptions")}
|
||||
loading={loading}
|
||||
renderInput={params => (
|
||||
<TextField
|
||||
{...params}
|
||||
label={i18n.t("transferTicketModal.fieldLabel")}
|
||||
variant="outlined"
|
||||
required
|
||||
autoFocus
|
||||
onChange={e => setSearchParam(e.target.value)}
|
||||
InputProps={{
|
||||
...params.InputProps,
|
||||
endAdornment: (
|
||||
<React.Fragment>
|
||||
{loading ? (
|
||||
<CircularProgress color="inherit" size={20} />
|
||||
) : null}
|
||||
{params.InputProps.endAdornment}
|
||||
</React.Fragment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<FormControl variant="outlined" className={classes.maxWidth}>
|
||||
<InputLabel>{i18n.t("transferTicketModal.fieldQueueLabel")}</InputLabel>
|
||||
<Select
|
||||
value={selectedQueue}
|
||||
onChange={(e) => setSelectedQueue(e.target.value)}
|
||||
label={i18n.t("transferTicketModal.fieldQueuePlaceholder")}
|
||||
>
|
||||
<MenuItem value={''}> </MenuItem>
|
||||
{queues.map((queue) => (
|
||||
<MenuItem key={queue.id} value={queue.id}>{queue.name}</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button
|
||||
onClick={handleClose}
|
||||
color="secondary"
|
||||
disabled={loading}
|
||||
variant="outlined"
|
||||
>
|
||||
{i18n.t("transferTicketModal.buttons.cancel")}
|
||||
</Button>
|
||||
<ButtonWithSpinner
|
||||
variant="contained"
|
||||
type="submit"
|
||||
color="primary"
|
||||
loading={loading}
|
||||
>
|
||||
{i18n.t("transferTicketModal.buttons.ok")}
|
||||
</ButtonWithSpinner>
|
||||
</DialogActions>
|
||||
</form>
|
||||
</Dialog>
|
||||
);
|
||||
return (
|
||||
<Dialog open={modalOpen} onClose={handleClose} maxWidth="lg" scroll="paper">
|
||||
<form onSubmit={handleSaveTicket}>
|
||||
<DialogTitle id="form-dialog-title">
|
||||
{i18n.t("transferTicketModal.title")}
|
||||
</DialogTitle>
|
||||
<DialogContent dividers>
|
||||
<Autocomplete
|
||||
style={{ width: 300, marginBottom: 20 }}
|
||||
getOptionLabel={option => `${option.name}`}
|
||||
onChange={(e, newValue) => {
|
||||
setSelectedUser(newValue);
|
||||
if (newValue != null && Array.isArray(newValue.queues)) {
|
||||
setQueues(newValue.queues);
|
||||
} else {
|
||||
setQueues(allQueues);
|
||||
setSelectedQueue('');
|
||||
}
|
||||
}}
|
||||
options={options}
|
||||
filterOptions={filterOptions}
|
||||
freeSolo
|
||||
autoHighlight
|
||||
noOptionsText={i18n.t("transferTicketModal.noOptions")}
|
||||
loading={loading}
|
||||
renderInput={params => (
|
||||
<TextField
|
||||
{...params}
|
||||
label={i18n.t("transferTicketModal.fieldLabel")}
|
||||
variant="outlined"
|
||||
required
|
||||
autoFocus
|
||||
onChange={e => setSearchParam(e.target.value)}
|
||||
InputProps={{
|
||||
...params.InputProps,
|
||||
endAdornment: (
|
||||
<React.Fragment>
|
||||
{loading ? (
|
||||
<CircularProgress color="inherit" size={20} />
|
||||
) : null}
|
||||
{params.InputProps.endAdornment}
|
||||
</React.Fragment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<FormControl variant="outlined" className={classes.maxWidth}>
|
||||
<InputLabel>{i18n.t("transferTicketModal.fieldQueueLabel")}</InputLabel>
|
||||
<Select
|
||||
value={selectedQueue}
|
||||
onChange={(e) => setSelectedQueue(e.target.value)}
|
||||
label={i18n.t("transferTicketModal.fieldQueuePlaceholder")}
|
||||
>
|
||||
<MenuItem value={''}> </MenuItem>
|
||||
{queues.map((queue) => (
|
||||
<MenuItem key={queue.id} value={queue.id}>{queue.name}</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button
|
||||
onClick={handleClose}
|
||||
color="secondary"
|
||||
disabled={loading}
|
||||
variant="outlined"
|
||||
>
|
||||
{i18n.t("transferTicketModal.buttons.cancel")}
|
||||
</Button>
|
||||
<ButtonWithSpinner
|
||||
variant="contained"
|
||||
type="submit"
|
||||
color="primary"
|
||||
loading={loading}
|
||||
>
|
||||
{i18n.t("transferTicketModal.buttons.ok")}
|
||||
</ButtonWithSpinner>
|
||||
</DialogActions>
|
||||
</form>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default TransferTicketModal;
|
||||
|
|
|
|||
Loading…
Reference in New Issue