Updated User Management Section #1557

freaky4wrld · 2023-12-23T11:11:39Z

Fixes #1478

What changes did you make and why did you make them ?

Refractored the current version of code in accordance to the MUI component, these changes are made as per the issue
Added a Add a New User button as per the design
There are changes to be made for styling and positioning purposes

Screenshots of Proposed Changes Of The Website (if any, please do not screen shot code changes)

Visuals before changes are applied

Visuals after changes are applied

…and added New user button

github-actions · 2023-12-23T11:12:05Z

Want to review this pull request? Take a look at this documentation for a step by step guide!

From your project repository, check out a new branch and test the changes.

git checkout -b freaky4wrld-updating-user-management-section-according-figma-design-1478 development
git pull https://github.com/freaky4wrld/VRMS.git updating-user-management-section-according-figma-design-1478

freaky4wrld · 2023-12-23T11:19:51Z

@spiteless just want to know your views on the recent changes, also if you can direct me to some examples for styling those Button, ButtonGroup and Textfield or should I use the sx property

trillium

Thanks for getting this going!

Use sx or MUI system properties to style the boxes/buttons/button groups. I've added inline suggestions to help with some of the changes :)

trillium · 2023-12-23T19:51:05Z

client/src/components/user-admin/UserManagement.js

 import '../../sass/UserAdmin.scss';

