Incentives page

Related to Issue #41

components/marathon/incentive/List.vue

@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <WidgetLoading :while="[ incentiveList ]" />
+    <ElementTable v-show="incentives" class="incentives-table">
+      <ElementTableCell is-header class="game">
+        {{ $t('marathon.incentives.management.table.game') }}
+      </ElementTableCell>
+      <ElementTableCell is-header class="incentive">
+        {{ $t('marathon.incentives.management.table.incentive') }}
+      </ElementTableCell>
+      <ElementTableCell is-header class="description">
+        {{ $t('marathon.incentives.management.table.description') }}
+      </ElementTableCell>
+      <ElementTableCell is-header class="goal-progress">
+        {{ $t('marathon.incentives.management.table.progress') }}
+      </ElementTableCell>
+
+      <MarathonIncentiveRow v-for="(incentive, index) of incentives" :key="incentive.id" :class="getRowParity(index)" :incentive="incentive" />
+    </ElementTable>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { mapActions } from 'vuex';
+import { Incentive, IncentiveList, IncentiveState } from '~/types/api/incentive';
+
+export default Vue.extend({
+  props: {
+    marathonId: {
+      type: String,
+      default: '',
+    },
+  },
+
+  async fetch(): Promise<void> {
+    await Promise.allSettled([
+      this.getIncentives(this.marathonId),
+    ]);
+  },
+
+  computed: {
+    incentiveList(): IncentiveList|undefined {
+      return (this.$store.state.api.incentive as IncentiveState).incentives[this.marathonId];
+    },
+    incentives(): Array<Incentive>|undefined {
+      return this.incentiveList?.incentives;
+    },
+  },
+
+  methods: {
+    getRowParity(index: number): { 'is-even': boolean, 'is-odd': boolean } {
+      return {
+        'is-even': index % 2 === 0,
+        'is-odd': index % 2 === 1,
+      };
+    },
+    ...mapActions({
+      getIncentives: 'api/incentive/get',
+    }),
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@use '~assets/table';
+
+.incentives-table {
+  @include table.shrink(4, ());
+}
+</style>

components/marathon/incentive/Row.vue

@@ -0,0 +1,32 @@
+<template>
+  <ElementTableRow>
+    <ElementTableCell class="game">
+      {{ incentive.scheduleLine.gameName }}
+    </ElementTableCell>
+    <ElementTableCell class="incentive">
+      {{ incentive.name }}
+    </ElementTableCell>
+    <ElementTableCell class="description">
+      {{ incentive.description }}
+    </ElementTableCell>
+    <ElementTableCell class="goal-progress">
+      <template v-if="incentive.goal">
+        <span>{{ incentive.currentAmount }} of {{ incentive.goal }}</span>
+      </template>
+    </ElementTableCell>
+  </ElementTableRow>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { Incentive } from '~/types/api/incentive';
+
+export default Vue.extend({
+  props: {
+    incentive: {
+      type: Object as () => Incentive,
+      default: undefined,
+    },
+  },
+});
+</script>

pages/marathon/_marathon/incentives/index.vue

@@ -1,6 +1,10 @@
 <template>
   <div>
-    Oengus marathon incentives view page stub
+    <h3 class="title is-3">
+      {{ $t('marathon.incentives.title') }}
+    </h3>
+
+    <MarathonIncentiveList :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.incentives.title') as string,

store/api/incentive.ts

@@ -1,3 +1,24 @@
-export const state = () => ({
+import Vue from 'vue';
+import { ActionTree, MutationTree } from 'vuex';
+import { OengusAPI } from '~/plugins/oengus';
+import { Incentive, IncentiveList, IncentiveState } from '~/types/api/incentive';
 
+const IncentiveOengusAPI = new OengusAPI<IncentiveState>('marathons');
+
+export const state = (): IncentiveState => ({
+  incentives: { },
 });
+
+export const mutations: MutationTree<IncentiveState> = {
+  addIncentives(state, { id, value: incentives }): void {
+    Vue.set(state.incentives, id, incentives);
+  },
+};
+
+export const actions: ActionTree<IncentiveState, IncentiveState> = {
+  get: IncentiveOengusAPI.get<Array<Incentive>, IncentiveList>({
+    path: 'incentives',
+    key: 'incentives',
+    transform: ({ value: incentives }) => ({ incentives }),
+  }),
+};

store/api/marathon.ts

@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import { ActionTree, MutationTree } from 'vuex';
 import { OengusAPI } from '~/plugins/oengus';
-import { FrontPageMarathons, FullMarathon, Marathon, MarathonState } from '~/types/api/marathon';
+import { FrontPageMarathons, FullMarathon, Marathon, MarathonCalendar, MarathonState } from '~/types/api/marathon';
 
 const MarathonOengusAPI = new OengusAPI<MarathonState>('marathons');
 
@@ -26,7 +26,7 @@ export const mutations: MutationTree<MarathonState> = {
 export const actions: ActionTree<MarathonState, MarathonState> = {
   get: MarathonOengusAPI.get<FullMarathon>({ key: 'marathons', mutation: 'addMarathon' }),
   frontPage: MarathonOengusAPI.get<FrontPageMarathons>({ key: 'frontPage' }),
-  calendar: MarathonOengusAPI.get<Array<Marathon>, { calendar: Array<Marathon> }>({
+  calendar: MarathonOengusAPI.get<Array<Marathon>, MarathonCalendar>({
     path: 'forDates',
     key: 'calendars',
     mutation: 'addCalendar',

types/api/incentive.d.ts

@@ -0,0 +1,36 @@
+import { FullMarathon } from './marathon';
+import { OengusState } from './oengus-api';
+import { ScheduleLine } from './schedule';
+
+export interface Incentive {
+  id: number;
+  bidWar: boolean;
+  bids: Array<IncentiveBid>;
+  currentAmount: number;
+  description: string;
+  goal: number|null;
+  locked: boolean;
+  marathon: FullMarathon;
+  name: string;
+  openBid: boolean;
+  scheduleLine: ScheduleLine;
+  toDelete: boolean;
+}
+
+export interface IncentiveBid {
+  id: number;
+  approved: boolean;
+  currentAmount: number;
+  incentive: Incentive;
+  incentiveId: number;
+  name: string;
+  toDelete: boolean;
+}
+
+export interface IncentiveList {
+  incentives: Array<Incentive>;
+}
+
+export interface IncentiveState extends OengusState {
+  incentives: { [id: string]: IncentiveList };
+}