authscape 1.0.550 → 1.0.552

package/src/components/users/UserEditor.js

@@ -1,9 +1,8 @@
 import React, {useEffect, useState, useRef} from 'react';
 import { Box } from '@mui/system';
 import TextField from '@mui/material/TextField';
-import { Button, Grid } from '@mui/material';
+import { Autocomplete, Button, Grid } from '@mui/material';
 import Typography from '@mui/material/Typography';
-// import { apiService } from 'authscape';
 import FormControl from '@mui/material/FormControl';
 import InputLabel from '@mui/material/InputLabel';
 import Select from '@mui/material/Select';
@@ -14,6 +13,8 @@ import ListItemText from '@mui/material/ListItemText';
 import { useForm, Controller } from 'react-hook-form';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Switch from '@mui/material/Switch';
+import { Tab, Tabs } from '@mui/material';
+import { BusinessRounded, PersonRounded } from '@mui/icons-material';
 
 export function UserEditor({userId = null, customFields = null, onSaved = null}) {
 
@@ -22,6 +23,14 @@ export function UserEditor({userId = null, customFields = null, onSaved = null})
   const [selectedRoles, setSelectedRole] = useState([]);
   const [selectedPermission, setSelectedPermission] = useState([]);
 
+  const [companies, setCompanies] = useState([]);
+  const [company, setCompany] = useState(null);
+  const [inputCompanyValue, setInputCompanyValue] = useState('');
+
+  const [locations, setLocations] = useState([]);
+  const [location, setLocation] = useState(null);
+  const [inputLocationValue, setInputLocationValue] = useState('');
+
   const [roles, setRole] = useState([]);
   const [permissions, setPermissions] = useState([]);
 
@@ -38,6 +47,12 @@ export function UserEditor({userId = null, customFields = null, onSaved = null})
     },
   };
 
+  const [tabValue, setTabValue] = useState(0);
+
+  const handleTabChange = (event, newValue) => {
+      setTabValue(newValue);
+  };
+
   useEffect(() => {
 
       const fetchData = async () => {
@@ -69,6 +84,16 @@ export function UserEditor({userId = null, customFields = null, onSaved = null})
         {
           setUser(response.data);
 
+          if (response.data.company != null)
+          {
+            setCompany(response.data.company);
+          }
+
+          if (response.data.location != null)
+          {
+            setLocation(response.data.location);
+          }
+
           // assign all selected roles
           if (response.data.roles != null)
           {
@@ -95,7 +120,12 @@ export function UserEditor({userId = null, customFields = null, onSaved = null})
           
         }
       }
-      fetchData();
+
+      if (userId != -1)
+      {
+        fetchData();
+      }
+      
     }
 
   }, [userId])
@@ -103,7 +133,6 @@ export function UserEditor({userId = null, customFields = null, onSaved = null})
   const fields = [
     "FirstName",
     "LastName",
-    "Company",
     "IsActive",
     "Email"
   ]
