File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
import React from "react";
import { useNavigate, useLocation } from "react-router";
import { useSelector } from "react-redux";
import Modal from "../../component/Modal.jsx";
import ContentTitle from "../../component/ContentTitle.jsx";
import SubTitle from "../../component/SubTitle.jsx";
import Pagination from "../../component/Pagination.jsx";
import CommonUtil from "../../../resources/js/CommonUtil.js";
export default function QandAInsert() {
const navigate = useNavigate();
const location = useLocation();
//전역 변수 저장 객체
const state = useSelector((state) => { return state });
const defaultGovernmentId = CommonUtil.isEmpty(state.loginUser) ? null : state.loginUser['government_id'];
const defaultAgencyId = CommonUtil.isEmpty(state.loginUser) ? null : state.loginUser['agency_id'];
let defaultSeniorId = null;
if (CommonUtil.isEmpty(state.loginUser) == false) {
if (state.loginUser['authority'] == 'ROLE_SENIOR') {
defaultSeniorId = state.loginUser['user_id'];
} else if (state.loginUser['authority'] == 'ROLE_GUARDIAN' && CommonUtil.isEmpty(state['seniorList'].value) == false) {
defaultSeniorId = state['seniorList'].value[state.currentSeniorIndex.value]['user_id'];
}
} else {
defaultSeniorId = null;
}
const [seniorSearch, setSeniorSearch] = React.useState(defaultSeniorId);
// 시스템 코드 - 장비 상태
const [equipmentStates, setEquipmentStates] = React.useState({});
// 시스템 코드 - 장비 상태 조회
const equipmentStatesSelect = () => {
console.log('equipmentStatesSelect Function Run');
//fetch post
fetch("/common/systemCode/equipmentStatesSelect.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify({})
}).then((response) => response.json()).then((data) => {
console.log('equipmentStatesSelect response : ', data);
setEquipmentStates(data);
}).catch((error) => {
console.log('equipmentStatesSelect error : ', error);
});
}
//입고 및 미대여 장비 검색 정보
const [equipmentSearch, setEquipmentSearch] = React.useState({
'government_id': defaultGovernmentId,
'agency_id': defaultAgencyId,
'senior_id': seniorSearch,
'currentPage': 1,
'perPage': 10,
'searchType': null,
'searchText': null,
'equipment_state': null,
});
//장비 정보 변경
const equipmentSearchChange = (targetKey, value) => {
equipmentSearch[targetKey] = value;
setEquipmentSearch({ ...equipmentSearch });
}
//장비 검색
const equipmentSearching = () => {
equipmentSelectList(1);
}
const equipmentSearchingEnter = (key) => {
if (key == 'Enter') {
equipmentSearching();
} else {
return;
}
}
//입고 및 미대여 목록
const [equipment, setEquipment] = React.useState({ equipmentList: [], equipmentListCount: 0 });
//입고 및 미대여 목록 조회
const equipmentSelectList = (currentPage) => {
equipmentSearch.currentPage = CommonUtil.isEmpty(currentPage) ? 1 : currentPage;
setEquipmentSearch({ ...equipmentSearch });
fetch("/equipment/equipmentSelectList.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify(equipmentSearch)
}).then((response) => response.json()).then((data) => {
console.log('equipmentSelectList response : ', data);
setEquipment(data);
if (CommonUtil.isEmpty(data.equipmentList) == false && equipmentInquiry['equipment_serial_number'] == '') {
equipmentInquirySelect(data.equipmentList[0]);
}
}).catch((error) => {
console.log('equipmentSelectList error : ', error);
});
}
//장비 모달 여부
const [modalEquipmentIsOpen, setModalEquipmentIsOpen] = React.useState(false);
//장비 오픈
const modalEquipmentOpen = () => {
setModalEquipmentIsOpen(true);
};
//장비 닫기
const modalEquipmentClose = () => {
setModalEquipmentIsOpen(false);
};
const equipmentInit = {
'equipment_serial_number': null,
'equipment_name': null,
'agency_name': null,
'rental_detail_insert_user_name': null,
'rental_detail_insert_user_id': null,
'user_name': null,
'user_id': null,
'user_address': null,
'equipment_state': null,
}
//등록할 문의 정보
const [equipmentInquiry, setEquipmentInquiry] = React.useState({
'inquiry_idx': 0,
'inquiry_type': null,
'inquiry_title': null,
'inquiry_content': null,
'inquiry_state': null,
'inquiry_insert_user_id': null,
'inquiry_insert_datetime': null,
'inquiry_answer_content': null,
'inquiry_answer_user_id': null,
'inquiry_update_datetime': null,
'equipment_serial_number': null,
//문의할 장비 정보
equipment: { ...equipmentInit }
});
const equipmentInquiryRef = React.useRef({ ...equipmentInquiry });
//문의할 장비 선택
const equipmentInquirySelect = (equipment) => {
equipmentInquiry.equipment = equipment;
equipmentInquiry['equipment_serial_number'] = equipment['equipment_serial_number'];
setEquipmentInquiry({ ...equipmentInquiry });
}
//문의할 장비 선택 취소
const equipmentInquirySelectCancel = () => {
equipmentInquiry['equipment_serial_number'] = '';
equipmentInquiry.equipment = { ...equipmentInit };
setEquipmentInquiry({ ...equipmentInquiry });
}
//등록할 문의 구분이 '장비문의'로 바꼈을 때만 작동
React.useEffect(() => {
if (equipmentInquiry['equipment_serial_number'] == '') {
equipmentInquiry['inquiry_type'] = '기타';
setEquipmentInquiry({ ...equipmentInquiry });
} else if (equipmentInquiry['equipment_serial_number'] == null) {
equipmentInquiry.equipment = { ...equipmentInit };
equipmentInquiry['inquiry_type'] = null;
setEquipmentInquiry({ ...equipmentInquiry });
}
}, [equipmentInquiry['equipment_serial_number']]);
//등록할 문의 구분이 '장비문의 구분'이 바꼈을 때만 작동
React.useEffect(() => {
if (equipmentInquiry['equipment_serial_number'] == ''
&& (equipmentInquiry['inquiry_type'] == '교환'
|| equipmentInquiry['inquiry_type'] == '수리')) {
equipmentSelectList(1);
} else if (CommonUtil.isEmpty(equipmentInquiry['equipment_serial_number']) == false
&& equipmentInquiry['inquiry_type'] == '추가') {
equipmentInquirySelectCancel();
}
}, [equipmentInquiry['inquiry_type']]);
//문의 등록 유효성 검사
const equipmentInquiryValidation = () => {
const target = equipmentInquiry;
const targetRef = equipmentInquiryRef;
if (CommonUtil.isEmpty(target['inquiry_title']) == true) {
targetRef.current['inquiry_title'].focus();
alert("문의제목을 입력해 주세요.");
return false;
}
if (CommonUtil.isEmpty(target['inquiry_content']) == true) {
targetRef.current['inquiry_content'].focus();
alert("내용을 입력해 주세요.");
return false;
}
if ((equipmentInquiry['inquiry_type'] == '교환' || equipmentInquiry['inquiry_type'] == '수리')
&& CommonUtil.isEmpty(target['equipment_serial_number'])) {
alert(`장비 ${equipmentInquiry['inquiry_type']}은(는) 장비 정보를 필수로 선택하셔야 됩니다.`);
return false;
}
return true;
}
//문의 등록
const equipmentInquiryInsert = () => {
if (equipmentInquiryValidation() == false) {
return;
}
if (equipmentInquiry['equipment_serial_number'] == '') {
equipmentInquiry['equipment_serial_number'] = null;
}
fetch("/equipment/equipmentInquiryInsert.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify(equipmentInquiry),
}).then((response) => response.json()).then((data) => {
console.log("문의 등록 결과(건수) : ", data);
if (data > 0) {
alert("등록완료");
navigate('/QandASelect');
} else {
alert("등록에 실패하였습니다. 관리자에게 문의바랍니다.");
}
}).catch((error) => {
console.log('equipmentInquiryInsert() /equipment/equipmentInquiryInsert.json error : ', error);
});
}
React.useEffect(() => {
equipmentStatesSelect();
}, [seniorSearch, equipmentSearch])
return (
<main>
<Modal open={modalEquipmentIsOpen} close={modalEquipmentClose} header="문의대상 장비 선택">
<div className="board-wrap">
<div>
<div className="search-management flex-end margin-bottom2 margin-top gap">
<select style={{ maxWidth: '150px' }}
onChange={(e) => equipmentSearchChange('equipment_state', e.target.value)}>
<option value="">상태</option>
{Object.keys(equipmentStates).map((key, idx) => {
return (
<option key={key} value={key}>
{equipmentStates[key]}
</option>
)
})}
</select>
<select style={{ maxWidth: '150px' }}
onChange={(e) => equipmentSearchChange('searchType', e.target.value)}>
<option value="">전체</option>
<option value="equipment_name">모델명</option>
<option value="equipment_serial_number">시리얼넘버</option>
</select>
<input type="text"
value={equipmentSearch.searchText}
onChange={(e) => equipmentSearchChange('searchText', e.target.value)}
onKeyUp={(e) => equipmentSearchingEnter(e.key)}
/>
<button className={"btn-small gray-btn"} style={{ maxWidth: '150px' }} onClick={equipmentSearching}>검색</button>
</div>
<table class="caregiver-user protector-user">
<thead>
<tr>
<th>No</th>
<th>장비사용대상자</th>
<th>모델명</th>
<th>시리얼넘버</th>
<th>장비상태</th>
<th>기관</th>
<th>선택</th>
</tr>
</thead>
<tbody>
{equipment.equipmentList.map((item, idx) => {
return (
<tr>
<td data-label="No">{equipment.equipmentListCount - idx - (equipmentSearch.currentPage - 1) * equipmentSearch.perPage}</td>
<td data-label="장비사용대상자">
{item['user_id'] == null ? '미대여' : item['user_name']}
</td>
<td data-label="모델명">{item['equipment_name']}</td>
<td data-label="시리얼넘버">{item['equipment_serial_number']}</td>
<td data-label="장비상태">{equipmentStates[item['equipment_state']]}</td>
<td>
{item['agency_id'] == null ? item['government_name'] : item['agency_name']}
</td>
<td data-label="대여시행자">
{equipmentInquiry.equipment['equipment_serial_number'] != item['equipment_serial_number']
? <button className={"btn-small gray-btn"} style={{ maxWidth: '150px' }}
onClick={() => { equipmentInquirySelect(item); modalEquipmentClose(); }}>선택</button>
: <button className={"btn-small red-btn"} style={{ maxWidth: '150px' }}
onClick={() => { equipmentInquirySelectCancel(); modalEquipmentClose(); }}>취소</button>
}
</td>
</tr>
)
})}
{CommonUtil.isEmpty(equipment.equipmentList) ?
<tr>
<td colSpan={7}>조회된 데이터가 없습니다</td>
</tr>
: null}
</tbody>
</table>
<Pagination
currentPage={equipmentSearch.currentPage}
perPage={equipmentSearch.perPage}
totalCount={equipment.equipmentListCount}
maxRange={5}
click={equipmentSelectList}
/>
</div>
</div>
</Modal>
<div className="content-wrap row">
<ContentTitle contentTitle={"문의글 작성"} className={"margin-bottom2"} />
<SubTitle explanation={"문의 정보"} className={"margin-bottom2"} />
<table className="margin-bottom2 qna-insert senior-detail">
<tr>
<th><span style={{ color: "red" }}>*</span>구분</th>
<td colSpan={3}>
<div className="gender flex-start gap5">
<div className="flex-start">
<input type="radio" id="normal_question" name="question_type" value="일반문의" style={{ width: '25px' }}
checked={equipmentInquiry['equipment_serial_number'] == null}
onChange={(e) => { equipmentInquiry['equipment_serial_number'] = null; setEquipmentInquiry({ ...equipmentInquiry }); }} />
<label for="normal_question">일반문의</label>
</div>
<div className="flex-start">
<input type="radio" id="equipment_question" name="question_type" value="장비문의" style={{ width: '25px' }}
checked={equipmentInquiry['equipment_serial_number'] != null}
onChange={(e) => { equipmentInquiry['equipment_serial_number'] = ''; setEquipmentInquiry({ ...equipmentInquiry }); }} />
<label for="equipment_question" >장비문의</label>
</div>
</div>
</td>
</tr>
{equipmentInquiry['equipment_serial_number'] != null ?
<>
{CommonUtil.isEmpty(state.loginUser) == false && state.loginUser['authority'] == 'ROLE_GUARDIAN' && state['seniorList'].value.length > 1 ? (
<tr>
<th><span style={{ color: "red" }}>*</span>시니어 선택</th>
<td>
<select onChange={(e) => {
const index = Number(e.target.value);
equipmentSearch['senior_id'] = state['seniorList'].value[index]['user_id'];
console.log("equipmentSearch['senior_id'] : ", equipmentSearch['senior_id']);
}}>
{state['seniorList'].value.map((item, idx) => {
return (
<option key={idx} value={idx}>{item['user_name']}</option>
)
})}
</select>
</td>
</tr>
)
: null}
<tr>
<th><span style={{ color: "red" }}>*</span>장비문의 구분</th>
<td colSpan={3}>
<select onChange={(e) => { equipmentInquiry['inquiry_type'] = e.target.value; setEquipmentInquiry({ ...equipmentInquiry }); }}>
<option selected={equipmentInquiry['inquiry_type'] == '수리'}>수리</option>
<option selected={equipmentInquiry['inquiry_type'] == '교환'}>교환</option>
<option selected={equipmentInquiry['inquiry_type'] == '추가'}>추가</option>
<option selected={equipmentInquiry['inquiry_type'] == '기타'}>기타</option>
</select>
</td>
</tr>
</>
: null}
<tr>
<th><span style={{ color: "red" }}>*</span>문의제목</th>
<td colSpan={3}>
<input type="text" placeholder="문의글의 제목을 입력해주세요."
onChange={(e) => { equipmentInquiry['inquiry_title'] = e.target.value; setEquipmentInquiry({ ...equipmentInquiry }); }}
ref={el => equipmentInquiryRef.current['inquiry_title'] = el}
/>
</td>
</tr>
<tr>
<th><span style={{ color: "red" }}>*</span>내용</th>
<td colSpan={3}>
<textarea className="medicine" cols="30" rows="2"
onChange={(e) => { equipmentInquiry['inquiry_content'] = e.target.value; setEquipmentInquiry({ ...equipmentInquiry }); }}
ref={el => equipmentInquiryRef.current['inquiry_content'] = el}
></textarea>
</td>
</tr>
</table>
{equipmentInquiry['equipment_serial_number'] != null
? <>
<SubTitle explanation={equipmentInquiry['inquiry_type'] == '교환' || equipmentInquiry['inquiry_type'] == '수리'
? <span>장비 정보 <span style={{ color: "red" }}>(필수)</span></span>
: <span>장비 정보 (선택)</span>
} className={"display-inline-block margin-bottom2"} />
<button className={"btn-small gray-btn"} style={{ maxWidth: '150px' }} onClick={() => { equipmentSelectList(1); modalEquipmentOpen(); }}>검색</button>
{CommonUtil.isEmpty(equipmentInquiry.equipment['equipment_serial_number']) == false ?
<>
<button className={"btn-small red-btn"} style={{ maxWidth: '150px' }} onClick={equipmentInquirySelectCancel}>취소</button>
<table className="margin-bottom2 qna-insert senior-detail">
<tr>
<th>장비 시리얼넘버</th>
<td colSpan={3}>
{equipmentInquiry.equipment['equipment_serial_number']}
</td>
</tr>
<tr>
<th>모델명</th>
<td>
{equipmentInquiry.equipment['equipment_name']}
</td>
<th>장비상태</th>
<td>
{equipmentStates[equipmentInquiry.equipment['equipment_state']]}
</td>
</tr>
<tr>
<th>소속기관</th>
<td>
{equipmentInquiry.equipment['agency_id'] == null ? equipmentInquiry.equipment['government_name'] : equipmentInquiry.equipment['agency_name']}
</td>
<th>대여시행자</th>
<td>
{CommonUtil.isEmpty(equipmentInquiry.equipment['equipment_serial_number']) == false
&& CommonUtil.isEmpty(equipmentInquiry.equipment['rental_detail_insert_user_id']) == false
? <>
{equipmentInquiry.equipment['rental_detail_insert_user_name']}
({equipmentInquiry.equipment['rental_detail_insert_user_id']})
</>
: '미대여'}
</td>
</tr>
<tr>
<th>장비사용대상자</th>
<td>
{equipmentInquiry.equipment['user_id'] == null ? '미대여' : equipmentInquiry.equipment['user_name']}
</td>
<th>대상자 ID</th>
<td>
{equipmentInquiry.equipment['user_id'] == null ? '미대여' : equipmentInquiry.equipment['user_id']}
</td>
</tr>
<tr>
<th>대상자 주소</th>
<td colSpan={3}>
{equipmentInquiry.equipment['user_id'] == null ? '미대여' : equipmentInquiry.equipment['user_address']}
</td>
</tr>
</table>
</> : null}
</> : null}
<div className="btn-wrap flex-center margin-top5">
<button className="btn-large gray-btn" onClick={() => navigate(-1)}>취소</button>
<button className="btn-large red-btn" onClick={() => equipmentInquiryInsert()}>등록</button>
</div>
</div>
</main>
);
}