From 8f8aed62da9d763265053bff8042452fbff4fdf1 Mon Sep 17 00:00:00 2001
From: John Leider <john.j.leider@gmail.com>
Date: Thu, 9 Aug 2018 22:01:14 -0400
Subject: [PATCH] feat(table-list): populate page

---
 src/App.vue                      |   7 ++
 src/components/core/Drawer.vue   |   8 +-
 src/components/core/Toolbar.vue  |   2 +-
 src/components/core/View.vue     |   6 +-
 src/components/helper/Offset.vue |  49 ++++++++++
 src/components/material/Card.vue |  32 +++---
 src/views/TableList.vue          | 161 ++++++++++++++++++++++++++++++-
 src/views/UserProfile.vue        |  17 +++-
 8 files changed, 247 insertions(+), 35 deletions(-)
 create mode 100755 src/components/helper/Offset.vue

diff --git a/src/App.vue b/src/App.vue
index 0ff63921..6cd03380 100755
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,3 +7,10 @@
     <core-view />
   </v-app>
 </template>
+
+<style>
+/* Remove in 1.2 */
+.v-datatable thead th.column.sortable i {
+  vertical-align: unset;
+}
+</style>
diff --git a/src/components/core/Drawer.vue b/src/components/core/Drawer.vue
index 92f0a1f0..562d82c8 100755
--- a/src/components/core/Drawer.vue
+++ b/src/components/core/Drawer.vue
@@ -14,11 +14,12 @@
     >
       <v-list
         class="pa-3 fill-height"
-        style="background: rgba(0, 0, 0, 0.7;"
+        style="background: rgba(0, 0, 0, 0.7);"
       >
         <v-list-tile avatar>
           <v-list-tile-avatar
-            color="white">
+            color="white"
+          >
             <v-img
               src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Vue.js_Logo.svg/400px-Vue.js_Logo.svg.png"
               height="32"
@@ -29,7 +30,8 @@
           <v-list-tile-title class="title font-weight-light">VUE MD</v-list-tile-title>
         </v-list-tile>
         <v-divider
-          class="mt-2 mb-4"/>
+          class="mt-2 mb-4"
+        />
         <v-list-tile
           v-for="(link, i) in links"
           :key="i"
diff --git a/src/components/core/Toolbar.vue b/src/components/core/Toolbar.vue
index 722f99f1..359c1c21 100755
--- a/src/components/core/Toolbar.vue
+++ b/src/components/core/Toolbar.vue
@@ -2,9 +2,9 @@
   <v-toolbar
     id="core-toolbar"
     app
-    color="transparent"
     flat
     prominent
+    style="background: #fafafa;"
   >
     <v-toolbar-title
       class="tertiary--text font-weight-light"
diff --git a/src/components/core/View.vue b/src/components/core/View.vue
index 764bd4fc..62175fc2 100755
--- a/src/components/core/View.vue
+++ b/src/components/core/View.vue
@@ -1,10 +1,10 @@
 <template>
   <v-content>
-    <v-container id="core-view">
+    <div id="core-view">
       <v-fade-transition mode="out-in">
         <router-view />
       </v-fade-transition>
-    </v-container>
+    </div>
     <core-footer />
   </v-content>
 </template>
@@ -21,6 +21,6 @@ export default {
 
 <style>
 #core-view {
-  padding-bottom: 128px;
+  padding-bottom: 1148px;
 }
 </style>
diff --git a/src/components/helper/Offset.vue b/src/components/helper/Offset.vue
new file mode 100755
index 00000000..abfc51b2
--- /dev/null
+++ b/src/components/helper/Offset.vue
@@ -0,0 +1,49 @@
+<template>
+  <div
+    :style="styles"
+    :class="classes"
+    class="v-offset"
+  >
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    fullWidth: {
+      type: Boolean,
+      default: false
+    },
+    offset: {
+      type: [Number, String],
+      default: 0
+    }
+  },
+
+  computed: {
+    classes () {
+      return {
+        'v-offset--full-width': this.fullWidth
+      }
+    },
+    styles () {
+      return {
+        top: `-${this.offset}px`,
+        marginBottom: `-${this.offset}px`
+      }
+    }
+  }
+}
+</script>
+
+<style>
+.v-offset {
+  margin: 0 auto;
+  max-width: 90%;
+  position: relative;
+}
+.v-offset--full-width {
+  max-width: 100%;
+}
+</style>
diff --git a/src/components/material/Card.vue b/src/components/material/Card.vue
index 1efb5663..4dfd5aff 100755
--- a/src/components/material/Card.vue
+++ b/src/components/material/Card.vue
@@ -1,15 +1,17 @@
 <template>
   <v-card
+    v-bind="$attrs"
     :style="{
+      marginBottom: `${offset}px`,
       marginTop: `${offset}px`
     }"
-    class="mb-5"
   >
-    <div
-      :style="styles"
-      class="v-card__offset">
+    <helper-offset
+      :full-width="fullWidth"
+      :offset="offset"
+    >
       <slot name="offset" />
-    </div>
+    </helper-offset>
     <v-card-text>
       <slot />
     </v-card-text>
@@ -21,26 +23,14 @@ export default {
   inheritAttrs: false,
 
   props: {
+    fullWidth: {
+      type: Boolean,
+      default: false
+    },
     offset: {
       type: [Number, String],
       default: 32
     }
-  },
-
-  computed: {
-    styles () {
-      return {
-        marginBottom: `${-Number(this.offset)}px`,
-        top: `${-Number(this.offset)}px`
-      }
-    }
   }
 }
 </script>
