From befde88539a6d4021deb2b61589586781539d68f Mon Sep 17 00:00:00 2001
From: John Cardinal <support@ayanova.com>
Date: Tue, 4 Feb 2020 20:21:10 +0000
Subject: [PATCH]

---
 ayanova/src/components/gz-data-table.vue | 189 ++++++++---------------
 1 file changed, 62 insertions(+), 127 deletions(-)

diff --git a/ayanova/src/components/gz-data-table.vue b/ayanova/src/components/gz-data-table.vue
index 31e6bebf..9ec04d3c 100644
--- a/ayanova/src/components/gz-data-table.vue
+++ b/ayanova/src/components/gz-data-table.vue
@@ -1,140 +1,75 @@
 <template>
-  <v-data-table
-    :headers="headers"
-    :items="records"
-    v-model="selected"
-    :options.sync="dataTablePagingOptions"
-    :server-items-length="totalRecords"
-    :loading="loading"
-    :disable-sort="true"
-    :show-select="showSelect"
-    :single-select="singleSelect"
-    :hide-default-header="narrowFormat"
-    :footer-props="{
-      showCurrentPage: true,
-      showFirstLastPage: true,
-      itemsPerPageOptions: rowsPerPageItems,
-      itemsPerPageText: lt('RowsPerPage'),
-      pageText: lt('PageOfPageText')
-    }"
-    :loading-text="lt('Loading')"
-    :no-data-text="lt('NoData')"
-    class="elevation-1"
-  >
-    <template v-slot:body="{ items }">
-      <tbody>
-        <template v-if="!narrowFormat">
-          <tr v-for="item in items" :key="item.id">
-            <template v-if="showSelect">
-              <td>
-                <v-checkbox
-                  v-model="selected"
-                  :value="item"
-                  primary
-                  hide-details
-                ></v-checkbox>
-              </td>
-            </template>
-            <td v-for="c in item.columns" :key="c.key">
-              <!-- Handle all plain text types right up to and including enums -->
-              <!--TODO when get to coloured stuff will need to add that as a prop to column data but leaving out for now-->
-              <template v-if="c.t < 11">
-                <template v-if="c.i">
-                  <!-- openable object with an ID -->
-                  <v-btn depressed small @click="btnClick(c.key, c.i)">{{
-                    c.v
-                  }}</v-btn>
-                </template>
-                <template v-else>
-                  {{ c.v }}
-                </template>
-              </template>
-              <template v-if="c.t == 11">
-                <a :href="'mailto:' + c.v">{{ c.v }}</a>
-              </template>
-              <template v-if="c.t == 12">
-                <!-- Expects full url with protocol etc in c.v so might need to add to record builder -->
-                <a :href="c.v" target="_blank">{{ c.v }}</a>
-              </template>
-            </td>
-          </tr>
-        </template>
-        <template v-else>
-          <!-- Narrow width template -->
-
-          <tr
-            class="v-data-table__mobile-table-row"
-            v-for="item in items"
-            :key="item.id"
-          >
-            <div class="mt-6" />
-            <!-- HEADER TO THE LEFT -->
-
-            <!-- FIELD VALUE TO THE RIGHT -->
-            <template v-if="showSelect">
-              <td class="v-data-table__mobile-row  pl-2">
-                <div class="v-data-table__mobile-row__header"></div>
-                <div class="v-data-table__mobile-row__cell">
+  <div>
+    <template v-if="!narrowFormat">
+      <v-data-table
+        :headers="headers"
+        :items="records"
+        v-model="selected"
+        :options.sync="dataTablePagingOptions"
+        :server-items-length="totalRecords"
+        :loading="loading"
+        :disable-sort="true"
+        :show-select="showSelect"
+        :single-select="singleSelect"
+        :hide-default-header="narrowFormat"
+        :footer-props="{
+          showCurrentPage: true,
+          showFirstLastPage: true,
+          itemsPerPageOptions: rowsPerPageItems,
+          itemsPerPageText: lt('RowsPerPage'),
+          pageText: lt('PageOfPageText')
+        }"
+        :loading-text="lt('Loading')"
+        :no-data-text="lt('NoData')"
+        class="elevation-1"
+      >
+        <template v-slot:body="{ items }">
+          <tbody>
+            <tr v-for="item in items" :key="item.id">
+              <template v-if="showSelect">
+                <td>
                   <v-checkbox
                     v-model="selected"
                     :value="item"
                     primary
                     hide-details
                   ></v-checkbox>
