s459309/system-pri
3
3
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

SP-9 Dodanie filtrowania studentów bez grypy

Browse Source
This commit is contained in:
Patryk Drzewiński 2022-06-03 23:09:19 +02:00
parent 79aac03500
commit b03e369b73
1 changed files with 37 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
frontend/src/views/coordinator/Students.tsx
View File

@ -1,4 +1,4 @@
import React from 'react' import React, { useState } from 'react'
import { useMutation, useQuery } from 'react-query' import { useMutation, useQuery } from 'react-query'
import { getStudents, uploadStudents } from '../../api/students' import { getStudents, uploadStudents } from '../../api/students'
@ -30,28 +30,44 @@ const Students = () => {
mutateUpload(payload) mutateUpload(payload)
} }
const [state, setState] = useState({
showGroupless: false
});
if (isStudentsLoading) { if (isStudentsLoading) {
return <div>Ładowanie</div> return <div>Ładowanie</div>
} }
return ( return (
<div> <div>
<button className="bg-green-400 p-3 rounded-lg text-white font-extrabold hover:bg-green-300"> <div className="flex items-center">
Dodaj nowego studenta <button className="bg-green-400 p-3 rounded-lg text-white font-extrabold hover:bg-green-300">
</button> Dodaj nowego studenta
<label </button>
className="ml-4 text-green-400 font-extrabold rounded-lg border-2 p-3 border-green-400 hover:border-green-300 cursor-pointer" <label
htmlFor="file" className="ml-4 text-green-400 font-extrabold rounded-lg border-2 p-3 border-green-400 hover:border-green-300 cursor-pointer"
> htmlFor="file"
Importuj >
</label> Importuj
<input </label>
type="file" <input
id="file" type="file"
name="avatar" id="file"
accept=".csv" name="avatar"
className="hidden" accept=".csv"
onChange={handleOnChange} className="hidden"
/> onChange={handleOnChange}
/>
<label className="ml-auto">
<span className="slider round">Tylko niezapisani</span>
<input type="checkbox"
className="m-2 checked: bg-black-400"
onChange={() => setState({
...state,
showGroupless: !state.showGroupless
})}
/>
</label>
</div>
<div className="flex mx-auto mt-5 overflow-hidden overflow-x-auto border border-gray-100 rounded"> <div className="flex mx-auto mt-5 overflow-hidden overflow-x-auto border border-gray-100 rounded">
<table className="min-w-full text-sm divide-y divide-gray-200"> <table className="min-w-full text-sm divide-y divide-gray-200">
@ -65,7 +81,9 @@ const Students = () => {
</tr> </tr>
</thead> </thead>
<tbody className="divide-y divide-gray-100"> <tbody className="divide-y divide-gray-100">
{students?.data?.students?.map( {students?.data?.students?.filter(
(st) => (st.group === null || !state.showGroupless)
).map(
({ first_name, last_name, index, group, mode }) => ( ({ first_name, last_name, index, group, mode }) => (
<tr key={index}> <tr key={index}>
<td className="px-4 py-2 font-medium text-gray-900 whitespace-nowrap"> <td className="px-4 py-2 font-medium text-gray-900 whitespace-nowrap">