From 4c2df3fd2ce4c67f8539482c427265d533ea29a9 Mon Sep 17 00:00:00 2001 From: Sathishkumar Krishnan <88375064+krsatz@users.noreply.github.com> Date: Fri, 11 Feb 2022 22:55:54 +0530 Subject: [PATCH] Feat: List roles page (WMS-40) (#55) * feat: list roles page with api integration * Update: added dispatch on first load --- src/constant/Endpoints.js | 3 +- src/pages/useraccess/index.js | 123 ++++++++++++++++++++++++++-------- src/redux/RolesRedux.js | 54 +++++++++++++++ src/redux/index.js | 4 +- src/sagas/Roles.js | 30 +++++++++ src/sagas/index.js | 2 + 6 files changed, 186 insertions(+), 30 deletions(-) create mode 100644 src/redux/RolesRedux.js create mode 100644 src/sagas/Roles.js diff --git a/src/constant/Endpoints.js b/src/constant/Endpoints.js index 9c7d533..e1e5aaf 100644 --- a/src/constant/Endpoints.js +++ b/src/constant/Endpoints.js @@ -2,5 +2,6 @@ export default { LOGIN_USER: '/user/login', GET_WAREHOUSE_DATA: '/warehouse/all?page=0&perPage=50', CREATE_WAREHOUSE: '/warehouse/', - GET_USERS_DATA: '/user/all?page=0&perPage=10' + GET_USERS_DATA: '/user/all?page=0&perPage=10', + GET_ROLES_DATA: '/user-role/all?page=0&perPage=10' }; diff --git a/src/pages/useraccess/index.js b/src/pages/useraccess/index.js index db5f63b..dec2ab7 100644 --- a/src/pages/useraccess/index.js +++ b/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() { - + rolesHandler()} /> usersHandler()} /> @@ -117,18 +163,39 @@ function UserAccessScreen() { -
Item2 Detail
- - - {records && - records.map((item) => ( + {rolesRecords && + rolesRecords.map((item) => ( + + +
+ + {item.name} +
+ + {item.permissions} + {item.status} + + ))} + + + + + + + {userRecords && + userRecords.map((item) => (
diff --git a/src/redux/RolesRedux.js b/src/redux/RolesRedux.js new file mode 100644 index 0000000..442398e --- /dev/null +++ b/src/redux/RolesRedux.js @@ -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({ + getRolesAction: ['payload'], + getRolesSuccess: ['data'], + getRolesFailure: ['error'] +}); + +export const RolesTypes = Types; +const RolesActions = Creators; +export default RolesActions; + +/* ------------- Initial State ------------- */ +export const INITIAL_STATE = Immutable({ + rolesDetail: [], + rolesLoading: false, + roleserror: {} +}); + +/* ------------- Selectors ------------- */ +export const RolesSelectors = { + getRolesDetail: (state) => state.roles.rolesDetail +}; + +/* ------------- Reducers ------------- */ +export const onGetRolesAction = (state, { payload }) => + state.merge({ + fetching: _.uniq([state.fetching, payload?.loader]), + error: getErrorValue(state?.error, payload?.loader) + }); + +export const onGetRolesSuccess = (state, { data }) => + state.merge({ + fetching: getFetchingValue(state.fetching, data?.loader), + error: getErrorValue(state?.error, data?.loader), + rolesDetail: data.rolesDetail + }); + +export const onGetRolesFailure = (state, { error }) => + state.merge({ + fetching: _.without(state.fetching, error?.loader), + error: { ...state.error, [error?.loader]: error?.error } + }); + +/* ------------- Hookup Reducers To Types ------------- */ +export const rolesReducer = createReducer(INITIAL_STATE, { + [Types.GET_ROLES_ACTION]: onGetRolesAction, + [Types.GET_ROLES_SUCCESS]: onGetRolesSuccess, + [Types.GET_ROLES_FAILURE]: onGetRolesFailure +}); diff --git a/src/redux/index.js b/src/redux/index.js index 5e860e9..4e28d5c 100644 --- a/src/redux/index.js +++ b/src/redux/index.js @@ -2,12 +2,14 @@ import { combineReducers } from 'redux'; import { authReducer } from './AuthRedux'; import { warehouseReducer } from './WarehouseRedux'; import { usersReducer } from './UsersRedux'; +import { rolesReducer } from './RolesRedux'; // Combine all reducers. const appReducer = combineReducers({ auth: authReducer, warehouse: warehouseReducer, - users: usersReducer + users: usersReducer, + roles: rolesReducer }); const rootReducer = (state, action) => { diff --git a/src/sagas/Roles.js b/src/sagas/Roles.js new file mode 100644 index 0000000..b2527cd --- /dev/null +++ b/src/sagas/Roles.js @@ -0,0 +1,30 @@ +import { AuthorizedAPI } from 'config'; +import { takeLatest, call, put } from 'redux-saga/effects'; +import RolesActions, { RolesTypes } from '../redux/RolesRedux'; +import ApiServices from 'services/API/ApiServices'; + +export function* onRequestRolesData({ payload }) { + const response = yield call( + ApiServices[payload?.method], + AuthorizedAPI, + payload?.slug, + payload?.data + ); + if (response?.status === 200) { + yield put( + RolesActions.getRolesSuccess({ + loader: payload?.loader, + rolesDetail: response?.data?.data + }) + ); + } else { + payload.onFailedRolesData(response.data.error); + yield put( + RolesActions.getRolesFailure({ + loader: payload?.loader, + error: response?.data + }) + ); + } +} +export default [takeLatest(RolesTypes.GET_ROLES_ACTION, onRequestRolesData)]; diff --git a/src/sagas/index.js b/src/sagas/index.js index cd0a209..141f3c3 100644 --- a/src/sagas/index.js +++ b/src/sagas/index.js @@ -2,9 +2,11 @@ import { all } from 'redux-saga/effects'; import AuthSaga from './Auth'; import WarehouseSaga from './Warehouse'; import UsersSaga from './Users'; +import RolesSaga from './Roles'; export default function* rootSaga() { yield all([...AuthSaga]); yield all([...WarehouseSaga]); yield all([...UsersSaga]); + yield all([...RolesSaga]); }