From 608e6a33d607163a723b1e312822ffa6ac5d7ca3 Mon Sep 17 00:00:00 2001
From: ymd <74826010+ymd1138@users.noreply.github.com>
Date: Mon, 27 Mar 2023 21:54:45 +0900
Subject: [PATCH] =?UTF-8?q?=E3=83=86=E3=83=BC=E3=83=96=E3=83=AB=E3=81=AE?=
 =?UTF-8?q?=E3=83=95=E3=82=A3=E3=83=AB=E3=82=BF=E6=A9=9F=E8=83=BD=E3=82=92?=
 =?UTF-8?q?=E5=AE=9F=E8=A3=85=EF=BC=88=E9=80=94=E4=B8=AD=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/users.tsx | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/pages/users.tsx b/pages/users.tsx
index d380b0c..5833873 100644
--- a/pages/users.tsx
+++ b/pages/users.tsx
@@ -1,5 +1,6 @@
 import { queryDb } from "@/util/db";
 import { GetServerSideProps } from "next";
+import { useState } from "react";
 import { Table } from "react-bootstrap";
 import { User } from "./api/user";
 
@@ -7,16 +8,30 @@ type Props = {
   users: User[];
 };
 
+type TableDataType = "id" | "icon" | "discord";
+const allTableDataTypes: TableDataType[] = ["id", "icon", "discord"];
 const UsersPage = ({ users }: Props) => {
+  const [selectTypes, setSelectTypes] = useState<TableDataType[]>([]);
+  const onCheckFilter = (checked: boolean, type: TableDataType) => {
+    if (checked) setSelectTypes([...selectTypes, type]);
+    else setSelectTypes(selectTypes.filter(t => t !== type));
+  }
   return (
     <div style={{ width: "100%" }} className="overflow-auto">
+      {allTableDataTypes.map(t => (
+        <>
+          <input type="checkbox" key={t} onChange={(e) => { onCheckFilter(e.target.checked, t) }} />
+          {t}
+        </>
+      ))}
       <Table striped bordered hover style={{ tableLayout: "fixed" }}>
         <thead>
           <tr>
             {
               // 幅は調整中。細かい調整は後ほど。
             }
-            <th style={{ width: 150 }}>ID</th>
+            {selectTypes.indexOf("id") !== -1 ? <th style={{ width: 150 }}>ID</th> : <></>}
+
             <th className="table-th-studentNumber">学籍番号</th>
             <th className="table-th-username">ユーザー名</th>
             <th style={{ width: 30 }}>学年</th>
@@ -40,7 +55,8 @@ const UsersPage = ({ users }: Props) => {
         <tbody>
           {users.map((user) => (
             <tr key={user.id}>
-              <td>{user.id}</td>
+              {selectTypes.indexOf("id") !== -1 ? <td>{user.id}</td> : <></>}
+
               <td>{user.studentNumber}</td>
               <td>{user.username}</td>
               <td>{user.schoolGrade}</td>