Merge branch 'pro' of github.com:romancm/gamebrary into pro

README.md

@@ -1,17 +1,9 @@
-# Large header
-# Tech stack
-# Build Process
-- instructions for yarn translate
-# Add table of content
-# Features
-# Feedback
-# Contributors
-
 <p align="center">
     <img width="200" src="https://user-images.githubusercontent.com/60666270/93530966-567d1200-f8f3-11ea-8fd3-131976105d06.png" alt="Gamebrary logo">
     <h2 align="center">Gamebrary</h2>
     <p align="center">Open source tool to organize video game collections.</p>
 </p>
+- test
 
 <p align="center">
 <img alt="All Contributors" src="https://img.shields.io/badge/all_contributors-13-orange.svg?style=flat-square">
@@ -25,6 +17,20 @@
 
 Gamebrary is an open source tool that helps organize video game collections. Written in javascript using [VueJS](https://github.com/vuejs/vue).
 
+# Table of content
+Take me to [pookie](#pookie)
+
+- <a name="features">Features</a>
+
+# Features
+
+# Tech stack
+# Build Process
+- instructions for yarn translate
+# Add table of content
+# Feedback
+# Contributors
+
 ## Get started
 
 ```bash
@@ -85,4 +91,6 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 <!-- prettier-ignore-end -->
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
-This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
+This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
+
+### <a name="pookie"></a>Some heading

package.json

@@ -39,6 +39,7 @@
         "vue-github-button": "^1.0.5",
         "vue-i18n": "^8.0.0",
         "vue-markdown": "^2.2.4",
+        "vue-quill": "^1.5.1",
         "vue-raven": "^1.0.0",
         "vue-router": "^3.0.1",
         "vuedraggable": "^2.16.0",

src/App.vue

@@ -4,6 +4,7 @@
     :dir="dir"
   >
     <page-header v-if="user" />
+
     <main
       :class="{ 'authorizing': !user, 'bg-dark text-white': nightMode }"
     >

src/components/ModalHeader.vue

@@ -51,5 +51,6 @@ h5 {
 
 .actions {
   margin-left: auto;
+  align-self: flex-start;
 }
 </style>

src/components/PageHeader.vue

@@ -22,6 +22,15 @@
         <icon name="tag" />
       </b-button>
 
+      <b-button
+        variant="link"
+        :title="$t('navMenu.notes')"
+        :to="{ name: 'notes' }"
+        v-b-tooltip.hover.right
+      >
+        <icon name="note" />
+      </b-button>
+
       <b-button
         variant="link"
         :title="$t('navMenu.wallpapers')"
@@ -68,8 +77,9 @@
       </b-button>
 
       <b-button
-        :title="$t('navMenu.about')"
+        :title="$t('navMenu.upgrade')"
         :to="{ name: 'upgrade' }"
+        variant="link"
         v-b-tooltip.hover.right
       >
         <icon name="star-fill" />

src/i18n/en.json

@@ -26,6 +26,8 @@
         "language": "Language",
         "releases": "Releases",
         "about": "About",
+        "upgrade": "Upgrade",
+        "notes": "Notes",
         "account": "Account",
         "theme": "Switch theme"
     },
@@ -242,5 +244,9 @@
     "upgrade": {
       "title": "Upgrade to Gamebrary Pro",
       "subtitle": "Give me your money"
+    },
+    "notes": {
+      "title": "Notes",
+      "subtitle": "Notes!"
     }
 }

src/main.js

@@ -4,6 +4,7 @@ import 'bootstrap-vue/dist/bootstrap-vue.css';
 import VueAxios from 'vue-axios';
 import VueFire from 'vuefire';
 import VueI18n from 'vue-i18n';
+import VueQuill from 'vue-quill';
 import Icon from '@/components/Icon';
 import ModalHeader from '@/components/ModalHeader';
 import axios from 'axios';
@@ -26,6 +27,7 @@ Object.defineProperties(Vue.prototype, {
   },
 });
 
+Vue.use(VueQuill);
 Vue.use(BootstrapVue, bootstrapSettings);
 Vue.use(VueAnalytics, { id: 'UA-120053966-1', router });
 Vue.use(VueAxios, axios);

src/pages/Notes.vue

@@ -0,0 +1,125 @@
+<template lang="html">
+  <div>
+    <b-jumbotron
+      :header="$t('notes.title')"
+      :lead="$t('notes.subtitle')"
+      :bg-variant="nightMode ? 'dark' : ''"
+      :text-variant="nightMode ? 'white' : ''"
+      :border-variant="nightMode ? 'dark' : ''"
+      header-level="5"
+      fluid
+    />
+
+    <b-container>
+      <!-- TODO: add skeleton -->
+      <b-row class="mb-3">
+        <b-form-input
+          type="search"
+          placeholder="Search notes"
+          v-model="search"
+        />
+      </b-row>
+
+      <b-row>
+        <template v-if="loaded && games && notes">
+          <b-card
+            v-for="(note, gameId) in notes"
+            :key="gameId"
+            class="mb-3 w-100"
+            :img-src="getCoverUrl(gameId)"
+            :img-alt="games[gameId].name"
+            img-left
+          >
+            <div v-if="games[gameId]">
+
+              <h5>{{ games[gameId] && games[gameId].name ? games[gameId].name : '' }}</h5>
+
+              <b-alert show variant="warning" class="mt-2">
+                <vue-markdown :source="note && note.text ? note.text : note" />
+              </b-alert>
+            </div>
+
+            <div v-else>
+              no tiene
+            </div>
+          </b-card>
+
+        </template>
+
+        <b-card
+          v-else
+          v-for="n in 3"
+          :key="n"
+          no-body
+          img-left
+          class="w-100 mb-3"
+        >
+        <b-skeleton-img
+          card-img="left"
+          width="180px"
+          height="240px"
+        />
+
+        <b-card-body>
+          <b-skeleton />
+          <b-skeleton />
+        </b-card-body>
+      </b-card>
+      </b-row>
+    </b-container>
+  </div>
+</template>
+
+<script>
+import VueMarkdown from 'vue-markdown';
+import { mapState, mapGetters } from 'vuex';
+
+export default {
+  components: {
+    VueMarkdown,
+  },
+
+  data() {
+    return {
+      loaded: false,
+      search: '',
+    };
+  },
+
+  computed: {
+    ...mapState(['notes', 'games']),
+    ...mapGetters(['nightMode']),
+  },
+
+  mounted() {
+    this.loadGames();
+  },
+
+  methods: {
+    async loadGames() {
+      const gamesList = Object.keys(this.notes).length
+        ? Object.keys(this.notes).toString()
+        : null;
+
+      if (!gamesList) return;
+
+      // TODO: get list of games that aren't currently cached
+
+      await this.$store.dispatch('LOAD_BOARD_GAMES', gamesList)
+        .catch(() => {
+          this.$bvToast.toast('Error loading games', { title: 'Error', variant: 'error' });
+        });
+
+      this.loaded = true;
+    },
+
+    getCoverUrl(gameId) {
+      const game = this.games[gameId];
+
+      return game && game.cover && game.cover.image_id
+        ? `https://images.igdb.com/igdb/image/upload/t_cover_small_2x/${game.cover.image_id}.jpg`
+        : '/static/no-image.jpg';
+    },
+  },
+};
+</script>

