Merge pull request 'Generate invitations PDF asynchronously' (#311) from generate-invitations-doc-async into main

Reviewed-on: #311

app/api/abstract-api.tsx

@@ -10,6 +10,8 @@ export interface Api<T extends Entity> {
   create(serializable: Serializable<T>, object: T, callback: (object: T) => void): void;
   update(serializable: Serializable<T>, object: T, callback: () => void): void;
   destroy(serializable: Serializable<T>, object: T, callback: () => void): void;
+
+  post(serializable: Serializable<T>, path: string, callback: () => void): void;
 }
 
 export interface Serializable<T> {
@@ -98,4 +100,14 @@ export class AbstractApi<T extends Entity> implements Api<T> {
     }).then(callback)
       .catch((error) => console.error(error));
   }
+
+  post(serializable: Serializable<T>, path: string, callback: () => void): void {
+    fetch(`/api/${getSlug()}/${serializable.apiPath()}/${path}`, {
+      method: 'POST',
+      headers: {
+        'X-CSRF-TOKEN': getCsrfToken(),
+      }
+    }).then(callback)
+      .catch((error) => console.error(error));
+  }
 }

app/ui/invitations/board.tsx

@@ -11,6 +11,7 @@ import { LinkIcon, TrashIcon } from "@heroicons/react/24/outline";
 import { useEffect, useRef } from "react";
 import { useState } from "react";
 import { classNames } from "../components/button";
+import { Toast } from "primereact/toast";
 
 function InvitationCard({ invitation, allGuests, onGuestAdded, onDestroy }: {
   invitation: Invitation,
@@ -117,6 +118,7 @@ export default function InvitationsBoard({ guests, invitations: originalInvitati
   guests: Array<Guest>,
   invitations: Array<Invitation>
 }) {
+  const toast = useRef<Toast>(null);
   const api = new AbstractApi<Invitation>();
   const serializer = new InvitationSerializer();
 
@@ -146,14 +148,19 @@ export default function InvitationsBoard({ guests, invitations: originalInvitati
   }
 
   function handleDownloadQrCodes() {
-    api.getAllPdf(serializer, () => {
-      console.log("QR codes downloaded");
+    api.post(serializer, 'email', () => {
+      toast.current?.show({
+        severity: 'success',
+        summary: 'Email scheduled',
+        detail: 'A document with the QR codes will be sent to the organizer\'s email.'
     });
+    })
   }
 
   return (
     <div className="flex h-screen">
       {/* Left Column: Guests */}
+      <Toast ref={toast} />
       <div className="w-1/4 h-full overflow-auto border-r border-gray-300 p-4">
         <h2 className="text-lg font-semibold mb-4">{unassignedGuests.length} guests without invitation</h2>
         <div>
@@ -180,7 +187,7 @@ export default function InvitationsBoard({ guests, invitations: originalInvitati
           onClick={handleDownloadQrCodes}
           className={classNames('primary')}
         >
-          Download QR codes
+          Send QR codes via email
         </button>