front presupuesto
This commit is contained in:
@@ -17,4 +17,17 @@ $ npm run start
|
|||||||
$ npm run generate
|
$ 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).
|
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="" />
|
<img src="img//card-info.png" alt="" />
|
||||||
</template>
|
</template>
|
||||||
<base-input
|
|
||||||
label="Fecha"
|
|
||||||
v-model="newPresupuesto.fecha"
|
|
||||||
type="Date"
|
|
||||||
required
|
|
||||||
></base-input>
|
|
||||||
<base-input
|
<base-input
|
||||||
label="Descripcion"
|
label="Descripcion"
|
||||||
v-model="newPresupuesto.detalle"
|
v-model="newPresupuesto.nombrePresupuesto"
|
||||||
></base-input>
|
></base-input>
|
||||||
<base-button
|
<base-button
|
||||||
|
|
||||||
|
|||||||
@@ -3,12 +3,28 @@
|
|||||||
<card>
|
<card>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<base-input class="col-6">
|
<base-input class="col-6">
|
||||||
<select class="form-control">
|
<select
|
||||||
<option>Presupuesto</option>
|
class="form-control"
|
||||||
<option>Presupuesto 2</option>
|
@change="onChange()"
|
||||||
|
v-model="selectedPresupuestoName"
|
||||||
|
>
|
||||||
|
<option v-for="presupuesto in presupuestos">
|
||||||
|
{{ presupuesto.nombrePresupuesto }}
|
||||||
|
</option>
|
||||||
</select>
|
</select>
|
||||||
</base-input>
|
</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="row pull-right pull-buttom">
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<Fpresupuesto
|
<Fpresupuesto
|
||||||
@@ -19,84 +35,83 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</card>
|
</card>
|
||||||
<card title="Presupuesto">
|
<card
|
||||||
|
title="Presupuesto"
|
||||||
|
v-if="selectedPresupuesto.nombrePresupuesto !== ''"
|
||||||
|
>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-6">
|
<div class="col-6">
|
||||||
|
|
||||||
|
|
||||||
<el-table
|
<el-table
|
||||||
:data="selectedPresupuesto.datos"
|
:data="selectedPresupuesto.datos"
|
||||||
border
|
border
|
||||||
empty-text="No hay items"
|
empty-text="No hay items"
|
||||||
stripe
|
stripe
|
||||||
style="width: 100%"
|
style="width: 100%"
|
||||||
height="300"
|
height="300"
|
||||||
>
|
>
|
||||||
|
<el-TableColumn prop="detalle" label="Detalle" sortable>
|
||||||
<el-TableColumn prop="detalle" label="Detalle" sortable>
|
</el-TableColumn>
|
||||||
</el-TableColumn>
|
|
||||||
<el-TableColumn prop="valor" label="Valor" sortable>
|
|
||||||
</el-TableColumn>
|
|
||||||
|
|
||||||
<el-TableColumn>
|
<el-TableColumn prop="valor" label="Valor" sortable>
|
||||||
<div slot-scope="{ row, $index }">
|
</el-TableColumn>
|
||||||
|
|
||||||
|
|
||||||
<el-tooltip content="Delete" effect="light">
|
|
||||||
<base-button
|
|
||||||
type="danger"
|
|
||||||
icon
|
|
||||||
size="sm"
|
|
||||||
class="btn-link"
|
|
||||||
@click="deleteIngreso(row._id)"
|
|
||||||
>
|
|
||||||
<i class="el-icon-delete-solid"></i>
|
|
||||||
</base-button>
|
|
||||||
</el-tooltip>
|
|
||||||
</div>
|
|
||||||
</el-TableColumn>
|
|
||||||
</el-table>
|
|
||||||
|
|
||||||
|
<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"
|
||||||
|
icon
|
||||||
|
size="sm"
|
||||||
|
class="btn-link"
|
||||||
|
@click="deleteIngreso(row._id)"
|
||||||
|
>
|
||||||
|
<i class="el-icon-delete-solid"></i>
|
||||||
|
</base-button>
|
||||||
|
</el-tooltip>
|
||||||
|
</div>
|
||||||
|
</el-TableColumn>
|
||||||
|
</el-table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-6">
|
<div class="col-6">
|
||||||
<base-input v-model="newItem.detalle" label="Descripción">
|
<base-input v-model="newItem.detalle" label="Descripción">
|
||||||
</base-input>
|
</base-input>
|
||||||
<base-input v-model="newItem.valor" type="Number">
|
<base-input v-model="newItem.valor" type="Number"> </base-input>
|
||||||
|
<base-input>
|
||||||
|
<select class="form-control" v-model="newItem.tipo">
|
||||||
|
<option>Ingreso</option>
|
||||||
|
<option>Egreso</option>
|
||||||
|
</select>
|
||||||
</base-input>
|
</base-input>
|
||||||
<base-input>
|
<base-button
|
||||||
<select class="form-control" v-model="newItem.tipo">
|
|
||||||
<option>Ingreso</option>
|
|
||||||
<option>Egreso</option>
|
|
||||||
</select>
|
|
||||||
</base-input>
|
|
||||||
<base-button
|
|
||||||
|
|
||||||
type="info"
|
type="info"
|
||||||
class="mb-3 col-12"
|
class="mb-3 col-12"
|
||||||
size="lg"
|
size="lg"
|
||||||
@click="addItem()"
|
@click="addItem()"
|
||||||
>Guardar</base-button
|
>Guardar</base-button
|
||||||
>
|
>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</card>
|
</card>
|
||||||
|
|
||||||
<card>
|
<card>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-4">
|
<div class="col-4">
|
||||||
<b>Ingresos: </b> {{formatMoneda(totalIngresos)}}
|
<b>Ingresos: </b> {{ formatMoneda(totalIngresos) }}
|
||||||
</div>
|
</div>
|
||||||
<div class="col-4">
|
<div class="col-4">
|
||||||
<b>Egreso:</b> <span>{{formatMoneda(totalEgresos)}} </span>
|
<b>Egreso:</b> <span>{{ formatMoneda(totalEgresos) }} </span>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-4">
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</card>
|
</card>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -105,54 +120,93 @@
|
|||||||
import { Table, TableColumn } from "element-ui";
|
import { Table, TableColumn } from "element-ui";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
|
|
||||||
[Table.name]: Table,
|
[Table.name]: Table,
|
||||||
[TableColumn.name]: TableColumn,
|
[TableColumn.name]: TableColumn,
|
||||||
},
|
},
|
||||||
middleware: "authenticated",
|
middleware: "authenticated",
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
newPresupuesto: {
|
newPresupuesto: {
|
||||||
fecha: "",
|
nombrePresupuesto: "",
|
||||||
detalle: "",
|
|
||||||
},
|
},
|
||||||
selectedPresupuesto:{
|
selectedPresupuesto: {
|
||||||
|
_id: "",
|
||||||
_id:"",
|
nombrePresupuesto: "",
|
||||||
fecha:"",
|
datos: [],
|
||||||
nombrePresupuesto:"",
|
|
||||||
datos:[]
|
|
||||||
|
|
||||||
},
|
},
|
||||||
|
selectedPresupuestoName: "",
|
||||||
newItem: {
|
newItem: {
|
||||||
detalle:"",
|
_id: "",
|
||||||
|
detalle: "",
|
||||||
valor: 0,
|
valor: 0,
|
||||||
tipo:"Egreso"
|
tipo: "Egreso",
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
presupuestos: [],
|
presupuestos: [],
|
||||||
totalIngresos:0,
|
totalIngresos: 0,
|
||||||
totalEgresos:0,
|
totalEgresos: 0,
|
||||||
total:0
|
total: 0,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
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() {
|
addItem() {
|
||||||
this.selectedPresupuesto.datos.push(JSON.parse(JSON.stringify(this.newItem)))
|
//this.selectedPresupuesto.datos.push(JSON.parse(JSON.stringify(this.newItem)))
|
||||||
this.sumItems()
|
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(){
|
sumItems() {
|
||||||
|
this.totalIngresos = this.selectedPresupuesto.datos.reduce(
|
||||||
this.totalIngresos=this.selectedPresupuesto.datos.reduce((acc,x) => x.tipo ==="Ingreso"?acc + Number(x.valor):acc,0)
|
(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) {
|
formatMoneda(dato) {
|
||||||
var num = dato;
|
var num = dato;
|
||||||
if (!isNaN(num)) {
|
if (!isNaN(num)) {
|
||||||
num = Math.abs(num)
|
num = Math.abs(num)
|
||||||
@@ -165,11 +219,68 @@ export default {
|
|||||||
return `$ ${num}`;
|
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() {
|
mounted() {
|
||||||
this.newPresupuesto.fecha = this.$store.state.fecha;
|
// this.newPresupuesto.fecha = this.$store.state.fecha;
|
||||||
},
|
|
||||||
|
|
||||||
|
this.getPresupuesto();
|
||||||
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</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/users'));
|
||||||
app.use('/api',require('./routes/compras'))
|
app.use('/api',require('./routes/compras'))
|
||||||
app.use('/api',require('./routes/ingresos'))
|
app.use('/api',require('./routes/ingresos'))
|
||||||
|
app.use('/api',require('./routes/presupuesto'))
|
||||||
app.use('/api',require('./routes/categorias'))
|
app.use('/api',require('./routes/categorias'))
|
||||||
app.use('/api',require('./routes/metodos_pago'))
|
app.use('/api',require('./routes/metodos_pago'))
|
||||||
app.disable('x-powered-by');
|
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