cheveguerra/whaticket-community
1
0
Fork 0
mirror of https://github.com/cheveguerra/whaticket-community.git synced 2026-04-19 20:29:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: start search tickets styles

Browse Source
This commit is contained in:
canove
2020-08-05 21:33:03 -03:00
parent 3ad22f9195
commit e99bd2d54d
1 changed files with 131 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

200
frontend/src/components/TicketsList/index.js
View File

@@ -55,6 +55,11 @@ const useStyles = makeStyles(theme => ({
padding: 8, padding: 8,
}, },
tab: {
minWidth: 120, // a number of your choice
width: 120, // a number of your choice
},
openTicketsList: { openTicketsList: {
height: "50%", height: "50%",
overflowY: "scroll", overflowY: "scroll",
@@ -172,10 +177,17 @@ const useStyles = makeStyles(theme => ({
contactNameWrapper: { contactNameWrapper: {
display: "flex", display: "flex",
// display: "inline", justifyContent: "space-between",
}, },
lastMessageTime: { lastMessageTime: {
justifySelf: "flex-end",
},
closedBadge: {
alignSelf: "center",
justifySelf: "flex-end",
marginRight: 32,
marginLeft: "auto", marginLeft: "auto",
}, },
@@ -204,6 +216,21 @@ const useStyles = makeStyles(theme => ({
}, },
})); }));
const TabPanel = ({ children, value, index, ...rest }) => {
if (value === index) {
return (
<div
role="tabpanel"
id={`simple-tabpanel-${index}`}
aria-labelledby={`simple-tab-${index}`}
{...rest}
>
<>{children}</>
</div>
);
} else return null;
};
const TicketsList = () => { const TicketsList = () => {
const classes = useStyles(); const classes = useStyles();
const history = useHistory(); const history = useHistory();
@@ -356,7 +383,12 @@ const TicketsList = () => {
}; };
const handleSearchContact = e => { const handleSearchContact = e => {
if (e.target.value === "") {
setTab("open");
return;
}
setSearchParam(e.target.value.toLowerCase()); setSearchParam(e.target.value.toLowerCase());
setTab("search");
}; };
const handleChangeTab = (event, newValue) => { const handleChangeTab = (event, newValue) => {
@@ -391,7 +423,8 @@ const TicketsList = () => {
if ( if (
(ticket.status === status && ticket.userId === userId) || (ticket.status === status && ticket.userId === userId) ||
(ticket.status === status && showAllTickets) || (ticket.status === status && showAllTickets) ||
(ticket.status === "closed" && status === "closed") (ticket.status === "closed" && status === "closed") ||
searchParam
) )
return ( return (
<React.Fragment key={ticket.id}> <React.Fragment key={ticket.id}>
@@ -423,6 +456,13 @@ const TicketsList = () => {
> >
{ticket.contact.name} {ticket.contact.name}
</Typography> </Typography>
{ticket.status === "closed" && (
<Badge
className={classes.closedBadge}
badgeContent={"closed"}
color="primary"
/>
)}
{ticket.lastMessage && ( {ticket.lastMessage && (
<Typography <Typography
className={classes.lastMessageTime} className={classes.lastMessageTime}
@@ -446,6 +486,7 @@ const TicketsList = () => {
> >
{ticket.lastMessage || <br />} {ticket.lastMessage || <br />}
</Typography> </Typography>
<Badge <Badge
className={classes.newMessagesCount} className={classes.newMessagesCount}
badgeContent={ticket.unreadMessages} badgeContent={ticket.unreadMessages}
@@ -476,20 +517,23 @@ const TicketsList = () => {
if (loading) { if (loading) {
return <TicketsSkeleton />; return <TicketsSkeleton />;
} else if (countTickets(status, userId) === "" && status !== "closed") { }
return (
<div className={classes.noTicketsDiv}> // else if (countTickets(status, userId) === "" && status !== "closed") {
<span className={classes.noTicketsTitle}> // return (
{status === "pending" ? "Tudo resolvido" : "Pronto pra mais?"} // <div className={classes.noTicketsDiv}>
</span> // <span className={classes.noTicketsTitle}>
<p className={classes.noTicketsText}> // {status === "pending" ? "Tudo resolvido" : "Pronto pra mais?"}
{status === "pending" // </span>
? "Nenhum ticket pendente por enquanto. Hora do café!" // <p className={classes.noTicketsText}>
: "Aceite um ticket da fila para começar."} // {status === "pending"
</p> // ? "Nenhum ticket pendente por enquanto. Hora do café!"
</div> // : "Aceite um ticket da fila para começar."}
); // </p>
} else { // </div>
// );
// }
else {
return viewTickets; return viewTickets;
} }
}; };
@@ -510,14 +554,22 @@ const TicketsList = () => {
aria-label="icon label tabs example" aria-label="icon label tabs example"
> >
<Tab <Tab
value="open" value={"open"}
icon={<MoveToInboxIcon />} icon={<MoveToInboxIcon />}
label="Caixa de Entrada" label="Inbox"
classes={{ root: classes.tab }}
/> />
<Tab <Tab
value="closed" value={"closed"}
icon={<CheckCircleOutlineIcon />} icon={<CheckCircleOutlineIcon />}
label="Resolvidos" label="Resolvidos"
classes={{ root: classes.tab }}
/>
<Tab
value={"search"}
icon={<SearchIcon />}
label="Busca"
classes={{ root: classes.tab }}
/> />
</Tabs> </Tabs>
</Paper> </Paper>
@@ -532,60 +584,70 @@ const TicketsList = () => {
/> />
</div> </div>
</Paper> </Paper>
{tab === "open" ? ( <TabPanel value={tab} index={"open"} className={classes.contactsWrapper}>
<> <Paper square elevation={0} className={classes.openTicketsList}>
<Paper square elevation={0} className={classes.openTicketsList}> <List style={{ paddingTop: 0 }}>
<List style={{ paddingTop: 0 }}> <div className={classes.ticketsListHeader}>
<div className={classes.ticketsListHeader}> Atendendo
Atendendo <span className={classes.ticketsCount}>
<span className={classes.ticketsCount}> {countTickets("open", userId)}
{countTickets("open", userId)} </span>
</span> <div className={classes.ticketsListActions}>
<div className={classes.ticketsListActions}> <FormControlLabel
<FormControlLabel label="Todos"
label="Todos" labelPlacement="start"
labelPlacement="start" control={
control={ <Switch
<Switch size="small"
size="small" checked={showAllTickets}
checked={showAllTickets} onChange={e => setShowAllTickets(prevState => !prevState)}
onChange={e => name="showAllTickets"
setShowAllTickets(prevState => !prevState) color="primary"
} />
name="showAllTickets" }
color="primary" />
/> <IconButton
} aria-label="add ticket"
/> onClick={e => setNewTicketModalOpen(true)}
<IconButton style={{ marginLeft: 20 }}
aria-label="add ticket" >
onClick={e => setNewTicketModalOpen(true)} <AddIcon />
style={{ marginLeft: 20 }} </IconButton>
>
<AddIcon />
</IconButton>
</div>
</div> </div>
{renderTickets("open", userId)} </div>
</List> {renderTickets("open", userId)}
</Paper> </List>
<Paper square elevation={0} className={classes.openTicketsList}> </Paper>
<List style={{ paddingTop: 0 }}> <Paper square elevation={0} className={classes.openTicketsList}>
<div className={classes.ticketsListHeader}> <List style={{ paddingTop: 0 }}>
Aguardando <div className={classes.ticketsListHeader}>
<span className={classes.ticketsCount}> Aguardando
{countTickets("pending", null)} <span className={classes.ticketsCount}>
</span> {countTickets("pending", null)}
</div> </span>
{renderTickets("pending", null)} </div>
</List> {renderTickets("pending", null)}
</Paper> </List>
</> </Paper>
) : ( </TabPanel>
<TabPanel
value={tab}
index={"closed"}
className={classes.contactsWrapper}
>
<Paper square elevation={0} className={classes.closedTicketsList}> <Paper square elevation={0} className={classes.closedTicketsList}>
<List>{renderTickets("closed", userId)}</List> <List>{renderTickets("closed", userId)}</List>
</Paper> </Paper>
)} </TabPanel>
<TabPanel
value={tab}
index={"search"}
className={classes.contactsWrapper}
>
<Paper square elevation={0} className={classes.closedTicketsList}>
<List>{renderTickets()}</List>
</Paper>
</TabPanel>
<audio id="sound" preload="auto"> <audio id="sound" preload="auto">
<source src={require("../../assets/sound.mp3")} type="audio/mpeg" /> <source src={require("../../assets/sound.mp3")} type="audio/mpeg" />
<source src={require("../../assets/sound.ogg")} type="audio/ogg" /> <source src={require("../../assets/sound.ogg")} type="audio/ogg" />