From 6ef938e61e6cd26ecbb9721d76ada9b2a3b805eb Mon Sep 17 00:00:00 2001
From: Felix Ruf <felix.ruf@aoe.com>
Date: Thu, 18 Jan 2024 13:27:47 +0100
Subject: [PATCH] added print functionality to PrintList

---
 .../src/api/getShowParticipations.ts          |  11 ++
 .../src/components/misc/ActionButton.vue      |   7 +-
 .../printableList/PrintListPdfTemplate.vue    | 144 ++++++++++++++++++
 src/Resources/src/enums/Actions.ts            |   3 +-
 src/Resources/src/locales/de.json             |   3 +-
 src/Resources/src/locales/en.json             |   3 +-
 src/Resources/src/views/PrintableList.vue     | 103 +++++++++----
 7 files changed, 237 insertions(+), 37 deletions(-)
 create mode 100644 src/Resources/src/components/printableList/PrintListPdfTemplate.vue

diff --git a/src/Resources/src/api/getShowParticipations.ts b/src/Resources/src/api/getShowParticipations.ts
index c49db6c49..097ff7294 100644
--- a/src/Resources/src/api/getShowParticipations.ts
+++ b/src/Resources/src/api/getShowParticipations.ts
@@ -13,12 +13,19 @@ const REFETCH_TIME_ON_ERROR = 10000;
 export interface IParticipationsState {
     data: Dictionary<Dictionary<IBookedData>>,
     meals: Dictionary<IMealData>,
+    event: IEventParticipations,
     day: DateTime
 }
 
 export interface IBookedData {
     booked: number[]
 }
