File name
Commit message
Commit date
2023-04-04
File name
Commit message
Commit date
2023-04-04
2023-04-04
File name
Commit message
Commit date
File name
Commit message
Commit date
import React, { useState } from "react";
import { useNavigate } from "react-router";
import { useSelector } from "react-redux";
import ContentTitle from "../../component/ContentTitle.jsx";
import SubTitle from "../../component/SubTitle.jsx";
import Modal from "../../component/Modal.jsx";
import Table from "../../component/Table.jsx";
import Button from "../../component/Button.jsx";
import Category from "../../component/Category.jsx";
import Modal_SeniorInsert from "../../component/Modal_SeniorInsert.jsx";
import { width } from "@mui/system";
import Modal_Guardian from "../../component/Modal_Guardian.jsx";
import Pagination from "../../component/Pagination.jsx";
import CommonUtil from "../../../resources/js/CommonUtil.js";
export default function UserAuthoriySelect() {
const navigate = useNavigate();
//전역 변수 저장 객체
const state = useSelector((state) => {return state});
//활성화 탭 (시스템 업무 역할별)
const [tabActiveByRoleType, setTabActiveByRoleType] = React.useState('ROLE_SENIOR');
//보호자 모달 오픈 여부
const [modalGuardianIsOpen, setModalGuardianIsOpen] = React.useState(false);
//보호자 모달 오픈
const modalGuardianOpen = () => {
setModalGuardianIsOpen(true);
};
//보호자 모달 닫기
const modalGuardianClose = () => {
setModalGuardianIsOpen(false);
};
//대상자(시니어) 등록 모달 오픈 여부
const [modalSeniorInsertIsOpen, setModalSeniorInsertIsOpen] = React.useState(false);
//대상자(시니어) 등록 모달 오픈
const modalSeniorInsertOpen = () => {
setModalSeniorInsertIsOpen(true);
};
//대상자(시니어) 등록 모달 닫기
const modalSeniorInsertClose = () => {
setModalSeniorInsertIsOpen(false);
};
//기관 계층 구조 목록
const [orgListOfHierarchy, setOrgListOfHierarchy] = React.useState([]);
//기관(관리, 시행) 계층 구조 목록 조회
const orgSelectListOfHierarchy = () => {
fetch("/org/orgSelectListOfHierarchy.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify({}),
}).then((response) => response.json()).then((data) => {
console.log("기관(관리, 시행) 계층 구조 목록 조회 : ", data);
setOrgListOfHierarchy(data);
}).catch((error) => {
console.log('orgSelectListOfHierarchy() /org/orgSelectListOfHierarchy.json error : ', error);
});
};
//검색 변수 (초기화값)
const [userSearch, setUserSearch] = React.useState({
'government_id': state.loginUser['government_id'],
'agency_id': state.loginUser['agency_id'],
'authority': null,
'searchType': null,
'searchText': null,
'currentPage': 1,
'perPage': 10,
});
//대상자(시니어) 목록 및 페이징 정보
userSearch['authority'] = 'ROLE_SENIOR';
const [senior, setSenior] = React.useState({userList: [], userListCount: 0, search: JSON.parse(JSON.stringify(userSearch))});
const seniorSearchChange = (targetKey, value) => {
let newSenior = JSON.parse(JSON.stringify(senior));
newSenior.search[targetKey] = value;
setSenior(newSenior);
}
const seniorSelectListEnter = (key) => {
if (key == 'Enter') {
seniorSelectList();
} else {
return;
}
}
//대상자(시니어) 목록 조회
const seniorSelectList = (currentPage) => {
senior.search.currentPage = CommonUtil.isEmpty(currentPage) ? 1 : currentPage;
fetch("/user/userSelectList.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify(senior.search),
}).then((response) => response.json()).then((data) => {
data.search = senior.search;
console.log("대상자(시니어) 목록 조회 : ", data);
setSenior(data);
}).catch((error) => {
console.log('seniorSelectList() /user/userSelectList.json error : ', error);
});
}
//시행기관 담당자 목록 및 페이징 정보
userSearch['authority'] = 'ROLE_AGENCY';
const [agent, setAgent] = React.useState({userList: [], userListCount: 0, search: JSON.parse(JSON.stringify(userSearch))});
const agentSearchChange = (targetKey, value) => {
let newAgent = JSON.parse(JSON.stringify(agent));
newAgent.search[targetKey] = value;
setAgent(newAgent);
}
const agentSelectListEnter = (key) => {
if (key == 'Enter') {
agentSelectList();
} else {
return;
}
}
//시행기관 담당자 목록 조회
const agentSelectList = (currentPage) => {
agent.search.currentPage = CommonUtil.isEmpty(currentPage) ? 1 : currentPage;
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);
});
}
//관리기관 관리자 목록 및 페이징 정보
userSearch['authority'] = 'ROLE_GOVERNMENT';
const [government, setGovernment] = React.useState({userList: [], userListCount: 0, search: JSON.parse(JSON.stringify(userSearch))});
const governmentSearchChange = (targetKey, value) => {
let newGovernment = JSON.parse(JSON.stringify(government));
newGovernment.search[targetKey] = value;
setGovernment(newGovernment);
}
const governmentSelectListEnter = (key) => {
if (key == 'Enter') {
governmentSelectList();
} else {
return;
}
}
//관리기관 담당자 목록 조회
const governmentSelectList = (currentPage) => {
government.search.currentPage = CommonUtil.isEmpty(currentPage) ? 1 : currentPage;
fetch("/user/userSelectList.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify(government.search),
}).then((response) => response.json()).then((data) => {
data.search = government.search;
console.log("관리기관 담당자 목록 조회 : ", data);
setGovernment(data);
}).catch((error) => {
console.log('governmentSelectList() /user/userSelectList.json error : ', error);
});
}
//시스템 관리자 목록 및 페이징 정보
userSearch['authority'] = 'ROLE_ADMIN';
const [admin, setAdmin] = React.useState({userList: [], userListCount: 0, search: JSON.parse(JSON.stringify(userSearch))});
const adminSearchChange = (targetKey, value) => {
let newAdmin = JSON.parse(JSON.stringify(admin));
newAdmin.search[targetKey] = value;
setAdmin(newAdmin);
}
const adminSelectListEnter = (key) => {
if (key == 'Enter') {
adminSelectList();
} else {
return;
}
}
//시스템 관리자 목록 조회
const adminSelectList = (currentPage) => {
admin.search.currentPage = CommonUtil.isEmpty(currentPage) ? 1 : currentPage;
fetch("/user/userSelectList.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify(admin.search),
}).then((response) => response.json()).then((data) => {
data.search = admin.search;
console.log("시스템 관리자 목록 조회 : ", data);
setAdmin(data);
}).catch((error) => {
console.log('adminSelectList() /user/userSelectList.json error : ', error);
});
}
//올잇메디 선택
const adminChange = () => {
const newUserSearch = JSON.parse(JSON.stringify(userSearch));
newUserSearch['government_id'] = null;
newUserSearch['agency_id'] = null;
setUserSearch(newUserSearch);
senior.search['government_id'] = null;
senior.search['agency_id'] = null;
seniorSelectList();
agent.search['government_id'] = null;
agent.search['agency_id'] = null;
agentSelectList();
if (state.loginUser['authority'] == 'ROLE_ADMIN' || state.loginUser['authority'] == 'ROLE_GOVERNMENT') {
government.search['government_id'] = null;
government.search['agency_id'] = null;
governmentSelectList();
}
}
//관리 기관 선택
const governmentChange = (government_id) => {
const newUserSearch = JSON.parse(JSON.stringify(userSearch));
newUserSearch['government_id'] = government_id;
newUserSearch['agency_id'] = null;
setUserSearch(newUserSearch);
senior.search['government_id'] = government_id;
senior.search['agency_id'] = null;
seniorSelectList();
agent.search['government_id'] = government_id;
agent.search['agency_id'] = null;
agentSelectList();
if (state.loginUser['authority'] == 'ROLE_ADMIN' || state.loginUser['authority'] == 'ROLE_GOVERNMENT') {
government.search['government_id'] = government_id;
government.search['agency_id'] = null;
governmentSelectList();
}
}
//시행 기관 선택
const agencyChange = (government_id, agency_id) => {
const newUserSearch = JSON.parse(JSON.stringify(userSearch));
newUserSearch['government_id'] = government_id;
newUserSearch['agency_id'] = agency_id;
setUserSearch(newUserSearch);
senior.search['government_id'] = government_id;
senior.search['agency_id'] = agency_id;
console.log('senior.search : ', senior.search);
seniorSelectList();
agent.search['government_id'] = government_id;
agent.search['agency_id'] = agency_id;
agentSelectList();
}
//사용자 등록 페이지 이동
const join = () => {
console.log('userSearch : ', userSearch);
navigate("/Join", {state: {
'government_id': userSearch['government_id'],
'agency_id': userSearch['agency_id'],
'authority': tabActiveByRoleType,
}});
}
//가입승인
const userUpdate = (user, callback) => {
user['is_accept'] = true;
fetch("/user/userUpdate.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify(user),
}).then((response) => response.json()).then((data) => {
console.log("시니어 등록 결과(건수) : ", data);
if (data > 0) {
alert("승인완료");
callback();
} else {
alert("승인에 실패하였습니다. 관리자에게 문의바랍니다.");
}
}).catch((error) => {
console.log('userUpdate() /user/userUpdate.json error : ', error);
});
}
//Mounted
React.useEffect(() => {
orgSelectListOfHierarchy();
seniorSelectList();
agentSelectList();
if (state.loginUser['authority'] == 'ROLE_ADMIN' || state.loginUser['authority'] == 'ROLE_GOVERNMENT') {
governmentSelectList();
}
if (state.loginUser['authority'] == 'ROLE_ADMIN') {
adminSelectList();
}
}, []);
return (
<main>
<Modal_Guardian open={modalGuardianIsOpen} close={modalGuardianClose}/>
<Modal_SeniorInsert
open={modalSeniorInsertIsOpen}
close={modalSeniorInsertClose}
seniorInsertCallback={() => {seniorSelectList(); modalSeniorInsertClose();}}
defaultAgencyId={userSearch['agency_id']}
defaultGovernmentId={userSearch['government_id']}
/>
<ContentTitle explanation={"사용자 관리"} />
<div className="content-wrap">
<div className="flex-align-start userauthoriylist" style={{ height: "calc(100% - 61px)" }}>
<div className="left" style={{ height: "100%", }}>
<div style={{ height: "100%" }}>
<SubTitle
explanation={"기관 리스트"}
className="margin-bottom"
/>
{/* 카테고리 디자인 필요 (a.active 클래스 필요) */}
<div style={{width: '100%', fontSize: '16px'}}>
{/* <a className={() => {return "active"}} onClick={adminChange}>올잇메디</a> */}
<a onClick={adminChange}
className={userSearch['government_id'] == null && userSearch['agency_id'] == null ? "active" : ""}>
올잇메디
</a>
<ul style={{marginLeft: '15px'}}>
{orgListOfHierarchy.map((item, idx) => { return (
<li style={{margin: '10px 0px'}} key={idx}>
<span style={{marginRight: '5px'}}>└</span>
<a onClick={() => {governmentChange(item['government_id'])}}
className={item['government_id'] == userSearch['government_id'] ? "active" : ""}>
{item['government_name']}
</a>
{item['agencyList'] != undefined && item['agencyList'] != null ?
<ul style={{marginLeft: '15px'}}>
{item['agencyList'].map((item2, idx2) => { return (
<li style={{margin: '10px 0px'}} key={idx2}>
<span style={{marginRight: '5px'}}>└</span>
<a onClick={() => {agencyChange(item['government_id'], item2['agency_id'])}}
className={item2['agency_id'] == userSearch['agency_id'] ? "active" : ""}>
{item2['agency_name']}
</a>
</li>
)})}
</ul>
: null
}
</li>
)})}
</ul>
</div>
{/* 카테고리 디자인 필요 */}
</div>
</div>
<div className="right" style={{ height: "100%", }}>
<div style={{ height: "100%" }}>
<SubTitle explanation={`사용자 리스트`} className="margin-bottom"/>
<div className="tab-container">
{/* 탭 제목 */}
<ul className="tab-menu flex-end" >
<li onClick={() => setTabActiveByRoleType('ROLE_SENIOR')} className={tabActiveByRoleType == 'ROLE_SENIOR' ? "active" : null}>대상자(어르신) ({senior.userListCount})</li>
<li onClick={() => setTabActiveByRoleType('ROLE_AGENCY')} className={tabActiveByRoleType == 'ROLE_AGENCY' ? "active" : null}>담당자 ({agent.userListCount})</li>
<li onClick={() => setTabActiveByRoleType('ROLE_GOVERNMENT')} className={tabActiveByRoleType == 'ROLE_GOVERNMENT' ? "active" : null}>기관 관리자 ({government.userListCount})</li>
<li onClick={() => setTabActiveByRoleType('ROLE_ADMIN')} className={tabActiveByRoleType == 'ROLE_ADMIN' ? "active" : null}>시스템 관리자 ({admin.userListCount})</li>
</ul>
{/* 탭 내용 */}
<div className="content-wrap userlist">
{{
/* 대상자(시니어) (시작) */
ROLE_SENIOR: (
<ul className="tab-content">
<div>
<div className="search-management flex-start margin-bottom2">
<select id="searchType1" style={{maxWidth: 'fit-content'}} onChange={(e) => {seniorSearchChange("searchType", e.target.value)}}>
<option value="" selected={senior.search.searchText == ""}>전체</option>
<option value="user_name" selected={senior.search.searchText == "user_name"}>이름</option>
<option value="user_phonenumber" selected={senior.search.searchText == "user_phonenumber"}>연락처</option>
<option value="user_id" selected={senior.search.searchText == "user_id"}>아이디</option>
</select>
<input type="text" id="searchText1"
value={senior.search.searchText}
onChange={(e) => {seniorSearchChange("searchText", e.target.value)}}
onKeyUp={(e) => {seniorSelectListEnter(e.key)}}
/>
<button className={"btn-small gray-btn"} onClick={() => {seniorSelectList()}}>검색</button>
</div>
<div className="btn-wrap flex-end margin-bottom">
<button className={"btn-small gray-btn"} onClick={() => modalSeniorInsertOpen()}>등록</button>
</div>
<table className={"protector-user"}>
<thead>
<tr>
<th>No</th>
<th>소속기관명</th>
<th>이름</th>
<th>생년월일</th>
<th>성별</th>
<th>연락처</th>
<th>주소</th>
</tr>
</thead>
<tbody>
{senior.userList.map((item, idx) => { return (
<tr key={idx} onClick={() => {navigate("/SeniorSelectOne", {state: {'senior_id': item['user_id']}})}}>
<td>{senior.userListCount - idx - (senior.search.currentPage - 1) * senior.search.perPage}</td>
<td>{item['agency_name']}</td>
<td>{item['user_name']}</td>
<td>{item['user_birth']}</td>
<td>{item['user_gender']}</td>
<td>{item['user_phonenumber']}</td>
<td>{item['user_address']}</td>
</tr>
)})}
{senior.userList == null || senior.userList.length == 0 ?
<tr>
<td colSpan={7}>조회된 데이터가 없습니다</td>
</tr>
: null}
</tbody>
</table>
<Pagination
currentPage={senior.search.currentPage}
perPage={senior.search.perPage}
totalCount={senior.userListCount}
maxRange={5}
click={seniorSelectList}
/>
</div>
</ul>
),
/* 대상자(시니어) (종료) */
/* 시행기관(복지사, 간호사) 사용자 (시작) */
ROLE_AGENCY: (
<ul className="tab-content">
<div>
<div className="search-management flex-start margin-bottom2">
<select id="searchType2" style={{maxWidth: 'fit-content'}} onChange={(e) => {agentSearchChange("searchType", e.target.value)}}>
<option value="" selected={agent.search.searchText == ""}>전체</option>
<option value="user_name" selected={agent.search.searchText == "user_name"}>이름</option>
<option value="user_phonenumber" selected={agent.search.searchText == "user_phonenumber"}>연락처</option>
<option value="user_id" selected={agent.search.searchText == "user_id"}>아이디</option>
</select>
<input id="searchText2" type="text"
value={agent.search.searchText}
onChange={(e) => {agentSearchChange("searchText", e.target.value)}}
onKeyUp={(e) => {agentSelectListEnter(e.key)}}
/>
<button className={"btn-small gray-btn"} onClick={() => {agentSelectList()}}>검색</button>
</div>
<div className="btn-wrap flex-end margin-bottom">
<button className={"btn-small gray-btn"} onClick={join}>등록</button>
</div>
<table className={"senior-user"}>
<thead>
<tr>
<th>No</th>
<th>관리기관명</th>
<th>소속기관명</th>
<th>이름</th>
<th>연락처</th>
<th>이메일</th>
<th>가입승인</th>
<th>상세보기</th>
</tr>
</thead>
<tbody>
{agent.userList.map((item, idx) => { return (
<tr key={idx}>
<td>{agent.userListCount - idx - (agent.search.currentPage - 1) * agent.search.perPage}</td>
<td>{item['government_name']}</td>
<td>{item['agency_name']}</td>
<td>{item['user_name']}</td>
<td>{item['user_phonenumber']}</td>
<td>{item['user_email']}</td>
<td>
{item['is_accept'] ? "승인완료" :
<button className={"btn-small red-btn"} onClick={() => {userUpdate(item, agentSelectList)}}>가입승인</button>
}
</td>
<td>
<button className={"btn-small lightgray-btn"} onClick={() => modalGuardianOpen()}>상세 페이지 이동</button>
</td>
</tr>
)})}
{agent.userList == null || agent.userList.length == 0 ?
<tr>
<td colSpan={8}>조회된 데이터가 없습니다</td>
</tr>
: null}
</tbody>
</table>
<Pagination
currentPage={agent.search.currentPage}
perPage={agent.search.perPage}
totalCount={agent.userListCount}
maxRange={5}
click={agentSelectList}
/>
</div>
</ul>
),
/* 시행기관(복지사, 간호사) 사용자 (종료) */
/* 관리기관(지자체, 병원) 사용자 (시작) */
ROLE_GOVERNMENT: (
<ul className="tab-content">
<div>
<div className="search-management flex-start margin-bottom2">
<select style={{maxWidth: 'fit-content'}} onChange={(e) => {governmentSearchChange("searchType", e.target.value)}}>
<option value="" selected={government.search.searchText == ""}>전체</option>
<option value="user_name" selected={government.search.searchText == "user_name"}>이름</option>
<option value="user_phonenumber" selected={government.search.searchText == "user_phonenumber"}>연락처</option>
<option value="user_id" selected={government.search.searchText == "user_id"}>아이디</option>
</select>
<input type="text"
value={government.search.searchText}
onChange={(e) => {governmentSearchChange("searchText", e.target.value)}}
onKeyUp={(e) => {governmentSelectListEnter(e.key)}}
/>
<button className={"btn-small gray-btn"} onClick={() => {governmentSelectList()}}>검색</button>
</div>
<div className="btn-wrap flex-end margin-bottom">
<button className={"btn-small gray-btn"} onClick={join}>등록</button>
</div>
<table className={"senior-user"}>
<thead>
<tr>
<th>No</th>
<th>소속기관명</th>
<th>이름</th>
<th>연락처</th>
<th>이메일</th>
<th>가입승인</th>
<th>관리</th>
</tr>
</thead>
<tbody>
{government.userList.map((item, idx) => { return (
<tr key={idx}>
<td>{government.userListCount - idx - (government.search.currentPage - 1) * government.search.perPage}</td>
<td>{item['government_name']}</td>
<td>{item['user_name']}</td>
<td>{item['user_phonenumber']}</td>
<td>{item['user_email']}</td>
<td>
{item['is_accept'] ? "승인완료" :
<button className={"btn-small red-btn"} onClick={() => {userUpdate(item, governmentSelectList)}}>가입승인</button>
}
</td>
<td>
<button className={"btn-small lightgray-btn"} onClick={() => modalGuardianOpen()}>정보 수정</button>
</td>
</tr>
)})}
{government.userList == null || government.userList.length == 0 ?
<tr>
<td colSpan={7}>조회된 데이터가 없습니다</td>
</tr>
: null}
</tbody>
</table>
</div>
</ul>
),
/* 관리기관(지자체, 병원) 사용자 (종료) */
/* 시스템 관리자 (시작) */
ROLE_ADMIN: (
<ul className="tab-content">
<div>
<div className="search-management flex-start margin-bottom2">
<select style={{maxWidth: 'fit-content'}} onChange={(e) => {adminSearchChange("searchType", e.target.value)}}>
<option value="" selected={admin.search.searchText == ""}>전체</option>
<option value="user_name" selected={admin.search.searchText == "user_name"}>이름</option>
<option value="user_phonenumber" selected={admin.search.searchText == "user_phonenumber"}>연락처</option>
<option value="user_id" selected={admin.search.searchText == "user_id"}>아이디</option>
</select>
<input type="text"
value={admin.search.searchText}
onChange={(e) => {adminSearchChange("searchText", e.target.value)}}
onKeyUp={(e) => {adminSelectListEnter(e.key)}}
/>
<button className={"btn-small gray-btn"} onClick={() => {adminSelectList()}}>검색</button>
</div>
<div className="btn-wrap flex-end margin-bottom">
<button className={"btn-small gray-btn"} onClick={join}>등록</button>
</div>
<table className={"senior-user"}>
<thead>
<tr>
<th>No</th>
<th>이름</th>
<th>연락처</th>
<th>이메일</th>
<th>가입승인</th>
<th>관리</th>
</tr>
</thead>
<tbody>
{admin.userList.map((item, idx) => { return (
<tr key={idx}>
<td>{admin.userListCount - idx - (admin.search.currentPage - 1) * admin.search.perPage}</td>
<td>{item['user_name']}</td>
<td>{item['user_phonenumber']}</td>
<td>{item['user_email']}</td>
<td>
{item['is_accept'] ? "승인완료" :
<button className={"btn-small red-btn"} onClick={() => {userUpdate(item, adminSelectList)}}>가입승인</button>
}
</td>
<td>
<button className={"btn-small lightgray-btn"} onClick={() => modalGuardianOpen()}>정보 수정</button>
</td>
</tr>
)})}
{admin.userList == null || admin.userList.length == 0 ?
<tr>
<td colSpan={6}>조회된 데이터가 없습니다</td>
</tr>
: null}
</tbody>
</table>
</div>
</ul>
)
/* 시스템 관리자 (종료) */
}[tabActiveByRoleType]}
</div>
</div>
</div>
</div>
</div>
</div>
</main>
);
}