Merge pull request 'Add a button to download a PDF file with all QR codes' (#306) from invitations-download-pdf into main

Reviewed-on: #306

app/api/abstract-api.tsx

@@ -3,6 +3,7 @@
 import { Entity } from '@/app/lib/definitions';
 import { getCsrfToken, getSlug } from '@/app/lib/utils';
 
+
 export interface Api<T extends Entity> {
   getAll(serializable: Serializable<T>, callback: (objets: T[]) => void): void;
   get(serializable: Serializable<T>, id: string, callback: (object: T) => void): void;
@@ -30,6 +31,18 @@ export class AbstractApi<T extends Entity> implements Api<T> {
       });
   }
 
+  getAllPdf(serializable: Serializable<T>, callback: () => void): void {
+    fetch(`/api/${getSlug()}/${serializable.apiPath()}`, {
+      headers: {
+        'Accept': 'application/pdf',
+      }
+    }).then(res => res.blob())
+      .then(blob => {
+        var file = window.URL.createObjectURL(blob);
+        window.location.assign(file);
+      });
+  }
+
   get(serializable: Serializable<T>, id: (string | undefined), callback: (object: T) => void): void {
     const endpoint = id ? `/api/${getSlug()}/${serializable.apiPath()}/${id}` : `/api/${getSlug()}/${serializable.apiPath()}`;
     fetch(endpoint)

app/ui/components/button.tsx

@@ -5,7 +5,7 @@ import clsx from "clsx";
 type ButtonColor = 'primary' | 'blue' | 'green' | 'red' | 'yellow' | 'gray';
 
 export function classNames(type: ButtonColor) {
-    return (clsx("text-white py-1 px-2 mx-1 rounded disabled:opacity-50 disabled:cursor-not-allowed", {
+    return (clsx("text-white py-1 px-2 m-2 rounded disabled:opacity-50 disabled:cursor-not-allowed", {
         'bg-blue-400 hover:bg-blue-600': type === 'primary' || type === 'blue',
         'bg-green-500 hover:bg-green-600': type === 'green',
         'bg-red-500 hover:bg-red-600': type === 'red',

app/ui/invitations/board.tsx

@@ -10,6 +10,7 @@ import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-d
 import { LinkIcon, TrashIcon } from "@heroicons/react/24/outline";
 import { useEffect, useRef } from "react";
 import { useState } from "react";
+import { classNames } from "../components/button";
 
 function InvitationCard({ invitation, allGuests, onGuestAdded, onDestroy }: {
   invitation: Invitation,
@@ -144,6 +145,12 @@ export default function InvitationsBoard({ guests, invitations: originalInvitati
     });
   }
 
+  function handleDownloadQrCodes() {
+    api.getAllPdf(serializer, () => {
+      console.log("QR codes downloaded");
+    });
+  }
+
   return (
     <div className="flex h-screen">
       {/* Left Column: Guests */}
@@ -164,11 +171,18 @@ export default function InvitationsBoard({ guests, invitations: originalInvitati
 
         <button
           onClick={handleCreateInvitation}
-          className="mb-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+          className={classNames('primary')}
         >
           Create New Invitation
         </button>
 
+        <button
+          onClick={handleDownloadQrCodes}
+          className={classNames('primary')}
+        >
+          Download QR codes
+        </button>
+
 
         <div className="grid grid-cols-4 gap-6">