File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
import React from "react";
import Table from "../../component/Table.jsx";
import Button from "../../component/Button.jsx";
import SubTitle from "../../component/SubTitle.jsx";
import Modal from "../../component/Modal.jsx";
import Category from "../../component/Category.jsx";
import { useNavigate } from "react-router";
export default function EquipmentManagementSelect() {
const [modalOpen, setModalOpen] = React.useState(false);
const openModal = () => {
setModalOpen(true);
};
const closeModal = () => {
setModalOpen(false);
};
const navigate = useNavigate();
const thead1 = [
"No",
"장비명",
"시리얼 넘버",
"입고일자",
"사용여부",
"보유 기관",
];
const key1 = [
"No",
"equipment_name",
"serialNumber",
"name",
"use",
"management",];
const content1 = [
{
No: 1,
equipment_name: "스마트약상자",
serialNumber: "ABCD-1",
name: "2022.12.02",
use: "사용",
management: "A복지관"
},
{
No: 2,
equipment_name: "스마트약상자",
serialNumber: "ABCD-1",
name: "2022.12.02",
use: "미사용",
management: "B복지관"
},
];
const thead3 = [
"No",
"장비명",
"시리얼 넘버",
"입고일자",
"납품 기관",
];
const key3 = [
"No",
"equipment_name",
"serialNumber",
"name",
"management",];
const content3 = [
{
No: 1,
equipment_name: "스마트약상자",
serialNumber: "ABCD-1",
name: "2022.12.02",
management: (
<Button
className={"btn-small gray-btn"}
btnName={"선택"}
onClick={openModal}
/>
)
},
{
No: 2,
equipment_name: "스마트약상자",
serialNumber: "ABCD-1",
name: "2022.12.02",
management: (<Button
className={"btn-small gray-btn"}
btnName={"선택"}
onClick={openModal}
/>)
},
];
const thead2 = [
"No",
"장비명",
"시리얼 넘버",
"대여일",
"배터리 잔량",
"보유기관",
];
const key2 = [
"No",
"equipment_name",
"serialNumber",
"name",
"battery",
"management",
];
const content2 = [
{
No: 1,
equipment_name: "스마트약상자",
serialNumber: "ABCD-1",
name: "2022.12.02",
battery: "10%",
management: "A복지관",
},
];
const thead4 = [
"No",
"기관명",
"선택하기",
];
const key4 = [
"No",
"equipment_name",
"serialNumber",
];
const content4 = [
{
No: 1,
equipment_name: (
<div>
<Category />
</div>
)
,
serialNumber: (<Button
className={"btn-small gray-btn"}
btnName={"선택"}
/>)
},
];
const data = [
{
id: 1,
title: "장비 전체(205)",
description: (
<div>
<div className="flex">
<SubTitle explanation={"장비 클릭 시 지난 매칭이력을 확인할 수 있습니다."} />
<div className="btn-wrap flex-end margin-bottom ">
<Button
className={"btn-small green-btn"}
btnName={"등록"}
onClick={() => {
navigate("/EquipmentManagementInsert");
}}
/>
<Button className={"btn-small green-btn"} btnName={"삭제"} />
</div>
</div>
<Table
className={"caregiver-user"}
head={thead1}
contents={content1}
contentKey={key1}
onClick={() => {
navigate("/EquipmentManagementSelectOne");
}}
/>
</div>
),
},
{
id: 2,
title: "재고 장비(5)",
description: (
<div>
<Table
className={"caregiver-user"}
head={thead3}
contents={content3}
contentKey={key3}
/>
</div>
),
},
{
id: 3,
title: "납품 장비(200)",
description: (
<Table
className={"caregiver-user"}
head={thead2}
contents={content2}
contentKey={key2}
/>
),
},
];
const [index, setIndex] = React.useState(1);
return (
<main>
<Modal open={modalOpen} close={closeModal} header="납품 기관 선택">
<div className="board-wrap">
<div>
<Table
className={"caregiver-user"}
head={thead4}
contents={content4}
contentKey={key4}
/>
</div>
<div>
<Button
className={"btn-100 green-btn"}
btnName={"닫기"}
onClick={closeModal}
/>
</div>
</div>
</Modal>
<div className="tab-container">
<ul className="tab-menu">
{data.map((item) => (
<li
key={item.id}
className={index === item.id ? "active" : null}
onClick={() => setIndex(item.id)}
>
{item.title}
</li>
))}
</ul>
<div className="content-wrap">
<div className="search-management flex-end margin-bottom2">
<select name="management-agency">
<option value="기관전체">기관전체</option>
<option value="대구보훈병원">복지재단1</option>
<option value="군위군청">복지재단2</option>
<option value="군위군청">복지재단3</option>
</select>
<select>
<option value="이름">이름</option>
<option value="아이디">아이디</option>
</select>
<input type="text" />
<Button
className={"btn-small gray-btn"}
btnName={"검색"}
onClick={() => navigate("")}
/>
</div>
<ul className="tab-content">
{data
.filter((item) => index === item.id)
.map((item) => (
<li>{item.description}</li>
))}
</ul>
</div>
</div>
</main>
);
}