feat: add phones child tables

sniperadmin · Nov 16, 2021 · 28307bf · 28307bf
1 parent 98887e0
commit 28307bf
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/src/components/TheDataTable.vue b/src/components/TheDataTable.vue
@@ -1,5 +1,6 @@
 <template>
   <v-container>
+    <!-- SECTION: Parent table -->
     <v-data-table
       :headers="computedHeaders(data).headers"
       :items="computedItems(data)[0].map(o => o.data)"
@@ -13,7 +14,6 @@
         }
       }"
       show-expand
-      single-expand
       calculate-widths
       dense
       class="elevation-1"
@@ -25,6 +25,7 @@
               {{ relKey }}
             </v-subheader>
 
+            <!-- SECTION: Relatives -->
             <v-data-table
               :headers="computedHeaders(relVal.records).headers"
               :items="computedItems(relVal.records)[0].map(m => m.data)"
@@ -40,16 +41,32 @@
                 <td :colspan="headers.length">
                   <template v-for="(firstVal, firstKey, firstIndex) in item.kids">
                     <v-subheader>
-                      {{ relKey }}
+                      {{ firstKey }}
                     </v-subheader>
+
+                    <!-- SECTION: Phones -->
+                    <v-data-table
+                      :headers="computedHeaders(firstVal.records).headers"
+                      :items="computedItems(firstVal.records)[0].map(m => m.data)"
+                      :single-expand="singleExpand"
+                      :expanded.sync="firstExpanded"
+                      item-key="Phone ID"
+                      @click:row="(i, s) => s.expand(!s.isExpanded)"
+                      show-expand
+                      hide-default-footer
+                      class="elevation-1 mb-4"
+                    ></v-data-table>
+                    <!-- SECTION: ./Phones -->
                   </template>
                 </td>
               </template>
             </v-data-table>
+            <!-- SECTION: ./Relatives -->
           </template>
         </td>
       </template>
     </v-data-table>
+    <!-- SECTION: ./Parent table -->
   </v-container>
 </template>
 
@@ -86,6 +103,7 @@
       return {
         expanded: [],
         childExpanded: [],
+        firstExpanded: [],
         singleExpand: false,
       }
     },

diff --git a/tests/__snapshots__/TheDataTable.spec.ts.snap b/tests/__snapshots__/TheDataTable.spec.ts.snap
@@ -2,6 +2,6 @@
 
 exports[`TheDataTable should display parent table 1`] = `
 "<v-container-stub tag=\\"div\\">
-  <v-data-table-stub mobilebreakpoint=\\"600\\" items=\\"[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]\\" options=\\"[object Object]\\" sortby=\\"\\" sortdesc=\\"\\" customsort=\\"[Function]\\" page=\\"1\\" itemsperpage=\\"10\\" groupby=\\"\\" groupdesc=\\"\\" customgroup=\\"[Function]\\" locale=\\"en-US\\" customfilter=\\"[Function]\\" serveritemslength=\\"-1\\" itemkey=\\"Identification number\\" value=\\"\\" expanded=\\"\\" singleexpand=\\"true\\" noresultstext=\\"$vuetify.dataIterator.noResultsText\\" nodatatext=\\"$vuetify.noDataText\\" loadingtext=\\"$vuetify.dataIterator.loadingText\\" selectablekey=\\"isSelectable\\" loaderheight=\\"4\\" headers=\\"[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]\\" showexpand=\\"true\\" dense=\\"true\\" calculatewidths=\\"true\\" expandicon=\\"$expand\\" itemclass=\\"\\" data-test=\\"parent\\" class=\\"elevation-1\\"></v-data-table-stub>
+  <v-data-table-stub mobilebreakpoint=\\"600\\" items=\\"[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]\\" options=\\"[object Object]\\" sortby=\\"\\" sortdesc=\\"\\" customsort=\\"[Function]\\" page=\\"1\\" itemsperpage=\\"10\\" groupby=\\"\\" groupdesc=\\"\\" customgroup=\\"[Function]\\" locale=\\"en-US\\" customfilter=\\"[Function]\\" serveritemslength=\\"-1\\" itemkey=\\"Identification number\\" value=\\"\\" expanded=\\"\\" noresultstext=\\"$vuetify.dataIterator.noResultsText\\" nodatatext=\\"$vuetify.noDataText\\" loadingtext=\\"$vuetify.dataIterator.loadingText\\" selectablekey=\\"isSelectable\\" loaderheight=\\"4\\" headers=\\"[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]\\" showexpand=\\"true\\" dense=\\"true\\" calculatewidths=\\"true\\" expandicon=\\"$expand\\" itemclass=\\"\\" data-test=\\"parent\\" class=\\"elevation-1\\"></v-data-table-stub>
 </v-container-stub>"
 `;