Merge pull request #110 from baruchiro/DataTable

Move DataTable from ElementUI to Vuetify
brafdlog · Feb 20, 2020 · cbf3925 · cbf3925
2 parents c650d18 + de7afd4
commit cbf3925
Show file tree

Hide file tree

Showing 3 changed files with 302 additions and 171 deletions.
diff --git a/src/components/MainPage/DataTable.vue b/src/components/MainPage/DataTable.vue
@@ -1,52 +1,76 @@
 <template>
-  <el-table
-    :data="transactions"
-    :default-sort="{ prop: 'date', order: 'descending' }"
-    border
-    stripe
+  <v-layout
+    v-resize="onResize"
+    fluid
   >
-    <el-table-column type="expand">
-      <template slot-scope="props">
-        <p
-          v-for="column in filterEmptyColumn(props)"
-          :key="column.name"
-        >
-          <span class="bold">{{ column.title }}: </span>
-          {{ format(column.name, props.row[column.name]) }}
-        </p>
+    <v-data-table
+      style="width: 100%"
+      :headers="headers"
+      :items="transactionsWithId"
+      :items-per-page="10"
+      item-key="id"
+      show-expand
+      class="elevation-1"
+      :height="contentHeight"
+      fixed-header
+    >
+      <template v-slot:expanded-item="{ item }">
+        <td :colspan="headers.length">
+          <ul>
+            <li
+              v-for="field in filterEmptyFields(item)"
+              :key="field.value"
+            >
+              <span class="bold">{{ field.text }}: </span>
+              {{ format(field.value, item[field.value]) }}
+            </li>
+          </ul>
+        </td>
       </template>
-    </el-table-column>
-    <el-table-column
-      v-for="column in tableColumns"
-      :key="column.name"
-      :prop="column.name"
-      :label="column.title"
-      :formatter="formatterWrapper"
-      sortable
-    />
-  </el-table>
+    </v-data-table>
+  </v-layout>
 </template>
 
 <script>
 import { mapGetters } from 'vuex';
-import { format } from '../../modules/transactions';
+import { format, properties } from '../../modules/transactions';
+
+const detailes = properties.map((prop) => ({
+  text: prop.title,
+  value: prop.name,
+  ...prop,
+}));
+
+const tableFooterHeight = 59;
+
 
 export default {
   name: 'DataTable',
+  data() {
+    return {
+      contentHeight: 0,
+    };
+  },
   computed: {
+    headers: () => detailes.filter((detail) => detail.column),
+    expanded: () => detailes.filter((detail) => !detail.column),
     ...mapGetters({
-      tableColumns: 'tableColumns',
-      propertiesColumns: 'propertiesColumns',
       transactions: 'transactionsArray',
     }),
+    transactionsWithId() {
+      return this.transactions.map((txn, id) => ({ id, ...txn }));
+    },
   },
   methods: {
     format: (property, value) => format(property, value),
     formatterWrapper(row, { property }, cellValue) {
       return format(property, cellValue);
     },
-    filterEmptyColumn(props) {
-      return this.propertiesColumns.filter((col) => props.row[col.name]);
+    filterEmptyFields(item) {
+      return this.expanded.filter((col) => item[col.name]);
+    },
+    onResize() {
+      this.contentHeight = window.innerHeight - this.$vuetify.application.top - tableFooterHeight;
     },
   },
 };

diff --git a/src/store/modules/Transactions.js b/src/store/modules/Transactions.js
@@ -7,8 +7,6 @@ const state = {
 
 const getters = {
   transactionsArray: (state) => Object.values(state.transactions),
-  tableColumns: (state) => state.properties.filter((prop) => prop.column),
-  propertiesColumns: (state) => state.properties.filter((prop) => !prop.column),
 };
 
 const mutations = {