clean up

src/App.vue

@@ -1,3 +1,4 @@
+<!-- TODO: remove toasts -->
 <!-- TODO: add mega search shift + k -->
 <!-- TODO: re-translate strings -->
 <!-- TODO: upgrade firebase to latest -->

src/components/Game/GameSpeedruns.vue

@@ -1,7 +1,6 @@
 <template lang="html">
   <div>
     <pre>{{ gameLogo }}</pre>
-    <!-- <pre>{{ speedruns }}</pre> -->
   </div>
 </template>
 

src/pages/CreateBoardPage.vue

@@ -1,33 +1,20 @@
 <template lang="html">
-  <b-container fluid>
+  <b-container fluid class="create-board-page pt-3">
-    {{ $t('boards.create') }}
+
+    <b-card class="create-board-form">
+      <b-form @submit.prevent="createBoard">
+        <h3>{{ $t('boards.create') }}</h3>
 
         <b-form-group label="Board name:" label-for="boardName">
           <b-form-input
             id="boardName"
             v-model.trim="board.name"
-        class="mb-2"
             placeholder="e.g. PS4 collection, Nintendo Switch, Xbox..."
             autofocus
             required
           />
         </b-form-group>
 
-
-      <!-- TODO: handle boards without platforms -->
-      <!-- TODO: Show loading spinner when creating -->
-
-    <b-button
-      v-if="!showOptionalFields"
-      variant="link"
-      class="px-0"
-      size="sm"
-      @click="showOptionalFields = !showOptionalFields"
-    >
-      Show more fields
-    </b-button>
-
-    <b-collapse v-model="showOptionalFields">
         <b-form-group
           label="Board description"
           label-for="boardDescription"
@@ -40,20 +27,7 @@
           />
         </b-form-group>
 
-      <b-button v-b-modal.platformsModal>Choose platforms</b-button>
+        <!-- <b-form-group
-
-      <b-modal id="platformsModal" hide-footer>
-        <template v-slot:modal-header="{ close }">
-          <modal-header
-            :title="$t('boards.create')"
-            @close="close"
-          />
-        </template>
-
-        <platform-picker v-model="board.platforms" />
-      </b-modal>
-
-      <b-form-group
           label="Board template"
         >
           <b-form-radio-group
@@ -73,21 +47,18 @@
               />
             </b-col>
           </b-row>
-      </b-form-group>
+        </b-form-group> -->
-    </b-collapse>
-
-    <b-button @click="$router.push({ name: 'home' })">
-      Cancel
-    </b-button>
 
         <b-button
           variant="primary"
-      :disabled="!board.name"
+          loading
-      @click="createBoard"
+          type="submit"
         >
           <b-spinner small v-if="saving" />
           <template v-else>Create board</template>
         </b-button>
+      </b-form>
+    </b-card>
   </b-container>
 </template>
 
@@ -98,39 +69,21 @@ export default {
       board: {
         name: '',
         description: '',
-        theme: null,
-        backgroundUrl: null,
-        backgroundColor: null,
-        platforms: [],
         lists: [],
       },
-      stepTitles: {
-        1: 'Name your board',
-        2: 'Game search will be limited to the platforms selected.',
-        3: 'Use a board template or start from scratch',
-      },
-      showOptionalFields: false,
-      platformCategories: {
-        1: 'console',
-        2: 'arcade',
-        3: 'platform',
-        4: 'operating_system',
-        5: 'portable_console',
-        6: 'computer',
-      },
       saving: false,
       selectedTemplate: null,
-      boardTemplatesOptions: [
+      // boardTemplatesOptions: [
-        { value: null, text: 'Blank' },
+      //   { value: null, text: 'Blank' },
-        { value: 'standard', text: 'Standard' },
+      //   { value: 'standard', text: 'Standard' },
-        { value: 'detailed', text: 'Detailed' },
+      //   { value: 'detailed', text: 'Detailed' },
-        { value: 'completionist', text: 'Completionist' },
+      //   { value: 'completionist', text: 'Completionist' },
-      ],
+      // ],
-      boardTemplates: {
+      // boardTemplates: {
-        standard: ['Owned', 'Wishlist'],
+      //   standard: ['Owned', 'Wishlist'],
-        detailed: ['Physical', 'Digital', 'Wishlist'],
+      //   detailed: ['Physical', 'Digital', 'Wishlist'],
-        completionist: ['Owned', 'Playing', 'Completed'],
+      //   completionist: ['Owned', 'Playing', 'Completed'],
-      },
+      // },
     };
   },
 
@@ -150,7 +103,6 @@ export default {
 
         const { id } = await this.$store.dispatch('CREATE_BOARD', payload);
 
-        this.$bvToast.toast('Board crated');
         this.$router.push({ name: 'board', params: { id } });
       } catch (e) {
         this.$bvToast.toast('There was an error creating board', { variant: 'error' });
@@ -159,3 +111,15 @@ export default {
   },
 };
 </script>
