Tapage/components/editCustomQuestions.tsx

48 lines
1.8 KiB
TypeScript
Raw Normal View History

import { useState } from 'react'
import { IconSquareX } from '@tabler/icons-react'
2024-08-10 11:22:32 +00:00
export default function EditCustomQuestions({dataRef, questionList = [], setQuestions}: any){
let questionTemp = questionList
console.log(questionTemp)
const [forceUpdate, setForceUpdate] = useState(0)
function addQuestion(){
questionTemp.push({text: "", type:"text"})
setForceUpdate(oldFu => oldFu + 1)
}
2024-08-10 11:22:32 +00:00
function removeQuestion(index: number){
questionTemp.splice(index, 1)
setForceUpdate(oldFu => oldFu + 1)
}
return <>
<dialog ref={dataRef} className="modal">
<div className="modal-box flex flex-col space-y-8">
<h3 className="font-bold text-lg">Edit custom questions!</h3>
<div className="flex flex-col space-y-4">
2024-08-10 11:22:32 +00:00
{ questionTemp.map((question: any, index: number) => {
return(
2024-08-10 11:22:32 +00:00
<div className="flex flex-row space-x-4" key={index}>
<input type="text" className="input input-bordered w-full max-w-xs" placeholder="Question" defaultValue={question.text} onChange={(e) => {questionTemp[index].text = e.target.value}}/>
<select onChange={(e) => {questionTemp[index].type = e.target.value}} className="select select-bordered w-24 max-w-xs">
<option>Text</option>
<option>Photo</option>
</select>
<IconSquareX onClick={() => removeQuestion(index)} className="w-12 h-12"/>
</div>
)
})}
</div>
<button className="btn btn-primary" onClick={addQuestion}>Add question</button>
<div className="modal-action">
<form method="dialog">
{/* if there is a button in form, it will close the modal */}
<button className="btn" onClick={() => setQuestions(questionTemp)}>Save</button>
</form>
</div>
</div>
</dialog>
</>
}