Make email field editable and remove input

compass/components/Table/Index.tsx

@@ -40,7 +40,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} />,
+      cell: (info) => <RowOpenAction title={info.getValue()} rowData={info.row.original} onRowUpdate={handleRowUpdate} />,
     }),
     columnHelper.accessor("role", {
       cell: (info) => <TagsInput presetValue={info.getValue() }presetOptions={["administrator","volunteer","employee"]}  />,
@@ -56,6 +56,16 @@ export const Table = () => {
 
   const [data, setData] = useState<User[]>([...usersExample]);
 
+  // added this fn for editing rows
+  const handleRowUpdate = (updatedRow: User) => {
+    const dataIndex = data.findIndex((row) => row.id === updatedRow.id);
+    if (dataIndex !== -1) {
+      const updatedData = [...data];
+      updatedData[dataIndex] = updatedRow;
+      setData(updatedData);
+    }
+  };
+
   const table = useReactTable({
     columns,
     data,

compass/components/Table/RowOpenAction.tsx

@@ -1,7 +1,7 @@
 import Drawer from "@/components/page/Drawer";
 import {ChangeEvent, useState} from "react";
 
-export const RowOpenAction = ({ title, rowData }) => {
+export const RowOpenAction = ({ title, rowData, onRowUpdate }) => {
     const [pageContent, setPageContent] = useState("")
 
     const handleDrawerContentChange = (newContent) => {
@@ -14,7 +14,8 @@ export const RowOpenAction = ({ title, rowData }) => {
     <div className="font-semibold group flex flex-row items-center justify-between pr-2">
       {title}
       <span >
-        <Drawer title="My Drawer Title" editableContent={pageContent} rowContent={rowData} onSave={handleDrawerContentChange}>{pageContent}</Drawer>
+        {/* Added OnRowUpdate to drawer */}
+        <Drawer title="My Drawer Title" editableContent={pageContent} rowContent={rowData} onSave={handleDrawerContentChange} onRowUpdate={onRowUpdate}>{pageContent}</Drawer>
     </span>
     </div>
   );

compass/components/page/Drawer.tsx

@@ -1,8 +1,8 @@
 import { FunctionComponent, ReactElement, ReactNode } from 'react';
 import React, { useState } from 'react';
 import { ChevronDoubleLeftIcon } from '@heroicons/react/24/solid';
-import { BookmarkIcon, XMarkIcon, StarIcon as SolidStarIcon } from "@heroicons/react/24/solid";
-import { ArrowsPointingOutIcon, ArrowsPointingInIcon, StarIcon as OutlineStarIcon } from '@heroicons/react/24/outline';
+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'
 
 
@@ -16,15 +16,16 @@ type DrawerProps = {
     editableContent?: any;
     onSave?: (content: any) => void;
     rowContent?: any;
+    onRowUpdate?: (content: any) => void;
 };
 
 interface EditContent {
     content: string;
     isEditing: boolean;
-  }
+}
 
 
-const Drawer: FunctionComponent<DrawerProps> = ({ title, children, onSave, editableContent, rowContent }) => {
+const Drawer: FunctionComponent<DrawerProps> = ({ title, children, onSave, editableContent, rowContent, onRowUpdate }) => {
     const [isOpen, setIsOpen] = useState(false);
     const [isFull, setIsFull] = useState(false);
     const [isEditing, setIsEditing] = useState(false);
@@ -33,7 +34,27 @@ const Drawer: FunctionComponent<DrawerProps> = ({ title, children, onSave, edita
     const [currentCardIcon, setCurrentCardIcon] = useState<string>('');
     const [error, setError] = useState<string | null>(null);
     const [isFavorite, setIsFavorite] = useState(false);
+    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 handleEnterPress = (e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            // Update the rowContent with the temporaryRowContent
+            if(onRowUpdate) {
+                onRowUpdate(tempRowContent);
+            }
+        }
+    };
 
     const toggleDrawer = () => {
         setIsOpen(!isOpen);
@@ -81,7 +102,7 @@ const Drawer: FunctionComponent<DrawerProps> = ({ title, children, onSave, edita
         if (onSave) {
             onSave(updatedContents);
         }
-            };
+    };
 
     const toggleEdit = (index: number) => {
         const newContents = editContents.map((item, idx) => idx === index ? { ...item, isEditing: !item.isEditing } : item);
@@ -107,12 +128,10 @@ const Drawer: FunctionComponent<DrawerProps> = ({ title, children, onSave, edita
             <button className={"ml-2 uppercase opacity-0 group-hover:opacity-100 text-gray-500 font-medium border border-gray-200 bg-white shadow hover:bg-gray-50 p-2 rounded-md"} onClick={toggleDrawer}>Open</button>
             <div className={drawerClassName}></div>
             <div className={drawerClassName}>
-            <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 className = "text-sm text-gray-800 font-semibold">{rowContent.username}</h2>
+                <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 className = "text-sm text-gray-800 font-semibold">{rowContent.username}</h2>
                     </div>
                     <div>
                         <button onClick={toggleFavorite} className="py-2 text-gray-500 hover:text-gray-800 mr-2">
@@ -121,68 +140,68 @@ const Drawer: FunctionComponent<DrawerProps> = ({ title, children, onSave, edita
                         <button onClick={toggleDrawerFullScreen} className="py-2 text-gray-500 hover:text-gray-800 mr-2">
                             {iconComponent}
                         </button>
-                        <button 
-                        onClick={toggleDrawer} className="py-2 text-gray-500 hover:text-gray-800"
-                        >
-                        <ChevronDoubleLeftIcon className="h-5 w-5" />
+                        <button onClick={toggleDrawer} className="py-2 text-gray-500 hover:text-gray-800">
+                            <ChevronDoubleLeftIcon className="h-5 w-5" />
                         </button>
                     </div>
                 </div>
                 <div className="p-4">
-                    <div className="p-4" style={{fontSize:16, paddingBottom:'2px'}}>
-                    Username: { rowContent.username }
-                    </div>
-                    <div className="p-4" style={{fontSize:16, paddingBottom:'2px'}}>
-                    Role: { rowContent.role }
-                    </div>
-                    <div className="p-4" style={{fontSize:16, paddingBottom:'2px'}}>
-                    Email: { rowContent.email }
-                    </div>
-                    <div className="p-4" style={{fontSize:16, paddingBottom:'2px'}}>
-                    Program: { rowContent.program }
-                    </div>
+                    <table className="p-4">
+                        <tbody style={{fontWeight: 'normal'}}>
+                            <tr>
+                                <td style={{paddingRight: '5px'}}><UserIcon className="h-5 w-5" /></td>
+                                <td style={{fontSize:13, paddingRight: '12px'}}>Username</td>
+                                <td style={{fontSize:13}}>{rowContent.username}</td>
+                            </tr>
+                            <tr>
+                                <td style={{paddingRight: '5px'}}><ListBulletIcon className="h-5 w-5" /></td>
+                                <td style={{fontSize:13, paddingRight: '12px'}}>Role</td>
+                                <td style={{fontSize:13}}>{rowContent.role}</td>
+                            </tr>
+                            <tr>
+                                <td style={{paddingRight: '5px'}}><EnvelopeIcon className="h-5 w-5" /></td>
+                                <td style={{fontSize:13, paddingRight: '12px'}}>Email</td>
+                                <td style={{fontSize:13}}>
+                                    <input
+                                    type="text"
+                                    name="email"
+                                    value={tempRowContent.email}
+                                    onChange={handleTempRowContentChange}
+                                    onKeyDown={handleEnterPress}
+                                /></td>
+                            </tr>
+                            <tr>
+                                <td style={{paddingRight: '5px'}}><ListBulletIcon className="h-5 w-5" /></td>
+                                <td style={{fontSize:13, paddingRight: '12px'}}>Type of Program</td>
+                                <td style={{fontSize:13}}>{rowContent.program}</td>
+                            </tr>
+                        </tbody>
+                    </table>
                     <br />
-                {
-       editContents.map((item, index) => (
-        <div key={index} className="flex mb-2 items-center space-x-2">
-            {item.isEditing ? (
-                <>
-                    <input
-                        type="text"
-                        value={item.content}
-                        onChange={handleInputChange(index)}
-                        className="border p-2 w-full"
-                    />
-                    <button 
-                        onClick={() => saveIndividualChange(index)} 
-                        className="py-2 px-4 bg-blue-500 text-white rounded"
-                    >
-                        Save
-                    </button>
-                </>
-            ) : (
-                <>
-                    <span className="p-2 w-full">{item.content}</span>
-                    <button 
-                        onClick={() => toggleEdit(index)} 
-                        className="py-2 px-4 bg-green-500 text-white rounded"
-                    >
-                        Edit
-                    </button>
-                </>
-            )}
-            {/* Delete button moved here, outside of the editing conditional */}
-            <button 
-                onClick={() => deleteInput(index)} 
-                className="py-2 text-gray-500 hover:text-gray-800"
-            >
-            <XMarkIcon className="h-5 w-5" />
-            </button>
-        </div>
-    ))
-}
-    <button onClick={addInput} className="py-2 px-4 bg-blue-500 text-white rounded my-2">Add New Input</button>
-</div>
+                    {/* {editContents.map((item, index) => (
+                        <div key={index} className="flex mb-2 items-center space-x-2">
+                            {item.isEditing ? (
+                                <>
+                                    <input type="text" value={item.content} onChange={handleInputChange(index)} className="border p-2 w-full"/>
+                                    <button onClick={() => saveIndividualChange(index)} className="py-2 px-4 bg-blue-500 text-white rounded">
+                                        Save
+                                    </button>
+                                </>
+                            ) : (
+                                <>
+                                    <span className="p-2 w-full">{item.content}</span>
+                                    <button onClick={() => toggleEdit(index)} className="py-2 px-4 bg-green-500 text-white rounded">
+                                        Edit
+                                    </button>
+                                </>
+                            )}
+                            <button onClick={() => deleteInput(index)} className="py-2 text-gray-500 hover:text-gray-800">
+                                <XMarkIcon className="h-5 w-5" />
+                            </button>
+                        </div>
+                    ))}
+                    <button onClick={addInput} className="py-2 px-4 bg-blue-500 text-white rounded my-2">Add New Input</button> */}
+                </div>
             </div>
         </div>
     );