File name
Commit message
Commit date
File name
Commit message
Commit date
import React from "react";
import SubTitle from "./SubTitle.jsx";
import CommonUtil from "../../resources/js/CommonUtil.js";
export default function Modal_Guardian({ open, close, guardianManagementCallback, seniorId, guardianBySenior }) {
const relationshipList = [
'자녀',
'손자녀',
'배우자',
'사위',
'며느리',
'형제',
'자매',
'남매',
'친척'
];
const guardianInit = {
'user_id': '',
'user_name': '',
'user_password': '',
'user_phonenumber': '',
'user_birth': '',
'user_gender': '',
'user_address': '',
'user_email': '',
'authority': 'ROLE_GUARDIAN',
'agency_id': null,
'government_id': null,
'senior_id': seniorId,
'senior_relationship': '자녀',
};
//보호자 정보
const [guardian, setGuardian] = React.useState(JSON.parse(JSON.stringify(guardianInit)));
//각 데이터별로 Dom 정보 담을 Ref 생성
const guardianRefInit = JSON.parse(JSON.stringify(guardian));
guardianRefInit['user_gender'] = {};
guardianRefInit['senior_relationship_etc'] = null;
const guardianRef = React.useRef(guardianRefInit);
//등록할 보호자 정보 변경
const guardianValueChange = (targetKey, value) => {
let newGuardian = JSON.parse(JSON.stringify(guardian));
newGuardian[targetKey] = value;
setGuardian(newGuardian);
}
//아이디 중복 확인
const [isIdCheck, setIsIdCheck] = React.useState(false);
//로그인 아이디 중복 검사
const userIdCheck = () => {
if (CommonUtil.isEmpty(guardian['user_phonenumber']) == true) {
guardianRef.current['user_phonenumber'].focus();
alert("연락처를 입력해 주세요.");
return false;
}
guardian['user_id'] = guardian['user_phonenumber'];
fetch("/user/userSelectOne.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify(guardian),
}).then((response) => response.json()).then((data) => {
console.log("로그인 아이디 중복 검사(아이디를 통한 사용자 조회) : ", data);
if (CommonUtil.isEmpty(data) == true) {
setIsIdCheck(true);
guardianRef.current['user_address'].focus();
alert("사용가능한 연락처 입니다.");
} else {
setIsIdCheck(false);
guardianRef.current['user_phonenumber'].focus();
alert("이미 존재하는 연락처 입니다.");
}
}).catch((error) => {
console.log('userIdCheck() /user/userSelectOne.json error : ', error);
});
}
//보호자 등록 유효성 검사
const guardianInsertValidation = () => {
if (CommonUtil.isEmpty(guardian['user_name']) == true) {
guardianRef.current['user_name'].focus();
alert("이름을 입력해 주세요.");
return false;
}
if (CommonUtil.isEmpty(guardian['user_gender']) == true) {
guardianRef.current['user_gender']['m'].focus();
alert("성별을 선택해 주세요.");
return false;
}
if (CommonUtil.isEmpty(guardian['user_birth']) == true) {
guardianRef.current['user_birth'].focus();
alert("생년월일을 선택해 주세요.");
return false;
}
if (CommonUtil.isEmpty(guardian['user_phonenumber']) == true) {
guardianRef.current['user_phonenumber'].focus();
alert("연락처를 입력해 주세요.");
return false;
}
if (isIdCheck == false) {
alert("연락처 중복확인을 해주세요.");
return false;
}
if (CommonUtil.isEmpty(guardian['user_address']) == true) {
guardianRef.current['user_address'].focus();
alert("주소를 입력해 주세요.");
return false;
}
if (CommonUtil.isEmpty(guardian['senior_relationship']) == true) {
guardianRef.current['senior_relationship_etc'].focus();
alert("대상자와의 관계를 입력 주세요.");
return false;
}
return true;
}
//보호자 등록
const guardianInsert = () => {
if (guardianInsertValidation() == false) {
return;
}
fetch("/user/guardianInsert.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify(guardian),
}).then((response) => response.json()).then((data) => {
console.log("시니어 등록 결과(건수) : ", data);
if (data > 0) {
alert("등록완료");
guardianManagementCallback();
} else {
alert("등록에 실패하였습니다. 관리자에게 문의바랍니다.");
}
}).catch((error) => {
console.log('guardianInsert() /user/guardianInsert.json error : ', error);
});
}
//보호자 수정
const guardianUpdate = () => {
if (guardianInsertValidation() == false) {
return;
}
fetch("/user/guardianUpdate.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify(guardian),
}).then((response) => response.json()).then((data) => {
console.log("시니어 수정 결과(건수) : ", data);
if (data > 0) {
alert("수정완료");
guardianManagementCallback();
} else {
alert("수정에 실패하였습니다. 관리자에게 문의바랍니다.");
}
}).catch((error) => {
console.log('guardianInsert() /user/guardianInsert.json error : ', error);
});
}
//보호자 삭제
const guardianDelete = () => {
if (confirm("보호자를 삭제하시겠습니까?") == false) {
return;
}
if (guardianInsertValidation() == false) {
return;
}
fetch("/user/guardianDelete.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify(guardian),
}).then((response) => response.json()).then((data) => {
console.log("시니어 삭제 결과(건수) : ", data);
if (data > 0) {
alert("삭제완료");
guardianManagementCallback();
} else {
alert("삭제에 실패하였습니다. 관리자에게 문의바랍니다.");
}
}).catch((error) => {
console.log('guardianInsert() /user/guardianInsert.json error : ', error);
});
}
//Mounted
React.useEffect(() => {
console.log('guardianBySenior : ', guardianBySenior);
if (CommonUtil.isEmpty(guardianBySenior) == false) {
setGuardian(guardianBySenior);
} else {
console.log('guardianBySenior : ', guardianBySenior);
setGuardian(JSON.parse(JSON.stringify(guardianInit)));
}
}, [open]);
return (
<div class={open ? "openModal modal" : "modal"}>
{open ? (
<div className="modal-inner">
<div className="modal-header flex">
보호자(가족) 보기
<button className={"close"} onClick={() => {close()}}>X</button>
</div>
<div className="modal-main">
<div className="board-wrap">
<SubTitle explanation={"최초 ID는 연락처, PW는 생년월일 8자리입니다."} className="margin-bottom" />
<table className="margin-bottom2 senior-insert">
<tr>
<th><span style={{color : "red"}}>*</span>이름</th>
<td>
<input type="text"
value={guardian['user_name']}
onChange={(e) => {guardianValueChange('user_name', e.target.value)}}
ref={el => guardianRef.current['user_name'] = el}
/>
</td>
<th><span style={{color : "red"}}>*</span>성별</th>
<td className=" gender">
<div className="flex-start">
<input type="radio" id="user_gender_m" name="user_gender" value="남"
onChange={(e) => {e.target.checked ? guardianValueChange('user_gender', e.target.value) : null}}
ref={el => guardianRef.current['user_gender']['m'] = el}
/>
<label for="user_gender_m">남</label>
</div>
<div className="flex-start">
<input type="radio" id="user_gender_f" name="user_gender" value="여"
onChange={(e) => {e.target.checked ? guardianValueChange('user_gender', e.target.value) : null}}
ref={el => guardianRef.current['user_gender']['f'] = el}
/>
<label for="user_gender_f">여</label>
</div>
</td>
</tr>
<tr>
<th><span style={{color : "red"}}>*</span>생년월일</th>
<td>
<div className="flex">
<input type='date'
value={guardian['user_birth']}
onChange={(e) => {guardianValueChange('user_birth', e.target.value)}}
ref={el => guardianRef.current['user_birth'] = el}
/>
</div>
</td>
</tr>
<tr>
<th><span style={{color : "red"}}>*</span>연락처</th>
<td colSpan={3}>
<input type="number" maxLength="11" style={{width: 'calc(100% - 160px)'}}
value={guardian['user_phonenumber']}
onChange={(e) => {guardianValueChange('user_phonenumber', e.target.value); setIsIdCheck(false);}}
ref={el => guardianRef.current['user_phonenumber'] = el}
/>
<button className={"red-btn btn-large"} onClick={userIdCheck}>
중복확인
</button>
</td>
</tr>
<tr>
<th><span style={{color : "red"}}>*</span>주소</th>
<td colSpan={3}>
<input type="text"
value={guardian['user_address']}
onChange={(e) => {guardianValueChange('user_address', e.target.value)}}
ref={el => guardianRef.current['user_address'] = el}
/>
</td>
</tr>
<tr>
<th><span style={{color : "red"}}>*</span>대상자와의 관계</th>
<td colSpan={3}>
<select onChange={(e) => {guardianValueChange('senior_relationship', e.target.value)}}
ref={el => guardianRef.current['senior_relationship'] = el}>
{relationshipList.map((relationship, idx) => { return (
<option key={idx}>{relationship}</option>
)})}
<option value="" selected={relationshipList.indexOf(guardian['senior_relationship']) == -1}>기타</option>
</select>
{relationshipList.indexOf(guardian['senior_relationship']) == -1 ? (
<input type="text"
value={guardian['senior_relationship']}
onChange={(e) => {guardianValueChange('senior_relationship', e.target.value)}}
ref={el => guardianRef.current['senior_relationship_etc'] = el}
/>
) : null}
</td>
</tr>
</table>
<div className="btn-wrap flex-center margin-bottom5">
{CommonUtil.isEmpty(guardian['guardian_id'])
? <button className={"btn-small gray-btn"} onClick={guardianInsert}>추가</button>
: <>
<button className={"btn-small gray-btn"} onClick={guardianUpdate}>수정</button>
<button className={"btn-small red-btn"} onClick={guardianDelete}>삭제</button>
</>}
</div>
</div>
</div>
</div>
) : null}
</div>
);
}