3.3 Add schedule export on frontend

frontend/src/api/schedule.ts

@@ -126,3 +126,11 @@ export const assignSupervisor = ({
     },
   )
 }
+
+export const downloadSchedule = (scheduleId: number) =>
+  axiosInstance.post(
+    `http://127.0.0.1:5000/api/coordinator/examination_schedule/${scheduleId}/download/`,
+    {
+      responseType: 'blob',
+    },
+  )

frontend/src/views/coordinator/Schedule.tsx

@@ -2,7 +2,7 @@ import { Calendar, luxonLocalizer, Views } from 'react-big-calendar'
 import { DateTime, Settings } from 'luxon'
 import { useCallback, useState } from 'react'
 import { useMutation, useQuery } from 'react-query'
-import { createEvent, getEvents } from '../../api/schedule'
+import { createEvent, downloadSchedule, getEvents } from '../../api/schedule'
 import { useParams } from 'react-router-dom'
 import Modal from 'react-modal'
 import { useForm } from 'react-hook-form'
@@ -84,6 +84,21 @@ const Schedule = () => {
       createEvent(data),
   )
 
+  const { mutate: mutateDownload } = useMutation(
+    'downloadSchedule',
+    (scheduleId: number) => downloadSchedule(scheduleId),
+    {
+      onSuccess: (res) => {
+        const url = window.URL.createObjectURL(new Blob([res.data]))
+        const link = document.createElement('a')
+        link.href = url
+        link.setAttribute('download', 'harmonogram.pdf')
+        document.body.appendChild(link)
+        link.click()
+      },
+    },
+  )
+
   const handleSelectSlot = async (event: any) => {
     setSelectedDate(event)
     if (view === Views.MONTH) {
@@ -139,7 +154,13 @@ const Schedule = () => {
   }
 
   return (
-    <div>
+    <div className="flex flex-col">
+      <button
+        className="btn btn-success btn-xs md:btn-md self-end mb-4"
+        onClick={() => mutateDownload(Number(id))}
+      >
+        Eksportuj harmonogram
+      </button>
       <Calendar
         localizer={luxonLocalizer(DateTime)}
         startAccessor="start"