Progress bars, mobile view, bid wars for incentive

Related to Issue #41

components/element/MoneyBar.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="money-bar">
+    <i18n-n v-if="!hideValue" :value="value" :format="{ key: 'currency', currency: currency }" />
+    <progress class="progress is-primary" :value="value" :max="max" />
+    <i18n-n v-if="!hideMax" :value="max" :format="{ key: 'currency', currency: currency }" />
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+  props: {
+    /** Progress towards the max */
+    value: {
+      type: Number,
+      default: 0,
+    },
+    /** The capacity of the bar */
+    max: {
+      type: Number,
+      default: 100,
+    },
+    /** Currency which should be used */
+    currency: {
+      type: String,
+      default: 'EUR',
+    },
+    /** Show the value with text */
+    hideValue: {
+      type: Boolean,
+      default: false,
+    },
+    /** Show the capacity with text */
+    hideMax: {
+      type: Boolean,
+      default: false,
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.money-bar {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--spacing) / 2);
+}
+
+.progress {
+  margin: 0;
+}
+</style>

components/marathon/incentive/List.vue

@@ -11,11 +11,10 @@
       <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" />
+      <template v-for="(incentive, index) of incentives">
+        <MarathonIncentiveRow v-if="!incentive.toDelete" :key="incentive.id" :class="getRowParity(index)" :incentive="incentive" />
+      </template>
     </ElementTable>
   </div>
 </template>
@@ -66,6 +65,6 @@ export default Vue.extend({
 @use '~assets/table';
 
 .incentives-table {
-  @include table.shrink(4, ());
+  @include table.shrink(3);
 }
 </style>

components/marathon/incentive/Row.vue

@@ -1,25 +1,43 @@
 <template>
   <ElementTableRow>
     <ElementTableCell class="game">
-      {{ incentive.scheduleLine.gameName }}
+      <span v-if="incentive.scheduleLine.gameName">
+        {{ incentive.scheduleLine.gameName }}
+      </span>
+      <span v-if="incentive.scheduleLine.categoryName">
+        {{ incentive.scheduleLine.categoryName }}
+      </span>
+      <span v-if="!incentive.scheduleLine.gameName && !incentive.scheduleLine.categoryName">
+        -
+      </span>
     </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>
+
+    <!-- The second (and beyond) rows showing progress -->
+    <ElementTableCell v-if="incentive.goal" column-start="1" column-end="-1" class="goal-progress">
+      <ElementMoneyBar :value="incentive.currentAmount" :max="incentive.goal" :currency="incentive.currency" />
     </ElementTableCell>
+    <template v-if="incentive.bidWar">
+      <template v-for="bid of bids">
+        <ElementTableCell :key="`name-${bid.id}`" class="bid-name">
+          {{ bid.name }}
+        </ElementTableCell>
+        <ElementTableCell :key="`progress-${bid.id}`" class="bid-amount" column-end="span 2">
+          <ElementMoneyBar :value="bid.currentAmount" :max="bidsTotal" :currency="incentive.currency" hide-max />
+        </ElementTableCell>
+      </template>
+    </template>
   </ElementTableRow>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
-import { Incentive } from '~/types/api/incentive';
+import { Incentive, IncentiveBid } from '~/types/api/incentive';
 
 export default Vue.extend({
   props: {
@@ -28,5 +46,26 @@ export default Vue.extend({
       default: undefined,
     },
   },
+
+  computed: {
+    bids(): Array<IncentiveBid> {
+      if (!this.incentive.bidWar) {
+        return [ ];
+      }
+      // Since we're not supposed to show certian bids and this makes them always be in the right order
+      return this.incentive.bids
+        .filter(bid => !bid.toDelete)
+        .sort((bidA, bidB) => bidB.currentAmount - bidA.currentAmount);
+    },
+    bidsTotal(): number {
+      return this.bids.reduce((total, bid) => total + bid.currentAmount, 0);
+    },
+  },
 });
 </script>
+
+<style lang="scss" scoped>
+.game > :not(:first-child)::before {
+  content: '-';
+}
+</style>