fix(dashboard): make data visualization tab the first and make some c…

…hanges on Features tab
eduardo76 · Aug 14, 2017 · 177d76b · 177d76b
1 parent d119ab7
commit 177d76b
Show file tree

Hide file tree

Showing 7 changed files with 142 additions and 153 deletions.
diff --git a/src/components/dashboard/Dashboard.vue b/src/components/dashboard/Dashboard.vue
@@ -13,10 +13,7 @@
     <dashboard-info-widgets></dashboard-info-widgets>
 
     <vuestic-widget class="no-padding no-v-padding">
-      <vuestic-tabs :names="['Overview', 'Data Visualization', 'Users & Members', 'Setup Profile']" ref="tabs">
-        <div slot="Overview">
-          <overview-tab @explore="explore"></overview-tab>
-        </div>
+      <vuestic-tabs :names="['Data Visualization', 'Users & Members', 'Setup Profile', 'Features']" ref="tabs">
         <div slot="Data Visualization">
           <data-visualisation-tab></data-visualisation-tab>
         </div>
@@ -26,6 +23,9 @@
         <div slot="Setup Profile">
           <setup-profile-tab></setup-profile-tab>
         </div>
+        <div slot="Features">
+          <features-tab></features-tab>
+        </div>
       </vuestic-tabs>
     </vuestic-widget>
 
@@ -41,7 +41,7 @@
   import VuesticTabs from '../vuestic-components/vuestic-tabs/VuesticTabs.vue'
   import UsersMembersTab from './users-and-members-tab/UsersMembersTab.vue'
   import SetupProfileTab from './setup-profile-tab/SetupProfileTab.vue'
-  import OverviewTab from './overview-tab/OverviewTab.vue'
+  import FeaturesTab from './features-tab/FeaturesTab.vue'
   import DataVisualisationTab from './data-visualisation-tab/DataVisualisation.vue'
   import DashboardBottomWidgets from './DashboardBottomWidgets.vue'
 
@@ -55,13 +55,8 @@
       VuesticTabs,
       UsersMembersTab,
       SetupProfileTab,
-      OverviewTab,
+      FeaturesTab,
       DashboardBottomWidgets
-    },
-    methods: {
-      explore () {
-        this.$refs.tabs.setActive('Data Visualization')
-      }
     }
   }
 </script>

diff --git a/src/components/dashboard/data-visualisation-tab/DataVisualisation.vue b/src/components/dashboard/data-visualisation-tab/DataVisualisation.vue
@@ -7,10 +7,13 @@
         </div>
       </div>
       <div class="col-md-6">
-        <data-table :apiUrl="apiUrl"
+        <data-table :apiMode="apiMode"
+                    :data="tableData"
                     :tableFields="tableFields"
                     :itemsPerPage="itemsPerPage"
-                    :onEachSide="onEachSide">
+                    :onEachSide="onEachSide"
+                    :sortFunctions="sortFunctions"
+                    :paginationPath="paginationPath">
         </data-table>
       </div>
     </div>
@@ -23,6 +26,8 @@
   import DataTable from '../../vuestic-components/vuestic-datatable/VuesticDataTable.vue'
   import Vue from 'vue'
   import BadgeColumn from '../../tables/BadgeColumn.vue'
+  import LocalData from '../../vuestic-components/vuestic-datatable/data/local-data'
+  import FieldsDef from './fields-definition'
 
   Vue.component('badge-column', BadgeColumn)
 