src/pages/Wallpapers.vue

@@ -14,86 +14,49 @@
     <b-container>
       <!-- TODO: convert to form -->
       <!-- TODO: translate "browse" -->
-      <!-- TODO: display file names -->
-      <h5>{{ $t('wallpapers.form.label') }}</h5>
 
       <b-row class="mb-3">
         <b-col cols="12" lg="6" class="mb-4">
           <b-form-group
             :description="$t('wallpapers.form.helperText')"
+            :label="$t('wallpapers.form.label')"
           >
             <b-form-file
               v-model="file"
               accept="image/*"
+              :browse-text="$t('wallpapers.form.upload')"
               :placeholder="$t('wallpapers.form.placeholder')"
+              @input="uploadWallpaper"
             />
           </b-form-group>
 
-          <b-alert v-if="isDuplicate && !saving" show variant="warning">
+          <b-alert v-if="isDuplicate && !saving && file && file.name" show variant="warning">
             {{ $t('wallpapers.form.duplicateMessage', { fileName: file.name }) }}
           </b-alert>
-
-          <b-button
-            @click="uploadWallpaper"
-            variant="primary"
-            :disabled="!Boolean(file) || saving || isDuplicate"
-          >
-            <b-spinner small v-if="saving" />
-            <span v-else>{{ $t('wallpapers.form.upload') }}</span>
-          </b-button>
         </b-col>
       </b-row>
 
       <h5>{{ $t('wallpapers.list.title') }}</h5>
 
