update edit value UI

app/Controllers/Http/ValuesController.ts

@@ -24,7 +24,16 @@ export default class ValuesController {
 
   public async show({}: HttpContextContract) {}
 
-  public async edit({}: HttpContextContract) {}
+  public async edit({ request, response }: HttpContextContract) {
+    try {
+      const value = await KeyValue.findOrFail(request.all().id);
+      value.value = request.all().value;
+      await value.save();
+      response.status(200).send("EDIT VALUE SUCCESS!");
+    } catch (error) {
+      response.status(500).send("EDIT VALUE FAIL!");
+    }
+  }
 
   public async update({}: HttpContextContract) {}
 

manage-view/src/api/apiLog.js

@@ -1,7 +1,8 @@
-const API = process.env.REACT_APP_API_SERVER_ADDRESS;
+// const API = process.env.REACT_APP_API_SERVER_ADDRESS;
-// const API = "http://localhost:3333/api";
+const API = "http://localhost:3333/api";
 export const getKeyValues = API + "/getKeyValue";
 export const deleteValue = API + "/deleteValue";
 export const addKeyValue = API + "/addValue";
+export const editValue = API + "/editValue";
 export const getLog = API + "/log/showLog";
 export const getListLog = API + "/getAllLogDetect";

manage-view/src/pages/ManageValues.jsx

@@ -1,13 +1,13 @@
 import axios from "axios";
 import React, { useEffect, useState } from "react";
-import { addKeyValue, deleteValue, getKeyValues } from "../api/apiLog";
+import { addKeyValue, deleteValue, editValue, getKeyValues } from "../api/apiLog";
 import { Link } from "react-router-dom";
 const ManageValues = () => {
-
   const [keyValue, setKeyValue] = useState([]);
   const [key, setKey] = useState([]);
-  const [addValue, setAddValue] = useState({key: "CATCH_FAULTY", value:""});
+  const [addValue, setAddValue] = useState({ key: "CATCH_FAULTY", value: "" });
-
+  const [inputSelect, setInpuSelect] = useState(0)
+  const [inputValue, setInputValue] = useState("")
   const getValues = async () => {
     try {
       const res = await axios.post(getKeyValues);
@@ -17,22 +17,22 @@ const ManageValues = () => {
       console.log(error);
     }
   };
-  
+
   useEffect(() => {
     getValues();
   }, []);
-
+  console.log(inputValue)
   return (
     <div
       style={{
         display: "flex",
-        alignItems:"center",
+        alignItems: "center",
-        flexFlow: "column"
+        flexFlow: "column",
       }}
     >
       <div style={{ height: "80vh", overflow: "auto" }}>
         <table>
-          <thead style={{width:"100%"}}>
+          <thead style={{ width: "100%" }}>
             <tr>
               <th
                 style={{ position: "sticky", top: 0, backgroundColor: "white" }}
@@ -40,7 +40,12 @@ const ManageValues = () => {
                 Key
               </th>
               <th
-                style={{ position: "sticky", top: 0, backgroundColor: "white", width:"400px" }}
+                style={{
+                  position: "sticky",
+                  top: 0,
+                  backgroundColor: "white",
+                  width: "400px",
+                }}
               >
                 Value
               </th>
@@ -53,30 +58,99 @@ const ManageValues = () => {
           </thead>
           <tbody>
             {keyValue?.map((value) => (
-              <tr style={{backgroundColor:value.key==="MODEL_SPECIAL"?"rgb(219 219 255 / 47%)":value.key==="CATCH_FAULTY"?"rgb(166 255 165 / 43%)":"rgb(253 189 152 / 41%)"}}>
+              <tr
+                style={{
+                  backgroundColor:
+                    value.key === "MODEL_SPECIAL"
+                      ? "rgb(219 219 255 / 47%)"
+                      : value.key === "CATCH_FAULTY"
+                      ? "rgb(166 255 165 / 43%)"
+                      : value.key === "MEMORY_DEFAULT"
+                      ? "rgb(253 244 52 / 41%)"
+                      : "rgb(253 189 152 / 41%)",
+                }}
+              >
                 <td>{value.key}</td>
                 <td>
-                  <input value={value.value} disabled style={{width:"100%"}}></input>
+                  <input
+                    value={inputSelect===value.id_key?inputValue:value.value}
+                    disabled={inputSelect===value.id_key?false:true}
+                    style={{ width: "100%" }}
+                    onChange={(e)=>{
+                      setInputValue(e.target.value)
+                      
+                    }}
+                  ></input>
                 </td>
                 <td>
-                  <button style={{cursor:"pointer", backgroundColor:"red", color:"white"}} onClick={async()=>{
+                  <button
-                    const res = await axios.post(deleteValue, {id: value.id_key})
+                    style={{
-                    if(res.status !== 200){
+                      cursor: "pointer",
-                        alert(res.data)
+                      backgroundColor: "red",
-                    }else{
+                      color: "white",
+                    }}
+                    onClick={async () => {
+                      const res = await axios.post(deleteValue, {
+                        id: value.id_key,
+                      });
+                      if (res.status !== 200) {
+                        alert(res.data);
+                      } else {
                         getValues();
-                    }
+                      }
-                  }}>Delete</button>
+                    }}
+                  >
+                    Delete
+                  </button>
+                  <button
+                    style={{
+                      cursor: "pointer",
+                      backgroundColor: "yellow",
+                      color: "black",
+                      display:inputSelect===value.id_key?"none":"inline"
+                    }}
+                    onClick={async () => {
+                      setInpuSelect(value.id_key)
+                      setInputValue(value.value)
+                    }}
+                  >
+                    Edit
+                  </button>
+                  <button
+                    style={{
+                      cursor: "pointer",
+                      backgroundColor: "green",
+                      color: "white",
+                      display:inputSelect===value.id_key?"inline":"none"
+                    }}
+                    onClick={async () => {
+                      setInpuSelect(0)
+                      const res = await axios.post(editValue, {
+                        id: value.id_key,
+                        value: inputValue
+                      });
+                      if (res.status !== 200) {
+                        alert(res.data);
+                      } else {
+                        getValues();
+                      }
+                    }}
+                  >
+                    Done
+                  </button>
                 </td>
               </tr>
             ))}
           </tbody>
         </table>
       </div>
-      <div style={{ width: "50%", display:"flex", margin:10 }}>
+      <div style={{ width: "50%", display: "flex", margin: 10 }}>
-        <select style={{ width: "35%" }} onChange={(e)=>{
+        <select
-            setAddValue({...addValue, key:e.target.value})
+          style={{ width: "35%" }}
-        }}>
+          onChange={(e) => {
+            setAddValue({ ...addValue, key: e.target.value });
+          }}
+        >
           {key
             .filter((value, index, self) => {
               return self.indexOf(value) === index;
@@ -85,27 +159,52 @@ const ManageValues = () => {
               <option value={u}>{u}</option>
             ))}
         </select>
-        <input placeholder="value" style={{margin:"0 5px", width:"50%"}} onChange={(e)=>{
+        <input
-            setAddValue({...addValue, value: e.target.value})
+          placeholder="value"
-        }}></input>
+          style={{ margin: "0 5px", width: "50%" }}
-        <button style={{cursor:"pointer", backgroundColor:"green", color:"white"}} onClick={async()=>{
+          onChange={(e) => {
-            if(addValue.key !=="" && addValue.value!==""){
+            setAddValue({ ...addValue, value: e.target.value });
-                const res = await axios.post(addKeyValue,{key: addValue.key, value: addValue.value})
+          }}
-                if(res.status !== 200){
+        ></input>
-                    alert(res.data)
+        <button
-                }else{
+          style={{
-                    getValues();
+            cursor: "pointer",
-                }
+            backgroundColor: "green",
-            }else{
+            color: "white",
-                alert("Value is empty!")
+          }}
+          onClick={async () => {
+            if (addValue.key !== "" && addValue.value !== "") {
+              const res = await axios.post(addKeyValue, {
+                key: addValue.key,
+                value: addValue.value,
+              });
+              if (res.status !== 200) {
+                alert(res.data);
+              } else {
+                getValues();
+              }
+            } else {
+              alert("Value is empty!");
             }
-        }}>Add</button>
+          }}
-
+        >
+          Add
+        </button>
       </div>
       <div>
-       <Link to={"/logs"}> <button style={{color:"white", backgroundColor:"blue", cursor:"pointer"}}>List of detected files</button></Link>
+        <Link to={"/logs"}>
+          {" "}
+          <button
+            style={{
+              color: "white",
+              backgroundColor: "blue",
+              cursor: "pointer",
+            }}
+          >
+            List of detected files
+          </button>
+        </Link>
       </div>
-
     </div>
   );
 };

start/routes.ts

@@ -228,6 +228,10 @@ Route.post("/api/deleteValue", "ValuesController.destroy").middleware(
   "writeLog"
 );
 
+Route.post("/api/editValue", "ValuesController.edit").middleware(
+  "writeLog"
+);
+
 Route.post("/api/addValue", "ValuesController.create").middleware("writeLog");
 
 Route.post("/api/backupProduct", async ({ request, response }) => {
@@ -277,7 +281,7 @@ Route.post("/api/backupProduct", async ({ request, response }) => {
   }
 }).middleware("writeLog");
 
-Route.post("/api/sendMailInforDevice", async ({ request, response }) => {
+Route.post("/api/sendMailInforDevice", async () => {
   try {
     sendDeviceInfora()
   } catch (error) {