Skip to content

Commit

Permalink
チェックボックスを横並びに修正、importのcurly bracketsを修正
Browse files Browse the repository at this point in the history
  • Loading branch information
@ymd1138
ymd1138 committed Apr 28, 2023
1 parent e120eed commit 437fd96
Showing 1 changed file with 115 additions and 129 deletions.
244 changes: 115 additions & 129 deletions pages/users.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { queryDb } from "@/util/db";
import { GetServerSideProps } from "next";
import { useState } from "react";
import { Container } from "react-bootstrap";
import { Row } from "react-bootstrap";
import { Col } from "react-bootstrap";
import { Form } from "react-bootstrap";
import { Table } from "react-bootstrap";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import Form from "react-bootstrap/Form";
import Table from "react-bootstrap/Table";
import { User } from "./api/user";

type Props = {
Expand All @@ -15,26 +15,16 @@ type Props = {
{
/* あとでオブジェクトのリストに書き換えます */
}
type TableDataType =
| "学籍番号"
| "公開情報"
| "有効期限・ID"
| "個人情報"
| "保護者情報";
type TableDataType = "公開情報" | "有効期限・ID" | "個人情報" | "保護者情報";

const allTableDataTypes: TableDataType[] = [
"学籍番号",
"公開情報",
"有効期限・ID",
"個人情報",
"保護者情報",
];

const defaultTableDataTypes: TableDataType[] = [
"学籍番号",
"公開情報",
"有効期限・ID",
];
const defaultTableDataTypes: TableDataType[] = ["公開情報", "有効期限・ID"];

const UsersPage = ({ users }: Props) => {
const [selectTypes, setSelectTypes] = useState<TableDataType[]>([
Expand All @@ -45,162 +35,158 @@ const UsersPage = ({ users }: Props) => {
else setSelectTypes(selectTypes.filter((t) => t !== type));
};
return (
<Container fluid>
<Row>
<Col>
<Form>
<>
<Container fluid>
<Row>
<div className="m-2">
{allTableDataTypes.map((t) => (
<div key={t} className="mb-0">
<>
{defaultTableDataTypes.includes(t) ? (
<Form.Check
defaultChecked
type={"checkbox"}
id={t}
inline
key={t}
label={t}
type="checkbox"
id={t}
onChange={(e) => {
onCheckFilter(e.target.checked, t);
}}
/>
) : (
<Form.Check
type={"checkbox"}
id={t}
inline
key={t}
label={t}
type="checkbox"
id={t}
onChange={(e) => {
onCheckFilter(e.target.checked, t);
}}
/>
)}
</div>
</>
))}
</Form>
</Col>
</Row>
<Row>
<div className="overflow-auto">
<>
<Table
striped
bordered
hover
style={{ tableLayout: "fixed", overflow: "auto" }}
>
<thead>
<tr>
{/* 幅は調整中。細かい調整は後ほど。*/}
{selectTypes.indexOf("学籍番号") !== -1 ? (
</div>
</Row>
<Row>
<div className="overflow-auto">
<>
<Table
striped
bordered
hover
style={{ tableLayout: "fixed", overflow: "auto" }}
>
<thead>
<tr>
{/* 幅は調整中。細かい調整は後ほど。*/}
<th className="table-th-studentNumber">学籍番号</th>
) : (
<></>
)}
{selectTypes.indexOf("公開情報") !== -1 ? (
<>
<th className="table-th-username">ユーザー名</th>
<th style={{ width: 30 }}>学年</th>
<th style={{ width: 66 }}>アイコン</th>
<th style={{ width: 150 }}>自己紹介</th>
</>
) : (
<></>
)}
{selectTypes.indexOf("有効期限・ID") !== -1 ? (
<>
<th style={{ width: 100 }}>有効期限</th>
<th style={{ width: 150 }}>ID</th>
<th style={{ width: 100 }}>Discord ID</th>
</>
) : (
<></>
)}
{selectTypes.indexOf("個人情報") !== -1 ? (
<>
<th className="table-th-name">名字</th>
<th className="table-th-name">名前</th>
<th className="table-th-name-kana">名字カナ</th>
<th className="table-th-name-kana">名前カナ</th>
<th style={{ width: 30 }}>性別</th>
<th className="table-th-phoneNumber">電話番号</th>
<th className="table-th-address">住所</th>
</>
) : (
<></>
)}
{selectTypes.indexOf("保護者情報") !== -1 ? (
<>
<th style={{ width: 100 }}>親氏名</th>
<th className="table-th-phoneNumber">親電話番号</th>
<th className="table-th-phoneNumber">親固定電話番号</th>
<th className="table-th-address">親住所</th>
</>
) : (
<></>
)}
</tr>
</thead>
<tbody>
{users.map((user) => (
<tr key={user.id}>
{selectTypes.indexOf("学籍番号") !== -1 ? (
<td>{user.studentNumber}</td>
) : (
<></>
)}
{selectTypes.indexOf("公開情報") !== -1 ? (
<>
<td>{user.username}</td>
<td>{user.schoolGrade}</td>
<td>
<img
src={user.iconUrl}
alt=""
style={{ width: "50px" }}
/>
</td>
<td>{user.shortIntroduction}</td>
<th className="table-th-username">ユーザー名</th>
<th style={{ width: 30 }}>学年</th>
<th style={{ width: 66 }}>アイコン</th>
<th style={{ width: 150 }}>自己紹介</th>
</>
) : (
<></>
)}
{selectTypes.indexOf("有効期限・ID") !== -1 ? (
<>
<td>{user.activeLimit}</td>
<td>{user.id}</td>
<td>{user.discordUserId}</td>
<th style={{ width: 100 }}>有効期限</th>
<th style={{ width: 150 }}>ID</th>
<th style={{ width: 100 }}>Discord ID</th>
</>
) : (
<></>
)}
{selectTypes.indexOf("個人情報") !== -1 ? (
<>
<td>{user.firstName}</td>
<td>{user.lastName}</td>
<td>{user.firstNameKana}</td>
<td>{user.lastNameKana}</td>
<td>{user.isMale ? "男" : "女"}</td>
<td>{user.phoneNumber}</td>
<td>{user.address}</td>
<th className="table-th-name">名字</th>
<th className="table-th-name">名前</th>
<th className="table-th-name-kana">名字カナ</th>
<th className="table-th-name-kana">名前カナ</th>
<th style={{ width: 30 }}>性別</th>
<th className="table-th-phoneNumber">電話番号</th>
<th className="table-th-address">住所</th>
</>
) : (
<></>
)}
{selectTypes.indexOf("保護者情報") !== -1 ? (
<>
<td>{user.parentName}</td>
<td>{user.parentCellphoneNumber}</td>
<td>{user.parentHomephoneNumber}</td>
<td>{user.parentAddress}</td>
<th style={{ width: 100 }}>親氏名</th>
<th className="table-th-phoneNumber">親電話番号</th>
<th className="table-th-phoneNumber">親固定電話番号</th>
<th className="table-th-address">親住所</th>
</>
) : (
<></>
)}
</tr>
))}
</tbody>
</Table>
</>
</div>
</Row>
</Container>
</thead>
<tbody>
{users.map((user) => (
<tr key={user.id}>
<td>{user.studentNumber}</td>
{selectTypes.indexOf("公開情報") !== -1 ? (
<>
<td>{user.username}</td>
<td>{user.schoolGrade}</td>
<td>
<img
src={user.iconUrl}
alt=""
style={{ width: "50px" }}
/>
</td>
<td>{user.shortIntroduction}</td>
</>
) : (
<></>
)}
{selectTypes.indexOf("有効期限・ID") !== -1 ? (
<>
<td>{user.activeLimit}</td>
<td>{user.id}</td>
<td>{user.discordUserId}</td>
</>
) : (
<></>
)}
{selectTypes.indexOf("個人情報") !== -1 ? (
<>
<td>{user.firstName}</td>
<td>{user.lastName}</td>
<td>{user.firstNameKana}</td>
<td>{user.lastNameKana}</td>
<td>{user.isMale ? "男" : "女"}</td>
<td>{user.phoneNumber}</td>
<td>{user.address}</td>
</>
) : (
<></>
)}
{selectTypes.indexOf("保護者情報") !== -1 ? (
<>
<td>{user.parentName}</td>
<td>{user.parentCellphoneNumber}</td>
<td>{user.parentHomephoneNumber}</td>
<td>{user.parentAddress}</td>
</>
) : (
<></>
)}
</tr>
))}
</tbody>
</Table>
</>
</div>
</Row>
</Container>
</>
);
};

Expand Down

0 comments on commit 437fd96

Please sign in to comment.