From efa37a642062181106764aa9a3e7a2a7611716f7 Mon Sep 17 00:00:00 2001
From: Gamebrary <contact@gamebrary.com>
Date: Mon, 23 Nov 2020 16:15:43 -0700
Subject: [PATCH] sort platforms

---
 src/components/Board/PlatformPicker.vue | 62 +++++++++----------------
 src/store/getters.js                    | 45 +++++++++---------
 2 files changed, 45 insertions(+), 62 deletions(-)

diff --git a/src/components/Board/PlatformPicker.vue b/src/components/Board/PlatformPicker.vue
index 2f40b0ec..84f72915 100644
--- a/src/components/Board/PlatformPicker.vue
+++ b/src/components/Board/PlatformPicker.vue
@@ -1,50 +1,27 @@
 <!-- TODO: return filteredPlatforms getter and return sort/filters -->
 <template lang="html">
-  <div class="platform-picker">
-    <b-button
-      v-b-modal.platforms
-      :variant="value.length ? 'success' : 'warning'"
+  <b-list-group class="platforms mb-3">
+    <b-list-group-item
+      v-for="platform in filteredPlatforms"
+      :key="platform.id"
+      button
+      :active="value.includes(platform.id)"
+      @click="handleClick(platform.id)"
     >
-      {{ buttonLabel }}
-    </b-button>
+      <b-img
+        :src="`/static/platform-logos/${platform.slug}.${platform.logoFormat}`"
+        :alt="platform.name"
+        width="40"
+        class="pr-2"
+      />
 
-    <b-modal
-      id="platforms"
-      scrollable
-      hide-footer
-    >
-      <template v-slot:modal-header="{ close }">
-        <modal-header
-          title="Board Platforms"
-          subtitle="Game search will be limited to the platforms selected."
-          @close="close"
-        />
-      </template>
-
-      <b-list-group>
-        <b-list-group-item
-          v-for="platform in platforms"
-          :key="platform.id"
-          button
-          :active="value.includes(platform.id)"
-          @click="handleClick(platform.id)"
-        >
-          <b-img
-            :src="`/static/platform-logos/${platform.slug}.${platform.logoFormat}`"
-            :alt="platform.name"
-            width="40"
-            class="pr-2"
-          />
-
-          {{ platform.name }}
-        </b-list-group-item>
-      </b-list-group>
-    </b-modal>
-  </div>
+      {{ platform.name }}
+    </b-list-group-item>
+  </b-list-group>
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import { mapState, mapGetters } from 'vuex';
 
 export default {
   props: {
@@ -53,6 +30,7 @@ export default {
 
   computed: {
     ...mapState(['platforms']),
+    ...mapGetters(['filteredPlatforms']),
 
     buttonLabel() {
       return this.value.length
@@ -84,7 +62,9 @@ export default {
 </script>
 
 <style lang="scss" rel="stylesheet/scss" scoped>
-  .dropdown {
+  .platforms {
     max-height: 50vh;
+    overflow: scroll;
+    overflow-x: hidden;
   }
 </style>
diff --git a/src/store/getters.js b/src/store/getters.js
index 77dbda12..bb0afdc3 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -1,4 +1,4 @@
-import { PLATFORM_FILTER_FIELDS } from '@/constants';
+// import { PLATFORM_FILTER_FIELDS } from '@/constants';
 import orderby from 'lodash.orderby';
 
 export default {
@@ -6,31 +6,34 @@ export default {
   sortedBoards: ({ boards }) => orderby(boards, 'name'),
 
   filteredPlatforms: (state) => {
-    const filterField = state.settings && state.settings.platformsFilterField
-      ? state.settings.platformsFilterField
-      : null;
+    // const filterField = state.settings && state.settings.platformsFilterField
+    //   ? state.settings.platformsFilterField
+    //   : null;
 
-    const sortField = state.settings && state.settings.platformsSortField
-      ? state.settings.platformsSortField
-      : 'generation';
+    // const sortField = state.settings && state.settings.platformsSortField
+    //   ? state.settings.platformsSortField
+    //   : 'generation';
 
-    let filteredPlatforms = [];
+    // let filteredPlatforms = [];
+    //
+    // if (filterField === 'all') {
+    //   filteredPlatforms = state.platforms;
+    // } else {
+    //   filteredPlatforms = filterField && PLATFORM_FILTER_FIELDS.includes(filterField)
+    //     ? state.platforms.filter(({ category }) => category === filterField)
+    //     : filteredPlatforms = state.platforms.filter(({ popular }) => popular);
+    // }
 
-    if (filterField === 'all') {
-      filteredPlatforms = state.platforms;
-    } else {
-      filteredPlatforms = filterField && PLATFORM_FILTER_FIELDS.includes(filterField)
-        ? state.platforms.filter(({ category }) => category === filterField)
-        : filteredPlatforms = state.platforms.filter(({ popular }) => popular);
-    }
+    const sortedPlatforms = orderby(state.platforms, ['popular', 'generation']);
+    // const sortedPlatforms = orderby(filteredPlatforms, sortField);
 
-    const sortedPlatforms = orderby(filteredPlatforms, sortField);
+    return sortedPlatforms.reverse();
 
-    const reverseOrder = ['releaseYear', 'generation'].includes(sortField);
-
-    return reverseOrder
-      ? sortedPlatforms.reverse()
-      : sortedPlatforms;
+    // const reverseOrder = ['releaseYear', 'generation'].includes(sortField);
+    //
+    // return reverseOrder
+    //   ? sortedPlatforms.reverse()
+    //   : sortedPlatforms;
   },
 
   platformNames: (state) => {