@@ -38,24 +43,12 @@
     data () {
       return {
         donutChartData: DonutChartData,
-        apiUrl: 'https://vuetable.ratiw.net/api/users',
+        apiMode: false,
+        sortFunctions: FieldsDef.sortFunctions,
+        tableData: LocalData.data,
         onEachSide: 1,
-        tableFields: [
-          {
-            name: '__component:badge-column',
-            title: '',
-            dataClass: 'text-center'
-          },
-          {
-            name: 'name',
-            title: 'user',
-            sortField: 'name'
-          },
-          {
-            name: 'salary',
-            title: 'score'
-          }
-        ],
+        tableFields: FieldsDef.tableFields,
+        paginationPath: 'pagination',
         itemsPerPage: [
           {
             value: 5

diff --git a/src/components/dashboard/data-visualisation-tab/fields-definition.js b/src/components/dashboard/data-visualisation-tab/fields-definition.js
@@ -0,0 +1,23 @@
+export default {
+  tableFields: [
+    {
+      name: '__component:badge-column',
+      title: '',
+      dataClass: 'text-center'
+    },
+    {
+      name: 'name',
+      title: 'user',
+      sortField: 'name'
+    },
+    {
+      name: 'salary',
+      title: 'score'
+    }
+  ],
+  sortFunctions: {
+    'name': function (item1, item2) {
+      return item1 >= item2 ? 1 : -1
+    }
+  }
+}
diff --git a/src/components/dashboard/features-tab/FeaturesTab.vue b/src/components/dashboard/features-tab/FeaturesTab.vue
@@ -0,0 +1,99 @@
+<template>
+  <div class="overview-tab dashboard-tab">
+    <div class="d-flex overview-row flex-row w-100 justify-content-sm-around justify-content-xs-start">
+
+      <div class="overview-col">
+        <div class="overview-item">
+          <div class="overview-icon-container">
+            <i class="i-vuestic-vue"></i>
+          </div>
+          Built with Vue.js framework
+        </div>
+        <div class="overview-item">
+          <div class="overview-icon-container">
+            <i class="i-vuestic-free"></i>
+          </div>
+          Absolutely free for everyone
+        </div>
+        <div class="overview-item">
+          <div class="overview-icon-container">
+            <i class="i-vuestic-fresh"></i>
+          </div>
+          Fresh and crisp design
+        </div>
+      </div>
+
+      <div class="overview-col">
+        <div class="overview-item">
+          <div class="overview-icon-container">
+            <i class="i-vuestic-responsive"></i>
+          </div>
+          Responsive and optimized for mobile
+        </div>
+        <div class="overview-item">
+          <div class="overview-icon-container">
+            <i class="i-vuestic-rich"></i>
+          </div>
+          Tons of useful components
+        </div>
+        <div class="overview-item">
+          <div class="overview-icon-container">
+            <i class="i-vuestic-clean-code"></i>
+          </div>
+          Completely jQuery free
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'features-tab'
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import "../../../sass/_variables.scss";
+  @import "../../../../node_modules/bootstrap/scss/variables";
+  @import "../../../../node_modules/bootstrap/scss/mixins/breakpoints";
+
+  .overview-item {
+    display: flex;
+    align-items: center;
+    height: 55px;
+    margin-bottom: 3rem;
+    padding-right: 1rem;
+    font-size: 1.25rem;
+    font-weight: bold;
+
+    .overview-icon-container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: row;
+      min-width: 85px;
+      max-width: 85px;
+      height: 100%;
+    }
+  }
+
+  .overview-row {
+    @include media-breakpoint-down(xs) {
+      flex-wrap: wrap;
+    }
+  }
+
+  .overview-col:first-child {
+    margin-left: 2rem;
+    @include media-breakpoint-down(md) {
+      margin-left: 0;
+    }
+  }
+
+  .explore-btn {
+    margin-top: 6rem;
+    margin-bottom: 1rem;
+  }
+
+</style>
diff --git a/src/components/dashboard/overview-tab/OverviewTab.vue b/src/components/dashboard/overview-tab/OverviewTab.vue
diff --git a/src/components/extra/Extra.vue b/src/components/extra/Extra.vue
@@ -76,7 +76,7 @@
   import VuesticChat from '../../components/vuestic-components/vuestic-chat/VuesticChat'
   import VuesticFeed from '../vuestic-components/vuestic-feed/VuesticFeed.vue'
   import VuesticSocialNews from '../vuestic-components/vuestic-social-news/VuesticSocialNews.vue'
-  import OverviewTab from '../dashboard/overview-tab/OverviewTab.vue'
+  import OverviewTab from '../dashboard/features-tab/FeaturesTab.vue'
   import SetupProfileTab from '../dashboard/setup-profile-tab/SetupProfileTab.vue'
   import chartData from '../statistics/charts/LineChartData'
 

diff --git a/src/components/tables/Table.vue b/src/components/tables/Table.vue
@@ -212,7 +212,7 @@
     data () {
       return {
         apiUrl: 'https://vuetable.ratiw.net/api/users',
-        apiMode: false,
+        apiMode: true,
         tableFields: FieldsDef.tableFields,
         itemsPerPage: ItemsPerPageDef.itemsPerPage,
         sortFunctions: FieldsDef.sortFunctions,