Merge branch 'main' into issue-139

web/src/containers/Settings/index.tsx

@@ -6,6 +6,7 @@ import TabList from '@mui/lab/TabList'
 import TabPanel from '@mui/lab/TabPanel'
 
 import Permission from './permission'
+import Profile from './profile'
 
 const StyledTab = styled(Tab)({
   background: 'black',
@@ -45,7 +46,9 @@ const Settings = () => {
             <StyledTab label="Permission" value="permission" />
           </TabList>
         </Box>
-        <StyledTabpanel value="profile">Profile Page</StyledTabpanel>
+        <StyledTabpanel value="profile">
+          <Profile />
+        </StyledTabpanel>
         <StyledTabpanel value="permission">
           <Permission />
         </StyledTabpanel>

web/src/containers/Settings/profile.tsx

@@ -0,0 +1,150 @@
+import React, { useState, useEffect, useContext } from 'react'
+import axios from 'axios'
+import {
+  Grid,
+  CircularProgress,
+  Card,
+  CardHeader,
+  Divider,
+  CardContent,
+  TextField,
+  CardActions,
+  Button,
+  FormGroup,
+  FormControlLabel,
+  Checkbox
+} from '@mui/material'
+import { toast } from 'react-toastify'
+
+import { AppContext, ModeType } from '../../context/appContext'
+
+const Profile = () => {
+  const [isLoading, setIsLoading] = useState(false)
+  const appContext = useContext(AppContext)
+  const [user, setUser] = useState({} as any)
+
+  useEffect(() => {
+    setIsLoading(true)
+    axios
+      .get(`/SASjsApi/user/${appContext.userId}`)
+      .then((res: any) => {
+        setUser(res.data)
+      })
+      .catch((err) => {
+        console.log(err)
+      })
+      .finally(() => {
+        setIsLoading(false)
+      })
+  }, [])
+
+  const handleChange = (event: any) => {
+    const { name, value } = event.target
+
+    setUser({ ...user, [name]: value })
+  }
+  const handleSubmit = () => {
+    setIsLoading(true)
+    axios
+      .patch(`/SASjsApi/user/${appContext.userId}`, {
+        username: user.username,
+        displayName: user.displayName,
+        autoExec: user.autoExec
+      })
+      .then((res: any) => {
+        toast.success('User information updated', {
+          theme: 'dark',
+          position: toast.POSITION.BOTTOM_RIGHT
+        })
+      })
+      .catch((err) => {
+        toast.error('Failed: ' + err.response?.data || err.text, {
+          theme: 'dark',
+          position: toast.POSITION.BOTTOM_RIGHT
+        })
+      })
+      .finally(() => {
+        setIsLoading(false)
+      })
+  }
+
+  return isLoading ? (
+    <CircularProgress
+      style={{ position: 'absolute', left: '50%', top: '50%' }}
+    />
+  ) : (
+    <Card>
+      <CardHeader title="Profile Information" />
+      <Divider />
+      <CardContent>
+        <Grid container spacing={4}>
+          <Grid item md={6} xs={12}>
+            <TextField
+              fullWidth
+              error={user.displayName?.length === 0}
+              helperText="Please specify display name"
+              label="Display Name"
+              name="displayName"
+              onChange={handleChange}
+              required
+              value={user.displayName}
+              variant="outlined"
+              disabled={appContext.mode === ModeType.Desktop}
+            />
+          </Grid>
+
+          <Grid item md={6} xs={12}>
+            <TextField
+              fullWidth
+              error={user.username?.length === 0}
+              helperText="Please specify username"
+              label="Username"
+              name="username"
+              onChange={handleChange}
+              required
+              value={user.username}
+              variant="outlined"
+              disabled={appContext.mode === ModeType.Desktop}
+            />
+          </Grid>
+
+          <Grid item lg={6} md={8} sm={12} xs={12}>
+            <TextField
+              fullWidth
+              label="autoExec"
+              name="autoExec"
+              onChange={handleChange}
+              multiline
+              rows="10"
+              value={user.autoExec}
+              variant="outlined"
+            />
+          </Grid>
+
+          <Grid item xs={6}>
+            <FormGroup row>
+              <FormControlLabel
+                disabled
+                control={<Checkbox checked={user.isActive} />}
+                label="isActive"
+              />
+              <FormControlLabel
+                disabled
+                control={<Checkbox checked={user.isAdmin} />}
+                label="isAdmin"
+              />
+            </FormGroup>
+          </Grid>
+        </Grid>
+      </CardContent>
+      <Divider />
+      <CardActions>
+        <Button type="submit" variant="contained" onClick={handleSubmit}>
+          Save Changes
+        </Button>
+      </CardActions>
+    </Card>
+  )
+}
+
+export default Profile