Add available supervisor filter

frontend/src/api/enrollment.ts

@@ -5,6 +5,7 @@ export const getEnrollmentList = (
     page: number
     per_page: number
     name: string
+    mode: boolean
   }>,
 ) =>
   axiosInstance.get<{

frontend/src/views/coordinator/Leaders.tsx

@@ -104,9 +104,9 @@ const Leaders = () => {
                       <td>{limit_group}</td>
                       <td>{count_groups}</td>
                       <td>
-                        {mode == 0
+                        {mode === 0
                           ? 'Stacjonarny'
-                          : mode == 1
+                          : mode === 1
                           ? 'Niestacjonarny'
                           : 'Nie/stacjonarny'}
                       </td>

frontend/src/views/student/Enrollment.tsx

@@ -1,17 +1,43 @@
+import { useState } from 'react'
 import { useQuery } from 'react-query'
 import { getEnrollmentList } from '../../api/enrollment'
 
 const Enrollment = () => {
-  const { isLoading, data: enrollmentData } = useQuery(['enrollment'], () =>
-    getEnrollmentList({ per_page: 1000 }),
+  const [showAvailable, setShowAvailable] = useState(false)
+  const [mode, setMode] = useState(true)
+  const { isLoading, data: enrollmentData } = useQuery(
+    ['enrollment', mode],
+    () => getEnrollmentList({ per_page: 1000, mode }),
   )
   if (isLoading) {
     return <div>Ładowanie</div>
   }
   return (
     <div>
-      <div className="flex items-center"></div>
-      <h2>Opiekunowie</h2>
+      <div className="flex items-center justify-between">
+        <h2 className="text-xl font-bold">Opiekunowie:</h2>
+        <div className="flex gap-3">
+          <label className="label">
+            <span className="mr-2 text-xs md:text-base">Stacjonarni</span>
+            <input
+              type="checkbox"
+              className="checkbox checkbox-xs md:checkbox-md"
+              onChange={() => setMode(!mode)}
+              checked={mode}
+            />
+          </label>
+          <label className="label">
+            <span className="mr-2 text-xs md:text-base">
+              Pokaż wolne miejsca
+            </span>
+            <input
+              type="checkbox"
+              className="checkbox checkbox-xs md:checkbox-md"
+              onChange={() => setShowAvailable(!showAvailable)}
+            />
+          </label>
+        </div>
+      </div>
       <div className="flex mx-auto mt-5 overflow-hidden overflow-x-auto border border-gray-100 rounded">
         <table className="min-w-full table table-compact">
           <thead>
@@ -24,17 +50,21 @@ const Enrollment = () => {
             </tr>
           </thead>
           <tbody className="divide-y divide-gray-100">
-            {enrollmentData?.data?.project_supervisors?.map(
-              ({ first_name, last_name, email, mode, available_groups }) => (
-                <tr key={email}>
-                  <td>{first_name}</td>
-                  <td>{last_name}</td>
-                  <td>{email}</td>
-                  <td>{mode ? 'stacjonarny' : 'niestacjonarny'}</td>
-                  <td>{available_groups}</td>
-                </tr>
-              ),
-            )}
+            {enrollmentData?.data?.project_supervisors
+              ?.filter(
+                ({ available_groups }) => available_groups || !showAvailable,
+              )
+              .map(
+                ({ first_name, last_name, email, mode, available_groups }) => (
+                  <tr key={email}>
+                    <td>{first_name}</td>
+                    <td>{last_name}</td>
+                    <td>{email}</td>
+                    <td>{mode ? 'stacjonarny' : 'niestacjonarny'}</td>
+                    <td>{available_groups}</td>
+                  </tr>
+                ),
+              )}
           </tbody>
         </table>
       </div>