Merge pull request #407 from AOEpeople/feature/#261414-print-event-pa…

…rticipants Feature/#261414 print event participants
AOEpeople · Jan 23, 2024 · 19712cb · 19712cb
2 parents 7251e39 + 932bf12
commit 19712cb
Show file tree

Hide file tree

Showing 7 changed files with 199 additions and 6 deletions.
diff --git 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
@@ -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
@@ -0,0 +1,137 @@
+<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="w-[700px]">
+      <div class="flex w-[700px] flex-col">
+        <div class="w-[700px]">
+          <div class="inline-block w-[700px] min-w-full py-2 align-middle">
+            <div class="aoe-shadow w-[700px] ring-1 ring-black/5 md:rounded-lg">
+              <table class="w-[700px] 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-[18px]/[24px] font-semibold text-primary"
+                    />
+                    <th
+                      v-for="(mealName, index) in mealNames"
+                      :key="index"
+                      scope="col"
+                      class="px-3 py-3.5 text-center text-[18px]/[24px] 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-[18px]/[24px] 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-[18px]/[24px] 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-[18px]/[24px] text-gray-500"
+                      >
+                        <div
+                          v-if="participations.booked.includes(parseInt(String(mealId)))"
+                          class="h-full w-full text-primary"
+                        >
+                          &#x2714;
+                        </div>
+                      </td>
+                    </tr>
+                  </template>
+                  <tr class="border-t border-gray-200">
+                    <th
+                      scope="colgroup"
+                      class="bg-gray-50 px-4 py-2 text-left text-[18px]/[24px] 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-[18px]/[24px] 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>
diff --git 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'
 }
diff --git 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
@@ -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
@@ -1,4 +1,23 @@
 <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"
@@ -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>