+
+export interface IEventParticipations {
+    name: string,
+    participants: string[]
+}
+
 export interface IMealData {
     title: {
         en: string,
@@ -49,6 +56,10 @@ export interface IMealWithVariations {
 const participationsState = reactive<IParticipationsState>({
     data: {},
     meals: {},
+    event: {
+        name: '',
+        participants: []
+    },
     day: {
         date: '',
         timezone_type: 0,
diff --git a/src/Resources/src/components/misc/ActionButton.vue b/src/Resources/src/components/misc/ActionButton.vue
index 505c28f88..44d847609 100644
--- a/src/Resources/src/components/misc/ActionButton.vue
+++ b/src/Resources/src/components/misc/ActionButton.vue
@@ -28,6 +28,11 @@
       class="z-[1] aspect-square h-8 w-8"
       :class="{'mr-1': btnText !== ''}"
     />
+    <DownloadIcon
+      v-if="action === Action.DOWNLOAD"
+      class="z-[1] aspect-square h-8 w-8"
+      :class="{'mr-1': btnText !== ''}"
+    />
     <p
       v-if="btnText !== ''"
       class="z-[1] m-0 flex h-full place-items-center text-left text-[10px] sm:text-[12px]"
@@ -40,7 +45,7 @@
 
 <script setup lang="ts">
 import { Action } from '@/enums/Actions';
-import { XIcon, PencilIcon, PlusIcon } from '@heroicons/vue/outline';
+import { XIcon, PencilIcon, PlusIcon, DownloadIcon } from '@heroicons/vue/outline';
 import { EyeOffIcon, ScaleIcon } from '@heroicons/vue/solid';
 
 withDefaults(defineProps<{
diff --git a/src/Resources/src/components/printableList/PrintListPdfTemplate.vue b/src/Resources/src/components/printableList/PrintListPdfTemplate.vue
new file mode 100644
index 000000000..1588ce61e
--- /dev/null
+++ b/src/Resources/src/components/printableList/PrintListPdfTemplate.vue
@@ -0,0 +1,144 @@
+<template>
+  <div
+    v-if="listData !== null && mealNames.length > 0 && participationCount.length > 0"
+    class="w-[700px]"
+  >
+    <div class="text-center">
+      <svg
+        class="mr-2 inline min-w-[36px] align-text-bottom text-primary"
+        width="36"
+        height="36"
+        viewBox="0 0 14 20"
+        fill="currentColor"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g clip-path="url(#clip0_2_216)">
+          <path
+            d="M14.0016 5.55655C14.0016 2.92526 12.7979 0 10.7548 0C8.71168 0 7.49414 2.92526 7.49414 5.55655C7.49414 7.66446 8.43418 8.94784 9.71416 9.36727L9.04815 18.1036C9.02993 18.3462 9.06058 18.5902 9.1382 18.8199C9.21581 19.0497 9.33869 19.2604 9.49907 19.4386C9.65945 19.6168 9.85385 19.7587 10.07 19.8553C10.2861 19.952 10.5193 20.0012 10.7548 20C10.9913 20.0004 11.2253 19.9508 11.4426 19.8543C11.6599 19.7578 11.8557 19.6164 12.0182 19.4388C12.1806 19.2612 12.3062 19.0511 12.3872 18.8215C12.4682 18.5919 12.5029 18.3476 12.4892 18.1036L11.7954 9.36727C13.0789 8.92633 14.0189 7.64295 14.0189 5.55655H14.0016Z"
+            fill="#3D3D3D"
+          />
+          <path
+            d="M5.34241 0.587805H5.27997C5.20346 0.588722 5.12789 0.60539 5.05768 0.636835C4.98747 0.66828 4.92403 0.713872 4.87107 0.770945C4.8181 0.828019 4.77667 0.89543 4.74921 0.969239C4.72174 1.04305 4.70878 1.12177 4.71109 1.20082L4.85678 5.83247C4.85143 5.98205 4.79142 6.12397 4.68882 6.22963C4.58623 6.33528 4.4487 6.39681 4.30395 6.40181C4.1592 6.40681 4.01799 6.35491 3.9088 6.25658C3.79961 6.15824 3.73055 6.02078 3.71555 5.87191L3.67046 1.1578C3.66682 1.00503 3.60506 0.859891 3.49857 0.753862C3.39208 0.647833 3.24944 0.589457 3.10158 0.59139H3.01833C2.87047 0.589457 2.72783 0.647833 2.62134 0.753862C2.51485 0.859891 2.45309 1.00503 2.44945 1.1578L2.38701 5.85398C2.38337 6.00676 2.32161 6.15189 2.21512 6.25792C2.10863 6.36395 1.96599 6.42232 1.81813 6.42039C1.74162 6.41994 1.66597 6.40373 1.59559 6.37272C1.52521 6.34171 1.46152 6.29652 1.40823 6.23978C1.35495 6.18304 1.31314 6.1159 1.28524 6.04227C1.25735 5.96864 1.24393 5.89001 1.24578 5.81096L1.388 1.17931C1.39232 1.09993 1.38072 1.02049 1.35393 0.945959C1.32714 0.87143 1.28575 0.803425 1.23234 0.746207C1.17892 0.688989 1.11465 0.643791 1.04354 0.613449C0.972438 0.583107 0.896033 0.568274 0.819119 0.569881H0.756681C0.609856 0.571533 0.469187 0.631092 0.363443 0.736377C0.257699 0.841662 0.194869 0.984718 0.187801 1.13629L0.000487147 5.93643C-0.0254684 6.60434 0.156186 7.26329 0.518846 7.81678C0.881506 8.37027 1.40612 8.78921 2.01585 9.01225L1.32209 18.0856C1.3033 18.3286 1.33369 18.5731 1.41131 18.8034C1.48894 19.0336 1.6121 19.2447 1.77296 19.4231C1.93382 19.6014 2.12886 19.7433 2.34566 19.8395C2.56246 19.9357 2.79627 19.9842 3.0322 19.982C3.26663 19.979 3.49804 19.9269 3.71245 19.8289C3.92686 19.7309 4.11982 19.589 4.27966 19.4117C4.4395 19.2344 4.56291 19.0255 4.64243 18.7976C4.72195 18.5697 4.75593 18.3275 4.74231 18.0856L4.04855 9.01225C4.65589 8.78504 5.17817 8.36521 5.54076 7.81279C5.90335 7.26037 6.08767 6.60363 6.06739 5.93643L5.89741 1.1578C5.89054 1.00864 5.82966 0.867608 5.72685 0.762685C5.62403 0.657761 5.48681 0.596618 5.34241 0.59139V0.587805Z"
+            fill="#3D3D3D"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_2_216">
+            <rect
+              width="21"
+              height="21"
+              fill="white"
+            />
+          </clipPath>
+        </defs>
+      </svg>
+      <h1 class="inline">
+        {{ t('printList.title') + dateString }}
+      </h1>
+    </div>
+    <div class="mb-20 px-4 sm:px-6 lg:px-8">
+      <div class="mt-8 flex flex-col">
+        <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+          <div class="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
+            <div class="aoe-shadow overflow-hidden ring-1 ring-black/5 md:rounded-lg">
+              <table class="min-w-full divide-y divide-gray-300">
+                <thead class="bg-white">
+                  <tr class="divide-y divide-gray-200">
+                    <th
+                      scope="col"
+                      class="px-4 py-3.5 text-left text-sm font-semibold text-primary"
+                    />
+                    <th
+                      v-for="(mealName, index) in mealNames"
+                      :key="index"
+                      scope="col"
+                      class="px-3 py-3.5 text-center text-sm font-semibold text-primary"
+                    >
+                      {{ mealName }}
+                    </th>
+                  </tr>
+                </thead>
+                <tbody class="divide-y divide-gray-200 bg-white">
+                  <template
+                    v-for="(participant, slotName) in listData.data"
+                    :key="String(slotName)"
+                  >
+                    <tr class="border-t border-gray-200">
+                      <th
+                        colspan="5"
+                        scope="colgroup"
+                        class="bg-gray-50 px-4 py-2 text-left text-sm font-semibold text-gray-900 sm:px-6"
+                      >
+                        {{ String(slotName) }}
+                      </th>
+                    </tr>
+                    <tr
+                      v-for="(participations, participantName, index) in participant"
+                      :key="index"
+                      :class="[index === 0 ? 'border-gray-300' : 'border-gray-200', 'border-t']"
+                    >
+                      <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-primary sm:pl-6">
+                        {{ String(participantName) }}
+                      </td>
+                      <td
+                        v-for="(meal, mealId) in listData.meals"
+                        :key="`${index}${String(mealId)}`"
+                        class="whitespace-nowrap px-3 py-4 text-center text-sm text-gray-500"
+                      >
+                        <svg
+                          v-if="participations.booked.includes(parseInt(String(mealId)))"
+                          xmlns="http://www.w3.org/2000/svg"
+                          viewBox="0 0 24 24"
+                          fill="currentColor"
+                          class="m-auto block h-6 w-6 text-primary"
+                        >
+                          <path
+                            fill-rule="evenodd"
+                            d="M19.916 4.626a.75.75 0 01.208 1.04l-9 13.5a.75.75 0 01-1.154.114l-6-6a.75.75 0 011.06-1.06l5.353 5.353 8.493-12.739a.75.75 0 011.04-.208z"
+                            clip-rule="evenodd"
+                          />
+                        </svg>
+                      </td>
+                    </tr>
+                  </template>
+                  <tr class="border-t border-gray-200">
+                    <th
+                      scope="colgroup"
+                      class="bg-gray-50 px-4 py-2 text-left text-sm font-semibold text-gray-900 sm:px-6"
+                    >
+                      {{ t('printList.participations') }}
+                    </th>
+                    <th
+                      v-for="(totalSum, index) in participationCount"
+                      :key="index"
+                      scope="colgroup"
+                      class="bg-gray-50 px-4 py-2 text-center text-sm font-semibold text-gray-900 sm:px-6"
+                    >
+                      {{ totalSum }}
+                    </th>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import { type ListData } from '@/api/getPrintableListData';
+
+const { t } = useI18n();
+
+withDefaults(defineProps<{
+  dateString?: string,
+  mealNames: string[],
+  listData: ListData,
+  participationCount: number[]
+}>(), {
+  dateString: ''
+});
+</script>
\ No newline at end of file
diff --git a/src/Resources/src/enums/Actions.ts b/src/Resources/src/enums/Actions.ts
index 7e47e6363..b80c8a4fc 100644
--- a/src/Resources/src/enums/Actions.ts
+++ b/src/Resources/src/enums/Actions.ts
@@ -3,5 +3,6 @@ export enum Action {
     DELETE = 'DELETE',
     CREATE = 'CREATE',
     HIDE = 'HIDE',
-    BALANCE = 'BALANCE'
+    BALANCE = 'BALANCE',
+    DOWNLOAD = 'DOWNLOAD'
 }
\ No newline at end of file
diff --git a/src/Resources/src/locales/de.json b/src/Resources/src/locales/de.json
index 0bf86228a..457472674 100644
--- a/src/Resources/src/locales/de.json
+++ b/src/Resources/src/locales/de.json
@@ -263,7 +263,8 @@
   },
   "printList": {
     "title": "Teilnahmen am ",
-    "participations": "Teilnahmen"
+    "participations": "Teilnahmen",
+    "download": "Pdf downloaden"
   },
   "session": {
     "expired": "Session abgelaufen!"
diff --git a/src/Resources/src/locales/en.json b/src/Resources/src/locales/en.json
index b2fd877a8..5d0cdf4d9 100644
--- a/src/Resources/src/locales/en.json
+++ b/src/Resources/src/locales/en.json
@@ -263,7 +263,8 @@
   },
   "printList": {
     "title": "Participations on ",
-    "participations": "Participations"
+    "participations": "Participations",
+    "download": "Download pdf"
   },
   "session": {
     "expired": "Session expired!"
diff --git a/src/Resources/src/views/PrintableList.vue b/src/Resources/src/views/PrintableList.vue
index ad20175a2..2c8d00382 100644
--- a/src/Resources/src/views/PrintableList.vue
+++ b/src/Resources/src/views/PrintableList.vue
@@ -1,36 +1,55 @@
 <template>
+  <Vue3Html2pdf
+    ref="html2pdf"
+    :html-to-pdf-options="{ filename: 'result.pdf', image: { type: 'png' }, margin: 10, jsPDF: { unit: 'mm' } }"
+    :pdf-quality="2"
+    pdf-format="a4"
+    pdf-orientation="portrait"
+    pdf-content-width="700px"
+    :manual-pagination="true"
+  >
+    <template #pdf-content>
+      <PrintListPdfTemplate
+        :date-string="dateString"
+        :list-data="// @ts-ignore
+          (listData as ListData)"
+        :meal-names="mealNames"
+        :participation-count="participationCount"
+      />
+    </template>
+  </Vue3Html2pdf>
   <div class="text-center">
-    <svg
-      class="mr-2 inline min-w-[36px] align-text-bottom text-primary"
-      width="36"
-      height="36"
-      viewBox="0 0 14 20"
-      fill="currentColor"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <g clip-path="url(#clip0_2_216)">
-        <path
-          d="M14.0016 5.55655C14.0016 2.92526 12.7979 0 10.7548 0C8.71168 0 7.49414 2.92526 7.49414 5.55655C7.49414 7.66446 8.43418 8.94784 9.71416 9.36727L9.04815 18.1036C9.02993 18.3462 9.06058 18.5902 9.1382 18.8199C9.21581 19.0497 9.33869 19.2604 9.49907 19.4386C9.65945 19.6168 9.85385 19.7587 10.07 19.8553C10.2861 19.952 10.5193 20.0012 10.7548 20C10.9913 20.0004 11.2253 19.9508 11.4426 19.8543C11.6599 19.7578 11.8557 19.6164 12.0182 19.4388C12.1806 19.2612 12.3062 19.0511 12.3872 18.8215C12.4682 18.5919 12.5029 18.3476 12.4892 18.1036L11.7954 9.36727C13.0789 8.92633 14.0189 7.64295 14.0189 5.55655H14.0016Z"
-          fill="#3D3D3D"
-        />
-        <path
-          d="M5.34241 0.587805H5.27997C5.20346 0.588722 5.12789 0.60539 5.05768 0.636835C4.98747 0.66828 4.92403 0.713872 4.87107 0.770945C4.8181 0.828019 4.77667 0.89543 4.74921 0.969239C4.72174 1.04305 4.70878 1.12177 4.71109 1.20082L4.85678 5.83247C4.85143 5.98205 4.79142 6.12397 4.68882 6.22963C4.58623 6.33528 4.4487 6.39681 4.30395 6.40181C4.1592 6.40681 4.01799 6.35491 3.9088 6.25658C3.79961 6.15824 3.73055 6.02078 3.71555 5.87191L3.67046 1.1578C3.66682 1.00503 3.60506 0.859891 3.49857 0.753862C3.39208 0.647833 3.24944 0.589457 3.10158 0.59139H3.01833C2.87047 0.589457 2.72783 0.647833 2.62134 0.753862C2.51485 0.859891 2.45309 1.00503 2.44945 1.1578L2.38701 5.85398C2.38337 6.00676 2.32161 6.15189 2.21512 6.25792C2.10863 6.36395 1.96599 6.42232 1.81813 6.42039C1.74162 6.41994 1.66597 6.40373 1.59559 6.37272C1.52521 6.34171 1.46152 6.29652 1.40823 6.23978C1.35495 6.18304 1.31314 6.1159 1.28524 6.04227C1.25735 5.96864 1.24393 5.89001 1.24578 5.81096L1.388 1.17931C1.39232 1.09993 1.38072 1.02049 1.35393 0.945959C1.32714 0.87143 1.28575 0.803425 1.23234 0.746207C1.17892 0.688989 1.11465 0.643791 1.04354 0.613449C0.972438 0.583107 0.896033 0.568274 0.819119 0.569881H0.756681C0.609856 0.571533 0.469187 0.631092 0.363443 0.736377C0.257699 0.841662 0.194869 0.984718 0.187801 1.13629L0.000487147 5.93643C-0.0254684 6.60434 0.156186 7.26329 0.518846 7.81678C0.881506 8.37027 1.40612 8.78921 2.01585 9.01225L1.32209 18.0856C1.3033 18.3286 1.33369 18.5731 1.41131 18.8034C1.48894 19.0336 1.6121 19.2447 1.77296 19.4231C1.93382 19.6014 2.12886 19.7433 2.34566 19.8395C2.56246 19.9357 2.79627 19.9842 3.0322 19.982C3.26663 19.979 3.49804 19.9269 3.71245 19.8289C3.92686 19.7309 4.11982 19.589 4.27966 19.4117C4.4395 19.2344 4.56291 19.0255 4.64243 18.7976C4.72195 18.5697 4.75593 18.3275 4.74231 18.0856L4.04855 9.01225C4.65589 8.78504 5.17817 8.36521 5.54076 7.81279C5.90335 7.26037 6.08767 6.60363 6.06739 5.93643L5.89741 1.1578C5.89054 1.00864 5.82966 0.867608 5.72685 0.762685C5.62403 0.657761 5.48681 0.596618 5.34241 0.59139V0.587805Z"
-          fill="#3D3D3D"
-        />
-      </g>
-      <defs>
-        <clipPath id="clip0_2_216">
-          <rect
-            width="21"
-            height="21"
-            fill="white"
-          />
-        </clipPath>
-      </defs>
-    </svg>
-    <h1 class="inline">
-      {{ t('printList.title') + dateString }}
-    </h1>
+        <svg
+          class="mr-2 inline min-w-[36px] align-text-bottom text-primary"
+          width="36"
+          height="36"
+          viewBox="0 0 14 20"
+          fill="currentColor"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <g clip-path="url(#clip0_2_216)">
+            <path
+              d="M14.0016 5.55655C14.0016 2.92526 12.7979 0 10.7548 0C8.71168 0 7.49414 2.92526 7.49414 5.55655C7.49414 7.66446 8.43418 8.94784 9.71416 9.36727L9.04815 18.1036C9.02993 18.3462 9.06058 18.5902 9.1382 18.8199C9.21581 19.0497 9.33869 19.2604 9.49907 19.4386C9.65945 19.6168 9.85385 19.7587 10.07 19.8553C10.2861 19.952 10.5193 20.0012 10.7548 20C10.9913 20.0004 11.2253 19.9508 11.4426 19.8543C11.6599 19.7578 11.8557 19.6164 12.0182 19.4388C12.1806 19.2612 12.3062 19.0511 12.3872 18.8215C12.4682 18.5919 12.5029 18.3476 12.4892 18.1036L11.7954 9.36727C13.0789 8.92633 14.0189 7.64295 14.0189 5.55655H14.0016Z"
+              fill="#3D3D3D"
+            />
+            <path
+              d="M5.34241 0.587805H5.27997C5.20346 0.588722 5.12789 0.60539 5.05768 0.636835C4.98747 0.66828 4.92403 0.713872 4.87107 0.770945C4.8181 0.828019 4.77667 0.89543 4.74921 0.969239C4.72174 1.04305 4.70878 1.12177 4.71109 1.20082L4.85678 5.83247C4.85143 5.98205 4.79142 6.12397 4.68882 6.22963C4.58623 6.33528 4.4487 6.39681 4.30395 6.40181C4.1592 6.40681 4.01799 6.35491 3.9088 6.25658C3.79961 6.15824 3.73055 6.02078 3.71555 5.87191L3.67046 1.1578C3.66682 1.00503 3.60506 0.859891 3.49857 0.753862C3.39208 0.647833 3.24944 0.589457 3.10158 0.59139H3.01833C2.87047 0.589457 2.72783 0.647833 2.62134 0.753862C2.51485 0.859891 2.45309 1.00503 2.44945 1.1578L2.38701 5.85398C2.38337 6.00676 2.32161 6.15189 2.21512 6.25792C2.10863 6.36395 1.96599 6.42232 1.81813 6.42039C1.74162 6.41994 1.66597 6.40373 1.59559 6.37272C1.52521 6.34171 1.46152 6.29652 1.40823 6.23978C1.35495 6.18304 1.31314 6.1159 1.28524 6.04227C1.25735 5.96864 1.24393 5.89001 1.24578 5.81096L1.388 1.17931C1.39232 1.09993 1.38072 1.02049 1.35393 0.945959C1.32714 0.87143 1.28575 0.803425 1.23234 0.746207C1.17892 0.688989 1.11465 0.643791 1.04354 0.613449C0.972438 0.583107 0.896033 0.568274 0.819119 0.569881H0.756681C0.609856 0.571533 0.469187 0.631092 0.363443 0.736377C0.257699 0.841662 0.194869 0.984718 0.187801 1.13629L0.000487147 5.93643C-0.0254684 6.60434 0.156186 7.26329 0.518846 7.81678C0.881506 8.37027 1.40612 8.78921 2.01585 9.01225L1.32209 18.0856C1.3033 18.3286 1.33369 18.5731 1.41131 18.8034C1.48894 19.0336 1.6121 19.2447 1.77296 19.4231C1.93382 19.6014 2.12886 19.7433 2.34566 19.8395C2.56246 19.9357 2.79627 19.9842 3.0322 19.982C3.26663 19.979 3.49804 19.9269 3.71245 19.8289C3.92686 19.7309 4.11982 19.589 4.27966 19.4117C4.4395 19.2344 4.56291 19.0255 4.64243 18.7976C4.72195 18.5697 4.75593 18.3275 4.74231 18.0856L4.04855 9.01225C4.65589 8.78504 5.17817 8.36521 5.54076 7.81279C5.90335 7.26037 6.08767 6.60363 6.06739 5.93643L5.89741 1.1578C5.89054 1.00864 5.82966 0.867608 5.72685 0.762685C5.62403 0.657761 5.48681 0.596618 5.34241 0.59139V0.587805Z"
+              fill="#3D3D3D"
+            />
+          </g>
+          <defs>
+            <clipPath id="clip0_2_216">
+              <rect
+                width="21"
+                height="21"
+                fill="white"
+              />
+            </clipPath>
+          </defs>
+        </svg>
+        <h1 class="inline">
+          {{ t('printList.title') + dateString }}
+        </h1>
   </div>
   <div class="mb-20 px-4 sm:px-6 lg:px-8">
     <div class="mt-8 flex flex-col">
@@ -120,18 +139,28 @@
       </div>
     </div>
   </div>
+  <ActionButton
+    :btn-text="t('printList.download')"
+    :action="Action.DOWNLOAD"
+    @click="download()"
+  />
 </template>
 
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n';
-import { usePrintableListData } from '@/api/getPrintableListData';
-import { computed } from 'vue';
+import { type ListData, usePrintableListData } from '@/api/getPrintableListData';
+import { computed, ref } from 'vue';
 import { useProgress } from '@marcoschulte/vue3-progress';
+import Vue3Html2pdf from 'vue3-html2pdf';
+import ActionButton from '@/components/misc/ActionButton.vue';
+import { Action } from '@/enums/Actions';
+import PrintListPdfTemplate from '@/components/printableList/PrintListPdfTemplate.vue';
 
 const progress = useProgress().start()
 const { t, locale } = useI18n()
 
 const { listData } = usePrintableListData();
+const html2pdf = ref(null);
 
 const mealNames = computed(() => {
   const names: string[] = [];
@@ -152,4 +181,12 @@ const participationCount = computed(() => {
 const dateString = computed(() => new Date(Date.parse(listData.day.date)).toLocaleDateString(locale.value, {weekday: 'long', month: 'numeric', day: 'numeric'}));
 
 progress.finish()
+
+function download() {
+  if (html2pdf.value) {
+    html2pdf.value.generatePdf();
+  } else {
+    console.log('Html2Pdf not found');
+  }
+}
 </script>
\ No newline at end of file