Add registrations view

This commit is contained in:
adam-skowronek 2022-06-13 19:48:52 +02:00
parent 3a85b52bad
commit a3dddd3751
4 changed files with 89 additions and 2 deletions

View File

@ -1,6 +1,6 @@
import React from 'react' import React from 'react'
import { QueryClient, QueryClientProvider } from 'react-query' import { QueryClient, QueryClientProvider } from 'react-query'
import { Route, Routes } from 'react-router-dom' import { Navigate, Route, Routes } from 'react-router-dom'
import './App.css' import './App.css'
import AddGroup from './views/coordinator/AddGroup' import AddGroup from './views/coordinator/AddGroup'
import AddStudent from './views/coordinator/AddStudent' import AddStudent from './views/coordinator/AddStudent'
@ -10,6 +10,8 @@ import Groups from './views/coordinator/Groups'
import Leaders from './views/coordinator/Leaders' import Leaders from './views/coordinator/Leaders'
import Students from './views/coordinator/Students' import Students from './views/coordinator/Students'
import Login from './views/Login' import Login from './views/Login'
import Enrollment from './views/student/Enrollment'
import Student from './views/student/Student'
const queryClient = new QueryClient({ const queryClient = new QueryClient({
defaultOptions: { defaultOptions: {
@ -26,7 +28,7 @@ function App() {
<Routes> <Routes>
<Route index element={<Login />} /> <Route index element={<Login />} />
<Route path="coordinator" element={<Coordinator />}> <Route path="coordinator" element={<Coordinator />}>
<Route index element={<Students />} /> <Route index element={<Navigate to="students" />} />
<Route path="groups" element={<Groups />} /> <Route path="groups" element={<Groups />} />
<Route path="students" element={<Students />} /> <Route path="students" element={<Students />} />
<Route path="leaders" element={<Leaders />} /> <Route path="leaders" element={<Leaders />} />
@ -34,6 +36,10 @@ function App() {
<Route path="add-group" element={<AddGroup />} /> <Route path="add-group" element={<AddGroup />} />
<Route path="add-leader" element={<AddLeader />} /> <Route path="add-leader" element={<AddLeader />} />
</Route> </Route>
<Route path="student" element={<Student />}>
<Route index element={<Navigate to="enrollment" />} />
<Route path="enrollment" element={<Enrollment />} />
</Route>
</Routes> </Routes>
</QueryClientProvider> </QueryClientProvider>
</div> </div>

View File

@ -0,0 +1,21 @@
import axiosInstance from './axiosInstance'
export const getEnrollmentList = (
params: Partial<{
page: number
per_page: number
name: string
}>,
) =>
axiosInstance.get<{
max_pages: number
project_supervisors: {
available_groups: number
first_name: string
last_name: string
email: string
mode: boolean
}[]
}>('http://127.0.0.1:5000/api/students/registrations/', {
params,
})

View File

@ -0,0 +1,45 @@
import { useQuery } from 'react-query'
import { getEnrollmentList } from '../../api/enrollment'
const Enrollment = () => {
const { isLoading, data: enrollmentData } = useQuery(['enrollment'], () =>
getEnrollmentList({ per_page: 1000 }),
)
if (isLoading) {
return <div>Ładowanie</div>
}
return (
<div>
<div className="flex items-center"></div>
<h2>Opiekunowie</h2>
<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>
<tr className="bg-gray-50">
<th>Imię</th>
<th>Nazwisko</th>
<th>Email</th>
<th>Tryb</th>
<th>Wolne miejsca</th>
</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>
),
)}
</tbody>
</table>
</div>
</div>
)
}
export default Enrollment

View File

@ -0,0 +1,15 @@
import { Outlet } from 'react-router-dom'
import TopBar from '../../components/TopBar'
const Student = () => {
return (
<>
<TopBar routes={[{ name: 'Zapisy', path: '/student/enrollment' }]} />
<div className="m-10">
<Outlet />
</div>
</>
)
}
export default Student