connect groups endpoint's to frontend

backend/app/coordinator/routes/groups.py

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

frontend/src/api/groups.ts

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

frontend/src/views/coordinator/AddGroup.tsx

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

frontend/src/views/coordinator/Groups.tsx

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