front presupuesto
This commit is contained in:
@@ -17,4 +17,17 @@ $ npm run start
|
||||
$ npm run generate
|
||||
```
|
||||
|
||||
## ToDo
|
||||
|
||||
### Front
|
||||
|
||||
[ ] Verificación formulario nuevo presupuesto y duplicados
|
||||
[ ] Delete Items presupuesto Front
|
||||
|
||||
### Back
|
||||
|
||||
[ ] API delete items presupuesto
|
||||
[ ] Verificación de nombre presupuesto repetidos
|
||||
|
||||
|
||||
For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org).
|
||||
|
||||
@@ -10,15 +10,9 @@
|
||||
|
||||
<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"
|
||||
v-model="newPresupuesto.nombrePresupuesto"
|
||||
></base-input>
|
||||
<base-button
|
||||
|
||||
|
||||
@@ -3,12 +3,28 @@
|
||||
<card>
|
||||
<div class="row">
|
||||
<base-input class="col-6">
|
||||
<select class="form-control">
|
||||
<option>Presupuesto</option>
|
||||
<option>Presupuesto 2</option>
|
||||
<select
|
||||
class="form-control"
|
||||
@change="onChange()"
|
||||
v-model="selectedPresupuestoName"
|
||||
>
|
||||
<option v-for="presupuesto in presupuestos">
|
||||
{{ presupuesto.nombrePresupuesto }}
|
||||
</option>
|
||||
</select>
|
||||
</base-input>
|
||||
|
||||
<base-button
|
||||
type="danger"
|
||||
icon
|
||||
size="sm"
|
||||
v-if="selectedPresupuesto.nombrePresupuesto !== ''"
|
||||
class="btn-link"
|
||||
@click="deletePresupuesto()"
|
||||
>
|
||||
<i class="el-icon-delete-solid"></i>
|
||||
</base-button>
|
||||
|
||||
<div class="row pull-right pull-buttom">
|
||||
<div class="col-12">
|
||||
<Fpresupuesto
|
||||
@@ -19,11 +35,12 @@
|
||||
</div>
|
||||
</div>
|
||||
</card>
|
||||
<card title="Presupuesto">
|
||||
<card
|
||||
title="Presupuesto"
|
||||
v-if="selectedPresupuesto.nombrePresupuesto !== ''"
|
||||
>
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
|
||||
|
||||
<el-table
|
||||
:data="selectedPresupuesto.datos"
|
||||
border
|
||||
@@ -32,16 +49,16 @@
|
||||
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 prop="tipo" label="Tipo" sortable> </el-TableColumn>
|
||||
|
||||
<el-TableColumn>
|
||||
<div slot-scope="{ row, $index }">
|
||||
|
||||
|
||||
<el-tooltip content="Delete" effect="light">
|
||||
<base-button
|
||||
type="danger"
|
||||
@@ -56,14 +73,12 @@
|
||||
</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 v-model="newItem.valor" type="Number"> </base-input>
|
||||
<base-input>
|
||||
<select class="form-control" v-model="newItem.tipo">
|
||||
<option>Ingreso</option>
|
||||
@@ -71,20 +86,17 @@
|
||||
</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) }}
|
||||
@@ -93,10 +105,13 @@
|
||||
<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>
|
||||
<b
|
||||
>Total:<span :class="[total < 0 ? 'text-danger' : 'text-success']">
|
||||
{{ formatMoneda(total) }}</span
|
||||
></b
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</card>
|
||||
</div>
|
||||
</template>
|
||||
@@ -106,7 +121,6 @@ import { Table, TableColumn } from "element-ui";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
||||
[Table.name]: Table,
|
||||
[TableColumn.name]: TableColumn,
|
||||
},
|
||||
@@ -114,43 +128,83 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
newPresupuesto: {
|
||||
fecha: "",
|
||||
detalle: "",
|
||||
nombrePresupuesto: "",
|
||||
},
|
||||
selectedPresupuesto: {
|
||||
|
||||
_id: "",
|
||||
fecha:"",
|
||||
nombrePresupuesto: "",
|
||||
datos:[]
|
||||
|
||||
datos: [],
|
||||
},
|
||||
selectedPresupuestoName: "",
|
||||
newItem: {
|
||||
_id: "",
|
||||
detalle: "",
|
||||
valor: 0,
|
||||
tipo:"Egreso"
|
||||
|
||||
tipo: "Egreso",
|
||||
},
|
||||
|
||||
presupuestos: [],
|
||||
totalIngresos: 0,
|
||||
totalEgresos: 0,
|
||||
total:0
|
||||
total: 0,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
savePresupuesto() {},
|
||||
savePresupuesto() {
|
||||
const axiosHeader = {
|
||||
headers: {
|
||||
token: this.$store.state.auth.token,
|
||||
},
|
||||
};
|
||||
this.newPresupuesto.nombrePresupuesto = this.newPresupuesto.nombrePresupuesto.trim();
|
||||
const toSend = this.newPresupuesto;
|
||||
console.log(axiosHeader.data);
|
||||
this.$axios
|
||||
.post("/presupuesto", toSend, axiosHeader)
|
||||
.then((res) => {
|
||||
console.log(res.data.status);
|
||||
this.getPresupuesto();
|
||||
})
|
||||
.catch((e) => console.log(e));
|
||||
},
|
||||
addItem() {
|
||||
this.selectedPresupuesto.datos.push(JSON.parse(JSON.stringify(this.newItem)))
|
||||
this.sumItems()
|
||||
//this.selectedPresupuesto.datos.push(JSON.parse(JSON.stringify(this.newItem)))
|
||||
console.log(this.newItem._id);
|
||||
var nameSelected = this.selectedPresupuestoName;
|
||||
console.log(nameSelected);
|
||||
const axiosHeader = {
|
||||
headers: {
|
||||
token: this.$store.state.auth.token,
|
||||
},
|
||||
};
|
||||
const toSend = this.newItem;
|
||||
this.$axios
|
||||
.put("/presupuesto", toSend, axiosHeader)
|
||||
.then((res) => {
|
||||
console.log(res.data.status);
|
||||
this.getPresupuesto();
|
||||
this.selectedPresupuestoName = nameSelected;
|
||||
console.log(this.selectedPresupuestoName);
|
||||
this.selectedPresupuesto = this.presupuestos.find(
|
||||
(x) => x.nombrePresupuesto === this.selectedPresupuestoName
|
||||
);
|
||||
this.newItem._id = this.selectedPresupuesto._id;
|
||||
})
|
||||
.catch((e) => console.log(e));
|
||||
|
||||
this.sumItems();
|
||||
},
|
||||
sumItems() {
|
||||
this.totalIngresos = this.selectedPresupuesto.datos.reduce(
|
||||
(acc, x) => (x.tipo === "Ingreso" ? acc + Number(x.valor) : acc),
|
||||
0
|
||||
);
|
||||
|
||||
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
|
||||
|
||||
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;
|
||||
@@ -165,11 +219,68 @@ export default {
|
||||
return `$ ${num}`;
|
||||
}
|
||||
},
|
||||
getPresupuesto() {
|
||||
const axiosHeader = {
|
||||
headers: {
|
||||
token: this.$store.state.auth.token,
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
this.$axios
|
||||
.get("/presupuesto", axiosHeader)
|
||||
.then((res) => {
|
||||
this.presupuestos=[]
|
||||
if (res.data.data.length) {
|
||||
this.presupuestos = res.data.data;
|
||||
this.selectedPresupuesto = this.presupuestos[0];
|
||||
this.selectedPresupuestoName = this.selectedPresupuesto.nombrePresupuesto;
|
||||
this.newItem._id = this.selectedPresupuesto._id;
|
||||
console.log(this.selectedPresupuesto);
|
||||
this.sumItems();
|
||||
}
|
||||
})
|
||||
.catch((e) => console.log(e));
|
||||
},
|
||||
onChange() {
|
||||
this.selectedPresupuesto = this.presupuestos.find(
|
||||
(x) => x.nombrePresupuesto === this.selectedPresupuestoName
|
||||
);
|
||||
this.newItem._id = this.selectedPresupuesto._id;
|
||||
this.sumItems();
|
||||
},
|
||||
deletePresupuesto() {
|
||||
console.log(this.selectedPresupuesto._id);
|
||||
const axiosHeader = {
|
||||
headers: {
|
||||
token: this.$store.state.auth.token,
|
||||
},
|
||||
params: {
|
||||
id: this.selectedPresupuesto._id,
|
||||
},
|
||||
};
|
||||
this.$axios
|
||||
.delete("/presupuesto", axiosHeader)
|
||||
.then((res) => {
|
||||
console.log(res.data);
|
||||
|
||||
this.selectedPresupuesto = {
|
||||
_id: "",
|
||||
nombrePresupuesto: "",
|
||||
datos: [],
|
||||
}
|
||||
this.selectedPresupuestoName=""
|
||||
this.getPresupuesto();
|
||||
|
||||
})
|
||||
.catch((e) => console.log(e));
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.newPresupuesto.fecha = this.$store.state.fecha;
|
||||
},
|
||||
// this.newPresupuesto.fecha = this.$store.state.fecha;
|
||||
|
||||
this.getPresupuesto();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
1
index.js
1
index.js
@@ -27,6 +27,7 @@ app.use(cors());
|
||||
app.use('/api',require('./routes/users'));
|
||||
app.use('/api',require('./routes/compras'))
|
||||
app.use('/api',require('./routes/ingresos'))
|
||||
app.use('/api',require('./routes/presupuesto'))
|
||||
app.use('/api',require('./routes/categorias'))
|
||||
app.use('/api',require('./routes/metodos_pago'))
|
||||
app.disable('x-powered-by');
|
||||
|
||||
78
routes/presupuesto.js
Normal file
78
routes/presupuesto.js
Normal file
@@ -0,0 +1,78 @@
|
||||
const router = require("express").Router();
|
||||
const presupuesto = require("../models/presupuestoMes").Presupuesto;
|
||||
const itemPresupuesto = require("../models/presupuestoMes").itemPresupuesto;
|
||||
const { checkAuth } = require("../middlewares/authentication");
|
||||
|
||||
|
||||
router.get("/presupuesto", checkAuth, async (req, res) => {
|
||||
var presupuestos;
|
||||
presupuestos = await presupuesto.find({ user: req.userData._id }).sort({
|
||||
date: "desc",
|
||||
});
|
||||
|
||||
return res.send(
|
||||
{
|
||||
status:"ok",
|
||||
data:presupuestos
|
||||
}
|
||||
)
|
||||
});
|
||||
|
||||
router.post("/presupuesto", checkAuth, async (req, res) => {
|
||||
const {nombrePresupuesto} = req.body;
|
||||
const Presupuesto = new presupuesto({
|
||||
nombrePresupuesto:nombrePresupuesto
|
||||
});
|
||||
|
||||
console.log(Presupuesto)
|
||||
Presupuesto.user = req.userData._id;
|
||||
await Presupuesto.save();
|
||||
|
||||
res.json({
|
||||
status:"OK"
|
||||
})
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
router.put("/presupuesto", checkAuth, async (req, res) => {
|
||||
const { _id, detalle, valor, tipo } = req.body;
|
||||
console.log(_id)
|
||||
const presupuesto_edit = await presupuesto.findOne({ _id: _id });
|
||||
const itemP = new itemPresupuesto({detalle,valor,tipo});
|
||||
presupuesto_edit.datos.push(itemP);
|
||||
await presupuesto_edit.save();
|
||||
|
||||
//await presupuesto_edit.updateOne({ fecha, detalle, valor});
|
||||
|
||||
|
||||
|
||||
res.json({
|
||||
status:"OK"
|
||||
})
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
router.delete("/presupuesto", checkAuth, async (req, res) => {
|
||||
|
||||
try{
|
||||
const userId = req.userData._id;
|
||||
const id = req.query.id;
|
||||
|
||||
const resultado = await presupuesto.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;
|
||||
Reference in New Issue
Block a user