vista categorias y metodos de pago

APP/components/Formularios/Fcompras.vue

@@ -25,14 +25,14 @@
           <base-input label="Metodo de pago">
             <select class="form-control" v-model="newCompra.metodopago" >
               <option v-for="metodo in metodos_pago">
-                {{ metodo.metodo }}
+                {{ metodo.name }}
               </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 }}
+                {{ categoria.name}}
               </option>
             </select>
           </base-input>

APP/layouts/default.vue

@@ -1,12 +1,13 @@
 <template>
   <div class="wrapper" :class="{ 'nav-open': $sidebar.showSidebar }">
-    <!-- <notifications></notifications> -->
+     
 
     <side-bar
       :background-color="sidebarBackground"
       short-title="MD"
       title="Finanzas"
     >
+    <notifications></notifications> 
       <template slot-scope="props" slot="links">
 
         <sidebar-item
@@ -42,6 +43,15 @@
         >
         </sidebar-item>
 
+              <sidebar-item
+          :link="{
+            name: 'Configuración',
+            icon: 'tim-icons icon-chart-pie-36',
+            path: '/configuracion'
+          }"
+        >
+        </sidebar-item>
+
 
 
       </template>

APP/pages/compras.vue

@@ -105,21 +105,13 @@ export default {
           metodo: "Tarjeta Debito",
         },
       ],
