Remove useless slots

wsenfuma · Jun 5, 2018 · a1be638 · a1be638
1 parent 2021579
commit a1be638
Show file tree

Hide file tree

Showing 14 changed files with 140 additions and 225 deletions.
diff --git a/src/components/admin/AppLayout.vue b/src/components/admin/AppLayout.vue
@@ -1,17 +1,13 @@
 <template>
   <vuestic-layout>
-    <app-navbar slot="navbar" :value="opened" @toggle-menu="toggleSidebar"/>
-    <app-sidebar slot="sidebar" :opened="opened"/>
-    <div slot="content" class="content-wrap" id="content-wrap">
-      <main id="content" class="content" role="main">
-        <vuestic-breadcrumbs :breadcrumbs="breadcrumbs"/>
-        <vuestic-pre-loader v-show="isLoading" ref="preLoader" class="pre-loader"></vuestic-pre-loader>
-        <router-view></router-view>
-      </main>
-    </div>
-    <div slot="footer" class="made-by-footer">
-      ©2018. Made by&nbsp;<a href="http://epicmax.co" target="_blank">Epicmax </a>
-    </div>
+    <app-navbar :isOpen="opened" @toggle-menu="toggleSidebar"/>
+    <app-sidebar :isOpen="opened"/>
+    <main slot="content" id="content" class="content" role="main">
+      <vuestic-breadcrumbs :breadcrumbs="breadcrumbs"/>
+      <vuestic-pre-loader v-show="isLoading" ref="preLoader" class="pre-loader"></vuestic-pre-loader>
+      <router-view></router-view>
+    </main>
+    <span slot="footer">©2018. Made by&nbsp;<a href="http://epicmax.co" target="_blank">Epicmax </a></span>
   </vuestic-layout>
 </template>
 
@@ -20,7 +16,6 @@
   import VuesticLayout from '../../vuestic-theme/vuestic-components/vuestic-layout/VuesticLayout'
   import AppNavbar from './app-navbar/AppNavbar'
   import AppSidebar from './app-sidebar/AppSidebar'
-  import store from '../../store/index'
   import {mapGetters} from 'vuex'
 
   export default {
@@ -39,7 +34,6 @@
     methods: {
       toggleSidebar (opened) {
         this.opened = opened
-        store.dispatch('toggleSidebar', this.opened)
       }
     },
     computed: {

diff --git a/src/components/admin/app-navbar/AppNavbar.vue b/src/components/admin/app-navbar/AppNavbar.vue
@@ -3,13 +3,13 @@
   <vuestic-navbar>
     <header-selector slot="selector" v-model="valueProxy"/>
     <span slot="logo" class="i-vuestic"></span>
-    <div slot="center" class="header-elem-wrapper navbar-text offset-md-1 col-md-7">
+    <span slot="center">
       {{$t('navbar.messageUs')}}&nbsp;<a href="mailto:[email protected]">[email protected]</a>
-    </div>
-    <message-dropdown slot="message"></message-dropdown>
-    <notification-dropdown slot="notification"></notification-dropdown>
-    <language-dropdown slot="language"></language-dropdown>
-    <profile-dropdown slot="profile">
+    </span>
+    <message-dropdown :options="this.messages"></message-dropdown>
+    <notification-dropdown :options="this.notifications"></notification-dropdown>
+    <language-dropdown :options="this.languages"></language-dropdown>
+    <profile-dropdown :options="this.profiles">
       <img src="http://i.imgur.com/nfa5itq.png"/>
     </profile-dropdown>
   </vuestic-navbar>
@@ -37,19 +37,66 @@
     },
 
     props: {
-      value: {
+      isOpen: {
         type: Boolean,
         required: true
       }
     },
 
+    data () {
+      return {
+        messages: [
+          {
+            name: 'new',
+            details: { name: 'Oleg M' }
+          },
+          {
+            name: 'new',
+            details: { name: 'Andrei H' }
+          },
+        ],
+        notifications: [
+          {
+            name: 'sentMessage',
+            details: { name: 'Vasily S' }
+          },
+          {
+            name: 'uploadedZip',
+            details: { name: 'Oleg M', type: 'typography component' }
+          },
+          {
+            name: 'startedTopic',
+            details: { name: 'Andrei H' }
+          }
+        ],
+        languages: [
+          {
+            code: 'gb',
+            name: 'english'
+          },
+          {
+            code: 'es',
+            name: 'spanish'
+          }
+        ],
+        profiles: [
+          {
+            name: 'profile'
+          },
+          {
+            name: 'logout'
+          }
+        ]
+      }
+    },
+
     computed: {
       valueProxy: {
         get () {
-          return this.value
+          return this.isOpen
         },
-        set (value) {
-          this.$emit('toggle-menu', value)
+        set (opened) {
+          this.$emit('toggle-menu', opened)
         },
       }
     },

diff --git a/src/components/admin/app-navbar/components/HeaderSelector.vue b/src/components/admin/app-navbar/components/HeaderSelector.vue
@@ -1,7 +1,7 @@
 <template>
   <span class="header-selector"
        :class="{ 'i-menu-expanded': !value, 'i-menu-collapsed': value }"
-       @click="onClick()"
+       @click="$emit('input', !value)"
   />
 </template>
 
@@ -13,21 +13,16 @@
         type: Boolean,
         required: true
       },
-    },
-    methods: {
-      onClick () {
-        this.$emit('input', !this.value)
-      }
     }
   }
 </script>
 
 <style lang="scss">
 
