Skip to content

Commit

Permalink
Fila Obrigatórias na Abertura e Aceite de Tickets
Browse files Browse the repository at this point in the history
  • Loading branch information
@rtenorioh
rtenorioh committed Jul 28, 2022
1 parent 025edbc commit f246ea2
Show file tree
Hide file tree
Showing 7 changed files with 332 additions and 90 deletions.
4 changes: 2 additions & 2 deletions backend/src/controllers/TicketController.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,9 +63,9 @@ export const index = async (req: Request, res: Response): Promise<Response> => {
};

export const store = async (req: Request, res: Response): Promise<Response> => {
const { contactId, status, userId }: TicketData = req.body;
const { contactId, status, userId, queueId }: TicketData = req.body;

const ticket = await CreateTicketService({ contactId, status, userId });
const ticket = await CreateTicketService({ contactId, status, userId, queueId });

const io = getIO();
io.to(ticket.status).emit("ticket", {
Expand Down
119 changes: 119 additions & 0 deletions frontend/src/components/AcceptTicketWithoutQueueModal/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
import React, { useState, useContext } from "react";
import { useHistory } from "react-router-dom";

import {
Button,
Dialog,
DialogActions,
DialogContent,
DialogTitle,
FormControl,
InputLabel,
makeStyles,
MenuItem,
Select
} from "@material-ui/core";


import api from "../../services/api";
import { AuthContext } from "../../context/Auth/AuthContext";
import ButtonWithSpinner from "../ButtonWithSpinner";
import { i18n } from "../../translate/i18n";
import toastError from "../../errors/toastError";

// const filter = createFilterOptions({
// trim: true,
// });

const useStyles = makeStyles((theme) => ({
autoComplete: {
width: 300,
// marginBottom: 20
},
maxWidth: {
width: "100%",
},
buttonColorError: {
color: theme.palette.error.main,
borderColor: theme.palette.error.main,
},
}));

const AcceptTicketWithouSelectQueue = ({ modalOpen, onClose, ticketId }) => {
const history = useHistory();
const classes = useStyles();
const [selectedQueue, setSelectedQueue] = useState('');
const [loading, setLoading] = useState(false);
const { user } = useContext(AuthContext);

const handleClose = () => {
onClose();
setSelectedQueue("");
};

const handleUpdateTicketStatus = async (queueId) => {
setLoading(true);
try {
await api.put(`/tickets/${ticketId}`, {
status: "open",
userId: user?.id || null,
queueId: queueId
});

setLoading(false);
history.push(`/tickets/${ticketId}`);
handleClose();
} catch (err) {
setLoading(false);
toastError(err);
}
};

return (
<>
<Dialog open={modalOpen} onClose={handleClose}>
<DialogTitle id="form-dialog-title">
{i18n.t("ticketsList.acceptModal.title")}
</DialogTitle>
<DialogContent dividers>
<FormControl variant="outlined" className={classes.maxWidth}>
<InputLabel>{i18n.t("ticketsList.acceptModal.queue")}</InputLabel>
<Select
value={selectedQueue}
className={classes.autoComplete}
onChange={(e) => setSelectedQueue(e.target.value)}
label={i18n.t("ticketsList.acceptModal.queue")}
>
<MenuItem value={''}>&nbsp;</MenuItem>
{user.queues.map((queue) => (
<MenuItem key={queue.id} value={queue.id}>{queue.name}</MenuItem>
))}
</Select>
</FormControl>
</DialogContent>
<DialogActions>
<Button
onClick={handleClose}
className={classes.buttonColorError}
disabled={loading}
variant="outlined"
>
{i18n.t("ticketsList.buttons.cancel")}
</Button>
<ButtonWithSpinner
variant="contained"
type="button"
disabled={(selectedQueue === "")}
onClick={() => handleUpdateTicketStatus(selectedQueue)}
color="primary"
loading={loading}
>
{i18n.t("ticketsList.buttons.start")}
</ButtonWithSpinner>
</DialogActions>
</Dialog>
</>
);
};

export default AcceptTicketWithouSelectQueue;
138 changes: 96 additions & 42 deletions frontend/src/components/NewTicketModal/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,30 @@ import ContactModal from "../ContactModal";
import toastError from "../../errors/toastError";
import { AuthContext } from "../../context/Auth/AuthContext";

import {
FormControl,
InputLabel,
makeStyles,
MenuItem,
Select
} from "@material-ui/core";



const useStyles = makeStyles((theme) => ({
autoComplete: {
width: 300,
// marginBottom: 20
},
maxWidth: {
width: "100%",
},
buttonColorError: {
color: theme.palette.error.main,
borderColor: theme.palette.error.main,
},
}));

const filter = createFilterOptions({
trim: true,
});
Expand All @@ -34,6 +58,8 @@ const NewTicketModal = ({ modalOpen, onClose }) => {
const [newContact, setNewContact] = useState({});
const [contactModalOpen, setContactModalOpen] = useState(false);
const { user } = useContext(AuthContext);
const [selectedQueue, setSelectedQueue] = useState('');
const classes = useStyles();

useEffect(() => {
if (!modalOpen || searchParam.length < 3) {
Expand Down Expand Up @@ -74,6 +100,7 @@ const NewTicketModal = ({ modalOpen, onClose }) => {
contactId: contactId,
userId: user.id,
status: "open",
queueId: selectedQueue
});
history.push(`/tickets/${ticket.id}`);
} catch (err) {
Expand Down Expand Up @@ -140,47 +167,74 @@ const NewTicketModal = ({ modalOpen, onClose }) => {
<DialogTitle id="form-dialog-title">
{i18n.t("newTicketModal.title")}
</DialogTitle>
<DialogContent dividers>
<Autocomplete
options={options}
loading={loading}
style={{ width: 300 }}
clearOnBlur
autoHighlight
freeSolo
clearOnEscape
getOptionLabel={renderOptionLabel}
renderOption={renderOption}
filterOptions={createAddContactOption}
onChange={(e, newValue) => handleSelectOption(e, newValue)}
renderInput={params => (
<TextField
{...params}
label={i18n.t("newTicketModal.fieldLabel")}
variant="outlined"
autoFocus
onChange={e => setSearchParam(e.target.value)}
onKeyPress={e => {
if (loading || !selectedContact) return;
else if (e.key === "Enter") {
handleSaveTicket(selectedContact.id);
}
}}
InputProps={{
...params.InputProps,
endAdornment: (
<React.Fragment>
{loading ? (
<CircularProgress color="inherit" size={20} />
) : null}
{params.InputProps.endAdornment}
</React.Fragment>
),
}}
/>
)}
/>
</DialogContent>
<FormControl>
<DialogContent dividers>




<Autocomplete
options={options}
loading={loading}
style={{ width: 300 }}
clearOnBlur
autoHighlight
freeSolo
clearOnEscape
getOptionLabel={renderOptionLabel}
renderOption={renderOption}
filterOptions={createAddContactOption}
onChange={(e, newValue) => handleSelectOption(e, newValue)}
renderInput={params => (
<TextField
{...params}
label={i18n.t("newTicketModal.fieldLabel")}
variant="outlined"
autoFocus
required
onChange={e => setSearchParam(e.target.value)}
onKeyPress={e => {
if (loading || !selectedContact) return;
else if (e.key === "Enter") {
handleSaveTicket(selectedContact.id);
}
}}
InputProps={{
...params.InputProps,
endAdornment: (
<React.Fragment>
{loading ? (
<CircularProgress color="inherit" size={20} />
) : null}
{params.InputProps.endAdornment}
</React.Fragment>
),
}}
/>
)}
/>
<DialogContent />

<FormControl variant="outlined" className={classes.maxWidth}>
<InputLabel>{i18n.t("ticketsList.acceptModal.queue")}</InputLabel>
<Select
autoHighlight
required
value={selectedQueue}
className={classes.autoComplete}
onChange={(e) => setSelectedQueue(e.target.value)}
label={i18n.t("ticketsList.acceptModal.queue")}
>
<MenuItem value={''}>&nbsp;</MenuItem>
{user.queues.map((queue) => (
<MenuItem key={queue.id} value={queue.id}>{queue.name}</MenuItem>
))}
</Select>
</FormControl>


</DialogContent>
</FormControl>
<DialogActions>
<Button
onClick={handleClose}
Expand All @@ -193,7 +247,7 @@ const NewTicketModal = ({ modalOpen, onClose }) => {
<ButtonWithSpinner
variant="contained"
type="button"
disabled={!selectedContact}
disabled={!selectedContact || !selectedQueue}
onClick={() => handleSaveTicket(selectedContact.id)}
color="primary"
loading={loading}
Expand Down
Loading

1 comment on commit f246ea2

@WesleyjanLacerda
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Olá, notei que após selecionar o "Setor", abrindo um novo Ticket, se clicar para "Reabrir", trava o "Front" e o Ticket volta com a último setor selecionado!

Please sign in to comment.