File name
Commit message
Commit date
File name
Commit message
Commit date
import React from "react";
import Button from "./Button.jsx";
import SubTitle from "./SubTitle.jsx";
import Table from "./Table.jsx";
import Pagination from "./Pagination.jsx";
export default function Modal({ open, close, header, useseniorId }) {
const seniorId = useseniorId;
//대상자 - 보호자 매칭 리스트
const [sgMatchList, setSgMatchList] = React.useState([]);
const [addGuadian, setAddGuadian] = React.useState(true); //추가된 보호자가 있는지 확인
//사용자 등록 초기값 설정
const [userName, setUserName] = React.useState("");
const [gender, setGender] = React.useState("");
const [brith, setBrith] = React.useState("");
const [telNum, setTelNum] = React.useState("");
const [homeAddress, setHomeAddress] = React.useState("");
const [relationship, setRelationship] = React.useState("");
const [matchState, setMatchState] = React.useState(true);
//-------- 페이징 작업 설정 시작 --------//
const limit = 5; // 페이지당 보여줄 공지 개수
const [page, setPage] = React.useState(1); //page index
const offset = (page - 1) * limit; //게시물 위치 계산
const [guadianTotal, setGuadianTotal] = React.useState(0); //최대길이 넣을 변수
//-------- 변경되는 데이터 Handler 설정 --------//
const handleUserName = (e) => {
setUserName(e.target.value);
};
const handleBrithday = (e) => {
setBrith(e.target.value);
};
const handleTelNum = (e) => {
e.target.value = e.target.value.replace(/[^0-9]/g, '').replace(/^(\d{2,3})(\d{3,4})(\d{4})$/, `$1-$2-$3`);
setTelNum(e.target.value);
};
const handelRelationship = (e) => {
setRelationship(e.target.value);
};
// 데이터 초기화 함수
const dataReset = () => {
setUserName("");
setBrith("");
setTelNum("");
setRelationship("");
}
// 매칭 리스트 출력 영역
const getselectMatchList = () => {
fetch("/user/selectSeniorGuardianMatch.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify({
senior_id: seniorId,
}),
}).then((response) => response.json()).then((data) => {
console.log("getselectMatchList : ", data);
setSgMatchList(data);
setGuadianTotal(data.length);
setAddGuadian(false);
}).catch((error) => {
console.log('getselectMatchList() /user/selectSeniorGuardianMatch.json error : ', error);
});
};
// 보호자 등록 영역
const test = () => {
console.log("userName : ", userName);
console.log("gender : ", gender);
console.log("brith : ", brith);
console.log("telNum : ", telNum);
console.log("homeAddress : ", homeAddress);
console.log("relationship : ", relationship);
console.log("matchState : ", matchState);
}
const insertUser = () => {
fetch("/user/insertSeniorData.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify({
user_name: userName,
user_gender: gender != "" ? gender : null,
user_birth: brith,
user_phonenumber: telNum,
user_address: homeAddress != "" ? homeAddress : null,
agency_id: 'agency01',
government_id: 'government01',
user_code: '3',
}),
}).then((response) => response.json()).then((data) => {
console.log("보호자 등록");
insertGuadian();
}).catch((error) => {
console.log('insertUser() /user/insertSeniorData.json error : ', error);
});
};
const insertGuadian = () => {
fetch("/user/insertGuardian.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify({
user_phonenumber: telNum,
}),
}).then((response) => response.json()).then((data) => {
console.log("보호자 테이블 데이터 등록");
matchSeniorGuadian();
}).catch((error) => {
console.log('insertGuadian() /user/insertGuardian.json error : ', error);
});
};
const matchSeniorGuadian = () => {
fetch("/user/insertSeniorGuardianMatch.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify({
senior_id: useseniorId,
user_phonenumber: telNum,
senior_relationship: relationship,
guardian_match_state: matchState,
}),
}).then((response) => response.json()).then((data) => {
console.log("매칭 등록");
dataReset();
setAddGuadian(true);
}).catch((error) => {
console.log('matchSeniorGuadian() /user/insertSeniorGuardianMatch.json error : ', error);
});
};
// 보호자 등록페이지 데이터
const thead3 = [
"No",
"이름",
"생년월일",
"연락처",
"대상자와의 관계",
"삭제"
];
const key3 = [
"rn",
"guardian_name",
"user_birth",
"user_phonenumber",
"senior_relationship",
];
React.useEffect(() => {
getselectMatchList();
}, [addGuadian])
return (
<div class={open ? "openModal modal" : "modal"}>
{open ? (
<div className="modal-inner">
<div className="modal-header flex">
{header}
<Button className={"close"} onClick={close} btnName={"X"} />
</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>이름</th>
<td>
<input type="text" value={userName} onChange={handleUserName} />
</td>
<th>생년월일</th>
<td>
<div className="flex">
<input type='date' value={brith} onChange={handleBrithday} />
</div>
</td>
</tr>
<tr>
<th>연락처</th>
<td colSpan={3}>
<input type="input" maxLength="13" value={telNum} onChange={handleTelNum} />
</td>
</tr>
<tr>
<th>대상자와의 관계</th>
<td colSpan={3}>
<input type="text" value={relationship} onChange={handelRelationship} />
</td>
</tr>
</table>
<div className="btn-wrap flex-center margin-bottom5">
<Button
className={"btn-small green-btn"}
btnName={"추가"}
onClick={() => {
test();
insertUser()
getselectMatchList();
}}
/>
</div>
<div>
<Table
className={"caregiver-user"}
head={thead3}
contents={sgMatchList}
contentKey={key3}
view={"guadianMatch"}
offset={offset}
limit={limit}
/>
</div>
<div>
<Pagination total={guadianTotal} limit={limit} page={page} setPage={setPage} />
</div>
</div>
</div>
</div>
) : null}
</div>
);
}