Feat: List roles page (WMS-40) (#55)

* feat: list roles page with api integration
* Update: added dispatch on first load

src/pages/useraccess/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import MDBox from 'components/MDBox';
 import DashboardNavbar from 'components/DashboardNavbar';
 import Footer from 'components/Footer';
@@ -13,10 +13,10 @@ import MDButton from 'components/Button';
 import { useState } from 'react';
 import { Tabs, Tab } from '@mui/material';
 import TabPanel from 'components/Tabs';
-import UsersActions from 'redux/UsersRedux';
+import UsersActions, { UsersSelectors } from 'redux/UsersRedux';
+import RolesActions, { RolesSelectors } from 'redux/RolesRedux';
 import { API } from 'constant';
 import { useDispatch, useSelector } from 'react-redux';
-import { UsersSelectors } from 'redux/UsersRedux';
 import moment from 'moment';
 
 const useStyles = makeStyles((theme) => ({
@@ -51,34 +51,36 @@ const useStyles = makeStyles((theme) => ({
     }
   }
 }));
-const headCells = [
+const userHeadCells = [
   { id: 'fullName', label: 'Name' },
   { id: 'role_name', label: 'Roles' },
   { id: 'updated_at', label: 'Updated at' },
   { id: 'created_at', label: 'Created by and at' }
 ];
 
+const rolesHeadCells = [
+  { id: 'role', label: 'Role' },
+  { id: 'permissions', label: 'Permissions' },
+  { id: 'status', label: 'Status' }
+];
+
+// const permissionsHeadCells = [
+//   { id: 'permission', label: 'Permission' },
+//   { id: 'warehouse', label: 'Warehouse' },
+//   { id: 'inventories', label: 'Inventories' },
+//   { id: 'actions', label: 'Actions' },
+//   { id: 'app_modules', label: 'App Modules' },
+//   { id: 'status', label: 'Status' }
+// ];
+
 function UserAccessScreen() {
   const classes = useStyles();
   const dispatch = useDispatch();
   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) => {
-    setValue(val);
-  };
+  const rolesData = useSelector(RolesSelectors.getRolesDetail);
+  const [userRecords, setUserRecords] = useState([]);
+  const [rolesRecords, setRoleRecords] = useState([]);
 
   const usersHandler = () => {
     dispatch(
@@ -90,6 +92,50 @@ function UserAccessScreen() {
     );
   };
 
+  const rolesHandler = () => {
+    dispatch(
+      RolesActions.getRolesAction({
+        loader: 'loading-request',
+        slug: API.GET_ROLES_DATA,
+        method: 'get'
+      })
+    );
+  };
+
+  useMemo(() => rolesHandler(), []);
+
+  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;
+      });
+      setUserRecords(users);
+    }
+
+    if (rolesData.length) {
+      let roles = JSON.parse(JSON.stringify(rolesData));
+      roles = roles.map((item) => {
+        item.name = item.name.split('-').join(' ').toUpperCase();
+        item.permissions = item.permissions.map((permission) => permission.name).join(',');
+        if (!item.permissions) {
+          item.permissions = 'NA';
+        }
+        item.status = 'INACTIVE';
+        if (item.status) {
+          item.status = 'ACTIVE';
+        }
+        return item;
+      });
+      setRoleRecords(roles);
+    }
+  }, [rolesData, usersData]);
+
+  const handleTabs = (e, val) => {
+    setValue(val);
+  };
+
   const StyledTableRow = styled(TableRow)(({ theme }) => ({
     '&:nth-of-type(even)': {
       backgroundColor: theme.palette.action.hover
@@ -103,7 +149,7 @@ function UserAccessScreen() {
         <Grid container spacing={2} className={classes.margin}>
           <Grid item xs={12} sm={4} md={4}>
             <Tabs value={value} className={classes.tabs} onChange={handleTabs}>
-              <Tab label="Roles" />
+              <Tab label="Roles" onClick={() => rolesHandler()} />
               <Tab label="Users" onClick={() => usersHandler()} />
             </Tabs>
           </Grid>
@@ -117,18 +163,39 @@ function UserAccessScreen() {
           </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}
+            headCells={rolesHeadCells}
+            records={rolesRecords}
             backgroundColor="#007AFF"
             color="#fff"
           >
             <TableBody>
-              {records &&
-                records.map((item) => (
+              {rolesRecords &&
+                rolesRecords.map((item) => (
+                  <StyledTableRow key={item.id}>
+                    <TableCell>
+                      <div className={classes.iconwrap}>
+                        <EditIcon className={classes.iconSize} />
+                        {item.name}
+                      </div>
+                    </TableCell>
+                    <TableCell>{item.permissions}</TableCell>
+                    <TableCell>{item.status}</TableCell>
+                  </StyledTableRow>
+                ))}
+            </TableBody>
+          </BasicTable>
+        </TabPanel>
+        <TabPanel value={value} index={1}>
+          <BasicTable
+            headCells={userHeadCells}
+            records={userRecords}
+            backgroundColor="#007AFF"
+            color="#fff"
+          >
+            <TableBody>
+              {userRecords &&
+                userRecords.map((item) => (
                   <StyledTableRow key={item.id}>
                     <TableCell>
                       <div className={classes.iconwrap}>