-
-<style>
-.v-card__offset {
-  padding: 16px;
-  position: relative;
-}
-</style>
diff --git a/src/views/TableList.vue b/src/views/TableList.vue
index ba86d063..9ec8de34 100755
--- a/src/views/TableList.vue
+++ b/src/views/TableList.vue
@@ -1,14 +1,167 @@
 <template>
-  <v-container fill-height>
+  <v-container
+    fill-height
+    fluid
+    grid-list-xl
+  >
     <v-layout
       justify-center
-      align-center
-    />
+      wrap
+    >
+      <v-flex
+        xs12
+        md6
+      >
+        <material-card>
+          <v-card
+            slot="offset"
+            color="secondary"
+            class="elevation-10"
+            dark
+          >
+            <div class="pa-3">
+              <div class="title font-weight-light mb-2">Simple Table</div>
+              <div class="subheading font-weight-thin grey--text text--lighten-2">Here is a subtitle for this table</div>
+            </div>
+          </v-card>
+
+          <v-data-table
+            :headers="headers"
+            :items="items"
+            hide-actions
+          >
+            <template
+              slot="headerCell"
+              slot-scope="{ header }"
+            >
+              <span
+                class="subheading font-weight-light secondary--text text--darken-3"
+                v-text="header.text"
+              />
+            </template>
+            <template
+              slot="items"
+              slot-scope="{ item }"
+            >
+              <td>{{ item.name }}</td>
+              <td>{{ item.country }}</td>
+              <td>{{ item.city }}</td>
+              <td class="text-xs-right">{{ item.salary }}</td>
+            </template>
+          </v-data-table>
+        </material-card>
+      </v-flex>
+      <v-flex
+        xs12
+        md6
+      >
+        <material-card
+          color="transparent"
+          flat
+          full-width
+        >
+          <v-card
+            slot="offset"
+            color="secondary"
+            class="elevation-10"
+            dark
+          >
+            <div class="pa-3">
+              <div class="title font-weight-light mb-2">Table on Plain Background</div>
+              <div class="subheading font-weight-thin grey--text text--lighten-2">Here is a subtitle for this table</div>
+            </div>
+          </v-card>
+
+          <v-data-table
+            :headers="headers"
+            :items="items.slice(0, 3)"
+            hide-actions
+          >
+            <template
+              slot="headerCell"
+              slot-scope="{ header }"
+            >
+              <span
+                class="subheading font-weight-light secondary--text text--darken-3"
+                v-text="header.text"
+              />
+            </template>
+            <template
+              slot="items"
+              slot-scope="{ item }"
+            >
+              <td>{{ item.name }}</td>
+              <td>{{ item.country }}</td>
+              <td>{{ item.city }}</td>
+              <td class="text-xs-right">{{ item.salary }}</td>
+            </template>
+          </v-data-table>
+        </material-card>
+      </v-flex>
+    </v-layout>
   </v-container>
 </template>
 
 <script>
 export default {
-  //
+  data: () => ({
+    headers: [
+      {
+        sortable: false,
+        text: 'Name',
+        value: 'name'
+      },
+      {
+        sortable: false,
+        text: 'Country',
+        value: 'country'
+      },
+      {
+        sortable: false,
+        text: 'City',
+        value: 'city'
+      },
+      {
+        sortable: false,
+        text: 'Salary',
+        value: 'salary',
+        align: 'right'
+      }
+    ],
+    items: [
+      {
+        name: 'Dakota Rice',
+        country: 'Niger',
+        city: 'Oud-Tunrhout',
+        salary: '$35,738'
+      },
+      {
+        name: 'Minerva Hooper',
+        country: 'Curaçao',
+        city: 'Sinaai-Waas',
+        salary: '$23,738'
+      }, {
+        name: 'Sage Rodriguez',
+        country: 'Netherlands',
+        city: 'Overland Park',
+        salary: '$56,142'
+      }, {
+        name: 'Philip Chanley',
+        country: 'Korea, South',
+        city: 'Gloucester',
+        salary: '$38,735'
+      }, {
+        name: 'Doris Greene',
+        country: 'Malawi',
+        city: 'Feldkirchen in Kārnten',
+        salary: '$63,542'
+      }, {
+        name: 'Mason Porter',
+        country: 'Chile',
+        city: 'Gloucester',
+        salary: '$78,615'
+      }
+    ]
+  })
 }
 </script>
diff --git a/src/views/UserProfile.vue b/src/views/UserProfile.vue
index 0a6ccf1d..10f835b4 100755
--- a/src/views/UserProfile.vue
+++ b/src/views/UserProfile.vue
@@ -1,10 +1,16 @@
 <template>
-  <v-container fill-height>
+  <v-container
+    fill-height
+    fluid
+    grid-list-xl>
     <v-layout
       justify-center
-      align-center
+      wrap
     >
-      <v-flex xs12>
+      <v-flex
+        xs12
+        md8
+      >
         <material-card>
           <v-card
             slot="offset"
@@ -91,6 +97,11 @@
             </v-container>
           </v-form>
         </material-card>
+      </v-flex>
+      <v-flex
+        xs12
+        md4
+      >
         <material-card offset="64">
           <v-avatar
             slot="offset"