From e4a782773f61cf8cedf32cb5372e2b67de28fac1 Mon Sep 17 00:00:00 2001
From: John Cardinal <support@ayanova.com>
Date: Mon, 17 Feb 2020 22:49:51 +0000
Subject: [PATCH]

---
 ayanova/src/components/gz-data-table.vue | 519 ++++++++++++-----------
 1 file changed, 271 insertions(+), 248 deletions(-)

diff --git a/ayanova/src/components/gz-data-table.vue b/ayanova/src/components/gz-data-table.vue
index 5b0fecbb..1b149781 100644
--- a/ayanova/src/components/gz-data-table.vue
+++ b/ayanova/src/components/gz-data-table.vue
@@ -1,265 +1,288 @@
 <template>
   <div>
-    <!-- WIDE TABLE VIEW -->
-    <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>
-                </td>
-              </template>
-              <td v-for="c in item.columns" :key="c.key">
-                <template v-if="c.t == 1">
-                  <!-- DATETIME -->
-                  {{ c.v }}
-                </template>
-                <template v-else-if="c.t == 2">
-                  <!-- DATE -->
-                  {{ c.v }}
-                </template>
-                <template v-else-if="c.t == 3">
-                  <!-- TIME -->
-                  {{ c.v }}
-                </template>
-                <template v-else-if="c.t == 4">
-                  <!-- TEXT (also maybe openable)-->
-                  <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-else-if="c.t == 5">
-                  <!-- INTEGER -->
-                  {{ c.v }}
-                </template>
-                <template v-else-if="c.t == 6">
-                  <!-- BOOL -->
-                  <div class="text-center">
-                    <v-icon v-if="c.v === false" small>far fa-square</v-icon>
-                    <v-icon v-else-if="c.v === true" small
-                      >far fa-check-square</v-icon
-                    >
-                    <v-icon v-else small>far fa-minus-square</v-icon>
-                  </div>
-                </template>
-                <template v-else-if="c.t == 7">
-                  <!-- DECIMAL -->
-                  {{ c.v }}
-                </template>
-                <template v-else-if="c.t == 8">
-                  <!-- CURRENCY -->
-                  <div class="text-right">{{ c.v }}</div>
-                </template>
-                <template v-else-if="c.t == 9">
-                  <!-- TAGS -->
-                  {{ c.v }}
-                </template>
-                <template v-else-if="c.t == 10">
-                  <!-- ENUM (translated to text on getdata) -->
-                  {{ c.v }}
-                </template>
-                <template v-else-if="c.t == 11">
-                  <!-- EMAIL -->
-                  <a :href="'mailto:' + c.v">{{ c.v }}</a>
-                </template>
-                <template v-else-if="c.t == 12">
-                  <!-- URL / HTTP -->
-                  <!-- 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>
-                <template v-else>
-                  <!-- UNKNOWN -->
-                  {{ c.v }}
-                </template>
-              </td>
-            </tr>
-          </tbody>
-        </template>
-      </v-data-table>
-    </template>
-    <!-- MOBILE TABLE VIEW -->
-    <template v-else>
-      <v-data-iterator
-        :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:header="props">
-          <!-- Mimic the full width data table select all toggle -->
-          <div
-            @click="props.toggleSelectAll(!props.everyItem)"
-            class="pl-2 pt-2"
-          >
-            <v-icon v-if="!props.someItems" large>far fa-square</v-icon>
-            <v-icon v-if="props.someItems && !props.everyItem" large
-              >far fa-minus-square</v-icon
-            >
-            <v-icon v-if="props.everyItem" large>far fa-check-square</v-icon>
-          </div>
-        </template>
+    <v-card>
+      <v-card-title>
+        <v-select
+          :items="[
+            { name: 'one', id: 1 },
+            { name: 'two', id: 2 }
+          ]"
+          item-text="name"
+          item-value="id"
+          :label="lt('DataListView')"
+        >
+        </v-select>
+        <v-spacer></v-spacer
+        ><v-btn>
+          <v-icon>fa-filter</v-icon>
+        </v-btn>
+      </v-card-title>
 
-        <template v-slot:default="{ items }">
-          <v-row>
-            <v-col
-              v-for="item in items"
-              :key="item.id"
-              cols="12"
-              sm="6"
-              md="4"
-              lg="3"
-            >
-              <v-card elevation="4" tile>
+      <!-- WIDE TABLE VIEW -->
+      <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">
-                  <v-card-title class="subheading font-weight-bold">
+                  <td>
                     <v-checkbox
                       v-model="selected"
                       :value="item"
                       primary
                       hide-details
                     ></v-checkbox>
-                  </v-card-title>
-                  <v-divider></v-divider>
+                  </td>
                 </template>
