connect groups endpoint's to frontend

This commit is contained in:
Patryk Drzewiński 2022-06-13 19:47:24 +02:00
parent dfd1171c53
commit 0a04a86a00
4 changed files with 135 additions and 45 deletions

View File

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

View 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()+'/',
)

View File

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

View File

@ -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>
),
)}