Added filtering and search options (fixes #38)

esamarathon · Apr 2, 2019 · e499500 · e499500
1 parent c820db5
commit e499500
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 10 deletions.
diff --git a/frontend/src/components/dashboard/PublicSubmissions.vue b/frontend/src/components/dashboard/PublicSubmissions.vue
@@ -1,21 +1,27 @@
 <template>
   <div class="layout-column flex-100 content-holder" v-if="currentEvent">
     <h1>Runs submitted to {{currentEvent.name}}</h1>
+    <div class="flex-none layout-row">
+      <md-field class="flex-10">
+        <md-icon>search</md-icon>
+        <md-input v-model="searchTerm"></md-input>
+      </md-field>
+    </div>
     <div class="table-header layout-row">
       <div class="infinite-td flex-10 view"></div>
-      <div class="infinite-td flex-30 name">Name</div>
-      <div class="infinite-td flex-30 runners">Runner(s)</div>
-      <div class="infinite-td flex-20 estimate">Platform</div>
-      <div class="infinite-td flex-10 platform">Estimate</div>
+      <div class="infinite-td flex-30 name orderable" :class="'order-'+(orderDirections.name || 'none')" @click="toggleOrder('name')">Name</div>
+      <div class="infinite-td flex-30 runners orderable" :class="'order-'+(orderDirections.runners || 'none')" @click="toggleOrder('runners')">Runner(s)</div>
+      <div class="infinite-td flex-20 platform orderable" :class="'order-'+(orderDirections.platform || 'none')" @click="toggleOrder('platform')">Platform</div>
+      <div class="infinite-td flex-10 estimate orderable" :class="'order-'+(orderDirections.estimate || 'none')" @click="toggleOrder('estimate')">Estimate</div>
     </div>
-    <RecycleScroller class="infinite-table flex-100" :items="runs" :item-size="itemSize" key-field="_id">
+    <RecycleScroller class="infinite-table flex-100" :items="runList" :item-size="itemSize" key-field="_id">
       <template v-slot="{ item }">
         <div class="infinite-tr run layout-row layout-start-center">
           <div class="infinite-td flex-10 view">
             <md-button class="md-icon-button" @click="selectRun(item)"><md-icon>remove_red_eye</md-icon></md-button>
           </div>
           <div class="flex info-items layout-row">
-            <div class="infinite-td flex-30 name">{{item.game}} ({{item.category}}{{item.runType === 'solo' ? '' : ' '+item.runType}})</div>
+            <div class="infinite-td flex-30 name">{{item.name}}</div>
             <div class="infinite-td flex-30 runners"><span class="mobile-description">Runners: </span>{{item.runners}}</div>
             <div class="infinite-td flex-20 platform"><span class="mobile-description">Platform: </span>{{item.platform}}</div>
             <div class="infinite-td flex-10 estimate"><span class="mobile-description">Estimate: </span>{{item.estimate}}</div>
@@ -61,6 +67,27 @@
   }
 }
 
+.table-header .infinite-td.orderable {
+  cursor: pointer;
+  &:before {
+    content: 'arrow_upward';
+    font-family: 'Material Icons';
+    position: relative;
+    top: 2px;
+    margin-right: 8px;
+    transition: transform 0.25s;
+    display: inline-block;
+  }
+  &.order-none:before {
+    visibility: hidden;
+  }
+  &.order-asc:before {
+    transform: rotate(180deg);
+  }
+  &.order-desc:before {
+  }
+}
+
 .run {
   height: 55px;
 }

diff --git a/frontend/src/components/dashboard/publicsubmissions.js b/frontend/src/components/dashboard/publicsubmissions.js
@@ -1,16 +1,29 @@
+import _ from 'lodash';
 import { mapState, mapGetters } from 'vuex';
-import { RecycleScroller } from 'vue-virtual-scroller';
 import VueScreenSize from 'vue-screen-size';
-import { getRuns } from '../../api';
+import { RecycleScroller } from 'vue-virtual-scroller';
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
+
+import { getRuns } from '../../api';
 import SubmissionDetails from './SubmissionDetails.vue';
 
+// dumbest search method I could possibly come up with. works fine™ tho.
+function search(items, string) {
+  const needle = string.toLowerCase();
+  return _.filter(items, item => item.name.toLowerCase().includes(needle)
+    || item.platform.toLowerCase().includes(needle)
+    || item.runType.toLowerCase().includes(needle)
+    || item.runners.toLowerCase().includes(needle));
+}
+
 export default {
   name: 'PublicSubmissions',
   data: () => ({
     runs: [],
     showDialog: false,
     selectedRun: null,
+    searchTerm: '',
+    orders: [['name', 'asc']],
   }),
   created() {
     this.updateRuns();
@@ -22,18 +35,36 @@ export default {
   },
   methods: {
     async updateRuns() {
-      if (this.currentEventID) this.runs = await getRuns(this.currentEventID);
+      if (this.currentEventID) {
+        this.runs = await getRuns(this.currentEventID);
+        _.each(this.runs, (run) => {
+          run.name = `${run.game} (${run.category}${run.runType === 'solo' ? '' : ` ${run.runType}`})`;
+        });
+      }
     },
     selectRun(run) {
       this.selectedRun = run._id;
       this.showDialog = true;
     },
+    toggleOrder(name) {
+      // toggles the order in which a column is ordered
+      const index = _.findIndex(this.orders, { 0: name });
+      if (index >= 0) {
+        const item = this.orders.splice(index, 1)[0];
+        this.orders.unshift(item);
+        item[1] = item[1] === 'asc' ? 'desc' : 'asc';
+      } else this.orders.unshift([name, 'asc']);
+    },
   },
   computed: {
     ...mapState(['currentEventID']),
     ...mapGetters(['currentEvent']),
     runList() {
-      return this.runs;
+      if (this.searchTerm) return _.orderBy(search(this.runs, this.searchTerm), ..._.zip(...this.orders));
+      return _.orderBy(this.runs, ..._.zip(...this.orders));
+    },
+    orderDirections() {
+      return _.fromPairs(this.orders);
     },
     itemSize() {
       return this.$vssWidth < 1000 ? 140 : 55;