#69 style(Reconciliation): cards to tabs.

tienda_ilusion/don_confiao/frontend/don-confiao/src/components/ReconciliationJar.vue

@@ -3,7 +3,6 @@
     <v-toolbar>
       <v-toolbar-title> Cuadre del Tarro </v-toolbar-title>
     </v-toolbar>
-
     <v-card>
       <v-card-text>
         <v-text-field
@@ -36,19 +35,33 @@
         ></v-text-field>
       </v-card-text>
     </v-card>
+    <v-tabs v-model="selectedTab">
+      <v-tab
+        v-for="(purchases, payment_method) in summary.purchases"
+        :key="payment_method"
+        :value="payment_method"
+      >
+        {{ payment_method }} {{ totalByMethod(payment_method) }}
+      </v-tab>
+    </v-tabs>
 
-    <v-card v-for="(purchases, payment_method) in summary.purchases" :key="payment_method">
-      <v-card-title>{{ payment_method }} {{ totalByMethod(payment_method) }}</v-card-title>
+    <v-tabs-window v-model="selectedTab">
+      <v-card>
         <v-card-text>
+          <v-tabs-window-item
+            v-for="(purchases, payment_method) in summary.purchases"
+            :key="payment_method"
+            :value="payment_method"
+          >
             <v-data-table-virtual
               :headers="summary.headers"
-          :items="purchases"
+              :items="summary.purchases[payment_method]"
             >
             </v-data-table-virtual>
+          </v-tabs-window-item>
         </v-card-text>
       </v-card>
-
-
+    </v-tabs-window>
   </v-container>
 </template>
 <script>
@@ -59,6 +72,7 @@
     },
     data () {
       return {
+        selectedTab: null,
         reconciliation: {
           datetime: '',
           total_cash_purchase: 0,