Merge pull request #729 from NUTFes/develop

教員ページのフィルター機能実装
NUTFes · Apr 9, 2024 · fc2e17d · fc2e17d
2 parents 48fdec3 + 5d33d1c
commit fc2e17d
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 73 deletions.
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -15,9 +15,6 @@ services:
     ports:
       - "3306:3306"
     restart: always
-    networks:
-      app_net:
-        ipv4_address: 192.168.176.2
 
   view:
     build: ./view
@@ -28,10 +25,12 @@ services:
     ports:
       - "3000:3000"
     stdin_open: true
+    environment:
+      NEXT_PUBLIC_ENDPOINT: minio
+      NEXT_PUBLIC_PORT: 9000
+      NEXT_PUBLIC_BUCKET_NAME: finansu
+      NEXT_PUBLIC_MINIO_ENDPONT: http://localhost:9000
     tty: true
-    networks:
-      app_net:
-        ipv4_address: 192.168.176.3
 
   api:
     build:
@@ -49,9 +48,6 @@ services:
     depends_on:
       db:
         condition: service_started
-    networks:
-      app_net:
-        ipv4_address: 192.168.176.4
 
   minio:
     image: minio/minio:latest
@@ -64,14 +60,3 @@ services:
     environment:
       MINIO_ROOT_USER: user
       MINIO_ROOT_PASSWORD: password
-    networks:
-      app_net:
-        ipv4_address: 192.168.176.5
-
-networks:
-  app_net:
-    driver: bridge
-    ipam:
-      driver: default
-      config:
-        - subnet: 192.168.176.0/24
diff --git a/view/Dockerfile b/view/Dockerfile
@@ -5,7 +5,3 @@ WORKDIR /app/next-project
 COPY ./ /app
 
 ENV API_URL='http://localhost:1323'
-ENV NEXT_PUBLIC_ENDPOINT='192.168.176.1'
-ENV NEXT_PUBLIC_PORT=9000
-ENV NEXT_PUBLIC_BUCKET_NAME='finansu'
-ENV NEXT_PUBLIC_MINIO_ENDPONT='http://localhost:9000'
diff --git a/view/next-project/src/pages/teachers/index.tsx b/view/next-project/src/pages/teachers/index.tsx
@@ -11,7 +11,7 @@ import MainLayout from '@components/layout/MainLayout';
 import OpenAddModalButton from '@components/teacher/OpenAddModalButton';
 import OpenDeleteModalButton from '@components/teacher/OpenDeleteModalButton';
 import OpenEditModalButton from '@components/teacher/OpenEditModalButton';
-import { Teacher, User } from '@type/common';
+import { Department, Teacher, User } from '@type/common';
 
 interface Props {
   teachers: Teacher[];
@@ -28,6 +28,16 @@ export const getServerSideProps = async () => {
 };
 export default function TeachersList(props: Props) {
   const { teachers } = props;
+  const departments = [
+    {
+      id: 0,
+      name: '全て',
+    },
+    ...DEPARTMENTS,
+  ];
+  const [selectedDepartment, setSelectedDepartment] = useState<Department | undefined>(
+    departments[0],
+  );
 
   const auth = useRecoilValue(authAtom);
   const [currentUser, setCurrentUser] = useState<User | null>(null);
@@ -39,6 +49,18 @@ export default function TeachersList(props: Props) {
     }
   }, [currentUser?.roleID, currentUser?.id, currentUser]);
 
