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

Table styling

Browse Source
This commit is contained in:
Varun Murlidhar 2024-04-20 14:38:17 -04:00
parent cd276935ef
commit 7e36404757
1 changed files with 37 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -28,11 +28,7 @@ interface EditContent {
const Drawer: FunctionComponent<DrawerProps> = ({ title, children, onSave, editableContent, rowContent, onRowUpdate }) => { const Drawer: FunctionComponent<DrawerProps> = ({ title, children, onSave, editableContent, rowContent, onRowUpdate }) => {
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const [isFull, setIsFull] = useState(false); const [isFull, setIsFull] = useState(false);
const [isEditing, setIsEditing] = useState(false);
const [editContents, setEditContents] = useState<EditContent[]>(editableContent || [{ content: '', isEditing: true }]);
const [currentCardText, setCurrentCardText] = useState("");
const [currentCardIcon, setCurrentCardIcon] = useState<string>(''); const [currentCardIcon, setCurrentCardIcon] = useState<string>('');
const [error, setError] = useState<string | null>(null);
const [isFavorite, setIsFavorite] = useState(false); const [isFavorite, setIsFavorite] = useState(false);
const [tempRowContent, setTempRowContent] = useState(rowContent); const [tempRowContent, setTempRowContent] = useState(rowContent);
@ -66,55 +62,12 @@ const Drawer: FunctionComponent<DrawerProps> = ({ title, children, onSave, edita
const toggleDrawerFullScreen = () => setIsFull(!isFull); const toggleDrawerFullScreen = () => setIsFull(!isFull);
const toggleFavorite = () => setIsFavorite(!isFavorite); const toggleFavorite = () => setIsFavorite(!isFavorite);
const handleCardClick = (text: string, icon: ReactElement) => {
console.log('click')
toggleDrawer();
setCurrentCardText(text);
setCurrentCardIcon(icon)};
const toggleEditing = () => setIsEditing(!isEditing);
const handleInputChange = (index: number) => (event: React.ChangeEvent<HTMLInputElement>) => {
const newContents = editContents.map((item, idx) => idx === index ? { ...item, content: event.target.value } : item);
setEditContents(newContents);
};
const drawerClassName = `fixed top-0 right-0 h-full bg-white transform ease-in-out duration-300 ${ const drawerClassName = `fixed top-0 right-0 h-full bg-white transform ease-in-out duration-300 ${
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"}`;
const addInput = () => {
setEditContents([...editContents, { content: '', isEditing: true }]);
};
const saveIndividualChange = (index: number) => {
const content = editContents[index].content.trim();
if (!content) {
setError("Input cannot be empty.");
return;
}
setError(null); // Clear error state if input passes validation
const updatedContents = editContents.map((item, idx) => idx === index ? { ...item, isEditing: false } : item);
setEditContents(updatedContents);
if (onSave) {
onSave(updatedContents);
}
};
const toggleEdit = (index: number) => {
const newContents = editContents.map((item, idx) => idx === index ? { ...item, isEditing: !item.isEditing } : item);
setEditContents(newContents);
};
const deleteInput = (index: number) => {
// Filter out the input at the given index
const filteredContents = editContents.filter((_, idx) => idx !== index);
setEditContents(filteredContents);
};
const iconComponent = isFull ? <ArrowsPointingInIcon className="h-5 w-5" /> : <ArrowsPointingOutIcon className="h-5 w-5" />; const iconComponent = isFull ? <ArrowsPointingInIcon className="h-5 w-5" /> : <ArrowsPointingOutIcon className="h-5 w-5" />;
const favoriteIcon = isFavorite ? <SolidStarIcon className="h-5 w-5" /> : <OutlineStarIcon className="h-5 w-5" /> const favoriteIcon = isFavorite ? <SolidStarIcon className="h-5 w-5" /> : <OutlineStarIcon className="h-5 w-5" />
@ -128,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 className = "text-sm text-gray-800 font-semibold">{rowContent.username}</h2> <h2 style={{ fontSize: '20px' }} className = "text-sm text-gray-800 font-semibold">{rowContent.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">
@ -144,40 +97,54 @@ const Drawer: FunctionComponent<DrawerProps> = ({ title, children, onSave, edita
</div> </div>
<div className="p-4"> <div className="p-4">
<table className="p-4"> <table className="p-4">
<tbody style={{fontWeight: 'normal'}}> <tbody>
<tr> <tr className="w-full text-sm items-center flex flex-row justify-between">
<td style={{paddingRight: '5px'}}><UserIcon className="h-5 w-5" /></td> <div className="flex flex-row space-x-2 text-gray-500">
<td style={{fontSize:17, paddingRight: '30px'}}>Username</td> <td><UserIcon className="h-4 w-4" /></td>
<td style={{fontSize:17}}> <td className="w-20">Username</td>
</div>
<td className="w-3/4">
<input <input
type="text" type="text"
name="username" name="username"
value={tempRowContent.username} value={tempRowContent.username}
onChange={handleTempRowContentChange} onChange={handleTempRowContentChange}
onKeyDown={handleEnterPress} onKeyDown={handleEnterPress}
className="w-full p-1 focus:outline-gray-200 hover:bg-gray-50"
/></td> /></td>
</tr> </tr>
<tr> <tr className="w-full text-sm items-center flex flex-row justify-between">
<td style={{paddingRight: '5px'}}><ListBulletIcon className="h-5 w-5" /></td> <div className="flex flex-row space-x-2 text-gray-500">
<td style={{fontSize:17, paddingRight: '30px'}}>Role</td> <td><ListBulletIcon className="h-4 w-4" /></td>
<td style={{fontSize:17}}>{rowContent.role}</td> <td className="w-20">Role</td>
</div>
<td className="w-3/4">
{rowContent.role}
</td>
</tr> </tr>
<tr> <tr className="w-full text-sm items-center flex flex-row justify-between">
<td style={{paddingRight: '5px'}}><EnvelopeIcon className="h-5 w-5" /></td> <div className="flex flex-row space-x-2 text-gray-500">
<td style={{fontSize:17, paddingRight: '30px'}}>Email</td> <td><EnvelopeIcon className="h-4 w-4" /></td>
<td style={{fontSize:17}}> <td className="w-20">Email</td>
</div>
<td className="w-3/4">
<input <input
type="text" type="text"
name="email" name="email"
value={tempRowContent.email} value={tempRowContent.email}
onChange={handleTempRowContentChange} onChange={handleTempRowContentChange}
onKeyDown={handleEnterPress} onKeyDown={handleEnterPress}
className="w-full p-1 focus:outline-gray-200 hover:bg-gray-50"
/></td> /></td>
</tr> </tr>
<tr> <tr className="w-full text-sm items-center flex flex-row justify-between">
<td style={{paddingRight: '5px'}}><ListBulletIcon className="h-5 w-5" /></td> <div className="flex flex-row space-x-2 text-gray-500">
<td style={{fontSize:17, paddingRight: '70px'}}>Type of Program</td> <td><ListBulletIcon className="h-4 w-4" /></td>
<td style={{fontSize:17}}>{rowContent.program}</td> <td className="w-20">Type of Program</td>
</div>
<td className="w-3/4">
{rowContent.program}
</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>