mejoras tablas y enpoint update compras

APP/components/Formularios/Fcompras.vue

@@ -5,7 +5,12 @@
         <i class="fa fa-plus fa-2x" @click="toggleDropDown"> </i>
       </a>
       <span class="dropdown-menu" :class="{ show: isOpen }">
-        <div class="color_fondo p-3">
+       <card>
+       
+          <template slot="header">
+          <img v-if="isUpdate === false" src="img//card-primary.png" alt="" />
+          <img v-else src="img//card-info.png" alt="" />          
+        </template>
           <base-input
             label="Fecha"
             v-model="newCompra.fecha"
@@ -36,26 +41,36 @@
               </option>
             </select>
           </base-input>
-          <base-button
+          <base-button v-if="isUpdate === false"
             type="primary"
             class="mb-3 col-12"
             size="lg"
             @click="saveCompra()"
-            >Guardar</base-button
-          >
-        </div>
+            >Guardar</base-button>
+
+          <base-button v-else
+            type="info"
+            class="mb-3 col-12"
+            size="lg"
+            @click="updateCompra(newCompra._id)"
+            >Actualizar</base-button>
+
+       
+        </card>
       </span>
     </div>
   </div>
 </template>
 
 <script>
+import Card from '../Cards/Card.vue';
 export default {
+  components: { Card },
   name: "Fcompras",
-  props: ["categorias", "metodos_pago", "newCompra", "saveCompra"],
+  props: ["categorias", "metodos_pago", "newCompra", "saveCompra","isUpdate","updateCompra","openForm"],
   data() {
     return {
-      isOpen: false,
+      isOpen: this.openForm
       
     };
   },

APP/layouts/default.vue

@@ -142,7 +142,9 @@
       }
     },
     mounted() {
+
       this.initScrollbar();
+      
     }
   };
 </script>

APP/layouts/error.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <h1 v-if="error.statusCode === 404">Página no encontrada</h1>
+    <h1 v-else> !!Ha ocurrido un error!!</h1>
+    <NuxtLink to="/"> <i class="fas fa-home fa-2x"></i></NuxtLink>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: ['error'],
+    layout: 'error' // you can set a custom layout for the error page
+  }
+  </script>

APP/middleware/authenticated.js

@@ -7,4 +7,6 @@ export default function({ store, redirect }) {
     if (!store.state.auth) {
       return redirect("/login");
     }
+    
+    
   }

APP/pages/GeneralViews/NotFoundPage.vue

@@ -9,7 +9,7 @@
 
 <script>
 export default {
-  layout: 'auth'
+  layout: 'error'
 };
 </script>
 <style lang="scss">

APP/pages/compras.vue

@@ -14,20 +14,40 @@
             )
           "
           border
-          height="900"
+          empty-text="No hay compras realizadas"
+          stripe
+          :summary-method="getSummaries"
+          show-summary
+          style="width: 100%"
         >
-          <el-TableColumn prop="fecha" label="Fecha" sortable> </el-TableColumn>
+          <el-TableColumn prop="fecha" label="Fecha" sortable></el-TableColumn>
           <el-TableColumn prop="detalle" label="Detalle" sortable>
           </el-TableColumn>
-          <el-TableColumn prop="valor" label="Valor" sortable> </el-TableColumn>
-
-          <el-TableColumn prop="metodopago" label="Metodo de pago" sortable>
+          <el-TableColumn prop="valor" label="Valor" sortable :formatter="cell">
           </el-TableColumn>
-
-          <el-TableColumn prop="categoria" label="Categoria" sortable>
-          </el-TableColumn>
-          <el-TableColumn label="Actions" sortable>
+          <el-TableColumn
+            prop="metodopago"
+            label="Metodo de pago"
+            sortable
+          ></el-TableColumn>
+          <el-TableColumn
+            prop="categoria"
+            label="Categoria"
+            sortable
+          ></el-TableColumn>
+          <el-TableColumn>
             <div slot-scope="{ row, $index }">
+              <el-tooltip content="Edit" effect="light">
+                <base-button
+                  type="success"
+                  icon
+                  size="sm"
+                  class="btn-link"
+                  @click="updateCompraClic($index)"
+                >
+                  <i class="el-icon-edit"></i>
+                </base-button>
+              </el-tooltip>
               <el-tooltip content="Delete" effect="light">
                 <base-button
                   type="danger"
@@ -39,25 +59,9 @@
                   <i class="el-icon-delete-solid"></i>
                 </base-button>
               </el-tooltip>
-              <el-tooltip content="Edit">
-                <base-button
-                  type="success"
-                  icon
-                  size="sm"
-                  class="btn-link"
-                  @click="deleteCompra($_id)"
-                >
-                  <i class="el-icon-edit"></i>
-                </base-button>
-              </el-tooltip>
             </div>
-
             <template slot="header" slot-scope="scope">
-              <el-input
-                v-model="search"
-                size="mini"
-                placeholder="Type to search"
-              />
+              <el-input v-model="search" size="mini" placeholder="Buscar" />
             </template>
           </el-TableColumn>
         </el-table>
@@ -68,6 +72,9 @@
         :metodos_pago="metodos_pago"
         :newCompra="newCompra"
         :saveCompra="saveCompra"
+        :updateCompra="updateCompra"
+        :isUpdate="isUpdate"
+        :openForm="openForm"
       />
     </div>
   </div>
@@ -94,27 +101,25 @@ export default {
       },
       compras: [],
       search: "",
