From 7950c4268ac9325fbd23154ad897243b8a339085 Mon Sep 17 00:00:00 2001
From: Sonika <kumari.sonika@seryfertsoft.com>
Date: Tue, 19 Dec 2023 20:06:27 +0530
Subject: [PATCH] style and some logic changes

---
 src/App.css                                 |  6 +-
 src/components/manage_users/ManageUsers.tsx | 85 ++++++++++-----------
 2 files changed, 43 insertions(+), 48 deletions(-)

diff --git a/src/App.css b/src/App.css
index 903bd77..96ce171 100644
--- a/src/App.css
+++ b/src/App.css
@@ -5,7 +5,7 @@
 
 .projectScreen-background .css-1ex1afd-MuiTableCell-root{
   background-color: #171716 !important;
-  color:white !important;
+  color:white ;
   border-bottom: 1px solid rgb(45 51 59);
  
 }
@@ -26,8 +26,4 @@
 .manageusers-table-header-style .css-1ygcj2i-MuiTableCell-root{
   background-color: #171716;
   color: white;
-}
-
-.activeCell {
-  color: green !important;
 }
\ No newline at end of file
diff --git a/src/components/manage_users/ManageUsers.tsx b/src/components/manage_users/ManageUsers.tsx
index 8db6bdb..00cda89 100644
--- a/src/components/manage_users/ManageUsers.tsx
+++ b/src/components/manage_users/ManageUsers.tsx
@@ -7,6 +7,7 @@ import {
   TableContainer,
   TableHead,
   TableRow,
+  tableRowClasses,
   Paper,
   Button,
   IconButton,
@@ -34,75 +35,72 @@ const StyledTextField = (props:any) => (
         '& .MuiOutlinedInput-root': {
           '& fieldset': { borderColor: 'white' },
           '&:hover fieldset': { borderColor: 'white', borderWidth: 2 },
-          '&.Mui-focused fieldset': { borderColor: 'white' },
+          // '&.Mui-focused fieldset': { borderColor: 'white' },
         },
         ...props.sx,
       }}
     />
   );
 
