fix deck selection

+ add settings and new deck route
+ add swipe to show/hide drawer

Co-authored-by: Niko Lockenvitz <nl@nikolockenvitz.de>

src/App.vue

@@ -1,33 +1,91 @@
 <template>
   <div id="app">
-    <v-app id="inspire">
-      <v-app id="sandbox">
-        <v-content>
-          <NavigationBar title="Fancy Flashcard"></NavigationBar>
-          <router-view />
-        </v-content>
+    <v-window :touch="{ left: swipeLeft, right: swipeRight }">
+      <v-app id="inspire">
+        <v-app id="sandbox">
+          <v-content>
+            <NavigationBar
+              ref="navbar"
+              title="Fancy Flashcard"
+              v-bind:decks="decks"
+              v-bind:numberOfSelectedDecks="numberOfSelectedDecks"
+              v-bind:navBarList="navBarList"
+            ></NavigationBar>
+            <router-view v-bind:decks="decks" v-bind:numberOfSelectedDecks="numberOfSelectedDecks" />
+          </v-content>
+        </v-app>
       </v-app>
-    </v-app>
+    </v-window>
   </div>
 </template>
 
 <script>
 import NavigationBar from "./components/layout/NavigationBar.vue";
-import Footer from "./components/layout/Footer.vue";
 
 export default {
   props: {
     title: String
   },
   components: {
-    NavigationBar,
-    Footer
-  }
+    NavigationBar
+  },
+  data() {
+    return {
+      decks: [
+        {
+          id: 1,
+          deckname: "Test Deck 1",
+          selected: false
+        },
+        {
+          id: 2,
+          deckname: "Test Deck 2",
+          selected: false
+        }
+      ],
+      navBarList: [
+        {
+          to: "/",
+          icon: "mdi-home",
+          title: "Home"
+        },
+        {
+          to: "/add",
+          icon: "mdi-plus",
+          title: "Add Deck"
+        },
+        {
+          to: "/settings",
+          icon: "mdi-cog",
+          title: "Settings"
+        },
+        {
+          to: "/about",
+          icon: "mdi-information",
+          title: "About"
+        }
+      ],
+    };
+  },
+  computed: {
+    numberOfSelectedDecks() {
+      return this.decks.filter(deck => deck.selected).length;
+    },
+  },
+  methods: {
+    swipeLeft () {
+      this.$refs.navbar.hideDrawer();
+    },
+    swipeRight () {
+      this.$refs.navbar.showDrawer();
+    },
+  },
 };
 </script>
 
 <style>
