授業を学部でフィルタ

Author: nakaterm

web/components/course/components/SelectCourseDialog.tsx

@@ -3,7 +3,54 @@ import type { Course, Day } from "common/types";
 import { useEffect, useState } from "react";
 import courseApi from "~/api/course";
 import CourseRegisterConfirmDialog from "./CourseRegisterConfirmDialog";
+import TagFilter from "./TagFilter";
 
+const faculties = [
+  "all",
+  "zenki",
+  "law",
+  "medicine",
+  "engineering",
+  "arts",
+  "science",
+  "agriculture",
+  "economics",
+  "liberal-arts",
+  "education",
+  "pharmacy",
+] as const;
+export type FacultyKey = (typeof faculties)[number];
+const facultyRegExMap = new Map<FacultyKey, RegExp>([
+  ["all", /.*/],
+  ["zenki", /^[34].*/],
+  ["law", /^01.*/],
+  ["medicine", /^02.*/],
+  ["engineering", /^FEN.*/],
+  ["arts", /^04.*/],
+  ["science", /^05.*/],
+  ["agriculture", /^06.*/],
+  ["economics", /^07.*/],
+  ["liberal-arts", /^08.*/],
+  ["education", /^09.*/],
+  ["pharmacy", /^10.*/],
+]);
+
+const facultyNameMap = new Map<FacultyKey, string>([
+  ["all", "全て"],
+  ["zenki", "前期教養"],
+  ["law", "法"],
+  ["medicine", "医"],
+  ["engineering", "工"],
+  ["arts", "文"],
+  ["science", "理"],
+  ["agriculture", "農"],
+  ["economics", "経済"],
+  ["liberal-arts", "後期教養"],
+  ["education", "教育"],
+  ["pharmacy", "薬"],
+]);
+
+// TODO: フィルタのロジックが異様にばらけているのでリファクタしよう・・
 export default function SelectCourseDialog({
   open,
   onClose,
@@ -21,6 +68,7 @@ export default function SelectCourseDialog({
 }) {
   const [availableCourses, setAvailableCourses] = useState<Course[]>([]);
   const [searchText, setSearchText] = useState("");
+  const [selectedFaculty, setSelectedFaculty] = useState<FacultyKey>("all");
   const [filteredAvailableCourses, setFilteredAvailableCourses] = useState<
     Course[]
   >([]);
@@ -89,9 +137,9 @@ export default function SelectCourseDialog({
                   <p className="text-base">
                     {currentEdit?.course?.name ?? "-"}
                   </p>
-                  <p className="text-gray-500 text-sm">{`${
-                    currentEdit?.course?.teacher ?? "-"
-                  } / ${currentEdit?.course?.id ?? "-"}`}</p>
+                  <p className="text-gray-500 text-sm">{`${currentEdit?.course?.teacher ?? "-"} / ${
+                    currentEdit?.course?.id ?? "-"
+                  }`}</p>
                 </div>
                 <button
                   type="button"
@@ -109,7 +157,6 @@ export default function SelectCourseDialog({
               <p className="text-gray-500">未登録</p>
             )}
           </div>
-
           <input
             type="text"
             placeholder="授業名で検索"
@@ -124,27 +171,40 @@ export default function SelectCourseDialog({
               setFilteredAvailableCourses(newFilteredCourses);
             }}
           />
+          <div className="my-4 flex flex-row">
+            <TagFilter
+              keyNameMap={facultyNameMap}
+              selectedTag={selectedFaculty ?? "all"}
+              onTagChange={(tag) => {
+                setSelectedFaculty((prev) => (prev === tag ? "all" : tag));
+              }}
+            />
+          </div>
           {filteredAvailableCourses.length === 0 ? (
             <p className="mt-2 text-gray-500">
               条件に当てはまる授業はありません。
             </p>
           ) : (
             <ul className="mt-4 max-h-[300px] overflow-auto">
-              {filteredAvailableCourses.map((course) => (
-                <li key={course.id}>
-                  <button
-                    type="button"
-                    className="w-full cursor-pointer rounded-lg border p-2 hover:bg-gray-100"
-                    onClick={() => {
-                      setNewCourse(course);
-                      setConfirmDialogStatus("add");
-                    }}
-                  >
-                    <p>{course.name}</p>
-                    <p className="text-gray-500 text-sm">{`${course.teacher} / ${course.id}`}</p>
-                  </button>
-                </li>
-              ))}
+              {filteredAvailableCourses
+                .filter((course) =>
+                  facultyRegExMap.get(selectedFaculty)?.test(course.id),
+                )
+                .map((course) => (
+                  <li key={course.id}>
+                    <button
+                      type="button"
+                      className="w-full cursor-pointer rounded-lg border p-2 hover:bg-gray-100"
+                      onClick={() => {
+                        setNewCourse(course);
+                        setConfirmDialogStatus("add");
+                      }}
+                    >
+                      <p>{course.name}</p>
+                      <p className="text-gray-500 text-sm">{`${course.teacher} / ${course.id}`}</p>
+                    </button>
+                  </li>
+                ))}
             </ul>
           )}
         </div>

web/components/course/components/TagFilter.tsx

@@ -0,0 +1,34 @@
+type Props<T> = {
+  keyNameMap: Map<T, string>;
+  selectedTag: T;
+  onTagChange: (tag: T) => void;
+};
+
+export default function TagFilter<T extends string>({
+  keyNameMap,
+  selectedTag,
+  onTagChange,
+}: Props<T>) {
+  const tags = Array.from(keyNameMap.keys());
+  return (
+    <div className="flex flex-wrap gap-2">
+      {tags.map((tag) => (
+        <div key={tag}>
+          <input
+            type="checkbox"
+            id={tag}
+            className="peer hidden"
+            checked={selectedTag === tag}
+            onChange={() => onTagChange(tag)}
+          />
+          <label
+            htmlFor={tag}
+            className="cursor-pointer rounded-full bg-gray-200 px-3 py-1 text-gray-800 transition-colors duration-200 peer-checked:bg-primary peer-checked:text-white"
+          >
+            {keyNameMap.get(tag)}
+          </label>
+        </div>
+      ))}
+    </div>
+  );
+}