From 3e9e50e2c3499dff7f950eb9b73b221873f6ba27 Mon Sep 17 00:00:00 2001
From: martin chaparro <mdchaparror@gmail.com>
Date: Sun, 25 Apr 2021 23:20:01 -0500
Subject: [PATCH] vista categorias y metodos de pago

---
 APP/components/Formularios/Fcompras.vue |   4 +-
 APP/layouts/default.vue                 |  12 +-
 APP/pages/compras.vue                   |  43 ++--
 APP/pages/configuracion.vue             | 305 ++++++++++++++++++++++++
 APP/store/index.js                      |   4 +
 index.js                                |   2 +
 models/{categorias.js => categoria.js}  |   3 +-
 models/metodo.js                        |  10 +
 routes/categorias.js                    |  64 +++++
 routes/metodos_pago.js                  |  64 +++++
 10 files changed, 484 insertions(+), 27 deletions(-)
 create mode 100644 APP/pages/configuracion.vue
 rename models/{categorias.js => categoria.js} (50%)
 create mode 100755 models/metodo.js
 create mode 100644 routes/categorias.js
 create mode 100644 routes/metodos_pago.js

diff --git a/APP/components/Formularios/Fcompras.vue b/APP/components/Formularios/Fcompras.vue
index eb9b2c5..0c22464 100644
--- a/APP/components/Formularios/Fcompras.vue
+++ b/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>
diff --git a/APP/layouts/default.vue b/APP/layouts/default.vue
index cf89550..5c5e391 100644
--- a/APP/layouts/default.vue
+++ b/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>
diff --git a/APP/pages/compras.vue b/APP/pages/compras.vue
index b901746..7ec3010 100644
--- a/APP/pages/compras.vue
+++ b/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>
diff --git a/APP/pages/configuracion.vue b/APP/pages/configuracion.vue
new file mode 100644
index 0000000..0672d06
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/APP/store/index.js b/APP/store/index.js
index fc04ede..1436091 100644
--- a/APP/store/index.js
+++ b/APP/store/index.js
@@ -19,6 +19,10 @@ export const state = () => ({
     setCategorias(state, categorias) {
       state.categorias = categorias;
     },
+
+    setMetodos(state, metodos) {
+      state.metodos_de_pago = metodos;
+    },
   
  
   
diff --git a/index.js b/index.js
index 88da67b..6447467 100644
--- a/index.js
+++ b/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')))
diff --git a/models/categorias.js b/models/categoria.js
similarity index 50%
rename from models/categorias.js
rename to models/categoria.js
index 7406f3d..47a0a76 100755
--- a/models/categorias.js
+++ b/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}
         
 });
diff --git a/models/metodo.js b/models/metodo.js
new file mode 100755
index 0000000..5cf8050
--- /dev/null
+++ b/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);
\ No newline at end of file
diff --git a/routes/categorias.js b/routes/categorias.js
new file mode 100644
index 0000000..74d1530
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/routes/metodos_pago.js b/routes/metodos_pago.js
new file mode 100644
index 0000000..09be709
--- /dev/null
+++ b/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;
\ No newline at end of file