refactor: Move editable attribute to TableComponent

add update function, need to fix backend

src/frontend/src/components/tableComponent/index.tsx

@@ -61,7 +61,6 @@ const TableComponent = forwardRef<
           headerCheckboxSelectionFilteredOnly: true,
         };
       }
-      console.log(props.editable, col.headerName);
       if (
         (typeof props.editable === "boolean" && props.editable) ||
         (Array.isArray(props.editable) &&

src/frontend/src/controllers/API/index.ts

@@ -28,6 +28,7 @@ import {
   UploadFileTypeAPI,
   errorsTypeAPI,
 } from "./../../types/api/index";
+import { Message } from "../../types/messages";
 
 /**
  * Fetches all objects from the API endpoint.
@@ -1044,3 +1045,7 @@ export async function deleteMessagesFn(ids: number[]) {
     ids,
   });
 }
+
+export async function updateMessageApi(data: Message) {
+  return await api.post(`${BASE_URL_API}monitor/messages/${data.index}`, data);
+}

src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-messages-table.tsx

@@ -1,14 +1,15 @@
 import { useEffect } from "react";
 import { getMessagesTable } from "../../../../../controllers/API";
+import { useMessagesStore } from "../../../../../stores/messagesStore";
 
-const useMessagesTable = (setColumns, setRows, setMessages) => {
+const useMessagesTable = (setColumns) => {
+  const setMessages = useMessagesStore((state) => state.setMessages);
   useEffect(() => {
     const fetchData = async () => {
       try {
         const data = await getMessagesTable("union", undefined, ["index"]);
         const { columns, rows } = data;
         setColumns(columns);
-        setRows(rows);
         setMessages(rows);
       } catch (error) {
         console.error("Error fetching messages:", error);

src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-remove-messages.tsx

@@ -2,7 +2,6 @@ import { deleteMessagesFn } from "../../../../../controllers/API";
 import { useMessagesStore } from "../../../../../stores/messagesStore";
 
 const useRemoveMessages = (
-  setRows,
   setSelectedRows,
   setSuccessData,
   setErrorData,
@@ -16,8 +15,7 @@ const useRemoveMessages = (
       await deleteMessagesFn(selectedRows);
 
       // Assuming deleteMessages is a separate function that updates state after deletion
-      const res = await deleteMessages(selectedRows);
+      deleteMessages(selectedRows);
-      setRows(res);
 
       // Clear the selected rows
       setSelectedRows([]);

src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-updateMessage.tsx

@@ -0,0 +1,29 @@
+import { useMessagesStore } from "../../../../../stores/messagesStore";
+import { Message } from "../../../../../types/messages";
+import { updateMessageApi } from "../../../../../controllers/API";
+
+const useUpdateMessage = (setSuccessData, setErrorData) => {
+  const updateMessage = useMessagesStore((state) => state.updateMessage);
+
+  const handleUpdate = async (data: Message) => {
+    try {
+      await updateMessageApi(data);
+
+      updateMessage(data);
+
+      // Set success message
+      setSuccessData({
+        title: "Messages updated successfully.",
+      });
+    } catch (error) {
+      // Set error message
+      setErrorData({
+        title: "Error updating messages.",
+      });
+    }
+  };
+
+  return { handleUpdate };
+};
+
+export default useUpdateMessage;

src/frontend/src/pages/SettingsPage/pages/messagesPage/index.tsx

@@ -1,4 +1,9 @@
-import { ColDef, ColGroupDef, SelectionChangedEvent } from "ag-grid-community";
+import {
+  CellEditRequestEvent,
+  ColDef,
+  ColGroupDef,
+  SelectionChangedEvent,
+} from "ag-grid-community";
 import { useState } from "react";
 import TableComponent from "../../../../components/tableComponent";
 import { Card, CardContent } from "../../../../components/ui/card";
@@ -7,12 +12,11 @@ import { useMessagesStore } from "../../../../stores/messagesStore";
 import HeaderMessagesComponent from "./components/headerMessages";
 import useMessagesTable from "./hooks/use-messages-table";
 import useRemoveMessages from "./hooks/use-remove-messages";
+import useUpdateMessage from "./hooks/use-updateMessage";
 
 export default function MessagesPage() {
-  const setMessages = useMessagesStore((state) => state.setMessages);
-
   const [columns, setColumns] = useState<Array<ColDef | ColGroupDef>>([]);
-  const [rows, setRows] = useState<any>([]);
+  const messages = useMessagesStore((state) => state.messages);
 
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
@@ -20,14 +24,26 @@ export default function MessagesPage() {
   const [selectedRows, setSelectedRows] = useState<number[]>([]);
 
   const { handleRemoveMessages } = useRemoveMessages(
-    setRows,
     setSelectedRows,
     setSuccessData,
     setErrorData,
     selectedRows,
   );
 
-  useMessagesTable(setColumns, setRows, setMessages);
+  const { handleUpdate } = useUpdateMessage(setSuccessData, setErrorData);
+
+  useMessagesTable(setColumns);
+
+  function handleUpdateMessage(event: CellEditRequestEvent<any, string>) {
+    const newValue = event.newValue;
+    const field = event.column.getColId();
+    const row = event.data;
+    const data = {
+      ...row,
+      [field]: newValue,
+    };
+    handleUpdate(data);
+  }
 
   return (
     <div className="flex h-full w-full flex-col justify-between gap-6">
@@ -40,6 +56,10 @@ export default function MessagesPage() {
         <Card x-chunk="dashboard-04-chunk-2" className="h-full pt-4">
           <CardContent className="h-full">
             <TableComponent
+              readOnlyEdit
+              onCellEditRequest={(event) => {
+                handleUpdateMessage(event);
+              }}
               editable={["Sender", "Sender Name", "Message"]}
               overlayNoRowsTemplate="No data available"
               onSelectionChanged={(event: SelectionChangedEvent) => {
@@ -51,7 +71,7 @@ export default function MessagesPage() {
               suppressRowClickSelection={true}
               pagination={true}
               columnDefs={columns}
-              rowData={rows}
+              rowData={messages}
             />
           </CardContent>
         </Card>

src/frontend/src/types/messages/index.ts

@@ -9,3 +9,5 @@ type Message = {
   timestamp: string;
   id: string;
 };
+
+export type { Message };

src/frontend/src/types/zustand/messages/index.ts

@@ -1,3 +1,5 @@
+import { Message } from "../../messages";
+
 export type MessagesStoreType = {
   messages: Message[];
   setMessages: (messages: Message[]) => void;
@@ -5,5 +7,5 @@ export type MessagesStoreType = {
   removeMessage: (message: Message) => void;
   updateMessage: (message: Message) => void;
   clearMessages: () => void;
-  removeMessages: (ids: number[]) => Promise<Message[]>;
+  removeMessages: (ids: number[]) => void;
 };