game list settings wip

package.json

@@ -6,7 +6,7 @@
   "license": "MIT",
   "private": true,
   "scripts": {
-    "dev": "vue-cli-service serve --port 4000",
+    "dev": "vue-cli-service serve --port 4000 --open",
     "build": "vue-cli-service build",
     "test:unit": "vue-cli-service test:unit",
     "test:e2e": "vue-cli-service test:e2e",

src/components/Lists/GameList.vue

@@ -13,16 +13,21 @@
     :id="listIndex"
   >
     <b-card no-body>
-      <div
-        class="p-1 pl-2 d-flex justify-content-between align-items-center"
-      >
-        <p class="list-name p-0 m-0">
+      <game-list-settings
+        v-if="editing && user && user.uid === board.owner"
+        :list="list"
+        :list-index="listIndex"
+        @close="editing = false"
+      />
+
+      <template v-else>
+        <header class="p-1 pl-2 d-flex justify-content-between align-items-start">
+          <h6 class="p-0 m-0">
             <span v-b-modal="`rename-list-${listIndex}`">
+              <b-badge>{{ list.games.length }}</b-badge>
               {{ list.name }}
             </span>
 
-          <br />
-
             <small v-if="showGameCount" class="text-muted">
                 {{ list.games.length }} {{ $t('global.games') }}
             </small>
@@ -30,16 +35,18 @@
             <small v-if="autoSortEnabled" class="text-muted" v-b-modal="`sort-list-${listIndex}`">
               {{ `${$t('board.list.sortedBy')} ${$t(`board.list.${list.settings.sortOrder}`)}` }}
             </small>
-        </p>
+          </h6>
 
-        <list-settings
+          <b-button
             v-if="user && user.uid === board.owner"
-          :list="list"
-          :list-index="listIndex"
-        />
+            size="sm"
+            variant="transparent"
+            @click="editing = true"
+          >
+            <i class="fa fa-pencil-alt fa-fw text-secondary" />
+          </b-button>
 
           <!-- TODO: consolidate public/private actions -->
-
           <b-button
             v-else
             disabled
@@ -49,7 +56,7 @@
           >
             <i class="fas fa-ellipsis-h fa-fw" aria-hidden />
           </b-button>
-      </div>
+        </header>
 
         <draggable
           class="games"
@@ -90,13 +97,14 @@
             {{ $t('board.list.emptyListButton') }}
           </b-button>
         </draggable>
+      </template>
     </b-card>
   </div>
 </template>
 
 <script>
 import draggable from 'vuedraggable';
-import ListSettings from '@/components/Lists/ListSettings';
+import GameListSettings from '@/components/Lists/GameListSettings';
 import GameCardDefault from '@/components/GameCards/GameCardDefault';
 import GameCardCovers from '@/components/GameCards/GameCardCovers';
 import GameCardGrid from '@/components/GameCards/GameCardGrid';
@@ -113,7 +121,7 @@ export default {
     GameCardGrid,
     GameCardCompact,
     GameCardText,
-    ListSettings,
+    GameListSettings,
     draggable,
   },
 
@@ -131,6 +139,7 @@ export default {
   data() {
     return {
       draggingId: null,
+      editing: false,
       gameCardComponents: {
         single: 'GameCardDefault',
         covers: 'GameCardCovers',
@@ -182,15 +191,11 @@ export default {
     },
 
     view() {
-      const { settings } = this.list;
-
-      return settings && settings.view;
+      return this.list?.settings?.view;
     },
 
     showGameCount() {
-      const { settings } = this.list;
-
-      return settings && settings.showGameCount;
+      return this.list?.settings?.showGameCount;
     },
 
     gameCardComponent() {
@@ -268,6 +273,8 @@ export default {
   flex-shrink: 0;
   cursor: default;
   position: relative;
+  height: auto;
+  min-height: 200px;
   width: calc(300px + 1rem);
 
   @media(max-width: 400px) {
@@ -330,8 +337,4 @@ export default {
   opacity: .1;
   background: #000;
 }
-
-.list-name {
-  line-height: 0.9rem;
-}
 </style>

src/components/Lists/GameListSettings.vue

@@ -1,16 +1,31 @@
 <template lang="html">
-  <b-dropdown
-    right
-    variant="transparent"
-    toggle-class="m-0"
-  >
-    <template v-slot:button-content>
-      <i class="fas fa-ellipsis-h fa-fw" aria-hidden />
-    </template>
-
+  <div class="game-list-settings">
     <add-game-modal :list="list" />
 
-    <sort-list :list="list" :list-index="listIndex" />
+    <!-- <sort-list :list="list" :list-index="listIndex" /> -->
+    <b-form-radio-group
+      v-model="sortOrder"
+      variant="primary"
+      :options="sortingOptions"
+    />
+
+    <b-alert
+      class="mb-0 mt-2"
+      show
+      :variant="sortOrder !== 'sortByCustom' ? 'warning' : 'info'"
+    >
+      <span v-if="sortOrder === 'sortByCustom'">
+        Games will be added to end of list, drag games to re-order.
+      </span>
+
+      <span v-else-if="sortOrder">
+        Games will be sorted by
+
+        <span class="text-lowercase">
+          {{ $t(`board.list.${sortOrder}`)}}
+        </span>
+      </span>
+    </b-alert>
     <rename-list :list="list" :list-index="listIndex" />
     <change-list-view :list="list" :list-index="listIndex" />
     <!-- <list-preferences :list="list" :list-index="listIndex" /> -->
@@ -21,7 +36,9 @@
       <i class="fas fa-trash-alt fa-fw" aria-hidden />
       {{ $t('board.list.delete') }}
     </b-dropdown-item>
+
     <b-dropdown-divider />
+
     <b-dropdown-text>
       <small class="text-muted d-flex justify-content-center">Move list</small>
       <b-button-group size="sm" class="w-100">
@@ -44,14 +61,17 @@
         </b-button>
       </b-button-group>
     </b-dropdown-text>
-  </b-dropdown>
+    <b-button>Save</b-button>
+    <b-button @click="$emit('close')">Cancel</b-button>
+    boom boom boom
+  </div>
 </template>
 
 <script>
 import ChangeListView from '@/components/Lists/ChangeListView';
 import RenameList from '@/components/Lists/RenameList';
 // import ListPreferences from '@/components/Lists/ListPreferences';
-import SortList from '@/components/Lists/SortList';
+// import SortList from '@/components/Lists/SortList';
 import AddGameModal from '@/components/Lists/AddGameModal';
 import { mapState } from 'vuex';
 
@@ -61,7 +81,7 @@ export default {
     RenameList,
     // ListPreferences,
     AddGameModal,
-    SortList,
+    // SortList,
   },
 
   props: {
@@ -138,3 +158,9 @@ export default {
   },
 };
 </script>
+
+<style lang="scss" rel="stylesheet/scss" scoped>
+.game-list-settings {
+  min-height: 50vh;
+}
+</style>

src/components/Lists/SortList.vue

@@ -27,31 +27,7 @@
         </modal-header>
       </template>
 
-      <form ref="renameListForm" @submit.stop.prevent="save">
-        <b-form-radio-group
-          v-model="sortOrder"
-          variant="primary"
-          :options="sortingOptions"
-        />
 
-        <b-alert
-          class="mb-0 mt-2"
-          show
-          :variant="sortOrder !== 'sortByCustom' ? 'warning' : 'info'"
-        >
-          <span v-if="sortOrder === 'sortByCustom'">
-            Games will be added to end of list, drag games to re-order.
-          </span>
-
-          <span v-else-if="sortOrder">
-            Games will be sorted by
-
-            <span class="text-lowercase">
-              {{ $t(`board.list.${sortOrder}`)}}
-            </span>
-          </span>
-        </b-alert>
-      </form>
     </b-modal>
   </b-dropdown-item-button>
 </template>
@@ -65,15 +41,6 @@ export default {
 
   data() {
     return {
-      sortOrder: null,
-      saving: false,
-      sortingOptions: [
-        { text: this.$t('board.list.sortByCustom'), value: 'sortByCustom' },
-        { text: this.$t('board.list.sortByName'), value: 'sortByName' },
-        { text: this.$t('board.list.sortByRating'), value: 'sortByRating' },
-        { text: this.$t('board.list.sortByProgress'), value: 'sortByProgress' },
-        // { text: 'Release date', value: 'sortByReleaseDate' },
-      ],
     };
   },
 

src/pages/BoardPage.vue

@@ -14,7 +14,7 @@
         class="mr-2"
         :to="{ name: 'edit-board', params: { id: board.id } }"
       >
-        Edit
+        Edit board
       </b-button>
 
       <!-- <b-button