UI Development

bcgov · Aug 25, 2023 · befd1e5 · befd1e5
1 parent 9e417df
commit befd1e5
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 49 deletions.
diff --git a/app/src/components/alert/AlertBar.tsx b/app/src/components/alert/AlertBar.tsx
@@ -12,7 +12,7 @@ interface IAlertBarProps {
 
 const AlertBar: React.FC<IAlertBarProps> = (props) => {
   const { severity, variant, title, text } = props;
-  const [forceAlertClose, setForceAlertClose] = useState(false);
+  const [forceAlertClose] = useState(false);
 
   if (forceAlertClose) {
     // User has manually closed the banner
@@ -24,7 +24,6 @@ const AlertBar: React.FC<IAlertBarProps> = (props) => {
       <Alert
         variant={variant}
         severity={severity}
-        onClose={() => setForceAlertClose(true)}
         // action={
         //   <IconButton color="inherit" onClick={() => setForceAlertClose(false)}>
         //     <Icon path={mdiClose} size={1} />

diff --git a/app/src/features/projects/components/ProjectUserForm.tsx b/app/src/features/projects/components/ProjectUserForm.tsx
@@ -156,23 +156,35 @@ const ProjectUserForm: React.FC<IProjectUser> = (props) => {
   return (
     <form onSubmit={handleSubmit}>
       <Box component="fieldset">
-        <Typography component="legend">Add Team Members</Typography>
+        <Typography component="legend">Manage Team Members</Typography>
+        <Typography variant="body1" color="textSecondary"
+          sx={{
+            maxWidth: '72ch'
+          }}
+        >
+          A minimum of one team member must be assigned the coordinator role.
+        </Typography>
         {errors && errors['participants'] && !selectedUsers.length && (
-          <AlertBar
-            severity="error"
-            variant="standard"
-            title={'Missing Team Member'}
-            text={'At least 1 member needs to be added to manage a project.'}
-          />
+          <Box mt={3}>
+            <AlertBar
+              severity="error"
+              variant="standard"
+              title={'No team members added'}
+              text={'At least one team member needs to be added to this project.'}
+            />
+          </Box>
+        )}
+        {errors && errors['participants'] && selectedUsers.length > 0 && (
+          <Box mt={3}>
+            <AlertBar severity="error" variant="standard" title={alertBarText().title} text={alertBarText().text} />
+          </Box>
         )}
-        <Typography variant="body1" color="textSecondary" style={{ maxWidth: '90ch' }}>
-          Select team members and assign each member a role for this project.
-        </Typography>
         <Box mt={3}>
           <Autocomplete
             id={'autocomplete-user-role-search'}
             data-testid={'autocomplete-user-role-search'}
             filterSelectedOptions
+            noOptionsText="No records found"
             options={filterSearchOptions(searchUserDataLoader.data, selectedUsers)}
             getOptionLabel={(option) => option.display_name}
             onChange={(_, option) => {
@@ -184,11 +196,11 @@ const ProjectUserForm: React.FC<IProjectUser> = (props) => {
               <TextField
                 {...params}
                 variant="outlined"
-                placeholder={'Find Team Members'}
+                placeholder={'Find team members'}
                 fullWidth
                 InputProps={{
                   ...params.InputProps,
-                  startAdornment: <Icon path={mdiMagnify} size={1}></Icon>
+                  startAdornment: <Box mx={1} mt="6px"><Icon path={mdiMagnify} size={1}></Icon></Box>
                 }}
               />
             )}
@@ -206,40 +218,36 @@ const ProjectUserForm: React.FC<IProjectUser> = (props) => {
             }}
           />
         </Box>
-      </Box>
-      <Box component="fieldset" mt={4}>
         {selectedUsers.length > 0 && (
-          <Typography component={'legend'} variant="h5">
-            Assign Roles ({selectedUsers.length})
-          </Typography>
-        )}
-        {errors && errors['participants'] && selectedUsers.length > 0 && (
-          <AlertBar severity="error" variant="standard" title={alertBarText().title} text={alertBarText().text} />
+          <Box mt={2}>
+            <Box
+              sx={{
+                '& .userRoleItemContainer + .userRoleItemContainer': {
+                  mt: 1
+                }
+              }}>
+              {selectedUsers.map((user: ISystemUser | IGetProjectParticipant, index: number) => {
+                const error = rowItemError(index);
+
+                console.log('selected user: ', user);
+                return (
+                  <UserRoleSelector
+                    index={index}
+                    user={user}
+                    roles={props.roles}
+                    error={error}
+                    selectedRole={getSelectedRole(index)}
+                    handleAdd={handleAddUserRole}
+                    handleRemove={handleRemoveUser}
+                    key={user.system_user_id}
+                  />
+                );
+              })}
+            </Box>
+          </Box>
         )}
-        <Box
-          sx={{
-            '& .userRoleItemContainer + .userRoleItemContainer': {
-              mt: 1
-            }
-          }}>
-          {selectedUsers.map((user: ISystemUser | IGetProjectParticipant, index: number) => {
-            const error = rowItemError(index);
-
-            return (
-              <UserRoleSelector
-                index={index}
-                user={user}
-                roles={props.roles}
-                error={error}
-                selectedRole={getSelectedRole(index)}
-                handleAdd={handleAddUserRole}
-                handleRemove={handleRemoveUser}
-                key={user.system_user_id}
-              />
-            );
-          })}
-        </Box>
       </Box>
+
     </form>
   );
 };

diff --git a/app/src/features/projects/create/CreateProjectForm.tsx b/app/src/features/projects/create/CreateProjectForm.tsx
@@ -180,8 +180,8 @@ const CreateProjectForm: React.FC<ICreateProjectForm> = (props) => {
         <Divider className={classes.sectionDivider} />
 
         <HorizontalSplitFormComponent
-          title="Project Users"
-          summary="Add some users"
+          title="Team Members"
+          summary="Specify team members and their associated role for this project."
           component={<ProjectUserForm users={[getLoggedInUserAsParticipant()]} roles={codes.project_roles} />}
         />
 

diff --git a/app/src/features/projects/edit/EditProjectForm.tsx b/app/src/features/projects/edit/EditProjectForm.tsx
@@ -137,8 +137,8 @@ const EditProjectForm: React.FC<IEditProjectForm> = (props) => {
           <Divider className={classes.sectionDivider} />
 
           <HorizontalSplitFormComponent
-            title="Project Users"
-            summary="Add some users"
+            title="Team Members"
+            summary="Specify team members and their associated role for this project."
             component={<ProjectUserForm users={props.projectData.participants || []} roles={codes.project_roles} />}
           />