Add available supervisor filter

This commit is contained in:
adam-skowronek 2022-06-13 21:24:17 +02:00
parent 5a49e87a63
commit 1459df0c6a
3 changed files with 48 additions and 17 deletions

View File

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

View File

@ -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>

View File

@ -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>