diff --git a/compass/components/Table/Index.tsx b/compass/components/Table/Index.tsx
index 7beaff7..77b597f 100644
--- a/compass/components/Table/Index.tsx
+++ b/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,
diff --git a/compass/components/Table/RowOpenAction.tsx b/compass/components/Table/RowOpenAction.tsx
index 0543dfc..a38ff51 100644
--- a/compass/components/Table/RowOpenAction.tsx
+++ b/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>
);
diff --git a/compass/components/page/Drawer.tsx b/compass/components/page/Drawer.tsx
index d8e46c7..b22ac8a 100644
--- a/compass/components/page/Drawer.tsx
+++ b/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>
);