#84 refactor(frontend): extract methods to repository.

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 {
-   name: 'DonConfiao',
-   components: {
+  export default {
+    name: 'DonConfiao',
+    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/')
-         .then(response => response.json())
-         .then(data => {
-           this.clients = data;
-         })
-         .catch(error => {
-           console.error(error);
-         });
+       this.api.getCustomers()
+           .then(data => {
+             this.clients = data;
+           })
+           .catch(error => {
+             console.error(error);
+           });
      },
        handleNewCustomer(newCustomer){
            this.clients.push(newCustomer);
            this.purchase.customer = newCustomer.id;
        },
      fetchProducts() {
-       fetch('/don_confiao/api/products/')
-         .then(response => response.json())
-         .then(data => {
-           this.products = data;
-         })
-         .catch(error => {
-           console.error(error);
-         });
+       this.api.getProducts()
+           .then(data => {
+             this.products = data;
+           })
+           .catch(error => {
+             console.error(error);
+           });
      },
      fetchPaymentMethods() {
-       fetch('/don_confiao/payment_methods/all/select_format')
-         .then(response => response.json())
-         .then(data => {
-           this.payment_methods = data;
-         })
-         .catch(error => {
-           console.error(error);
-         });
+       this.api.getPaymentMethods()
+           .then(data => {
+             this.payment_methods = data;
+           })
+           .catch(error => {
+             console.error(error);
+           });
      },
      addLine() {
        this.purchase.saleline_set.push({ product: '', unit_price: 0, quantity:0, measuring_unit: ''});
@@ -347,7 +346,7 @@
      },
    },
      mounted() {
-         this.fetchClients();  // Llama a fetchClients al montar el componente
+         this.fetchClients();
      }
  };
 </script>

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,19 @@
+class Api {
+  constructor (apiImplementation) {
+    this.apiImplementation = apiImplementation;
+  }
+
+  getCustomers() {
+    return this.apiImplementation.getCustomers();
+  }
+
+  getProducts() {
+    return this.apiImplementation.getProducts();
+  }
+
+  getPaymentMethods() {
+    return this.apiImplementation.getPaymentMethods();
+  }
+}
+
+export default Api;

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

@@ -0,0 +1,42 @@
+class DjangoApi {
+  getCustomers() {
+    return new Promise((resolve, reject) => {
+      fetch('/don_confiao/api/customers/')
+        .then(response => response.json())
+        .then(data => {
+          resolve(data);
+        })
+        .catch(error => {
+          reject(error);
+        });
+    });
+  }
+
+  getProducts() {
+    return new Promise((resolve, reject) => {
+      fetch('/don_confiao/api/products/')
+         .then(response => response.json())
+         .then(data => {
+           resolve(data);
+         })
+         .catch(error => {
+           reject(error);
+         });
+    });
+  }
+
+  getPaymentMethods() {
+    return new Promise((resolve, reject) => {
+      fetch('/don_confiao/payment_methods/all/select_format')
+         .then(response => response.json())
+         .then(data => {
+           resolve(data);
+         })
+         .catch(error => {
+           reject(error);
+         });
+    });
+  }
+}
+
+export default DjangoApi;