Esqueleto presupuesto

APP/components/Formularios/Fingreso.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="fixed-plugin" v-click-outside="closeDropDown">
+    <div class="dropdown show-dropdown" :class="{ show: isOpen }">
+      <a data-toggle="dropdown" class="settings-icon">
+        <i class="fa fa-plus fa-2x" @click="toggleDropDown"> </i>
+      </a>
+      <span class="dropdown-menu" :class="{ show: isOpen }">
+        <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="newIngreso.fecha"
+            type="Date"
+            required
+          ></base-input>
+          <base-input
+            label="Descripcion"
+            v-model="newIngreso.detalle"
+          ></base-input>
+          <base-input
+            label="Valor"
+            type="Number"
+            v-model="newIngreso.valor"
+          ></base-input>
+          <base-button
+            v-if="isUpdate === false"
+            type="primary"
+            class="mb-3 col-12"
+            size="lg"
+            @click="saveIngreso()"
+            >Guardar</base-button
+          >
+
+          <base-button
+            v-else
+            type="info"
+            class="mb-3 col-12"
+            size="lg"
+            @click="updateIngreso(newIngreso._id)"
+            >Actualizar</base-button
+          >
+        </card>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Fingreso",
+  props: ["newIngreso", "saveIngreso", "isUpdate", "updateIngreso", "openForm"],
+  data() {
+    return {
+      isOpen: this.openForm,
+    };
+  },
+  methods: {
+    toggleDropDown() {
+      this.isOpen = !this.isOpen;
+    },
+    closeDropDown() {
+      this.isOpen = false;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.settings-icon {
+  cursor: pointer;
+}
+
+.badge-vue {
+  background-color: #ffffff;
+}
+
+.color_fondo {
+  background-color: #ffffff;
+}
+</style>

APP/components/Formularios/Fpresupuesto.vue

@@ -0,0 +1,70 @@
+<template>
+  <!-- <div class="fixed-plugin" v-click-outside="closeDropDown"> -->
+    <div class="dropdown show-dropdown" :class="{ show: isOpen }">
+      <a data-toggle="dropdown" class="settings-icon">
+        <i class="btn btn-info" @click="toggleDropDown">Nuevo </i>
+      </a>
+      <span class="dropdown-menu" :class="{ show: isOpen }">
+        <card>
+          <template slot="header">
+            
+            <img  src="img//card-info.png" alt="" />
+          </template>
+          <base-input
+            label="Fecha"
+            v-model="newPresupuesto.fecha"
+            type="Date"
+            required
+          ></base-input>
+          <base-input
+            label="Descripcion"
+            v-model="newPresupuesto.detalle"
+          ></base-input>
+          <base-button
+            
+            type="info"
+            class="mb-3 col-12"
+            size="lg"
+            @click="savePresupuesto()"
+            >Guardar</base-button
+          >
+
+        </card>
+      </span>
+    </div>
+  <!-- </div> -->
+</template>
+
+<script>
+export default {
+  name: "Fpresupuesto",
+  props: ["newPresupuesto", "savePresupuesto"],
+  data() {
+    return {
+      isOpen: false,
+    };
+  },
+  methods: {
+    toggleDropDown() {
+      this.isOpen = !this.isOpen;
+    },
+    closeDropDown() {
+      this.isOpen = false;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.settings-icon {
+  cursor: pointer;
+}
+
+.badge-vue {
+  background-color: #ffffff;
+}
+
+.color_fondo {
+  background-color: #ffffff;
+}
+</style>

APP/components/Layout/DashboardNavbar.vue

@@ -16,11 +16,11 @@
           <span class="navbar-toggler-bar bar3"></span>
         </button>
       </div>
-      <a class="navbar-brand ml-xl-3 ml-5" href="#pablo">{{ routeName }}</a>
+      <!-- <a class="navbar-brand ml-xl-3 ml-5" href="#">{{ routeName }}</a> -->
     </div>
 
     <ul class="navbar-nav" :class="$rtl.isRTL ? 'mr-auto' : 'ml-auto'">
-      <div class="search-bar input-group" @click="searchModalVisible = true">
+      <!-- <div class="search-bar input-group" @click="searchModalVisible = true">
         <button
           class="btn btn-link"
           id="search-button"
@@ -29,9 +29,10 @@
         >
           <i class="tim-icons icon-zoom-split"></i>
         </button>
-        <!-- You can choose types of search input -->
-      </div>
-      <modal
+
+
+      </div> -->
+      <!-- <modal
         :show.sync="searchModalVisible"
         class="modal-search"
         id="searchModal"
@@ -46,7 +47,7 @@
           id="inlineFormInputGroup"
           placeholder="SEARCH"
         />
-      </modal>
+      </modal> -->
       <base-dropdown
         tag="li"
         :menu-on-right="!$rtl.isRTL"
@@ -62,15 +63,15 @@
           <b class="caret d-none d-lg-block d-xl-block"></b>
           <p class="d-lg-none">Log out</p>
         </template>
-        <li class="nav-link">
+        <!-- <li class="nav-link">
           <a href="#" class="nav-item dropdown-item">Profile</a>
-        </li>
+        </li> -->
         <li class="nav-link">
-          <a href="#" class="nav-item dropdown-item">Settings</a>
+         <NuxtLink to="/configuracion" class="dropdown-item">Configuración</NuxtLink>
         </li>
         <div class="dropdown-divider"></div>
         <li class="nav-link">
-          <a @click="salir()" class="nav-item dropdown-item">Log out</a>
+          <a @click="salir()" class="nav-item dropdown-item">Salir</a>
         </li>
       </base-dropdown>
     </ul>

APP/components/Navbar/BaseNav.vue

@@ -120,6 +120,10 @@ export default {
       return this.$slots.default;
     }
   },
+  mounted() {
+    this.$store.dispatch("getCategorias");
+    this.$store.dispatch("getMetodos");
+  },
   methods: {
     toggleMenu() {
       this.$emit('change', !this.show);

APP/nuxt.config.js

@@ -59,7 +59,8 @@ export default {
 
   // Axios module configuration (https://go.nuxtjs.dev/config-axios)
   axios: {
-    baseURL: "http://127.0.0.1:4000/api"
+    //baseURL: "http://192.168.1.111:4000/api"
+    baseURL:"http://localhost:4000/api"
   },
 
   /*

APP/pages/compras.vue

@@ -34,6 +34,7 @@
             prop="categoria"
             label="Categoria"
             sortable
+            
           ></el-TableColumn>
           <el-TableColumn>
             <div slot-scope="{ row, $index }">
@@ -107,14 +108,23 @@ export default {
       openForm: false,
     };
   },
-  mounted() {
+   mounted() {
+
+       
+    
+   // this.$store.dispatch("getCategorias");
+    //this.$store.dispatch("getMetodos");
     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) {
@@ -203,9 +213,10 @@ export default {
       this.newCompra.categoria = "";
       this.isUpdate = false;
     },
-    getIcon(name) {
-      const found = this.$store.state.categorias.find((ic) => ic.name === name);
-      console.log(found);
+    getIcon(row, column, cellValue, index) {
+      const found = this.$store.state.categorias.filter((ic) => ic.name === cellValue)[0];
+      //console.log(found);
+      return `<i class="${found.icon}"></i>${cellValue}`
     },
 
     formatMoneda(dato) {

APP/pages/ingresos.vue

@@ -1,17 +1,258 @@
 <template>
   <div>
-      <Prueba />
+    <div class="row">
+      <card class="col-12">
+        <el-table
+          :data="
+            ingresos.filter(
+              (data) =>
+                !search ||
+                data.detalle.toLowerCase().includes(search.toLowerCase()) ||
+                data.fecha.toLowerCase().includes(search.toLowerCase()) 
+            )
+          "
+          border
+          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="detalle" label="Detalle" sortable>
+          </el-TableColumn>
+          <el-TableColumn prop="valor" label="Valor" sortable :formatter="cell">
+          </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="updateIngresoClic($index)"
+                >
+                  <i class="el-icon-edit"></i>
+                </base-button>
+              </el-tooltip>
+              <el-tooltip content="Delete" effect="light">
+                <base-button
+                  type="danger"
+                  icon
+                  size="sm"
+                  class="btn-link"
+                  @click="deleteIngreso(row._id)"
+                >
+                  <i class="el-icon-delete-solid"></i>
+                </base-button>
+              </el-tooltip>
+            </div>
+            <template slot="header" slot-scope="scope">
+              <el-input v-model="search" size="mini" placeholder="Buscar" />
+            </template>
+          </el-TableColumn>
+        </el-table>
+      </card>
+      <Fingreso
+       
+        :newIngreso="newIngreso"
+        :saveIngreso="saveIngreso"
+        :updateIngreso="updateIngreso"
+        :isUpdate="isUpdate"
+        :openForm="openForm"
+      />
+    </div>
   </div>
 </template>
 
 <script>
-
+import { Table, TableColumn } from "element-ui";
+import { Select, Option } from "element-ui";
 export default {
-    middleware: 'authenticated',
+  middleware: "authenticated",
+  components: {
+    [Table.name]: Table,
+    [TableColumn.name]: TableColumn,
+    [Option.name]: Option,
+    [Select.name]: Select,
+  },
+  data() {
+    return {
+      newIngreso: {
+        fecha: "",
+        detalle: "",
+        valor: 0,
+      },
+      ingresos: [],
+      search: "",
+      isUpdate: false,
+      openForm: false,
+    };
+  },
+  mounted() {
+    // this.$store.dispatch("getCategorias");
+    //this.$store.dispatch("getMetodos");
+    this.newIngreso.fecha = this.$store.state.fecha;
+  
+  
 
-}
+    this.getIngresos();
+  },
+
+  methods: {
+    cell(row, column, cellValue, index) {
+      return this.formatMoneda(cellValue);
+    },
+    getIngresos() {
+      const axiosHeader = {
+        headers: {
+          token: this.$store.state.auth.token,
+        },
+      };
+      this.$axios
+        .get("/ingreso", axiosHeader)
+        .then((res) => {
+          console.log(res.data.data);
+          this.ingresos = res.data.data;
+        })
+        .catch((e) => console.log(e));
+    },
+    saveIngreso() {
+      if (this.checkFormulario() === false) {
+        return;
+      }
+      const axiosHeader = {
+        headers: {
+          token: this.$store.state.auth.token,
+        },
+      };
+      const toSend = this.newIngreso;
+      console.log(axiosHeader.data);
+      this.$axios
+        .post("/ingreso", toSend, axiosHeader)
+        .then((res) => {
+          this.clearFormIngreso();
+          console.log(res.data.status);
+          this.getIngresos();
+        })
+        .catch((e) => console.log(e));
+    },
+    updateIngreso(id) {
+      const axiosHeader = {
+        headers: {
+          token: this.$store.state.auth.token,
+        },
+      };
+      const toSend = this.newIngreso;
+      console.log(axiosHeader.data);
+      this.$axios
+        .put("/ingreso", toSend, axiosHeader)
+        .then((res) => {
+          this.clearFormIngreso();
+          console.log(res.data.status);
+          this.getIngresos();
+        })
+        .catch((e) => console.log(e));
+    },
+    updateIngresoClic(id) {
+      this.isUpdate = true;
+      this.newIngreso = JSON.parse(JSON.stringify(this.ingresos[id]));
+      this.openForm = !this.openForm;
+    },
+
+    deleteIngreso(id) {
+      const axiosHeader = {
+        headers: {
+          token: this.$store.state.auth.token,
+        },
+        params: {
+          id: id,
+        },
+      };
+      this.$axios
+        .delete("/ingreso", axiosHeader)
+        .then((res) => {
+          console.log(res.data);
+          this.getIngresos();
+          this.clearFormIngreso();
+        })
+        .catch((e) => console.log(e));
+    },
+    clearFormIngreso() {
+      this.newIngreso._id = "";
+      this.newIngreso.detalle = "";
+      this.newIngreso.valor = 0;
+      this.isUpdate = false;
+    },
+  
+    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.newIngreso.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.newIngreso.detalle === "") {
+        this.$notify({
+          type: "danger",
+          icon: "tim-icons icon-alert-circle-exc",
+          message: "el campo detalle no puede estar vacio :(",
+        });
+        return false;
+      }
+
+      return true;
+    },
+  },
+};
 </script>
 
 <style>
-
 </style>

APP/pages/presupuesto.vue

@@ -1,14 +1,177 @@
 <template>
-  <h1>Presupuesto</h1>
+  <div>
+    <card>
+      <div class="row">
+        <base-input class="col-6">
+          <select class="form-control">
+            <option>Presupuesto</option>
+            <option>Presupuesto 2</option>
+          </select>
+        </base-input>
+
+        <div class="row pull-right pull-buttom">
+          <div class="col-12">
+            <Fpresupuesto
+              :newPresupuesto="newPresupuesto"
+              :savePresupuesto="savePresupuesto"
+            />
+          </div>
+        </div>
+      </div>
+    </card>
+    <card title="Presupuesto">
+      <div class="row">
+        <div class="col-6">
+
+
+          <el-table
+          :data="selectedPresupuesto.datos"
+          border
+          empty-text="No hay items"
+          stripe          
+          style="width: 100%"
+          height="300"
+        >
+          
+          <el-TableColumn prop="detalle" label="Detalle" sortable>
+          </el-TableColumn>
+          <el-TableColumn prop="valor" label="Valor" sortable>
+          </el-TableColumn>
+
+          <el-TableColumn>
+            <div slot-scope="{ row, $index }">
+              
+ 
+              <el-tooltip content="Delete" effect="light">
+                <base-button
+                  type="danger"
+                  icon
+                  size="sm"
+                  class="btn-link"
+                  @click="deleteIngreso(row._id)"
+                >
+                  <i class="el-icon-delete-solid"></i>
+                </base-button>
+              </el-tooltip>
+            </div>
+          </el-TableColumn>
+        </el-table>
+
+        </div>
+
+        <div class="col-6">
+          <base-input v-model="newItem.detalle"   label="Descripción">
+          </base-input>
+          <base-input v-model="newItem.valor" type="Number">
+          </base-input>
+           <base-input>
+          <select class="form-control" v-model="newItem.tipo">
+            <option>Ingreso</option>
+            <option>Egreso</option>
+          </select>
+        </base-input>
+       <base-button
+            
+            type="info"
+            class="mb-3 col-12"
+            size="lg"
+            @click="addItem()"
+            >Guardar</base-button
+          >
+
+        </div>
+      </div>
+    </card>
+
+    <card>
+
+      <div class="row">
+        <div class="col-4">
+          <b>Ingresos: </b> {{formatMoneda(totalIngresos)}}
+        </div>
+                <div class="col-4">
+          <b>Egreso:</b> <span>{{formatMoneda(totalEgresos)}} </span>
+        </div>
+                <div class="col-4">
+          <b>Total:<span :class="[total<0?'text-danger':'text-success']"> {{formatMoneda(total)}}</span></b>  
+        </div>
+      </div>
+     
+    </card>
+  </div>
 </template>
 
 <script>
-export default {
-    middleware: 'authenticated',
+import { Table, TableColumn } from "element-ui";
 
-}
+export default {
+   components: {
+      
+    [Table.name]: Table,
+    [TableColumn.name]: TableColumn,
+   },
+  middleware: "authenticated",
+  data() {
+    return {
+      newPresupuesto: {
+        fecha: "",
+        detalle: "",
+      },
+      selectedPresupuesto:{
+
+        _id:"",
+        fecha:"",
+        nombrePresupuesto:"",
+        datos:[]
+
+      },
+      newItem: {
+        detalle:"",
+        valor: 0,
+        tipo:"Egreso"
+
+      },
+
+      presupuestos: [],
+      totalIngresos:0,
+      totalEgresos:0,
+      total:0
+    };
+  },
+  methods: {
+    savePresupuesto() {},
+    addItem() {
+      this.selectedPresupuesto.datos.push(JSON.parse(JSON.stringify(this.newItem)))
+      this.sumItems()
+    },
+    sumItems(){
+
+      this.totalIngresos=this.selectedPresupuesto.datos.reduce((acc,x) => x.tipo ==="Ingreso"?acc + Number(x.valor):acc,0)
+
+      this.totalEgresos = this.selectedPresupuesto.datos.reduce((acc,x) => x.tipo==="Egreso"?acc + Number(x.valor):acc,0)
+      this.total =  this.totalIngresos - this.totalEgresos
+
+    },
+        formatMoneda(dato) {
+      var num = dato;
+      if (!isNaN(num)) {
+        num = Math.abs(num)
+          .toString()
+          .split("")
+          .reverse()
+          .join("")
+          .replace(/(?=\d*\.?)(\d{3})/g, "$1.");
+        num = num.split("").reverse().join("").replace(/^[\.]/, "");
+        return `$ ${num}`;
+      }
+    },
+  },
+  mounted() {
+    this.newPresupuesto.fecha = this.$store.state.fecha;
+  },
+
+};
 </script>
 
 <style>
-
 </style>

APP/store/index.js

@@ -62,7 +62,6 @@ export const actions = {
     this.$axios.get("/categoria", axiosHeader)
     .then(res => {
      
-
       this.commit("setCategorias", res.data.data);
      
 
@@ -91,4 +90,5 @@ export const actions = {
 
 
 
-}
+}
+