vista categorias y metodos de pago
This commit is contained in:
@@ -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>
|
||||
|
||||
305
APP/pages/configuracion.vue
Normal file
305
APP/pages/configuracion.vue
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user