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

@@ -45,6 +45,7 @@
      data() {
          return {
              showModal: false,
+             api: inject('api'),
              valid: false,
              customer: {
                  name: '',
@@ -72,25 +73,13 @@
          async submitForm() {
              console.log(this.customer)
              if (this.$refs.form.validate()) {
-                 try {
+                 this.api.createCustomer(this.customer)
-                     const response = await fetch('/don_confiao/api/customers/', {
+                     .then(data => {
-                         method: 'POST',
+                       console.log('Cliente Guardado:', data);
-                         headers: {
+                       this.$emit('customerCreated', data);
-                             'Content-Type': 'application/json',
+                       this.closeModal();
-                         },
+                     })
-                         body: JSON.stringify(this.customer),
+                     .catch(error => console.error('Error:', error));
-                     });
-                     if (response.ok) {
-                         const data = await response.json();
-                         console.log('Cliente Guardado:', data);
-                         this.$emit('customerCreated', data);
-                         this.closeModal();
-                     } else {
-                         console.error('Error al Crear el Cliente:', response.statusText);
-                     }
-                 } catch (error) {
-                     console.error('Error de red:', error);
-                 }
              }
          },
          resetForm() {

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

@@ -147,10 +147,11 @@
 <script>
   import CustomerForm from './CreateCustomerModal.vue';
   import CasherModal from './CasherModal.vue';
+  import { inject } from 'vue';
 
- export default {
+  export default {
-   name: 'DonConfiao',
+    name: 'DonConfiao',
-   components: {
+    components: {
      CustomerForm,
      CasherModal,
    },
@@ -159,6 +160,7 @@
    },
    data() {
      return {
+       api: inject('api'),
        valid: false,
        form_changed: false,
        show_alert_lines: false,
@@ -259,38 +261,35 @@
          this.purchase.saleline_set[index].measuring_unit = selectedProduct.measuring_unit;
      },
      fetchClients() {
-       fetch('/don_confiao/api/customers/')
+       this.api.getCustomers()
-         .then(response => response.json())
+           .then(data => {
-         .then(data => {
+             this.clients = data;
-           this.clients = data;
+           })
-         })
+           .catch(error => {
-         .catch(error => {
+             console.error(error);
-           console.error(error);
+           });
-         });
      },
        handleNewCustomer(newCustomer){
            this.clients.push(newCustomer);
            this.purchase.customer = newCustomer.id;
        },
      fetchProducts() {
-       fetch('/don_confiao/api/products/')
+       this.api.getProducts()
-         .then(response => response.json())
+           .then(data => {
-         .then(data => {
+             this.products = data;
-           this.products = data;
+           })
-         })
+           .catch(error => {
-         .catch(error => {
+             console.error(error);
-           console.error(error);
+           });
-         });
      },
      fetchPaymentMethods() {
-       fetch('/don_confiao/payment_methods/all/select_format')
+       this.api.getPaymentMethods()
-         .then(response => response.json())
+           .then(data => {
-         .then(data => {
+             this.payment_methods = data;
-           this.payment_methods = data;
+           })
-         })
+           .catch(error => {
-         .catch(error => {
+             console.error(error);
-           console.error(error);
+           });
-         });
      },
      addLine() {
        this.purchase.saleline_set.push({ product: '', unit_price: 0, quantity:0, measuring_unit: ''});
@@ -310,28 +309,16 @@
      },
      async submit() {
        this.$refs.purchase.validate();
-       if (this.valid) {
+         if (this.valid) {
-           try {
+           this.api.createPurchase(this.purchase)
-               const response = await fetch('/don_confiao/api/sales/', {
+               .then(data => {
-                   method: 'POST',
+                 console.log('Compra enviada:', data);
-                   headers: {
+                 this.$router.push({
-                       'Content-Type': 'application/json',
+                   path: "/summary_purchase",
-                   },
+                   query : {id: parseInt(data.id)}
-                   body: JSON.stringify(this.purchase),
+                 });
-               });
+               })
-               if (response.ok) {
+           .catch(error => console.error('Error al enviarl la compra:', error));
-                   const data = await response.json();
-                   console.log('Compra enviada:', data);
-                   this.$router.push({
-                       path: "/summary_purchase",
-                       query : {id: parseInt(data.id)}
-                   });
-               } else {
-                   console.error('Error al enviar la compra:', response.statusText);
-               }
-           } catch (error) {
-               console.error('Error de red:', error);
-           }
        } else {
          this.show_alert_purchase = true;
            setTimeout(() => {
@@ -347,7 +334,7 @@
      },
    },
      mounted() {
-         this.fetchClients();  // Llama a fetchClients al montar el componente
+         this.fetchClients();
      }
  };
 </script>

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

@@ -83,6 +83,7 @@
   </v-container>
 </template>
 <script>
+  import { inject } from 'vue';
   import CurrencyText from './CurrencyText.vue';
   import SummaryPurchaseModal from './SummaryPurchaseModal.vue';
 
@@ -96,6 +97,7 @@
     },
     data () {
       return {
+        api: inject('api'),
         valid: null,
         selectedPurchaseId: null,
         selectedTab: 'CASH',
@@ -171,43 +173,28 @@
         this.$refs.summaryModal.dialog = true;
       },
       fetchPurchases() {
-        const endpoint = '/don_confiao/purchases/for_reconciliation';
+        this.api.getPurchasesForReconciliation()
-        fetch(endpoint)
+            .then(data => {
-          .then(response => response.json())
+              this.summary.purchases = data;
-          .then(data => {
+              this.reconciliation.cash_purchases = this.idsBymethod('CASH');
-            this.summary.purchases = data;
+              this.reconciliation.total_cash_purchases = this.totalByMethod('CASH');
-            this.reconciliation.cash_purchases = this.idsBymethod('CASH');
+              this.processOtherMethods();
-            this.reconciliation.total_cash_purchases = this.totalByMethod('CASH');
+            })
-            this.processOtherMethods();
+            .catch(error => {
-          })
+              console.error(error);
-          .catch(error => {
+            });
-            console.error(error);
-          });
       },
       async submit() {
         this.$refs.taker.validate();
         if (this.valid) {
-          try {
+          this.api.createReconciliationJar(this.reconciliation)
-            const response = await fetch('/don_confiao/reconciliate_jar', {
+              .then(data => {
-              method: 'POST',
+                console.log('Cuadre enviado:', data);
-              headers: {
+                this.$router.push({path: "/"});
-                'Content-Type': 'application/json'
+              })
-              },
+              .catch(error => console.error('Error:', error));
-              body: JSON.stringify(this.reconciliation),
-            });
-            if (response.ok) {
-              const data = await response.json();
-              console.log('Cuadre enviado:', data);
-              this.$router.push({path: "/"});
-            } else {
-              console.error('Error al enviar el cuadre', response.statusText);
-
-            }
-          } catch (error) {
-            console.error('Error de red:', error);
-          }
         }
-      },
+      }
     },
   }
 </script>

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

@@ -47,6 +47,8 @@
 </template>
 
 <script>
+  import { inject } from 'vue';
+
   export default {
     name: 'SummaryPurchase',
     props: {
@@ -55,6 +57,7 @@
     },
     data () {
       return {
+        api: inject('api'),
         purchase: {},
         headers: [
           { title: 'Producto', value: 'product.name' },
@@ -73,8 +76,7 @@
     },
     methods: {
       fetchPurchase(purchaseId) {
-        fetch(`/don_confiao/resumen_compra_json/${purchaseId}`)
+        this.api.getSummaryPurchase(purchaseId)
-          .then(response => response.json())
           .then(data => {
             this.purchase = data;
           })

tienda_ilusion/don_confiao/frontend/don-confiao/src/main.js

@@ -9,11 +9,17 @@ import { registerPlugins } from '@/plugins'
 
 // Components
 import App from './App.vue'
+import ApiImplementation from './services/api-implementation';
 
 // Composables
 import { createApp } from 'vue'
 
-const app = createApp(App)
+process.env.API_IMPLEMENTATION = 'django';
+let apiImplementation = new ApiImplementation();
+const api = apiImplementation.getApi();
+
+const app = createApp(App);
+app.provide('api', api);
 
 registerPlugins(app)
 

tienda_ilusion/don_confiao/frontend/don-confiao/src/services/api-implementation.js

@@ -0,0 +1,21 @@
+import DjangoApi from './django-api';
+import Api from './api';
+
+class ApiImplementation {
+  constructor() {
+    const implementation = process.env.API_IMPLEMENTATION;
+    let apiImplementation;
+    if (implementation === 'django') {
+      apiImplementation = new DjangoApi();
+    } else {
+      throw new Error("API implementation don't configured");
+    }
+    this.api = new Api(apiImplementation);
+  }
+
+  getApi() {
+    return this.api;
+  }
+}
+
+export default ApiImplementation;

tienda_ilusion/don_confiao/frontend/don-confiao/src/services/api.js

@@ -0,0 +1,39 @@
+class Api {
+  constructor (apiImplementation) {
+    this.apiImplementation = apiImplementation;
+  }
+
+  getCustomers() {
+    return this.apiImplementation.getCustomers();
+  }
+
+  getProducts() {
+    return this.apiImplementation.getProducts();
+  }
+
+  getPaymentMethods() {
+    return this.apiImplementation.getPaymentMethods();
+  }
+
+  getSummaryPurchase(purchaseId) {
+    return this.apiImplementation.getSummaryPurchase(purchaseId);
+  }
+
+  getPurchasesForReconciliation() {
+    return this.apiImplementation.getPurchasesForReconciliation();
+  }
+
+  createPurchase(purchase) {
+    return this.apiImplementation.createPurchase(purchase);
+  }
+
+  createReconciliationJar(reconciliation) {
+    return this.apiImplementation.createReconciliationJar(reconciliation);
+  }
+
+  createCustomer(customer) {
+    return this.apiImplementation.createCustomer(customer);
+  }
+}
+
+export default Api;

tienda_ilusion/don_confiao/frontend/don-confiao/src/services/django-api.js

@@ -0,0 +1,82 @@
+class DjangoApi {
+  getCustomers() {
+    const url = '/don_confiao/api/customers/';
+    return this.getRequest(url);
+  }
+
+  getProducts() {
+    const url = '/don_confiao/api/products/';
+    return this.getRequest(url);
+  }
+
+  getPaymentMethods() {
+    const url = '/don_confiao/payment_methods/all/select_format';
+    return this.getRequest(url);
+  }
+
+  getSummaryPurchase(purchaseId) {
+    const url = `/don_confiao/resumen_compra_json/${purchaseId}`;
+    return this.getRequest(url);
+  }
+
+  getPurchasesForReconciliation() {
+    const url = '/don_confiao/purchases/for_reconciliation';
+    return this.getRequest(url);
+  }
+
+  createPurchase(purchase) {
+    const url = '/don_confiao/api/sales/';
+    return this.postRequest(url, purchase);
+  }
+
+  createReconciliationJar(reconciliation) {
+    const url = '/don_confiao/reconciliate_jar';
+    return this.postRequest(url, reconciliation);
+  }
+
+  createCustomer(customer) {
+    const url = '/don_confiao/api/customers/';
+    return this.postRequest(url, customer);
+  }
+
+  getRequest(url) {
+    return new Promise ((resolve, reject) => {
+      fetch(url)
+        .then(response => response.json())
+        .then(data => {
+          resolve(data);
+        })
+        .catch(error => {
+          reject(error);
+        });
+    });
+  }
+
+  postRequest(url, content) {
+    return new Promise((resolve, reject) => {
+      fetch(url, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(content)
+      })
+        .then(response => {
+          if (!response.ok) {
+            reject(new Error(`Error ${response.status}: ${response.statusText}`));
+          } else {
+            response.json().then(data => {
+              if (!data) {
+                reject(new Error('La respuesta no es un JSON válido'));
+              } else {
+                resolve(data);
+              }
+            });
+          }
+        })
+        .catch(error => reject(error));
+    });
+  }
+}
+
+  export default DjangoApi;