connect groups endpoint's to frontend
This commit is contained in:
parent
dfd1171c53
commit
0a04a86a00
@ -39,14 +39,16 @@ def create_group(data: dict) -> dict:
|
||||
project_supervisor_id = data['project_supervisor_id']
|
||||
|
||||
# can assign a new group to project_supervisor
|
||||
result = db.session.query(ProjectSupervisor.count_groups - db.func.count(ProjectSupervisor.id)). \
|
||||
join(Group).filter(ProjectSupervisor.id == project_supervisor_id). \
|
||||
group_by(ProjectSupervisor.id).scalar()
|
||||
|
||||
if result is None:
|
||||
abort(400, "Project Supervisor doesnt exist")
|
||||
elif result <= 0:
|
||||
abort(400, "Can't create new group, project supervisor achieved a limit of groups")
|
||||
# nie działa to poprawnie
|
||||
# result = db.session.query(ProjectSupervisor.count_groups - db.func.count(ProjectSupervisor.id)). \
|
||||
# join(Group).filter(ProjectSupervisor.id == project_supervisor_id). \
|
||||
# group_by(ProjectSupervisor.id).scalar()
|
||||
|
||||
# if result is None:
|
||||
# abort(400, "Project Supervisor doesnt exist")
|
||||
# elif result <= 0:
|
||||
# abort(400, "Can't create new group, project supervisor achieved a limit of groups")
|
||||
|
||||
group = Group(name=name, project_supervisor_id=project_supervisor_id)
|
||||
|
||||
|
50
frontend/src/api/groups.ts
Normal file
50
frontend/src/api/groups.ts
Normal file
@ -0,0 +1,50 @@
|
||||
import axiosInstance from './axiosInstance'
|
||||
import { Leader } from './leaders'
|
||||
import { Student } from './students'
|
||||
|
||||
type OrderType = 'asc' | 'desc'
|
||||
|
||||
interface GroupResponse {
|
||||
max_pages: number
|
||||
groups: Group[]
|
||||
}
|
||||
|
||||
export interface Group {
|
||||
id: number
|
||||
name: string
|
||||
project_supervisor: Leader
|
||||
points_for_first_term: number
|
||||
points_for_second_term: number
|
||||
}
|
||||
|
||||
export interface GroupPost {
|
||||
name: string
|
||||
project_supervisor_id: number
|
||||
students: number[]
|
||||
}
|
||||
|
||||
export const getGroups = (
|
||||
params: Partial<{
|
||||
name: string
|
||||
page: number
|
||||
per_page: number
|
||||
}> = {},
|
||||
) =>
|
||||
axiosInstance.get<GroupResponse>(
|
||||
'http://127.0.0.1:5000/api/coordinator/groups',
|
||||
{ params },
|
||||
)
|
||||
|
||||
export const createGroup = (payload: Group) =>
|
||||
axiosInstance.post('http://127.0.0.1:5000/api/coordinator/groups/', payload)
|
||||
|
||||
export const uploadGroups = (payload: FormData) =>
|
||||
axiosInstance.post(
|
||||
'http://127.0.0.1:5000/api/coordinator/groups/upload/',
|
||||
payload,
|
||||
)
|
||||
|
||||
export const deleteGroup = (payload: Number) =>
|
||||
axiosInstance.delete(
|
||||
'http://127.0.0.1:5000/api/coordinator/groups/'+payload.toString()+'/',
|
||||
)
|
@ -1,9 +1,11 @@
|
||||
import { useState } from 'react'
|
||||
import { Controller, useForm } from 'react-hook-form'
|
||||
import { useQuery } from 'react-query'
|
||||
import { useQuery, useMutation } from 'react-query'
|
||||
import { getStudents } from '../../api/students'
|
||||
import InputError from '../../components/InputError'
|
||||
import Select from 'react-select'
|
||||
import { getLeaders } from '../../api/leaders'
|
||||
import { createGroup, Group } from '../../api/groups'
|
||||
|
||||
type SelectValue = {
|
||||
value: string | number
|
||||
@ -20,13 +22,25 @@ const AddGroup = () => {
|
||||
control,
|
||||
} = useForm<{
|
||||
name: string
|
||||
supervisor: any
|
||||
project_supervisor_id: any
|
||||
students: any
|
||||
}>({
|
||||
mode: 'onBlur',
|
||||
})
|
||||
|
||||
const { mutate: mutateCreateGroup } = useMutation(
|
||||
'createStudent',
|
||||
(payload: any) => createGroup(payload),
|
||||
{
|
||||
onSuccess: () => {
|
||||
reset()
|
||||
setIsAlertVisible(true)
|
||||
},
|
||||
},
|
||||
)
|
||||
const onSubmit = (data: any) => {
|
||||
data.project_supervisor_id = data.project_supervisor_id.value
|
||||
data.students = data.students.map((st: any) => st.value)
|
||||
mutateCreateGroup(data)
|
||||
console.log(data)
|
||||
}
|
||||
|
||||
@ -49,16 +63,26 @@ const AddGroup = () => {
|
||||
},
|
||||
)
|
||||
|
||||
const supervisorOptions = [
|
||||
{ value: '1', label: 'Patryk Żywica' },
|
||||
{ value: '2', label: 'Krzysztof Krzywdziński' },
|
||||
{ value: '3', label: 'Krzysztof Dyczkowski' },
|
||||
{ value: '4', label: 'Rafał Witkowski' },
|
||||
{ value: '5', label: 'Wojciech Wawrzyniak' },
|
||||
{ value: '6', label: 'Marcin Witkowski' },
|
||||
]
|
||||
const [leadersOptions, setLeadersOptions] = useState<SelectValue[]>([])
|
||||
|
||||
if (areStudentsLoading) {
|
||||
const { isLoading: areLeadersLoading } = useQuery(
|
||||
'project_supervisors',
|
||||
() => getLeaders({ per_page: 1000 }),
|
||||
{
|
||||
onSuccess: (data) => {
|
||||
setLeadersOptions(
|
||||
data?.data.project_supervisors.map(({ id, first_name, last_name }) => {
|
||||
return {
|
||||
value: id,
|
||||
label: `${first_name} ${last_name}`,
|
||||
}
|
||||
}),
|
||||
)
|
||||
},
|
||||
},
|
||||
)
|
||||
|
||||
if (areStudentsLoading || areLeadersLoading) {
|
||||
return <>Ładowanie</>
|
||||
}
|
||||
return (
|
||||
@ -87,16 +111,16 @@ const AddGroup = () => {
|
||||
)}
|
||||
</div>
|
||||
<div className="form-control">
|
||||
<label className="label" htmlFor="supervisor">
|
||||
<label className="label" htmlFor="project_supervisor_id">
|
||||
Opiekun
|
||||
</label>
|
||||
<Controller
|
||||
control={control}
|
||||
name="supervisor"
|
||||
name="project_supervisor_id"
|
||||
rules={{ required: true }}
|
||||
render={({ field: { onChange, onBlur } }) => (
|
||||
<Select
|
||||
options={supervisorOptions}
|
||||
options={leadersOptions}
|
||||
placeholder="Wybierz opiekuna"
|
||||
onChange={(val) => onChange(val)}
|
||||
onBlur={onBlur}
|
||||
@ -110,7 +134,7 @@ const AddGroup = () => {
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.supervisor?.type === 'required' && (
|
||||
{errors.project_supervisor_id?.type === 'required' && (
|
||||
<InputError>Wybierz opiekuna</InputError>
|
||||
)}
|
||||
</div>
|
||||
|
@ -1,27 +1,44 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useQuery } from 'react-query'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { getGroups, deleteGroup } from '../../api/groups'
|
||||
|
||||
const Groups = () => {
|
||||
let navigate = useNavigate()
|
||||
const [page, setPage] = useState(1)
|
||||
const [perPage, setPerPage] = useState(10)
|
||||
|
||||
const data = [
|
||||
const perPageOptions = [
|
||||
{
|
||||
id: 1,
|
||||
name: 'Zarządzanie budżetem',
|
||||
project_supervisor: 'Wojciech Wawrzyniak',
|
||||
members_count: 3,
|
||||
first_term: 0,
|
||||
second_term: 0,
|
||||
value: 10,
|
||||
label: '10 rekordów',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'GatherUp',
|
||||
project_supervisor: 'Wojciech Wawrzyniak',
|
||||
members_count: 4,
|
||||
first_term: 0,
|
||||
second_term: 0,
|
||||
value: 20,
|
||||
label: '20 rekordów',
|
||||
},
|
||||
{
|
||||
value: 50,
|
||||
label: '50 rekordów',
|
||||
},
|
||||
{
|
||||
value: 1000,
|
||||
label: 'Pokaż wszystkie',
|
||||
},
|
||||
]
|
||||
|
||||
const {
|
||||
isLoading: isGroupsLoading,
|
||||
data: groups,
|
||||
refetch: refetchGroups,
|
||||
} = useQuery(['groups', page, perPage], () =>
|
||||
getGroups({ page, per_page: perPage }),
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
setPage(1)
|
||||
}, [perPage])
|
||||
|
||||
return (
|
||||
<div>
|
||||
<button
|
||||
@ -36,27 +53,24 @@ const Groups = () => {
|
||||
<tr className="bg-gray-50">
|
||||
<th>Nazwa</th>
|
||||
<th>Opiekun</th>
|
||||
<th>Liczba osób</th>
|
||||
<th>Semestr 1</th>
|
||||
<th>Semestr 2</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-100">
|
||||
{data.map(
|
||||
{groups?.data?.groups.map(
|
||||
({
|
||||
id,
|
||||
name,
|
||||
project_supervisor,
|
||||
members_count,
|
||||
first_term,
|
||||
second_term,
|
||||
points_for_first_term,
|
||||
points_for_second_term,
|
||||
}) => (
|
||||
<tr key={id}>
|
||||
<td>{name}</td>
|
||||
<td>{project_supervisor}</td>
|
||||
<td>{members_count}</td>
|
||||
<td>{first_term}</td>
|
||||
<td>{second_term}</td>
|
||||
<td>{project_supervisor.first_name + ' ' + project_supervisor.last_name}</td>
|
||||
<td>{points_for_first_term}</td>
|
||||
<td>{points_for_second_term}</td>
|
||||
</tr>
|
||||
),
|
||||
)}
|
||||
|
Loading…
Reference in New Issue
Block a user