client/src/components/ChallengeList.vue

   1 <template lang="pug">
   2 div
   3   table
   4     thead
   5       tr
   6         th {{ st.tr["Variant"] }}
   7         th {{ st.tr["From"] }}
   8         th {{ st.tr["To"] }}
   9         th {{ st.tr["Cadence"] }}
  10     tbody
  11       tr(v-for="c in sortedChallenges" @click="$emit('click-challenge',c)")
  12         td(data-label="Variant") {{ c.vname }}
  13         td(data-label="From") {{ c.from.name || "@nonymous" }}
  14         td(data-label="To") {{ c.to }}
  15         td(data-label="Cadence") {{ c.timeControl }}
  16 </template>
  17
  18 <script>
  19 import { store } from "@/store";
  20
  21 export default {
  22   name: "my-challenge-list",
  23   props: ["challenges"],
  24   data: function() {
  25     return {
  26       st: store.state,
  27     };
  28   },
  29   computed: {
  30     sortedChallenges: function() {
  31       // Show in order: challenges I sent, challenges I received, other challenges
  32       let augmentedChalls = this.challenges.map(c => {
  33         let priority = 0;
  34         if (c.to == this.st.user.name)
  35           priority = 1;
  36         else if (c.from.id == this.st.user.id || c.from.sid == this.st.user.sid)
  37           priority = 2;
  38         return Object.assign({}, c, {priority: priority});
  39       });
  40       return augmentedChalls.sort((c1,c2) => { return c2.priority - c1.priority; });
  41     },
  42   },
  43 };
  44 </script>