Skip to content

Commit

Permalink
Alterado o layout das configurações de select para switch
Browse files Browse the repository at this point in the history
  • Loading branch information
@rtenorioh
rtenorioh authored Jun 9, 2022
1 parent 5794ad5 commit 071957d
Showing 1 changed file with 147 additions and 131 deletions.
278 changes: 147 additions & 131 deletions frontend/src/pages/Settings/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { useState, useEffect } from "react";
import openSocket from "socket.io-client";

import { makeStyles } from "@material-ui/core/styles";
import { makeStyles, withStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import Typography from "@material-ui/core/Typography";
import Container from "@material-ui/core/Container";
Expand All @@ -13,21 +13,21 @@ import Tooltip from "@material-ui/core/Tooltip";
import api from "../../services/api";
import { i18n } from "../../translate/i18n.js";
import toastError from "../../errors/toastError";
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Switch from '@material-ui/core/Switch';

const useStyles = makeStyles(theme => ({
root: {
backgroundColor: theme.palette.background.default,
display: "flex",
alignItems: "center",
padding: theme.spacing(8, 8, 3),
padding: theme.spacing(4),
},

paper: {
padding: theme.spacing(2),
display: "flex",
alignItems: "center",
marginBottom: 12,
backgroundColor: theme.palette.background.paper,
},

settingOption: {
Expand All @@ -39,6 +39,60 @@ const useStyles = makeStyles(theme => ({

}));

const IOSSwitch = withStyles((theme) => ({
root: {
width: 42,
height: 26,
padding: 0,
margin: theme.spacing(1),
},
switchBase: {
padding: 1,
'&$checked': {
transform: 'translateX(16px)',
color: theme.palette.common.white,
'& + $track': {
backgroundColor: '#52d869',
opacity: 1,
border: 'none',
},
},
'&$focusVisible $thumb': {
color: '#52d869',
border: '6px solid #fff',
},
},
thumb: {
width: 24,
height: 24,
},
track: {
borderRadius: 26 / 2,
border: `1px solid ${theme.palette.grey[400]}`,
backgroundColor: theme.palette.grey[50],
opacity: 1,
transition: theme.transitions.create(['background-color', 'border']),
},
checked: {},
focusVisible: {},
}))
(({ classes, ...props }) => {
return (
<Switch
focusVisibleClassName={classes.focusVisible}
disableRipple
classes={{
root: classes.root,
switchBase: classes.switchBase,
thumb: classes.thumb,
track: classes.track,
checked: classes.checked,
}}
{...props}
/>
);
});

const Settings = () => {
const classes = useStyles();

Expand Down Expand Up @@ -75,8 +129,21 @@ const Settings = () => {
};
}, []);

const handleChangeBooleanSetting = async e => {
const selectedValue = e.target.checked ? "enabled" : "disabled";
const settingKey = e.target.name;

try {
await api.put(`/settings/${settingKey}`, {
value: selectedValue,
});
toast.success(i18n.t("settings.success"));
} catch (err) {
toastError(err);
}
};
const handleChangeSetting = async e => {
const selectedValue = e.target.value;
const selectedValue = e.target.checked ? "enabled" : "disabled";
const settingKey = e.target.name;

try {
Expand All @@ -100,146 +167,95 @@ const Settings = () => {
<Typography variant="body2" gutterBottom>
{i18n.t("settings.title")}
</Typography>

<Paper className={classes.paper}>
<Typography variant="body1">
{i18n.t("settings.settings.userCreation.name")}
</Typography>
<Select
margin="dense"
variant="outlined"
native
id="userCreation-setting"
name="userCreation"
value={
settings && settings.length > 0 && getSettingValue("userCreation")
}
className={classes.settingOption}
onChange={handleChangeSetting}
>
<option value="enabled">
{i18n.t("settings.settings.userCreation.options.enabled")}
</option>
<option value="disabled">
{i18n.t("settings.settings.userCreation.options.disabled")}
</option>
</Select>
<Tooltip title={i18n.t("settings.settings.userCreation.note")}>
<FormControlLabel
control={
<IOSSwitch
checked={settings && settings.length > 0 && getSettingValue("userCreation") === "enabled"}
onChange={handleChangeBooleanSetting} name="userCreation"
/>
}
label={i18n.t("settings.settings.userCreation.name")}
/>
</Tooltip>
</Paper>

<Typography variant="body2" gutterBottom></Typography>
<Tooltip title={i18n.t("settings.settings.call.note")}>
<Paper className={classes.paper}>

<Typography variant="body1">
{i18n.t("settings.settings.call.name")}
</Typography>
<Select
margin="dense"
variant="outlined"
native
id="call-setting"
name="call"
value={
settings && settings.length > 0 && getSettingValue("call")
}
className={classes.settingOption}
onChange={handleChangeSetting}
>
<option value="enabled">
{i18n.t("settings.settings.call.options.enabled")}
</option>
<option value="disabled">
{i18n.t("settings.settings.call.options.disabled")}
</option>
</Select>
</Paper>
</Tooltip>
<Paper className={classes.paper}>
<Tooltip title={i18n.t("settings.settings.CheckMsgIsGroup.note")}>
<FormControlLabel
control={
<IOSSwitch
checked={settings && settings.length > 0 && getSettingValue("CheckMsgIsGroup") === "enabled"}
onChange={handleChangeBooleanSetting} name="CheckMsgIsGroup"
/>
} label={i18n.t("settings.settings.CheckMsgIsGroup.name")}
/>
</Tooltip>
</Paper>

<Typography variant="body2" gutterBottom></Typography>
<Paper className={classes.paper}>
<Typography variant="body1">
{i18n.t("settings.settings.CheckMsgIsGroup.name")}
</Typography>
<Select
margin="dense"
variant="outlined"
native
id="CheckMsgIsGroup-setting"
name="CheckMsgIsGroup"
value={
settings && settings.length > 0 && getSettingValue("CheckMsgIsGroup")
}
className={classes.settingOption}
onChange={handleChangeSetting}
>
<option value="enabled">
{i18n.t("settings.settings.CheckMsgIsGroup.options.enabled")}
</option>
<option value="disabled">
{i18n.t("settings.settings.CheckMsgIsGroup.options.disabled")}
</option>
</Select>
<Tooltip title={i18n.t("settings.settings.call.note")}>
<FormControlLabel
control={
<IOSSwitch
checked={settings && settings.length > 0 && getSettingValue("call") === "enabled"}
onChange={handleChangeBooleanSetting} name="call"
/>}
label={i18n.t("settings.settings.call.name")}
/>
</Tooltip>
</Paper>

<Typography variant="body2" gutterBottom></Typography>
<Tooltip title={i18n.t("settings.settings.sideMenu.note")}>
<Paper className={classes.paper} elevation={3}>
<Typography variant="body1">
{i18n.t("settings.settings.sideMenu.name")}
</Typography>
<Select
margin="dense"
variant="outlined"
native
id="sideMenu-setting"
name="sideMenu"
value={
settings && settings.length > 0 && getSettingValue("sideMenu")
}
className={classes.settingOption}
onChange={handleChangeSetting}
>
<option value="enabled">
{i18n.t("settings.settings.sideMenu.options.enabled")}
</option>
<option value="disabled">
{i18n.t("settings.settings.sideMenu.options.disabled")}
</option>
</Select>
</Paper>
</Tooltip>
<Paper className={classes.paper}>
<Tooltip title={i18n.t("settings.settings.sideMenu.note")}>
<FormControlLabel
control={
<IOSSwitch
checked={settings && settings.length > 0 && getSettingValue("sideMenu") === "enabled"}
onChange={handleChangeBooleanSetting} name="sideMenu"
/>}
label={i18n.t("settings.settings.sideMenu.name")}
/>
</Tooltip>
</Paper>

<Typography variant="body2" gutterBottom></Typography>
<Tooltip title={i18n.t("settings.settings.closeTicketApi.note")}>
<Paper className={classes.paper}>
<Paper className={classes.paper}>
<Tooltip title={i18n.t("settings.settings.closeTicketApi.note")}>
<FormControlLabel
control={
<IOSSwitch
checked={settings && settings.length > 0 && getSettingValue("closeTicketApi") === "enabled"}
onChange={handleChangeBooleanSetting} name="closeTicketApi"
/>}
label={i18n.t("settings.settings.closeTicketApi.name")}
/>
</Tooltip>
</Paper>

<Typography variant="body1">
{i18n.t("settings.settings.closeTicketApi.name")}
</Typography>
<Select
margin="dense"
variant="outlined"
native
id="closeTicketApi-setting"
name="closeTicketApi"
value={
settings && settings.length > 0 && getSettingValue("closeTicketApi")
}
className={classes.settingOption}
onChange={handleChangeSetting}
>
<option value="enabled">
{i18n.t("settings.settings.closeTicketApi.options.enabled")}
</option>
<option value="disabled">
{i18n.t("settings.settings.closeTicketApi.options.disabled")}
</option>
</Select>
</Paper>
</Tooltip>
<Typography variant="body2" gutterBottom></Typography>
<Paper className={classes.paper}>
<Tooltip title={i18n.t("settings.settings.darkMode.note")}>
<FormControlLabel
control={
<IOSSwitch
checked={settings && settings.length > 0 && getSettingValue("darkMode") === "enabled"}
onChange={handleChangeBooleanSetting} name="darkMode"
/>}
label={i18n.t("settings.settings.darkMode.name")}
/>
</Tooltip>
</Paper>

<Typography variant="body2" gutterBottom></Typography>
<Tooltip title={i18n.t("settings.settings.timeCreateNewTicket.note")}>
<Paper className={classes.paper} elevation={3}>
<Paper className={classes.paper} elevation={3}>
<Tooltip title={i18n.t("settings.settings.timeCreateNewTicket.note")}>
<Typography variant="body1">
{i18n.t("settings.settings.timeCreateNewTicket.name")}
</Typography>
Expand Down Expand Up @@ -283,8 +299,8 @@ const Settings = () => {
{i18n.t("settings.settings.timeCreateNewTicket.options.43200")}
</option>
</Select>
</Paper>
</Tooltip>
</Tooltip>
</Paper>

</Container>
</div>
Expand Down

0 comments on commit 071957d

Please sign in to comment.