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 ContentTitle from "../../component/ContentTitle.jsx";
import SubTitle from "../../component/SubTitle.jsx";
import Button from "../../component/Button.jsx";
export default function AuthorityManagement() {
const [checkArr, setCheckArr] = React.useState([]); //check 배열
const [menuCheckArr, setMenuCheckArr] = React.useState([]); //menu check 배열
const authorityList = ["보호자", "보호사", "병원", "지자체", "관리자"];
const menuList = [
{
menu: {
대상자관리: ["대상자관리"],
생활복지관리: ["복약관리", "댁내온도관리", "복약통계"],
방문전화관리: ["방문/전화 관리"],
장비관리: ["장비관리"],
설정: ["내정보 관리", "사용자 관리", "권한 관리"],
},
},
];
const onCheckedElement = (checked, title) => {
if (checked) {
setMenuCheckArr([...menuCheckArr]);
setCheckArr([...checkArr, title]);
} else if (!checked) {
setCheckArr(checkArr.filter((el) => el !== title));
}
};
return (
<main>
<div className="content-wrap">
<ContentTitle contentTitle={"관리자 권한관리"} />
<div className="board-wrap">
<SubTitle className="margin-bottom" explanation={"메뉴 권한을 설정할 수 있습니다."} />
<div className="board-wrap">
{/* <table className="authority-table-pc">
<thead>
<tr>
<th colSpan={2} style={{ width: "30%" }}>
메뉴 목록
</th>
<th style={{ width: "70%" }}>운영자 목록</th>
</tr>
<tr>
<th>대메뉴</th>
<th>소메뉴</th>
<th style={{ backgroundColor: "transparent" }}>
<div className="flex">
{authorityList.map((i) => (
<div className="flex-start">
<input
className="flex10"
type="checkbox"
value={i}
onChange={(e) => {
onCheckedElement(
e.target.checked,
e.target.value
);
}}
/>
<label className="flex90">{i}</label>
</div>
))}
</div>
</th>
</tr>
</thead>
<tbody>
{menuList.map((i, idx) =>
Object.entries(i.menu).map(([key, value]) =>
value.map((item, index) => (
<tr key={idx}>
{index === 0 && (
<td rowSpan={value.length}>
<div className="flex-center">
<input
type="checkbox"
id="largeMenu"
className="flex10"
/>
<label htmlFor="largeMenu" className="flex60">
{key}
</label>
</div>
</td>
)}
<td>
<div className="flex-center">
<input
type="checkbox"
id="smallMenu"
className="flex10"
/>
<label htmlFor="smallMenu" className="flex60">
{item}
</label>
</div>
</td>
<td>
{checkArr.map((managerList, managerIdx) => (
<button style={{marginRight:"1rem"}} key={managerIdx}>{managerList}</button>
))}
</td>
</tr>
))
)
)}
</tbody>
</table> */}
<table className="authority-table">
<thead>
<tr>
<th rowSpan="2">구분</th>
<th rowSpan="2">사용자 관리</th>
<th colSpan="3">생활 복지 관리</th>
<th rowSpan="2">방문/전화 관리</th>
<th rowSpan="2">장비관리</th>
<th rowSpan="2">고객지원센터</th>
<th rowSpan="2">Q&A</th>
</tr>
<tr>
<th>복약관리</th>
<th>댁내온도관리</th>
<th>복약통계</th>
</tr>
</thead>
<tbody>
<tr>
<td>시행기관(병원, 복지관 등)</td>
<td><input type="checkbox" checked="checked"/></td>
<td><input type="checkbox" checked="checked"/></td>
<td><input type="checkbox" checked="checked"/></td>
<td><input type="checkbox" checked="checked"/></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" checked="checked"/></td>
<td><input type="checkbox" checked="checked"/></td>
<td><input type="checkbox" checked="checked"/></td>
</tr>
<tr>
<td>보호사(간호사, 복지사 등)</td>
<td><input type="checkbox" checked="checked"/></td>
<td><input type="checkbox" checked="checked"/></td>
<td><input type="checkbox" checked="checked"/></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" checked="checked"/></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td>보호자(대상자 가족)</td>
<td><input type="checkbox" checked="checked"/></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" checked="checked"/></td>
</tr>
<tr>
<td>대상자</td>
<td><input type="checkbox" checked="checked"/></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" checked="checked"/></td>
</tr>
</tbody>
</table>
<div className="btn-wrap flex-end">
<Button className={"btn-small gray-btn"} btnName={"저장"} />
</div>
<SubTitle className="margin-bottom" explanation={"각 메뉴에 대한 설명"} />
<table className="explain-table">
<thead>
<tr>
<th rowSpan="2">메뉴</th>
<th rowSpan="2">소메뉴</th>
<th rowSpan="2">상세설명</th>
</tr>
</thead>
<tbody>
<tr>
<td>사용자 관리</td>
<td>-</td>
<td>사용자(노인, 보호자 등)를 등록하고 삭제할 수 있다.</td>
</tr>
<tr>
<td rowSpan="3">생활 복지 관리</td>
<td>복약관리</td>
<td>사용자(노인)의 아침, 점심, 저녁 복약여부를 확인하고 관리할 수 있다.</td>
</tr>
<tr>
<td>댁내온도관리</td>
<td>사용자(노인)의 아침, 점심, 저녁 댁내온도를 확인하고 관리할 수 있다.</td>
</tr>
<tr>
<td>복약통계</td>
<td>시행기관에 등록되어 있는 사용자(노인)의 복약 통계 자료를 볼 수 있다.</td>
</tr>
<tr>
<td>방문/전화 관리</td>
<td>-</td>
<td>시행기관의 복지사가 사용자(노인)을 방문한 내역을 확인하고 관리할 수 있다.</td>
</tr>
<tr>
<td>장비 관리</td>
<td>-</td>
<td>시행기관에서 관리하고 있는 장비(전체, 미사용, 사용)현황을 관리하고 사용자를 등록할 수 있다.</td>
</tr>
<tr>
<td>고객지원센터</td>
<td>-</td>
<td>장비업체에 교환/반납 요청을 할 수 있다.</td>
</tr>
<tr>
<td>Q&A</td>
<td>-</td>
<td>사용자(노인, 보호자 등)질문을 등록하고 답변할 수 있다.</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</main>
);
}