#69 style(Reconciliation): cards to tabs.

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

@@ -3,8 +3,7 @@
     <v-toolbar>
       <v-toolbar-title> Cuadre del Tarro </v-toolbar-title>
     </v-toolbar>
-
-        <v-card>
+    <v-card>
       <v-card-text>
         <v-text-field
           v-model="reconciliation.datetime"
@@ -35,20 +34,34 @@
           :rules="[rules.required]"
         ></v-text-field>
       </v-card-text>
-        </v-card>
-
-    <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-card-text>
-        <v-data-table-virtual
-          :headers="summary.headers"
-          :items="purchases"
-        >
-        </v-data-table-virtual>
-      </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-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="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,