@material-ui/icons#Edit JavaScript Examples
The following examples show how to use
@material-ui/icons#Edit.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: AnalysisCard.js From jobtriage with MIT License | 6 votes |
|
AnalysisCard = props => {
const classes = useStyles();
const {
content, onEdit, onDelete,
} = props;
return (
<div className={`${classes.root} ql-editor`}>
<div className={classes.contentDiv}>
{parse(content)}
</div>
<div className={classes.menu}>
{onDelete
? (
<IconButton aria-label="Delete time log" component="span" onClick={onDelete}>
<Delete color="error" />
</IconButton>
)
: ''}
<IconButton aria-label="Edit time log" component="span" onClick={onEdit}>
<Edit color="primary" />
</IconButton>
</div>
</div>
);
}
Example #2
| Source File: App.js From covid-vaccine-notification-system with BSD 3-Clause "New" or "Revised" License | 6 votes |
|
tableIcons = {
Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />),
Check: forwardRef((props, ref) => <Check {...props} ref={ref} />),
Clear: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
Delete: forwardRef((props, ref) => <Delete {...props} ref={ref} />),
DetailPanel: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
Edit: forwardRef((props, ref) => <Edit {...props} ref={ref} />),
Export: forwardRef((props, ref) => <Save {...props} ref={ref} />),
Filter: forwardRef((props, ref) => <FilterList {...props} ref={ref} />),
FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref} />),
LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref} />),
NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
PreviousPage: forwardRef((props, ref) => <ChevronLeft {...props} ref={ref} />),
ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
Search: forwardRef((props, ref) => <Search {...props} ref={ref} />),
SortArrow: forwardRef((props, ref) => <ArrowUpward {...props} ref={ref} />),
ThirdStateCheck: forwardRef((props, ref) => <Remove {...props} ref={ref} />),
ViewColumn: forwardRef((props, ref) => <ViewColumn {...props} ref={ref} />),
}
Example #3
| Source File: ActivitiesDataModule.js From ehr with GNU Affero General Public License v3.0 | 5 votes |
|
constructor(props) {
super(props);
this.state = {
loading: true,
filters: {
dateRange: {
begin: moment()
.clone()
.subtract(1, 'month'),
end: moment(),
},
},
page: 0,
rowsPerPage: 25,
data: [],
columns: [
{
label: '',
key: 'datePeriodFormatted',
},
{
label: t('ehr', 'Steps'),
key: 'steps',
},
{
label: t('ehr', 'Distance'),
key: 'distance',
},
{
label: t('ehr', 'Calories'),
key: 'calories',
},
],
activitiesDataToUpdate: null,
savingActivities: false,
};
this.contextMenuOptions = [
{
label: t('ehr', 'Edit'),
icon: <Edit fontSize="small" />,
onClick: this.onEditActivities,
},
{
label: t('ehr', 'Delete'),
icon: <Delete fontSize="small" />,
onClick: this.handleDelete,
},
];
this.activitiesService = new ActivitiesService();
this.activitiesEditModalRef = React.createRef();
}
Example #4
| Source File: DiabetesDataModule.js From ehr with GNU Affero General Public License v3.0 | 5 votes |
|
constructor(props) {
super(props);
this.state = {
loading: false,
filters: {
dateRange: {
begin: moment()
.clone()
.subtract(1, 'month'),
end: moment(),
},
},
page: 0,
rowsPerPage: 25,
data: [],
columns: [
{
label: '',
key: 'date',
},
{
label: t('ehr', 'Glucose Value'),
key: 'glucoseValue',
},
{
label: t('ehr', 'Glucose Measurer'),
key: 'glucoseMeasurer',
},
],
diabetesToUpdate: null,
savingDiabetes: false,
};
this.contextMenuOptions = [
{
label: t('ehr', 'Edit'),
icon: <Edit fontSize="small" />,
onClick: this.onEditDiabetesData,
},
{
label: t('ehr', 'Delete'),
icon: <Delete fontSize="small" />,
onClick: this.handleDelete,
},
];
this.diabetesDataService = new DiabetesDataService();
this.diabetesDataEditModalRef = React.createRef();
}
Example #5
| Source File: LabsDataModule.js From ehr with GNU Affero General Public License v3.0 | 5 votes |
|
constructor(props) {
super(props);
this.state = {
loading: true,
filters: {
dateRange: {
begin: moment()
.clone()
.subtract(1, 'month'),
end: moment(),
},
},
page: 0,
rowsPerPage: 25,
data: [],
columns: [
{
label: '',
key: 'date',
},
{
label: t('ehr', 'Leukocytes'),
key: 'leukocytes',
},
{
label: t('ehr', 'Hemoglobin'),
key: 'hemoglobin',
},
{
label: t('ehr', 'Platelets'),
key: 'platelets',
},
{
label: t('ehr', 'Lymphocytes'),
key: 'lymphocytes',
},
{
label: t('ehr', 'Neutrophils'),
key: 'neutrophils',
},
{
label: t('ehr', 'Eosinophils'),
key: 'eosinophils',
},
{
label: t('ehr', 'Basophils'),
key: 'basophils',
},
{
label: t('ehr', 'Monocytes'),
key: 'monocytes',
},
],
labsDataToUpdate: null,
savingLabs: false,
};
this.contextMenuOptions = [
{
label: t('ehr', 'Edit'),
icon: <Edit fontSize="small" />,
onClick: this.onEditLabs,
},
{
label: t('ehr', 'Delete'),
icon: <Delete fontSize="small" />,
onClick: this.handleDelete,
},
];
this.laboratoryService = new LaboratoryService();
this.labsEditModalRef = React.createRef();
}
Example #6
| Source File: PhysicalDataModule.js From ehr with GNU Affero General Public License v3.0 | 5 votes |
|
constructor(props) {
super(props);
this.state = {
loading: false,
filters: {
dateRange: {
begin: moment()
.clone()
.subtract(19, 'month'),
end: moment(),
},
},
page: 0,
rowsPerPage: 25,
data: [],
columns: [
{
label: '',
key: 'date',
},
{
label: t('ehr', 'Age'),
key: 'age',
},
{
label: t('ehr', 'Body Height'),
key: 'bodyHeight',
},
{
label: t('ehr', 'Body Weight'),
key: 'bodyWeight',
},
{
label: t('ehr', 'Body Mass Index'),
key: 'bmi',
},
],
physicalDataToUpdate: null,
savingPhysicalData: false,
};
this.contextMenuOptions = [
{
label: t('ehr', 'Edit'),
icon: <Edit fontSize="small" />,
onClick: this.onEditPhysicalData,
},
{
label: t('ehr', 'Delete'),
icon: <Delete fontSize="small" />,
onClick: this.handleDelete,
},
];
this.physicalDataService = new PhysicalDataService();
this.physicalDataEditModalRef = React.createRef();
}
Example #7
| Source File: VitalsDataModule.js From ehr with GNU Affero General Public License v3.0 | 5 votes |
|
constructor(props) {
super(props);
this.state = {
loading: true,
filters: {
dateRange: {
begin: moment()
.clone()
.subtract(1, 'month'),
end: moment(),
},
},
page: 0,
rowsPerPage: 25,
data: [],
columns: [
{
label: '',
key: 'date',
},
{
label: t('ehr', 'Systolic Blood Pressure'),
key: 'systolicBloodPressure',
},
{
label: t('ehr', 'Diastolic Blood Pressure'),
key: 'diastolicBloodPressure',
},
{
label: t('ehr', 'Heart Rate'),
key: 'heartRate',
},
{
label: t('ehr', 'Body Temperature'),
key: 'bodyTemperature',
},
{
label: t('ehr', 'Oxygen Saturation (SpO2)'),
key: 'oxygenSaturation',
},
],
vitalsDataToUpdate: null,
savingVitals: false,
};
this.contextMenuOptions = [
{
label: t('ehr', 'Edit'),
icon: <Edit fontSize="small" />,
onClick: this.onEditVitals,
},
{
label: t('ehr', 'Delete'),
icon: <Delete fontSize="small" />,
onClick: this.handleDelete,
},
];
this.vitalsService = new VitalsService();
this.vitalsEditModalRef = React.createRef();
}
Example #8
| Source File: TimeLog.js From jobtriage with MIT License | 5 votes |
|
TimeLogItem = props => {
const classes = useStyles();
const {
note, time, type, applicationId, id, onUpdate,
} = props;
const [openAddTimeLog, setOpenAddTimeLog] = useState(false);
const dayJS = new DayJsAdapter();
const formatedTime = dayJS.format(dayJS.date(time), 'MMM DD YYYY, hh:mm a');
const handleDelete = () => {
APIService.deleteTimeLog(applicationId, id).then(onUpdate);
};
const handleAddTimeLogOpen = () => {
setOpenAddTimeLog(true);
};
const handleAddTimeLogClose = () => {
setOpenAddTimeLog(false);
};
const FormatedNote = React.forwardRef((innerProps, ref) => (
<div {...innerProps} ref={ref}>
<Typography variant="body2">
{note.length > 35 ? `${note.substring(0, 37)}...` : note}
</Typography>
</div>
));
return (
<Paper className={classes.timeLogItem} elevation={3}>
<Typography variant="body2" style={{ width: '20%' }}>
{formatedTime}
</Typography>
<Typography variant="body2" style={{ width: '10%' }}>
{type.toUpperCase()}
</Typography>
<BootstrapTooltip title={note} style={{ width: '40%' }} arrow placement="top">
<FormatedNote />
</BootstrapTooltip>
<div className={classes.displayFlex} style={{ justifyContent: 'space-between' }}>
<a href={getCalenderLink(type, time, note)} label="Add to calender" target="_blank" rel="noopener noreferrer">
<IconButton aria-label="Add to calender" component="span">
<CalendarTodayOutlined />
</IconButton>
</a>
<IconButton aria-label="Edit time log" component="span" onClick={handleAddTimeLogOpen}>
<Edit color="primary" />
</IconButton>
<IconButton aria-label="Delete time log" component="span" onClick={handleDelete}>
<Delete color="error" />
</IconButton>
</div>
<TimeLogForm
open={openAddTimeLog}
onClose={handleAddTimeLogClose}
onChange={onUpdate}
applicationId={applicationId}
timeLogId={id}
time={time}
note={note}
type={type}
/>
</Paper>
);
}
Example #9
| Source File: Regions.js From treetracker-admin-client with GNU Affero General Public License v3.0 | 4 votes |
|
RegionTable = (props) => {
const { classes } = props;
// const sortOptions = { byName: 'name' };
const {
regions,
collections,
currentPage,
pageSize,
showCollections,
changeCurrentPage,
changePageSize,
// changeSort,
setShowCollections,
regionCount,
collectionCount,
upload,
updateRegion,
updateCollection,
deleteRegion,
deleteCollection,
} = useContext(RegionContext);
const { orgList, userHasOrg } = useContext(AppContext);
const [openEdit, setOpenEdit] = useState(false);
const [isUpload, setIsUpload] = useState(false);
const [selectedItem, setSelectedItem] = useState(undefined);
const [openDelete, setOpenDelete] = useState(false);
const [snackbarOpen, setSnackbarOpen] = useState(false);
const [snackbarMessage, setSnackbarMesssage] = useState('');
useEffect(() => {
if (!openDelete && !openEdit) {
// Wait for the dialog to disappear before clearing the selected item.
setTimeout(() => {
setSelectedItem(undefined);
setIsUpload(false);
}, 300);
}
}, [openDelete, openEdit]);
const tableRef = useRef(null);
const handleChangeCurrentPage = (event, value) => {
tableRef.current && tableRef.current.scrollIntoView();
changeCurrentPage(value);
};
const handleChangeRowsPerPage = (event) => {
changePageSize(Number(event.target.value));
changeCurrentPage(0);
};
const handleEdit = (item, isCollection) => {
setSelectedItem({
...item,
isCollection,
});
setOpenEdit(true);
};
const handleDelete = (item, isCollection) => {
setSelectedItem({
...item,
isCollection,
});
setOpenDelete(true);
};
const handleChangeShowCollections = (event, val) => {
if (val !== null) {
setShowCollections(val);
}
};
const handleUploadClick = () => {
setIsUpload(true);
setOpenEdit(true);
};
const handleSnackbarClose = (event, reason) => {
if (reason === 'clickaway') {
return;
}
setSnackbarOpen(false);
setSnackbarMesssage('');
};
const showSnackbar = (message) => {
setSnackbarMesssage(message);
setSnackbarOpen(true);
};
const RegionProperties = ({ region, max = 0 }) => {
return Object.keys(region.properties || {}).map((key, idx) => {
if (max === 0 || idx < max)
return (
<Grid key={`prop_${region.id}_${key}_${max}`}>
<span>
<b>{key}:</b>
</span>
<span>{JSON.stringify(region.properties[key])}</span>
{max > 0 && idx === max - 1 && <span> …</span>}
</Grid>
);
});
};
const RegionTableRows = () => {
return (showCollections ? collections : regions).map((item) => (
<TableRow key={item.id} role="listitem">
{/* <TableCell>
<Checkbox
onChange={(e) => handleSelect(e.target.checked, region.id)}
checked={selected.includes(region.id)}
/>
</TableCell> */}
<TableCell component="th" scope="row" data-testid="region">
{item.name}
</TableCell>
{!userHasOrg && (
<TableCell>
{orgList.find((org) => org.stakeholder_uuid === item.owner_id)
?.name || '---'}
</TableCell>
)}
{!showCollections && (
<>
<TableCell>{item.collection_name || '---'}</TableCell>
<Tooltip title={<RegionProperties region={item} />}>
<TableCell>
<RegionProperties region={item} max={3} />
</TableCell>
</Tooltip>
<TableCell align="center">
{item.show_on_org_map ? 'Yes' : 'No'}
</TableCell>
<TableCell align="center">
{item.calculate_statistics ? 'Yes' : 'No'}
</TableCell>
</>
)}
<TableCell align="right" className={classes.operations}>
<IconButton
title="edit"
onClick={() => handleEdit(item, showCollections)}
>
<Edit />
</IconButton>
<IconButton
title="delete"
onClick={() => handleDelete(item, showCollections)}
>
<Delete />
</IconButton>
</TableCell>
</TableRow>
));
};
const RegionTablePagination = () => (
<TablePagination
count={Number(showCollections ? collectionCount : regionCount)}
rowsPerPageOptions={[25, 50, 100, { label: 'All', value: -1 }]}
page={currentPage}
rowsPerPage={pageSize}
onChangePage={handleChangeCurrentPage}
onChangeRowsPerPage={handleChangeRowsPerPage}
SelectProps={{
inputProps: { 'aria-label': 'rows per page' },
native: true,
}}
/>
);
return (
<>
<Grid container className={classes.regionsTableContainer}>
<Paper elevation={3} className={classes.menu}>
<Menu variant="plain" />
</Paper>
<Grid item container className={classes.rightBox}>
<Grid item xs={12}>
<Grid
container
justify="space-between"
className={classes.titleBox}
>
<Grid item>
<Grid container>
<Grid item>
<Typography variant="h2">Regions</Typography>
</Grid>
</Grid>
</Grid>
<Grid item className={classes.headerButtonBox}>
<ToggleButtonGroup
color="primary"
value={showCollections}
exclusive
onChange={handleChangeShowCollections}
>
<ToggleButton value={false}>Regions</ToggleButton>
<ToggleButton value={true}>Collections</ToggleButton>
</ToggleButtonGroup>
</Grid>
<Grid item className={classes.headerButtonBox}>
<Button
onClick={handleUploadClick}
variant="contained"
className={classes.upload}
color="primary"
>
UPLOAD
</Button>
</Grid>
</Grid>
<Grid container direction="column" className={classes.bodyBox}>
<TableContainer component={Paper} ref={tableRef}>
<Table className={classes.table} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell>
Name
{/* <IconButton
title="sortbyName"
onClick={() => changeSort(sortOptions.byName)}
>
<SortIcon />
</IconButton> */}
</TableCell>
{!userHasOrg && <TableCell>Owner</TableCell>}
{!showCollections && (
<>
<TableCell>Collection</TableCell>
<TableCell>Properties</TableCell>
<TableCell align="center">Shown on Org Map</TableCell>
<TableCell align="center">
Statistics Calculated
</TableCell>
</>
)}
<TableCell></TableCell>
</TableRow>
</TableHead>
<TableBody>
<RegionTableRows />
</TableBody>
<TableFooter>
<TableRow>
<RegionTablePagination />
</TableRow>
</TableFooter>
</Table>
</TableContainer>
</Grid>
</Grid>
</Grid>
</Grid>
<EditModal
openEdit={openEdit}
setOpenEdit={setOpenEdit}
isUpload={isUpload}
selectedItem={selectedItem}
styles={{ ...classes }}
upload={upload}
updateRegion={updateRegion}
updateCollection={updateCollection}
showSnackbar={showSnackbar}
/>
<DeleteDialog
selectedItem={selectedItem}
openDelete={openDelete}
setOpenDelete={setOpenDelete}
deleteRegion={deleteRegion}
deleteCollection={deleteCollection}
showSnackbar={showSnackbar}
/>
<Snackbar
open={snackbarOpen}
autoHideDuration={3000}
onClose={handleSnackbarClose}
message={snackbarMessage}
action={
<>
<IconButton
size="small"
aria-label="close"
color="inherit"
onClick={handleSnackbarClose}
>
<Close fontSize="small" />
</IconButton>
</>
}
/>
</>
);
}
Example #10
| Source File: index.js From whaticket with MIT License | 4 votes |
|
Connections = () => {
const classes = useStyles();
const { whatsApps, loading } = useContext(WhatsAppsContext);
const [whatsAppModalOpen, setWhatsAppModalOpen] = useState(false);
const [qrModalOpen, setQrModalOpen] = useState(false);
const [selectedWhatsApp, setSelectedWhatsApp] = useState(null);
const [confirmModalOpen, setConfirmModalOpen] = useState(false);
const confirmationModalInitialState = {
action: "",
title: "",
message: "",
whatsAppId: "",
open: false,
};
const [confirmModalInfo, setConfirmModalInfo] = useState(
confirmationModalInitialState
);
const handleStartWhatsAppSession = async whatsAppId => {
try {
await api.post(`/whatsappsession/${whatsAppId}`);
} catch (err) {
toastError(err);
}
};
const handleRequestNewQrCode = async whatsAppId => {
try {
await api.put(`/whatsappsession/${whatsAppId}`);
} catch (err) {
toastError(err);
}
};
const handleOpenWhatsAppModal = () => {
setSelectedWhatsApp(null);
setWhatsAppModalOpen(true);
};
const handleCloseWhatsAppModal = useCallback(() => {
setWhatsAppModalOpen(false);
setSelectedWhatsApp(null);
}, [setSelectedWhatsApp, setWhatsAppModalOpen]);
const handleOpenQrModal = whatsApp => {
setSelectedWhatsApp(whatsApp);
setQrModalOpen(true);
};
const handleCloseQrModal = useCallback(() => {
setSelectedWhatsApp(null);
setQrModalOpen(false);
}, [setQrModalOpen, setSelectedWhatsApp]);
const handleEditWhatsApp = whatsApp => {
setSelectedWhatsApp(whatsApp);
setWhatsAppModalOpen(true);
};
const handleOpenConfirmationModal = (action, whatsAppId) => {
if (action === "disconnect") {
setConfirmModalInfo({
action: action,
title: i18n.t("connections.confirmationModal.disconnectTitle"),
message: i18n.t("connections.confirmationModal.disconnectMessage"),
whatsAppId: whatsAppId,
});
}
if (action === "delete") {
setConfirmModalInfo({
action: action,
title: i18n.t("connections.confirmationModal.deleteTitle"),
message: i18n.t("connections.confirmationModal.deleteMessage"),
whatsAppId: whatsAppId,
});
}
setConfirmModalOpen(true);
};
const handleSubmitConfirmationModal = async () => {
if (confirmModalInfo.action === "disconnect") {
try {
await api.delete(`/whatsappsession/${confirmModalInfo.whatsAppId}`);
} catch (err) {
toastError(err);
}
}
if (confirmModalInfo.action === "delete") {
try {
await api.delete(`/whatsapp/${confirmModalInfo.whatsAppId}`);
toast.success(i18n.t("connections.toasts.deleted"));
} catch (err) {
toastError(err);
}
}
setConfirmModalInfo(confirmationModalInitialState);
};
const renderActionButtons = whatsApp => {
return (
<>
{whatsApp.status === "qrcode" && (
<Button
size="small"
variant="contained"
color="primary"
onClick={() => handleOpenQrModal(whatsApp)}
>
{i18n.t("connections.buttons.qrcode")}
</Button>
)}
{whatsApp.status === "DISCONNECTED" && (
<>
<Button
size="small"
variant="outlined"
color="primary"
onClick={() => handleStartWhatsAppSession(whatsApp.id)}
>
{i18n.t("connections.buttons.tryAgain")}
</Button>{" "}
<Button
size="small"
variant="outlined"
color="secondary"
onClick={() => handleRequestNewQrCode(whatsApp.id)}
>
{i18n.t("connections.buttons.newQr")}
</Button>
</>
)}
{(whatsApp.status === "CONNECTED" ||
whatsApp.status === "PAIRING" ||
whatsApp.status === "TIMEOUT") && (
<Button
size="small"
variant="outlined"
color="secondary"
onClick={() => {
handleOpenConfirmationModal("disconnect", whatsApp.id);
}}
>
{i18n.t("connections.buttons.disconnect")}
</Button>
)}
{whatsApp.status === "OPENING" && (
<Button size="small" variant="outlined" disabled color="default">
{i18n.t("connections.buttons.connecting")}
</Button>
)}
</>
);
};
const renderStatusToolTips = whatsApp => {
return (
<div className={classes.customTableCell}>
{whatsApp.status === "DISCONNECTED" && (
<CustomToolTip
title={i18n.t("connections.toolTips.disconnected.title")}
content={i18n.t("connections.toolTips.disconnected.content")}
>
<SignalCellularConnectedNoInternet0Bar color="secondary" />
</CustomToolTip>
)}
{whatsApp.status === "OPENING" && (
<CircularProgress size={24} className={classes.buttonProgress} />
)}
{whatsApp.status === "qrcode" && (
<CustomToolTip
title={i18n.t("connections.toolTips.qrcode.title")}
content={i18n.t("connections.toolTips.qrcode.content")}
>
<CropFree />
</CustomToolTip>
)}
{whatsApp.status === "CONNECTED" && (
<CustomToolTip title={i18n.t("connections.toolTips.connected.title")}>
<SignalCellular4Bar style={{ color: green[500] }} />
</CustomToolTip>
)}
{(whatsApp.status === "TIMEOUT" || whatsApp.status === "PAIRING") && (
<CustomToolTip
title={i18n.t("connections.toolTips.timeout.title")}
content={i18n.t("connections.toolTips.timeout.content")}
>
<SignalCellularConnectedNoInternet2Bar color="secondary" />
</CustomToolTip>
)}
</div>
);
};
return (
<MainContainer>
<ConfirmationModal
title={confirmModalInfo.title}
open={confirmModalOpen}
onClose={setConfirmModalOpen}
onConfirm={handleSubmitConfirmationModal}
>
{confirmModalInfo.message}
</ConfirmationModal>
<QrcodeModal
open={qrModalOpen}
onClose={handleCloseQrModal}
whatsAppId={!whatsAppModalOpen && selectedWhatsApp?.id}
/>
<WhatsAppModal
open={whatsAppModalOpen}
onClose={handleCloseWhatsAppModal}
whatsAppId={!qrModalOpen && selectedWhatsApp?.id}
/>
<MainHeader>
<Title>{i18n.t("connections.title")}</Title>
<MainHeaderButtonsWrapper>
<Button
variant="contained"
color="primary"
onClick={handleOpenWhatsAppModal}
>
{i18n.t("connections.buttons.add")}
</Button>
</MainHeaderButtonsWrapper>
</MainHeader>
<Paper className={classes.mainPaper} variant="outlined">
<Table size="small">
<TableHead>
<TableRow>
<TableCell align="center">
{i18n.t("connections.table.name")}
</TableCell>
<TableCell align="center">
{i18n.t("connections.table.status")}
</TableCell>
<TableCell align="center">
{i18n.t("connections.table.session")}
</TableCell>
<TableCell align="center">
{i18n.t("connections.table.lastUpdate")}
</TableCell>
<TableCell align="center">
{i18n.t("connections.table.default")}
</TableCell>
<TableCell align="center">
{i18n.t("connections.table.actions")}
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{loading ? (
<TableRowSkeleton />
) : (
<>
{whatsApps?.length > 0 &&
whatsApps.map(whatsApp => (
<TableRow key={whatsApp.id}>
<TableCell align="center">{whatsApp.name}</TableCell>
<TableCell align="center">
{renderStatusToolTips(whatsApp)}
</TableCell>
<TableCell align="center">
{renderActionButtons(whatsApp)}
</TableCell>
<TableCell align="center">
{format(parseISO(whatsApp.updatedAt), "dd/MM/yy HH:mm")}
</TableCell>
<TableCell align="center">
{whatsApp.isDefault && (
<div className={classes.customTableCell}>
<CheckCircle style={{ color: green[500] }} />
</div>
)}
</TableCell>
<TableCell align="center">
<IconButton
size="small"
onClick={() => handleEditWhatsApp(whatsApp)}
>
<Edit />
</IconButton>
<IconButton
size="small"
onClick={e => {
handleOpenConfirmationModal("delete", whatsApp.id);
}}
>
<DeleteOutline />
</IconButton>
</TableCell>
</TableRow>
))}
</>
)}
</TableBody>
</Table>
</Paper>
</MainContainer>
);
}
Example #11
| Source File: index.js From whaticket with MIT License | 4 votes |
|
Queues = () => {
const classes = useStyles();
const [queues, dispatch] = useReducer(reducer, []);
const [loading, setLoading] = useState(false);
const [queueModalOpen, setQueueModalOpen] = useState(false);
const [selectedQueue, setSelectedQueue] = useState(null);
const [confirmModalOpen, setConfirmModalOpen] = useState(false);
useEffect(() => {
(async () => {
setLoading(true);
try {
const { data } = await api.get("/queue");
dispatch({ type: "LOAD_QUEUES", payload: data });
setLoading(false);
} catch (err) {
toastError(err);
setLoading(false);
}
})();
}, []);
useEffect(() => {
const socket = openSocket();
socket.on("queue", (data) => {
if (data.action === "update" || data.action === "create") {
dispatch({ type: "UPDATE_QUEUES", payload: data.queue });
}
if (data.action === "delete") {
dispatch({ type: "DELETE_QUEUE", payload: data.queueId });
}
});
return () => {
socket.disconnect();
};
}, []);
const handleOpenQueueModal = () => {
setQueueModalOpen(true);
setSelectedQueue(null);
};
const handleCloseQueueModal = () => {
setQueueModalOpen(false);
setSelectedQueue(null);
};
const handleEditQueue = (queue) => {
setSelectedQueue(queue);
setQueueModalOpen(true);
};
const handleCloseConfirmationModal = () => {
setConfirmModalOpen(false);
setSelectedQueue(null);
};
const handleDeleteQueue = async (queueId) => {
try {
await api.delete(`/queue/${queueId}`);
toast.success(i18n.t("Queue deleted successfully!"));
} catch (err) {
toastError(err);
}
setSelectedQueue(null);
};
return (
<MainContainer>
<ConfirmationModal
title={
selectedQueue &&
`${i18n.t("queues.confirmationModal.deleteTitle")} ${
selectedQueue.name
}?`
}
open={confirmModalOpen}
onClose={handleCloseConfirmationModal}
onConfirm={() => handleDeleteQueue(selectedQueue.id)}
>
{i18n.t("queues.confirmationModal.deleteMessage")}
</ConfirmationModal>
<QueueModal
open={queueModalOpen}
onClose={handleCloseQueueModal}
queueId={selectedQueue?.id}
/>
<MainHeader>
<Title>{i18n.t("queues.title")}</Title>
<MainHeaderButtonsWrapper>
<Button
variant="contained"
color="primary"
onClick={handleOpenQueueModal}
>
{i18n.t("queues.buttons.add")}
</Button>
</MainHeaderButtonsWrapper>
</MainHeader>
<Paper className={classes.mainPaper} variant="outlined">
<Table size="small">
<TableHead>
<TableRow>
<TableCell align="center">
{i18n.t("queues.table.name")}
</TableCell>
<TableCell align="center">
{i18n.t("queues.table.color")}
</TableCell>
<TableCell align="center">
{i18n.t("queues.table.greeting")}
</TableCell>
<TableCell align="center">
{i18n.t("queues.table.actions")}
</TableCell>
</TableRow>
</TableHead>
<TableBody>
<>
{queues.map((queue) => (
<TableRow key={queue.id}>
<TableCell align="center">{queue.name}</TableCell>
<TableCell align="center">
<div className={classes.customTableCell}>
<span
style={{
backgroundColor: queue.color,
width: 60,
height: 20,
alignSelf: "center",
}}
/>
</div>
</TableCell>
<TableCell align="center">
<div className={classes.customTableCell}>
<Typography
style={{ width: 300, align: "center" }}
noWrap
variant="body2"
>
{queue.greetingMessage}
</Typography>
</div>
</TableCell>
<TableCell align="center">
<IconButton
size="small"
onClick={() => handleEditQueue(queue)}
>
<Edit />
</IconButton>
<IconButton
size="small"
onClick={() => {
setSelectedQueue(queue);
setConfirmModalOpen(true);
}}
>
<DeleteOutline />
</IconButton>
</TableCell>
</TableRow>
))}
{loading && <TableRowSkeleton columns={4} />}
</>
</TableBody>
</Table>
</Paper>
</MainContainer>
);
}
Example #12
| Source File: index.js From whaticket with MIT License | 4 votes |
|
QuickAnswers = () => {
const classes = useStyles();
const [loading, setLoading] = useState(false);
const [pageNumber, setPageNumber] = useState(1);
const [searchParam, setSearchParam] = useState("");
const [quickAnswers, dispatch] = useReducer(reducer, []);
const [selectedQuickAnswers, setSelectedQuickAnswers] = useState(null);
const [quickAnswersModalOpen, setQuickAnswersModalOpen] = useState(false);
const [deletingQuickAnswers, setDeletingQuickAnswers] = useState(null);
const [confirmModalOpen, setConfirmModalOpen] = useState(false);
const [hasMore, setHasMore] = useState(false);
useEffect(() => {
dispatch({ type: "RESET" });
setPageNumber(1);
}, [searchParam]);
useEffect(() => {
setLoading(true);
const delayDebounceFn = setTimeout(() => {
const fetchQuickAnswers = async () => {
try {
const { data } = await api.get("/quickAnswers/", {
params: { searchParam, pageNumber },
});
dispatch({ type: "LOAD_QUICK_ANSWERS", payload: data.quickAnswers });
setHasMore(data.hasMore);
setLoading(false);
} catch (err) {
toastError(err);
}
};
fetchQuickAnswers();
}, 500);
return () => clearTimeout(delayDebounceFn);
}, [searchParam, pageNumber]);
useEffect(() => {
const socket = openSocket();
socket.on("quickAnswer", (data) => {
if (data.action === "update" || data.action === "create") {
dispatch({ type: "UPDATE_QUICK_ANSWERS", payload: data.quickAnswer });
}
if (data.action === "delete") {
dispatch({
type: "DELETE_QUICK_ANSWERS",
payload: +data.quickAnswerId,
});
}
});
return () => {
socket.disconnect();
};
}, []);
const handleSearch = (event) => {
setSearchParam(event.target.value.toLowerCase());
};
const handleOpenQuickAnswersModal = () => {
setSelectedQuickAnswers(null);
setQuickAnswersModalOpen(true);
};
const handleCloseQuickAnswersModal = () => {
setSelectedQuickAnswers(null);
setQuickAnswersModalOpen(false);
};
const handleEditQuickAnswers = (quickAnswer) => {
setSelectedQuickAnswers(quickAnswer);
setQuickAnswersModalOpen(true);
};
const handleDeleteQuickAnswers = async (quickAnswerId) => {
try {
await api.delete(`/quickAnswers/${quickAnswerId}`);
toast.success(i18n.t("quickAnswers.toasts.deleted"));
} catch (err) {
toastError(err);
}
setDeletingQuickAnswers(null);
setSearchParam("");
setPageNumber(1);
};
const loadMore = () => {
setPageNumber((prevState) => prevState + 1);
};
const handleScroll = (e) => {
if (!hasMore || loading) return;
const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
if (scrollHeight - (scrollTop + 100) < clientHeight) {
loadMore();
}
};
return (
<MainContainer>
<ConfirmationModal
title={
deletingQuickAnswers &&
`${i18n.t("quickAnswers.confirmationModal.deleteTitle")} ${
deletingQuickAnswers.shortcut
}?`
}
open={confirmModalOpen}
onClose={setConfirmModalOpen}
onConfirm={() => handleDeleteQuickAnswers(deletingQuickAnswers.id)}
>
{i18n.t("quickAnswers.confirmationModal.deleteMessage")}
</ConfirmationModal>
<QuickAnswersModal
open={quickAnswersModalOpen}
onClose={handleCloseQuickAnswersModal}
aria-labelledby="form-dialog-title"
quickAnswerId={selectedQuickAnswers && selectedQuickAnswers.id}
></QuickAnswersModal>
<MainHeader>
<Title>{i18n.t("quickAnswers.title")}</Title>
<MainHeaderButtonsWrapper>
<TextField
placeholder={i18n.t("quickAnswers.searchPlaceholder")}
type="search"
value={searchParam}
onChange={handleSearch}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<SearchIcon style={{ color: "gray" }} />
</InputAdornment>
),
}}
/>
<Button
variant="contained"
color="primary"
onClick={handleOpenQuickAnswersModal}
>
{i18n.t("quickAnswers.buttons.add")}
</Button>
</MainHeaderButtonsWrapper>
</MainHeader>
<Paper
className={classes.mainPaper}
variant="outlined"
onScroll={handleScroll}
>
<Table size="small">
<TableHead>
<TableRow>
<TableCell align="center">
{i18n.t("quickAnswers.table.shortcut")}
</TableCell>
<TableCell align="center">
{i18n.t("quickAnswers.table.message")}
</TableCell>
<TableCell align="center">
{i18n.t("quickAnswers.table.actions")}
</TableCell>
</TableRow>
</TableHead>
<TableBody>
<>
{quickAnswers.map((quickAnswer) => (
<TableRow key={quickAnswer.id}>
<TableCell align="center">{quickAnswer.shortcut}</TableCell>
<TableCell align="center">{quickAnswer.message}</TableCell>
<TableCell align="center">
<IconButton
size="small"
onClick={() => handleEditQuickAnswers(quickAnswer)}
>
<Edit />
</IconButton>
<IconButton
size="small"
onClick={(e) => {
setConfirmModalOpen(true);
setDeletingQuickAnswers(quickAnswer);
}}
>
<DeleteOutline />
</IconButton>
</TableCell>
</TableRow>
))}
{loading && <TableRowSkeleton columns={3} />}
</>
</TableBody>
</Table>
</Paper>
</MainContainer>
);
}
Example #13
| Source File: Activation.jsx From pwa with MIT License | 4 votes |
|
export default function Activation({ onBackClick, onActivate }) {
const ttl = useSelector((store) => store.MyActivities.ttl);
const phone = useSelector((store) => store.MyActivities.phone);
const condition = useSelector((store) => store.MyActivities.condition);
const { i: countdown, start } = useTimer({ start: ttl });
const [code, setCode] = useState('');
const [isDialogOpen, setIsDialogOpen] = useState(false);
const [smsSent, setSmsSent] = useState(false);
const [isAlertOpen, setIsAlertOpen] = useState(false);
const [alertText, setAlertText] = useState('');
useEffect(() => {
start();
/*eslint-disable-next-line react-hooks/exhaustive-deps*/
}, []);
function sendActivationSMS() {
setIsDialogOpen(true);
axios({
method: 'POST',
url: `${process.env.REACT_APP_REGISTER_USER_AGAIN}`,
data: {
phone_number: phone,
risk_group: condition,
},
})
.then(() => {
setIsDialogOpen(false);
setSmsSent(true);
})
.catch((err) => {
console.error(err);
setAlertText('ارسال کد با خطا مواجه شد!');
setIsAlertOpen(true);
setIsDialogOpen(false);
});
}
function onSubmit() {
setIsDialogOpen(true);
axios({
method: 'POST',
url: `${process.env.REACT_APP_ACTIVATE_USER}`,
data: {
phone_number: phone,
code: perToEngDigits(code),
},
})
.then(({ data }) => {
setIsDialogOpen(false);
onActivate({
token: data.access_token,
user: data.user,
});
})
.catch((err) => {
console.error(err);
setAlertText('کد واردشده اشتباه است!');
setIsAlertOpen(true);
setIsDialogOpen(false);
});
}
return (
<>
<AppBar position="static" className="activity-header">
<Toolbar>
<img src={logo} className="app-header-logo" alt="logo" />
<IconButton color="inherit" onClick={onBackClick}>
<KeyboardBackspace />
</IconButton>
</Toolbar>
</AppBar>
<div className={styles.container}>
{/* #FIXME Use formattedMessage */}
<Typography align="center">
کد فعالسازی ۵ رقمی که برای شما پیامک شد را وارد کنید.
</Typography>
<Box mt={2} textAlign="center">
<Button color="primary" onClick={onBackClick}>
<div>{phone}</div>
<Edit className={styles.editIcon} fontSize="small" />
</Button>
</Box>
<Box mt={4}>
<TextField
label="کد فعالسازی"
value={code}
onChange={(e) => setCode(e.target.value)}
fullWidth
/>
</Box>
<Box mt={3} textAlign="center">
<Button
variant="contained"
color="primary"
size="large"
className="activation-btn"
onClick={onSubmit}
>
فعالسازی
</Button>
</Box>
<Box mt={3}>
<Typography color="primary" align="center">
{`فرصت باقی مانده برای ورود: ${Math.floor(countdown / 60)}:${
countdown % 60
}`}
</Typography>
</Box>
{!smsSent && (
<Box mt={2} textAlign="center">
<Button color="primary" onClick={sendActivationSMS}>
ارسال مجدد کد فعالسازی
</Button>
</Box>
)}
</div>
<Dialog open={isDialogOpen}>
<div className={styles.dialogContent}>
<CircularProgress />
<Box ml={3}>{'لطفا کمی صبر کنید.'}</Box>
</div>
</Dialog>
<Snackbar
anchorOrigin={{
vertical: 'bottom',
horizontal: 'center',
}}
open={isAlertOpen}
autoHideDuration={5000}
onClose={() => setIsAlertOpen(false)}
message={alertText}
/>
</>
);
}