-                <v-list dense>
-                  <v-list-item two-line v-for="c in item.columns" :key="c.key">
-                    <v-list-item-content>
-                      <v-list-item-title>
-                        {{ getHeaderText(c.key) }}</v-list-item-title
+                <td v-for="c in item.columns" :key="c.key">
+                  <template v-if="c.t == 1">
+                    <!-- DATETIME -->
+                    {{ c.v }}
+                  </template>
+                  <template v-else-if="c.t == 2">
+                    <!-- DATE -->
+                    {{ c.v }}
+                  </template>
+                  <template v-else-if="c.t == 3">
+                    <!-- TIME -->
+                    {{ c.v }}
+                  </template>
+                  <template v-else-if="c.t == 4">
+                    <!-- TEXT (also maybe openable)-->
+                    <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-else-if="c.t == 5">
+                    <!-- INTEGER -->
+                    {{ c.v }}
+                  </template>
+                  <template v-else-if="c.t == 6">
+                    <!-- BOOL -->
+                    <div class="text-center">
+                      <v-icon v-if="c.v === false" small>far fa-square</v-icon>
+                      <v-icon v-else-if="c.v === true" small
+                        >far fa-check-square</v-icon
                       >
-                      <v-list-item-subtitle>
-                        <template v-if="c.t == 1">
-                          <!-- DATETIME -->
-                          {{ c.v }}
-                        </template>
-                        <template v-else-if="c.t == 2">
-                          <!-- DATE -->
-                          {{ c.v }}
-                        </template>
-                        <template v-else-if="c.t == 3">
-                          <!-- TIME -->
-                          {{ c.v }}
-                        </template>
-                        <template v-else-if="c.t == 4">
-                          <!-- TEXT (also maybe openable)-->
-                          <template v-if="c.i">
-                            <!-- openable object with an ID -->
-                            <span
-                              @click="btnClick(c.key, c.i)"
-                              class="primary--text subtitle-1 font-weight-bold"
-                              style="cursor:pointer"
-                              >{{ c.v }}
-                            </span>
-                          </template>
-                          <template v-else>
+                      <v-icon v-else small>far fa-minus-square</v-icon>
+                    </div>
+                  </template>
+                  <template v-else-if="c.t == 7">
+                    <!-- DECIMAL -->
+                    {{ c.v }}
+                  </template>
+                  <template v-else-if="c.t == 8">
+                    <!-- CURRENCY -->
+                    <div class="text-right">{{ c.v }}</div>
+                  </template>
+                  <template v-else-if="c.t == 9">
+                    <!-- TAGS -->
+                    {{ c.v }}
+                  </template>
+                  <template v-else-if="c.t == 10">
+                    <!-- ENUM (translated to text on getdata) -->
+                    {{ c.v }}
+                  </template>
+                  <template v-else-if="c.t == 11">
+                    <!-- EMAIL -->
+                    <a :href="'mailto:' + c.v">{{ c.v }}</a>
+                  </template>
+                  <template v-else-if="c.t == 12">
+                    <!-- URL / HTTP -->
+                    <!-- 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>
+                  <template v-else>
+                    <!-- UNKNOWN -->
+                    {{ c.v }}
+                  </template>
+                </td>
+              </tr>
+            </tbody>
+          </template>
+        </v-data-table>
+      </template>
+      <!-- MOBILE TABLE VIEW -->
+      <template v-else>
+        <v-data-iterator
+          :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:header="props">
+            <!-- Mimic the full width data table select all toggle -->
+            <div
+              @click="props.toggleSelectAll(!props.everyItem)"
+              class="pl-2 pt-2"
+            >
+              <v-icon v-if="!props.someItems" large>far fa-square</v-icon>
+              <v-icon v-if="props.someItems && !props.everyItem" large
+                >far fa-minus-square</v-icon
+              >
+              <v-icon v-if="props.everyItem" large>far fa-check-square</v-icon>
+            </div>
+          </template>
+
+          <template v-slot:default="{ items }">
+            <v-row>
+              <v-col
+                v-for="item in items"
+                :key="item.id"
+                cols="12"
+                sm="6"
+                md="4"
+                lg="3"
+              >
+                <v-card elevation="4" tile>
+                  <template v-if="showSelect">
+                    <v-card-title class="subheading font-weight-bold">
+                      <v-checkbox
+                        v-model="selected"
+                        :value="item"
+                        primary
+                        hide-details
+                      ></v-checkbox>
+                    </v-card-title>
+                    <v-divider></v-divider>
+                  </template>
+                  <v-list dense>
+                    <v-list-item
+                      two-line
+                      v-for="c in item.columns"
+                      :key="c.key"
+                    >
+                      <v-list-item-content>
+                        <v-list-item-title>
+                          {{ getHeaderText(c.key) }}</v-list-item-title
+                        >
+                        <v-list-item-subtitle>
+                          <template v-if="c.t == 1">
+                            <!-- DATETIME -->
                             {{ c.v }}
                           </template>
