From e4eee9a510c5759644ca505d5e5438949ba783fe Mon Sep 17 00:00:00 2001
From: JackWilb <jackwilburn@tutanota.com>
Date: Fri, 10 Dec 2021 16:17:31 -0700
Subject: [PATCH 1/5] Use the default headers with type appended to text prop

---
 src/views/TableDetail.vue | 22 ++--------------------
 1 file changed, 2 insertions(+), 20 deletions(-)

diff --git a/src/views/TableDetail.vue b/src/views/TableDetail.vue
index c1bc614f..999b19b3 100644
--- a/src/views/TableDetail.vue
+++ b/src/views/TableDetail.vue
@@ -89,7 +89,6 @@
           height="calc(100vh - 123px)"
           class="table-details"
           :headers="dataTableHeaders"
-          hide-default-header
           :items="dataTableRows"
           :footer-props="{
             itemsPerPageOptions: [10, 20, 50, 100],
@@ -98,24 +97,7 @@
           :server-items-length="tableSize"
           :options.sync="pagination"
           :loading="loading"
-        >
-          <template v-slot:header>
-            <thead dark>
-              <tr>
-                <th
-                  v-for="(header, i) in dataTableHeaders"
-                  :key="i"
-                  class="pt-2 pb-2"
-                >
-                  {{ header.text }}
-                  <span v-if="columnTypes[header.text]">
-                    ({{ columnTypes[header.text] }})
-                  </span>
-                </th>
-              </tr>
-            </thead>
-          </template>
-        </v-data-table>
+        />
       </div>
     </v-main>
   </v-container>
@@ -168,7 +150,7 @@ export default Vue.extend({
       } = this;
 
       return headers.map((header: Array<keyof TableRow>) => ({
-        text: header,
+        text: this.columnTypes[header] === undefined ? header : `${header} (${this.columnTypes[header]})`,
         value: header,
       }));
     },

From 59b68c5ddf33e99b893a67c7987195a498f3f5c6 Mon Sep 17 00:00:00 2001
From: JackWilb <jackwilburn@tutanota.com>
Date: Fri, 10 Dec 2021 16:19:35 -0700
Subject: [PATCH 2/5] Rename pagination to options and watch deep (vuetify
 recommend)

---
 src/views/TableDetail.vue | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/views/TableDetail.vue b/src/views/TableDetail.vue
index 999b19b3..18d0b075 100644
--- a/src/views/TableDetail.vue
+++ b/src/views/TableDetail.vue
@@ -95,7 +95,7 @@
             showFirstLastPage: true,
           }"
           :server-items-length="tableSize"
-          :options.sync="pagination"
+          :options.sync="options"
           :loading="loading"
         />
       </div>
@@ -105,7 +105,7 @@
 
 <script lang="ts">
 import Vue, { PropType } from 'vue';
-import { DataPagination } from 'vuetify';
+import { DataOptions } from 'vuetify';
 
 import api from '@/api';
 import { KeyValue, TableRow } from '@/types';