-html, body {
+html,
+body {
   /* apply dark mode to scrollbar in firefox desktop */
   background-color: #000;
 }

src/components/deckselection/DeckSelection.vue

@@ -2,60 +2,50 @@
   <div class="DeckSelection">
     <v-subheader>Decks</v-subheader>
     <v-list>
-      <v-list-item-group multiple color="indigo">
+      <v-list-item-group multiple color="indigo" v-model="deckModel">
         <v-list-item
           v-for="deck in decks"
           :key="deck.id"
-          v-model="deck.selected"
+          :value="deck.id"
+          :id="deck.id"
         >
           <v-list-item-content>
             <v-list-item-title v-text="deck.deckname"></v-list-item-title>
           </v-list-item-content>
-          <v-list-item-icon v-bind:class="{ hidden: getNumberOfSelectedDecks()===0, visible: getNumberOfSelectedDecks()>0 }">
+          <v-list-item-icon v-bind:class="{ hidden: numberOfSelectedDecks===0, visible: numberOfSelectedDecks>0 }">
             <v-icon v-if="deck.selected">mdi-check-box-outline</v-icon>
             <v-icon v-else>mdi-checkbox-blank-outline</v-icon>
           </v-list-item-icon>
         </v-list-item>
       </v-list-item-group>
     </v-list>
-
     <v-btn class="mx-2" fab dark color="indigo">
-      <v-icon v-if="getNumberOfSelectedDecks()>0" class="rotate-90">mdi-navigation</v-icon>
-      <v-icon v-else>mdi-plus</v-icon>
+      <v-icon
+        v-text="numberOfSelectedDecks === 0 ? 'mdi-plus' : 'mdi-navigation'"
+        :class="{ 'rotate-90': numberOfSelectedDecks > 0 }" />
     </v-btn>
   </div>
 </template>
 
 <script>
-
 export default {
   name: "DeckSelection",
-  created: function () {
-    this.$eventHub.$on("clearDeckSelection", () => {
-      this.setSelectedStateOfAllDecks(false);
-    });
-    this.$eventHub.$on("selectAllDecks", () => {
-      this.setSelectedStateOfAllDecks(true);
-    });
-  },
   props: {
-    decks: Array
+    decks: Array,
+    numberOfSelectedDecks: Number,
   },
-  methods: {
-    getNumberOfSelectedDecks () {
-      let numberOfSelectedDecks = 0;
-      for (let deck of this.decks) {
-        if (deck.selected) numberOfSelectedDecks++;
+  computed: {
+    deckModel: {
+      get () {
+        return this.decks.map((deck) => deck.selected ? deck.id : undefined).filter((id) => id !== undefined);
+      },
+      set (newModel) {
+        this.decks.forEach((deck) => {
+          deck.selected = newModel.includes(deck.id);
+        });
       }
-      this.$eventHub.$emit("numberOfSelectedDecks", numberOfSelectedDecks);
-      return numberOfSelectedDecks;
-    },
-    setSelectedStateOfAllDecks (state) {
-      for (let deck of this.decks) {
-        deck.selected = state;
-      }
-    },
-  },
+    }
+  }
 };
 </script>
 

src/components/layout/NavigationBar.vue

@@ -11,69 +11,49 @@
       overflow
     >
       <v-list>
-        <v-list-item :to="'/'" link>
+        <v-list-item v-for="navItem in navBarList" :key="navItem.to" :to="navItem.to" link>
           <v-list-item-icon>
-            <v-icon>mdi-home</v-icon>
+            <v-icon>{{navItem.icon}}</v-icon>
           </v-list-item-icon>
           <v-list-item-content>
-            <v-list-item-title>Home</v-list-item-title>
-          </v-list-item-content>
-        </v-list-item>
-        
-        <v-list-item :to="'/about'" link>
-          <v-list-item-icon>
-            <v-icon>mdi-information</v-icon>
-          </v-list-item-icon>
-          <v-list-item-content>
-            <v-list-item-title>About</v-list-item-title>
+            <v-list-item-title>{{navItem.title}}</v-list-item-title>
           </v-list-item-content>
         </v-list-item>
       </v-list>
     </v-navigation-drawer>
 
-    <v-app-bar :clipped-left="primaryDrawer.clipped" app>
-      <v-app-bar-nav-icon v-if="numberOfSelectedDecks===0"
+    <v-app-bar
+      :clipped-left="primaryDrawer.clipped"
+      app
+      :class="{ 'indigo': numberOfSelectedDecks>0}"
+    >
+      <v-app-bar-nav-icon
+        v-if="numberOfSelectedDecks===0"
         @click.stop="primaryDrawer.model = !primaryDrawer.model"
       ></v-app-bar-nav-icon>
-      <v-btn v-else icon
-        @click="deselectAll"
-      >
+      <v-btn v-else icon @click="deselectAll">
         <v-icon>mdi-close</v-icon>
       </v-btn>
 
-
       <v-toolbar-title>
         {{ numberOfSelectedDecks > 0
-          ? `${numberOfSelectedDecks} deck${numberOfSelectedDecks === 1 ? "":"s"} selected`
-          : title }}
+        ? `${numberOfSelectedDecks} deck${numberOfSelectedDecks === 1 ? "":"s"} selected`
+        : title }}
       </v-toolbar-title>
 
       <v-spacer></v-spacer>
 
-      <v-btn icon v-if="numberOfSelectedDecks===1"
-        @click="showInfoForSelectedDeck"
-      >
+      <v-btn icon v-if="numberOfSelectedDecks===1" @click="showInfoForSelectedDeck">
         <v-icon>mdi-information</v-icon>
       </v-btn>
 
-      <v-btn icon v-if="numberOfSelectedDecks>0"
-        @click="selectAll"
-      >
+      <v-btn icon v-if="numberOfSelectedDecks>0" @click="selectAll">
         <v-icon>mdi-checkbox-multiple-marked</v-icon>
       </v-btn>
 
