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

@@ -77,6 +77,58 @@
           </template>
           <template v-else>
             <!-- Narrow width template -->
+            <tr
+              class="v-data-table__mobile-table-row"
+              v-for="item in items"
+              :key="item.id"
+            >
+              <!-- HEADER TO THE LEFT -->
+
+              <!-- FIELD VALUE TO THE RIGHT -->
+              <template v-if="showSelect">
+                <td class="v-data-table__mobile-row">
+                  <div class="v-data-table__mobile-row__header"></div>
+                  <div class="v-data-table__mobile-row__cell">
+                    <v-checkbox
+                      v-model="selected"
+                      :value="item"
+                      primary
+                      hide-details
+                    ></v-checkbox>
+                  </div>
+                </td>
+              </template>
+
+              <td
+                class="v-data-table__mobile-row"
+                v-for="c in item.columns"
+                :key="c.key"
+              >
+                <div class="v-data-table__mobile-row__header">HEADER</div>
+                <div class="v-data-table__mobile-row__cell">
+                  <!-- 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>
+                </div>
+              </td>
+            </tr>
           </template>
         </tbody>
       </template>
@@ -110,7 +162,7 @@ export default {
       records: [],
       rowsPerPageItems: [5, 10, 25, 50, 100],
       selected: [],
-      narrowFormat: false
+      narrowFormat: true
     };
   },
   props: {
@@ -742,16 +794,33 @@ Records: [ { "c1": "Awesome Steel Table 25", "c2": 1, "c3": 676.64, "c4": 0, "c5
 </div><div class="v-menu"><div class="v-menu__content theme--light " style="max-height: 304px; min-width: 0px; top: 12px; left: 0px; transform-origin: left top 0px; z-index: 0; display: none;"></div></div></div></div></div></div></th></tr></thead>
 <tbody>
 <tr class="v-data-table__mobile-table-row">
-<td class="v-data-table__mobile-row"
+
-><div class="v-data-table__mobile-row__header">Dessert (100g serving)</div>
+<td class="v-data-table__mobile-row">
-<div class="v-data-table__mobile-row__cell">Frozen Yogurt</div></td>
+<div class="v-data-table__mobile-row__header">Dessert (100g serving)</div>
+<div class="v-data-table__mobile-row__cell">Frozen Yogurt</div>
+</td>
 
 <td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Calories</div><div class="v-data-table__mobile-row__cell">159</div></td>
 <td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Fat (g)</div><div class="v-data-table__mobile-row__cell">6</div></td>
 <td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Carbs (g)</div><div class="v-data-table__mobile-row__cell">24</div></td>
 <td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Protein (g)</div><div class="v-data-table__mobile-row__cell">4</div></td>
 <td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Iron (%)</div><div class="v-data-table__mobile-row__cell">1%</div></td></tr>
-<tr class="v-data-table__mobile-table-row"><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Dessert (100g serving)</div><div class="v-data-table__mobile-row__cell">Ice cream sandwich</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Calories</div><div class="v-data-table__mobile-row__cell">237</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Fat (g)</div><div class="v-data-table__mobile-row__cell">9</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Carbs (g)</div><div class="v-data-table__mobile-row__cell">37</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Protein (g)</div><div class="v-data-table__mobile-row__cell">4.3</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Iron (%)</div><div class="v-data-table__mobile-row__cell">1%</div></td></tr><tr class="v-data-table__mobile-table-row"><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Dessert (100g serving)</div><div class="v-data-table__mobile-row__cell">Eclair</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Calories</div><div class="v-data-table__mobile-row__cell">262</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Fat (g)</div><div class="v-data-table__mobile-row__cell">16</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Carbs (g)</div><div class="v-data-table__mobile-row__cell">23</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Protein (g)</div><div class="v-data-table__mobile-row__cell">6</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Iron (%)</div><div class="v-data-table__mobile-row__cell">7%</div></td></tr><tr class="v-data-table__mobile-table-row"><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Dessert (100g serving)</div><div class="v-data-table__mobile-row__cell">Cupcake</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Calories</div><div class="v-data-table__mobile-row__cell">305</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Fat (g)</div><div class="v-data-table__mobile-row__cell">3.7</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Carbs (g)</div><div class="v-data-table__mobile-row__cell">67</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Protein (g)</div><div class="v-data-table__mobile-row__cell">4.3</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Iron (%)</div><div class="v-data-table__mobile-row__cell">8%</div></td></tr><tr class="v-data-table__mobile-table-row"><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Dessert (100g serving)</div><div class="v-data-table__mobile-row__cell">Gingerbread</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Calories</div><div class="v-data-table__mobile-row__cell">356</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Fat (g)</div><div class="v-data-table__mobile-row__cell">16</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Carbs (g)</div><div class="v-data-table__mobile-row__cell">49</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Protein (g)</div><div class="v-data-table__mobile-row__cell">3.9</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Iron (%)</div><div class="v-data-table__mobile-row__cell">16%</div></td></tr>
+<tr class="v-data-table__mobile-table-row"><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Dessert (100g serving)</div><div class="v-data-table__mobile-row__cell">Ice cream sandwich</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Calories</div><div class="v-data-table__mobile-row__cell">237</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Fat (g)</div><div class="v-data-table__mobile-row__cell">9</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Carbs (g)</div><div class="v-data-table__mobile-row__cell">37</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Protein (g)</div><div class="v-data-table__mobile-row__cell">4.3</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Iron (%)</div><div class="v-data-table__mobile-row__cell">1%</div></td></tr><tr class="v-data-table__mobile-table-row"><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Dessert (100g serving)</div><div class="v-data-table__mobile-row__cell">Eclair</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Calories</div><div class="v-data-table__mobile-row__cell">262</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Fat (g)</div><div class="v-data-table__mobile-row__cell">16</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Carbs (g)</div><div class="v-data-table__mobile-row__cell">23</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Protein (g)</div><div class="v-data-table__mobile-row__cell">6</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Iron (%)</div><div class="v-data-table__mobile-row__cell">7%</div></td></tr><tr class="v-data-table__mobile-table-row"><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Dessert (100g serving)</div><div class="v-data-table__mobile-row__cell">Cupcake</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Calories</div><div class="v-data-table__mobile-row__cell">305</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Fat (g)</div><div class="v-data-table__mobile-row__cell">3.7</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Carbs (g)</div><div class="v-data-table__mobile-row__cell">67</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Protein (g)</div><div class="v-data-table__mobile-row__cell">4.3</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Iron (%)</div><div class="v-data-table__mobile-row__cell">8%</div></td></tr><tr class="v-data-table__mobile-table-row"><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Dessert (100g serving)</div><div class="v-data-table__mobile-row__cell">Gingerbread</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Calories</div><div class="v-data-table__mobile-row__cell">356</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Fat (g)</div><div class="v-data-table__mobile-row__cell">16</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Carbs (g)</div><div class="v-data-table__mobile-row__cell">49</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Protein (g)</div><div class="v-data-table__mobile-row__cell">3.9</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Iron (%)</div><div class="v-data-table__mobile-row__cell">16%</div></td>
-</tbody></table></div>
+</tr>
+</tbody>
+</table>
+</div>
+
+Mobile Checkbox row
+<td class="v-data-table__mobile-row">
+<div class="v-data-table__mobile-row__header"></div>
+<div class="v-data-table__mobile-row__cell">
+<div class="v-data-table__checkbox v-simple-checkbox">
+<div class="v-input--selection-controls__ripple"></div>
+<i aria-hidden="true" class="v-icon notranslate mdi mdi-checkbox-blank-outline theme--light">
+</i>
+</div>
+</div>
+</td>
 */
 </script>