[WMS-55] Implemented review comments

Implemented review comments, added loader on submission

src/components/PwTablePanel/PwTablePanel.jsx

@@ -9,7 +9,7 @@ import EditIcon from '@mui/icons-material/Edit';
 import './PwTablePanel.component.scss';
 
 const PwTablePanel = props => {
-  const { backgroundColor, classes, color, headCells, id, loader, index, navUrl, records, table, value } = props;
+  const { backgroundColor, classes, color, dataFetched, headCells, id, loader, index, navUrl, records, table, value } = props;
   const navigate = useNavigate();
 
   const StyledTableRow = styled(TableRow)(({ theme }) => ({
@@ -56,7 +56,7 @@ const PwTablePanel = props => {
         {rowRenders({ records, headers: headCells, navUrl, table })}
       </TableBody>}
     </BasicTable>
-    {(!records || records.length === 0)
+    {(dataFetched && (!records || records.length === 0))
       && <p className='mx-3 my-5 d-flex justify-content-center align-items-center h4'>No Records to Display</p>}
   </TabPanel>;
 };
@@ -65,6 +65,7 @@ PwTablePanel.propTypes = {
   backgroundColor: PropTypes.string,
   classes: PropTypes.string,
   color: PropTypes.string,
+  dataFetched: PropTypes.bool,
   headCells: PropTypes.array,
   id: PropTypes.string,
   index: PropTypes.number,

src/pages/createEditUser/index.js

@@ -29,7 +29,7 @@ import DateTimeInput from 'components/DateTimePicker';
 import MDInput from 'components/MDInput';
 
 import { API } from 'constant';
-import UserIcon from 'assets/images/userIcon.png';
+import BlankImage from 'assets/images/blank-profile-picture.webp';
 import EditIcon from 'assets/images/edit-icon.png';
 import Breadcrumbs from 'components/Breadcrumbs';
 
@@ -79,6 +79,7 @@ function CreateEditUser(props) {
   const [editedUser, setEditedUser] = useState(location?.state?.user);
   const [selectedRoles, setSelectedRoles] = useState([]);
   const [uploadedImg, setUploadedImg] = useState();
+  const [loader, setLoader] = useState();
   // const [selectedPermissions, setSelectedPermissions] = useState({});
 
   useEffect(() => {
@@ -174,9 +175,11 @@ function CreateEditUser(props) {
     validationSchema: schema.createUser,
     onSubmit: (values, { setSubmitting }) => {
       const onValidationFailed = () => {
+        setLoader(false);
         setSubmitting(false);
       };
       const onSuccessfulSubmission = () => {
+        setLoader(false);
         navigate('/setup/users-access');
       };
       const adaptPayload = (values) => {
@@ -200,7 +203,8 @@ function CreateEditUser(props) {
         valuesClone.roles = selectedRoles && selectedRoles.length > 0 ? selectedRoles.map(role => role._id) : [];
         const formData = new FormData();
         Object.keys(valuesClone).forEach(key => formData.append(key, valuesClone[key]));
-        uploadedImg && formData.append('image', uploadedImg); 
+        uploadedImg && formData.append('image', uploadedImg);
+        setLoader(true);
         return formData;
       };
       dispatch(
@@ -278,7 +282,7 @@ function CreateEditUser(props) {
           { name: 'User Details' }
         ]}
       />
-      <MDBox component="form" role="form" px={2} onSubmit={formik.handleSubmit}>
+      <MDBox component="form" role="form" px={2} className={loader ? " loader" : ""} onSubmit={formik.handleSubmit}>
         <MDBox
           mx={4}
           sx={{
@@ -290,7 +294,8 @@ function CreateEditUser(props) {
         >
           <MDBox sx={{ width: '50%', margin: 'auto' }}>
             <MDBox sx={{ width: '120px', margin: 'auto', position: 'relative' }}>
-              <img src={uploadedImg ? typeof uploadedImg === 'string' ? uploadedImg : URL.createObjectURL(uploadedImg) : UserIcon} alt='img' width='120' height='120' style={{borderRadius: '50%'}} />
+              <img src={uploadedImg ? typeof uploadedImg === 'string' ? uploadedImg : URL.createObjectURL(uploadedImg) : BlankImage}
+                alt='img' width='120' height='120' style={{borderRadius: '50%'}}  onError={() => setUploadedImg(BlankImage)} />
               <MDBox sx={{ position: 'absolute', bottom: '0', right: '0' }}>
                 <label htmlFor="image" style={{ cursor: 'pointer' }}>
                   <img src={EditIcon} />

src/pages/useraccess/index.js

@@ -98,6 +98,8 @@ function UserAccessScreen() {
   const [rolesRecords, setRoleRecords] = useState([]);
   const [userLoader, setUserLoader] = useState(false);
   const [roleLoader, setRoleLoader] = useState(false);
+  const [roleApiCompleted, setRoleApiCompleted] = useState(false);
+  const [userApiCompleted, setUserApiCompleted] = useState(false);
   const [originalUserRecords, setOriginalUserRecords] = useState([]);
   const [originalRolesRecords, setOriginalRoleRecords] = useState([]);
   const navigate = useNavigate();
@@ -144,7 +146,7 @@ function UserAccessScreen() {
   ];
 
   const rolesHeadCells = [
-    { id: 'role', label: 'Role', isEditAnchor: true, placement: 'after', value: record => record.name },
+    { id: 'role', label: 'Role', isEditAnchor: true, value: record => record.name },
     { id: 'warehouse', label: 'Warehouse', limitWidth: true, value: record => {
       const roleWh = record.permissions?.warehouseScopes;
       return warehouses && roleWh && roleWh.length === warehouses.length ? 'All' : roleWh
@@ -174,7 +176,10 @@ function UserAccessScreen() {
         loader: 'loading-request',
         slug: API.GET_USERS_DATA,
         method: 'get',
-        callback: setUserLoader
+        callback: () => {
+          setUserLoader(false);
+          setUserApiCompleted(true);
+        }
       })
     );
   };
@@ -186,7 +191,10 @@ function UserAccessScreen() {
         loader: 'loading-request',
         slug: API.GET_ROLES_DATA,
         method: 'get',
-        callback: setRoleLoader
+        callback: () => {
+          setRoleLoader(false);
+          setRoleApiCompleted(true);
+        }
       })
     );
   };
@@ -296,9 +304,9 @@ function UserAccessScreen() {
           </Grid>
         </Grid>
         <Grid>
-          <PwTablePanel classes={classes} headCells={userHeadCells} id="user-list" index={0} loader={userLoader}
+          <PwTablePanel classes={classes} headCells={userHeadCells} id="user-list" index={0} loader={userLoader} dataFetched={userApiCompleted}
             records={userRecords} navUrl='/setup/users-access/edit-user' table="user" value={value} />
-          <PwTablePanel classes={classes} headCells={rolesHeadCells} id="role-list" index={1} loader={roleLoader}
+          <PwTablePanel classes={classes} headCells={rolesHeadCells} id="role-list" index={1} loader={roleLoader} dataFetched={roleApiCompleted}
             records={rolesRecords} navUrl='/setup/users-access/edit-role' table="role" value={value} />
         </Grid>
       </MDBox>

src/sagas/Roles.js

@@ -11,7 +11,7 @@ export function* onRequestRolesData({ payload }) {
     payload?.slug,
     payload?.data
   );
-  payload?.callback && payload?.callback(false);
+  payload?.callback && payload?.callback();
   if (response?.status === 200) {
     yield put(
       RolesActions.getRolesSuccess({

src/sagas/Users.js

@@ -11,7 +11,7 @@ export function* onRequestUsersData({ payload }) {
     payload?.slug,
     payload?.data
   );
-  payload?.callback && payload?.callback(false);
+  payload?.callback && payload?.callback();
   if (response?.status === 200) {
     yield put(
       UsersActions.getUsersSuccess({