Pequeño refactor y cambio de nombre de componentes de admin pedidos
This commit is contained in:
Ale
parent
f572b5a6bc
commit
323b77f6dc
File diff suppressed because one or more lines are too long
|
|
@ -1,73 +1,59 @@
|
|||
<template>
|
||||
<div class="container is-max-widescreen is-max-desktop animate__animated" :class="animation" v-show="!init">
|
||||
<pedidos-admin-dropdown-descargar :gdc="gdc"></pedidos-admin-dropdown-descargar>
|
||||
<table v-show="this.subpedidos.length !== 0" class="table is-fullwidth is-striped is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Núcleo</th>
|
||||
<th><abbr title="Total a Pagar">Total $</abbr></th>
|
||||
<th class="is-1"><abbr title="Aprobacion">Aprobación</abbr></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Total de los aprobados</th>
|
||||
<th>$ {{ totalAprobados() }}</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<subpedido-row v-for="subpedido in this.subpedidos"
|
||||
:subpedido="subpedido" :key="subpedido.id">
|
||||
</subpedido-row>
|
||||
</tbody>
|
||||
</table>
|
||||
<p class="has-text-centered" v-show="this.subpedidos.length === 0">
|
||||
<pedidos-admin-dropdown-descargar v-show="hayPedidos"
|
||||
:gdc="gdc">
|
||||
</pedidos-admin-dropdown-descargar>
|
||||
<pedidos-admin-tabla-pedidos v-show="hayPedidos"
|
||||
:pedidos="pedidos">
|
||||
</pedidos-admin-tabla-pedidos>
|
||||
<p class="has-text-centered" v-show="!hayPedidos">
|
||||
Todavía no hay ningún pedido para administrar.
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SubpedidoRow from "./SubpedidoRow";
|
||||
import PedidosAdminDropdownDescargar from "./PedidosAdminDropdownDescargar.vue";
|
||||
import PedidosAdminTablaPedidos from "./PedidosAdminTablaPedidos.vue";
|
||||
export default {
|
||||
name: "PedidosAdminBody",
|
||||
components: {
|
||||
SubpedidoRow,
|
||||
PedidosAdminDropdownDescargar
|
||||
PedidosAdminDropdownDescargar,
|
||||
PedidosAdminTablaPedidos
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
gdc: 0,
|
||||
subpedidos: [],
|
||||
dropdownActivo: false
|
||||
pedidos: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
hayPedidos: function() {
|
||||
return this.pedidos.length !== 0
|
||||
},
|
||||
hayAprobados: function() {
|
||||
return this.subpedidos.filter(sp => sp.aprobado).length > 0
|
||||
return this.pedidos.filter(p => p.aprobado).length > 0
|
||||
}
|
||||
},
|
||||
beforeCreate() {
|
||||
axios.get("/admin/obtener_sesion").then(response => {
|
||||
this.gdc = response.data.gdc;
|
||||
this.fetchSubpedidos();
|
||||
this.fetchPedidos();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
fetchSubpedidos() {
|
||||
fetchPedidos() {
|
||||
axios.get("/api/subpedidos/resources", {
|
||||
params: {
|
||||
grupo_de_compra: this.gdc
|
||||
}
|
||||
}).then(response => {
|
||||
this.subpedidos = response.data.data
|
||||
});
|
||||
params: {
|
||||
grupo_de_compra: this.gdc
|
||||
}})
|
||||
.then(response => {
|
||||
this.pedidos = response.data.data
|
||||
});
|
||||
},
|
||||
totalAprobados() {
|
||||
let suma = 0;
|
||||
let aprobados = this.subpedidos.filter(sp => sp.aprobado);
|
||||
let aprobados = this.pedidos.filter(p => p.aprobado);
|
||||
for (let i = 0; i < aprobados.length; i++) {
|
||||
suma += parseFloat(aprobados[i].total.replace(/,/g, ''));
|
||||
}
|
||||
|
|
@ -76,7 +62,7 @@ export default {
|
|||
},
|
||||
mounted() {
|
||||
Event.$on('sync-aprobacion', (_) => {
|
||||
this.fetchSubpedidos();
|
||||
this.fetchPedidos();
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,25 +1,25 @@
|
|||
<template>
|
||||
<div class="buttons is-right">
|
||||
<div class="dropdown" :class="{'is-active': dropdownActivo}" @mouseleave="dropdownActivo = false">
|
||||
<div class="dropdown" :class="{'is-active': dropdownActivo}" @mouseleave="dropdownActivo = false">
|
||||
<div class="dropdown-trigger">
|
||||
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu" :disabled="!hayAprobados" @click="dropdownActivo = !dropdownActivo">
|
||||
<span class="icon is-small">
|
||||
<i class="fas fa-download"></i>
|
||||
</span>
|
||||
<span>Descargar pedido</span>
|
||||
<span class="icon is-small">
|
||||
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
||||
</span>
|
||||
<span class="icon is-small">
|
||||
<i class="fas fa-download"></i>
|
||||
</span>
|
||||
<span>Descargar pedido</span>
|
||||
<span class="icon is-small">
|
||||
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="dropdown-menu" id="dropdown-menu" role="menu">
|
||||
<div class="dropdown-content">
|
||||
<a :href="'/admin/exportar-planillas-a-pdf/' + gdc" class="dropdown-item">
|
||||
Exportar planillas a pdf
|
||||
</a>
|
||||
<a :href="'/admin/exportar-pedido-a-csv/' + gdc" class="dropdown-item">
|
||||
Exportar pedido a csv
|
||||
</a>
|
||||
<a :href="'/admin/exportar-planillas-a-pdf/' + gdc" class="dropdown-item">
|
||||
Exportar planillas a pdf
|
||||
</a>
|
||||
<a :href="'/admin/exportar-pedido-a-csv/' + gdc" class="dropdown-item">
|
||||
Exportar pedido a csv
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -37,7 +37,7 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
dropdownActivo: this.$parent.dropdownActivo
|
||||
dropdownActivo: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,35 @@
|
|||
<template>
|
||||
<tr>
|
||||
<td>{{ pedido.nombre }}</td>
|
||||
<td>{{ pedido.total }}</td>
|
||||
<td>
|
||||
<pedidos-admin-switch-aprobacion
|
||||
:pedido="pedido">
|
||||
</pedidos-admin-switch-aprobacion>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PedidosAdminSwitchAprobacion from './PedidosAdminSwitchAprobacion.vue';
|
||||
export default {
|
||||
name: "PedidosAdminFilaPedido",
|
||||
components: {
|
||||
PedidosAdminSwitchAprobacion
|
||||
},
|
||||
props: {
|
||||
pedido: Object
|
||||
},
|
||||
mounted() {
|
||||
Event.$on('sync-aprobacion', (unPedido) => {
|
||||
if (this.pedido.id === unPedido.id) {
|
||||
this.pedido = unPedido
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<template>
|
||||
<div class="field">
|
||||
<input type="checkbox" name="switchRoundedSuccess" class="switch is-rounded is-success"
|
||||
:id="'switch'+this.pedido.id"
|
||||
:checked="pedido.aprobado"
|
||||
@change="toggleAprobacion">
|
||||
<label :for="'switch'+this.pedido.id">
|
||||
<span class="is-hidden-mobile">{{ mensaje }}</span>
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "PedidosAdminSwitchAprobacion",
|
||||
props: {
|
||||
pedido: Object
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
aprobado: this.pedido.aprobado
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
mensaje: function () {
|
||||
return this.aprobado ? "Aprobado" : "No aprobado"
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleAprobacion() {
|
||||
Event.$emit('aprobacion-subpedido', this.pedido.id, !this.aprobado);
|
||||
this.aprobado = !this.aprobado
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
Event.$on('sync-aprobacion', (unPedido) => {
|
||||
if (this.pedido.id === unPedido.id) {
|
||||
this.pedido = unPedido
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<template>
|
||||
<table class="table is-fullwidth is-striped is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Núcleo</th>
|
||||
<th><abbr title="Total a Pagar">Total $</abbr></th>
|
||||
<th class="is-1"><abbr title="Aprobacion">Aprobación</abbr></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Total de los aprobados</th>
|
||||
<th>$ {{ totalAprobados() }}</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<pedidos-admin-fila-pedido v-for="pedido in this.pedidos"
|
||||
:pedido="pedido" :key="pedido.id">
|
||||
</pedidos-admin-fila-pedido>
|
||||
</tbody>
|
||||
</table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "PedidosAdminTablaPedidos",
|
||||
props: {
|
||||
pedidos: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
totalAprobados() {
|
||||
let suma = 0;
|
||||
let aprobados = this.pedidos.filter(p => p.aprobado);
|
||||
for (let i = 0; i < aprobados.length; i++) {
|
||||
suma += parseFloat(aprobados[i].total.replace(/,/g, ''));
|
||||
}
|
||||
return suma;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
<template>
|
||||
<tr>
|
||||
<td>{{ subpedido.nombre }}</td>
|
||||
<td>{{ subpedido.total }}</td>
|
||||
<td><boton-admin-subpedido-row :subpedido="subpedido"></boton-admin-subpedido-row></td>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BotonAdminSubpedidoRow from "./SubpedidoRowBotonAdmin";
|
||||
export default {
|
||||
name: "SubpedidoRow",
|
||||
components: {BotonAdminSubpedidoRow},
|
||||
props: {
|
||||
subpedido: Object
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pedido: this.subpedido
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
Event.$on('sync-aprobacion', (unSubpedido) => {
|
||||
if (this.pedido.id === unSubpedido.id) {
|
||||
this.pedido = unSubpedido
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
<template>
|
||||
<div class="field">
|
||||
<input :id="'switch'+this.pedido.id" type="checkbox" name="switchRoundedSuccess" class="switch is-rounded is-success" :checked="pedido.aprobado" @change="toggleAprobacion">
|
||||
<label :for="'switch'+this.pedido.id"><span class="is-hidden-mobile">{{ mensaje }}</span></label>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "BotonAdminSubpedidoRow",
|
||||
props: {'subpedido': Object},
|
||||
data() {
|
||||
return {
|
||||
pedido: this.subpedido
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
mensaje: function () {
|
||||
return this.pedido.aprobado ? "Aprobado" : "No aprobado"
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleAprobacion() {
|
||||
this.aprobado = !this.aprobado;
|
||||
Event.$emit('aprobacion-subpedido', this.pedido.id, this.aprobado);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
Event.$on('sync-aprobacion', (unSubpedido) => {
|
||||
if (this.pedido.id === unSubpedido.id) {
|
||||
this.pedido = unSubpedido
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue