Merge pull request 'adminUI' (#14) from adminUI into master

Reviewed-on: #14
This commit is contained in:
Alejandro Tasistro 2022-11-13 21:22:13 -03:00
commit eea1f2c3a2
14 changed files with 2333 additions and 862 deletions

2
dev-start Executable file
View File

@ -0,0 +1,2 @@
#!/usr/bin/bash
docker-compose up -d && docker-compose exec app npm run watch

2516
public/js/app.js vendored

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,97 @@
<template>
<div class="container is-max-widescreen is-max-desktop animate__animated" :class="animation">
<pedidos-admin-tabs-secciones></pedidos-admin-tabs-secciones>
<div class="block" id="pedidos-seccion"
:class="seccionActiva === 'pedidos-seccion' ? 'is-active' : 'is-hidden'">
<div class="block" id="pedidos-tabla-y-dropdown" v-show="hayPedidos">
<pedidos-admin-dropdown-descargar
:gdc="gdc">
</pedidos-admin-dropdown-descargar>
<pedidos-admin-tabla-pedidos
:pedidos="pedidos">
</pedidos-admin-tabla-pedidos>
</div>
<p class="has-text-centered" v-show="!hayPedidos">
Todavía no hay ningún pedido para administrar.
</p>
</div>
<div class="block" id="bonos-seccion"
:class="seccionActiva === 'bonos-seccion' ? 'is-active' : 'is-hidden'">
<pedidos-admin-tabla-bonos v-show="hayAprobados"
:pedidos="pedidos">
</pedidos-admin-tabla-bonos>
<p class="has-text-centered" v-show="!hayAprobados">
Todavía no hay pedidos aprobados.
</p>
</div>
</div>
</template>
<script>
import PedidosAdminTabsSecciones from './PedidosAdminTabsSecciones.vue';
import PedidosAdminDropdownDescargar from "./PedidosAdminDropdownDescargar.vue";
import PedidosAdminTablaBonos from './PedidosAdminTablaBonos.vue';
import PedidosAdminTablaPedidos from "./PedidosAdminTablaPedidos.vue";
export default {
name: "PedidosAdminBody",
components: {
PedidosAdminTabsSecciones,
PedidosAdminDropdownDescargar,
PedidosAdminTablaPedidos,
PedidosAdminTablaBonos,
},
data() {
return {
gdc: 0,
pedidos: [],
tabActiva: "pedidos",
seccionActiva: "pedidos-seccion"
}
},
computed: {
hayPedidos: function() {
return this.pedidos.length !== 0
},
hayAprobados: function() {
return this.pedidos.filter(p => p.aprobado).length > 0
}
},
methods: {
fetchPedidos() {
axios.get("/api/subpedidos/resources", {
params: {
grupo_de_compra: this.gdc
}})
.then(response => {
this.pedidos = response.data.data
});
},
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;
},
setSeccionActiva(tabId) {
this.tabActiva = tabId;
this.seccionActiva = tabId + "-seccion";
}
},
mounted() {
Event.$on('sync-aprobacion', (_) => {
this.fetchPedidos();
});
axios.get("/admin/obtener_sesion").then(response => {
this.gdc = response.data.gdc;
this.fetchPedidos();
});
}
}
</script>
<style>
</style>

View File

@ -0,0 +1,54 @@
<template>
<div class="buttons is-right">
<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>
</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>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "PedidosAdminDropdownDescargar",
props: {
gdc: {
type: Number,
required: true
},
},
data() {
return {
dropdownActivo: false
}
},
computed: {
hayAprobados: function() {
return this.$parent.hayAprobados;
}
},
}
</script>
<style>
</style>

View File

@ -0,0 +1,22 @@
<template>
<tr>
<td>{{ nombre }}</td>
<td>{{ cantidad }}</td>
<td>${{ total }}</td>
</tr>
</template>
<script>
export default {
name: "PedidosAdminFilaBono",
props: {
nombre: String,
cantidad: Number,
total: Number
}
}
</script>
<style scoped>
</style>

View File

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

View File

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

View File

