sigonasr2/ngsplanner
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Implement key selectors for id fields in admin panel

Browse Source
This commit is contained in:
sigonasr2, Sig, Sigo 2021-07-28 03:55:29 +00:00
parent 60f1bc6116
commit 50d6cbe67f
1 changed files with 10 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/App.js
View File

@ -374,13 +374,19 @@ function InputBox(p) {
const [value,setValue] = useState(p.value) const [value,setValue] = useState(p.value)
const [failed,setFailed] = useState(false) const [failed,setFailed] = useState(false)
const [sending,setSending] = useState(false) const [sending,setSending] = useState(false)
return <input className={failed?"failedInput":sending?"submitting":""} onChange={(f)=>{setValue(f.currentTarget.value)}} onBlur={(f)=>{
function changeFunc(f){setValue(f.currentTarget.value)}
function blurFunc(f){
setSending(true) setSending(true)
setFailed(false) setFailed(false)
p.callback(f.currentTarget.value) p.callback(f.currentTarget.value)
.then(()=>{setFailed(false)}) .then(()=>{setFailed(false)})
.catch(()=>{setFailed(true)}) .catch(()=>{setFailed(true)})
.then(()=>{setSending(false)})}} value={value}/> .then(()=>{setSending(false)})}
return p.data?<select className={failed?"failedInput":sending?"submitting":""} value={value} onChange={(f)=>{changeFunc(f)}} onBlur={(f)=>{blurFunc(f)}}>
{p.data.map((item)=><option value={item.id}>{item.id} - {item.name||item.username}</option>)}
</select>:<input className={failed?"failedInput":sending?"submitting":""} value={value} onChange={(f)=>{changeFunc(f)}} onBlur={(f)=>{blurFunc(f)}}/>
} }
function TableEditor(p) { function TableEditor(p) {
@ -429,7 +435,7 @@ function TableEditor(p) {
var dependency_map = {} var dependency_map = {}
var promise_list = [] var promise_list = []
cols.filter((col)=>col.name!=="id"&&col.name.includes("_id")||col.name=="user_id").forEach((col)=>{ cols.filter((col)=>col.name!=="id"&&col.name.includes("_id")).forEach((col)=>{
promise_list.push(axios.get(BACKEND_URL+"/"+col.name.replace("_id","")) promise_list.push(axios.get(BACKEND_URL+"/"+col.name.replace("_id",""))
.then((data)=>{ .then((data)=>{
dependency_map[col.name]=data.data.rows.reverse() dependency_map[col.name]=data.data.rows.reverse()
@ -460,7 +466,7 @@ function TableEditor(p) {
<tbody> <tbody>
{data.map((dat)=><tr key={dat.id}> {data.map((dat)=><tr key={dat.id}>
<td><XSquareFill className="webicon" onClick={()=>{axios.delete(BACKEND_URL+p.path,{data:{id:dat.id}}).then(()=>{setUpdate(true)}).catch((err)=>{alert(err.response.data)})}}/></td>{fields.map((col,i)=><td key={dat.id+"_"+i} className="table-padding table"> <td><XSquareFill className="webicon" onClick={()=>{axios.delete(BACKEND_URL+p.path,{data:{id:dat.id}}).then(()=>{setUpdate(true)}).catch((err)=>{alert(err.response.data)})}}/></td>{fields.map((col,i)=><td key={dat.id+"_"+i} className="table-padding table">
<InputBox callback={(value)=>{ <InputBox data={dependencies[col.name]} callback={(value)=>{
return axios.patch(BACKEND_URL+p.path,{ return axios.patch(BACKEND_URL+p.path,{
[col.name]:value, [col.name]:value,
id:dat.id id:dat.id