+  @import "../../../../sass/mixins";
+
   .header-selector {
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    @include flex-center();
     cursor: pointer;
   }
 

diff --git a/src/components/admin/app-navbar/components/dropdowns/LanguageDropdown.vue b/src/components/admin/app-navbar/components/dropdowns/LanguageDropdown.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="language-selector dropdown" v-dropdown.closeOnMenuClick>
-    <a class="language-selector-button dropdown-toggle" href="#">
+  <div class="language-dropdown dropdown" v-dropdown.closeOnMenuClick>
+    <a class="language-dropdown-button dropdown-toggle" href="#">
       <span class="flag-icon flag-icon-large" :class="flagIconClass(currentLanguage())"></span>
     </a>
     <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
@@ -27,18 +27,7 @@
     props: {
       options: {
         type: Array,
-        default () {
-          return [
-            {
-              code: 'gb',
-              name: 'english'
-            },
-            {
-              code: 'es',
-              name: 'spanish'
-            }
-          ]
-        }
+        required: true
       }
     },
 
@@ -65,7 +54,7 @@
   @import "../../../../../../node_modules/bootstrap/scss/functions";
   @import "../../../../../../node_modules/bootstrap/scss/variables";
 
-  .language-selector {
+  .language-dropdown {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -75,7 +64,7 @@
     height: 100%;
     padding: 0;
 
-    .language-selector-button {
+    .language-dropdown-button {
       display: flex;
       align-items: center;
       justify-content: center;

diff --git a/src/components/admin/app-navbar/components/dropdowns/MessageDropdown.vue b/src/components/admin/app-navbar/components/dropdowns/MessageDropdown.vue
@@ -23,18 +23,7 @@
     props: {
       options: {
         type: Array,
-        default () {
-          return [
-            {
-              name: 'new',
-              details: { name: 'Oleg M' }
-            },
-            {
-              name: 'new',
-              details: { name: 'Andrei H' }
-            },
-          ]
-        }
+        required: true
       }
     },
   }

diff --git a/src/components/admin/app-navbar/components/dropdowns/NotificationDropdown.vue b/src/components/admin/app-navbar/components/dropdowns/NotificationDropdown.vue
@@ -23,48 +23,8 @@
     props: {
       options: {
         type: Array,
-        default () {
-          return [
-            {
-              name: 'sentMessage',
-              details: { name: 'Vasily S' }
-            },
-            {
-              name: 'uploadedZip',
-              details: { name: 'Oleg M', type: 'typography component' }
-            },
-            {
-              name: 'startedTopic',
-              details: { name: 'Andrei H' }
-            }
-          ]
-        }
+        required: true
       }
     },
   }
 </script>
-
-<style lang="scss">
-  @import "../../../../../sass/variables";
-
-  .notify {
-    position: relative;
-
-    &::after {
-      content: '';
-      position: absolute;
-      right: -6px;
-      top: -6px;
-      background-color: $brand-primary;
-      height: 12px;
-      width: 12px;
-      border-radius: 50%;
-    }
-  }
-
-  .i-nav-notification.notify::after {
-    right: -4px;
-    top: 0;
-  }
-
-</style>
diff --git a/src/components/admin/app-navbar/components/dropdowns/ProfileDropdown.vue b/src/components/admin/app-navbar/components/dropdowns/ProfileDropdown.vue
@@ -23,16 +23,7 @@
     props: {
       options: {
         type: Array,
-        default () {
-          return [
-            {
-              name: 'profile'
-            },
-            {
-              name: 'logout'
-            }
-          ]
-        }
+        required: true
       }
     },
   }

diff --git a/src/components/admin/app-sidebar/AppSidebar.vue b/src/components/admin/app-sidebar/AppSidebar.vue
@@ -1,7 +1,6 @@
 <template>
-  <vuestic-sidebar :hidden="this.opened"
+  <vuestic-sidebar :hidden="this.isOpen"
                    :toggleWithoutAnimation="toggleWithoutAnimation"
-                   :items="menuItems"
                    @toggle-item="toggleMenuItem($event)">
     <template slot="menu">
       <sidebar-link
@@ -158,18 +157,12 @@
       SidebarLinkGroup
     },
     props: {
-      opened: {
+      isOpen: {
         type: Boolean,
         required: true
       }
     },
-    methods: {
-      mounted () {
-        this.sidebar = this.$refs.sidebar
-        console.log(this.sidebar)
-      },
-    },
-    watch: {
+    /* watch: {
       $route (route) {
         const parent = _findMatchingParentMenuItem.call(this, route.name) || {}
         this.menuItems.forEach((item) => {
@@ -179,19 +172,19 @@
           })
         })
       }
-    },
+    }, */
     computed: {
       ...mapGetters([
         'toggleWithoutAnimation'
       ])
     }
   }
 
-  function _findMatchingParentMenuItem (itemName) {
+  /* function _findMatchingParentMenuItem (itemName) {
     let parentItem
     this.menuItems.forEach((item) => {
       parentItem = (item.children && item.children.find((child) => child.name === itemName)) ? item : parentItem
     })
     return parentItem
-  }
+  } */
 </script>
diff --git a/src/router/index.js b/src/router/index.js
@@ -18,28 +18,23 @@ if (process.env.NODE_ENV === 'development') {
 export default new Router({
   routes: [
     ...demoRoutes,
+    {
+      path: '*',
+      redirect: { name: 'Dashboard' }
+    },
     {
       name: 'auth',
       path: '/auth',
       component: AuthLayout,
-      meta: {
-        title: 'menu.auth',
-      },
       children: [
         {
           path: '/auth/login',
           component: lazyLoading('auth/login/Login'),
-          meta: {
-            default: true,
-            title: 'menu.login'
-          }
+          default: true,
         },
         {
           path: '/auth/signup',
-          component: lazyLoading('auth/signup/Signup'),
-          meta: {
-            title: 'menu.signUp'
-          }
+          component: lazyLoading('auth/signup/Signup')
         },
       ]
     },
@@ -49,6 +44,7 @@ export default new Router({
       component: AppLayout,
       children: [
         {
+          name: 'Dashboard',
           path: '/admin/dashboard',
           component: lazyLoading('dashboard/Dashboard'),
           default: true