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