Esqueleto presupuesto

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>