@@ -148,12 +177,12 @@ export function UserEditor({userId = null, customFields = null, onSaved = null})
 
     return (
         <>
-        {user != null && customFields.map((field) => {
+        {(userId != -1 ? user != null : true) && customFields.map((field) => {
 
             let result = findCustomFieldValue(field.name);
 
             return (
-            <Box>
+            <Grid item xs={6}>
                 <Controller name={field.name} 
                     control={control}
                     rules={{
@@ -172,7 +201,7 @@ export function UserEditor({userId = null, customFields = null, onSaved = null})
                     }
                 />
                 {errors[field.name] && <Typography color={"red"}>{field.name} is required.</Typography>}
-            </Box>
+            </Grid>
             )
 
         })}
@@ -184,52 +213,52 @@ export function UserEditor({userId = null, customFields = null, onSaved = null})
 
     return (
         <>
-        {user != null && customFields.map((field) => {
+        {(userId != -1 ? user != null : true) && customFields.map((field) => {
 
             let result = findTheValue(field);
 
             return (
-            <Box>
-
-            {field == "IsActive" &&
-                <Box>
-                <Controller name={field} 
-                    control={control}
-                    rules={{
-                        required: false,
-                    }}
-                    render={({renderField}) => 
-                    <FormControlLabel control={<Switch defaultChecked={result} />} label={field} {...register(field, { required: false })} {...renderField} />
-                    }
-                />
-                {errors[field] && <Typography color={"red"}>{field} is required.</Typography>}
+            <Grid item xs={6}>
 
-                </Box>
-            }
+              {field == "IsActive" &&
+                  <Box>
+                  <Controller name={field} 
+                      control={control}
+                      rules={{
+                          required: false,
+                      }}
+                      render={({renderField}) => 
+                      <FormControlLabel control={<Switch defaultChecked={result} />} label={field} {...register(field, { required: false })} {...renderField} />
+                      }
+                  />
+                  {errors[field] && <Typography color={"red"}>{field} is required.</Typography>}
 
-            {field != "IsActive" &&
-            <Box>
-                <Controller name={field} 
-                    control={control}
-                    rules={{
-                        required: true,
-                    }}
-                    render={({renderField}) => 
-                    <TextField
-                        label={field}
-                        variant="outlined"
-                        defaultValue={result}
-                        margin="normal"
-                        fullWidth
-                        {...register(field, { required: true })}
-                        {...renderField}
-                    />
-                    }
-                />
-                {errors[field] && <Typography color={"red"}>{field} is required.</Typography>}
-            </Box>
-            }
-            </Box>
+                  </Box>
+              }
+
+              {field != "IsActive" &&
+              <Box>
+                  <Controller name={field} 
+                      control={control}
+                      rules={{
+                          required: true,
+                      }}
+                      render={({renderField}) => 
+                      <TextField
+                          label={field}
+                          variant="outlined"
+                          defaultValue={result}
+                          margin="normal"
+                          fullWidth
+                          {...register(field, { required: true })}
+                          {...renderField}
+                      />
+                      }
+                  />
+                  {errors[field] && <Typography color={"red"}>{field} is required.</Typography>}
+              </Box>
+              }
+            </Grid>
             )
 
         })}
@@ -237,12 +266,84 @@ export function UserEditor({userId = null, customFields = null, onSaved = null})
     )
   }
 
-  return (
-      <Box sx={{paddingTop:0}}>
+  function a11yProps(index) {
+    return {
+      id: `simple-tab-${index}`,
+      'aria-controls': `simple-tabpanel-${index}`
+    };
+  }
+
+
+
+  useEffect(() => {
+
+    const fetchData = async () => {
+
+      if (inputCompanyValue == null || inputCompanyValue == "")
+      {
+        let response = await apiService().get("/UserManagement/GetCompanies");
+        if (response != null && response.status == 200)
+        {
+          setCompanies(response.data);
+        }
+      }
+      else
+      {
+        let response = await apiService().get("/UserManagement/GetCompanies?name=" + inputCompanyValue);
+        if (response != null && response.status == 200)
+        {
+          setCompanies(response.data);
+        }
+      }
+
+    }
+
+    if (user != null || userId == -1)
+    {
+      fetchData();
+    }
+
+  }, [user, userId, inputCompanyValue])
+
+
 
-        <Box sx={{paddingBottom:2}}>
-            Edit Account
-        </Box>
+
+
+
+  useEffect(() => {
+
+    const fetchData = async () => {
+
+      if (company != null)
+      {
+        if (inputLocationValue == null || inputLocationValue == "")
+        {
+          let response = await apiService().get("/UserManagement/GetLocations?companyId=" + company.id);
+          if (response != null && response.status == 200)
+          {
+            setLocations(response.data);
+          }
+        }
+        else
+        {
+          let response = await apiService().get("/UserManagement/GetLocations?companyId=" + company.id + "&name=" + inputLocationValue);
+          if (response != null && response.status == 200)
+          {
+            setLocations(response.data);
+          }
+        }
+      }
+    }
+
+    if (user != null || userId == -1)
+    {
+      fetchData();
+    }
+
+  }, [user, userId, inputLocationValue, company])
+
+  return (
+      <Box sx={{paddingTop:0, minWidth: 600}}>
 
           <form onSubmit={handleSubmit(async (data) => {
             
@@ -260,7 +361,8 @@ export function UserEditor({userId = null, customFields = null, onSaved = null})
                 id: userId,
                 firstName: data.FirstName,
                 lastName: data.LastName,
-                company: data.Company,
+                companyId: company != null ? company.id : null,
+                locationId: location != null ? location.id : null,
                 email: data.Email,
                 isActive: data.IsActive,
                 roles: selectedRoles != "" ? selectedRoles : null,
@@ -277,99 +379,212 @@ export function UserEditor({userId = null, customFields = null, onSaved = null})
             }
 
           })} noValidate autoComplete="off">
-            <Grid container spacing={2}>
-                <Grid item xs={6}>
-
-                  <Box>
 
-                    {renderSystemField(fields)}
+            <Box>
+              <Box>
+              <Tabs value={tabValue} onChange={handleTabChange} variant="fullWidth" aria-label="basic tabs example" centered>
+                  <Tab label="Information" {...a11yProps(0)} />
+                  <Tab label="Company / Locations" {...a11yProps(1)} />
+                  <Tab label="Roles / Permissions" {...a11yProps(2)} />
+                  {/* <Tab label="Item Three" {...a11yProps(2)} /> */}
+              </Tabs>
+              </Box>
 
-                    {renderCustomField(customFields)}
+              {tabValue === 0 &&
+                <Grid spacing={2} sx={{paddingLeft:2, paddingRight:2, paddingTop:2}}>
 
-                  </Box>
+                  {renderSystemField(fields)}
+                  {renderCustomField(customFields)}
 
                 </Grid>
+              }
 
-                <Grid item xs={6}>
+              {tabValue === 1 &&
+                <Grid spacing={2} sx={{paddingLeft:2, paddingRight:2, paddingTop:2}}>
 
-                  <Box>
+                  <Autocomplete
+                    id="companySelect"
+                    sx={{paddingTop:2}}
+                    getOptionLabel={
+                      (option) => option.title
+                    }
+                    filterOptions={(x) => x}
+                    options={companies != null ? companies : []}
+                    autoComplete
+                    includeInputInList
+                    filterSelectedOptions
+                    value={company}
+                    noOptionsText="No locations"
+                    onChange={(event, newValue) => {
+                      setCompanies(newValue ? [newValue, ...companies] : companies);
+                      setCompany(newValue);
+                      setLocation(null);
+                    }}
+                    onInputChange={(event, newInputValue) => {
+                      setInputCompanyValue(newInputValue);
+                    }}
+                    renderInput={(params) => (
+                      <TextField {...params} label="Company" fullWidth />
+                    )}
+                    renderOption={(props, option) => {
+                      // const matches =
+                      //   option.structured_formatting.main_text_matched_substrings || [];
+
+                      // const parts = parse(
+                      //   option.structured_formatting.main_text,
+                      //   matches.map((match) => [match.offset, match.offset + match.length]),
+                      // );
+
+                      return (
+                        <li {...props}>
+                          <Grid container alignItems="center">
+                            <Grid item sx={{ display: 'flex', width: 44 }}>
+                              <BusinessRounded sx={{ color: 'text.secondary' }} />
+                            </Grid>
+                            <Grid item sx={{ width: 'calc(100% - 44px)', wordWrap: 'break-word' }}>
+                              {/* {parts.map((part, index) => (
+                                <Box
+                                  key={index}
+                                  component="span"
+                                  sx={{ fontWeight: part.highlight ? 'bold' : 'regular' }}
+                                >
+                                  {part.text}
+                                </Box>
+                              ))} */}
+                              <Typography variant="body2" color="text.secondary">
+                                {option.title}
+                              </Typography>
+                            </Grid>
+                          </Grid>
+                        </li>
+                      );
+                    }}
+                  />
 
-                    <FormControl sx={{ paddingTop:1, m: 1, width: "100%" }}>
-                        <InputLabel id="demo-multiple-checkbox-label">Roles</InputLabel>
-                        <Select
-                            fullWidth={true}
-                            labelId="demo-multiple-checkbox-label"
-                            id="demo-multiple-checkbox"
-                            {...register("roles", { required: false })}
-                            multiple
-                            value={selectedRoles}
-                            onChange={(event) => {
-
-                            const {
-                                target: { value },
-                            } = event;
-                            setSelectedRole(
-                                // On autofill we get a stringified value.
-                                typeof value === 'string' ? value.split(',') : value,
-                            );
-                                
-                            }}
-                            input={<OutlinedInput label="Roles" />}
-                            renderValue={(selected) => selected.join(', ')}
-                            MenuProps={MenuProps}>
-                            {roles.map((role) => (
-                                <MenuItem key={role.name} value={role.name}>
-                                <Checkbox checked={selectedRoles.indexOf(role.name) > -1} />
-                                <ListItemText primary={role.name} /> 
-                                </MenuItem>
-                            ))}
-                        </Select>
-                    </FormControl>
-                    {errors.roles && <Typography color={"red"}>{"roles"} is required.</Typography>}
-                    
-
-                    <FormControl sx={{ m: 1, paddingTop:1, width: "100%" }}>
-                        <InputLabel id="demo-multiple-checkbox-label">Permissions</InputLabel>
-                        <Select
-                        fullWidth={true}
-                        labelId="demo-multiple-checkbox-label"
-                        id="demo-multiple-checkbox"
-                        {...register("permissions", { required: false })}
-                        multiple
-                        value={selectedPermission}
-                        onChange={(event) => {
+                  <Autocomplete
+                    id="LocationSelect"
+                    sx={{paddingTop:3}}
+                    getOptionLabel={
+                      (option) => option.title
+                    }
+                    filterOptions={(x) => x}
+                    options={locations != null ? locations : []}
+                    autoComplete
+                    includeInputInList
+                    filterSelectedOptions
+                    value={location}
+                    noOptionsText="No locations"
+                    onChange={(event, newValue) => {
+                      setLocations(newValue ? [newValue, ...locations] : locations);
+                      setLocation(newValue);
+                    }}
+                    onInputChange={(event, newInputValue) => {
+                      setInputCompanyValue(newInputValue);
+                    }}
+                    renderInput={(params) => (
+                      <TextField {...params} label="Location" fullWidth />
+                    )}
+                    renderOption={(props, option) => {
+
+                      return (
+                        <li {...props}>
+                          <Grid container alignItems="center">
+                            <Grid item sx={{ display: 'flex', width: 44 }}>
+                              <BusinessRounded sx={{ color: 'text.secondary' }} />
+                            </Grid>
+                            <Grid item sx={{ width: 'calc(100% - 44px)', wordWrap: 'break-word' }}>
+                              <Typography variant="body2" color="text.secondary">
+                                {option.title}
+                              </Typography>
+                            </Grid>
+                          </Grid>
+                        </li>
+                      );
+                    }}
+                  />
+                  
+                </Grid>
+              }
+
+              {tabValue === 2 &&
+                <Box sx={{paddingLeft:2, paddingRight:2, paddingTop:2}}>
+
+                  <FormControl sx={{ paddingTop:1, m: 1, width: "100%" }}>
+                      <InputLabel id="demo-multiple-checkbox-label">Roles</InputLabel>
+                      <Select
+                          fullWidth={true}
+                          labelId="demo-multiple-checkbox-label"
+                          id="demo-multiple-checkbox"
+                          {...register("roles", { required: false })}
+                          multiple
+                          value={selectedRoles}
+                          onChange={(event) => {
 
                           const {
-                            target: { value },
+                              target: { value },
                           } = event;
-                          setSelectedPermission(
-                            // On autofill we get a stringified value.
-                            typeof value === 'string' ? value.split(',') : value,
+                          setSelectedRole(
+                              // On autofill we get a stringified value.
+                              typeof value === 'string' ? value.split(',') : value,
                           );
+                              
+                          }}
+                          input={<OutlinedInput label="Roles" />}
+                          renderValue={(selected) => selected.join(', ')}
+                          MenuProps={MenuProps}>
+                          {roles.map((role) => (
+                              <MenuItem key={role.name} value={role.name}>
+                              <Checkbox checked={selectedRoles.indexOf(role.name) > -1} />
+                              <ListItemText primary={role.name} /> 
+                              </MenuItem>
+                          ))}
+                      </Select>
+                  </FormControl>
+                  {errors.roles && <Typography color={"red"}>{"roles"} is required.</Typography>}
+                  
+
+                  <FormControl sx={{ m: 1, paddingTop:1, width: "100%" }}>
+                      <InputLabel id="demo-multiple-checkbox-label">Permissions</InputLabel>
+                      <Select
+                      fullWidth={true}
+                      labelId="demo-multiple-checkbox-label"
+                      id="demo-multiple-checkbox"
+                      {...register("permissions", { required: false })}
+                      multiple
+                      value={selectedPermission}
+                      onChange={(event) => {
+
+                        const {
+                          target: { value },
+                        } = event;
+                        setSelectedPermission(
+                          // On autofill we get a stringified value.
+                          typeof value === 'string' ? value.split(',') : value,
+                        );
+
+                      }}
+                      input={<OutlinedInput label="Roles" />}
+                      renderValue={(selected) => selected.join(', ')}
+                      MenuProps={MenuProps}>
+                      {permissions.map((permission) => (
+                          <MenuItem key={permission.name} value={permission.name}>
+                            <Checkbox checked={selectedPermission.indexOf(permission.name) > -1} />
+                            <ListItemText primary={permission.name} /> 
+                          </MenuItem>
+                      ))}
+                      </Select>
+                  </FormControl>
+                  {errors.permissions && <Typography color={"red"}>{"permissions"} is required.</Typography>}
 
-                        }}
-                        input={<OutlinedInput label="Roles" />}
-                        renderValue={(selected) => selected.join(', ')}
-                        MenuProps={MenuProps}>
-                        {permissions.map((permission) => (
-                            <MenuItem key={permission.name} value={permission.name}>
-                              <Checkbox checked={selectedPermission.indexOf(permission.name) > -1} />
-                              <ListItemText primary={permission.name} /> 
-                            </MenuItem>
-                        ))}
-                        </Select>
-                    </FormControl>
-                    {errors.permissions && <Typography color={"red"}>{"permissions"} is required.</Typography>}
+                </Box>
+              }
 
-                  </Box>
+              <Box sx={{paddingTop:1, paddingBottom: 4, paddingLeft: 2}}>
+                <Button variant="contained" type="submit">{userId == -1 ? "Create Account" : "Update Account"}</Button>
+              </Box>
 
-                </Grid>
-            </Grid>
-            <Box sx={{paddingTop:2}}>
-              <Button variant="contained" type="submit">Submit</Button>
             </Box>
           </form>
-
       </Box>
   )
 }