inicios del FrontEnd

APP/pages/compras.vue

@@ -0,0 +1,158 @@
+<template>
+  <div>
+    <div class="row">
+      <card class="col-8">
+        <el-table
+          :data="
+            compras.filter(
+              (data) =>
+                !search ||
+                data.detalle.toLowerCase().includes(search.toLowerCase()) ||
+                data.fecha.toLowerCase().includes(search.toLowerCase()) ||
+                data.metodo_pago.toLowerCase().includes(search.toLowerCase()) ||
+                data.categoria.toLowerCase().includes(search.toLowerCase())
+            )
+          "
+          border
+          height="900"
+        >
+          <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="metodo_pago" label="Metodo de pago" sortable>
+          </el-TableColumn>
+
+          <el-TableColumn prop="categoria" label="Categoria" sortable>
+          </el-TableColumn>
+          <el-TableColumn label="Actions" sortable>
+            <div slot-scope="{ row, $index }">
+              <el-tooltip content="Delete" effect="light">
+                <base-button
+                  type="danger"
+                  icon
+                  size="sm"
+                  class="btn-link"
+                  @click="deleteCompra($index)"
+                >
+                  <i class="fas fa-trash"></i>
+                </base-button>
+              </el-tooltip>
+              <el-tooltip content="Edit">
+                <base-button
+                  type="primary"
+                  icon
+                  size="sm"
+                  class="btn-link"
+                  @click="deleteCompra($index)"
+                >
+                  <i class="fas fa-edit"></i>
+                </base-button>
+              </el-tooltip>
+            </div>
+
+            <template slot="header" slot-scope="scope">
+              <el-input
+                v-model="search"
+                size="mini"
+                placeholder="Type to search"
+              />
+            </template>
+          </el-TableColumn>
+        </el-table>
+      </card>
+
+      <card class="col-4">
+        <base-input
+          label="Fecha"
+          v-model="newCompra.fecha"
+          type="Date"
+        ></base-input>
+        <base-input
+          label="Descripcion"
+          v-model="newCompra.detalle"
+        ></base-input>
+        <base-input
+          label="Valor"
+          type="Number"
+          v-model="newCompra.valor"
+        ></base-input>
+        <base-input label="Metodo de pago">
+          <select class="form-control" v-model="newCompra.metodo_pago">
+            <option v-for="metodo in metodos_pago">{{ metodo.metodo }}</option>
+          </select>
+        </base-input>
+        <base-input label="categoría">
+          <select class="form-control" v-model="newCompra.categoria">
+            <option v-for="categoria in categorias">{{ categoria.ctg }}</option>
+          </select>
+        </base-input>
+        <base-button type="primary" class="mb-3" size="lg" @click="saveCompra()"
+          >Guardar</base-button
+        >
+      </card>
+    </div>
+  </div>
+</template>
+<script>
+import { Table, TableColumn } from "element-ui";
+import { Select, Option } from "element-ui";
+export default {
+  components: {
+    [Table.name]: Table,
+    [TableColumn.name]: TableColumn,
+    [Option.name]: Option,
+    [Select.name]: Select,
+  },
+  data() {
+    return {
+      newCompra: {
+        fecha: "",
+        detalle: "",
+        valor: 0,
+        metodo_pago: "",
+        categoria: "",
+      },
+      compras: [],
+      search: "",
+      metodos_pago: [
+        {
+          metodo: "Efectivo",
+        },
+        {
+          metodo: "Tarjeta Credito",
+        },
+        {
+          metodo: "Tarjeta Debito",
+        },
+      ],
+      categorias: [
+        {
+          ctg: "Restaurante",
+        },
+        {
+          ctg: "Servicios",
+        },
+        {
+          ctg: "Transporte",
+        },
+      ],
+    };
+  },
+  methods: {
+    saveCompra() {
+      var compra = JSON.stringify(this.newCompra);
+      this.compras.push(JSON.parse(compra));
+      console.log(compra);
+    },
+    deleteCompra(index) {
+      this.compras.splice(index, 1);
+      //console.log(index)
+    },
+  },
+};
+</script>
+
+<style>
+</style>