Feature/wms 53 (#53)
* create warehouse * edit warehouse changes * Update: linted and formatted * add warehouse button * user access changes * basic table component changes * Updated: eslint errors * basic table component changes * update: linted Co-authored-by: [Diksha] <[diksha39511@gmail.com]> Co-authored-by: Llewellyn Dsouza <lledsouza2209@gmail.com>
This commit is contained in:
43
src/components/BasicTable/TblContainer.js
Normal file
43
src/components/BasicTable/TblContainer.js
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Table } from '@mui/material';
|
||||||
|
import { makeStyles } from '@mui/styles';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
|
||||||
|
export default function TblContainer({ children, backgroundColor, color }) {
|
||||||
|
const useStyles = makeStyles({
|
||||||
|
headDisplay: {
|
||||||
|
display: 'revert'
|
||||||
|
},
|
||||||
|
table: {
|
||||||
|
'& thead th': {
|
||||||
|
fontWeight: '600',
|
||||||
|
color: color,
|
||||||
|
backgroundColor: backgroundColor
|
||||||
|
},
|
||||||
|
'& tbody td': {
|
||||||
|
borderRadius: '2px',
|
||||||
|
fontWeight: 300,
|
||||||
|
borderRight: '1px solid #EBEBEB',
|
||||||
|
borderBottom: '1px solid #EBEBEB',
|
||||||
|
borderLeft: '1px solid #EBEBEB',
|
||||||
|
textAlign: 'left',
|
||||||
|
whiteSpace: 'nowrap'
|
||||||
|
},
|
||||||
|
'& tbody tr:hover': {
|
||||||
|
cursor: 'pointer'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const classes = useStyles();
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Table className={classes.table}>{children}</Table>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
TblContainer.propTypes = {
|
||||||
|
children: PropTypes.node.isRequired,
|
||||||
|
backgroundColor: PropTypes.string.isRequired,
|
||||||
|
color: PropTypes.string.isRequired
|
||||||
|
};
|
||||||
@@ -1,69 +1,40 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { styled } from '@mui/material/styles';
|
import TblContainer from './TblContainer';
|
||||||
import { makeStyles } from '@mui/styles';
|
import { makeStyles } from '@mui/styles';
|
||||||
import Table from '@mui/material/Table';
|
import { TableCell, TableHead, TableRow } from '@mui/material';
|
||||||
import TableBody from '@mui/material/TableBody';
|
|
||||||
import TableCell from '@mui/material/TableCell';
|
|
||||||
import TableHead from '@mui/material/TableHead';
|
|
||||||
import TableRow from '@mui/material/TableRow';
|
|
||||||
|
|
||||||
const useStyles = makeStyles({
|
const useStyles = makeStyles(() => ({
|
||||||
headColor: {
|
headDisplay: {
|
||||||
display: 'revert'
|
display: 'revert'
|
||||||
},
|
|
||||||
rowStyle: {
|
|
||||||
color: '#007aff'
|
|
||||||
},
|
|
||||||
tablebody: {
|
|
||||||
fontSize: '13px',
|
|
||||||
color: '#7F7F7F'
|
|
||||||
}
|
}
|
||||||
});
|
}));
|
||||||
|
|
||||||
const row = (x, i, header) => (
|
export default function BasicTable({ children, headCells, backgroundColor, color }) {
|
||||||
<TableRow key={`tr-${i}`}>
|
const classes = useStyles();
|
||||||
{header.map((y, k) => (
|
return (
|
||||||
<TableCell key={`tc-${k}`}>{x[y.prop]}</TableCell>
|
<>
|
||||||
|
<TblContainer backgroundColor={backgroundColor} color={color}>
|
||||||
|
<TableHead className={classes.headDisplay}>
|
||||||
|
<TableRow>
|
||||||
|
{headCells.map((headCell) => (
|
||||||
|
<TableCell key={headCell.id}>{headCell.label}</TableCell>
|
||||||
))}
|
))}
|
||||||
</TableRow>
|
</TableRow>
|
||||||
);
|
|
||||||
|
|
||||||
export default function BasicTable({ data, header, backgroundColor }) {
|
|
||||||
const classes = useStyles();
|
|
||||||
const TableContainer = styled('div')(
|
|
||||||
() => `
|
|
||||||
td,
|
|
||||||
th {
|
|
||||||
border-right: 1px solid #EBEBEB;
|
|
||||||
border-bottom: 1px solid #EBEBEB;
|
|
||||||
border-left: 1px solid #EBEBEB;
|
|
||||||
text-align: left;
|
|
||||||
white-space: nowrap;
|
|
||||||
background-color: white;
|
|
||||||
}
|
|
||||||
th {
|
|
||||||
background-color: ${backgroundColor};,
|
|
||||||
color: #9B9B9B;
|
|
||||||
}
|
|
||||||
`
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<TableContainer sx={{ width: 200, maxWidth: '100%' }}>
|
|
||||||
<Table sx={{ minWidth: 700 }} style={{ width: 1200 }}>
|
|
||||||
<TableHead className={classes.headColor}>
|
|
||||||
<TableRow className={classes.tableRowContainer}>
|
|
||||||
{header && header.map((x, i) => <TableCell key={`thc-${i}`}>{x.name}</TableCell>)}
|
|
||||||
</TableRow>
|
|
||||||
</TableHead>
|
</TableHead>
|
||||||
<TableBody>{data.map((x, i) => row(x, i, header))}</TableBody>
|
{children}
|
||||||
</Table>
|
</TblContainer>
|
||||||
</TableContainer>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
BasicTable.propTypes = {
|
BasicTable.propTypes = {
|
||||||
data: PropTypes.array,
|
children: PropTypes.node.isRequired,
|
||||||
header: PropTypes.array,
|
headCells: PropTypes.arrayOf(
|
||||||
backgroundColor: PropTypes.string
|
PropTypes.shape({
|
||||||
|
id: PropTypes.string.isRequired,
|
||||||
|
label: PropTypes.string.isRequired
|
||||||
|
})
|
||||||
|
).isRequired,
|
||||||
|
backgroundColor: PropTypes.string,
|
||||||
|
color: PropTypes.string
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -45,7 +45,7 @@ UnauthorizedAPI.addMonitor(APIMonitor);
|
|||||||
AuthorizedAPI.addAsyncRequestTransform(async (request) => {
|
AuthorizedAPI.addAsyncRequestTransform(async (request) => {
|
||||||
LOGGER.log('request', request);
|
LOGGER.log('request', request);
|
||||||
let token = localStorage.getItem('token');
|
let token = localStorage.getItem('token');
|
||||||
request.headers.Authorization = `Bearer ${token}`;
|
request.headers.Authorization = token;
|
||||||
});
|
});
|
||||||
|
|
||||||
export { AuthorizedAPI, UnauthorizedAPI };
|
export { AuthorizedAPI, UnauthorizedAPI };
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
export default {
|
export default {
|
||||||
LOGIN_USER: '/user/login',
|
LOGIN_USER: '/user/login',
|
||||||
GET_WAREHOUSE_DATA: '/warehouse/all?page=0&perPage=50',
|
GET_WAREHOUSE_DATA: '/warehouse/all?page=0&perPage=50',
|
||||||
CREATE_WAREHOUSE:'/warehouse/'
|
CREATE_WAREHOUSE: '/warehouse/',
|
||||||
|
GET_USERS_DATA: '/user/all?page=0&perPage=10'
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import DashboardNavbar from 'components/DashboardNavbar';
|
import DashboardNavbar from 'components/DashboardNavbar';
|
||||||
import Footer from 'components/Footer';
|
import Footer from 'components/Footer';
|
||||||
import DashboardLayout from 'layouts/DashboardLayout';
|
import DashboardLayout from 'layouts/DashboardLayout';
|
||||||
import { Grid, InputLabel } from '@mui/material';
|
import { Grid, InputLabel, TableBody, TableCell, TableRow } from '@mui/material';
|
||||||
import MDInput from 'components/MDInput';
|
import MDInput from 'components/MDInput';
|
||||||
import ImageUpload from 'components/ImageUpload';
|
import ImageUpload from 'components/ImageUpload';
|
||||||
import Switch from 'components/Switch';
|
import Switch from 'components/Switch';
|
||||||
@@ -38,7 +38,6 @@ const useStyles = makeStyles({
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
function InventoryScreen() {
|
|
||||||
const stockBox = [
|
const stockBox = [
|
||||||
{
|
{
|
||||||
text: 'Stock Tracking'
|
text: 'Stock Tracking'
|
||||||
@@ -60,7 +59,7 @@ function InventoryScreen() {
|
|||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
const tableData = [
|
const records = [
|
||||||
{
|
{
|
||||||
level1: 'Ipsum',
|
level1: 'Ipsum',
|
||||||
level2: 'Vivera'
|
level2: 'Vivera'
|
||||||
@@ -71,14 +70,14 @@ function InventoryScreen() {
|
|||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
const header = [
|
const headCells = [
|
||||||
{
|
{
|
||||||
name: 'Level 1',
|
id: 'level1',
|
||||||
prop: 'level1'
|
label: 'Level 1'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'Level 2',
|
id: 'level2',
|
||||||
prop: 'level2'
|
label: 'Level 2'
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
@@ -113,6 +112,8 @@ function InventoryScreen() {
|
|||||||
label: 'Level 2'
|
label: 'Level 2'
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
|
function InventoryScreen() {
|
||||||
const previewImg = [1, 2, 3];
|
const previewImg = [1, 2, 3];
|
||||||
const classes = useStyles();
|
const classes = useStyles();
|
||||||
return (
|
return (
|
||||||
@@ -203,18 +204,36 @@ function InventoryScreen() {
|
|||||||
<Grid item xs={12} sm={12} md={12}>
|
<Grid item xs={12} sm={12} md={12}>
|
||||||
<MDBox
|
<MDBox
|
||||||
sx={{
|
sx={{
|
||||||
backgroundColor: '#E5E5E5',
|
// backgroundColor: '#E5E5E5',
|
||||||
width: '98%',
|
width: '100%',
|
||||||
padding: '9px'
|
padding: '9px'
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<MDTypography>Widget hierarchy</MDTypography>
|
<MDTypography
|
||||||
|
sx={{
|
||||||
|
backgroundColor: '#E5E5E5',
|
||||||
|
width: '100%',
|
||||||
|
padding: '9px'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Widget hierarchy
|
||||||
|
</MDTypography>
|
||||||
<BasicTable
|
<BasicTable
|
||||||
className={classes.margin}
|
headCells={headCells}
|
||||||
data={tableData}
|
records={records}
|
||||||
header={header}
|
|
||||||
backgroundColor="#E5E5E5"
|
backgroundColor="#E5E5E5"
|
||||||
/>
|
color="#343434"
|
||||||
|
>
|
||||||
|
<TableBody>
|
||||||
|
{records &&
|
||||||
|
records.map((item) => (
|
||||||
|
<TableRow key={item.id}>
|
||||||
|
<TableCell>{item.level1}</TableCell>
|
||||||
|
<TableCell>{item.level2}</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</BasicTable>
|
||||||
</MDBox>
|
</MDBox>
|
||||||
</Grid>
|
</Grid>
|
||||||
<MDBox sx={{ ml: 'auto', mr: 'auto', mt: 3 }}>
|
<MDBox sx={{ ml: 'auto', mr: 'auto', mt: 3 }}>
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ import Footer from 'components/Footer';
|
|||||||
import DashboardLayout from 'layouts/DashboardLayout';
|
import DashboardLayout from 'layouts/DashboardLayout';
|
||||||
import { makeStyles } from '@mui/styles';
|
import { makeStyles } from '@mui/styles';
|
||||||
import Dropdown from 'components/Dropdown';
|
import Dropdown from 'components/Dropdown';
|
||||||
import { Grid } from '@mui/material';
|
import { Grid, TableBody, TableCell, TableRow } from '@mui/material';
|
||||||
import BasicTable from 'components/BasicTable';
|
import BasicTable from 'components/BasicTable';
|
||||||
import MDButton from 'components/Button';
|
import MDButton from 'components/Button';
|
||||||
|
|
||||||
@@ -25,6 +25,60 @@ const useStyles = makeStyles({
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const records = [
|
||||||
|
{
|
||||||
|
warehouse: 'Ipsum',
|
||||||
|
zone: 'Vivera',
|
||||||
|
area: 'Nisi',
|
||||||
|
row: 'Nulla',
|
||||||
|
label: 'Mauris',
|
||||||
|
bay: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
warehouse: 'Ipsum',
|
||||||
|
zone: 'Vivera',
|
||||||
|
area: 'Nisi',
|
||||||
|
row: 'Nulla',
|
||||||
|
label: 'Mauris',
|
||||||
|
bay: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
warehouse: 'Ipsum',
|
||||||
|
zone: 'Vivera',
|
||||||
|
area: 'Nisi',
|
||||||
|
row: 'Nulla',
|
||||||
|
label: 'Mauris',
|
||||||
|
bay: ''
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const headCells = [
|
||||||
|
{
|
||||||
|
id: 'warehouse',
|
||||||
|
label: 'warehouse'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'zone',
|
||||||
|
label: 'Zone'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'area',
|
||||||
|
label: 'Area'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'row',
|
||||||
|
label: 'Row'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'Label',
|
||||||
|
label: 'label'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'Bay',
|
||||||
|
label: 'bay'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
function LabelingScreen() {
|
function LabelingScreen() {
|
||||||
const classes = useStyles();
|
const classes = useStyles();
|
||||||
|
|
||||||
@@ -71,59 +125,6 @@ function LabelingScreen() {
|
|||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
const tableData = [
|
|
||||||
{
|
|
||||||
warehouse: 'Ipsum',
|
|
||||||
zone: 'Vivera',
|
|
||||||
area: 'Nisi',
|
|
||||||
row: 'Nulla',
|
|
||||||
label: 'Mauris',
|
|
||||||
bay: ''
|
|
||||||
},
|
|
||||||
{
|
|
||||||
warehouse: 'Ipsum',
|
|
||||||
zone: 'Vivera',
|
|
||||||
area: 'Nisi',
|
|
||||||
row: 'Nulla',
|
|
||||||
label: 'Mauris',
|
|
||||||
bay: ''
|
|
||||||
},
|
|
||||||
{
|
|
||||||
warehouse: 'Ipsum',
|
|
||||||
zone: 'Vivera',
|
|
||||||
area: 'Nisi',
|
|
||||||
row: 'Nulla',
|
|
||||||
label: 'Mauris',
|
|
||||||
bay: ''
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
const header = [
|
|
||||||
{
|
|
||||||
name: 'Warehouse',
|
|
||||||
prop: 'warehouse'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Zone',
|
|
||||||
prop: 'zone'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Area',
|
|
||||||
prop: 'area'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Row',
|
|
||||||
prop: 'row'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Label',
|
|
||||||
prop: 'label'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Bay',
|
|
||||||
prop: 'bay'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
return (
|
return (
|
||||||
<DashboardLayout>
|
<DashboardLayout>
|
||||||
<DashboardNavbar />
|
<DashboardNavbar />
|
||||||
@@ -138,11 +139,25 @@ function LabelingScreen() {
|
|||||||
</Grid>
|
</Grid>
|
||||||
<br />
|
<br />
|
||||||
<BasicTable
|
<BasicTable
|
||||||
className={classes.margin}
|
headCells={headCells}
|
||||||
data={tableData}
|
records={records}
|
||||||
header={header}
|
backgroundColor="#F4F4F4"
|
||||||
backgroundColor="gray"
|
color="#8D8D8D"
|
||||||
/>
|
>
|
||||||
|
<TableBody>
|
||||||
|
{records &&
|
||||||
|
records.map((item) => (
|
||||||
|
<TableRow key={item.id}>
|
||||||
|
<TableCell>{item.warehouse}</TableCell>
|
||||||
|
<TableCell>{item.zone}</TableCell>
|
||||||
|
<TableCell>{item.area}</TableCell>
|
||||||
|
<TableCell>{item.row}</TableCell>
|
||||||
|
<TableCell>{item.label}</TableCell>
|
||||||
|
<TableCell>{item.Bay}</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</BasicTable>
|
||||||
<Grid container spacing={2}>
|
<Grid container spacing={2}>
|
||||||
{data2 &&
|
{data2 &&
|
||||||
data2.map((item, index) => (
|
data2.map((item, index) => (
|
||||||
|
|||||||
@@ -1,22 +1,30 @@
|
|||||||
|
import React, { useEffect } from 'react';
|
||||||
import MDBox from 'components/MDBox';
|
import MDBox from 'components/MDBox';
|
||||||
import DashboardNavbar from 'components/DashboardNavbar';
|
import DashboardNavbar from 'components/DashboardNavbar';
|
||||||
import Footer from 'components/Footer';
|
import Footer from 'components/Footer';
|
||||||
import DashboardLayout from 'layouts/DashboardLayout';
|
import DashboardLayout from 'layouts/DashboardLayout';
|
||||||
|
import { styled } from '@mui/material/styles';
|
||||||
import { makeStyles } from '@mui/styles';
|
import { makeStyles } from '@mui/styles';
|
||||||
import BasicTable from 'components/BasicTable';
|
import BasicTable from 'components/BasicTable';
|
||||||
import { Grid } from '@mui/material';
|
import { Grid, TableBody, TableCell, TableRow } from '@mui/material';
|
||||||
import SearchBar from 'components/SearchBar';
|
import SearchBar from 'components/SearchBar';
|
||||||
|
import EditIcon from '@mui/icons-material/Edit';
|
||||||
import MDButton from 'components/Button';
|
import MDButton from 'components/Button';
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import EditIcon from '@mui/icons-material/Edit';
|
|
||||||
import { Tabs, Tab } from '@mui/material';
|
import { Tabs, Tab } from '@mui/material';
|
||||||
import TabPanel from 'components/Tabs';
|
import TabPanel from 'components/Tabs';
|
||||||
|
import UsersActions from 'redux/UsersRedux';
|
||||||
|
import { API } from 'constant';
|
||||||
|
import { useDispatch, useSelector } from 'react-redux';
|
||||||
|
import { UsersSelectors } from 'redux/UsersRedux';
|
||||||
|
|
||||||
const useStyles = makeStyles({
|
const useStyles = makeStyles((theme) => ({
|
||||||
iconSize: {
|
iconSize: {
|
||||||
width: '50%',
|
width: '2%',
|
||||||
height: '50%',
|
height: '2%',
|
||||||
marginBottom: '10px'
|
marginBottom: '10px',
|
||||||
|
color: theme.palette.primary.light,
|
||||||
|
marginRight: '8px'
|
||||||
},
|
},
|
||||||
margin: {
|
margin: {
|
||||||
marginBottom: '20px'
|
marginBottom: '20px'
|
||||||
@@ -27,152 +35,63 @@ const useStyles = makeStyles({
|
|||||||
marginTable: {
|
marginTable: {
|
||||||
marginTop: '20px'
|
marginTop: '20px'
|
||||||
},
|
},
|
||||||
|
iconwrap: {
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center'
|
||||||
|
},
|
||||||
tabs: {
|
tabs: {
|
||||||
'& .MuiButtonBase-root.MuiTab-root': {
|
'& .MuiButtonBase-root.MuiTab-root': {
|
||||||
padding: '12px 0px',
|
padding: '12px 0px',
|
||||||
borderRadius: '0px'
|
borderRadius: '0px'
|
||||||
},
|
},
|
||||||
'& .Mui-selected': {
|
'& .Mui-selected': {
|
||||||
textDecoration: 'underline',
|
backgroundColor: '#017AFF',
|
||||||
backgroundColor: '#017AFF'
|
color: 'white'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
}));
|
||||||
|
const headCells = [
|
||||||
|
{ id: 'fullName', label: 'Name' },
|
||||||
|
{ id: 'role_name', label: 'Roles' }
|
||||||
|
];
|
||||||
|
|
||||||
function UserAccessScreen() {
|
function UserAccessScreen() {
|
||||||
const classes = useStyles();
|
const classes = useStyles();
|
||||||
|
const dispatch = useDispatch();
|
||||||
const [value, setValue] = useState(0);
|
const [value, setValue] = useState(0);
|
||||||
|
const usersData = useSelector(UsersSelectors.getUsersDetail);
|
||||||
|
const [records, setRecords] = useState([]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (usersData.length) {
|
||||||
|
let users = JSON.parse(JSON.stringify(usersData));
|
||||||
|
users = users.map((item) => {
|
||||||
|
item.role_name = item.roles.map((role) => role.name).join(',');
|
||||||
|
return item;
|
||||||
|
});
|
||||||
|
setRecords(users);
|
||||||
|
}
|
||||||
|
}, [usersData]);
|
||||||
|
|
||||||
const handleTabs = (e, val) => {
|
const handleTabs = (e, val) => {
|
||||||
setValue(val);
|
setValue(val);
|
||||||
};
|
};
|
||||||
|
|
||||||
const header = [
|
const usersHandler = () => {
|
||||||
{
|
dispatch(
|
||||||
name: '',
|
UsersActions.getUsersAction({
|
||||||
prop: 'icon'
|
loader: 'loading-request',
|
||||||
},
|
slug: API.GET_USERS_DATA,
|
||||||
{
|
method: 'get'
|
||||||
name: 'User Name',
|
})
|
||||||
prop: 'username'
|
);
|
||||||
},
|
};
|
||||||
{
|
|
||||||
name: 'Phone Number',
|
const StyledTableRow = styled(TableRow)(({ theme }) => ({
|
||||||
prop: 'phonenumber'
|
'&:nth-of-type(even)': {
|
||||||
},
|
backgroundColor: theme.palette.action.hover
|
||||||
{
|
|
||||||
name: 'Roles',
|
|
||||||
prop: 'roles'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Last Updated by & Date',
|
|
||||||
prop: 'lastupdated'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Created by & Date',
|
|
||||||
prop: 'Createdby'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Last Login',
|
|
||||||
prop: 'lastlogin'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Access',
|
|
||||||
prop: 'access'
|
|
||||||
}
|
}
|
||||||
];
|
}));
|
||||||
const data = [
|
|
||||||
{
|
|
||||||
icon: <EditIcon />,
|
|
||||||
username: 'Floyd Miles',
|
|
||||||
phonenumber: '(704)555-0127',
|
|
||||||
roles: 'Administrator',
|
|
||||||
lastupdated: 'System| 1/1/2022 11:23:00 AM',
|
|
||||||
Createdby: 'System| 1/1/2022 11:23:00 AM',
|
|
||||||
lastlogin: 'System| 1/1/2022 11:23:00 AM',
|
|
||||||
access: 'Active'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: <EditIcon />,
|
|
||||||
username: 'Floyd Miles',
|
|
||||||
phonenumber: '(704)555-0127',
|
|
||||||
roles: 'Administrator',
|
|
||||||
lastupdated: 'System| 1/1/2022 11:23:00 AM',
|
|
||||||
Createdby: 'System| 1/1/2022 11:23:00 AM',
|
|
||||||
lastlogin: 'System| 1/1/2022 11:23:00 AM',
|
|
||||||
access: 'Active'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: <EditIcon />,
|
|
||||||
username: 'Floyd Miles',
|
|
||||||
phonenumber: '(704)555-0127',
|
|
||||||
roles: 'Administrator',
|
|
||||||
lastupdated: 'System| 1/1/2022 11:23:00 AM',
|
|
||||||
Createdby: 'System| 1/1/2022 11:23:00 AM',
|
|
||||||
lastlogin: 'System| 1/1/2022 11:23:00 AM',
|
|
||||||
access: 'Active'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: <EditIcon />,
|
|
||||||
username: 'Floyd Miles',
|
|
||||||
phonenumber: '(704)555-0127',
|
|
||||||
roles: 'Administrator',
|
|
||||||
lastupdated: 'System| 1/1/2022 11:23:00 AM',
|
|
||||||
Createdby: 'System| 1/1/2022 11:23:00 AM',
|
|
||||||
lastlogin: 'System| 1/1/2022 11:23:00 AM',
|
|
||||||
access: 'Active'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: <EditIcon />,
|
|
||||||
username: 'Floyd Miles',
|
|
||||||
phonenumber: '(704)555-0127',
|
|
||||||
roles: 'Administrator',
|
|
||||||
lastupdated: 'System| 1/1/2022 11:23:00 AM',
|
|
||||||
Createdby: 'System| 1/1/2022 11:23:00 AM',
|
|
||||||
lastlogin: 'System| 1/1/2022 11:23:00 AM',
|
|
||||||
access: 'Active'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: <EditIcon />,
|
|
||||||
username: 'Floyd Miles',
|
|
||||||
phonenumber: '(704)555-0127',
|
|
||||||
roles: 'Administrator',
|
|
||||||
lastupdated: 'System| 1/1/2022 11:23:00 AM',
|
|
||||||
Createdby: 'System| 1/1/2022 11:23:00 AM',
|
|
||||||
lastlogin: 'System| 1/1/2022 11:23:00 AM',
|
|
||||||
access: 'Active'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: <EditIcon />,
|
|
||||||
username: 'Floyd Miles',
|
|
||||||
phonenumber: '(704)555-0127',
|
|
||||||
roles: 'Administrator',
|
|
||||||
lastupdated: 'System| 1/1/2022 11:23:00 AM',
|
|
||||||
Createdby: 'System| 1/1/2022 11:23:00 AM',
|
|
||||||
lastlogin: 'System| 1/1/2022 11:23:00 AM',
|
|
||||||
access: 'Active'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: <EditIcon />,
|
|
||||||
username: 'Floyd Miles',
|
|
||||||
phonenumber: '(704)555-0127',
|
|
||||||
roles: 'Administrator',
|
|
||||||
lastupdated: 'System| 1/1/2022 11:23:00 AM',
|
|
||||||
Createdby: 'System| 1/1/2022 11:23:00 AM',
|
|
||||||
lastlogin: 'System| 1/1/2022 11:23:00 AM',
|
|
||||||
access: 'Active'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: <EditIcon />,
|
|
||||||
username: 'Floyd Miles',
|
|
||||||
phonenumber: '(704)555-0127',
|
|
||||||
roles: 'Administrator',
|
|
||||||
lastupdated: 'System| 1/1/2022 11:23:00 AM',
|
|
||||||
Createdby: 'System| 1/1/2022 11:23:00 AM',
|
|
||||||
lastlogin: 'System| 1/1/2022 11:23:00 AM',
|
|
||||||
access: 'Active'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DashboardLayout>
|
<DashboardLayout>
|
||||||
@@ -182,16 +101,8 @@ function UserAccessScreen() {
|
|||||||
<Grid item xs={12} sm={4} md={4}>
|
<Grid item xs={12} sm={4} md={4}>
|
||||||
<Tabs value={value} className={classes.tabs} onChange={handleTabs}>
|
<Tabs value={value} className={classes.tabs} onChange={handleTabs}>
|
||||||
<Tab label="Roles" />
|
<Tab label="Roles" />
|
||||||
<Tab label="Users" />
|
<Tab label="Users" onClick={() => usersHandler()} />
|
||||||
</Tabs>
|
</Tabs>
|
||||||
<TabPanel value={value} index={0}>
|
|
||||||
<div className={classes.marginTable}>
|
|
||||||
<BasicTable data={data} header={header} backgroundColor="#017AFF" />
|
|
||||||
</div>
|
|
||||||
</TabPanel>
|
|
||||||
<TabPanel value={value} index={1}>
|
|
||||||
Item2 Detail
|
|
||||||
</TabPanel>
|
|
||||||
</Grid>
|
</Grid>
|
||||||
<Grid item xs={12} sm={4} md={6}>
|
<Grid item xs={12} sm={4} md={6}>
|
||||||
<SearchBar />
|
<SearchBar />
|
||||||
@@ -202,6 +113,32 @@ function UserAccessScreen() {
|
|||||||
</MDButton>
|
</MDButton>
|
||||||
</Grid>
|
</Grid>
|
||||||
</Grid>
|
</Grid>
|
||||||
|
<TabPanel value={value} index={0}>
|
||||||
|
<div className={classes.marginTable}>Item2 Detail</div>
|
||||||
|
</TabPanel>
|
||||||
|
<TabPanel value={value} index={1}>
|
||||||
|
<BasicTable
|
||||||
|
headCells={headCells}
|
||||||
|
records={records}
|
||||||
|
backgroundColor="#007AFF"
|
||||||
|
color="#fff"
|
||||||
|
>
|
||||||
|
<TableBody>
|
||||||
|
{records &&
|
||||||
|
records.map((item) => (
|
||||||
|
<StyledTableRow key={item.id}>
|
||||||
|
<TableCell>
|
||||||
|
<div className={classes.iconwrap}>
|
||||||
|
<EditIcon className={classes.iconSize} />
|
||||||
|
{item.fullName}
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>{item.role_name}</TableCell>
|
||||||
|
</StyledTableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</BasicTable>
|
||||||
|
</TabPanel>
|
||||||
</MDBox>
|
</MDBox>
|
||||||
<Footer />
|
<Footer />
|
||||||
</DashboardLayout>
|
</DashboardLayout>
|
||||||
|
|||||||
54
src/redux/UsersRedux.js
Normal file
54
src/redux/UsersRedux.js
Normal file
@@ -0,0 +1,54 @@
|
|||||||
|
import { createActions, createReducer } from 'reduxsauce';
|
||||||
|
import Immutable from 'seamless-immutable';
|
||||||
|
import _ from 'underscore';
|
||||||
|
import { getFetchingValue, getErrorValue } from '../services/Utils';
|
||||||
|
|
||||||
|
/* ------------- Types and Action Creators ------------- */
|
||||||
|
const { Types, Creators } = createActions({
|
||||||
|
getUsersAction: ['payload'],
|
||||||
|
getUsersSuccess: ['data'],
|
||||||
|
getUsersFailure: ['error']
|
||||||
|
});
|
||||||
|
|
||||||
|
export const UsersTypes = Types;
|
||||||
|
const UsersActions = Creators;
|
||||||
|
export default UsersActions;
|
||||||
|
|
||||||
|
/* ------------- Initial State ------------- */
|
||||||
|
export const INITIAL_STATE = Immutable({
|
||||||
|
usersDetail: [],
|
||||||
|
usersLoading: false,
|
||||||
|
userserror: {}
|
||||||
|
});
|
||||||
|
|
||||||
|
/* ------------- Selectors ------------- */
|
||||||
|
export const UsersSelectors = {
|
||||||
|
getUsersDetail: (state) => state.users.usersDetail
|
||||||
|
};
|
||||||
|
|
||||||
|
/* ------------- Reducers ------------- */
|
||||||
|
export const onGetUsersAction = (state, { payload }) =>
|
||||||
|
state.merge({
|
||||||
|
fetching: _.uniq([state.fetching, payload?.loader]),
|
||||||
|
error: getErrorValue(state?.error, payload?.loader)
|
||||||
|
});
|
||||||
|
|
||||||
|
export const onGetUsersSuccess = (state, { data }) =>
|
||||||
|
state.merge({
|
||||||
|
fetching: getFetchingValue(state.fetching, data?.loader),
|
||||||
|
error: getErrorValue(state?.error, data?.loader),
|
||||||
|
usersDetail: data.usersDetail
|
||||||
|
});
|
||||||
|
|
||||||
|
export const onGetUsersFailure = (state, { error }) =>
|
||||||
|
state.merge({
|
||||||
|
fetching: _.without(state.fetching, error?.loader),
|
||||||
|
error: { ...state.error, [error?.loader]: error?.error }
|
||||||
|
});
|
||||||
|
|
||||||
|
/* ------------- Hookup Reducers To Types ------------- */
|
||||||
|
export const usersReducer = createReducer(INITIAL_STATE, {
|
||||||
|
[Types.GET_USERS_ACTION]: onGetUsersAction,
|
||||||
|
[Types.GET_USERS_SUCCESS]: onGetUsersSuccess,
|
||||||
|
[Types.GET_USERS_FAILURE]: onGetUsersFailure
|
||||||
|
});
|
||||||
@@ -1,11 +1,13 @@
|
|||||||
import { combineReducers } from 'redux';
|
import { combineReducers } from 'redux';
|
||||||
import { authReducer } from './AuthRedux';
|
import { authReducer } from './AuthRedux';
|
||||||
import { warehouseReducer } from './WarehouseRedux';
|
import { warehouseReducer } from './WarehouseRedux';
|
||||||
|
import { usersReducer } from './UsersRedux';
|
||||||
|
|
||||||
// Combine all reducers.
|
// Combine all reducers.
|
||||||
const appReducer = combineReducers({
|
const appReducer = combineReducers({
|
||||||
auth: authReducer,
|
auth: authReducer,
|
||||||
warehouse: warehouseReducer
|
warehouse: warehouseReducer,
|
||||||
|
users: usersReducer
|
||||||
});
|
});
|
||||||
|
|
||||||
const rootReducer = (state, action) => {
|
const rootReducer = (state, action) => {
|
||||||
|
|||||||
30
src/sagas/Users.js
Normal file
30
src/sagas/Users.js
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
import { AuthorizedAPI } from 'config';
|
||||||
|
import { takeLatest, call, put } from 'redux-saga/effects';
|
||||||
|
import UsersActions, { UsersTypes } from '../redux/UsersRedux';
|
||||||
|
import ApiServices from 'services/API/ApiServices';
|
||||||
|
|
||||||
|
export function* onRequestUsersData({ payload }) {
|
||||||
|
const response = yield call(
|
||||||
|
ApiServices[payload?.method],
|
||||||
|
AuthorizedAPI,
|
||||||
|
payload?.slug,
|
||||||
|
payload?.data
|
||||||
|
);
|
||||||
|
if (response?.status === 200) {
|
||||||
|
yield put(
|
||||||
|
UsersActions.getUsersSuccess({
|
||||||
|
loader: payload?.loader,
|
||||||
|
usersDetail: response?.data?.data
|
||||||
|
})
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
payload.onFailedUsersData(response.data.error);
|
||||||
|
yield put(
|
||||||
|
UsersActions.getUsersFailure({
|
||||||
|
loader: payload?.loader,
|
||||||
|
error: response?.data
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export default [takeLatest(UsersTypes.GET_USERS_ACTION, onRequestUsersData)];
|
||||||
@@ -1,10 +1,10 @@
|
|||||||
import { all } from 'redux-saga/effects';
|
import { all } from 'redux-saga/effects';
|
||||||
import AuthSaga from './Auth';
|
import AuthSaga from './Auth';
|
||||||
import WarehouseSaga from './Warehouse';
|
import WarehouseSaga from './Warehouse';
|
||||||
|
import UsersSaga from './Users';
|
||||||
|
|
||||||
export default function* rootSaga() {
|
export default function* rootSaga() {
|
||||||
yield all([...AuthSaga]);
|
yield all([...AuthSaga]);
|
||||||
yield all([...WarehouseSaga]);
|
yield all([...WarehouseSaga]);
|
||||||
|
yield all([...UsersSaga]);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user