File name
Commit message
Commit date
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">
<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>
<div className="btn-wrap flex-end">
<Button className={"btn-small green-btn"} btnName={"저장"} />
</div>
</div>
</div>
</div>
</main>
);
}