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

improvement(style): better styles in contacts list

Browse Source
This commit is contained in:
canove
2020-08-31 12:01:28 -03:00
parent 04477783b4
commit daf4c1135b
1 changed files with 113 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

220
frontend/src/pages/Contacts/index.js
View File

@@ -33,10 +33,15 @@ import { i18n } from "../../translate/i18n";
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(theme => ({
mainContainer: { mainContainer: {
flex: 1, flex: 1,
// backgroundColor: "#eee",
padding: theme.spacing(2), padding: theme.spacing(2),
height: `calc(100% - 48px)`, height: `calc(100% - 48px)`,
},
contentWrapper: {
height: "100%",
overflowY: "hidden", overflowY: "hidden",
display: "flex",
flexDirection: "column",
}, },
contactsHeader: { contactsHeader: {
@@ -46,6 +51,7 @@ const useStyles = makeStyles(theme => ({
}, },
actionButtons: { actionButtons: {
flex: "none",
marginLeft: "auto", marginLeft: "auto",
"& > *": { "& > *": {
margin: theme.spacing(1), margin: theme.spacing(1),
@@ -53,16 +59,14 @@ const useStyles = makeStyles(theme => ({
}, },
mainPaper: { mainPaper: {
height: "87%", flex: 1,
padding: theme.spacing(2), padding: theme.spacing(2),
overflowY: "scroll", overflowY: "scroll",
"&::-webkit-scrollbar": { "&::-webkit-scrollbar": {
width: "8px", width: "8px",
height: "8px", height: "8px",
}, },
"&::-webkit-scrollbar-thumb": { "&::-webkit-scrollbar-thumb": {
// borderRadius: "2px",
boxShadow: "inset 0 0 6px rgba(0, 0, 0, 0.3)", boxShadow: "inset 0 0 6px rgba(0, 0, 0, 0.3)",
backgroundColor: "#e8e8e8", backgroundColor: "#e8e8e8",
}, },
@@ -107,11 +111,11 @@ const Contacts = () => {
useEffect(() => { useEffect(() => {
const socket = openSocket(process.env.REACT_APP_BACKEND_URL); const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
socket.on("contact", data => { socket.on("contact", data => {
if ((data.action === "update" || data.action === "create") && !loading) { if (data.action === "update" || data.action === "create") {
updateContacts(data.contact); updateContacts(data.contact);
} }
if (data.action === "delete" && !loading) { if (data.action === "delete") {
deleteContact(data.contactId); deleteContact(data.contactId);
} }
}); });
@@ -119,7 +123,7 @@ const Contacts = () => {
return () => { return () => {
socket.disconnect(); socket.disconnect();
}; };
}, [loading]); }, []);
const updateContacts = contact => { const updateContacts = contact => {
setContacts(prevState => { setContacts(prevState => {
@@ -221,109 +225,111 @@ const Contacts = () => {
? `${i18n.t("contacts.confirmationModal.deleteMessage")}` ? `${i18n.t("contacts.confirmationModal.deleteMessage")}`
: `${i18n.t("contacts.confirmationModal.importMessage")}`} : `${i18n.t("contacts.confirmationModal.importMessage")}`}
</ConfirmationModal> </ConfirmationModal>
<div className={classes.contactsHeader}> <div className={classes.contentWrapper}>
<Typography variant="h5" gutterBottom> <div className={classes.contactsHeader}>
{i18n.t("contacts.title")} <Typography variant="h5" gutterBottom>
</Typography> {i18n.t("contacts.title")}
</Typography>
<div className={classes.actionButtons}> <div className={classes.actionButtons}>
<TextField <TextField
placeholder={i18n.t("contacts.searchPlaceholder")} placeholder={i18n.t("contacts.searchPlaceholder")}
type="search" type="search"
value={searchParam} value={searchParam}
onChange={handleSearch} onChange={handleSearch}
InputProps={{ InputProps={{
startAdornment: ( startAdornment: (
<InputAdornment position="start"> <InputAdornment position="start">
<SearchIcon style={{ color: "gray" }} /> <SearchIcon style={{ color: "gray" }} />
</InputAdornment> </InputAdornment>
), ),
}} }}
/> />
<Button <Button
variant="contained" variant="contained"
color="primary" color="primary"
onClick={e => setConfirmOpen(true)} onClick={e => setConfirmOpen(true)}
> >
{i18n.t("contacts.buttons.import")} {i18n.t("contacts.buttons.import")}
</Button> </Button>
<Button <Button
variant="contained" variant="contained"
color="primary" color="primary"
onClick={handleOpenContactModal} onClick={handleOpenContactModal}
> >
{i18n.t("contacts.buttons.add")} {i18n.t("contacts.buttons.add")}
</Button> </Button>
</div>
</div> </div>
</div> <Paper className={classes.mainPaper} variant="outlined">
<Paper className={classes.mainPaper}> <Table size="small">
<Table size="small"> <TableHead>
<TableHead> <TableRow>
<TableRow> <TableCell padding="checkbox" />
<TableCell padding="checkbox" /> <TableCell>{i18n.t("contacts.table.name")}</TableCell>
<TableCell>{i18n.t("contacts.table.name")}</TableCell> <TableCell>{i18n.t("contacts.table.whatsapp")}</TableCell>
<TableCell>{i18n.t("contacts.table.whatsapp")}</TableCell> <TableCell>{i18n.t("contacts.table.email")}</TableCell>
<TableCell>{i18n.t("contacts.table.email")}</TableCell> <TableCell align="right">
<TableCell align="right"> {i18n.t("contacts.table.actions")}
{i18n.t("contacts.table.actions")} </TableCell>
</TableCell> </TableRow>
</TableRow> </TableHead>
</TableHead> <TableBody>
<TableBody> {loading ? (
{loading ? ( <ContactsSekeleton />
<ContactsSekeleton /> ) : (
) : ( <>
<> {contacts.map(contact => (
{contacts.map(contact => ( <TableRow key={contact.id}>
<TableRow key={contact.id}> <TableCell style={{ paddingRight: 0 }}>
<TableCell style={{ paddingRight: 0 }}> {<Avatar src={contact.profilePicUrl} />}
{<Avatar src={contact.profilePicUrl} />} </TableCell>
</TableCell> <TableCell>{contact.name}</TableCell>
<TableCell>{contact.name}</TableCell> <TableCell>{contact.number}</TableCell>
<TableCell>{contact.number}</TableCell> <TableCell>{contact.email}</TableCell>
<TableCell>{contact.email}</TableCell> <TableCell align="right">
<TableCell align="right"> <IconButton
<IconButton size="small"
size="small" onClick={() => hadleEditContact(contact.id)}
onClick={() => hadleEditContact(contact.id)} >
> <EditIcon />
<EditIcon /> </IconButton>
</IconButton>
<IconButton <IconButton
size="small" size="small"
onClick={e => { onClick={e => {
setConfirmOpen(true); setConfirmOpen(true);
setDeletingContact(contact); setDeletingContact(contact);
}} }}
> >
<DeleteOutlineIcon /> <DeleteOutlineIcon />
</IconButton> </IconButton>
</TableCell> </TableCell>
</TableRow> </TableRow>
))} ))}
</> </>
)} )}
</TableBody> </TableBody>
<TableFooter> <TableFooter>
<TableRow> <TableRow>
<TablePagination <TablePagination
colSpan={5} colSpan={5}
count={count} count={count}
rowsPerPage={rowsPerPage} rowsPerPage={rowsPerPage}
page={page} page={page}
SelectProps={{ SelectProps={{
inputProps: { "aria-label": "rows per page" }, inputProps: { "aria-label": "rows per page" },
native: true, native: true,
}} }}
onChangePage={handleChangePage} onChangePage={handleChangePage}
onChangeRowsPerPage={handleChangeRowsPerPage} onChangeRowsPerPage={handleChangeRowsPerPage}
ActionsComponent={PaginationActions} ActionsComponent={PaginationActions}
/> />
</TableRow> </TableRow>
</TableFooter> </TableFooter>
</Table> </Table>
</Paper> </Paper>
</div>
</Container> </Container>
); );
}; };