front presupuesto

This commit is contained in:
2021-05-12 22:36:30 -05:00
parent e3abbfd0dc
commit d14bf4a220
5 changed files with 288 additions and 91 deletions

View File

@@ -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).

View File

@@ -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

View File

@@ -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>

View File

@@ -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
View 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;