#14 style(SummaryPurchase): add info table.

Reviewed-on: #6

src/components/CodeDialog.vue

@@ -10,7 +10,8 @@
         </v-form>
       </v-card-text>
       <v-card-actions>
-        <v-btn type="submit" form="code-form">Aceptar</v-btn>
+        <v-btn type="submit" form="code-form" color="green">Aceptar</v-btn>
+        <v-btn :to="{ path: '/' }" color="red">Cancelar</v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>

src/components/ExportPurchasesForTryton.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <v-btn @click="downloadCSV">Descargar CSV</v-btn>
+  </div>
+</template>
+<script>
+  import { inject } from 'vue';
+
+  export default {
+    name: 'ExportPurchasesForTryton',
+    data() {
+      return {
+        api: inject('api'),
+      };
+    },
+    methods: {
+      downloadCSV() {
+        this.api.getCSVForTryton()
+            .then(data => {
+              const blob = new Blob([data['csv']], {type: 'text/csv'});
+              const pattern = /[/: ]/g;
+              const datetime = new Date();
+              const date = datetime.toLocaleDateString().replace(pattern, '-');
+              const time = datetime.toLocaleTimeString().replace(pattern, '-');
+              const name = `VentasTryton_${date}_${time}.csv`;
+              const link = document.createElement('a');
+
+              link.href = URL.createObjectURL(blob);
+              link.download = name;
+              link.click();
+              URL.revokeObjectURL(link.href);
+            })
+            .catch(error => {
+              console.error(error);
+            });
+      },
+    },
+  };
+</script>

src/components/NavBar.vue

@@ -31,6 +31,7 @@
              { title: 'Comprar', route:'/comprar'},
              { title: 'Cuadrar tarro', route: '/cuadrar_tarro'},
              { title: 'Cuadres de tarro', route: '/cuadres_de_tarro'},
+             { title: 'CSV Tryton', route: '/ventas_para_tryton'},
          ],
      }),
      watch: {

src/components/SummaryPurchase.vue

@@ -39,8 +39,26 @@
           {{ currencyFormat(calculateSubtotal(item.unit_price, item.quantity)) }}
         </template>
       </v-data-table-virtual>
+      <v-alert type="info" class="my-4">
+        Recuerda adicionar a la planilla física lo siguiente
+        <v-data-table
+          :headers="headersTemplate"
+          :items="[purchase]"
+          item-key="id"
+          hide-default-footer
+        >
+          <template v-slot:item="{ item }">
+            <tr>
+              <td>{{ item.id }}</td>
+              <td>{{ item.date }}</td>
+              <td><span v-if="item.customer">{{ item.customer.name }}</span></td>
+              <td><span v-if="item.lines">{{ currencyFormat(calculateTotal(item.lines)) }}</span></td>
+            </tr>
+          </template>
+        </v-data-table>
+      </v-alert>
       <div class="text-center">
-        <v-btn :to="{ path: 'comprar' }" color="green">Ir a Comprar</v-btn>
+        <v-btn :to="{ path: '/' }" color="green">Ir al inicio</v-btn>
       </div>
     </v-container>
   </v-container>
@@ -65,6 +83,12 @@
           { title: 'Cantidad', value: 'quantity' },
           { title: 'Subtotal', value: 'subtotal' },
         ],
+        headersTemplate: [
+          {title: 'Compra', value: 'id'},
+          {title: 'Fecha', value: 'date'},
+          {title: 'Nombre', value: 'customer.name'},
+          {title: 'Valor', value: ''},
+        ],
       };
     },
     created() {

src/main.js

@@ -14,7 +14,6 @@ import ApiImplementation from './services/api-implementation';
 // Composables
 import { createApp } from 'vue'
 
-process.env.API_IMPLEMENTATION = 'django';
 let apiImplementation = new ApiImplementation();
 const api = apiImplementation.getApi();
 

src/pages/ventas_para_tryton.vue

@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <CodeDialog @code-verified="(verified) => showComponent = verified"/>
+  </div>
+  <ExportPurchasesForTryton v-if="showComponent" />
+</template>
+<script>
+  import CodeDialog from '../components/CodeDialog.vue'
+
+  export default {
+    data() {
+      return {
+        showComponent: false,
+      }
+    },
+    components: { CodeDialog },
+    methods: {},
+  }
+</script>

src/services/api.js

@@ -46,6 +46,10 @@ class Api {
   createCustomer(customer) {
     return this.apiImplementation.createCustomer(customer);
   }
+
+  getCSVForTryton() {
+    return this.apiImplementation.getCSVForTryton();
+  }
 }
 
 export default Api;

src/services/django-api.js

@@ -1,6 +1,6 @@
 class DjangoApi {
   constructor() {
-    this.base = 'http://localhost:7000';
+    this.base = process.env.DJANGO_BASE_URL;
   }
 
   getCustomers() {
@@ -58,6 +58,11 @@ class DjangoApi {
     return this.postRequest(url, customer);
   }
 
+  getCSVForTryton() {
+    const url = this.base + '/don_confiao/api/sales/for_tryton';
+    return this.getRequest(url);
+  }
+
   getRequest(url) {
     return new Promise ((resolve, reject) => {
       fetch(url)

vite.config.mjs

@@ -46,7 +46,10 @@ export default defineConfig({
       vueTemplate: true,
     }),
   ],
-  define: { 'process.env': {} },
+  define: { 'process.env': {
+    API_IMPLEMENTATION: 'django',
+    DJANGO_BASE_URL: 'http://localhost:7000'
+  } },
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))