[WMS-39] Role Page Added, date field bug fixed
This commit is contained in:
m0n02hz
@@ -11,7 +11,7 @@ export default function DateTimeInput({ disabled, value }) {
|
||||
|
||||
useEffect(() => {
|
||||
setDate(value);
|
||||
}, [value])
|
||||
}, [value]);
|
||||
|
||||
const handleChange = (newValue) => {
|
||||
setDate(newValue);
|
||||
|
||||
218
src/pages/createEditUserRole/index.js
Normal file
218
src/pages/createEditUserRole/index.js
Normal file
@@ -0,0 +1,218 @@
|
||||
import React from 'react';
|
||||
import MDBox from 'components/MDBox';
|
||||
import DashboardNavbar from 'components/DashboardNavbar';
|
||||
import Footer from 'components/Footer';
|
||||
import DashboardLayout from 'layouts/DashboardLayout';
|
||||
import { makeStyles } from '@mui/styles';
|
||||
import { Box, Grid } from '@mui/material';
|
||||
import MDButton from 'components/Button';
|
||||
import TransferList from 'components/MDTransferList';
|
||||
import DateTimeInput from 'components/DateTimePicker';
|
||||
import Switch from 'components/Switch';
|
||||
import MDTypography from 'components/MDTypography';
|
||||
import MDInput from 'components/MDInput';
|
||||
import TextareaAutosize from '@mui/material/TextareaAutosize';
|
||||
import Typography from '@mui/material/Typography';
|
||||
|
||||
const useStyles = makeStyles(() => ({
|
||||
labelSize: {
|
||||
fontSize: '16px',
|
||||
letterSpacing: '0.01em',
|
||||
color: '#000',
|
||||
marginBottom: '4px'
|
||||
},
|
||||
boxWrap: {
|
||||
backgroundColor: '#fff',
|
||||
border: '1px solid #c2c2c2',
|
||||
borderTop: '3px solid #007aff',
|
||||
display: 'inline-block',
|
||||
padding: '12px',
|
||||
borderRadius: '4px'
|
||||
},
|
||||
noLegend: {
|
||||
display: 'none'
|
||||
},
|
||||
fullWidth: {
|
||||
width: '100%',
|
||||
borderColor: '#d2d6da',
|
||||
borderRadius: '0.375rem'
|
||||
},
|
||||
switchSpacer: {
|
||||
margin: '0',
|
||||
'& .MuiFormControlLabel-root': {
|
||||
margin: '0'
|
||||
},
|
||||
'& .MuiSwitch-root': {
|
||||
margin: '0'
|
||||
}
|
||||
}
|
||||
}));
|
||||
function CreateEditUserRole() {
|
||||
const classes = useStyles();
|
||||
return (
|
||||
<DashboardLayout>
|
||||
<DashboardNavbar />
|
||||
<MDBox px={2} py={3}>
|
||||
<Grid container spacing={2} className={classes.margin}>
|
||||
<Grid item xs={8} md={8}>
|
||||
<Grid container spacing={2} className={classes.margin}>
|
||||
<Grid item xs={12}>
|
||||
<Box component="div" sx={{}} className={classes.labelSize}>
|
||||
Warehouse name
|
||||
</Box>
|
||||
<MDInput fullWidth name="warehousename" type="text" variant="outlined" />
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Box component="div" className={classes.labelSize}>
|
||||
Description
|
||||
</Box>
|
||||
<TextareaAutosize className={classes.fullWidth} minRows={5} />
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Grid container spacing={2} className={classes.margin}>
|
||||
<Grid item xs={6}>
|
||||
<Box component="div" className={classes.labelSize}>
|
||||
Created By
|
||||
</Box>
|
||||
<MDInput fullWidth name="warehousename" type="text" variant="outlined" />
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<Box component="div" className={classes.labelSize}>
|
||||
Date & Time
|
||||
</Box>
|
||||
<DateTimeInput />
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<Box component="div" className={classes.labelSize}>
|
||||
Last Updated by
|
||||
</Box>
|
||||
<MDInput fullWidth name="warehousename" type="text" variant="outlined" />
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<Box component="div" className={classes.labelSize}>
|
||||
Date & Time
|
||||
</Box>
|
||||
<DateTimeInput />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid item xs={4}>
|
||||
<Box component="div" className={classes.labelSize}>
|
||||
Choose avatar component here
|
||||
</Box>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid container spacing={4} sx={{ marginTop: '-6px' }}>
|
||||
<Grid item xs={12} md={4}>
|
||||
<MDBox
|
||||
sx={{
|
||||
backgroundColor: '#fff',
|
||||
border: '1px solid #c2c2c2',
|
||||
borderTop: '7px solid #007aff',
|
||||
padding: '12px',
|
||||
borderRadius: '4px'
|
||||
}}
|
||||
>
|
||||
<Typography gutterBottom variant="h6" component="div">
|
||||
Warehouse
|
||||
</Typography>
|
||||
<TransferList />
|
||||
</MDBox>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={4}>
|
||||
<MDBox
|
||||
sx={{
|
||||
backgroundColor: '#fff',
|
||||
border: '1px solid #c2c2c2',
|
||||
borderTop: '7px solid #007aff',
|
||||
padding: '12px',
|
||||
borderRadius: '4px'
|
||||
}}
|
||||
>
|
||||
<Typography gutterBottom variant="h6" component="div">
|
||||
Warehouse
|
||||
</Typography>
|
||||
<TransferList />
|
||||
</MDBox>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid container spacing={2} sx={{ marginTop: '12px' }}>
|
||||
<Grid item xs={12} md={3}>
|
||||
<MDBox
|
||||
sx={{
|
||||
backgroundColor: '#fff',
|
||||
border: '1px solid #c2c2c2',
|
||||
borderTop: '7px solid #007aff',
|
||||
padding: '12px',
|
||||
borderRadius: '4px'
|
||||
}}
|
||||
>
|
||||
<Typography gutterBottom variant="h6" component="div">
|
||||
Process
|
||||
</Typography>
|
||||
<MDBox
|
||||
display="flex"
|
||||
justifyContent="space-between"
|
||||
alignItems="center"
|
||||
lineHeight={1}
|
||||
className={classes.switchSpacer}
|
||||
>
|
||||
<MDTypography variant="body2">Sidenav Mini</MDTypography>
|
||||
<Switch checked />
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={3}>
|
||||
<MDBox
|
||||
sx={{
|
||||
backgroundColor: '#fff',
|
||||
border: '1px solid #c2c2c2',
|
||||
borderTop: '7px solid #007aff',
|
||||
padding: '12px',
|
||||
borderRadius: '4px'
|
||||
}}
|
||||
>
|
||||
<Typography gutterBottom variant="h6" component="div">
|
||||
Application
|
||||
</Typography>
|
||||
<MDBox
|
||||
display="flex"
|
||||
justifyContent="space-between"
|
||||
alignItems="center"
|
||||
lineHeight={1}
|
||||
className={classes.switchSpacer}
|
||||
>
|
||||
<MDTypography variant="body2">Sidenav Mini</MDTypography>
|
||||
<Switch checked />
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<MDBox
|
||||
display="flex"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
lineHeight={1}
|
||||
sx={{ marginBottom: '15px', marginTop: '24px' }}
|
||||
>
|
||||
<MDButton
|
||||
size="medium"
|
||||
color="primary"
|
||||
variant="outlined"
|
||||
type="submit"
|
||||
sx={{ marginRight: '15px' }}
|
||||
>
|
||||
Cancel
|
||||
</MDButton>
|
||||
<MDButton size="medium" color="primary" variant="contained">
|
||||
Save
|
||||
</MDButton>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
<Footer />
|
||||
</DashboardLayout>
|
||||
);
|
||||
}
|
||||
export default CreateEditUserRole;
|
||||
@@ -1,382 +0,0 @@
|
||||
import React from 'react';
|
||||
import MDBox from 'components/MDBox';
|
||||
import DashboardNavbar from 'components/DashboardNavbar';
|
||||
import DashboardLayout from 'layouts/DashboardLayout';
|
||||
import { makeStyles } from '@mui/styles';
|
||||
import { Box, Grid } from '@mui/material';
|
||||
import MDButton from 'components/Button';
|
||||
import TransferList from 'components/MDTransferList';
|
||||
import DateTimeInput from 'components/DateTimePicker';
|
||||
import Switch from 'components/Switch';
|
||||
import MDTypography from 'components/MDTypography';
|
||||
import MDInput from 'components/MDInput';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import UserIcon from 'assets/images/userIcon.png';
|
||||
import EditIcon from 'assets/images/edit-icon.png';
|
||||
import OutlinedInput from '@mui/material/OutlinedInput';
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
import Select from '@mui/material/Select';
|
||||
import Breadcrumbs from 'components/Breadcrumbs';
|
||||
|
||||
const useStyles = makeStyles(() => ({
|
||||
labelSize: {
|
||||
fontSize: '16px',
|
||||
letterSpacing: '0.01em',
|
||||
color: '#000',
|
||||
marginBottom: '4px'
|
||||
},
|
||||
boxWrap: {
|
||||
backgroundColor: '#fff',
|
||||
border: '1px solid #c2c2c2',
|
||||
borderTop: '3px solid #007aff',
|
||||
display: 'inline-block',
|
||||
padding: '12px',
|
||||
borderRadius: '4px'
|
||||
},
|
||||
noLegend: {
|
||||
display: 'none'
|
||||
},
|
||||
fullWidth: {
|
||||
width: '100%',
|
||||
borderColor: '#d2d6da',
|
||||
borderRadius: '0.375rem'
|
||||
},
|
||||
switchSpacer: {
|
||||
margin: '0',
|
||||
'& .MuiFormControlLabel-root': {
|
||||
margin: '0'
|
||||
},
|
||||
'& .MuiSwitch-root': {
|
||||
margin: '0'
|
||||
}
|
||||
}
|
||||
}));
|
||||
function CreateUserRole() {
|
||||
const classes = useStyles();
|
||||
const [personName, setPersonName] = React.useState([]);
|
||||
|
||||
const handleChange = (event) => {
|
||||
const {
|
||||
target: { value }
|
||||
} = event;
|
||||
setPersonName(
|
||||
// On autofill we get a stringified value.
|
||||
typeof value === 'string' ? value.split(',') : value
|
||||
);
|
||||
};
|
||||
return (
|
||||
<DashboardLayout>
|
||||
<DashboardNavbar />
|
||||
<Breadcrumbs
|
||||
title="Role Details"
|
||||
route={[
|
||||
{ name: 'Home', path: '/home' },
|
||||
{ name: 'Setup', path: '/setup' },
|
||||
{ name: 'Access', path: '/setup/users-access' },
|
||||
{ name: 'Role Details' }
|
||||
]}
|
||||
/>
|
||||
<MDBox px={2} sx={{ backgroundColor: '#fff' }}>
|
||||
<MDBox mx={2} sx={{ border: '1px solid #C4C4C4', borderRadius: '4px', padding: '30px' }}>
|
||||
<MDBox sx={{ width: '50%', margin: 'auto' }}>
|
||||
<MDBox sx={{ width: '120px', margin: 'auto', position: 'relative' }}>
|
||||
<MDBox
|
||||
sx={{
|
||||
width: '120px',
|
||||
height: '120px',
|
||||
backgroundColor: '#333333',
|
||||
borderRadius: '50%'
|
||||
}}
|
||||
/>
|
||||
<MDBox sx={{ position: 'absolute', bottom: '0', right: '0', cursor: 'pointer' }}>
|
||||
<img src={EditIcon} alt="img" />
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
<MDBox sx={{ marginBottom: '24px' }}>
|
||||
<Box component="div" sx={{}} className={classes.labelSize}>
|
||||
User Name
|
||||
</Box>
|
||||
<MDInput fullWidth name="warehousename" type="text" variant="outlined" />
|
||||
</MDBox>
|
||||
<MDBox sx={{ marginBottom: '24px' }}>
|
||||
<Box component="div" sx={{}} className={classes.labelSize}>
|
||||
Phone Number
|
||||
</Box>
|
||||
<MDInput fullWidth name="warehousename" type="text" variant="outlined" />
|
||||
</MDBox>
|
||||
<MDBox sx={{ marginBottom: '24px' }}>
|
||||
<Box component="div" sx={{}} className={classes.labelSize}>
|
||||
Role
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', columnGap: '20px' }}>
|
||||
<Box sx={{ width: '70%' }}>
|
||||
<Select
|
||||
multiple
|
||||
displayEmpty
|
||||
value={personName}
|
||||
input={<OutlinedInput />}
|
||||
renderValue={(selected) => {
|
||||
if (selected.length === 0) {
|
||||
return 'Placeholder';
|
||||
}
|
||||
|
||||
return selected.join(', ');
|
||||
}}
|
||||
inputProps={{ 'aria-label': 'Without label' }}
|
||||
sx={{
|
||||
width: '100%'
|
||||
}}
|
||||
onChange={handleChange}
|
||||
>
|
||||
<MenuItem disabled value="">
|
||||
Placeholder
|
||||
</MenuItem>
|
||||
<MenuItem>Lorem Ipsum</MenuItem>
|
||||
</Select>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
width: '30%',
|
||||
border: '1px solid #C4C4C4',
|
||||
borderRadius: '4px'
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
component="div"
|
||||
sx={{
|
||||
fontSize: '16px',
|
||||
lineHeight: '20px',
|
||||
letterSpacing: '0.01em',
|
||||
textTransform: 'capitalize',
|
||||
color: '#000',
|
||||
marginLeft: '10px'
|
||||
}}
|
||||
>
|
||||
Access
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
position: 'relative',
|
||||
left: '20px'
|
||||
}}
|
||||
>
|
||||
<Switch checked />
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</MDBox>
|
||||
<Grid container spacing={2} className={classes.margin}>
|
||||
<Grid item xs={12}>
|
||||
<Grid container spacing={2} className={classes.margin}>
|
||||
<Grid item xs={6}>
|
||||
<Box component="div" className={classes.labelSize}>
|
||||
Created By
|
||||
</Box>
|
||||
<MDInput fullWidth name="warehousename" type="text" variant="outlined" />
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<Box component="div" className={classes.labelSize}>
|
||||
Date & Time
|
||||
</Box>
|
||||
<DateTimeInput />
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<Box component="div" className={classes.labelSize}>
|
||||
Last Updated by
|
||||
</Box>
|
||||
<MDInput fullWidth name="warehousename" type="text" variant="outlined" />
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<Box component="div" className={classes.labelSize}>
|
||||
Date & Time
|
||||
</Box>
|
||||
<DateTimeInput />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
|
||||
<Grid container spacing={4} sx={{ marginTop: '-6px' }}>
|
||||
<Grid item xs={12} md={6}>
|
||||
<MDBox
|
||||
sx={{
|
||||
backgroundColor: '#fff',
|
||||
border: '1px solid #c2c2c2',
|
||||
borderTop: '7px solid #007aff',
|
||||
padding: '12px',
|
||||
borderRadius: '4px'
|
||||
}}
|
||||
>
|
||||
<Typography gutterBottom variant="h6" component="div">
|
||||
Warehouse
|
||||
</Typography>
|
||||
<TransferList />
|
||||
</MDBox>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={6}>
|
||||
<MDBox
|
||||
sx={{
|
||||
backgroundColor: '#fff',
|
||||
border: '1px solid #c2c2c2',
|
||||
borderTop: '7px solid #007aff',
|
||||
padding: '12px',
|
||||
borderRadius: '4px'
|
||||
}}
|
||||
>
|
||||
<Typography gutterBottom variant="h6" component="div">
|
||||
Warehouse
|
||||
</Typography>
|
||||
<TransferList />
|
||||
</MDBox>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid container spacing={2} sx={{ marginTop: '12px' }}>
|
||||
<Grid item xs={12} md={3}>
|
||||
<MDBox
|
||||
sx={{
|
||||
backgroundColor: '#fff',
|
||||
border: '1px solid #c2c2c2',
|
||||
borderTop: '7px solid #007aff',
|
||||
borderRadius: '4px'
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
gutterBottom
|
||||
variant="h6"
|
||||
component="div"
|
||||
sx={{
|
||||
borderBottom: '1px solid #c2c2c2',
|
||||
padding: '10px 20px',
|
||||
marginBottom: '20px'
|
||||
}}
|
||||
>
|
||||
Process
|
||||
</Typography>
|
||||
<Box sx={{ padding: ' 0px 20px' }}>
|
||||
<MDBox
|
||||
display="flex"
|
||||
justifyContent="space-between"
|
||||
alignItems="center"
|
||||
lineHeight={1}
|
||||
className={classes.switchSpacer}
|
||||
sx={{ marginBottom: '20px !important' }}
|
||||
>
|
||||
<MDTypography variant="body2">Stock Tracking</MDTypography>
|
||||
<Switch checked />
|
||||
</MDBox>
|
||||
<MDBox
|
||||
display="flex"
|
||||
justifyContent="space-between"
|
||||
alignItems="center"
|
||||
lineHeight={1}
|
||||
className={classes.switchSpacer}
|
||||
sx={{ marginBottom: '20px !important' }}
|
||||
>
|
||||
<MDTypography variant="body2">Replenishment</MDTypography>
|
||||
<Switch checked />
|
||||
</MDBox>
|
||||
<MDBox
|
||||
display="flex"
|
||||
justifyContent="space-between"
|
||||
alignItems="center"
|
||||
lineHeight={1}
|
||||
className={classes.switchSpacer}
|
||||
sx={{ marginBottom: '20px !important' }}
|
||||
>
|
||||
<MDTypography variant="body2">Alerting</MDTypography>
|
||||
<Switch checked />
|
||||
</MDBox>
|
||||
</Box>
|
||||
</MDBox>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={3}>
|
||||
<MDBox
|
||||
sx={{
|
||||
backgroundColor: '#fff',
|
||||
border: '1px solid #c2c2c2',
|
||||
borderTop: '7px solid #007aff',
|
||||
borderRadius: '4px'
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
gutterBottom
|
||||
variant="h6"
|
||||
component="div"
|
||||
sx={{
|
||||
borderBottom: '1px solid #c2c2c2',
|
||||
padding: '10px 20px',
|
||||
marginBottom: '20px'
|
||||
}}
|
||||
>
|
||||
Application
|
||||
</Typography>
|
||||
<Box sx={{ padding: ' 0px 20px' }}>
|
||||
<MDBox
|
||||
display="flex"
|
||||
justifyContent="space-between"
|
||||
alignItems="center"
|
||||
lineHeight={1}
|
||||
className={classes.switchSpacer}
|
||||
sx={{ marginBottom: '20px !important' }}
|
||||
>
|
||||
<MDTypography variant="body2">Home</MDTypography>
|
||||
<Switch checked />
|
||||
</MDBox>
|
||||
<MDBox
|
||||
display="flex"
|
||||
justifyContent="space-between"
|
||||
alignItems="center"
|
||||
lineHeight={1}
|
||||
className={classes.switchSpacer}
|
||||
sx={{ marginBottom: '20px !important' }}
|
||||
>
|
||||
<MDTypography variant="body2">Setup</MDTypography>
|
||||
<Switch checked />
|
||||
</MDBox>
|
||||
<MDBox
|
||||
display="flex"
|
||||
justifyContent="space-between"
|
||||
alignItems="center"
|
||||
lineHeight={1}
|
||||
className={classes.switchSpacer}
|
||||
sx={{ marginBottom: '20px !important' }}
|
||||
>
|
||||
<MDTypography variant="body2">Reports</MDTypography>
|
||||
<Switch checked />
|
||||
</MDBox>
|
||||
</Box>
|
||||
</MDBox>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<MDBox
|
||||
display="flex"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
lineHeight={1}
|
||||
sx={{ marginBottom: '15px', marginTop: '45px', paddingBottom: '30px' }}
|
||||
>
|
||||
<MDButton
|
||||
size="medium"
|
||||
color="error"
|
||||
variant="outlined"
|
||||
type="submit"
|
||||
sx={{ marginRight: '15px' }}
|
||||
>
|
||||
Cancel
|
||||
</MDButton>
|
||||
<MDButton size="medium" color="primary" variant="contained">
|
||||
Save
|
||||
</MDButton>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</DashboardLayout>
|
||||
);
|
||||
}
|
||||
export default CreateUserRole;
|
||||
@@ -1,25 +1,28 @@
|
||||
import React, { useEffect, useMemo } from 'react';
|
||||
import moment from 'moment';
|
||||
import React, { useEffect, useState, useMemo } from 'react';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { styled } from '@mui/material/styles';
|
||||
import { Grid, TableBody, TableCell, TableRow, Tabs, Tab } from '@mui/material';
|
||||
import { makeStyles } from '@mui/styles';
|
||||
import MDBox from 'components/MDBox';
|
||||
import EditIcon from '@mui/icons-material/Edit';
|
||||
|
||||
import DashboardNavbar from 'components/DashboardNavbar';
|
||||
import DashboardLayout from 'layouts/DashboardLayout';
|
||||
import { styled } from '@mui/material/styles';
|
||||
import { makeStyles } from '@mui/styles';
|
||||
import BasicTable from 'components/BasicTable';
|
||||
import { Grid, TableBody, TableCell, TableRow } from '@mui/material';
|
||||
import SearchBar from 'components/SearchBar';
|
||||
import EditIcon from '@mui/icons-material/Edit';
|
||||
import MDButton from 'components/Button';
|
||||
import { useState } from 'react';
|
||||
import { Tabs, Tab } from '@mui/material';
|
||||
import TabPanel from 'components/Tabs';
|
||||
import Breadcrumbs from 'components/Breadcrumbs';
|
||||
|
||||
import WarehouseActions, { WarehouseSelectors } from 'redux/WarehouseRedux';
|
||||
import InventoryActions, { InventorySelectors } from 'redux/InventoryRedux';
|
||||
import PermissionsActions, { PermissionsSelectors } from 'redux/PermissionsRedux';
|
||||
import UsersActions, { UsersSelectors } from 'redux/UsersRedux';
|
||||
import RolesActions, { RolesSelectors } from 'redux/RolesRedux';
|
||||
import { AuthSelectors } from 'redux/AuthRedux';
|
||||
|
||||
import { API } from 'constant';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import moment from 'moment';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import Breadcrumbs from 'components/Breadcrumbs';
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
iconSize: {
|
||||
@@ -34,6 +37,9 @@ const useStyles = makeStyles((theme) => ({
|
||||
statusInactive: {
|
||||
color: 'red'
|
||||
},
|
||||
limitWidth: {
|
||||
maxWidth: '20rem'
|
||||
},
|
||||
margin: {
|
||||
marginBottom: '20px',
|
||||
borderTop: '1px solid #ddd',
|
||||
@@ -53,6 +59,10 @@ const useStyles = makeStyles((theme) => ({
|
||||
overflow: 'hidden',
|
||||
borderRadius: '0.5rem'
|
||||
},
|
||||
rightPlaced: {
|
||||
position: 'absolute',
|
||||
right: 0
|
||||
},
|
||||
tabs: {
|
||||
borderRadius: 0,
|
||||
'& .MuiButtonBase-root.MuiTab-root': {
|
||||
@@ -83,11 +93,22 @@ function UserAccessScreen() {
|
||||
const [value, setValue] = useState(1);
|
||||
const usersData = useSelector(UsersSelectors.getUsersDetail);
|
||||
const rolesData = useSelector(RolesSelectors.getRolesDetail);
|
||||
const currentUser = useSelector(AuthSelectors.getUser);
|
||||
const warehouses = useSelector(WarehouseSelectors.getWarehouseDetail);
|
||||
const inventories = useSelector(InventorySelectors.getInventoryDetail);
|
||||
const actions = useSelector(PermissionsSelectors.getActionsDetail);
|
||||
const permissions = useSelector(PermissionsSelectors.getPermissionsDetail);
|
||||
const [userRecords, setUserRecords] = useState([]);
|
||||
const [rolesRecords, setRoleRecords] = useState([]);
|
||||
const navigate = useNavigate();
|
||||
|
||||
useEffect(() => {
|
||||
(!warehouses || warehouses.length === 0) && dispatch(WarehouseActions.warehouseDataAction({loader: 'loading-request', slug: API.GET_WAREHOUSE_DATA,method: 'get'}));
|
||||
(!inventories || inventories.length === 0) && dispatch(InventoryActions.getInventoryAction({loader: 'loading-request', slug: API.GET_INVENTORY,method: 'get'}));
|
||||
(!rolesData || rolesData.length === 0) && dispatch(RolesActions.getRolesAction({loader: 'loading-request', slug: API.GET_ROLES_DATA, method: 'get'}));
|
||||
(!permissions || permissions.length === 0) && dispatch(PermissionsActions.getPermissionsAction({loader: 'loading-request', slug: API.GET_PERMISSIONS_DATA, method: 'get'}));
|
||||
(!actions || actions.length === 0) && dispatch(PermissionsActions.getActionsAction({loader: 'loading-request', slug: API.GET_ACTIONS_DATA, method: 'get'}));
|
||||
}, []);
|
||||
|
||||
const userHeadCells = [
|
||||
{ id: 'full_name', label: 'User Name', isEditAnchor: true, value: (record) => record.fullName },
|
||||
{ id: 'phone_number', label: 'Phone Number', value: (record) => record.phoneNumber },
|
||||
@@ -122,9 +143,13 @@ function UserAccessScreen() {
|
||||
];
|
||||
|
||||
const rolesHeadCells = [
|
||||
{ id: 'role', label: 'Role' },
|
||||
{ id: 'permissions', label: 'Permissions' },
|
||||
{ id: 'status', label: 'Status' }
|
||||
{ id: 'role', label: 'Role', isEditAnchor: true, placement: 'after', value: record => record.name },
|
||||
{ id: 'warehouse', label: 'Warehouse', limitWidth: true, value: record => warehouses && record.permissions?.warehouseScopes && record.permissions?.warehouseScopes?.length === warehouses?.length ? 'All' : record.permissions?.warehouseScopes ? record.permissions?.warehouseScopes.map(sc => sc.name).join(', ') : ''},
|
||||
{ id: 'inventory', label: 'Inventories', limitWidth: true, value: record => inventories && record.permissions?.inventoryScopes && record.permissions?.inventoryScopes?.length === inventories?.length ? 'All' : record.permissions?.inventoryScopes ? record.permissions?.inventoryScopes.map(sc => sc.name).join(', ') : ''},
|
||||
{ id: 'actions', label: 'Actions', limitWidth: true, value: record => actions && record.permissions?.actions && record.permissions?.actions?.length === actions?.length ? 'All' : record.permissions?.actions ? record.permissions?.actions.join(', ') : ''},
|
||||
{ id: 'visibilities', label: 'App Modules', limitWidth: true, value: record => permissions && record.permissions?.allowedUIModules && record.permissions?.allowedUIModules?.length === permissions?.length ? 'All' : record.permissions?.allowedUIModules ? record.permissions?.allowedUIModules.join(', ') : ''},
|
||||
{ id: 'status', label: 'Status', value: record => record.status === 'ACTIVE' ? <span className={classes.statusActive}>Active</span>
|
||||
: <span className={classes.statusInactive}>Inactive</span> }
|
||||
];
|
||||
|
||||
const usersHandler = () => {
|
||||
@@ -184,17 +209,32 @@ function UserAccessScreen() {
|
||||
}
|
||||
}));
|
||||
|
||||
const rowRenders = userRecords && userRecords.map((record, keyouter) => {
|
||||
const canEdit = columnConfig => columnConfig.isEditAnchor && currentUser.email !== record.email;
|
||||
return <StyledTableRow key={record.id + '-' + keyouter}>
|
||||
{userHeadCells.map((columnConfig, key) => <TableCell key={key} onClick={() => canEdit(columnConfig) && navigate('/setup/users-access/edit-user', {state: {user: record}})}>
|
||||
{canEdit(columnConfig) ? <span className={classes.iconwrap}>
|
||||
<EditIcon className={classes.iconSize}/>
|
||||
{columnConfig.value(record)}
|
||||
</span> : <span>{columnConfig.value(record)}</span>}
|
||||
</TableCell>)}
|
||||
</StyledTableRow>;
|
||||
});
|
||||
const rowRenders = ({records, headers, navUrl, table}) => {
|
||||
return records && records.map((record, keyouter) => {
|
||||
return <StyledTableRow key={record.id + '-' + keyouter}>
|
||||
{headers.map((columnConfig, key) => {
|
||||
const canEdit = columnConfig.isEditAnchor;
|
||||
const isAfter = columnConfig.placement && columnConfig.placement === 'after';
|
||||
const limitWidth = columnConfig.limitWidth;
|
||||
return <TableCell key={key} className={`${isAfter ? 'position-relative pe-5' : ''}${limitWidth ? ' overflow-auto ' + classes.limitWidth : ''}`}
|
||||
onClick={() => canEdit && navigate(navUrl, {state: {[table]: record}})}>
|
||||
{canEdit
|
||||
? isAfter
|
||||
? <span className={classes.iconwrap}>
|
||||
<EditIcon className={classes.iconSize + ' ' + classes.rightPlaced}/>
|
||||
{columnConfig.value(record)}
|
||||
</span>
|
||||
: <span className={classes.iconwrap}>
|
||||
{columnConfig.value(record)}
|
||||
<EditIcon className={classes.iconSize}/>
|
||||
</span>
|
||||
: <span>{columnConfig.value(record)}</span>}
|
||||
</TableCell>;
|
||||
}
|
||||
)}
|
||||
</StyledTableRow>;
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<DashboardLayout>
|
||||
@@ -252,21 +292,10 @@ function UserAccessScreen() {
|
||||
backgroundColor="#007AFF"
|
||||
color="#fff"
|
||||
>
|
||||
<TableBody>
|
||||
{rolesRecords &&
|
||||
rolesRecords.map((item, key) => (
|
||||
<StyledTableRow key={item.id + '-' + key}>
|
||||
<TableCell>
|
||||
<div className={classes.iconwrap}>
|
||||
<EditIcon className={classes.iconSize} />
|
||||
{item.name}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>{item.permissions}</TableCell>
|
||||
<TableCell>{item.status}</TableCell>
|
||||
</StyledTableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
{rolesRecords && rolesRecords.length > 0
|
||||
? <TableBody>
|
||||
{rowRenders({records: rolesRecords, headers: rolesHeadCells, navUrl: '/setup/users-access/edit-role', table: 'role'})}
|
||||
</TableBody> : <p>No Records to Display</p>}
|
||||
</BasicTable>
|
||||
</TabPanel>
|
||||
<TabPanel value={value} index={1} className={classes.radialBorder}>
|
||||
@@ -277,11 +306,10 @@ function UserAccessScreen() {
|
||||
backgroundColor="#007AFF"
|
||||
color="#fff"
|
||||
>
|
||||
{userRecords && userRecords.length > 0 ? (
|
||||
<TableBody>{rowRenders}</TableBody>
|
||||
) : (
|
||||
'No Records to Display'
|
||||
)}
|
||||
{userRecords && userRecords.length > 0
|
||||
? <TableBody>
|
||||
{rowRenders({records: userRecords, headers: userHeadCells, navUrl: '/setup/users-access/edit-user', table: 'user'})}
|
||||
</TableBody> : <p>No Records to Display</p>}
|
||||
</BasicTable>
|
||||
</TabPanel>
|
||||
</Grid>
|
||||
|
||||
@@ -12,7 +12,7 @@ import NewWarehouseDetails from 'pages/newWarehouseDetails';
|
||||
import EditWarehouseDetails from 'pages/editWarehouseDetails';
|
||||
import LabelingHome from 'pages/labellingHome';
|
||||
import SetupInventory from 'pages/setupInventory';
|
||||
import CreateUserRole from 'pages/createUserRole';
|
||||
import CreateEditUserRole from 'pages/createEditUserRole';
|
||||
import CreateEditUser from 'pages/createEditUser';
|
||||
import WidgetLabel from 'pages/widgetLabel';
|
||||
import ItemListing from 'pages/itemListing';
|
||||
@@ -177,7 +177,7 @@ const protectedRoutes = [
|
||||
key: 'create-role',
|
||||
route: '/setup/users-access/create-role',
|
||||
hide: true,
|
||||
component: <CreateUserRole />
|
||||
component: <CreateEditUserRole />
|
||||
},
|
||||
{
|
||||
name: 'Create User',
|
||||
|
||||
Reference in New Issue
Block a user