Start of refactoring

Fields in the drawer do not work, no icons, errors to fix, etc.

compass/components/Table/Index.tsx

@@ -95,7 +95,7 @@ export const Table = () => {
     }),
     columnHelper.accessor("username", {
       header: () => <><Bars2Icon className="inline align-top h-4" /> Username</>,
-      cell: (info) => <RowOpenAction title={info.getValue()} rowData={info.row.original} onRowUpdate={handleRowUpdate} />,
+      cell: PrimaryTableCell,
     }),
     columnHelper.accessor("role", {
       header: () => <><ArrowDownCircleIcon className="inline align-top h-4" /> Role</>,

compass/components/Table/PrimaryTableCell.tsx

@@ -7,15 +7,17 @@ import { SetStateAction, useState } from "react";
 export const PrimaryTableCell = ({ getValue, row, column, table }) => {
   const [pageContent, setPageContent] = useState("")
 
-  const handleDrawerContentChange = (newContent: SetStateAction<string>) => {
+  const handleDrawerContentChange = (newContent: SetStateAction<string>) =>{
     setPageContent(newContent);
   };
 
+  console.debug(row);
+
   return (
     <div className="font-semibold group">
       <TableCell getValue={getValue} row={row} column={column} table={table} />
       <span className="absolute right-1 top-1">
-        <Drawer title={getValue()} editableContent={pageContent} onSave={handleDrawerContentChange}>{pageContent}</Drawer>
+        <Drawer title={getValue()} editableContent={pageContent} onSave={handleDrawerContentChange} row={row}>{pageContent}</Drawer>
       </span>
     </div>
   );

compass/components/page/Drawer.tsx

@@ -4,6 +4,7 @@ import { ChevronDoubleLeftIcon } from '@heroicons/react/24/solid';
 import { BookmarkIcon, XMarkIcon, StarIcon as SolidStarIcon, EnvelopeIcon, UserIcon } from "@heroicons/react/24/solid";
 import { ArrowsPointingOutIcon, ArrowsPointingInIcon, StarIcon as OutlineStarIcon, ListBulletIcon } from '@heroicons/react/24/outline';
 import Card from '@/components/page/Card'
+import { Row } from '@tanstack/react-table';
 
 
 
@@ -15,8 +16,8 @@ type DrawerProps = {
     disabled?: boolean;
     editableContent?: any;
     onSave?: (content: any) => void;
-    rowContent?: any;
-    onRowUpdate?: (content: any) => void;
+    row: Row<any>;
+    // onRowUpdate?: (content: any) => void;
 };
 
 interface EditContent {
@@ -25,32 +26,32 @@ interface EditContent {
 }
 
 
-const Drawer: FunctionComponent<DrawerProps> = ({ title, children, onSave, editableContent, rowContent, onRowUpdate }) => {
+const Drawer: FunctionComponent<DrawerProps> = ({ title, children, onSave, editableContent, row }) => {
     const [isOpen, setIsOpen] = useState(false);
     const [isFull, setIsFull] = useState(false);
     const [currentCardIcon, setCurrentCardIcon] = useState<string>('');
     const [isFavorite, setIsFavorite] = useState(false);
-    const [tempRowContent, setTempRowContent] = useState(rowContent);
+    // const [tempRowContent, setTempRowContent] = useState(rowContent);
 
-    const handleTempRowContentChange = (e) => {
-        const { name, value } = e.target;
-        console.log(name);
-        console.log(value);
-        setTempRowContent((prevContent) => ({
-            ...prevContent,
-            [name]: value,
-        }));
-    };
+    // const handleTempRowContentChange = (e) => {
+    //     const { name, value } = e.target;
+    //     console.log(name);
+    //     console.log(value);
+    //     setTempRowContent((prevContent) => ({
+    //         ...prevContent,
+    //         [name]: value,
+    //     }));
+    // };
 
-    const handleEnterPress = (e) => {
-        if (e.key === 'Enter') {
-            e.preventDefault();
-            // Update the rowContent with the temporaryRowContent
-            if(onRowUpdate) {
-                onRowUpdate(tempRowContent);
-            }
-        }
-    };
+    // const handleEnterPress = (e) => {
+    //     if (e.key === 'Enter') {
+    //         e.preventDefault();
+    //         // Update the rowContent with the temporaryRowContent
+    //         if (onRowUpdate) {
+    //             onRowUpdate(tempRowContent);
+    //         }
+    //     }
+    // };
 
     const toggleDrawer = () => {
         setIsOpen(!isOpen);
@@ -63,10 +64,9 @@ const Drawer: FunctionComponent<DrawerProps> = ({ title, children, onSave, edita
 
     const toggleFavorite = () => setIsFavorite(!isFavorite);
 
-    const drawerClassName = `fixed top-0 right-0 w-1/2 h-full bg-white transform ease-in-out duration-300 z-20 ${
-        isOpen ? "translate-x-0 shadow-xl" : "translate-x-full"
+    const drawerClassName = `fixed top-0 right-0 w-1/2 h-full bg-white transform ease-in-out duration-300 z-20 ${isOpen ? "translate-x-0 shadow-xl" : "translate-x-full"
 
-    } ${isFull ? "w-full" : "w-1/2"}`;
+        } ${isFull ? "w-full" : "w-1/2"}`;
 
     const iconComponent = isFull ? <ArrowsPointingInIcon className="h-5 w-5" /> : <ArrowsPointingOutIcon className="h-5 w-5" />;
 
@@ -81,7 +81,7 @@ const Drawer: FunctionComponent<DrawerProps> = ({ title, children, onSave, edita
                 <div className="flex items-center justify-between p-4 border-b">
                     <div className="flex flex-row items-center justify-between space-x-2">
                         <span className="h-5 text-purple-700 w-5">{currentCardIcon}</span>
-                        <h2 style={{ fontSize: '20px' }} className = "text-sm text-gray-800 font-semibold">{rowContent.username}</h2>
+                        <h2 style={{ fontSize: '20px' }} className="text-sm text-gray-800 font-semibold">{row.getValue("username")}</h2>
                     </div>
                     <div>
                         <button onClick={toggleFavorite} className="py-2 text-gray-500 hover:text-gray-800 mr-2">
@@ -98,54 +98,9 @@ const Drawer: FunctionComponent<DrawerProps> = ({ title, children, onSave, edita
                 <div className="p-4">
                     <table className="p-4">
                         <tbody>
-                            <tr className="w-full text-sm items-center flex flex-row justify-between">
-                                <div className="flex flex-row space-x-2 text-gray-500">
-                                <td><UserIcon className="h-4 w-4" /></td>
-                                <td className="w-20">Username</td>
-                                </div>
-                                <td className="w-3/4">
-                                    <input
-                                    type="text"
-                                    name="username"
-                                    value={tempRowContent.username}
-                                    onChange={handleTempRowContentChange}
-                                    onKeyDown={handleEnterPress}
-                                    className="w-full p-1 focus:outline-gray-200  hover:bg-gray-50"
-                                /></td>
-                            </tr>
-                            <tr className="w-full text-sm items-center flex flex-row justify-between">
-                                <div className="flex flex-row space-x-2 text-gray-500">
-                                <td><ListBulletIcon className="h-4 w-4" /></td>
-                                <td className="w-20">Role</td>
-                                </div>
-                                <td className="w-3/4">
-                                    {rowContent.role}
-                                </td>
-                            </tr>
-                            <tr className="w-full text-sm items-center flex flex-row justify-between">
-                                <div className="flex flex-row space-x-2 text-gray-500">
-                                <td><EnvelopeIcon className="h-4 w-4" /></td>
-                                <td className="w-20">Email</td>
-                                </div>
-                                <td className="w-3/4">
-                                    <input
-                                    type="text"
-                                    name="email"
-                                    value={tempRowContent.email}
-                                    onChange={handleTempRowContentChange}
-                                    onKeyDown={handleEnterPress}
-                                    className="w-full p-1 focus:outline-gray-200  hover:bg-gray-50"
-                                /></td>
-                            </tr>
-                            <tr className="w-full text-sm items-center flex flex-row justify-between">
-                                <div className="flex flex-row space-x-2 text-gray-500">
-                                <td><ListBulletIcon className="h-4 w-4" /></td>
-                                <td className="w-20">Type of Program</td>
-                                </div>
-                                <td className="w-3/4">
-                                    {rowContent.program}
-                                </td>
-                            </tr>
+                            {["username", "role", "email", "program"].map((value, i) =>
+                                <Property key={i} Icon={EnvelopeIcon} value={value} row={row}/>
+                            ) }
                         </tbody>
                     </table>
                     <br />
@@ -155,5 +110,20 @@ const Drawer: FunctionComponent<DrawerProps> = ({ title, children, onSave, edita
     );
 };
 
+const Property = ({Icon, value, row}) => {
+    return (<tr className="w-full text-sm items-center flex flex-row justify-between">
+        <div className="flex flex-row space-x-2 text-gray-500">
+            <td className="w-20"><Icon className="inline h-4"/> {value}</td>
+        </div>
+        <td className="w-3/4">
+            <input
+                type="text"
+                name="email"
+                value={row.getValue(value)}
+                className="w-full p-1 focus:outline-gray-200  hover:bg-gray-50"
+            /></td>
+    </tr>);
+}
+
 export default Drawer;