Initial donations page

Related to Issue #42

components/marathon/donation/List.vue

@@ -0,0 +1,109 @@
+<template>
+  <div>
+    <div class="is-centered">
+      <WidgetLoading :while="[ donationsPage ]" />
+    </div>
+    <ElementTable v-show="donations" class="donations-table">
+      <ElementTableCell is-header class="date">
+        {{ $t('marathon.donations.table.date') }}
+      </ElementTableCell>
+      <ElementTableCell is-header class="name">
+        {{ $t('marathon.donations.table.name') }}
+      </ElementTableCell>
+      <ElementTableCell is-header class="amount">
+        {{ $t('marathon.donations.table.amount') }}
+      </ElementTableCell>
+      <ElementTableCell is-header class="comment">
+        {{ $t('marathon.donations.table.comment') }}
+      </ElementTableCell>
+
+      <MarathonDonationRow v-for="(donation, index) of donations" :key="donation.id" :class="getRowParity(index)" :donation="donation" :donation-currency="donationCurrency" />
+    </ElementTable>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { mapActions } from 'vuex';
+import { Donation, DonationPageParams, DonationState } from '~/types/api/donation';
+import { FullMarathon, MarathonState } from '~/types/api/marathon';
+import { OengusPagination } from '~/types/api/oengus-api';
+
+export default Vue.extend({
+  props: {
+    marathonId: {
+      type: String,
+      default: '',
+    },
+  },
+
+  data() {
+    return {
+      page: 0,
+      pageSize: 25,
+    };
+  },
+
+  async fetch(): Promise<void> {
+    await Promise.allSettled([
+      this.getDonations(this.donationParams),
+      this.getMarathon(this.marathonId),
+    ]);
+  },
+
+  computed: {
+    donationsPage(): OengusPagination<Donation>|undefined {
+      return (this.$store.state.api.donation as DonationState).donations[`${this.marathonId}-${this.page}-${this.pageSize}`];
+    },
+    donations(): Array<Donation>|undefined {
+      return this.donationsPage?.content;
+    },
+    donationParams(): { id: string, data: DonationPageParams } {
+      return {
+        id: this.marathonId,
+        data: {
+          page: this.page ?? 0,
+          size: this.pageSize ?? 25,
+        },
+      };
+    },
+    marathon(): FullMarathon|undefined {
+      return (this.$store.state.api.marathon as MarathonState).marathons[this.marathonId];
+    },
+    donationCurrency(): string|undefined {
+      return this.marathon?.donationCurrency;
+    },
+  },
+
+  methods: {
+    getRowParity(index: number): { 'is-even': boolean, 'is-odd': boolean } {
+      return {
+        'is-even': index % 2 === 0,
+        'is-odd': index % 2 === 1,
+      };
+    },
+    ...mapActions({
+      getDonations: 'api/donation/get',
+      getMarathon: 'api/marathon/get',
+    }),
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@use '~assets/table';
+
+.donations-table {
+  @include table.shrink(4, (
+    600px '.date' 3,
+    500px null (1fr auto 2fr),
+  ));
+
+  @media (max-width: 500px) {
+    & ::v-deep .name,
+    & ::v-deep .comment {
+      overflow-x: auto;
+    }
+  }
+}
+</style>

components/marathon/donation/Row.vue

@@ -0,0 +1,34 @@
+<template>
+  <ElementTableRow>
+    <ElementTableCell class="date">
+      <ElementTemporalDateTime :datetime="donation.date" format="mediumDateTime" />
+    </ElementTableCell>
+    <ElementTableCell class="name">
+      {{ donation.nickname }}
+    </ElementTableCell>
+    <ElementTableCell class="amount">
+      <i18n-n v-if="!hideValue" :value="donation.amount" :format="{ key: 'currency', currency: donationCurrency }" />
+    </ElementTableCell>
+    <ElementTableCell class="comment">
+      <ElementMarkdown :markdown="donation.comment" />
+    </ElementTableCell>
+  </ElementTableRow>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { Donation } from '~/types/api/donation';
+
+export default Vue.extend({
+  props: {
+    donation: {
+      type: Object as () => Donation,
+      default: undefined,
+    },
+    donationCurrency: {
+      type: String,
+      default: 'EUR',
+    },
+  },
+});
+</script>

pages/marathon/_marathon/donations.vue

@@ -1,6 +1,10 @@
 <template>
   <div>
-    Oengus marathon donations page stub
+    <h3 class="title is-3">
+      {{ $t('marathon.donations.title') }}
+    </h3>
+
+    <MarathonDonationList :marathon-id="marathonId" />
   </div>
 </template>
 
@@ -9,6 +13,12 @@ import Vue from 'vue';
 import { MetaInfo } from 'vue-meta';
 
 export default Vue.extend({
+  data() {
+    return {
+      marathonId: this.$route.params.marathon,
+    };
+  },
+
   head(): MetaInfo {
     return {
       title: this.$t('marathon.donations.title') as string,