+const h3sx = {


No need to bring in this object, the default styling is fine for this page

trillium · 2023-12-23T19:51:18Z

client/src/components/user-admin/UserManagement.js

@@ -44,64 +55,77 @@ const UserManagement = ({ users, setUserToEdit }) => {
  return (
    <div className="container--usermanagement">
      <div>
-        <h3>User Management</h3>
-        <input
+        <Typography variant='h3' sx={h3sx}>User Management</Typography>


Change to h1

trillium · 2023-12-23T19:52:53Z

client/src/components/user-admin/UserManagement.js

+
+        <div className="tab-buttons">
+          <ButtonGroup>
+            <div>


Change nesting of elements to:

<ButtonGroup> <Button> etc... </Button> <Button> etc... </Button> </ButtonGroup>

From

<ButtonGroup> <div> <Button> etc... </Button> </div> <div> <Button> etc... </Button> </div> </ButtonGroup>

Changing the nesting will allow the buttons to display in a pill shape as per the figma file

trillium · 2023-12-23T19:57:54Z

client/src/components/user-admin/UserManagement.js

+                }
+                variant='secondary'
+                onClick={buttonSwap}
+                disabled={searchResultType === 'name'}


Drop disable prop, it's okay if these are clicked even if one is already selected

trillium · 2023-12-23T19:59:20Z

client/src/components/user-admin/UserManagement.js

+                    ? 'select-button selected'
+                    : 'select-button'
+                }
+                variant='secondary'


Change variant prop to secondary or contained based on the same ternamery in className:

variant={ searchResultType === 'name' ? 'contained' : 'secondary' }

contained is the active button state, secondary is the inactive button state

trillium · 2023-12-23T20:20:48Z

client/src/components/user-admin/UserManagement.js

          type="text"
          placeholder="Search by name and email..."
          value={searchTerm}
          onChange={handleChange}
        />
-        <div className="tab-buttons">
+        <Box>


Feel free to steal from other components in the project already:

This section with rendered users is similar to the results from the Project Management page:
( this is actully pulled from the return of ValidatedTextField, but its styling can be viewed from the Project Management page )

<Box sx={{ bgcolor: '#F5F5F5', my: 3 }}> <Box sx={{ py: 2, px: 4, ...childrenBoxSx }}> {children} {/* This is where searchRuslts.map() would go /*} </Box> </Box>

client/src/components/user-admin/UserManagement.js

freaky4wrld · 2023-12-26T10:18:22Z

@spiteless please check the recent styling changes, and the screenshots are updated as well.
I've slacked some blockers do check them as well, Thanks !!!!

…r the buttons and changed the color of the button text

…f 100%

freaky4wrld · 2024-01-09T08:37:09Z

@spiteless tried adding breakpoints to the button element, I guess the branch UI is close to the issue UI. Please provide your feedback.

trillium

This is coming together nicely!

Please update a few things:

Change all div to Box
Remove any width statement that is greater than 100%
- Give those elements margin or padding instead
  (This is because a larger width than 100% will mess with the box model making maintenence down the line more complicated)
Remove commented out objects or objects that aren't bening used
- the h3sx object
- the empty sx prop in the Box

Great work! I'm stoked to get this merged.

client/src/components/user-admin/UserManagement.js

trillium · 2024-01-10T07:23:09Z

client/src/components/user-admin/UserManagement.js

+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        width: '75%',


There's a few other comments in here about width being used. This is another case where I'd prefer to see the boundaries of the box maintained by margin or padding eg:

sx={{ mx: 2 // This is just an example value // mx being mui's system for marginLeft and marginRight }}

If we do need to limit the width of this Box, I'd prefer we go with a maxWidth property so that the size is properly restrained on wider screens.

client/src/components/user-admin/UserManagement.js

…ve numerical value to borderRadius

trillium

Suggested some changes to help out with width and spacing.

There's a few occurances of things like px: "0.5rem" that would be better served using MUI's spacing system and numerical units. Would you mind updating those? My appologies if this is getting tedious.

Also requested a few width: 1/1 or width: "100%s to make sure a Box or two are inhereting the width properly from their parent element. Thanks for removing the non-100% values!

client/src/components/user-admin/UserManagement.js

…ock element and provided width 1/1

freaky4wrld · 2024-01-13T09:30:59Z

@spiteless hope you aren't asleep, review whenever you want

trillium

Great work, looks good to me!

fix+feat:refractored the current code in accordance to MUI component …

7adc155

…and added New user button

freaky4wrld requested a review from trillium December 23, 2023 11:11

trillium added the draft Not ready for prioritization yet label Dec 23, 2023

trillium requested changes Dec 23, 2023

View reviewed changes

trillium reviewed Dec 23, 2023

View reviewed changes

client/src/components/user-admin/UserManagement.js Show resolved Hide resolved

fix: added styles to various box and button to achieve the UI specs

1182fd7

freaky4wrld added 3 commits December 27, 2023 12:54

fix: added some padding to the element, provided horizontal rule afte…

3f1cd4d

…r the buttons and changed the color of the button text

fix: fixed the UI pushed the button down, gave root element a width o…

aca674f

…f 100%

Added breakpoints to the button text

85ce20f

freaky4wrld removed the draft Not ready for prioritization yet label Jan 9, 2024

trillium requested changes Jan 11, 2024

View reviewed changes

freaky4wrld added 2 commits January 13, 2024 10:44

fix: refactored divs to Box, removed commented and unused objects, ga…

8e6899a

…ve numerical value to borderRadius

fix: tried to manipulate the design with margin and padding as directed

cb81070

trillium requested changes Jan 13, 2024

View reviewed changes

fix: replaced hardcode strings with numerical value, set result as bl…

c3746c2

…ock element and provided width 1/1

trillium approved these changes Jan 13, 2024

View reviewed changes

trillium merged commit 3405552 into hackforla:development Jan 13, 2024
5 checks passed

JackHaeg mentioned this pull request Mar 1, 2024

Remove "Add a New User" Button on User Management Screen #1601

Closed

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Updated User Management Section #1557

Updated User Management Section #1557

freaky4wrld commented Dec 23, 2023 •

edited

Loading

github-actions bot commented Dec 23, 2023

freaky4wrld commented Dec 23, 2023

trillium left a comment •

edited

Loading

trillium Dec 23, 2023 •

edited

Loading

trillium Dec 23, 2023

trillium Dec 23, 2023

trillium Dec 23, 2023

trillium Dec 23, 2023

trillium Dec 23, 2023 •

edited

Loading

trillium Dec 23, 2023

trillium Dec 23, 2023 •

edited

Loading

freaky4wrld commented Dec 26, 2023 •

edited

Loading

freaky4wrld commented Jan 9, 2024

trillium left a comment •

edited by freaky4wrld

Loading

trillium Jan 10, 2024

trillium left a comment

freaky4wrld commented Jan 13, 2024

trillium left a comment

Updated User Management Section #1557

Updated User Management Section #1557

Conversation

freaky4wrld commented Dec 23, 2023 • edited Loading

What changes did you make and why did you make them ?

Screenshots of Proposed Changes Of The Website (if any, please do not screen shot code changes)

github-actions bot commented Dec 23, 2023

freaky4wrld commented Dec 23, 2023

trillium left a comment • edited Loading

Choose a reason for hiding this comment

trillium Dec 23, 2023 • edited Loading

Choose a reason for hiding this comment

trillium Dec 23, 2023

Choose a reason for hiding this comment

trillium Dec 23, 2023

Choose a reason for hiding this comment

trillium Dec 23, 2023

Choose a reason for hiding this comment

trillium Dec 23, 2023

Choose a reason for hiding this comment

trillium Dec 23, 2023 • edited Loading

Choose a reason for hiding this comment

trillium Dec 23, 2023

Choose a reason for hiding this comment

trillium Dec 23, 2023 • edited Loading

Choose a reason for hiding this comment

freaky4wrld commented Dec 26, 2023 • edited Loading

freaky4wrld commented Jan 9, 2024

trillium left a comment • edited by freaky4wrld Loading

Choose a reason for hiding this comment

trillium Jan 10, 2024

Choose a reason for hiding this comment

trillium left a comment

Choose a reason for hiding this comment

freaky4wrld commented Jan 13, 2024

trillium left a comment

Choose a reason for hiding this comment

freaky4wrld commented Dec 23, 2023 •

edited

Loading

trillium left a comment •

edited

Loading

trillium Dec 23, 2023 •

edited

Loading

trillium Dec 23, 2023 •

edited

Loading

trillium Dec 23, 2023 •

edited

Loading

freaky4wrld commented Dec 26, 2023 •

edited

Loading

trillium left a comment •

edited by freaky4wrld

Loading