-interface Row {
-    id: number;
+  interface Row {
     name: string;
-    age: number;
+    email: string;
+    last_login:string;
+    active:boolean|string;
   }
   
-  const initialData: Row[] = [
-    { id: 1, name: 'Row 1', age: 25 },
-    { id: 2, name: 'Row 2', age: 30 },
-  ];
-
 export default function ManageUsers(){
     const [manageUsersData,setManageUsersData] = useState<any>()
     const { data: manageUsersResponse, isLoading, isError } = useGetUsersData();
-    const [data, setData] = useState<Row[]>(initialData);
+    const [data, setData] = useState<Row[]>([]);
     const [open, setOpen] = useState(false);
     const [selectedRow, setSelectedRow] = useState<any>();
     const [newRow, setNewRow] = useState<any>();
   
     const handleEdit = (row: Row) => {
-      setSelectedRow(row);
+      setSelectedRow({...row});
       setOpen(true);
     };
-  
-    const handleDelete = (id: number) => {
-      const updatedData = data.filter((row) => row.id !== id);
-      setData(updatedData);
-    };
-  
+
     const handleSave = () => {
-      if (selectedRow.id) {
-        const updatedData = data.map((row) => (row.id === selectedRow.id ? selectedRow : row));
-        setData(updatedData);
-      } else {
+      // if (selectedRow.id) {
+      //   const updatedData = data.map((row) => (row.id === selectedRow.id ? selectedRow : row));
+      //   setData(updatedData);
+      // } else {
         const id = data.length + 1;
-        setNewRow({ ...newRow, id });
-        setData([...data, { ...newRow, id }]);
-      }
-  
+        setData([...data, { ...selectedRow, id }]);
+      // }
+    
       setOpen(false);
-      setSelectedRow({ id: 0, name: '', age: 0 });
-    };
-  
-    const handleOpen = () => {
-      setOpen(true);
+      setSelectedRow({name: '', email: '', last_login: '', active: '' });
+      setNewRow({name: '', email: '', last_login: '', active: '' });
     };
   
     const handleClose = () => {
       setOpen(false);
-      setSelectedRow({ id: 0, name: '', age: 0 });
+      setSelectedRow({name: '', email: '', last_login: '', active: '' });
+      setNewRow({name: '', email: '', last_login: '', active: '' });
     };
   
     const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
       const { name, value } = e.target;
-      setSelectedRow({ ...selectedRow, [name]: value });
-      setNewRow({ ...newRow, [name]: value });
+      if (selectedRow) {
+        // Editing existing row
+        setSelectedRow({ ...selectedRow, [name]: value });
+      } else {
+        // Adding a new row
+        setNewRow({ ...newRow, [name]: value });
+      }
     };
+
+    const handleOpen = () => {
+      setOpen(true);
+    };
+    console.log(selectedRow,"sdfhhgfdg")
   
     return(
         <Paper square className='projectScreen-background' sx={{ width: '100%', overflow: 'hidden',backgroundColor:'rgb(13 13 13)' }}>
             <Paper  className='projectScreen-background' sx={{ margin:'1%', width: '100%', overflow: 'hidden' }}>
-                {/* <div> */}
                 <TableContainer component={Paper}>
                     <Table>
                     <TableHead className="manageusers-table-header-style">
@@ -120,19 +118,22 @@ export default function ManageUsers(){
                     </TableHead>
                     <TableBody>
                         {manageUsersResponse && manageUsersResponse.map((row:any) => (
-                        <TableRow key={row.id}>
+                        <TableRow key={row.id} sx={{height:'20px'}}>
                             <TableCell>
                             <IconButton onClick={() => handleEdit(row)} aria-label="edit">
                                 <EditIcon sx={{ color: 'white' }}/>
                             </IconButton>
-                            <IconButton onClick={() => handleDelete(row.id)} aria-label="delete">
+                            {/* <IconButton onClick={() => handleDelete(row.id)} aria-label="delete">
                                 <DeleteIcon sx={{ color: 'white' }}/>
-                            </IconButton>
+                            </IconButton> */}
                             </TableCell>
                             <TableCell>{row.username}</TableCell>
                             <TableCell>{row.email_id}</TableCell>
                             <TableCell>{row.last_login}</TableCell>
-                            <TableCell>{row.active==true?'Active':'Inactive'}</TableCell>
+                            {row.active?
+                            <TableCell sx={{color:'green', backgroundColor:'#171716', borderBottom:'1px solid rgb(45 51 59)'}}>Active</TableCell>
+                            :
+                            <TableCell sx={{color:'red', backgroundColor:'#171716', borderBottom:'1px solid rgb(45 51 59)'}}>Inactive</TableCell>}
                         </TableRow>
                         ))}
                     </TableBody>
@@ -146,7 +147,7 @@ export default function ManageUsers(){
                         label="Name"
                         type="text"
                         name="name"
-                        value={selectedRow && selectedRow.username}
+                        value={selectedRow && selectedRow.name}
                         onChange={handleChange}
                         />
                         <StyledTextField
@@ -164,7 +165,6 @@ export default function ManageUsers(){
                         />
                         <StyledTextField
                         label="Active"
-                        // type="number"
                         name="active"
                         value={selectedRow && selectedRow.active}
                         onChange={handleChange}
@@ -174,12 +174,11 @@ export default function ManageUsers(){
                     <Button onClick={handleClose} color="primary">
                         Cancel
                     </Button>
-                    {/* <Button onClick={handleSave} color="primary">
+                    <Button onClick={handleSave} color="primary">
                         Save
-                    </Button> */}
+                    </Button>
                     </DialogActions>
                 </Dialog>
-                {/* </div> */}
             </Paper>
         </Paper>
     )