File name
Commit message
Commit date
File name
Commit message
Commit date
import React from "react";
import Button from "./Button.jsx";
import Modal_Matching from "./Modal_Matching.jsx";
import Modal_Guadian from "./Modal_Guadian.jsx";
import { useNavigate } from "react-router";
import { Link } from 'react-router-dom';
// import styled from "styled-components";
export default function Table({ head, contents, contentKey, onClick, className, view, offset, limit }) {
const navigate = useNavigate();
// 모달 title에 대상자 명 출력을 위함
const [useName, setUseUserName] = React.useState("");
// 매칭을 위해 대상자 ID 값 전달을 위함
const [useseniorId, setUseSeniorId] = React.useState("");
const [modalOpen, setModalOpen] = React.useState(false);
const openModal = () => {
setModalOpen(true);
};
const [modalOpen2, setModalOpen2] = React.useState(false);
const openModal2 = () => {
setModalOpen2(true);
};
const closeModal = () => {
setModalOpen(false);
};
const closeModal2 = () => {
setModalOpen2(false);
};
const buttonPrint = (name, id) => {
if (view == 'mySenior') {
return (
<td>
<Button
className={"btn-small gray-btn"}
btnName={"보기"}
onClick={() =>{
setUseUserName(name);
setUseSeniorId(id);
openModal();
}}
/>
</td>)
}
else if (view == 'allSenior') {
return (
<>
<td>
<Button
className={"btn-small gray-btn"}
btnName={"선택"}
onClick={()=>{setUseSeniorId(id); openModal2();}}
/>
</td>
<td>
<Button
className={"btn-small gray-btn"}
btnName={"보기"}
onClick={(e) =>{
setUseUserName(name);
setUseSeniorId(id);
openModal();
}}
/>
</td>
</>
)
} else {
return(
<td>
<Button
className={"btn-small gray-btn"}
btnName={"삭제"}
onClick={()=>{alert("삭제만들거예여.");}}
/>
</td>
)
}
}
return (
<>
{/* 담당자 보기 모달 */}
<Modal_Matching open={modalOpen2} close={closeModal2} header="담당자 배정" />
{/* 보호자 보기 모달창 */}
{modalOpen ? <Modal_Guadian open={modalOpen} close={closeModal} header={useName+"님의 가족"} useseniorId={useseniorId}/> : null}
<table className={className}>
<thead>
<tr>
{head.map((i) => {
return <th>{i}</th>;
})}
</tr>
</thead>
<tbody>
{contents.slice(offset, offset + limit).map((i, index) => {
const userName = i.user_name;
const userId = i.user_id
return (
<tr key={index}>
{contentKey.map((kes) => {
return (
<>
<td onClick={() =>
navigate(`/SeniorSelectOne/${i.user_id}`, { state: { index } })}>
{i[kes]}
</td>
</>
)
})}
{buttonPrint(userName, userId)}
</tr>
);
})}
</tbody>
</table>
</>
);
}
// const TableStyled = styled.table`
// border-top: 2px solid #2d303f;
// border-bottom: 1px solid #e4dccf;
// /* &:hover {
// background-color: #e4dccf;
// } */
// `;
// const TrStyled = styled.tr`
// cursor: pointer;
// `;
// const ThStyled = styled.th`
// padding: 1rem 0;
// font-weight: bold;
// background-color: #f0ebe3;
// font-size: 1.4rem;
// text-align: center;
// `;
// const TdStyled = styled.td`
// padding: 1rem 0;
// border-top: 1px solid #ececec;
// text-align: center;
// font-size: 1.3rem;
// background-color: #ffffff;
// `;