Refactor/data-tables (epicmaxco#595)

* chore(npm): commit package-lock after fresh npm install on node 10.15

* chore(npm): vue-template-compiler must be the same version as vue

* feat(data-table): add basic table (using vuetable)

* feat(data-table): implement basic sorting

* feat(data-table): add star / unstar feature for demo purposes

* feat(data-table): support pagination for static data

* feat(data-table): add filter example

* feat(data-table): improve pagination

* feat(data-table): hide pagination if 1 page

* feat(data-table): improve styles

* feat(data-table): configure empty table label, add example

* feat(data-table): add inf scroll example

* feat(data-table): add select example

* feat(data-table): add server-side pagination example

* feat(data-table): fix pagination for static mode

* feat(data-table): add graph to the examples

* chore(yarn): update yarn.lock after fresh install

* feat(data-table): organize demos nicely

* feat(data-table): add loading example

* feat(data-table): style demo container

* feat(data-table): do not import global components, use ma-0 class

* feat(data-table): use va-inner-loading, use rems not px

* feat(data-table): setup promo page

* feat(markup-table): refresh promo page, shared css for both data-table and markup-table

* feat(markup-table): remove old markup table

* feat(data-table): remove old dashboard table, remove old data-table component

* feat(data-table): fix clickable class in va-table

* feat(typography): replace td with th in thead for .content examples

* feat(data-tables): add new example as a dashboard table

* feat(data-tables): add hoverable prop, improve demo sorting

* feat(data-tables): simplify demo search

* feat(data-tables): add resolve toast to the dashboard demo table

* feat(data-tables): polish examples

* feat(data-tables): add en translations

* feat(data-tables): add es and pt translations

* feat(data-tables): add docs

* feat(data-tables): do not limit items if pagination is disabled

* fix: remove filters page

* fix(): add text align helper classes back after bootstrap removal, fix table alignment

* feat(data-table): move scenarios from demo to presentation

* feat(data-table): add server-side pagination to demos

* feat(data-table): remove header slot from va-table

* feat(data-table): remove extra div from partial presentation items

* feat(data-table): do not use dynamic component for presentation

* feat(data-table): remove scoped styles

* feat(data-table): move va-table into mixin

* feat(data-table): use $themes instead of hardcoded colors

* feat(data-table): hide boundary links if total pages <= visible pages

package.json

@@ -86,7 +86,7 @@
     "semver": "5.5.1",
     "shelljs": "0.8.3",
     "vue-book": "0.1.0-alpha.17",
-    "vue-template-compiler": "^2.5.17"
+    "vue-template-compiler": "^2.6.10"
   },
   "engines": {
     "node": ">= 4.0.0",

src/components/admin/app-sidebar/NavigationRoutes.js

@@ -53,6 +53,16 @@ export const navigationRoutes = {
       meta: {
         iconClass: 'vuestic-iconset-tables',
       },
+      children: [
+        {
+          name: 'markup',
+          displayName: 'menu.markupTables',
+        },
+        {
+          name: 'data',
+          displayName: 'menu.dataTables',
+        },
+      ],
     },
     {
       name: 'ui',
@@ -74,10 +84,6 @@ export const navigationRoutes = {
           name: 'collapses',
           displayName: 'menu.collapses',
         },
-        {
-          name: 'filters',
-          displayName: 'menu.filters',
-        },
         {
           name: 'color-pickers',
           displayName: 'menu.colorPickers',

src/components/dashboard/DashboardTable.vue

@@ -1,157 +1,151 @@
 <template>
-  <va-card title="Awesome table">
-    <div class="row justify--space-between align--center mb-2">
-      <div class="flex sm4 xs12">
-        <va-input
-          class="mb-0"
-          v-model="search"
-          :placeholder="$t('dashboard.table.search')"
-        >
-          <va-icon
-            slot="prepend"
-            color="gray"
-            icon="fa fa-search"
-          />
-        </va-input>
-      </div>
-      <div class="flex sm8 table-buttons">
-        <div class="row justify--end align--center">
-          <va-checkbox
-            :label="$t('dashboard.table.verified')"
-            v-model="checkbox"
-            class="mr-3"
-          />
-          <va-button-group>
-            <va-button color="success">
-              {{ $t('dashboard.table.brief') }}
-            </va-button>
-            <va-button outline color="success">
-              {{ $t('dashboard.table.detailed') }}
-            </va-button>
-          </va-button-group>
-          <va-button>{{ $t('dashboard.table.export') }}</va-button>
-          <va-button
-            color="gray"
-            icon-right="ion-ios-arrow-down arrow-down"
-          >
-            6 {{ $t('dashboard.table.perPage') }}
-          </va-button>
+  <div>
+    <va-card :title="$t('dashboard.table.title')">
+      <va-table
+        :fields="fields"
+        :data="filteredData"
+        :loading="loading"
+        hoverable
+      >
+        <div slot="header" class="va-row">
+          <div class="flex pb-0">
+            <va-input
+              :value="term"
+              :placeholder="$t('tables.searchByName')"
+              style="minWidth: 260px"
+              @input="search"
+            >
+              <va-icon name="fa fa-search" slot="prepend" />
+            </va-input>
+          </div>
+
+          <div class="spacer" />
+
+          <div class="flex">
+            <va-button-toggle
+              outline
+              v-model="mode"
+              :options="modeOptions"
+            />
+          </div>
         </div>
-      </div>
-    </div>
 
-    <div class="table-responsive">
-      <table class="table table-striped">
-        <thead>
-        <tr>
-          <td>{{ $t('tables.headings.name') }}</td>
-          <td>{{ $t('tables.headings.email') }}</td>
-          <td>{{ $t('tables.headings.submits') }}</td>
-          <td>{{ $t('tables.headings.status') }}</td>
-          <td>{{ $t('tables.headings.country') }}</td>
-          <td></td>
-        </tr>
-        </thead>
-        <tbody>
-          <tr
-            v-for="(user, idx) in tableData"
-            :key="idx"
-            :class="user.color ? `table-${user.color}` : ''"
-          >
-            <td>{{ user.name }}</td>
-            <td>{{ user.email }}</td>
-            <td>{{ user.submits }}</td>
-            <td>
-              <span
-                class="badge badge-pill text-white"
-                :class="badgeColor[user.status]"
-              >
-                {{ user.status }}
-              </span>
-            </td>
-            <td>{{ user.country }}</td>
-            <td></td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
+        <template slot="icon" slot-scope="props">
+          <va-icon name="fa fa-user" color="secondary" />
+        </template>
 
-    <div class="row justify--center pb-2">
-      <va-pagination
-        v-model="activePage"
-        :visible-pages="2"
-        :pages="20"
-        color="gray"
-      />
-    </div>
-  </va-card>
+        <template slot="status" slot-scope="props">
+          <va-badge :color="getStatusColor(props.rowData.status)">
+            {{ props.rowData.status }}
+          </va-badge>
+        </template>
+
+        <template slot="actions" slot-scope="props">
+          <va-button
+            small
+            outline
+            color="success"
+            icon="fa fa-check"
+            class="ma-0"
+            @click="resolveUser(props.rowData)"
+          >
+            {{ $t('dashboard.table.resolve') }}
+          </va-button>
+        </template>
+      </va-table>
+    </va-card>
+  </div>
 </template>
 
 <script>
+import { debounce } from 'lodash'
+import data from '../markup-tables/data.json'
+
 export default {
-  name: 'DashboardTable',
   data () {
     return {
-      search: '',
-      activePage: 1,
-      checkbox: true,
-      badgeColor: {
-        read: 'badge-info',
-        paid: 'badge-primary',
-        processing: 'badge-warning',
-      },
-      tableData: [{
-        color: '',
-        name: 'Jonathan Patterson',
-        email: '[email protected]',
-        submits: '5',
-        status: 'read',
-        country: 'Peru',
+      users: data.slice(),
+      loading: false,
+      term: null,
+      mode: 0,
+    }
+  },
+  computed: {
+    fields () {
+      return [{
+        name: '__slot:icon',
+        width: '30px',
+        dataClass: 'text-center',
       }, {
-        color: 'success',
-        name: 'Anthony Soto',
-        email: 'abshire_jarrod@yahoo',
-        submits: '189',
-        status: 'paid',
-        country: 'Somalia',
+        name: 'name',
+        title: this.$t('tables.headings.name'),
+        width: '30%',
       }, {
-        color: '',
-        name: 'Ruth Wheeler',
-        email: 'abdiel.cartwright@sc',
-        submits: '5',
-        status: 'read',
-        country: 'Liechtenstein',
+        name: 'email',
+        title: this.$t('tables.headings.email'),
+        width: '30%',
       }, {
-        color: '',
-        name: 'Derrick Castro',
-        email: 'myrtle_bernhard@mann',
-        submits: '18',
-        status: 'processing',
-        country: 'Mexico',
+        name: '__slot:status',
+        title: this.$t('tables.headings.status'),
+        width: '20%',
+        sortField: 'status',
       }, {
-        color: 'danger',
-        name: 'Ivan Cooper',
-        email: 'reina.kilback@hotmai',
-        submits: '0',
-        status: 'processing',
-        country: 'Morocco',
+        name: '__slot:actions',
+        dataClass: 'text-right',
+      }]
+    },
+    modeOptions () {
+      return [{
+        value: 0,
+        label: this.$t('dashboard.table.brief'),
       }, {
-        color: '',
-        name: 'Harvey Curry',
-        email: 'hermiston_boyd@durga',
-        submits: '25',
-        status: 'paid',
-        country: 'Cambodia',
-      }],
-    }
+        value: 1,
+        label: this.$t('dashboard.table.detailed'),
+      }]
+    },
+    filteredData () {
+      if (!this.term || this.term.length < 1) {
+        return this.users
+      }
+
+      return this.users.filter(item => {
+        return item.name.toLowerCase().startsWith(this.term.toLowerCase())
+      })
+    },
+  },
+  methods: {
+    getStatusColor (status) {
+      if (status === 'paid') {
+        return 'success'
+      }
+
+      if (status === 'processing') {
+        return 'info'
+      }
+
+      return 'danger'
+    },
+    resolveUser (user) {
+      this.loading = true
+
+      setTimeout(() => {
+        const idx = this.users.findIndex(u => u.id === user.id)
+        this.users.splice(idx, 1)
+        this.loading = false
+
+        this.showToast(this.$t('dashboard.table.resolved'), {
+          icon: 'fa-check',
+          position: 'bottom-right',
+          duration: 1500,
+        })
+      }, 500)
+    },
+    search: debounce(function (term) {
+      this.term = term
+    }, 400),
   },
 }
 </script>
 
-<style lang="scss" scoped>
-  .table-buttons {
-    @include media-breakpoint-down(lg) {
-      display: none;
-    }
-  }
+<style lang="scss">
 </style>

src/components/data-tables/DataTables.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <va-table-actions class="mb-2" style="maxWidth: 1200px" />
+    <va-table-sorting-pagination class="mb-2" style="maxWidth: 1200px" />
+    <va-table-filter class="mb-2" style="maxWidth: 1200px" />
+    <va-table-infinite-scroll class="mb-2" style="maxWidth: 1200px" />
+    <va-table-select class="mb-2" style="maxWidth: 1200px" />
+    <va-table-server-pagination class="mb-2" style="maxWidth: 1200px" />
+    <va-table-empty class="mb-2" style="maxWidth: 1200px" />
+    <va-table-loading class="mb-2" style="maxWidth: 1200px" />
+  </div>
+</template>
+
+<script>
+import VaTableActions from './scenarios/VaTableActions.vue'
+import VaTableSortingPagination from './scenarios/VaTableSortingPagination.vue'
+import VaTableFilter from './scenarios/VaTableFilter.vue'
+import VaTableInfiniteScroll from './scenarios/VaTableInfiniteScroll.vue'
+import VaTableSelect from './scenarios/VaTableSelect.vue'
+import VaTableServerPagination from './scenarios/VaTableServerPagination.vue'
+import VaTableEmpty from './scenarios/VaTableEmpty.vue'
+import VaTableLoading from './scenarios/VaTableLoading.vue'
+
+export default {
+  components: {
+    VaTableActions,
+    VaTableSortingPagination,
+    VaTableFilter,
+    VaTableInfiniteScroll,
+    VaTableSelect,
+    VaTableServerPagination,
+    VaTableEmpty,
+    VaTableLoading,
+  },
+}
+</script>
+
+<style lang="scss">
+</style>