+  const [filterTeachers, setFilterTeachers] = useState<Teacher[]>(teachers);
+
+  useEffect(() => {
+    const newFilterTeachers =
+      selectedDepartment?.id === 0
+        ? teachers
+        : teachers.filter((teacher) => {
+            return teacher.departmentID === selectedDepartment?.id;
+          });
+    setFilterTeachers(newFilterTeachers);
+  }, [selectedDepartment]);
+
   useEffect(() => {
     const getUser = async () => {
       const res = await getCurrentUser(auth);
@@ -55,8 +77,26 @@ export default function TeachersList(props: Props) {
       </Head>
       <Card>
         <div className='mx-5 mt-10'>
-          <div className='flex'>
+          <div className='flex flex-col md:flex-row'>
             <Title title={'教員一覧'} />
+            <select
+              className='md:w-100 mx-auto my-4 w-fit md:mx-10 md:my-0'
+              value={selectedDepartment?.id}
+              onChange={(e) => {
+                const selectDepartment = departments.find((department) => {
+                  return department?.id === Number(e.target.value);
+                });
+                setSelectedDepartment(selectDepartment);
+              }}
+            >
+              {departments.map((department) => {
+                return (
+                  <option value={department?.id} key={department?.id}>
+                    {department?.name}
+                  </option>
+                );
+              })}
+            </select>
           </div>
           <div className='hidden justify-end md:flex'>
             <OpenAddModalButton>教員登録</OpenAddModalButton>
@@ -66,66 +106,69 @@ export default function TeachersList(props: Props) {
           <table className='mb-5 w-max table-auto border-collapse md:w-full'>
             <thead className='text-sm text-black-600'>
               <tr className='border border-x-white-0 border-b-primary-1 border-t-white-0 py-3'>
-                <th>
+                <th className='w-1/6'>
                   <p>氏名</p>
                 </th>
-                <th>
+                <th className='w-1/6'>
                   <p>職位</p>
                 </th>
-                <th>
+                <th className='w-1/6'>
                   <p>学科</p>
                 </th>
-                <th>
+                <th className='w-1/6'>
                   <p>居室</p>
                 </th>
-                <th>
+                <th className='w-1/6'>
                   <p>備考</p>
                 </th>
-                <th></th>
+                <th className='w-1/6'></th>
               </tr>
             </thead>
             <tbody className='border border-x-white-0 border-b-primary-1 border-t-white-0'>
-              {teachers.map((teacher, index) => (
-                <tr
-                  key={teacher.name}
-                  className={clsx(
-                    index !== teachers.length - 1 && 'border-b',
-                    'text-sm text-black-600',
-                  )}
-                >
-                  <td className='py-3'>
-                    {teacher.isBlack && <p className='text-center text-red-500'>{teacher.name}</p>}
-                    {!teacher.isBlack && <p className='text-center'>{teacher.name}</p>}
-                  </td>
-                  <td>
-                    <p className='text-center'>{teacher.position}</p>
-                  </td>
-                  <td>
-                    <p className='text-center'>
-                      {
-                        DEPARTMENTS.find((department) => department.id === teacher.departmentID)
-                          ?.name
-                      }
-                    </p>
-                  </td>
-                  <td>
-                    <p className='text-center'>{teacher.room}</p>
-                  </td>
-                  <td>
-                    <p className='text-center'>{teacher.remark}</p>
-                  </td>
-                  <td>
-                    <div className='flex items-center justify-center gap-3'>
-                      <OpenEditModalButton
-                        id={teacher.id || 0}
-                        teacher={teacher}
-                        isDisabled={isDisabled}
-                      />
-                      <OpenDeleteModalButton id={teacher.id || 0} isDisabled={isDisabled} />
-                    </div>
-                  </td>
-                </tr>
-              ))}
+              {filterTeachers &&
+                filterTeachers.map((teacher, index) => (
+                  <tr
+                    key={index}
+                    className={clsx(
+                      index !== teachers.length - 1 && 'border-b',
+                      'text-sm text-black-600',
+                    )}
+                  >
+                    <td className='py-3'>
+                      {teacher.isBlack && (
+                        <p className='text-center text-red-500'>{teacher.name}</p>
+                      )}
+                      {!teacher.isBlack && <p className='text-center'>{teacher.name}</p>}
+                    </td>
+                    <td>
+                      <p className='text-center'>{teacher.position}</p>
+                    </td>
+                    <td>
+                      <p className='text-center'>
+                        {
+                          DEPARTMENTS.find((department) => department.id === teacher.departmentID)
+                            ?.name
+                        }
+                      </p>
+                    </td>
+                    <td>
+                      <p className='text-center'>{teacher.room}</p>
+                    </td>
+                    <td>
+                      <p className='text-center'>{teacher.remark}</p>
+                    </td>
+                    <td>
+                      <div className='flex items-center justify-center gap-3'>
+                        <OpenEditModalButton
+                          id={teacher.id || 0}
+                          teacher={teacher}
+                          isDisabled={isDisabled}
+                        />
+                        <OpenDeleteModalButton id={teacher.id || 0} isDisabled={isDisabled} />
+                      </div>
+                    </td>
+                  </tr>
+                ))}
             </tbody>
           </table>
         </div>