From dff05af79c002872b9cbc76ed3ef9d2f2438feb0 Mon Sep 17 00:00:00 2001 From: Prajwal Moharana <78167757+pmoharana-cmd@users.noreply.github.com> Date: Sat, 4 Jan 2025 15:10:07 -0500 Subject: [PATCH] Add single tag selection and editting row (#52) --- compass/components/Drawer/CreateDrawer.tsx | 35 +++++++++- compass/components/Drawer/Drawer.tsx | 76 +++++++++++++++++++--- compass/components/FilterBox/index.tsx | 2 +- compass/components/Table/Table.tsx | 19 ------ compass/components/Table/UserTable.tsx | 2 +- compass/components/TagsInput/Index.tsx | 68 ++++++++++++------- compass/components/TagsInput/TagsArray.tsx | 2 +- 7 files changed, 150 insertions(+), 54 deletions(-) diff --git a/compass/components/Drawer/CreateDrawer.tsx b/compass/components/Drawer/CreateDrawer.tsx index 0507e0c..d31173d 100644 --- a/compass/components/Drawer/CreateDrawer.tsx +++ b/compass/components/Drawer/CreateDrawer.tsx @@ -108,7 +108,6 @@ const CreateDrawer: FunctionComponent = ({ switch (detail.inputType) { case "select-one": - case "select-multiple": initializeSelectField(detail.key); inputField = ( = ({ detail.presetOptionsSetter || (() => {}) } + singleValue={true} + onTagsChange={( + tags: Set + ) => { + setNewItemContent( + (prev: any) => ({ + ...prev, + [detail.key]: + tags.size > 0 + ? Array.from( + tags + )[0] + : null, + }) + ); + }} + /> + ); + break; + case "select-multiple": + initializeSelectField(detail.key); + inputField = ( + {}) + } onTagsChange={( tags: Set ) => { diff --git a/compass/components/Drawer/Drawer.tsx b/compass/components/Drawer/Drawer.tsx index 2b69f3c..97d6c15 100644 --- a/compass/components/Drawer/Drawer.tsx +++ b/compass/components/Drawer/Drawer.tsx @@ -48,12 +48,14 @@ const Drawer: FunctionComponent = ({ const [isFavorite, setIsFavorite] = useState(false); const [tempRowContent, setTempRowContent] = useState(rowContent); - const onRowUpdate = (updatedRow: any) => {}; - - const handleTempRowContentChange = ( + const handleTempRowContentChangeHTML = ( e: React.ChangeEvent ) => { const { name, value } = e.target; + handleTempRowContentChange(name, value); + }; + + const handleTempRowContentChange = (name: string, value: any) => { setTempRowContent((prev: any) => ({ ...prev, [name]: value, @@ -68,10 +70,22 @@ const Drawer: FunctionComponent = ({ }; const toggleDrawer = () => { + if (setRowContent && isOpen) { + setRowContent((prev: any) => { + return prev.map((row: any) => { + if (row.id === tempRowContent.id) { + return tempRowContent; + } + return row; + }); + }); + } + setIsOpen(!isOpen); if (isFull) { setIsFull(!isFull); } + console.log("Send API request to update row content"); }; const toggleDrawerFullScreen = () => setIsFull(!isFull); @@ -143,16 +157,15 @@ const Drawer: FunctionComponent = ({ switch (detail.inputType) { case "select-one": - case "select-multiple": valueToRender = (
-
+
= ({ detail.presetOptionsSetter || (() => {}) } + singleValue={true} + onTagsChange={( + tags: Set + ) => { + const tagsArray = + Array.from(tags); + handleTempRowContentChange( + detail.key, + tagsArray.length > 0 + ? tagsArray[0] + : null + ); + }} + /> +
+
+ ); + break; + case "select-multiple": + valueToRender = ( +
+
+ {}) + } + onTagsChange={( + tags: Set + ) => { + handleTempRowContentChange( + detail.key, + Array.from(tags) + ); + }} />
@@ -175,7 +233,7 @@ const Drawer: FunctionComponent = ({ name={detail.key} value={value} onChange={ - handleTempRowContentChange + handleTempRowContentChangeHTML } onKeyDown={handleEnterPress} rows={4} @@ -203,7 +261,7 @@ const Drawer: FunctionComponent = ({ name={detail.key} value={value} onChange={ - handleTempRowContentChange + handleTempRowContentChangeHTML } onKeyDown={handleEnterPress} className="w-full p-1 focus:outline-gray-200 bg-transparent" @@ -221,7 +279,7 @@ const Drawer: FunctionComponent = ({ name={detail.key} value={value} onChange={ - handleTempRowContentChange + handleTempRowContentChangeHTML } onKeyDown={handleEnterPress} className="w-full p-1 font-normal hover:text-gray-400 focus:outline-gray-200 underline text-gray-500 bg-transparent" diff --git a/compass/components/FilterBox/index.tsx b/compass/components/FilterBox/index.tsx index de1ed01..be0e6fa 100644 --- a/compass/components/FilterBox/index.tsx +++ b/compass/components/FilterBox/index.tsx @@ -33,7 +33,7 @@ export const FilterBox = () => { > {tag} handleTagChange(tag)} > × diff --git a/compass/components/Table/Table.tsx b/compass/components/Table/Table.tsx index d4eefbb..9a9433b 100644 --- a/compass/components/Table/Table.tsx +++ b/compass/components/Table/Table.tsx @@ -113,10 +113,6 @@ export default function Table({ // }); // }; - const addData = () => { - setData([...data]); - }; - // Add data manipulation options to the first column columns.unshift( columnHelper.display({ @@ -139,11 +135,6 @@ export default function Table({ setQuery(String(target.value)); }; - const handleCellChange = (e: ChangeEvent, key: Key) => { - const target = e.target as HTMLInputElement; - console.log(key); - }; - // TODO: Filtering // TODO: Sorting @@ -163,16 +154,6 @@ export default function Table({ getCoreRowModel: getCoreRowModel(), }); - const handleRowData = (row: any) => { - const rowData: any = {}; - row.cells.forEach((cell: any) => { - rowData[cell.column.id] = cell.value; - }); - // Use rowData object containing data from all columns for the current row - console.log(rowData); - return rowData; - }; - return (
diff --git a/compass/components/Table/UserTable.tsx b/compass/components/Table/UserTable.tsx index 2127959..58b018a 100644 --- a/compass/components/Table/UserTable.tsx +++ b/compass/components/Table/UserTable.tsx @@ -99,7 +99,7 @@ export default function UserTable({ data, setData }: UserTableProps) { cell: (info) => (
- {info.getValue().length != 0 + {info.getValue() && info.getValue().length != 0 ? info.getValue() : "no role"} diff --git a/compass/components/TagsInput/Index.tsx b/compass/components/TagsInput/Index.tsx index 6d7d96e..e02a661 100644 --- a/compass/components/TagsInput/Index.tsx +++ b/compass/components/TagsInput/Index.tsx @@ -9,6 +9,7 @@ interface TagsInputProps { presetValue: string[]; setPresetOptions: Dispatch>; onTagsChange?: (tags: Set) => void; + singleValue?: boolean; } const TagsInput: React.FC = ({ @@ -16,6 +17,7 @@ const TagsInput: React.FC = ({ presetOptions, setPresetOptions, onTagsChange, + singleValue = false, }) => { const [inputValue, setInputValue] = useState(""); const [cellSelected, setCellSelected] = useState(false); @@ -65,6 +67,10 @@ const TagsInput: React.FC = ({ const handleAddTag = (e: React.KeyboardEvent) => { if (e.key === "Enter" && inputValue.trim()) { + if (singleValue && tags.size >= 1) { + // Don't add new tag if we're in single value mode and already have a tag + return; + } addTag(e); } }; @@ -81,7 +87,11 @@ const TagsInput: React.FC = ({ }; const handleSelectTag = (tagToAdd: string) => { - if (!tags.has(tagToAdd)) { + if (singleValue) { + const newTags = new Set([tagToAdd]); + setTags(newTags); + onTagsChange?.(newTags); + } else if (!tags.has(tagToAdd)) { const newTags = new Set(Array.from(tags).concat(tagToAdd)); setTags(newTags); onTagsChange?.(newTags); @@ -151,31 +161,45 @@ const TagsInput: React.FC = ({ active tags={tags} /> - + {(!singleValue || tags.size === 0) && ( + 0 + ? "" + : "Search for an option..." + } + onChange={handleInputChange} + onKeyDown={handleAddTag} + className="focus:outline-none bg-transparent" + autoFocus + /> + )}

- Select an option or create one + {singleValue && tags.size > 0 + ? "Only one option can be selected" + : "Select an option or create one"}

- - {inputValue.length > 0 && ( - + {(!singleValue || tags.size === 0) && ( + <> + + {inputValue.length > 0 && ( + + )} + )}
diff --git a/compass/components/TagsInput/TagsArray.tsx b/compass/components/TagsInput/TagsArray.tsx index 771e354..444f692 100644 --- a/compass/components/TagsInput/TagsArray.tsx +++ b/compass/components/TagsInput/TagsArray.tsx @@ -8,7 +8,7 @@ export interface Tags { export const TagsArray = ({ tags, handleDelete, active = false }: Tags) => { return ( -
+
{Array.from(tags).length > 0 ? ( Array.from(tags).map((tag, index) => { return (