File name
Commit message
Commit date
2023-05-06
2023-04-18
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 SubTitle from "../../component/SubTitle.jsx";
import Pagination from "../../component/Pagination.jsx";
import House from "../../../resources/files/icon/house.png";
import Arrow from "../../../resources/files/icon/arrow.png";
import Modal_SeniorInsert from "../../component/Modal_SeniorInsert.jsx";
import CommonUtil from "../../../resources/js/CommonUtil.js";
export default function AgencySeniorSelect() {
const navigate = useNavigate();
const location = useLocation();
//대상자(시니어) 등록 모달 오픈 여부
const [modalSeniorInsertIsOpen, setModalSeniorInsertIsOpen] = React.useState(false);
//대상자(시니어) 등록 모달 오픈
const modalSeniorInsertOpen = () => {
setModalSeniorInsertIsOpen(true);
};
//대상자(시니어) 등록 모달 닫기
const modalSeniorInsertClose = () => {
setModalSeniorInsertIsOpen(false);
};
//전역 변수 저장 객체
const state = useSelector((state) => { return state });
//시행기관 담당자 목록
const [agent, setAgent] = React.useState({
userList: [], userListCount: 0, search: {
'government_id': state.loginUser['government_id'],
'agency_id': state.loginUser['agency_id'],
'authority': 'ROLE_AGENCY',
}
});
//시행기관 담당자 목록 조회
const agentSelectList = () => {
fetch("/user/userSelectList.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify(agent.search),
}).then((response) => response.json()).then((data) => {
data.search = agent.search;
console.log("시행기관 담당자 목록 조회 : ", data);
setAgent(data);
}).catch((error) => {
console.log('agentSelectList() /user/userSelectList.json error : ', error);
});
}
//검색 변수 (초기화값)
const [search, setSearch] = React.useState({
'searchType': null,
'searchText': null,
'currentPage': 1,
'perPage': 10,
});
const searchingEnter = (key) => {
if (key == 'Enter') {
searching();
} else {
return;
}
}
const searching = () => {
mySenior.search['searchType'] = search['searchType'];
mySenior.search['searchText'] = search['searchText'];
mySenior.search['agent_id'] = state.loginUser['user_id'];
setMySenior({ ...mySenior });
agencySenior.search['searchType'] = search['searchType'];
agencySenior.search['searchText'] = search['searchText'];
agencySenior.search['agency_id'] = state.loginUser['agency_id'];
setAgencySenior({ ...agencySenior });
mySeniorSelectList(1);
agencySeniorSelectList(1);
}
//보호사(간호사)의 돌봄 대상자(시니어)
const [mySenior, setMySenior] = React.useState({ seniorList: [], seniorListCount: 0, search: JSON.parse(JSON.stringify(search)) });
//보호사(간호사)의 돌봄 대상자(시니어) 목록 조회
const mySeniorSelectList = (currentPage) => {
mySenior.search.currentPage = CommonUtil.isEmpty(currentPage) ? 1 : currentPage;
fetch("/user/seniorSelectList.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify(mySenior.search),
}).then((response) => response.json()).then((data) => {
data.search = mySenior.search;
console.log("보호사(간호사)의 돌봄 대상자(시니어) 목록 조회 : ", data);
setMySenior(data);
}).catch((error) => {
console.log('seniorSelectList() /user/seniorSelectList.json error : ', error);
});
}
//시행기관의 대상자(시니어)
const [agencySenior, setAgencySenior] = React.useState({ seniorList: [], seniorListCount: 0, search: JSON.parse(JSON.stringify(search)) });
//시행기관의 대상자(시니어) 목록 조회
const agencySeniorSelectList = (currentPage) => {
agencySenior.search.currentPage = CommonUtil.isEmpty(currentPage) ? 1 : currentPage;
fetch("/user/seniorSelectList.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify(agencySenior.search),
}).then((response) => response.json()).then((data) => {
data.search = agencySenior.search;
console.log("시행기관의 대상자(시니어) 목록 조회 : ", data);
setAgencySenior(data);
}).catch((error) => {
console.log('agencySeniorSelectList() /user/seniorSelectList.json error : ', error);
});
}
//보호사 선택 -> 시행기관의 대상자(시니어) 목록 조회
const agentChange = (userId) => {
agencySenior.search['agent_id'] = userId;
setAgencySenior({ ...agencySenior });
agencySeniorSelectList(1);
}
//선택한 보호사의 이름
const getSearchAgentName = () => {
for (let i = 0; i < agent.userList.length; i++) {
if (agent.userList[i]['user_id'] == agencySenior.search['agent_id']) {
return agent.userList[i]['user_name'];
}
}
return '보호사';
}
//보호사의 대상자 등록
const agentSeniorInsert = (senior, agentId) => {
if (confirm(`${senior['user_name']}님을 돌봄 대상자로 추가하시겠습니까?`) == false) {
return;
} else {
senior['agent_id'] = state.loginUser['user_id'];
}
fetch("/user/agentSeniorInsert.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify(senior),
}).then((response) => response.json()).then((data) => {
if (data > 0) {
setTabIndex(0);
search.searchText = '';
search.searchType = '';
searching();
alert("추가완료");
} else {
alert("추가에 실패하였습니다. 관리자에게 문의바랍니다.");
}
}).catch((error) => {
console.log('agencySeniorSelectList() /user/seniorSelectList.json error : ', error);
});
}
React.useEffect(() => {
agentSelectList();
searching();
}, []);
//현재 탭 Index
const [tabIndex, setTabIndex] = React.useState(0);
//탭 초기화
const tab = [{
title: `내 돌봄 대상자 (${mySenior.seniorListCount})`,
content: (
<div>
<div className="flex equip-tab">
<SubTitle explanation={"접속하신 보호사(간호사)분의 돌봄 대상자 목록입니다."} />
<div className="btn-wrap flex-end margin-bottom ">
<button className={"btn-small gray-btn"} onClick={modalSeniorInsertOpen}>신규등록</button>
</div>
</div>
<table className={"protector-user"}>
<thead>
<tr>
<th>No</th>
<th>소속기관명</th>
<th>이름</th>
<th>생년월일</th>
<th>성별</th>
<th>연락처</th>
<th>보호자</th>
<th>대상자관리</th>
</tr>
</thead>
<tbody>
{mySenior.seniorList.map((item, idx) => {
return (
<tr key={idx}>
<td data-label="No">{mySenior.seniorListCount - idx - (mySenior.search.currentPage - 1) * mySenior.search.perPage}</td>
<td data-label="소속기관명">{item['agency_name']}</td>
<td data-label="이름">{item['user_name']}</td>
<td data-label="생년월일">{item['user_birth']}</td>
<td data-label="성별">{item['user_gender']}</td>
<td data-label="연락처">{item['user_phonenumber']}</td>
<td data-label="보호자">
{CommonUtil.isEmpty(item['guardian_user_names'])
? '없음'
: item['guardian_user_names']
}
</td>
<td data-label="대상자관리">
<button className="btn-small gray-btn" onClick={() => {
navigate("/SeniorSelectOne", {
state: {
'senior_id': item['senior_id'],
'agency_id': item['agency_id'],
'government_id': item['government_id']
}
})
}}>대상자관리</button>
</td>
</tr>
)
})}
{CommonUtil.isEmpty(mySenior.seniorList) ?
<tr>
<td colSpan={8}>조회된 데이터가 없습니다</td>
</tr>
: null}
</tbody>
</table>
<Pagination
currentPage={mySenior.search.currentPage}
perPage={mySenior.search.perPage}
totalCount={mySenior.seniorListCount}
maxRange={5}
click={mySeniorSelectList}
/>
</div>
)
},
// {
// title: `우리기관 돌봄 대상자 (${agencySenior.seniorListCount})`,
// content: (
// <div>
// <div className="flex-align-start userauthoriylist gap5">
// <div className="left">
// <SubTitle explanation={"우리기관 보호사"}/>
// <div style={{fontSize: '16px', marginTop: '0px'}} className="category">
// <a className="active" onClick={() => {agentChange(null)}}>
// {state.loginUser['government_name']}
// </a>
// <ul style={{marginLeft: '15px'}}>
// <li style={{margin: '10px 0px'}}>
// <span style={{marginRight: '5px'}}><img src={House} alt="" /></span>
// <a className="active" onClick={() => {agentChange(null)}}>
// {state.loginUser['agency_name']}
// </a>
// <ul style={{marginLeft: '15px'}}>
// {agent.userList.map((user, idx) => { return (
// <li style={{margin: '10px 0px'}} key={idx}>
// <span style={{marginRight: '5px'}}><img src={Arrow} alt="" /></span>
// <a className={user['user_id'] == agencySenior.search['agent_id'] ? "active" : ""}
// onClick={() => {agentChange(user['user_id'])}}>
// {user['user_name']}
// {state.loginUser['user_id'] == user['user_id']
// ? '(나)'
// : `(${user['user_id']})`
// }
// </a>
// </li>
// )})}
// <li style={{margin: '10px 0px'}}>
// <span style={{marginRight: '5px'}}><img src={Arrow} alt="" /></span>
// <a className={'IS_NULL' == agencySenior.search['agent_id'] ? "active" : ""}
// onClick={() => {agentChange('IS_NULL')}}>
// 미배정
// </a>
// </li>
// </ul>
// </li>
// </ul>
// </div>
// </div>
// <div className="right">
// <div className="flex equip-tab">
// <SubTitle explanation={CommonUtil.isEmpty(agencySenior.search['agent_id'])
// ? '현재 기관에서 관리중인 돌봄 대상자 목록입니다.'
// : (agencySenior.search['agent_id'] == 'IS_NULL'
// ? '담당자가 배정되지 않은 돌봄 대상자 목록입니다.'
// : `${getSearchAgentName()}님의 돌봄 대상자 목록입니다.`
// )
// } />
// <div className="btn-wrap flex-end margin-bottom ">
// {/* <button className={"btn-small gray-btn"} onClick={() => {modalEquipmentOpen()}}>등록</button> */}
// </div>
// </div>
// <table className={"protector-user"}>
// <thead>
// <tr>
// <th>No</th>
// <th>소속기관명</th>
// <th>이름</th>
// <th>생년월일</th>
// <th>성별</th>
// <th>연락처</th>
// <th>보호자</th>
// <th>보호사</th>
// <th>대상자관리</th>
// </tr>
// </thead>
// <tbody>
// {agencySenior.seniorList.map((item, idx) => { return (
// <tr key={idx}>
// <td data-label="No">{agencySenior.seniorListCount - idx - (agencySenior.search.currentPage - 1) * agencySenior.search.perPage}</td>
// <td data-label="소속기관명">{item['agency_name']}</td>
// <td data-label="이름">{item['user_name']}</td>
// <td data-label="생년월일">{item['user_birth']}</td>
// <td data-label="성별">{item['user_gender']}</td>
// <td data-label="연락처">{item['user_phonenumber']}</td>
// <td data-label="보호자">
// {CommonUtil.isEmpty(item['guardian_user_names'])
// ? '없음'
// : item['guardian_user_names']
// }
// </td>
// <td data-label="보호사">
// {CommonUtil.isEmpty(item['agent_user_names'])
// ? <button className="btn-small gray-btn" onClick={() => agentSeniorInsert(item)}>내 돌봄 대상자로 추가</button>
// : item['agent_user_names']
// }
// </td>
// <td data-label="대상자관리">
// <button className="btn-small gray-btn" onClick={() => {
// navigate("/SeniorSelectOne", {state: {
// 'senior_id': item['senior_id'],
// 'agency_id': item['agency_id'],
// 'government_id': item['government_id']
// }})
// }}>대상자관리</button>
// </td>
// </tr>
// )})}
// {CommonUtil.isEmpty(agencySenior.seniorList) ?
// <tr>
// <td colSpan={9}>조회된 데이터가 없습니다</td>
// </tr>
// : null}
// </tbody>
// </table>
// <Pagination
// currentPage={agencySenior.search.currentPage}
// perPage={agencySenior.search.perPage}
// totalCount={agencySenior.seniorListCount}
// maxRange={5}
// click={agencySeniorSelectList}
// />
// </div>
// </div>
// </div>
// )
// }
];
return (
<main>
<Modal_SeniorInsert
open={modalSeniorInsertIsOpen}
close={modalSeniorInsertClose}
seniorInsertCallback={() => {
search.searchText = '';
search.searchType = '';
searching();
modalSeniorInsertClose();
}}
defaultAgentId={state.loginUser['user_id']}
defaultAgencyId={state.loginUser['agency_id']}
defaultGovernmentId={state.loginUser['government_id']}
/>
<div className="tab-container">
<ul className="tab-menu flex-start">
{tab.map((item, idx) => {
return (
<li onClick={() => setTabIndex(idx)} className={idx == tabIndex ? 'active' : null}>
{item.title}
</li>
)
})}
</ul>
<div className="content-wrap">
<div className="search-management flex-start margin-bottom2">
<select style={{ maxWidth: '150px' }}
onChange={(e) => { search.searchType = e.target.value; setSearch({ ...search }); }}>
<option value="" selected={CommonUtil.isEmpty(search.searchType)}>전체</option>
<option value="user_name" selected={search.searchType == 'user_name'}>이름</option>
<option value="user_id" selected={search.searchType == 'user_id'}>아이디</option>
<option value="user_phonenumber" selected={search.searchType == 'user_phonenumber'}>연락처</option>
</select>
<input type="text" className="senior-search" value={search.searchText}
onChange={(e) => { search.searchText = e.target.value; setSearch({ ...search }); }}
onKeyUp={(e) => searchingEnter(e.key)} />
<button className="btn-small gray-btn" onClick={searching}>검색</button>
</div>
<ul className="tab-content">
<li>
{tab[tabIndex].content}
</li>
</ul>
</div>
</div>
</main>
);
}