-                        </template>
-                        <template v-else-if="c.t == 5">
-                          <!-- INTEGER -->
-                          {{ c.v }}
-                        </template>
-                        <template v-else-if="c.t == 6">
-                          <!-- BOOL -->
-                          <div>
-                            <v-icon v-if="c.v === false" small
-                              >far fa-square</v-icon
-                            >
-                            <v-icon v-else-if="c.v === true" small
-                              >far fa-check-square</v-icon
-                            >
-                            <v-icon v-else small>far fa-minus-square</v-icon>
-                          </div>
-                        </template>
-                        <template v-else-if="c.t == 7">
-                          <!-- DECIMAL -->
-                          {{ c.v }}
-                        </template>
-                        <template v-else-if="c.t == 8">
-                          <!-- CURRENCY -->
-                          <div>{{ c.v }}</div>
-                        </template>
-                        <template v-else-if="c.t == 9">
-                          <!-- TAGS -->
-                          {{ c.v }}
-                        </template>
-                        <template v-else-if="c.t == 10">
-                          <!-- ENUM (translated to text on getdata) -->
-                          {{ c.v }}
-                        </template>
-                        <template v-else-if="c.t == 11">
-                          <!-- EMAIL -->
-                          <a :href="'mailto:' + c.v">{{ c.v }}</a>
-                        </template>
-                        <template v-else-if="c.t == 12">
-                          <!-- URL / HTTP -->
-                          <!-- 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>
-                        <template v-else>
-                          <!-- UNKNOWN -->
-                          {{ c.v }}
-                        </template>
-                      </v-list-item-subtitle>
-                    </v-list-item-content>
-                  </v-list-item>
-                </v-list>
-              </v-card>
-            </v-col>
-          </v-row>
-        </template>
-      </v-data-iterator>
-    </template>
+                          <template v-else-if="c.t == 2">
+                            <!-- DATE -->
+                            {{ c.v }}
+                          </template>
+                          <template v-else-if="c.t == 3">
+                            <!-- TIME -->
+                            {{ c.v }}
+                          </template>
+                          <template v-else-if="c.t == 4">
+                            <!-- TEXT (also maybe openable)-->
+                            <template v-if="c.i">
+                              <!-- openable object with an ID -->
+                              <span
+                                @click="btnClick(c.key, c.i)"
+                                class="primary--text subtitle-1 font-weight-bold"
+                                style="cursor:pointer"
+                                >{{ c.v }}
+                              </span>
+                            </template>
+                            <template v-else>
+                              {{ c.v }}
+                            </template>
+                          </template>
+                          <template v-else-if="c.t == 5">
+                            <!-- INTEGER -->
+                            {{ c.v }}
+                          </template>
+                          <template v-else-if="c.t == 6">
+                            <!-- BOOL -->
+                            <div>
+                              <v-icon v-if="c.v === false" small
+                                >far fa-square</v-icon
+                              >
+                              <v-icon v-else-if="c.v === true" small
+                                >far fa-check-square</v-icon
+                              >
+                              <v-icon v-else small>far fa-minus-square</v-icon>
+                            </div>
+                          </template>
+                          <template v-else-if="c.t == 7">
+                            <!-- DECIMAL -->
+                            {{ c.v }}
+                          </template>
+                          <template v-else-if="c.t == 8">
+                            <!-- CURRENCY -->
+                            <div>{{ c.v }}</div>
+                          </template>
+                          <template v-else-if="c.t == 9">
+                            <!-- TAGS -->
+                            {{ c.v }}
+                          </template>
+                          <template v-else-if="c.t == 10">
+                            <!-- ENUM (translated to text on getdata) -->
+                            {{ c.v }}
+                          </template>
+                          <template v-else-if="c.t == 11">
+                            <!-- EMAIL -->
+                            <a :href="'mailto:' + c.v">{{ c.v }}</a>
+                          </template>
+                          <template v-else-if="c.t == 12">
+                            <!-- URL / HTTP -->
+                            <!-- 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>
+                          <template v-else>
+                            <!-- UNKNOWN -->
+                            {{ c.v }}
+                          </template>
+                        </v-list-item-subtitle>
+                      </v-list-item-content>
+                    </v-list-item>
+                  </v-list>
+                </v-card>
+              </v-col>
+            </v-row>
+          </template>
+        </v-data-iterator>
+      </template>
+    </v-card>
   </div>
 </template>