Feature/quotes

src/components/CharacterTable.vue

@@ -1,17 +1,93 @@
 <template>
-  <div class="container text-center">
+  <div class="container text-center mb-5">
+
+    <div class="row mt-5">
+      <v-radio-group
+        class="col-sm-2"
+        v-model="genderFilter"
+      >
+        <v-radio
+          v-for="gender in genders"
+          :key="gender"
+          :label="gender"
+          :value="gender"
+        ></v-radio>
+        <v-btn
+          @click="genderFilterOn = !genderFilterOn"
+          class="w-25"
+          :color="genderFilterOn ? 'primary' : 'gray'"
+        > {{ genderFilterOn ? 'On' : 'Off' }} </v-btn>
+      </v-radio-group>
+      <div class="col-sm-4">
+        <div class="row">
+          <div class="col-sm-6">
+            <v-checkbox
+              class="shrink mr-0 mt-0"
+              v-model="raceFilters"
+              label="Human"
+              value="Human"
+            ></v-checkbox>
+            <v-checkbox
+              class="shrink mr-0 mt-0"
+              v-model="raceFilters"
+              label="Elf"
+              value="Elf"
+            ></v-checkbox>
+            <v-checkbox
+              class="shrink mr-0 mt-0"
+              v-model="raceFilters"
+              label="Dwarf"
+              value="Dwarf"
+            ></v-checkbox>
+          </div>
+          <div class="col-sm-6">
+            <v-checkbox
+              class="shrink mr-0 mt-0"
+              v-model="raceFilters"
+              label="Hobbit"
+              value="Hobbit"
+            ></v-checkbox>
+            <v-checkbox
+              class="shrink mr-0 mt-0"
+              v-model="raceFilters"
+              label="Orc"
+              value="Orc"
+            ></v-checkbox>
+            <v-checkbox
+              class="shrink mr-0 mt-0"
+              v-model="raceFilters"
+              label="Dragon"
+              value="Dragon"
+            ></v-checkbox>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <v-card
       v-if="!loading"
       class="elevation-8 mt-5"
     >
       <v-card-title>CHARACTERS</v-card-title>
       <v-data-table
-        :items="characters"
+        :items="filteredCharacters"
         :headers="characterHeaders"
         :items-per-page="5"
+        item-key="_id"
+        :single-select="true"
+        show-select
+        v-model="selectedRow"
+        @click:row="handleRowClick"
       ></v-data-table>
     </v-card>
 
+    <div v-if="selectedRow.length > 0">
+      <quote-table
+        derived
+        :characterId="selectedRow[0]._id"
+      />
+    </div>
+
     <div v-if="loading">
       <v-sheet class="pa-3 mt-5 elevation-8">
         <v-skeleton-loader
@@ -30,13 +106,22 @@
 
 <script>
 import axios from 'axios'
+import QuoteTable from './QuoteTable.vue'
 
 export default {
+  components: {
+    QuoteTable
+  },
   data() {
     return {
       loading: false,
       characters: [],
+      genders: ["Male", "Female"],
+      genderFilter: "Female",
+      genderFilterOn: false,
       characterHeaders: [],
+      raceFilters: [],
+      selectedRow: [],
       apiURL: process.env.VUE_APP_API_URL,
       apiToken: process.env.VUE_APP_API_TOKEN
     }
@@ -45,6 +130,9 @@ export default {
     this.loadItems()
   },
   methods: {
+    handleRowClick(row) {
+      console.log(row);
+    },
     loadItems() {
       this.loading = true
       const url = `${this.apiURL}/character`
@@ -69,9 +157,21 @@ export default {
         })
       }
     }
+  },
+  computed: {
+    filteredCharacters() {
+      let characters = [...this.characters]
+      if (this.genderFilterOn) {
+        characters = characters.filter(c => c.gender === this.genderFilter)
+      }
+      if (this.raceFilters.length > 0) {
+        characters = characters.filter(c => this.raceFilters.includes(c.race))
+      }
+      return characters
+    }
   }
 }
 </script>
 
-<style>
+<style lang="scss" scoped>
 </style>

src/components/QuoteTable.vue

@@ -6,7 +6,7 @@
     >
       <v-card-title>QUOTES</v-card-title>
       <v-data-table
-        :items="quotes"
+        :items="filteredQuotes"
         :headers="quoteHeaders"
         :items-per-page="5"
       ></v-data-table>
@@ -32,6 +32,10 @@
 import axios from 'axios';
 
 export default {
+  props: {
+    derived: Boolean,
+    characterId: String
+  },
   data() {
     return {
       loading: false,
@@ -48,7 +52,6 @@ export default {
     loadItems() {
       this.loading = true
       const url = `${this.apiURL}/quote`
-      console.log(url);
       axios.get(url, {
         headers: {
           Authorization: `Bearer ${this.apiToken}`
@@ -73,6 +76,15 @@ export default {
         })
       }
     }
+  },
+  computed: {
+    filteredQuotes() {
+      let quotes = [...this.quotes]
+      if (this.derived && this.characterId) {
+        quotes = quotes.filter(q => q.character === this.characterId)
+      }
+      return quotes
+    }
   }
 }
 </script>

src/router/index.js

@@ -26,14 +26,6 @@ const routes = [
       },
     ],
   },
-  {
-    path: '/about',
-    name: 'About',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
-  },
 ];
 
 const router = new VueRouter({