-      categorias: [
-        {
-          ctg: "Restaurante",
-        },
-        {
-          ctg: "Servicios",
-        },
-        {
-          ctg: "Transporte",
-        },
-      ],
+      categorias: [],
     };
   },
   mounted() {
     this.newCompra.fecha = this.$store.state.fecha;
+    this.categorias = this.$store.state.categorias;
+    this.metodos_pago = this.$store.state.metodos_de_pago;
     this.getCompras();
   },
   methods: {
@@ -155,20 +147,21 @@ export default {
         .catch((e) => console.log(e));
     },
     deleteCompra(id) {
-      const axiosHeader={
-        headers:{
+      const axiosHeader = {
+        headers: {
           token: this.$store.state.auth.token,
-          
         },
-        params:{
-          id:id
-        }
-      }
-      this.$axios.delete("/compra",axiosHeader).then(res=>{
-        
-        console.log(res.data);
-        this.getCompras();
-      }).catch(e => console.log(e))
+        params: {
+          id: id,
+        },
+      };
+      this.$axios
+        .delete("/compra", axiosHeader)
+        .then((res) => {
+          console.log(res.data);
+          this.getCompras();
+        })
+        .catch((e) => console.log(e));
     },
     clearFormCompra() {
       this.newCompra.detalle = "";
@@ -176,6 +169,10 @@ export default {
       this.newCompra.metodopago = "";
       this.newCompra.categoria = "";
     },
+    getIcon(name) {
+      const found = this.$store.state.categorias.find((ic) => ic.name === name);
+      console.log(found);
+    },
   },
 };
 </script>

APP/pages/configuracion.vue

@@ -0,0 +1,305 @@
+<template>
+  <div>
+    <div class="row">
+      <card title="Categorias">
+        <div class="row">
+          <div class="col-8">
+            <el-table :data="categorias" border height="500">
+              <el-TableColumn prop="name" label="Nombre Categoría" sortable>
+              </el-TableColumn>
+
+              <el-TableColumn prop="icon" label="Icono" sortable>
+                <div slot-scope="{ row, $index }">
+                  <i class="fas text-success fa-2x" :class="[row.icon]"></i>
+                </div>
+              </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="deleteCategoria(row._id)"
+                    >
+                      <i class="fa fa-trash"></i>
+                    </base-button>
+                  </el-tooltip>
+                </div>
+              </el-TableColumn>
+            </el-table>
+          </div>
+          <div class="col-4">
+            <form>
+              
+                <base-input
+                  type="text"
+                  placeholder="Nombre de categoria"
+                  v-model="newCategoria.name"
+                />
+             
+          
+                <base-input>
+                  <select class="form-control" v-model="newCategoria.icon">
+                    <option v-for="icono in iconos">
+                      {{ icono.icon }}
+                    </option>
+                  </select>
+                </base-input>
+   
+              <div class="col pull-buttom">
+                <base-button
+                  type="info"
+                  class="mb-3"
+                  size="lg"
+                  @click="enviarCategoria()"
+                  >Enviar</base-button
+                >
+              </div>
+            </form>
+          </div>
+        </div>
+      </card>
+    </div>
+
+    <div class="row">
+      <card title="Metodos de pago">
+        <div class="row">
+          <div class="col-8">
+            <el-table :data="metodos" border height="500">
+              <el-TableColumn prop="name" label="Nombre Categoría" sortable>
+              </el-TableColumn>
+
+              <el-TableColumn prop="icon" label="Icono" sortable>
+                <div slot-scope="{ row, $index }">
+                  <i class="fas text-success fa-2x" :class="[row.icon]"></i>
+                </div>
+              </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="deleteMetodo(row._id)"
+                    >
+                      <i class="fa fa-trash"></i>
+                    </base-button>
+                  </el-tooltip>
+                </div>
+              </el-TableColumn>
+            </el-table>
+          </div>
+          <div class="col-4">
+              <form>
+                  <base-input placeholder="Nombre pago" v-model="newMetodo.name"></base-input>
+                  <base-input>
+                  <select class="form-control" v-model="newMetodo.icon">
+                    <option v-for="icono in iconos">
+                      {{ icono.icon }}
+                    </option>
+                  </select>
+                </base-input>
+                  
+            <div class="col pull-buttom">
+                <base-button
+                  type="info"
+                  class="mb-3"
+                  size="lg"
+                  @click="enviarMetodo()"
+                  >Enviar</base-button
+                >
+              </div>
+              </form>
+          </div>
+        </div>
+      </card>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Table, TableColumn } from "element-ui";
+
+export default {
+  middleware: "authenticated",
+  components: {
+    [Table.name]: Table,
+    [TableColumn.name]: TableColumn,
+  },
+  mounted() {
+    this.getCategorias();
+     this.getMetodos();
+  },
+  data() {
+    return {
+      newCategoria: {
+        name: "",
+        icon: "",
+      },
+       newMetodo: {
+        name: "",
+        icon: "",
+      },
+      
+      iconos: [
+        { icon: "fa-bell" },
+        { icon: "fa-book" },
+        { icon: "fa-bookmark" },
+        { icon: "fa-adjust" },
+        { icon: "fa-puzzle-piece" },
+        { icon: "fa-heart" },
+        { icon: "fa-hotel" },
+        { icon: "fa-plug" },
+        { icon: "fa-square" },
+        { icon: "fa-truck" },
+        { icon: "fa-bus" },
+        { icon: "fa-university" },
+        { icon: "fa-tasks" },
+        { icon: "fa-shopping-bag" },
+        { icon: "fa-graduation-cap" },
+        { icon: "fa-shopping-cart" },
+        { icon: "fa-microchip" },
+        { icon: "fa-bath" },
+        { icon: "fa-star" },
+        { icon: "fa-suitcase" },
+        { icon: "fa-tablet" },
+        { icon: "fa-terminal" },
+        { icon: "fa-address-card" },
+        { icon: "fa-credit-card" },
+        { icon: "fa-paypal" },
+        { icon: "fa-cc-mastercard" },
+        { icon: "fa-cc-visa" },
+        { icon: "fa-money" },
+        { icon: "fa-bank" },
+      ],
+      categorias: [],
+      metodos: [],
+    };
+  },
+  methods: {
+    enviarCategoria() {
+      const axiosHeader = {
+        headers: {
+          token: this.$store.state.auth.token,
+        },
+      };
+      const toSend = this.newCategoria;
+
+      this.$axios
+        .post("/categoria", toSend, axiosHeader)
+        .then((res) => {
+          console.log(res);
+          this.getCategorias();
+        })
+        .catch((e) => {
+          this.$notify({
+            type: "danger",
+            icon: "tim-icons icon-alert-circle-exc",
+            message: JSON.parse(e.request.response).error,
+          });
+          console.log(e.request.responseText);
+        });
+    },
+
+    getCategorias() {
+      const axiosHeader = {
+        headers: {
+          token: this.$store.state.auth.token,
+        },
+      };
+      this.$axios
+        .get("/categoria", axiosHeader)
+        .then((res) => {
+          console.log(res.data.data);
+          this.categorias = res.data.data;
+          this.$store.commit("setCategorias", this.categorias);
+        })
+        .catch((e) => console.log(e));
+    },
+    deleteCategoria(id) {
+      const axiosHeader = {
+        headers: {
+          token: this.$store.state.auth.token,
+        },
+        params: {
+          id: id,
+        },
+      };
+      this.$axios
+        .delete("/categoria", axiosHeader)
+        .then((res) => {
+          console.log(res.data);
+          this.getCategorias();
+        })
+        .catch((e) => {
+          console.log(e);
+        });
+    },
+     enviarMetodo() {
+      const axiosHeader = {
+        headers: {
+          token: this.$store.state.auth.token,
+        },
+      };
+      const toSend = this.newMetodo;
+
+      this.$axios
+        .post("/metodo", toSend, axiosHeader)
+        .then((res) => {
+          console.log(res);
+          this.getMetodos();
+        })
+        .catch((e) => {
+          this.$notify({
+            type: "danger",
+            icon: "tim-icons icon-alert-circle-exc",
+            message: JSON.parse(e.request.response).error,
+          });
+          console.log(e.request.responseText);
+        });
+    },
+
+    getMetodos() {
+      const axiosHeader = {
+        headers: {
+          token: this.$store.state.auth.token,
+        },
+      };
+      this.$axios
+        .get("/metodo", axiosHeader)
+        .then((res) => {
+          console.log(res.data.data);
+          this.metodos = res.data.data;
+          this.$store.commit("setMetodos", this.metodos);
+        })
+        .catch((e) => console.log(e));
+    },
+    deleteMetodo(id) {
+      const axiosHeader = {
+        headers: {
+          token: this.$store.state.auth.token,
+        },
+        params: {
+          id: id,
+        },
+      };
+      this.$axios
+        .delete("/metodo", axiosHeader)
+        .then((res) => {
+          console.log(res.data);
+          this.getMetodos();
+        })
+        .catch((e) => {
+          console.log(e);
+        });
+    },
+  },
+};
+</script>
+
+<style>
+</style>