@ -0,0 +1,126 @@
<template>
<div class="block">
<div class="block" v-show="!hayBonos">
<p class="has-text-centered">
Todavía no hay bonos pedidos.
</p>
</div>
<div class="block">
<table class="table is-fullwidth is-striped is-bordered">
<thead>
<tr>
<th><abbr title="Bono">Bono</abbr></th>
<th class="is-1"><abbr title="Cantidad">Cantidad</abbr></th>
<th><abbr title="Total a Pagar">Total $</abbr></th>
</tr>
</thead>
<tfoot>
<tr v-show="hayBonos">
<th></th>
<th>Total bonos</th>
<th>$ {{ totalBonos }}</th>
</tr>
<tr>
<td> Bonos de Transporte </td>
<td> {{ bonosDeTransporteAprobados }} </td>
<td> $ {{ bonosDeTransporteAprobados * 15 }} </td>
</tr>
</tfoot>
<tbody v-show="hayBonos">
<pedidos-admin-fila-bono v-for="(bono, i) in bonosCantidadesTotales" :key="i"
:nombre="bono.nombre"
:cantidad="bono.cantidad"
:total="bono.total">
</pedidos-admin-fila-bono>
</tbody>
</table>
</div>
</div>
</template>
<script>
import PedidosAdminFilaBonoVue from './PedidosAdminFilaBono.vue'
export default {
name: "PedidosAdminTablaBonos",
components: {
PedidosAdminFilaBonoVue
},
props: {
pedidos: {
type: Array,
required: true
}
},
computed: {
hayPedidos: function() {
return this.pedidos.length !== 0
},
hayAprobados: function() {
return this.pedidosAprobados.length > 0
},
pedidosAprobados: function() {
return this.pedidos.filter(p => p.aprobado);
},
bonosDeTransporteAprobados: function() {
let bonosTransportePorPedido = this.pedidosAprobados.map(p => p.bonos_de_transporte);
let cant = 0;
bonosTransportePorPedido.forEach(bt => cant += bt);
return cant
},
bonosCantidadesTotales: function() {
let nombres = [];
let cantidades = [];
let precios = [];
let bonosAprobadosPorPedido = this.bonosPorPedido(this.pedidosAprobados);
bonosAprobadosPorPedido.forEach(bs => {
bs.forEach(b => {
if (!nombres.includes(b.nombre)) {
nombres.push(b.nombre);
cantidades.push(b.pivot.cantidad);
precios.push(b.precio);
} else {
for (let i = 0; i < nombres.length; i++) {
if (b.nombre === nombres[i]) {
cantidades[i] += b.pivot.cantidad;
}
}
}
});
});
let bonosAprobados = [];
for (let i = 0; i < nombres.length; i++) {
let bono = {
nombre: nombres[i],
cantidad: cantidades[i],
total: cantidades[i] * precios[i]
};
bonosAprobados.push(bono);
}
return bonosAprobados;
},
totalBonos: function() {
let total = 0;
let bonos = this.bonosCantidadesTotales;
bonos.forEach(b => {
total += b.total;
});
return total;
},
hayBonos: function() {
return this.totalBonos !== 0;
}
},
methods: {
bonosPorPedido(pedidosArray) {
return pedidosArray.map(p => p.productos.filter(pr => pr.bono))
}
},
}
</script>
<style>
</style>

View File

@ -0,0 +1,53 @@
<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>
import PedidosAdminFilaPedidoVue from './PedidosAdminFilaPedido.vue';
export default {
name: "PedidosAdminTablaPedidos",
components: {
PedidosAdminFilaPedidoVue
},
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>

View File

@ -0,0 +1,62 @@
<template>
<div class="block">
<div class="tabs is-boxed" id="tabs">
<ul class="has-bottom-line">
<li v-for="(tab, index) in tabs" class="is-size-6"
:key="index"
:id="tab.id + '-tab'"
:class="{'is-active': tab.id === tabActiva}">
<a @click="setTabActiva(tab.id)">
<span>
{{ tab.nombre }}
</span>
</a>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: "PedidosAdminTabsSecciones",
data() {
return {
tabActiva: "pedidos",
tabs: [
{
id: "pedidos",
nombre: "Pedidos"
},
{
id: "bonos",
nombre: "Bonos"
}
]
}
},
methods: {
setTabActiva(tabId) {
this.$parent.setSeccionActiva(tabId);
this.tabActiva = tabId
}
}
}
</script>
<style lang="scss" scoped>
@import 'bulma';
hr {
border: none;
height: 1px;
}
.has-bottom-line {
border-bottom-color: #dbdbdb !important;
border-bottom-style: solid !important;
border-bottom-width: 1px !important;
}
.tabs li.is-active a {
border-bottom-color: #e3342f;
color: #e3342f;
}
</style>

View File

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

View File

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

View File

@ -1,99 +0,0 @@
<template>
<div class="container is-max-widescreen is-max-desktop animate__animated" :class="animation" v-show="!init">
<div class="buttons is-right">
<a class="button is-success" :href="hayAprobados ? '/admin/exportar-pedido-a-csv/'+gdc : '#'" :disabled="!hayAprobados">
<span>
Exportar pedido barrial
</span>
<span class="icon is-small">
<i class="fas fa-download"></i>
</span>
</a>
<a class="button is-info" :href="hayAprobados ? '/admin/exportar-planillas-a-pdf/'+gdc : '#'" :disabled="!hayAprobados">
<span>
Imprimir Planillas
</span>
<span class="icon is-small">
<i class="fas fa-print"></i>
</span>
</a>
</div>
<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">
Todavía no hay ningún pedido para administrar.
</p>
</div>
</template>
<script>
import SubpedidoRow from "./SubpedidoRow";
export default {
name: "SubpedidosGdc",
components: {SubpedidoRow},
data() {
return {
gdc: 0,
subpedidos: []
}
},
computed: {
hayAprobados: function() {
return this.subpedidos.filter(sp => sp.aprobado).length > 0
}
},
beforeCreate() {
axios.get("/admin/obtener_sesion").then(response => {
this.gdc = response.data.gdc;
this.fetchSubpedidos();
});
},
methods: {
fetchSubpedidos() {
axios.get("/api/subpedidos/resources", {
params: {
grupo_de_compra: this.gdc
}
}).then(response => {
this.subpedidos = response.data.data
});
},
totalAprobados() {
let suma = 0;
let aprobados = this.subpedidos.filter(sp => sp.aprobado);
for (let i = 0; i < aprobados.length; i++) {
suma += parseFloat(aprobados[i].total.replace(/,/g, ''));
}
return suma;
}
},
mounted() {
Event.$on('sync-aprobacion', (_) => {
this.fetchSubpedidos();
})
}
}
</script>
<style>
</style>

View File

@ -1,11 +1,13 @@
@extends('layouts.app')
@section('content')
<subpedidos-gdc></subpedidos-gdc>
<pedidos-admin-body></pedidos-admin-body>
@endsection
<script>
import SubpedidosGdc from "../../js/components/SubpedidosGdc";
import PedidosAdminBody from "../../js/components/PedidosAdminBody.vue";
export default {
components: {SubpedidosGdc}
components: {
PedidosAdminBody
}
}
</script>