diff --git a/src/components/DateTimePicker/index.js b/src/components/DateTimePicker/index.js
index 735646d..c835a1f 100644
--- a/src/components/DateTimePicker/index.js
+++ b/src/components/DateTimePicker/index.js
@@ -11,7 +11,7 @@ export default function DateTimeInput({ disabled, value }) {
useEffect(() => {
setDate(value);
- }, [value])
+ }, [value]);
const handleChange = (newValue) => {
setDate(newValue);
diff --git a/src/pages/createEditUserRole/index.js b/src/pages/createEditUserRole/index.js
new file mode 100644
index 0000000..b66bfe3
--- /dev/null
+++ b/src/pages/createEditUserRole/index.js
@@ -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 (
+
+
+
+
+
+
+
+
+ Warehouse name
+
+
+
+
+
+ Description
+
+
+
+
+
+
+
+ Created By
+
+
+
+
+
+ Date & Time
+
+
+
+
+
+ Last Updated by
+
+
+
+
+
+ Date & Time
+
+
+
+
+
+
+
+
+
+ Choose avatar component here
+
+
+
+
+
+
+
+ Warehouse
+
+
+
+
+
+
+
+ Warehouse
+
+
+
+
+
+
+
+
+
+ Process
+
+
+ Sidenav Mini
+
+
+
+
+
+
+
+ Application
+
+
+ Sidenav Mini
+
+
+
+
+
+
+
+ Cancel
+
+
+ Save
+
+
+
+
+
+ );
+}
+export default CreateEditUserRole;
diff --git a/src/pages/createUserRole/index.js b/src/pages/createUserRole/index.js
deleted file mode 100644
index 2811e8c..0000000
--- a/src/pages/createUserRole/index.js
+++ /dev/null
@@ -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 (
-
-
-
-
-
-
-
-
-
- 
-
-
-
-
- User Name
-
-
-
-
-
- Phone Number
-
-
-
-
-
- Role
-
-
-
- }
- renderValue={(selected) => {
- if (selected.length === 0) {
- return 'Placeholder';
- }
-
- return selected.join(', ');
- }}
- inputProps={{ 'aria-label': 'Without label' }}
- sx={{
- width: '100%'
- }}
- onChange={handleChange}
- >
-
-
-
-
-
-
- Access
-
-
-
-
-
-
-
-
-
-
-
-
- Created By
-
-
-
-
-
- Date & Time
-
-
-
-
-
- Last Updated by
-
-
-
-
-
- Date & Time
-
-
-
-
-
-
-
-
-
-
-
-
-
- Warehouse
-
-
-
-
-
-
-
- Warehouse
-
-
-
-
-
-
-
-
-
- Process
-
-
-
- Stock Tracking
-
-
-
- Replenishment
-
-
-
- Alerting
-
-
-
-
-
-
-
-
- Application
-
-
-
- Home
-
-
-
- Setup
-
-
-
- Reports
-
-
-
-
-
-
-
-
- Cancel
-
-
- Save
-
-
-
-
- );
-}
-export default CreateUserRole;
diff --git a/src/pages/useraccess/index.js b/src/pages/useraccess/index.js
index 29dd996..274c1f0 100644
--- a/src/pages/useraccess/index.js
+++ b/src/pages/useraccess/index.js
@@ -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' ? Active
+ : Inactive }
];
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
- {userHeadCells.map((columnConfig, key) => canEdit(columnConfig) && navigate('/setup/users-access/edit-user', {state: {user: record}})}>
- {canEdit(columnConfig) ?
-
- {columnConfig.value(record)}
- : {columnConfig.value(record)}}
- )}
- ;
- });
+ const rowRenders = ({records, headers, navUrl, table}) => {
+ return records && records.map((record, keyouter) => {
+ return
+ {headers.map((columnConfig, key) => {
+ const canEdit = columnConfig.isEditAnchor;
+ const isAfter = columnConfig.placement && columnConfig.placement === 'after';
+ const limitWidth = columnConfig.limitWidth;
+ return canEdit && navigate(navUrl, {state: {[table]: record}})}>
+ {canEdit
+ ? isAfter
+ ?
+
+ {columnConfig.value(record)}
+
+ :
+ {columnConfig.value(record)}
+
+
+ : {columnConfig.value(record)}}
+ ;
+ }
+ )}
+ ;
+ });
+ };
return (
@@ -252,21 +292,10 @@ function UserAccessScreen() {
backgroundColor="#007AFF"
color="#fff"
>
-
- {rolesRecords &&
- rolesRecords.map((item, key) => (
-
-
-
-
- {item.name}
-
-
- {item.permissions}
- {item.status}
-
- ))}
-
+ {rolesRecords && rolesRecords.length > 0
+ ?
+ {rowRenders({records: rolesRecords, headers: rolesHeadCells, navUrl: '/setup/users-access/edit-role', table: 'role'})}
+ : No Records to Display
}
@@ -277,11 +306,10 @@ function UserAccessScreen() {
backgroundColor="#007AFF"
color="#fff"
>
- {userRecords && userRecords.length > 0 ? (
- {rowRenders}
- ) : (
- 'No Records to Display'
- )}
+ {userRecords && userRecords.length > 0
+ ?
+ {rowRenders({records: userRecords, headers: userHeadCells, navUrl: '/setup/users-access/edit-user', table: 'user'})}
+ : No Records to Display
}
diff --git a/src/routes/index.js b/src/routes/index.js
index a5c35d7..afa9251 100644
--- a/src/routes/index.js
+++ b/src/routes/index.js
@@ -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:
+ component:
},
{
name: 'Create User',