+
+<style lang="scss" rel="stylesheet/scss" scoped>
+.create-board-page {
+  background-image: url('~/public/bg-tile.png');
+  height: calc(100vh - 56px);
+}
+
+.create-board-form {
+  max-width: 420px;
+  margin: 0 auto;
+}
+</style>

src/pages/EditListPage.vue

@@ -1,4 +1,6 @@
 <template lang="html">
+  <!-- TODO: finish this -->
+  <!-- TODO: move move arrows to next to list preview -->
   <!-- TODO: show list preview in full page view -->
   <!-- TODO: show search inline, allow to go full screen (search page) -->
   <b-container fluid class="p-0">
@@ -11,8 +13,12 @@
 
       <b-col>
         <b-card>
-          <header class="p-1 pl-2 d-flex justify-content-between align-items-center">
+          <header class="p-1 mb-3 pl-2 d-flex justify-content-between align-items-center">
-            <h1>Edit list</h1>
+            <h1 class="mb-0">Edit list</h1>
+
+            <b-button variant="success">
+              Add games
+            </b-button>
           </header>
 
           <form ref="renameListForm" @submit.stop.prevent="saveChanges">
@@ -165,9 +171,9 @@
               </b-list-group-item>
             </b-list-group>
 
+            <footer class="mt-2 d-flex justify-content-between align-items-center">
               <b-button
                 variant="primary"
-              class="ml-auto"
                 type="submit"
                 :disabled="saving || isDuplicate"
               >
@@ -176,12 +182,14 @@
               </b-button>
 
               <b-button
-              variant="warning"
+                variant="link"
+                class="text-danger"
                 @click="promptDeleteList"
               >
                 <i class="fas fa-trash-alt fa-fw" aria-hidden />
                 {{ $t('board.list.delete') }}
               </b-button>
+            </footer>
           </form>
         </b-card>
       </b-col>
@@ -244,8 +252,8 @@ export default {
     existingListNames() {
       const originalListName = this.board?.lists[this.listIndex]?.name;
 
-      return this.board?.lists.map(({ name }) => name.toLowerCase())
+      return this.board?.lists.map(({ name }) => name?.toLowerCase())
-        .filter(name => name !== originalListName.toLowerCase());
+        .filter(name => originalListName?.toLowerCase() !== name);
     },
 
     isDuplicate() {
@@ -312,16 +320,13 @@ export default {
     },
 
     async deleteList() {
-      // this.$store.commit('REMOVE_LIST', this.listIndex);
+      const board = { ...this.board };
 
-      await this.$store.dispatch('SAVE_BOARD', true)
+      board.lists.splice(this.listIndex, 1);
-        .catch(() => {
-          this.$store.commit('SET_SESSION_EXPIRED', true);
-        });
 
-      this.$bvToast.toast('List deleted', {
+      await this.$store.dispatch('SAVE_GAME_BOARD', board);
-        variant: 'warning',
+
-      });
+      this.$router.push({ name: 'board', params: { id: this.board.id } });
     },
 
     async moveList(from, to) {

src/pages/NotesPage.vue

@@ -2,9 +2,7 @@
 <!-- TODO: pagination? -->
 <template lang="html">
   <b-container fluid>
-    <page-title
+    <page-title title="Notes">
-      title="Notes"
-    >
       <b-form-input
         v-if="!showEmptyState"
         type="search"
@@ -12,10 +10,6 @@
         placeholder="Search notes"
         v-model="search"
       />
-
-      <!-- <b-button>
-        Add note
-      </b-button> -->
     </page-title>
 
     <empty-state

src/pages/WallpapersPage.vue

@@ -10,23 +10,7 @@
     />
 
     <template v-else>
-      <header class="my-3 d-flex align-items-center justify-content-between">
+      <page-title title="Wallpapers">
-        <h1>Wallpapers</h1>
-
-        <!-- <div class="space-used ml-auto mr-3">
-          <small
-            class="d-block text-center"
-            :class="{ 'text-danger': outOfSpace }"
-            v-text="usedSpaceText"
-          />
-
-          <b-progress
-            :value="spaceUsed"
-            :max="maxSpace"
-            :variant="outOfSpace ? 'danger' : 'success'"
-          />
-        </div> -->
-
         <b-button
           :disabled="outOfSpace"
           variant="primary"
@@ -39,7 +23,7 @@
             <span class="d-none d-sm-inline">Upload</span>
           </template>
         </b-button>
-      </header>
+      </page-title>
 
       <b-alert
         v-if="isDuplicate && !saving && file && file.name"

src/store/mutations.js

@@ -144,10 +144,6 @@ export default {
     state.game.gog = data;
   },
 
-  REMOVE_LIST(state, index) {
-    state.board.lists.splice(index, 1);
-  },
-
   MOVE_LIST(state, { from, to }) {
     const cutOut = state.board.lists.splice(from, 1)[0];