@@ -136,7 +136,7 @@ export default Vue.extend({
       headers: [] as Array<keyof TableRow>,
       editing: false,
       tableSize: 1,
-      pagination: {} as DataPagination,
+      options: {} as DataOptions,
       loading: true,
       loadingTables: true,
     };
@@ -203,8 +203,12 @@ export default Vue.extend({
     },
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    pagination(this: any) {
-      this.update();
+    options: {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      handler(this: any) {
+        this.update();
+      },
+      deep: true,
     },
   },
 
@@ -220,14 +224,14 @@ export default Vue.extend({
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     async update(this: any) {
       const {
-        pagination,
+        options,
       } = this;
 
       this.loading = true;
 
       const result = await api.table(this.workspace, this.table, {
-        offset: (pagination.page - 1) * pagination.itemsPerPage,
-        limit: pagination.itemsPerPage,
+        offset: (options.page - 1) * options.itemsPerPage,
+        limit: options.itemsPerPage,
       });
 
       const {

From 3e8d0353c163dc35d9861f5a28ede9bf47ab0d55 Mon Sep 17 00:00:00 2001
From: JackWilb <jackwilburn@tutanota.com>
Date: Mon, 13 Dec 2021 10:14:16 -0700
Subject: [PATCH 3/5] Get new and old value of options for processing

---
 src/views/TableDetail.vue | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/views/TableDetail.vue b/src/views/TableDetail.vue
index 18d0b075..e3eaa9f5 100644
--- a/src/views/TableDetail.vue
+++ b/src/views/TableDetail.vue
@@ -205,8 +205,8 @@ export default Vue.extend({
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     options: {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      handler(this: any) {
-        this.update();
+      handler(this: any, newValue: DataOptions, oldValue: DataOptions) {
+        this.update(newValue, oldValue);
       },
       deep: true,
     },
@@ -222,16 +222,18 @@ export default Vue.extend({
     },
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    async update(this: any) {
-      const {
-        options,
-      } = this;
+    async update(this: any, newValue: DataOptions, oldValue: DataOptions) {
+      const changed = (Object.keys(newValue) as (keyof DataOptions)[]).filter((key) => newValue[key] !== oldValue[key]);
+
+      if (changed.includes('sortBy') || changed.includes('sortDesc')) {
+        this.options.page = 1;
+      }
 
       this.loading = true;
 
       const result = await api.table(this.workspace, this.table, {
-        offset: (options.page - 1) * options.itemsPerPage,
-        limit: options.itemsPerPage,
+        offset: (newValue.page - 1) * newValue.itemsPerPage,
+        limit: newValue.itemsPerPage,
       });
 
       const {

From 5a63257739630348854fd5517d300125ad919f3a Mon Sep 17 00:00:00 2001
From: JackWilb <jackwilburn@tutanota.com>
Date: Tue, 14 Dec 2021 15:54:55 -0700
Subject: [PATCH 4/5] Fix type issue

---
 src/views/TableDetail.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/TableDetail.vue b/src/views/TableDetail.vue
index e3eaa9f5..8ac4adf3 100644
--- a/src/views/TableDetail.vue
+++ b/src/views/TableDetail.vue
@@ -149,7 +149,7 @@ export default Vue.extend({
         headers,
       } = this;
 
-      return headers.map((header: Array<keyof TableRow>) => ({
+      return headers.map((header: keyof TableRow) => ({
         text: this.columnTypes[header] === undefined ? header : `${header} (${this.columnTypes[header]})`,
         value: header,
       }));

From cf19d56ec2b9237d1f7277ba9a4601e98b776459 Mon Sep 17 00:00:00 2001
From: JackWilb <jackwilburn@tutanota.com>
Date: Tue, 14 Dec 2021 15:55:18 -0700
Subject: [PATCH 5/5] Remove oldValue since it's not needed

---
 src/views/TableDetail.vue | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/src/views/TableDetail.vue b/src/views/TableDetail.vue
index 8ac4adf3..0ac840f9 100644
--- a/src/views/TableDetail.vue
+++ b/src/views/TableDetail.vue
@@ -205,8 +205,8 @@ export default Vue.extend({
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     options: {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      handler(this: any, newValue: DataOptions, oldValue: DataOptions) {
-        this.update(newValue, oldValue);
+      handler(this: any, newValue: DataOptions) {
+        this.update(newValue);
       },
       deep: true,
     },
@@ -222,13 +222,7 @@ export default Vue.extend({
     },
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    async update(this: any, newValue: DataOptions, oldValue: DataOptions) {
-      const changed = (Object.keys(newValue) as (keyof DataOptions)[]).filter((key) => newValue[key] !== oldValue[key]);
-
-      if (changed.includes('sortBy') || changed.includes('sortDesc')) {
-        this.options.page = 1;
-      }
-
+    async update(this: any, newValue: DataOptions) {
       this.loading = true;
 
       const result = await api.table(this.workspace, this.table, {