Category filtering

src/App.vue

@@ -66,15 +66,28 @@
       <v-app-bar-nav-icon @click.stop="drawer = !drawer" class="mr-1"></v-app-bar-nav-icon>
     </v-app-bar>
 
-    <v-navigation-drawer v-model="drawer" app dark temporary right width="200">
-      <v-list dense nav>
-        <v-list-item link v-for="link in navigation" :key="link.label" :to="link.route">
+          <template v-slot:activator>
+            <v-list-item-title>Videos</v-list-item-title>
+          </template>
+
+          <v-list-item link v-for="link in categoryLinks" :key="link.label" :to="link.route">
+            <v-list-item-content>
+              <v-list-item-title>{{ link.label }}</v-list-item-title>
+            </v-list-item-content>
+          </v-list-item>
+        </v-list-group>
+      </v-list>
+
+      <v-divider></v-divider>
+
+      <v-list>
+        <v-list-item link to="/login" v-if="!user">
           <v-list-item-icon>
-            <v-icon>{{ link.icon }}</v-icon>
+            <v-icon>mdi-login</v-icon>
           </v-list-item-icon>
 
           <v-list-item-content>
-            <v-list-item-title>{{ link.label }}</v-list-item-title>
+            <v-list-item-title>Sign in</v-list-item-title>
           </v-list-item-content>
         </v-list-item>
 
@@ -88,19 +101,6 @@
           </v-list-item-content>
         </v-list-item>
       </v-list>
-    </v-navigation-drawer>
-
-    <v-main>
-      <v-alert
-        v-if="appStatus.visible"
-        :color="appStatus.color"
-        :type="appStatus.type"
-        dismissible
-        class="ma-3"
-      >
-        {{ appStatus.message }}
-      </v-alert>
-      <router-view></router-view>
 
       <v-snackbar
         v-model="status.visible"
@@ -139,6 +139,7 @@ import firebase from 'firebase/app'
 import User from '@/models/user'
 import Tooltip from '@/components/vuetify-ext/Tooltip.vue'
 import FooterBtn from '@/components/vuetify-ext/FooterBtn.vue'
