107 lines
3.4 KiB
JavaScript
107 lines
3.4 KiB
JavaScript
import axios from "axios";
|
|
import React, { useEffect, useState } from "react";
|
|
import { addKeyValue, deleteValue, getKeyValues } from "../api/apiLog";
|
|
const ManageValues = () => {
|
|
const [keyValue, setKeyValue] = useState([]);
|
|
const [key, setKey] = useState([]);
|
|
const [addValue, setAddValue] = useState({key: "CATCH_FAULTY", value:""});
|
|
const getValues = async () => {
|
|
try {
|
|
const res = await axios.post(getKeyValues);
|
|
setKeyValue(res.data.sort((a, b) => a.key.localeCompare(b.key)));
|
|
setKey(res.data?.map((obj) => obj.key));
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
};
|
|
useEffect(() => {
|
|
getValues();
|
|
}, []);
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
alignItems:"center",
|
|
flexFlow: "column"
|
|
}}
|
|
>
|
|
<div style={{ height: "80vh", overflow: "auto" }}>
|
|
<table>
|
|
<thead style={{width:"100%"}}>
|
|
<tr>
|
|
<th
|
|
style={{ position: "sticky", top: 0, backgroundColor: "white" }}
|
|
>
|
|
Key
|
|
</th>
|
|
<th
|
|
style={{ position: "sticky", top: 0, backgroundColor: "white", width:"400px" }}
|
|
>
|
|
Value
|
|
</th>
|
|
<th
|
|
style={{ position: "sticky", top: 0, backgroundColor: "white" }}
|
|
>
|
|
Option
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{keyValue?.map((value) => (
|
|
<tr>
|
|
<td>{value.key}</td>
|
|
<td>
|
|
<input value={value.value} disabled style={{width:"100%"}}></input>
|
|
</td>
|
|
<td>
|
|
<button style={{cursor:"pointer", backgroundColor:"red", 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>
|
|
{/* <button style={{cursor:"pointer", backgroundColor:"green", color:"white"}}>Save</button> */}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div style={{ width: "50%", display:"flex", margin:10 }}>
|
|
<select style={{ width: "35%" }} onChange={(e)=>{
|
|
setAddValue({...addValue, key:e.target.value})
|
|
}}>
|
|
{key
|
|
.filter((value, index, self) => {
|
|
return self.indexOf(value) === index;
|
|
})
|
|
?.map((u) => (
|
|
<option value={u}>{u}</option>
|
|
))}
|
|
</select>
|
|
|
|
<input placeholder="value" style={{margin:"0 5px", width:"50%"}} onChange={(e)=>{
|
|
setAddValue({...addValue, value: e.target.value})
|
|
}}></input>
|
|
<button style={{cursor:"pointer", backgroundColor:"green", color:"white"}} 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>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ManageValues;
|