Upload of publications in administration (#156)

* create PublicationUploader

* add uploading publications for current semester

* add Accept to Uploader

* refactor uploading publications

* add order to Publication

* refactor/cleanup + style the section

---------

Co-authored-by: rtrembecky <[email protected]>

src/components/FileUploader/FileUploader.tsx

@@ -7,10 +7,11 @@ import {Accept, DropzoneOptions, useDropzone} from 'react-dropzone'
 interface FileUploaderProps {
   uploadLink: string
   acceptedFormats?: Accept
+  adjustFormData?: (formData: FormData) => void
   refetch: () => void
 }
 
-export const FileUploader: FC<FileUploaderProps> = ({uploadLink, acceptedFormats, refetch}) => {
+export const FileUploader: FC<FileUploaderProps> = ({uploadLink, acceptedFormats, adjustFormData, refetch}) => {
   const {mutate: fileUpload} = useMutation({
     mutationFn: (formData: FormData) => axios.post(uploadLink, formData),
     onSuccess: () => refetch(),
@@ -23,9 +24,10 @@ export const FileUploader: FC<FileUploaderProps> = ({uploadLink, acceptedFormats
       }
       const formData = new FormData()
       formData.append('file', acceptedFiles[0])
+      adjustFormData?.(formData)
       fileUpload(formData)
     },
-    [fileUpload],
+    [adjustFormData, fileUpload],
   )
 
   const {getRootProps, getInputProps} = useDropzone({

src/components/PublicationUploader/PublicationUploader.tsx

@@ -0,0 +1,43 @@
+import {Stack} from '@mui/material'
+import {useQueryClient} from '@tanstack/react-query'
+import {FC} from 'react'
+
+import {SemesterWithProblems} from '@/types/api/generated/competition'
+
+import {Link} from '../Clickable/Clickable'
+import {FileUploader} from '../FileUploader/FileUploader'
+
+interface PublicationUploaderProps {
+  semesterId: string
+  order: number
+  semesterData: SemesterWithProblems | undefined
+}
+
+export const PublicationUploader: FC<PublicationUploaderProps> = ({semesterId, order, semesterData}) => {
+  const queryClient = useQueryClient()
+
+  const refetch = () => queryClient.invalidateQueries({queryKey: ['competition', 'semester', semesterId]})
+
+  const appendFormData = (formData: FormData) => {
+    formData.append('publication_type', 'Časopisy')
+    formData.append('event', semesterId)
+    formData.append('order', order.toString())
+  }
+
+  const publication = semesterData?.publication_set.find((publication) => publication.order === order)
+
+  return (
+    <Stack direction="row" gap={2} alignItems="center">
+      <h4>{order}. Časopis:</h4>
+      {publication && (
+        <Link href={`/api/competition/publication/${publication.id}/download`}>{publication.name}.pdf</Link>
+      )}
+      <FileUploader
+        uploadLink={'/api/competition/publication/upload/'}
+        acceptedFormats={{'application/pdf': ['.pdf']}}
+        adjustFormData={appendFormData}
+        refetch={refetch}
+      />
+    </Stack>
+  )
+}

src/components/SemesterAdministration/SemesterAdministration.tsx

@@ -1,3 +1,4 @@
+import {Stack} from '@mui/material'
 import {useQuery} from '@tanstack/react-query'
 import axios from 'axios'
 import {useRouter} from 'next/router'
@@ -9,6 +10,7 @@ import {useHasPermissions} from '@/utils/useHasPermissions'
 import {Button, Link} from '../Clickable/Clickable'
 import {Loading} from '../Loading/Loading'
 import styles from '../Problems/Problems.module.scss'
+import {PublicationUploader} from '../PublicationUploader/PublicationUploader'
 import {Result} from '../Results/ResultsRow'
 
 interface PostalCard {
@@ -125,6 +127,12 @@ export const SemesterAdministration: FC = () => {
       ) : (
         <></>
       )}
+      <Stack mt={1} gap={1}>
+        <h3>Nahrávanie časopisov</h3>
+        {[1, 2, 3].map((order) => (
+          <PublicationUploader key={order} semesterId={semesterId ?? ''} order={order} semesterData={semester} />
+        ))}
+      </Stack>
     </>
   )
 }

src/types/api/competition.ts

@@ -13,6 +13,7 @@ export interface Publication {
   file: string
   publication_type: number | null
   event: number | null
+  order: number | null
 }
 
 export interface RegistrationLink {

src/types/api/generated/competition.ts

@@ -4,6 +4,7 @@ export interface Publication {
   file: any
   publication_type?: any | null
   event?: any | null
+  order: number | null
 }
 
 export interface RegistrationLink {