-                </div>
+                </td>
+              </template>
+              <td v-for="c in item.columns" :key="c.key">
+                <!-- Handle all plain text types right up to and including enums -->
+                <!--TODO when get to coloured stuff will need to add that as a prop to column data but leaving out for now-->
+                <template v-if="c.t < 11">
+                  <template v-if="c.i">
+                    <!-- openable object with an ID -->
+                    <v-btn depressed small @click="btnClick(c.key, c.i)">{{
+                      c.v
+                    }}</v-btn>
+                  </template>
+                  <template v-else>
+                    {{ c.v }}
+                  </template>
+                </template>
+                <template v-if="c.t == 11">
+                  <a :href="'mailto:' + c.v">{{ c.v }}</a>
+                </template>
+                <template v-if="c.t == 12">
+                  <!-- Expects full url with protocol etc in c.v so might need to add to record builder -->
+                  <a :href="c.v" target="_blank">{{ c.v }}</a>
+                </template>
               </td>
-            </template>
-            <!-- NOTE: the pl-2 (overrides default of 16) is critical here or else in small phone size the data column is cut off to the right -->
-            <td
-              class="v-data-table__mobile-row pl-2"
-              v-for="c in item.columns"
-              :key="c.key"
-            >
-              <v-row no-gutters>
-                <v-col :cols="narrowHeaderCellColumns">
-                  <!-- NOTE: the mr-n6 is critical here or else in 360px (galaxy s9) small phone size the data column is cut off to the right -->
-                  <div class="v-data-table__mobile-row__header text-truncate">
-                    {{ getHeaderText(c.key) }}
-                  </div>
-                </v-col>
-                <v-col :cols="narrowDataCellColumns">
-                  <!-- at 360 to 388px cols above sb 7, at 389 and above sb 8, at 419 sb9  -->
-                  <div class="v-data-table__mobile-row__cell text-truncate">
-                    <!-- Handle all plain text types right up to and including enums -->
-                    <!--TODO when get to coloured stuff will need to add that as a prop to column data but leaving out for now-->
-                    <template v-if="c.t < 11">
-                      <template v-if="c.i">
-                        <!-- openable object with an ID -->
-                        <!-- <a @click="btnClick(c.key, c.i)" href="#">{{ c.v }}</a> -->
-                        <!-- <v-btn @click="btnClick(c.key, c.i)">{{ c.v }}</v-btn> -->
-                        <span
-                          @click="btnClick(c.key, c.i)"
-                          class="secondary--text subtitle-2 font-weight-bold"
-                          >{{ c.v }}</span
-                        >
-                      </template>
-                      <template v-else>
-                        {{ c.v }}
-                      </template>
-                    </template>
-                    <template v-if="c.t == 11">
-                      <a :href="'mailto:' + c.v">{{ c.v }}</a>
-                    </template>
-                    <template v-if="c.t == 12">
-                      <!-- Expects full url with protocol etc in c.v so might need to add to record builder -->
-                      <a :href="c.v" target="_blank">{{ c.v }}</a>
-                    </template>
-                  </div>
-                </v-col>
-              </v-row>
-            </td>
-            <!-- <hr class="mt-12" /> -->
-            <div class="mt-6"><hr /></div>
-          </tr>
+            </tr>
+          </tbody>
         </template>
-      </tbody>
+      </v-data-table>
     </template>
-  </v-data-table>
+    <!-- MOBILE TABLE VIEW -->
+    <template v-else>
+      MOBILE VIEW HERE
+    </template>
+  </div>
+  <!-- End of large template -->
+
   <!--  <hr />
     <div>Selected: {{ selected }}</div>
       <div>Headers: {{ headers }}</div>