-      metodos_pago: [
-        {
-          metodo: "Efectivo",
-        },
-        {
-          metodo: "Tarjeta Credito",
-        },
-        {
-          metodo: "Tarjeta Debito",
-        },
-      ],
+      metodos_pago: [],
       categorias: [],
+      isUpdate: false,
+      openForm: false,
     };
   },
   mounted() {
     this.newCompra.fecha = this.$store.state.fecha;
+    this.$store.dispatch("getCategorias");
+    this.$store.dispatch("getMetodos");
     this.categorias = this.$store.state.categorias;
     this.metodos_pago = this.$store.state.metodos_de_pago;
     this.getCompras();
   },
+
   methods: {
+    cell(row, column, cellValue, index) {
+      return this.formatMoneda(cellValue);
+    },
     getCompras() {
       const axiosHeader = {
         headers: {
@@ -130,6 +135,9 @@ export default {
         .catch((e) => console.log(e));
     },
     saveCompra() {
+      if (this.checkFormulario() === false) {
+        return;
+      }
       const axiosHeader = {
         headers: {
           token: this.$store.state.auth.token,
@@ -146,6 +154,29 @@ export default {
         })
         .catch((e) => console.log(e));
     },
+    updateCompra(id) {
+      const axiosHeader = {
+        headers: {
+          token: this.$store.state.auth.token,
+        },
+      };
+      const toSend = this.newCompra;
+      console.log(axiosHeader.data);
+      this.$axios
+        .put("/compra", toSend, axiosHeader)
+        .then((res) => {
+          this.clearFormCompra();
+          console.log(res.data.status);
+          this.getCompras();
+        })
+        .catch((e) => console.log(e));
+    },
+    updateCompraClic(id) {
+      this.isUpdate = true;
+      this.newCompra = JSON.parse(JSON.stringify(this.compras[id]));
+      this.openForm = !this.openForm;
+    },
+
     deleteCompra(id) {
       const axiosHeader = {
         headers: {
@@ -160,19 +191,105 @@ export default {
         .then((res) => {
           console.log(res.data);
           this.getCompras();
+          this.clearFormCompra();
         })
         .catch((e) => console.log(e));
     },
     clearFormCompra() {
+      this.newCompra._id = "";
       this.newCompra.detalle = "";
       this.newCompra.valor = 0;
       this.newCompra.metodopago = "";
       this.newCompra.categoria = "";
+      this.isUpdate = false;
     },
     getIcon(name) {
       const found = this.$store.state.categorias.find((ic) => ic.name === name);
       console.log(found);
     },
+
+    formatMoneda(dato) {
+      var num = dato;
+      if (!isNaN(num)) {
+        num = num
+          .toString()
+          .split("")
+          .reverse()
+          .join("")
+          .replace(/(?=\d*\.?)(\d{3})/g, "$1.");
+        num = num.split("").reverse().join("").replace(/^[\.]/, "");
+        //return '$' +num;
+        return `$ ${num}`;
+      }
+    },
+
+    getSummaries(param) {
+      const { columns, data } = param;
+      const sums = [];
+      columns.forEach((column, index) => {
+        if (index === 0) {
+          sums[index] = "Valor total";
+          return;
+        }
+        const values = data.map((item) => Number(item[column.property]));
+        if (!values.every((value) => isNaN(value))) {
+          sums[index] = this.formatMoneda(
+            values.reduce((prev, curr) => {
+              const value = Number(curr);
+              if (!isNaN(value)) {
+                return prev + curr;
+              } else {
+                return prev;
+              }
+            }, 0)
+          );
+        } else {
+          sums[index] = "";
+        }
+      });
+
+      return sums;
+    },
+    checkFormulario() {
+      if (this.newCompra.valor === 0) {
+        this.$notify({
+              type: "danger",
+              icon: "tim-icons icon-alert-circle-exc",
+              message: "el campo valor no puede estar en cero :("
+            });
+        return false;
+      }
+
+      if (this.newCompra.detalle === "") {
+                this.$notify({
+              type: "danger",
+              icon: "tim-icons icon-alert-circle-exc",
+              message: "el campo detalle no puede estar vacio :("
+            });
+        return false;
+      }
+
+      if (this.newCompra.metodopago === "") {
+                       this.$notify({
+              type: "danger",
+              icon: "tim-icons icon-alert-circle-exc",
+              message: "el campo metodo de pago no puede estar vacio :("
+            });
+        return false;
+      }
+
+            if (this.newCompra.categoria === "") {
+                       this.$notify({
+              type: "danger",
+              icon: "tim-icons icon-alert-circle-exc",
+              message: "el campo categoría no puede estar vacio :("
+            });
+        return false;
+      }
+    
+
+      return true;
+    },
   },
 };
 </script>

APP/pages/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-      <Prueba />
+     
   </div>
 </template>
 

APP/store/index.js

@@ -61,14 +61,34 @@ export const actions = {
 
     this.$axios.get("/categoria", axiosHeader)
     .then(res => {
-      console.log(res.data.data);
+     
 
       this.commit("setCategorias", res.data.data);
-
+     
 
     }).catch(error => {
       console.log(error);
     });
     
   },
+
+  getMetodos() {
+  
+    const axiosHeader = {
+      headers: {
+        token: this.state.auth.token,
+      },
+    };
+    this.$axios
+      .get("/metodo", axiosHeader)
+      .then((res) => {
+        
+        this.commit("setMetodos", res.data.data);
+      })
+      .catch((e) => console.log(e));
+  
+},
+
+
+
 }