-      <b-row
+      <b-card
         v-if="wallpapers.length"
         v-for="wallpaper in wallpapers"
         :key="wallpaper.name"
-        no-gutters
-        class="mb-4 border-bottom pb-4"
+        :img-src="wallpaper.url"
+        :img-alt="wallpaper.name"
+        img-left
+        img-width="180"
+        class="mb-3"
       >
-        <b-col cols="6" lg="3" class="pr-3">
-          <b-img
-           :src="wallpaper.url"
-           thumbnail
-           class="rounded-0"
-         />
-        </b-col>
-
-        <b-col cols="6">
-          <p>{{ wallpaper.name }}</p>
-          <b-button
-            variant="danger"
-            size="sm"
-            @click="confirmDeleteWallpaper(wallpaper)"
-          >
-            <icon name="trash" white />
-          </b-button>
-        </b-col>
-      </b-row>
-
-      <!-- <b-form-row v-if="wallpapers.length">
-        <b-col cols="12">
-        </b-col>
-        <b-col
-          v-for="wallpaper in wallpapers"
-          :key="wallpaper.name"
-          cols="6"
-          sm="4"
-          lg="3"
+        <p>{{ wallpaper.name }}</p>
+        <b-button
+          variant="danger"
+          size="sm"
+          @click="confirmDeleteWallpaper(wallpaper)"
         >
-          <b-card
-            class="mb-2"
-            header-class="py-0 px-2"
-            body-class="d-flex p-0 text-center justify-content-center align-items-center"
-            header-tag="small"
-          >
-
-
-          </b-card>
-        </b-col>
-      </b-form-row> -->
+          <icon name="trash" white />
+        </b-button>
+      </b-card>
 
       <b-alert show v-else>You don't have any wallpapers.</b-alert>
     </b-container>
@@ -130,19 +93,27 @@ export default {
 
   methods: {
     async uploadWallpaper() {
-      const { file } = this;
+      if (this.isDuplicate) {
+        return this.$bvToast.toast('File already exists', { title: '!', variant: 'warning' });
+      }
+
+      if (!this.file) {
+        return;
+      }
+
       this.saving = true;
 
-      await this.$store.dispatch('UPLOAD_WALLPAPER', file)
+      this.$store.dispatch('UPLOAD_WALLPAPER', this.file)
+        .then(() => {
+          this.$bvToast.toast('File uploaded', { title: 'Success', variant: 'success' });
+          this.file = null;
+          this.saving = false;
+          this.$bus.$emit('WALLPAPER_UPLOADED');
+        })
         .catch(() => {
           this.saving = false;
           this.$bvToast.toast('There was an error uploading wallpaper', { title: 'Error', variant: 'danger' });
         });
-
-      this.file = null;
-      this.saving = false;
-      this.$bvToast.toast(file.name, { title: 'File uploaded', variant: 'success' });
-      this.$bus.$emit('WALLPAPER_UPLOADED');
     },
 
     confirmDeleteWallpaper(file) {

src/router.js

@@ -5,6 +5,7 @@ import About from '@/pages/About';
 import Languages from '@/pages/Languages';
 import Wallpapers from '@/pages/Wallpapers';
 import Tags from '@/pages/Tags';
+import Notes from '@/pages/Notes';
 import Account from '@/pages/Account';
 import Releases from '@/pages/Releases';
 import Auth from '@/pages/Auth';
@@ -64,6 +65,14 @@ export default new Router({
         title: 'Tags',
       },
     },
+    {
+      name: 'notes',
+      path: '/notes',
+      component: Notes,
+      meta: {
+        title: 'Notes',
+      },
+    },
     {
       name: 'language',
       path: '/language',

src/store/actions.js

@@ -275,6 +275,7 @@ export default {
         .get()
         .then((doc) => {
           commit('SET_TWITCH_TOKEN', doc.data());
+          resolve();
         })
         .catch(reject);
     });