-      <v-btn icon v-if="numberOfSelectedDecks>0"
-        @click="deselectAll"
-      >
-        <v-icon>mdi-checkbox-multiple-blank-outline</v-icon>
-      </v-btn>
-
-      <v-btn icon v-if="numberOfSelectedDecks>0"
-        @click="deleteSelected"
-      >
+      <v-btn icon v-if="numberOfSelectedDecks>0" @click="deleteSelected">
         <v-icon>mdi-delete</v-icon>
       </v-btn>
-
     </v-app-bar>
   </div>
 </template>
@@ -81,38 +61,45 @@
 <script>
 export default {
   name: "NavigationBar",
-  created: function () {
-    this.$eventHub.$on("numberOfSelectedDecks", (data) => {
-      this.numberOfSelectedDecks = data;
-    });
-  },
   props: {
-    title: String
+    title: String,
+    decks: Array,
+    numberOfSelectedDecks: Number,
+    navBarList: Array
   },
   data: () => ({
     primaryDrawer: {
-      model: null,
+      model: false,
       type: "temporary",
       clipped: true,
       floating: false,
       mini: false
-    },
-    numberOfSelectedDecks: 0,
+    }
   }),
   methods: {
-    deselectAll () {
-      this.$eventHub.$emit("clearDeckSelection");
+    deselectAll() {
+      this.decks.forEach(deck => {
+        deck.selected = false;
+      });
     },
-    selectAll () {
-      this.$eventHub.$emit("selectAllDecks");
+    selectAll() {
+      this.decks.forEach(deck => {
+        deck.selected = true;
+      });
     },
-    deleteSelected () {
-      this.$eventHub.$emit("deleteSelectedDecks");
+    deleteSelected() {
+      console.log("delete");
     },
-    showInfoForSelectedDeck () {
-      this.$eventHub.$emit("showInformationForSelectedDeck");
+    showInfoForSelectedDeck() {
+      console.log("show info");
     },
-  },
+    showDrawer() {
+      this.primaryDrawer.model = true;
+    },
+    hideDrawer() {
+      this.primaryDrawer.model = false;
+    }
+  }
 };
 </script>
 

src/router/index.js

@@ -1,22 +1,30 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import Home from '../views/Home.vue'
 
 Vue.use(VueRouter)
 
-  const routes = [
+const routes = [
   {
     path: '/',
     name: 'Deckselection',
-    component: Home
+    component: () => import('../views/Home.vue'),
+    props: true,
+  },
+  {
+    path: '/add',
+    name: 'Add New Deck',
+    component: () => import('../views/AddNewDeck.vue'),
+    props: true,
+  },
+  {
+    path: '/settings',
+    name: 'Settings',
+    component: () => import('../views/Settings.vue'),
   },
   {
     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')
+    component: () => import('../views/About.vue'),
   }
 ]
 

src/views/AddNewDeck.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="settings">
+    <v-container fluid>
+      <v-row align="center" justify="center">
+        <v-col cols="10">
+          <span class="title">Fancy Flashcard</span>
+          <br>
+          <span>You will be able to add a new deck here.</span>
+          <br>
+          <a href="https://github.com/dhbw-ffc/ffc">https://github.com/dhbw-ffc/ffc</a>
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
+</template>

src/views/Home.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="deckselection">
-    <DeckSelection v-bind:decks="decks"></DeckSelection>
+    <DeckSelection v-bind:decks="decks" v-bind:numberOfSelectedDecks="numberOfSelectedDecks"></DeckSelection>
   </div>
 </template>
 
@@ -8,23 +8,16 @@
 import DeckSelection from '../components/deckselection/DeckSelection.vue'
 export default {
   name: 'App',
+  props: {
+    decks: Array,
+    numberOfSelectedDecks: Number
+  },
+  computed: {
+    
+  },
   components: {
     DeckSelection
   },
-  data() {
-    return {
-      decks: [
-        {
-          id: 1,
-          deckname: "Test1"
-        },
-        {
-          id: 2,
-          deckname: "Test2"
-        }
-      ]
-    };
-  },
 }
 </script>
 

src/views/Settings.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="settings">
+    <v-container fluid>
+      <v-row align="center" justify="center">
+        <v-col cols="10">
+          <span class="title">Fancy Flashcard</span>
+          <br>
+          <span>You will be able to change your settings here.</span>
+          <br>
+          <a href="https://github.com/dhbw-ffc/ffc">https://github.com/dhbw-ffc/ffc</a>
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
+</template>