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 from "../../component/Modal.jsx";
import Modal_SeniorInsert from "../../component/Modal_SeniorInsert.jsx";
import CommonUtil from "../../../resources/js/CommonUtil.js";
export default function AgencyAdminSeniorSelect() {
const navigate = useNavigate();
const location = useLocation();
const [modalOpen, setModalOpen] = React.useState(false);
const openModal = () => {
if (CheckList.length < 0) {
alert("대상을 선택해 주세요.");
return;
}
setModalOpen(true);
};
const closeModal = () => {
setModalOpen(false);
};
//대상자(시니어) 등록 모달 오픈 여부
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,
'user_use': null,
'currentPage': 1,
'perPage': 10,
});
const searchingEnter = (key) => {
if (key == 'Enter') {
searching();
} else {
return;
}
}
const searching = () => {
agencySenior.search['searchType'] = search['searchType'];
agencySenior.search['searchText'] = search['searchText'];
agencySenior.search['agency_id'] = state.loginUser['agency_id'];
setAgencySenior({ ...agencySenior });
agencyDeleteSenior.search['searchType'] = search['searchType'];
agencyDeleteSenior.search['searchText'] = search['searchText'];
agencyDeleteSenior.search['agency_id'] = state.loginUser['agency_id'];
setAgencyDeleteSenior({ ...agencyDeleteSenior });
agencySeniorSelectList(1);
agencyDeleteSeniorSelectList(1);
}
//시행기관의 대상자(시니어)
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;
agencySenior.search.user_use = true;
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 [CheckList, setCheckList] = React.useState([]);
const [IdList, setIdList] = React.useState([]);
React.useEffect(() => {
let ids = []
agencySenior.seniorList.map((item, i) => {
ids[i] = item['user_id']
})
setIdList(ids)
}, [agencySenior.seniorList,])
const onChangeAll = (e) => {
setCheckList(e.target.checked ? IdList : [])
}
const onChangeEach = (e, id) => {
console.log('checkList : ', CheckList);
if (e.target.checked) {
setCheckList([...CheckList, id]);
} else {
setCheckList(CheckList.filter((checkedId) => checkedId !== id));
}
}
// 시니어 - 담당자 매칭 시도
const [workerId, setWorkerId] = React.useState("");
// 시니어 - 담당자 매칭
const MatchSeniorAgency = () => {
if (workerId == '') {
alert("보호사를 선택해 주세요.");
return;
}
var insertBtn = confirm("등록하시겠습니까?");
if (insertBtn) {
for (let i = 0; i < CheckList.length; i++) {
agentSeniorInsert(CheckList[i]);
}
} else {
return;
}
};
// 보호사 배정
const agentSeniorInsert = (seniorId) => {
fetch("/user/agentSeniorInsert.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify({
agent_id: workerId,
senior_id: seniorId,
agent_match_insert_user_id: state.loginUser['user_id']
}),
}).then((response) => response.json()).then((data) => {
closeModal();
agentSelectList();
searching();
}).catch((error) => {
console.log('MatchSeniorAgency() /user/agentSeniorInsert.json error : ', error);
});
}
//시행기관의 삭제 대상자(시니어)
const [agencyDeleteSenior, setAgencyDeleteSenior] = React.useState({ seniorList: [], seniorListCount: 0, search: JSON.parse(JSON.stringify(search)) });
//시행기관의 삭제 대상자(시니어) 목록 조회
const agencyDeleteSeniorSelectList = (currentPage) => {
agencyDeleteSenior.search.currentPage = CommonUtil.isEmpty(currentPage) ? 1 : currentPage;
agencyDeleteSenior.search.user_use = false;
console.log("agencyDeleteSenior.search : ", agencyDeleteSenior.search)
fetch("/user/seniorSelectList.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify(agencyDeleteSenior.search),
}).then((response) => response.json()).then((data) => {
data.search = agencyDeleteSenior.search;
console.log("시행기관의 삭제 대상자(시니어) 목록 조회 : ", data);
setAgencyDeleteSenior(data);
}).catch((error) => {
console.log('agencyDeleteSeniorSelectList() /user/seniorSelectList.json error : ', error);
});
}
React.useEffect(() => {
agentSelectList();
searching();
}, []);
//현재 탭 Index
const [tabIndex, setTabIndex] = React.useState(0);
//탭 초기화
const tab = [{
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={modalSeniorInsertOpen}>신규등록</button>
<button className={"btn-small gray-btn"} onClick={() => { openModal() }}>보호사 배정하기</button>
</div>
</div>
<table className={"protector-user"}>
<thead>
<tr>
<th>
<input type="checkbox" name="checkAll" id="checkAll" onChange={onChangeAll} checked={CheckList.length === IdList.length} />
</th>
<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="checkbox">
<input type="checkbox" name="checkSenior" id={"check" + idx} onChange={(e) =>
onChangeEach(e, item['user_id'])} checked={CheckList.includes(item['user_id'])} />
</td>
<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="보호사">
{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>
)
}, {
title: `우리기관 삭제된 돌봄 대상자 (${agencyDeleteSenior.seniorListCount})`,
content: (
<div>
<div className="flex equip-tab">
<SubTitle explanation={"삭제된 돌봄 대상자 목록입니다."} />
</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>
{agencyDeleteSenior.seniorList.map((item, idx) => {
return (
<tr key={idx}>
<td data-label="No">{agencyDeleteSenior.seniorListCount - idx - (agencyDeleteSenior.search.currentPage - 1) * agencyDeleteSenior.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(agencyDeleteSenior.seniorList) ?
<tr>
<td colSpan={8}>조회된 데이터가 없습니다</td>
</tr>
: null}
</tbody>
</table>
<Pagination
currentPage={agencySenior.search.currentPage}
perPage={agencySenior.search.perPage}
totalCount={agencySenior.seniorListCount}
maxRange={5}
click={agencySeniorSelectList}
/>
</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>
<Modal open={modalOpen} close={closeModal} header="보호사 배정하기">
<div className="modal-visit board-wrap">
<table className="margin-bottom">
<tbody>
<tr>
<th>담당 보호사</th>
<td>
<select onChange={(e) => {
console.log('e.target.value : ', e.target.value);
setWorkerId(e.target.value);
}}>
<option value="">담당 보호사를 선택해주세요.</option>
{agent.userList.map((user, idx) => {
return (
<option key={idx} value={user['user_id']}>{user['user_name']}</option>
)
})}
</select>
</td>
</tr>
</tbody>
</table>
<div className="flex-center">
<button className="btn-small gray-btn" onClick={() => {
MatchSeniorAgency()
}}>등록</button>
</div>
</div>
</Modal>
<Modal_SeniorInsert
open={modalSeniorInsertIsOpen}
close={modalSeniorInsertClose}
seniorInsertCallback={() => {
search.searchText = '';
search.searchType = '';
searching();
modalSeniorInsertClose();
}}
defaultAgentId=''
defaultAgencyId={state.loginUser['agency_id']}
defaultGovernmentId={state.loginUser['government_id']}
/>
</main>
);
}