Integrate groups endpoints in frontend
This commit is contained in:
parent
f6b0d7bc2f
commit
fcc894aba9
@ -1,50 +1,36 @@
|
||||
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 {
|
||||
export interface CreateGroup {
|
||||
name: string
|
||||
project_supervisor_id: number
|
||||
students: number[]
|
||||
}
|
||||
|
||||
export interface Group {
|
||||
cdyd_kod: string
|
||||
id: number
|
||||
name: string
|
||||
points_for_first_term: number
|
||||
points_for_second_term: number
|
||||
project_supervisor: Leader
|
||||
prz_kod: string
|
||||
tzaj_kod: string
|
||||
}
|
||||
|
||||
export const getGroups = (
|
||||
params: Partial<{
|
||||
name: string
|
||||
page: number
|
||||
per_page: number
|
||||
}> = {},
|
||||
name: string
|
||||
}>,
|
||||
) =>
|
||||
axiosInstance.get<GroupResponse>(
|
||||
'http://127.0.0.1:5000/api/coordinator/groups',
|
||||
{ params },
|
||||
axiosInstance.get<{ max_pages: number; groups: Group[] }>(
|
||||
'http://127.0.0.1:5000/api/coordinator/groups/',
|
||||
{
|
||||
params,
|
||||
},
|
||||
)
|
||||
|
||||
export const createGroup = (payload: Group) =>
|
||||
export const createGroup = (payload: CreateGroup) =>
|
||||
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,11 +1,11 @@
|
||||
import { useState } from 'react'
|
||||
import { Controller, useForm } from 'react-hook-form'
|
||||
import { useQuery, useMutation } from 'react-query'
|
||||
import { Controller, NestedValue, useForm } from 'react-hook-form'
|
||||
import { useMutation, useQuery } from 'react-query'
|
||||
import { getStudents } from '../../api/students'
|
||||
import { createGroup, CreateGroup } from '../../api/groups'
|
||||
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
|
||||
@ -18,33 +18,10 @@ const AddGroup = () => {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
reset,
|
||||
control,
|
||||
} = useForm<{
|
||||
name: string
|
||||
project_supervisor_id: any
|
||||
students: any
|
||||
}>({
|
||||
} = useForm<CreateGroup & { students: NestedValue<number[]> }>({
|
||||
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)
|
||||
}
|
||||
|
||||
const [studentOptions, setStudentOptions] = useState<SelectValue[]>([])
|
||||
|
||||
const { isLoading: areStudentsLoading } = useQuery(
|
||||
'students',
|
||||
@ -62,26 +39,40 @@ const AddGroup = () => {
|
||||
},
|
||||
},
|
||||
)
|
||||
|
||||
const [leadersOptions, setLeadersOptions] = useState<SelectValue[]>([])
|
||||
|
||||
const { isLoading: areLeadersLoading } = useQuery(
|
||||
'project_supervisors',
|
||||
'leaders',
|
||||
() => getLeaders({ per_page: 1000 }),
|
||||
{
|
||||
onSuccess: (data) => {
|
||||
setLeadersOptions(
|
||||
data?.data.project_supervisors.map(({ id, first_name, last_name }) => {
|
||||
return {
|
||||
setSupervisorOptions(
|
||||
data?.data.project_supervisors.map(
|
||||
({ id, first_name, last_name }) => ({
|
||||
value: id,
|
||||
label: `${first_name} ${last_name}`,
|
||||
}
|
||||
}),
|
||||
}),
|
||||
),
|
||||
)
|
||||
},
|
||||
},
|
||||
)
|
||||
|
||||
const { mutate: mutateCreateGroup } = useMutation(
|
||||
'createGroup',
|
||||
(payload: CreateGroup) => createGroup(payload),
|
||||
{
|
||||
onSuccess: () => {
|
||||
setIsAlertVisible(true)
|
||||
},
|
||||
},
|
||||
)
|
||||
|
||||
const onSubmit = (data: CreateGroup) => {
|
||||
mutateCreateGroup(data)
|
||||
}
|
||||
|
||||
const [studentOptions, setStudentOptions] = useState<SelectValue[]>([])
|
||||
const [supervisorOptions, setSupervisorOptions] = useState<SelectValue[]>([])
|
||||
|
||||
if (areStudentsLoading || areLeadersLoading) {
|
||||
return <>Ładowanie</>
|
||||
}
|
||||
@ -120,9 +111,9 @@ const AddGroup = () => {
|
||||
rules={{ required: true }}
|
||||
render={({ field: { onChange, onBlur } }) => (
|
||||
<Select
|
||||
options={leadersOptions}
|
||||
options={supervisorOptions}
|
||||
placeholder="Wybierz opiekuna"
|
||||
onChange={(val) => onChange(val)}
|
||||
onChange={(val) => onChange(val?.value)}
|
||||
onBlur={onBlur}
|
||||
styles={{
|
||||
control: (styles) => ({
|
||||
@ -152,7 +143,9 @@ const AddGroup = () => {
|
||||
options={studentOptions}
|
||||
placeholder="Wybierz studentów"
|
||||
isMulti
|
||||
onChange={onChange}
|
||||
onChange={(values) =>
|
||||
onChange(values.map((value) => value.value))
|
||||
}
|
||||
onBlur={onBlur}
|
||||
styles={{
|
||||
control: (styles) => ({
|
||||
|
||||
@ -1,44 +1,18 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useQuery } from 'react-query'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { getGroups, deleteGroup } from '../../api/groups'
|
||||
import { getGroups } from '../../api/groups'
|
||||
|
||||
const Groups = () => {
|
||||
let navigate = useNavigate()
|
||||
const [page, setPage] = useState(1)
|
||||
const [perPage, setPerPage] = useState(10)
|
||||
|
||||
const perPageOptions = [
|
||||
{
|
||||
value: 10,
|
||||
label: '10 rekordów',
|
||||
},
|
||||
{
|
||||
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 }),
|
||||
const { isLoading: areGroupsLoading, data: groups } = useQuery(
|
||||
['groups'],
|
||||
() => getGroups({ per_page: 1000 }),
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
setPage(1)
|
||||
}, [perPage])
|
||||
|
||||
if (areGroupsLoading) {
|
||||
return <div>Ładowanie</div>
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<button
|
||||
@ -58,7 +32,7 @@ const Groups = () => {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-100">
|
||||
{groups?.data?.groups.map(
|
||||
{groups?.data?.groups?.map(
|
||||
({
|
||||
id,
|
||||
name,
|
||||
@ -68,7 +42,9 @@ const Groups = () => {
|
||||
}) => (
|
||||
<tr key={id}>
|
||||
<td>{name}</td>
|
||||
<td>{project_supervisor.first_name + ' ' + project_supervisor.last_name}</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