feat: implement Proposal Application Acceptance Workflow

src/components/ApplicationDetailsModal.tsx

@@ -3,14 +3,26 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Button, Modal, Prose } from '@uzh-bf/design-system'
 import { add, format, parseISO } from 'date-fns'
 import { useState } from 'react'
+import toast from 'react-hot-toast'
+import { trpc } from 'src/lib/trpc'
 import { ApplicationDetails } from 'src/types/app'
 
-function ApplicationDetailsModal({ row }: { row: ApplicationDetails }) {
+function ApplicationDetailsModal({
+  row,
+  isProposalOpen,
+  setIsProposalOpen,
+}: {
+  row: ApplicationDetails
+  isProposalOpen: boolean
+  setIsProposalOpen: (isOpen: boolean) => void
+}) {
   const FileTypeIconMap: Record<string, IconDefinition> = {
     'application/pdf': faFilePdf,
   }
   const [isOpen, setIsOpen] = useState(false)
 
+  const acceptApplication = trpc.acceptProposalApplication.useMutation()
+
   return (
     <Modal
       title={`Application by ${row?.fullName}`}
@@ -39,7 +51,24 @@ function ApplicationDetailsModal({ row }: { row: ApplicationDetails }) {
         </div>
         <div>
           <h1 className="text-base font-bold">Status:</h1>
-          <p className="pb-2 text-base">{row?.statusKey}</p>
+          <p className="pb-2 text-base">
+            {isProposalOpen ? row?.statusKey : 'Please Refresh Page'}
+            {isProposalOpen && row?.statusKey === 'OPEN' ? (
+              <Button
+                onClick={async () => {
+                  setIsProposalOpen(false)
+                  await acceptApplication.mutateAsync({
+                    proposalId: row.proposalId,
+                    proposalApplicationId: row.id,
+                    applicantEmail: row.email,
+                  })
+                  toast.success('Application accepted successfully!')
+                }}
+              >
+                ACCEPT (Non Reversible)
+              </Button>
+            ) : null}
+          </p>
           <h1 className="text-base font-bold">Working Period:</h1>
           <p className="pb-2 text-base">
             {format(parseISO(row.plannedStartAt), 'dd.MM.Y')} -{' '}

src/components/ProposalApplication.tsx

@@ -1,5 +1,6 @@
 import { H2, Table } from '@uzh-bf/design-system'
 import { add, format, parseISO } from 'date-fns'
+import { useState } from 'react'
 import { ApplicationDetails, ProposalDetails } from 'src/types/app'
 import ApplicationDetailsModal from './ApplicationDetailsModal'
 import ApplicationForm from './ApplicationForm'
@@ -15,6 +16,8 @@ export default function ProposalApplication({
   isStudent,
   isSupervisor,
 }: ProposalApplicationProps) {
+  const [isProposalOpen, setIsProposalOpen] = useState<boolean>(true)
+
   if (proposalDetails?.typeKey === 'SUPERVISOR') {
     return (
       <div className="p-4">
@@ -66,7 +69,11 @@ export default function ProposalApplication({
                     label: 'Details',
                     accessor: 'details',
                     transformer: ({ row }) => (
-                      <ApplicationDetailsModal row={row} />
+                      <ApplicationDetailsModal
+                        row={row}
+                        isProposalOpen={isProposalOpen}
+                        setIsProposalOpen={setIsProposalOpen}
+                      />
                     ),
                   },
                 ]}

src/server/routers/_app.ts

@@ -242,6 +242,21 @@ export const appRouter = router({
     .mutation(async ({ ctx, input }) => {
       const res = await axios.post(process.env.APPLICATION_URL as string, input)
     }),
+
+  acceptProposalApplication: publicProcedure
+    .input(
+      z.object({
+        proposalId: z.string(),
+        proposalApplicationId: z.string(),
+        applicantEmail: z.string().email(),
+      })
+    )
+    .mutation(async ({ ctx, input }) => {
+      const res = await axios.post(
+        process.env.APPLICATION_ACCEPTANCE_URL as string,
+        input
+      )
+    }),
 })
 
 export type AppRouter = typeof appRouter