173 lines
7.0 KiB
JavaScript
173 lines
7.0 KiB
JavaScript
import React, {useEffect, useState} from "react";
|
|
import Modal from "react-bootstrap/Modal";
|
|
import Row from "react-bootstrap/Row";
|
|
import Col from "react-bootstrap/Col";
|
|
import Form from "react-bootstrap/Form";
|
|
import Table from "react-bootstrap/Table";
|
|
import * as EgovNet from "api/egovFetch";
|
|
|
|
function QuestionModal({svySeq}){
|
|
|
|
const [qtList, setQtList] = useState([]);
|
|
const [selectedQt, setSelectedQt] = useState(null);
|
|
const [tempSeq, setTempSeq] = useState(1);
|
|
|
|
function getSurveyQt(){
|
|
EgovNet.requestFetch(
|
|
'/admin/survey/info-qt?svySeq='+svySeq,
|
|
{
|
|
method: "GET"
|
|
},
|
|
(resp) => {
|
|
setQtList(resp.result.qtList)
|
|
},
|
|
function (resp) {
|
|
console.log("err response : ", resp);
|
|
}
|
|
);
|
|
}
|
|
|
|
function addQt(){
|
|
const temp = [...qtList]
|
|
temp.push({
|
|
qtSeq: null,
|
|
tempSeq: tempSeq,
|
|
svySeq: svySeq,
|
|
qtTitle: '',
|
|
qtDesc: '',
|
|
qtType: '',
|
|
maxNo: '',
|
|
etcYn: '',
|
|
itemList:[]
|
|
})
|
|
setQtList(temp);
|
|
setTempSeq(tempSeq+1);
|
|
}
|
|
|
|
function addItem(){
|
|
|
|
}
|
|
|
|
function editSurveyQt(e){
|
|
|
|
}
|
|
|
|
useEffect(() => {
|
|
getSurveyQt()
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const tempQt = [...qtList];
|
|
tempQt.forEach(function (qt, index){
|
|
if(qt.qtSeq === null){
|
|
if(qt.tempSeq === selectedQt.tempSeq){
|
|
qt = selectedQt;
|
|
}
|
|
}else if(qt.qtSeq === selectedQt.qtSeq){
|
|
qt = selectedQt;
|
|
}
|
|
})
|
|
setQtList(tempQt);
|
|
}, [selectedQt]);
|
|
|
|
return (
|
|
<>
|
|
<Modal.Header closeButton>
|
|
<Modal.Title>질문관리</Modal.Title>
|
|
</Modal.Header>
|
|
<Modal.Body>
|
|
<Row>
|
|
<Col xs={5}>
|
|
<Table>
|
|
<thead>
|
|
<tr>
|
|
<th>질문</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{qtList.map(qt=>{
|
|
return (
|
|
<tr>
|
|
<td>
|
|
<Form.Control type={"text"} defaultValue={qt.qtTitle} onClick={()=>{setSelectedQt(qt)}}/>
|
|
</td>
|
|
</tr>
|
|
);
|
|
})}
|
|
</tbody>
|
|
<tfoot>
|
|
<tr>
|
|
<td>
|
|
<button className={"btn btn_blue_h31"} onClick={addQt}>추가</button>
|
|
</td>
|
|
</tr>
|
|
</tfoot>
|
|
</Table>
|
|
</Col>
|
|
<Col xs={7} className={selectedQt?"":"d-none"}>
|
|
<Form.Group as={Row} className="mb-3">
|
|
<Form.Label column sm={3}>
|
|
질문유형
|
|
</Form.Label>
|
|
<Col sm={9} key={`inline-radio`} className={'my-auto'}>
|
|
<Form.Check inline label="체크박스" name="qtType" type={'radio'} value={1} checked={selectedQt?.qtType === 1} onClick={()=>{setSelectedQt({...selectedQt, qtType:1})}}/>
|
|
<Form.Check inline label="라디오버튼" name="qtType" type={'radio'} value={2} checked={selectedQt?.qtType === 2} onClick={()=>{setSelectedQt({...selectedQt, qtType:2})}}/>
|
|
<Form.Check inline label="직접입력" name="qtType" type={'radio'} value={3} checked={selectedQt?.qtType === 3} onClick={()=>{setSelectedQt({...selectedQt, qtType:3})}}/>
|
|
<Form.Check inline label="이용자만족도" name="qtType" type={'radio'} value={4} checked={selectedQt?.qtType === 4} onClick={()=>{setSelectedQt({...selectedQt, qtType:4})}}/>
|
|
</Col>
|
|
</Form.Group>
|
|
<Form.Group as={Row} className={`mb-3 ${selectedQt?.qtType!==1?'d-none':''}`}>
|
|
<Form.Label column sm={3}>
|
|
최대 선택 개수
|
|
</Form.Label>
|
|
<Col sm={3}>
|
|
<Form.Control type="text" name="maxNo" defaultValue={selectedQt?.maxNo} onChange={(e)=>{setSelectedQt({...selectedQt, maxNo:e.target.value})}}/>
|
|
</Col>
|
|
<Form.Label column sm={'auto'}>
|
|
기타 여부
|
|
</Form.Label>
|
|
<Col sm={3} className={'my-auto'}>
|
|
<Form.Check type="checkbox" name="etcYn" checked={selectedQt?.etcYn==='Y'} onClick={(e)=>{setSelectedQt({...selectedQt, etcYn:e.target.checked?'Y':'N'})}}/>
|
|
</Col>
|
|
</Form.Group>
|
|
<Table>
|
|
<thead>
|
|
<tr>
|
|
<th>보기</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{selectedQt?.itemList.map((item, index)=>{
|
|
return (
|
|
<tr>
|
|
<td>
|
|
<Form.Control type={"text"} defaultValue={item.itemNm} value={item.itemNm}
|
|
onChange={(e)=>{
|
|
const qt = {...selectedQt}
|
|
qt.itemList[index].itemNm = e.target.value
|
|
setSelectedQt(qt);
|
|
}}/>
|
|
</td>
|
|
</tr>
|
|
);
|
|
})}
|
|
</tbody>
|
|
<tfoot>
|
|
<tr>
|
|
<td>
|
|
<button className={"btn btn_blue_h31"} onClick={addItem}>추가</button>
|
|
</td>
|
|
</tr>
|
|
</tfoot>
|
|
</Table>
|
|
</Col>
|
|
</Row>
|
|
</Modal.Body>
|
|
<Modal.Footer>
|
|
<button type="button" className={"btn btn_blue_h31 px-3"}>저장</button>
|
|
</Modal.Footer>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default QuestionModal; |