ayanova/src/components/gz-data-table.vue

@@ -61,16 +61,18 @@
         </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">
+              <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">
                   <v-checkbox
@@ -88,33 +90,46 @@
               v-for="c in item.columns"
               :key="c.key"
             >
-              <!-- 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 -->
+              <v-row no-gutters>
-              <div class="v-data-table__mobile-row__header mr-n6">
+                <v-col :cols="narrowHeaderCellColumns">
-                {{ getHeaderText(c.key) }}
+                  <!-- 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>
+                  <div class="v-data-table__mobile-row__header text-truncate">
-              <div class="v-data-table__mobile-row__cell">
+                    {{ getHeaderText(c.key) }}
-                <!-- Handle all plain text types right up to and including enums -->
+                  </div>
-                <!--TODO when get to coloured stuff will need to add that as a prop to column data but leaving out for now-->
+                </v-col>
-                <template v-if="c.t < 11">
+                <v-col :cols="narrowDataCellColumns">
-                  <template v-if="c.i">
+                  <!-- at 360 to 388px cols above sb 7, at 389 and above sb 8, at 419 sb9  -->
-                    <!-- openable object with an ID -->
+                  <div class="v-data-table__mobile-row__cell text-truncate">
-                    <v-btn depressed small @click="btnClick(c.key, c.i)">{{
+                    <!-- Handle all plain text types right up to and including enums -->
-                      c.v
+                    <!--TODO when get to coloured stuff will need to add that as a prop to column data but leaving out for now-->
-                    }}</v-btn>
+                    <template v-if="c.t < 11">
-                  </template>
+                      <template v-if="c.i">
-                  <template v-else>
+                        <!-- openable object with an ID -->
-                    {{ c.v }}
+                        <!-- <a @click="btnClick(c.key, c.i)" href="#">{{ c.v }}</a> -->
-                  </template>
+                        <!-- <v-btn @click="btnClick(c.key, c.i)">{{ c.v }}</v-btn> -->
-                </template>
+                        <span
-                <template v-if="c.t == 11">
+                          @click="btnClick(c.key, c.i)"
-                  <a :href="'mailto:' + c.v">{{ c.v }}</a>
+                          class="secondary--text subtitle-2 font-weight-bold"
-                </template>
+                          >{{ c.v }}</span
-                <template v-if="c.t == 12">
+                        >
-                  <!-- Expects full url with protocol etc in c.v so might need to add to record builder -->
+                      </template>
-                  <a :href="c.v" target="_blank">{{ c.v }}</a>
+                      <template v-else>
-                </template>
+                        {{ c.v }}
-              </div>
+                      </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>
         </template>
       </tbody>
@@ -148,7 +163,9 @@ export default {
       records: [],
       rowsPerPageItems: [5, 10, 25, 50, 100],
       selected: [],
-      narrowFormat: this.$vuetify.breakpoint.xs
+      narrowFormat: this.$vuetify.breakpoint.xs,
+      narrowDataCellColumns: 7,
+      narrowHeaderCellColumns: 3
     };
   },
   props: {
@@ -185,16 +202,38 @@ export default {
     },
     "$vuetify.breakpoint.xs": function(value) {
       this.narrowFormat = value;
+    },
+    "$vuetify.breakpoint.width": function(value) {
+      this.calculateNarrowWidthColumns(value);
     }
   },
   methods: {
+    calculateNarrowWidthColumns() {
+      //only need to do this if xs sized narrow format
+      if (this.$vuetify.breakpoint.xs) {
+        var width = this.$vuetify.breakpoint.width;
+        //   <!-- at 360 to 388px cols above sb 7, at 389 and above sb 8, at 419 sb9  -->
+        if (width < 389) {
+          this.narrowDataCellColumns = 7;
+          this.narrowHeaderCellColumns = 3;
+        } else if (width < 419) {
+          this.narrowDataCellColumns = 8;
+          this.narrowHeaderCellColumns = 3;
+        } else {
+          this.narrowDataCellColumns = 8;
+          this.narrowHeaderCellColumns = 4;
+        }
+        //this.narrowHeaderCellColumns = 12 - this.narrowDataCellColumns;
+        console.log("narrowDataCellColumns=" + this.narrowDataCellColumns);
+      }
+    },
     //Used by narrow view to get the "header" text for a column based on the column key
     getHeaderText(key) {
       //key format is row-column e.g."500-2"
       var columnIndex = key.split("-")[1];
       var header = this.headers[columnIndex - 1];
       if (header && header.text) {
-        return header.text;
+        return header.text + "_HERE_IS_A_REALLY_LONG_CUSTOMIZATION";
       }
       return "";
     },
@@ -259,6 +298,8 @@ export default {
       // }
 
       that.loading = true;
+      //this is here because my theory is it's set to loading so this won't trigger a re-draw here
+      that.calculateNarrowWidthColumns();
       var listUrl =
         that.apiBaseUrl + "?" + window.$gz.api.buildQuery(listOptions);
       window.$gz.api.get(listUrl).then(res => {
@@ -357,7 +398,7 @@ function buildRecords(listData, columndefinitions, filters) {
       var column = row[iColumn];
 
       var dataType = columndefinitions[iColumn].dt;
-      var display = column.v;
+      var display = column.v + "_SOME_EXTRA_TEXT";
       switch (dataType) {
         case 1: //datetime format to shortdatetime
           display = filters.shortdatelocalized(display);

ayanova/src/plugins/vuetify.js

@@ -20,7 +20,8 @@ export default new Vuetify({
         //accent: "#BD491A", //dark orangey red, more clarity, less friendly looking
         error: "#ff5252", //lighter red, have to see if it's good for all screens and sizes as it's a bit light but it stands out as an error condition better
 
-        disabled: "#e0e0e0"
+        disabled: "#e0e0e0",
+        anchor: "colors.purple"
       }
     }
   },