rushilwiz/compass
1
0
Fork 0
mirror of https://github.com/cssgunc/compass.git synced 2025-04-20 18:40:17 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

Start of refactoring

Browse Source 
Fields in the drawer do not work, no icons, errors to fix, etc.
This commit is contained in:
Andy Chan 2024-04-23 14:24:06 -04:00
parent e89b00b4b2
commit 8a9012747b
3 changed files with 49 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
compass/components/Table/Index.tsx
View File

@ -95,7 +95,7 @@ export const Table = () => {
}), }),
columnHelper.accessor("username", { columnHelper.accessor("username", {
header: () => <><Bars2Icon className="inline align-top h-4" /> 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", { columnHelper.accessor("role", {
header: () => <><ArrowDownCircleIcon className="inline align-top h-4" /> Role</>, header: () => <><ArrowDownCircleIcon className="inline align-top h-4" /> Role</>,

6
compass/components/Table/PrimaryTableCell.tsx
View File

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

116
compass/components/page/Drawer.tsx
View File

@ -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 { 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 { ArrowsPointingOutIcon, ArrowsPointingInIcon, StarIcon as OutlineStarIcon, ListBulletIcon } from '@heroicons/react/24/outline';
import Card from '@/components/page/Card' import Card from '@/components/page/Card'
import { Row } from '@tanstack/react-table';
@ -15,8 +16,8 @@ type DrawerProps = {
disabled?: boolean; disabled?: boolean;
editableContent?: any; editableContent?: any;
onSave?: (content: any) => void; onSave?: (content: any) => void;
rowContent?: any; row: Row<any>;
onRowUpdate?: (content: any) => void; // onRowUpdate?: (content: any) => void;
}; };
interface EditContent { 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 [isOpen, setIsOpen] = useState(false);
const [isFull, setIsFull] = useState(false); const [isFull, setIsFull] = useState(false);
const [currentCardIcon, setCurrentCardIcon] = useState<string>(''); const [currentCardIcon, setCurrentCardIcon] = useState<string>('');
const [isFavorite, setIsFavorite] = useState(false); const [isFavorite, setIsFavorite] = useState(false);
const [tempRowContent, setTempRowContent] = useState(rowContent); // const [tempRowContent, setTempRowContent] = useState(rowContent);
const handleTempRowContentChange = (e) => { // const handleTempRowContentChange = (e) => {
const { name, value } = e.target; // const { name, value } = e.target;
console.log(name); // console.log(name);
console.log(value); // console.log(value);
setTempRowContent((prevContent) => ({ // setTempRowContent((prevContent) => ({
...prevContent, // ...prevContent,
[name]: value, // [name]: value,
})); // }));
}; // };
const handleEnterPress = (e) => { // const handleEnterPress = (e) => {
if (e.key === 'Enter') { // if (e.key === 'Enter') {
e.preventDefault(); // e.preventDefault();
// Update the rowContent with the temporaryRowContent // // Update the rowContent with the temporaryRowContent
if(onRowUpdate) { // if (onRowUpdate) {
onRowUpdate(tempRowContent); // onRowUpdate(tempRowContent);
} // }
} // }
}; // };
const toggleDrawer = () => { const toggleDrawer = () => {
setIsOpen(!isOpen); setIsOpen(!isOpen);
@ -63,8 +64,7 @@ const Drawer: FunctionComponent<DrawerProps> = ({ title, children, onSave, edita
const toggleFavorite = () => setIsFavorite(!isFavorite); 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 ${ 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"
isOpen ? "translate-x-0 shadow-xl" : "translate-x-full"
} ${isFull ? "w-full" : "w-1/2"}`; } ${isFull ? "w-full" : "w-1/2"}`;
@ -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 items-center justify-between p-4 border-b">
<div className="flex flex-row items-center justify-between space-x-2"> <div className="flex flex-row items-center justify-between space-x-2">
<span className="h-5 text-purple-700 w-5">{currentCardIcon}</span> <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>
<div> <div>
<button onClick={toggleFavorite} className="py-2 text-gray-500 hover:text-gray-800 mr-2"> <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"> <div className="p-4">
<table className="p-4"> <table className="p-4">
<tbody> <tbody>
<tr className="w-full text-sm items-center flex flex-row justify-between"> {["username", "role", "email", "program"].map((value, i) =>
<div className="flex flex-row space-x-2 text-gray-500"> <Property key={i} Icon={EnvelopeIcon} value={value} row={row}/>
<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>
</tbody> </tbody>
</table> </table>
<br /> <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; export default Drawer;