Add registrations view
This commit is contained in:
parent
3a85b52bad
commit
a3dddd3751
@ -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>
|
||||||
|
21
frontend/src/api/enrollment.ts
Normal file
21
frontend/src/api/enrollment.ts
Normal 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,
|
||||||
|
})
|
45
frontend/src/views/student/Enrollment.tsx
Normal file
45
frontend/src/views/student/Enrollment.tsx
Normal 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
|
15
frontend/src/views/student/Student.tsx
Normal file
15
frontend/src/views/student/Student.tsx
Normal 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
|
Loading…
Reference in New Issue
Block a user