feat(Purchase): warn user whit browser actions #67.

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

@@ -1,6 +1,6 @@
 <template>
 <v-container>
-  <v-form ref="purchase" v-model="valid" >
+  <v-form ref="purchase" v-model="valid" @change="onFormChange">
     <v-row>
       <v-col>
         <v-autocomplete
@@ -10,6 +10,7 @@
           no-data-text="No se hallaron clientes"
           item-title="name"
           item-value="id"
+          @update:model-value="onFormChange"
           label="Cliente"
           :rules="[rules.required]"
           required
@@ -156,6 +157,7 @@
    data() {
      return {
        valid: false,
+       form_changed: false,
        show_alert_lines: false,
        show_alert_purchase: false,
        client_search: '',
@@ -189,6 +191,12 @@
        this.drawer = false
      },
    },
+   beforeMount() {
+      window.addEventListener('beforeunload', this.confirmLeave);
+   },
+   beforeDestroy() {
+      window.removeEventListener('beforeunload', this.confirmLeave);
+   },
    computed: {
      calculateTotal() {
        return this.purchase.saleline_set.reduce((total, saleline) => {
@@ -218,9 +226,20 @@
      openModal() {
       this.$refs.customerModal.openModal();
      },
+     onFormChange() {
+       this.form_changed = true;
+     },
      openCasherModal() {
        this.$refs.casherModal.dialog = true
      },
+     confirmLeave(event) {
+       if (this.form_changed) {
+         const message = '¿seguro que quieres salir? Perderas la información diligenciada';
+         event.preventDefault();
+         event.returnValue = message;
+         return message;
+       }
+     },
      getCurrentDate() {
        const today = new Date();
        const yyyy = today.getFullYear();
@@ -233,7 +252,6 @@
        const selectedProductId = this.purchase.saleline_set[index].product;
        const selectedProduct = this.products.find(p => p.id == selectedProductId);
          this.purchase.saleline_set[index].unit_price = selectedProduct.price;
-         console.log(selectedProduct.measuring_unit);
          this.purchase.saleline_set[index].measuring_unit = selectedProduct.measuring_unit;
      },
      fetchClients() {