From 6f0957aeac329e77b873b50b50c6fd8f7fd667e5 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Fri, 21 Jun 2024 12:31:53 -0300 Subject: [PATCH] updating inside text modal but with bugs --- .../components/stringReaderComponent/index.tsx | 4 +++- .../components/tableAutoCellRender/index.tsx | 5 +++-- .../src/components/tableComponent/index.tsx | 17 ++++++++++++++--- .../IOModal/components/SessionView/index.tsx | 17 +++++++++-------- src/frontend/src/modals/textModal/index.tsx | 17 +++++++++++++---- .../messagesPage/hooks/use-updateMessage.tsx | 1 + .../shared/components/textOutputView/index.tsx | 4 ++-- 7 files changed, 45 insertions(+), 20 deletions(-) diff --git a/src/frontend/src/components/stringReaderComponent/index.tsx b/src/frontend/src/components/stringReaderComponent/index.tsx index 4019c610b..b3b9c5023 100644 --- a/src/frontend/src/components/stringReaderComponent/index.tsx +++ b/src/frontend/src/components/stringReaderComponent/index.tsx @@ -2,11 +2,13 @@ import TextModal from "../../modals/textModal"; export default function StringReader({ string, + setValue, }: { string: string; + setValue: (value: string) => void; }): JSX.Element { return ( - + {string} ); diff --git a/src/frontend/src/components/tableComponent/components/tableAutoCellRender/index.tsx b/src/frontend/src/components/tableComponent/components/tableAutoCellRender/index.tsx index 14e191976..e18733f62 100644 --- a/src/frontend/src/components/tableComponent/components/tableAutoCellRender/index.tsx +++ b/src/frontend/src/components/tableComponent/components/tableAutoCellRender/index.tsx @@ -8,7 +8,8 @@ import { Badge } from "../../../ui/badge"; export default function TableAutoCellRender({ value, -}: CustomCellRendererProps | { value: any }) { + setValue, +}: CustomCellRendererProps) { function getCellType() { switch (typeof value) { case "object": @@ -49,7 +50,7 @@ export default function TableAutoCellRender({ ); } else { - return ; + return ; } case "number": return ; diff --git a/src/frontend/src/components/tableComponent/index.tsx b/src/frontend/src/components/tableComponent/index.tsx index 48143367e..7eb52dd77 100644 --- a/src/frontend/src/components/tableComponent/index.tsx +++ b/src/frontend/src/components/tableComponent/index.tsx @@ -14,13 +14,14 @@ import ForwardedIconComponent from "../genericIconComponent"; import { Alert, AlertDescription, AlertTitle } from "../ui/alert"; import TableOptions from "./components/TableOptions"; import resetGrid from "./utils/reset-grid-columns"; +import { boolean } from "zod"; interface TableComponentProps extends AgGridReactProps { columnDefs: NonNullable; rowData: NonNullable; alertTitle?: string; alertDescription?: string; - editable?: boolean | string[]; + editable?: boolean | string[] | {field: string, onUpdate: (value:any)=>void,editableCell:boolean}[]; pagination?: boolean; onDelete?: () => void; onDuplicate?: () => void; @@ -52,14 +53,24 @@ const TableComponent = forwardRef< } if ( (typeof props.editable === "boolean" && props.editable) || - (Array.isArray(props.editable) && - props.editable.includes(newCol.headerName ?? "")) + (Array.isArray(props.editable) && props.editable.every(field=>typeof field ==="string") && + (props.editable as Array).includes(newCol.headerName ?? "")) ) { newCol = { ...newCol, editable: true, }; } + if(Array.isArray(props.editable) && props.editable.every(field=>typeof field ==="object")){ + const field = (props.editable as Array<{field:string, onUpdate:(value:any)=>void,editableCell:boolean}>).find(field=>field.field===newCol.headerName); + if(field){ + newCol = { + ...newCol, + editable: field.editableCell, + onCellValueChanged: (e)=>field.onUpdate(e) + } + } + } return newCol; }); const gridRef = useRef(null); diff --git a/src/frontend/src/modals/IOModal/components/SessionView/index.tsx b/src/frontend/src/modals/IOModal/components/SessionView/index.tsx index ef2c44d44..1f3ab7adb 100644 --- a/src/frontend/src/modals/IOModal/components/SessionView/index.tsx +++ b/src/frontend/src/modals/IOModal/components/SessionView/index.tsx @@ -1,4 +1,4 @@ -import { CellEditRequestEvent, SelectionChangedEvent } from "ag-grid-community"; +import { CellEditRequestEvent, NewValueParams, SelectionChangedEvent } from "ag-grid-community"; import { useState } from "react"; import TableComponent from "../../../../components/tableComponent"; import useRemoveMessages from "../../../../pages/SettingsPage/pages/messagesPage/hooks/use-remove-messages"; @@ -6,6 +6,7 @@ import useUpdateMessage from "../../../../pages/SettingsPage/pages/messagesPage/ import useAlertStore from "../../../../stores/alertStore"; import { useMessagesStore } from "../../../../stores/messagesStore"; import { messagesSorter } from "../../../../utils/utils"; +import cloneDeep from "lodash/cloneDeep"; export default function SessionView({ rows }: { rows: Array }) { const columns = useMessagesStore((state) => state.columns); @@ -23,15 +24,18 @@ export default function SessionView({ rows }: { rows: Array }) { const { handleUpdate } = useUpdateMessage(setSuccessData, setErrorData); - function handleUpdateMessage(event: CellEditRequestEvent) { + function handleUpdateMessage(event: NewValueParams) { const newValue = event.newValue; const field = event.column.getColId(); - const row = event.data; + const row = cloneDeep(event.data); const data = { ...row, [field]: newValue, }; - handleUpdate(data); + handleUpdate(data).catch((error) => { + event.data[field] = event.oldValue; + event.api.refreshCells(); + }); } return ( @@ -39,10 +43,7 @@ export default function SessionView({ rows }: { rows: Array }) { key={"sessionView"} onDelete={handleRemoveMessages} readOnlyEdit - onCellEditRequest={(event) => { - handleUpdateMessage(event); - }} - editable={["Sender Name", "Message", "Text"]} + editable={[{field:"text",onUpdate:handleUpdateMessage, editableCell:false}]} overlayNoRowsTemplate="No data available" onSelectionChanged={(event: SelectionChangedEvent) => { setSelectedRows(event.api.getSelectedRows().map((row) => row.index)); diff --git a/src/frontend/src/modals/textModal/index.tsx b/src/frontend/src/modals/textModal/index.tsx index b79bf1fd1..68a352234 100644 --- a/src/frontend/src/modals/textModal/index.tsx +++ b/src/frontend/src/modals/textModal/index.tsx @@ -4,7 +4,7 @@ import "ace-builds/src-noconflict/mode-python"; import "ace-builds/src-noconflict/theme-github"; import "ace-builds/src-noconflict/theme-twilight"; // import "ace-builds/webpack-resolver"; -import { cloneDeep } from "lodash"; +import { cloneDeep, set } from "lodash"; import { useEffect, useState } from "react"; import JsonView from "react18-json-view"; import "react18-json-view/src/dark.css"; @@ -22,11 +22,14 @@ import BaseModal from "../baseModal"; export default function TextModal({ children, value, + setValue, }: { children: JSX.Element; - value: Object; + value: string; + setValue: (value: string) => void; }): JSX.Element { const [open, setOpen] = useState(false); + const [internalValue, setInternalValue] = useState(value); return ( @@ -42,12 +45,18 @@ export default function TextModal({
- + setInternalValue(text)} value={internalValue} left={false} />
-
+
+ diff --git a/src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-updateMessage.tsx b/src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-updateMessage.tsx index 3287c7170..f199ac489 100644 --- a/src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-updateMessage.tsx +++ b/src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-updateMessage.tsx @@ -20,6 +20,7 @@ const useUpdateMessage = (setSuccessData, setErrorData) => { setErrorData({ title: "Error updating messages.", }); + return Promise.reject(error); } }; diff --git a/src/frontend/src/shared/components/textOutputView/index.tsx b/src/frontend/src/shared/components/textOutputView/index.tsx index 0071a654b..4e8d24ba5 100644 --- a/src/frontend/src/shared/components/textOutputView/index.tsx +++ b/src/frontend/src/shared/components/textOutputView/index.tsx @@ -1,6 +1,6 @@ import { Textarea } from "../../../components/ui/textarea"; -const TextOutputView = ({ left, value }) => { +const TextOutputView = ({ left, value,onChange }) => { if (typeof value === "object" && Object.keys(value).includes("text")) { value = value.text; } @@ -10,7 +10,7 @@ const TextOutputView = ({ left, value }) => { placeholder={"Empty"} // update to real value on flowPool value={value} - readOnly + onChange={(e) => onChange(e.target.value)} /> ); };