APP/store/index.js

@@ -20,6 +20,10 @@ export const state = () => ({
       state.categorias = categorias;
     },
 
+    setMetodos(state, metodos) {
+      state.metodos_de_pago = metodos;
+    },
+  
  
   
   };

index.js

@@ -26,6 +26,8 @@ app.use(cors());
 //Rutas
 app.use('/api',require('./routes/users'));
 app.use('/api',require('./routes/compras'))
+app.use('/api',require('./routes/categorias'))
+app.use('/api',require('./routes/metodos_pago'))
 module.exports = app;
 
 app.listen(app.get('port') ,() => console.log("service startes, listening on the port: ",app.get('port')))

models/categoria.js

@@ -2,7 +2,8 @@ const mongoose = require('mongoose');
 const {Schema} =mongoose;
 
 const categoriaShema=new Schema({
-      categoria:{type:String,required:true},
+      name:{type:String,required:true},
+      icon:{type:String,default:"fa-circle-o "},
       user:{type:String, required:true}
         
 });

models/metodo.js

@@ -0,0 +1,10 @@
+const mongoose = require('mongoose');
+const {Schema} =mongoose;
+
+const metodoShema=new Schema({
+      name:{type:String,required:true},
+      icon:{type:String,default:"fa-circle-o "},
+      user:{type:String, required:true}
+        
+});
+module.exports=mongoose.model('metodo',metodoShema);

routes/categorias.js

@@ -0,0 +1,64 @@
+const router = require("express").Router();
+const Categoria = require("../models/categoria");
+const { checkAuth } = require("../middlewares/authentication");
+
+
+router.get("/categoria", checkAuth, async (req, res) => {
+    var categorias;
+  
+    categorias = await Categoria.find({ user: req.userData._id });
+  
+   return res.send(
+        {
+            status:"ok",
+            data:categorias
+
+        }
+    )
+  });
+
+
+  router.post("/categoria", checkAuth, async (req, res) => {
+    const {name, icon} = req.body;
+    const user= req.userData._id;
+
+    var categoria = await Categoria.findOne({ name: name });
+    if (categoria) {
+      return res.status(500).json({ status: "fail", error: "Categoria existente" });
+      
+    }
+
+    const newCategoria = new Categoria({
+      user,
+      name,
+      icon,
+    });
+
+    await newCategoria.save();
+
+    res.json({
+      status:"ok"
+    })
+  
+   
+  });
+
+  router.delete("/categoria", checkAuth, async (req, res) => {
+
+    try{
+      const userId = req.userData._id;
+      const id = req.query.id;
+      
+      const resultado = await Categoria.deleteOne({user:userId,_id:id});
+    
+      return res.json({status:"ok",data: resultado})
+    
+    }
+    catch(error){
+      console.log(error);
+        return res.status(500).json({status:"fail",error:error})
+    }
+  });
+
+
+  module.exports = router;

routes/metodos_pago.js

@@ -0,0 +1,64 @@
+const router = require("express").Router();
+const Metodo = require("../models/metodo");
+const { checkAuth } = require("../middlewares/authentication");
+
+
+router.get("/metodo", checkAuth, async (req, res) => {
+    var metodos;
+  
+    metodos = await Metodo.find({ user: req.userData._id });
+  
+   return res.send(
+        {
+            status:"ok",
+            data:metodos
+
+        }
+    )
+  });
+
+
+  router.post("/metodo", checkAuth, async (req, res) => {
+    const {name, icon} = req.body;
+    const user= req.userData._id;
+
+    var metodo = await Metodo.findOne({ name: name });
+    if (metodo) {
+      return res.status(500).json({ status: "fail", error: "Método de pago existente" });
+      
+    }
+
+    const newMetodo = new Metodo({
+      user,
+      name,
+      icon,
+    });
+
+    await newMetodo.save();
+
+    res.json({
+      status:"ok"
+    })
+  
+   
+  });
+
+  router.delete("/metodo", checkAuth, async (req, res) => {
+
+    try{
+      const userId = req.userData._id;
+      const id = req.query.id;
+      
+      const resultado = await Metodo.deleteOne({user:userId,_id:id});
+    
+      return res.json({status:"ok",data: resultado})
+    
+    }
+    catch(error){
+      console.log(error);
+        return res.status(500).json({status:"fail",error:error})
+    }
+  });
+
+
+  module.exports = router;