Merge branch 'develop'

Geminii · Mar 19, 2019 · 31f6b6a · 31f6b6a
2 parents 77f8738 + 88cf9e7
commit 31f6b6a
Show file tree

Hide file tree

Showing 23 changed files with 263 additions and 614 deletions.
diff --git a/components/core/AppDrawer.vue b/components/core/AppDrawer.vue
@@ -68,15 +68,15 @@
 
 <script>
   // Utilities
-  import { mapMutations, mapState } from 'vuex'
+  import { mapActions, mapGetters } from 'vuex'
 
   export default {
     data() {
       return {
         logo: '/vuetifylogo.png',
         links: [
           {
-            to: '/',
+            to: '/dashboard',
             icon: 'mdi-view-dashboard',
             text: 'Dashboard'
           },
@@ -115,12 +115,18 @@
       }
     },
     computed: {
-      ...mapState('app', ['image', 'color']),
+      ...mapGetters({
+        image: 'app/getImage',
+        color: 'app/getColor',
+        drawer: 'app/getDrawer'
+      }),
+
+
       inputValue: {
-        get () {
-          return this.$store.state.app.drawer
+        get() {
+          return this.drawer
         },
-        set (val) {
+        set(val) {
           this.setDrawer(val)
         }
       }
@@ -133,13 +139,12 @@
       window.removeEventListener('resize', this.onResponsiveInverted)
     },
     methods: {
-      ...mapMutations('app', ['setDrawer', 'toggleDrawer']),
-      onResponsiveInverted () {
-        if (window.innerWidth < 991) {
-          this.responsive = true
-        } else {
-          this.responsive = false
-        }
+      ...mapActions({
+        setDrawer: 'app/setDrawer'
+      }),
+
+      onResponsiveInverted() {
+        this.responsive = window.innerWidth < 991;
       }
     }
   }

diff --git a/components/core/AppFilter.vue b/components/core/AppFilter.vue
@@ -115,7 +115,7 @@
 
 <script>
   // Utilities
-  import { mapMutations, mapState } from 'vuex'
+  import { mapGetters, mapActions } from 'vuex'
 
   export default {
     data: () => ({
@@ -135,11 +135,17 @@
     }),
 
     computed: {
-      ...mapState('app', ['image', 'color'])
+      ...mapGetters({
+        image: 'app/getImage',
+        color: 'app/getColor'
+      })
     },
 
     methods: {
-      ...mapMutations('app', ['setImage', 'setColor'])
+      ...mapActions({
+        setImage: 'app/setImage',
+        setColor: 'app/setColor'
+      }),
     }
   }
 </script>

diff --git a/components/core/AppFooter.vue b/components/core/AppFooter.vue
@@ -33,7 +33,7 @@
 export default {
   data: () => ({
     links: [
-      { name: 'Dashboard', Link: '/' },
+      { name: 'Dashboard', Link: '/dashboard' },
       { name: 'Creative Tim', Link: 'https://www.creative-tim.com' },
       { name: 'About Us', Link: 'https://creative-tim.com/presentation' },
       { name: 'Blog', Link: 'https://blog.creative-tim.com' }

diff --git a/components/core/AppToolbar.vue b/components/core/AppToolbar.vue
@@ -1,7 +1,6 @@
 <template>
   <v-toolbar
     id="core-toolbar"
-
     flat
     prominent
     style="background: #eee;"
@@ -37,13 +36,14 @@
           hide-details
           color="purple"
         />
-        <router-link
+        <nuxt-link
           v-ripple
           class="toolbar-items"
           to="/"
+          title="Dashboard"
         >
           <v-icon color="tertiary">mdi-view-dashboard</v-icon>
-        </router-link>
+        </nuxt-link>
         <v-menu
           bottom
           left
@@ -80,72 +80,88 @@
             </v-list>
           </v-card>
         </v-menu>
-        <router-link
+        <nuxt-link
           v-ripple
           class="toolbar-items"
           to="/user-profile"
+          title="User profile"
         >
           <v-icon color="tertiary">mdi-account</v-icon>
-        </router-link>
+        </nuxt-link>
+        <nuxt-link
+          v-ripple
+          class="toolbar-items"
+          to="/"
+          title="Logout"
+          @click.native="logout"
+        >
+          <v-icon color="tertiary">mdi-logout</v-icon>
+        </nuxt-link>
       </v-flex>
     </v-toolbar-items>
   </v-toolbar>
 </template>
 
 <script>
+  import { mapActions, mapGetters } from 'vuex'
 
-import {
-  mapMutations
-} from 'vuex'
-
-export default {
-  data: () => ({
-    notifications: [
-      'Mike, John responded to your email',
-      'You have 5 new tasks',
-      'You\'re now a friend with Andrew',
-      'Another Notification',
-      'Another One'
-    ],
-    title: 'Dashboard',
-    responsive: true,
-    responsiveInput: true
-  }),
-
-  watch: {
-    '$route' (val) {
-      console.log('val = ', val);
-      this.title = val.name === 'index' ? 'Dashboard' : val.name
-    }
-  },
-
-  mounted () {
-    this.onResponsiveInverted()
-    window.addEventListener('resize', this.onResponsiveInverted)
-  },
-  beforeDestroy () {
-    window.removeEventListener('resize', this.onResponsiveInverted)
-  },
-
-  methods: {
-    ...mapMutations('app', ['setDrawer', 'toggleDrawer']),
-    onClickBtn () {
-      this.setDrawer(!this.$store.state.app.drawer)
+  export default {
+    data: () => ({
+      notifications: [
+        'Mike, John responded to your email',
+        'You have 5 new tasks',
+        'You\'re now a friend with Andrew',
+        'Another Notification',
+        'Another One'
+      ],
+      title: 'Dashboard',
+      responsive: true,
+      responsiveInput: true
+    }),
+    watch: {
+      '$route' (val) {
+        this.title = val.name
+      }
     },
-    onClick () {
-      //
+    computed: {
+      ...mapGetters({
+        drawer: 'app/getDrawer'
+      })
     },
-    onResponsiveInverted () {
-      if (window.innerWidth < 991) {
-        this.responsive = true
-        this.responsiveInput = false
-      } else {
-        this.responsive = false
-        this.responsiveInput = true
+    methods: {
+      ...mapActions({
+        setUsername: 'user/setUsername',
+        setDrawer: 'app/setDrawer'
+      }),
+
+      onClickBtn () {
+        this.setDrawer(!this.drawer)
+      },
+      onClick () {
+        // Do something
+      },
+      onResponsiveInverted () {
+        if (window.innerWidth < 991) {
+          this.responsive = true
+          this.responsiveInput = false
+        } else {
+          this.responsive = false
+          this.responsiveInput = true
+        }
+      },
+      async logout() {
+        await this.setUsername(null);
+        this.$router.push({ path: '/' });
       }
+    },
+    mounted () {
+      this.onResponsiveInverted()
+      window.addEventListener('resize', this.onResponsiveInverted)
+    },
+    beforeDestroy () {
+      window.removeEventListener('resize', this.onResponsiveInverted)
     }
   }
-}
 </script>
 
 <style>

diff --git a/layouts/dashboard.vue b/layouts/dashboard.vue
@@ -0,0 +1,34 @@
+<template>
+  <v-app>
+    <core-filter />
+
+    <core-toolbar />
+
+    <core-drawer />
+
+    <core-view />
+  </v-app>
+</template>
+
+<script>
+  import coreFilter from '~/components/core/AppFilter';
+  import coreToolbar from '~/components/core/AppToolbar';
+  import coreDrawer from '~/components/core/AppDrawer';
+  import coreView from '~/components/core/AppView';
+
+  export default {
+    components: {
+      coreFilter,
+      coreToolbar,
+      coreDrawer,
+      coreView
+    }
+  }
+</script>
+
+<style lang="scss">
+  /* Remove in 1.2 */
+  .v-datatable thead th.column.sortable i {
+    vertical-align: unset;
+  }
+</style>
diff --git a/layouts/default.vue b/layouts/default.vue
@@ -1,34 +1,22 @@
 <template>
-  <v-app>
-    <core-filter />
-
-    <core-toolbar />
-
-    <core-drawer />
-
-    <core-view />
+  <v-app v-show="!isLoading">
+    <v-fade-transition mode="out-in">
+      <nuxt />
+    </v-fade-transition>
   </v-app>
 </template>
 
 <script>
-  import coreFilter from '~/components/core/AppFilter';
-  import coreToolbar from '~/components/core/AppToolbar';
-  import coreDrawer from '~/components/core/AppDrawer';
-  import coreView from '~/components/core/AppView';
-
   export default {
-    components: {
-      coreFilter,
-      coreToolbar,
-      coreDrawer,
-      coreView
+    data() {
+      return {
+        isLoading: true
+      }
+    },
+    mounted() {
+      this.$nextTick(function() {
+        this.isLoading = false
+      });
     }
   }
 </script>
-
-<style lang="scss">
-  /* Remove in 1.2 */
-  .v-datatable thead th.column.sortable i {
-    vertical-align: unset;
-  }
-</style>
diff --git a/middleware/authentication.js b/middleware/authentication.js
@@ -0,0 +1,3 @@
+export default function ({ store, redirect }) {
+  if (!store.state.user.username) { return redirect('/'); }
+}
diff --git a/pages/dashboard.vue b/pages/dashboard.vue
@@ -365,6 +365,8 @@
   import materialStatsCard from '~/components/material/AppStatsCard'
 
   export default {
+    layout: 'dashboard',
+    middleware: 'authentication',
     components: {
       materialCard,
       materialChartCard,

diff --git a/pages/icons.vue b/pages/icons.vue
@@ -63,6 +63,7 @@
   import materialCard from '~/components/material/AppCard'
 
   export default {
+    layout: 'dashboard',
     components: {
       materialCard
     },