+import { CATEGORIES } from '@/constants/constants.js'
 
 export default {
   name: 'App',
@@ -158,12 +159,13 @@ export default {
     pluralizedUserString() {
       return this.activeUserCount === 1 ? 'user' : 'users'
     },
-    navigation() {
-      if (this.user) {
-        return this.links.filter(link => link.route !== '/login')
-      } else {
-        return this.links
-      }
+    categoryLinks() {
+      return Object.values(CATEGORIES).map( category => {
+        return {
+          label: category,
+          route: `/videos/categories/${category}`
+        }
+      })
     }
   },
   created() {
@@ -180,23 +182,6 @@ export default {
     return {
       version: '0.1.5',
       drawer: false,
-      links: [
-        {
-          label: "Arena",
-          icon: "mdi-fencing",
-          route: "/"
-        },
-        {
-          label: "Videos",
-          icon: 'mdi-video',
-          route: "/videos"
-        },
-        {
-          label: "Sign in",
-          icon: "mdi-login",
-          route: "/login"
-        }
-      ]
     }
   },
   methods: {
@@ -222,6 +207,9 @@ export default {
     },
     visitPlayer() {
       this.$router.push({ name: 'Player' })
+    },
+    visitVideos() {
+      this.$router.push({ name: 'Videos' })
     }
   },
   watch: {

src/components/Video.vue

@@ -11,7 +11,7 @@
     </v-img>
     <v-card-text class="d-flex justify-space-between align-center py-0">
       <span>By {{ author }}</span>
-      <v-chip class="ma-2" color="primary">
+      <v-chip class="ma-2" color="primary" @click="visitCategory(category)">
         {{ category}}
       </v-chip>
     </v-card-text>
@@ -69,6 +69,11 @@ export default {
     currentDimensions() {
       return this.dimensions[this.$vuetify.breakpoint.name] || this.dimensions['sm']
     }
+  },
+  methods: {
+    visitCategory(category) {
+      this.$router.push(`/videos/categories/${category}`)
+    }
   }
 }
 </script>

src/router/index.js

@@ -29,6 +29,12 @@ const routes = [
     name: 'Videos',
     component: Videos
   },
+  {
+    path: '/videos/categories/:category',
+    name: 'Videos',
+    component: Videos,
+    props: true
+  },
   {
     path: '/upload',
     name: 'VideoUpload',

src/store/index.js

@@ -15,6 +15,7 @@ export default new Vuex.Store({
     player: {},
     players: [],
     videos: [],
+    videoCategory: null,
     status: {
       visible: false,
       message: null,
@@ -45,6 +46,9 @@ export default new Vuex.Store({
     },
     setTitle(state, title) {
       state.title = title
+    },
+    setVideoCategory(state, category) {
+      state.videoCategory = category
     }
   },
   actions: {
@@ -125,6 +129,9 @@ export default new Vuex.Store({
     setTitle({ commit }, title) {
       commit('setTitle', title)
     },
+    setVideoCategory({ commit }, category) {
+      commit('setVideoCategory', category)
+    },
     bindPlayerRef: firestoreAction(({ bindFirestoreRef, state }) => {
       console.log('[Vuex] Binding player ref from Firestore')
       return bindFirestoreRef(
@@ -148,10 +155,15 @@ export default new Vuex.Store({
         reset: false
       })
     }),
-    bindVideosRef: firestoreAction(({ bindFirestoreRef }) => {
+    bindVideosRef: firestoreAction(({ bindFirestoreRef, state }) => {
+      let query = store.collection('videos').orderBy('addedAt', 'desc')
+      if (state.videoCategory) {
+        query = query.where('category', '==', state.videoCategory)
+      }
+
       return bindFirestoreRef(
         'videos',
-        store.collection('videos').orderBy('addedAt', 'desc'),
+        query,
         { reset: false }
       )
     })

src/views/VideoUpload.vue

@@ -17,6 +17,9 @@
 
             <v-select label="Category" :items="categories" v-model="category">
             </v-select>
+
+            <v-textarea label="Description" v-model="description">
+            </v-textarea>
           </v-card-text>
           <v-card-actions>
             <v-btn color="success" @click="upload">Upload</v-btn>
@@ -39,6 +42,7 @@ export default {
       author: null,
       title: null,
       category: null,
+      description: null,
       imageUrl: "/placeholder_image.png",
       baseURL: "https://www.youtube.com/oembed?format=json"
     }
@@ -53,7 +57,8 @@ export default {
         author: this.author,
         title: this.title,
         url: this.url,
-        category: this.category
+        category: this.category,
+        description: this.description
       }
     }
   },

src/views/Videos.vue

@@ -1,5 +1,17 @@
 <template>
   <v-container>
+    <v-row>
+      <v-col>
+        <v-breadcrumbs large :items="breadcrumbs" divider="/">
+          <template v-slot:item="{ item }">
+            <v-breadcrumbs-item :href="item.href">
+              {{ item.text.toUpperCase() }}
+            </v-breadcrumbs-item>
+          </template>
+        </v-breadcrumbs>
+      </v-col>
+    </v-row>
+
     <v-row>
       <v-col cols="12" lg="6" v-for="video in videos" :key="video.uid">
         <Video :url="video.url" :title="video.title" :category="video.category" :author="video.author" />
@@ -10,19 +22,41 @@
 
 <script>
 import Video from '@/components/Video.vue'
-import { mapState, mapGetters } from 'vuex'
+import { mapState } from 'vuex'
 
 export default {
   name: 'Videos',
   components: {
     Video
   },
+  props: {
+    category: {
+      type: String,
+      required: false
+    }
+  },
   mounted() {
-    this.$store.dispatch('bindVideosRef')
     this.$store.dispatch('setTitle', 'Videos')
+    this.$store.dispatch('setVideoCategory', this.category)
+    this.$store.dispatch('bindVideosRef')
   },
   computed: {
-    ...mapState(['videos'])
+    ...mapState(['videos', 'videoCategory']),
+    breadcrumbs() {
+      return [
+        { text: 'Videos', href: '/videos' },
+        this.categoryBreadcrumb
+      ].filter(item => item)
+    },
+    categoryBreadcrumb() {
+      if (this.videoCategory) {
+        return {
+          text: this.videoCategory
+        }
+      } else {
+        return null
+      }
+    }
   }
 }
 </script>