refactor de chismosa
This commit is contained in:
parent
daa998c89e
commit
70aaadd901
|
|
@ -5,6 +5,7 @@
|
|||
*/
|
||||
import axios from 'axios';
|
||||
import animate from 'animate.css';
|
||||
import Vue from 'vue';
|
||||
window.Vue = require('vue');
|
||||
window.Event = new Vue();
|
||||
window.axios = axios;
|
||||
|
|
@ -17,32 +18,74 @@ window.bulmaToast = require('bulma-toast');
|
|||
*
|
||||
* Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
|
||||
*/
|
||||
|
||||
const files = require.context('./', true, /\.vue$/i)
|
||||
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
|
||||
|
||||
/**
|
||||
* Global data
|
||||
* Constants
|
||||
*/
|
||||
Vue.prototype.$gdc = null
|
||||
Vue.prototype.$pedido =
|
||||
{id: null, nombre: null, grupo_de_compra_id: null, created_at: null, updated_at: null}
|
||||
Vue.prototype.$rootMiga =
|
||||
{nombre: "Categorías", href: "/productos"}
|
||||
|
||||
Vue.prototype.$rootMiga = {
|
||||
nombre: "Categorías",
|
||||
href: "/productos"
|
||||
}
|
||||
/**
|
||||
* Global methods
|
||||
*/
|
||||
Vue.prototype.$settearProducto =
|
||||
function(cantidad, id) { Event.$emit("sync-subpedido", this.cant, this.producto.id) }
|
||||
Vue.prototype.$settearProducto = function(cantidad, id) {
|
||||
Event.$emit("sync-subpedido", this.cant, this.producto.id)
|
||||
}
|
||||
Vue.prototype.$toast = function(mensaje) {
|
||||
return window.bulmaToast.toast({
|
||||
message: mensaje,
|
||||
duration: 1000,
|
||||
type: 'is-danger',
|
||||
position: 'bottom-center',
|
||||
animate: { in: 'fadeIn', out: 'fadeOut' }
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Next, we will create a fresh Vue application instance and attach it to
|
||||
* the page. Then, you may begin adding components to this application
|
||||
* or customize the JavaScript scaffolding to fit your unique needs.
|
||||
*/
|
||||
|
||||
const app = new Vue({
|
||||
el: '#root'
|
||||
el: '#root',
|
||||
data() {
|
||||
return {
|
||||
gdc: null,
|
||||
pedido: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
Event.$on('obtener-sesion', () => {
|
||||
axios.get('/subpedidos/obtener_sesion')
|
||||
.then(response => {
|
||||
this.pedido = response.data.subpedido.id
|
||||
axios.get('/api/subpedidos/' + this.pedido)
|
||||
.then(response => {
|
||||
this.pedido = response.data.data
|
||||
this.gdc = this.pedido.grupo_de_compra.id
|
||||
})
|
||||
})
|
||||
})
|
||||
Event.$on('sync-subpedido', (cantidad, id) => {
|
||||
axios.post("/api/subpedidos/" + this.pedido.id + "/sync", {
|
||||
cantidad: cantidad,
|
||||
producto_id: id
|
||||
}).then((response) => {
|
||||
this.pedido = response.data.data
|
||||
this.$toast('Pedido actualizado exitosamente')
|
||||
});
|
||||
});
|
||||
Event.$on('aprobacion-subpedido', (subpedidoId, aprobado) => {
|
||||
axios.post("/api/admin/subpedidos/" + subpedidoId + "/aprobacion", {
|
||||
aprobacion: aprobado
|
||||
}).then((response) => {
|
||||
Event.$emit('sync-aprobacion', response.data.data);
|
||||
this.$toast('Pedido ' + (aprobado ? 'aprobado' : 'desaprobado') + ' exitosamente')
|
||||
})
|
||||
})
|
||||
Event.$emit('obtener-sesion')
|
||||
},
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="container table-container chismosa-container is-max-widescreen is-max-desktop animate__animated" :class="animation" v-show="!init">
|
||||
<table v-show="this.subpedido.productos.length != 0" class="table is-fullwidth is-striped is-bordered">
|
||||
<div>
|
||||
<table v-show="productos.length != 0" class="chismosa-tabla table is-narrow is-striped is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Producto</th>
|
||||
|
|
@ -11,26 +11,35 @@
|
|||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th><abbr title="Bonos Solidarios">B. Solidarios</abbr></th>
|
||||
<th>{{ cantidadBonos }}</th>
|
||||
<th>{{ totalBonos }}</th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><abbr title="Bonos de Transporte">B. Transporte</abbr></th>
|
||||
<th>{{ this.subpedido.bonos_de_transporte }}</th>
|
||||
<th>{{ this.subpedido.subtotal_bonos_de_transporte }}</th>
|
||||
<th>{{ cantidadBonosDeTransporte }}</th>
|
||||
<th>{{ totalBonosDeTransporte }}</th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Total total</th>
|
||||
<th></th>
|
||||
<th>{{ this.subpedido.total }}</th>
|
||||
<th>{{ total }}</th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<producto-row v-for="producto in this.subpedido.productos" :producto="producto" :key="producto.id"></producto-row>
|
||||
<producto-row v-for="producto in productos" :producto="producto" :key="producto.id"></producto-row>
|
||||
</tbody>
|
||||
</table>
|
||||
<p class="has-text-centered" v-show="this.subpedido.productos.length == 0">Compa, todavía no agregaste nada a la chismosa.</p>
|
||||
<p class="has-text-centered" v-show="productos.length == 0">
|
||||
Compa, todavía no agregaste nada a la chismosa.
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -38,55 +47,36 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
subpedido: {
|
||||
productos:[]
|
||||
},
|
||||
init: true,
|
||||
visible: false
|
||||
subpedido: this.$root.pedido
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
animation: function() {
|
||||
return this.visible ? "animate__slideInDown" : "animate__slideOutUp";
|
||||
productos: function() {
|
||||
return this.$root.pedido.productos
|
||||
},
|
||||
cantidadBonosDeTransporte: function() {
|
||||
return this.$root.pedido.subtotal_bonos_de_transporte / 15
|
||||
},
|
||||
totalBonosDeTransporte: function() {
|
||||
return this.$root.pedido.subtotal_bonos_de_transporte
|
||||
},
|
||||
cantidadBonos: function() {
|
||||
return this.$root.pedido.subtotal_bonos / 20
|
||||
},
|
||||
totalBonos: function() {
|
||||
return this.$root.pedido.subtotal_bonos
|
||||
},
|
||||
total: function() {
|
||||
return this.$root.pedido.total
|
||||
}
|
||||
},
|
||||
beforeCreate() {
|
||||
axios.get("/subpedidos/obtener_sesion").then(response => {
|
||||
this.subpedido = response.data.subpedido;
|
||||
this.fetchSubpedido();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
fetchSubpedido() {
|
||||
axios.get("/api/subpedidos/" + this.subpedido.id)
|
||||
.then(response => {
|
||||
this.subpedido = response.data.data;
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
Event.$on('sync-chismosa', (subpedido) => {
|
||||
this.subpedido = subpedido;
|
||||
});
|
||||
Event.$on('toggle-chismosa', () => {
|
||||
this.init = false;
|
||||
this.visible = !this.visible;
|
||||
var main = document.getElementById("main");
|
||||
if (this.visible) main.classList.add("chisma-abierta");
|
||||
else main.classList.remove("chisma-abierta");
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.chismosa-container {
|
||||
top: 6.5rem;
|
||||
max-height: 21rem;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
z-index: 15;
|
||||
@media (max-width: 719px) {
|
||||
.chismosa-tabla {
|
||||
max-width: 80vw;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
<template>
|
||||
<div class="dropdown is-right navbar-item" :class="{'is-active':activa}">
|
||||
<div class="dropdown-trigger">
|
||||
<a class="text-a" aria-haspopup="true" :aria-controls="id" @click.capture="toggle">
|
||||
<span class="icon is-small mr-1">
|
||||
<img src="/assets/chismosa.png">
|
||||
</span>
|
||||
<span v-text="'$' + this.$root.pedido.total"></span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="dropdown-menu chismosa-menu" :id="id" role="menu">
|
||||
<div class="dropdown-content">
|
||||
<div class="dropdown-item">
|
||||
<chismosa></chismosa>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Chismosa from './Chismosa.vue'
|
||||
export default {
|
||||
components: {
|
||||
Chismosa
|
||||
},
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activa: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggle() {
|
||||
this.activa = !this.activa
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
@media (max-width: 719px) {
|
||||
.chismosa-menu {
|
||||
vertical-align: top;
|
||||
overflow-y: auto;
|
||||
max-height: 75vh;
|
||||
max-width: 100vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 720px) {
|
||||
.chismosa-menu {
|
||||
vertical-align: top;
|
||||
overflow-y: auto;
|
||||
max-height: 75vh;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -28,14 +28,14 @@
|
|||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
gdc: this.$gdc,
|
||||
gdc: this.$root.gdc,
|
||||
passwordVisible: false,
|
||||
passwordType: "password",
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
Event.$on('gdc-seleccionado', (gdc) => {
|
||||
this.gdc = gdc;
|
||||
this.$root.gdc = gdc;
|
||||
this.visible = true;
|
||||
});
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,45 +1,36 @@
|
|||
<template>
|
||||
<nav class="navbar is-danger is-fixed-top" role="navigation" aria-label="main navigation">
|
||||
|
||||
<nav id="nav-bar" class="navbar is-danger is-fixed-top" role="navigation" aria-label="main navigation">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="https://mps.org.uy">
|
||||
<img src="/assets/logoMPS.png" height="28">
|
||||
</a>
|
||||
<!-- Styles nombre del barrio-->
|
||||
<p class="navbar-item">
|
||||
<p class="navbar-item hide-below-1024">
|
||||
<slot name="gdc"></slot>
|
||||
</p>
|
||||
<p class="navbar-item">
|
||||
<slot name="subpedido"></slot>
|
||||
</p>
|
||||
|
||||
<a role="button" class="navbar-burger" :class="{'is-active':isActive}" aria-label="menu" aria-expanded="false" data-target="nav-bar" @click="toggleState">
|
||||
<chismosa-dropdown class="hide-above-1023"></chismosa-dropdown>
|
||||
<a role="button" class="navbar-burger" :class="{'is-active':burgerActiva}" aria-label="menu" aria-expanded="false" data-target="nav-bar" @click="toggleBurger">
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div id="nav-bar" class="navbar-menu" :class="{'is-active':isActive}">
|
||||
<div class="navbar-menu" :class="{'is-active':burgerActiva}">
|
||||
<div class="navbar-end">
|
||||
|
||||
<div v-if="subpedido.id != null" class="navbar-item field has-addons mt-2 mr-3">
|
||||
<a class="button is-small" @click.capture="buscar">
|
||||
<div v-if="this.$root.pedido != null" class="navbar-item field has-addons mt-2 mr-3">
|
||||
<a class="button is-small has-text-dark-grey" @click.capture="buscar">
|
||||
<span class="icon">
|
||||
<i class="fas fa-search"></i>
|
||||
</span>
|
||||
</a>
|
||||
<input class="input is-small" type="text" placeholder="Harina" v-model="searchString" @keyup.enter="buscar" >
|
||||
</div>
|
||||
|
||||
<a v-if="subpedido.id != null" class="navbar-item" href="#chismosa" @click.capture="toggleChismosa">
|
||||
<span class="icon is-small mr-1" id="chismosa">
|
||||
<img class="invert-in-burger" src="/assets/chismosa.png">
|
||||
</span>
|
||||
<span v-text="'$' + (subpedido == null ? 0 : subpedido.total)"></span>
|
||||
</a>
|
||||
<chismosa-dropdown v-if="this.$root.pedido != null" class="hide-below-1024"></chismosa-dropdown>
|
||||
<div class="block navbar-item">
|
||||
<a id="cerrar-sesion" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
|
||||
<a onclick="event.preventDefault(); document.getElementById('logout-form').submit();" class="text-a">
|
||||
Cerrar sesión
|
||||
</a>
|
||||
<slot name="logout-form"></slot>
|
||||
|
|
@ -50,71 +41,25 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import ChismosaDropdown from './ChismosaDropdown.vue';
|
||||
export default {
|
||||
components: { ChismosaDropdown },
|
||||
data() {
|
||||
return {
|
||||
isActive: false,
|
||||
subpedido: this.$pedido,
|
||||
searchString: ""
|
||||
burgerActiva: false,
|
||||
searchString: "",
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleState() {
|
||||
this.isActive = !this.isActive
|
||||
},
|
||||
actualizarSubpedido(){
|
||||
axios.get("/api/subpedidos/" + this.subpedido.id)
|
||||
.then(response => {
|
||||
this.subpedido = response.data.data
|
||||
});
|
||||
},
|
||||
toggleChismosa(){
|
||||
if (this.isActive) this.toggleState()
|
||||
Event.$emit("toggle-chismosa")
|
||||
toggleBurger() {
|
||||
this.burgerActiva = !this.burgerActiva
|
||||
},
|
||||
buscar() {
|
||||
if (this.isActive) this.toggleState()
|
||||
if (this.burgerActiva) this.toggleBurger()
|
||||
Event.$emit("migas-setear-como-inicio", this.$rootMiga)
|
||||
Event.$emit("filtrar-productos",'nombre',this.searchString)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
axios.get("/subpedidos/obtener_sesion").then(response => {
|
||||
this.subpedido = response.data.subpedido
|
||||
this.actualizarSubpedido()
|
||||
});
|
||||
//Emitir un evento subpedido-actualizado al agregar o eliminar un producto del subpedido para que el total de la chismosa se muestre correctamente
|
||||
Event.$on('sync-subpedido', (cantidad, id) => {
|
||||
axios.post("/api/subpedidos/"+this.subpedido.id+"/sync", {
|
||||
cantidad: cantidad,
|
||||
producto_id: id
|
||||
}).then((response) => {
|
||||
this.subpedido = response.data.data;
|
||||
Event.$emit('sync-chismosa',this.subpedido);
|
||||
window.bulmaToast.toast({
|
||||
message: 'Pedido actualizado exitosamente',
|
||||
duration: 1000,
|
||||
type: 'is-danger',
|
||||
position: 'bottom-center',
|
||||
animate: { in: 'fadeIn', out: 'fadeOut' }
|
||||
});
|
||||
});
|
||||
});
|
||||
Event.$on('aprobacion-subpedido', (subpedidoId, aprb) => {
|
||||
axios.post("/api/admin/subpedidos/" + subpedidoId + "/aprobacion", {
|
||||
aprobacion: aprb
|
||||
}).then((response) => {
|
||||
Event.$emit('sync-aprobacion', response.data.data);
|
||||
window.bulmaToast.toast({
|
||||
message: 'Pedido ' + (aprb ? 'aprobado' : 'desaprobado') + ' exitosamente',
|
||||
duration: 1000,
|
||||
type: 'is-danger',
|
||||
position: 'bottom-center',
|
||||
animate: { in: 'fadeIn', out: 'fadeOut' }
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -128,13 +73,19 @@ p.navbar-item:empty {
|
|||
z-index: 10;
|
||||
}
|
||||
|
||||
#cerrar-sesion {
|
||||
.text-a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
@media (max-width: 1023px) {
|
||||
.invert-in-burger {
|
||||
filter: invert(.5);
|
||||
.hide-below-1024 {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.hide-above-1023 {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -83,7 +83,7 @@
|
|||
if (this.cant < 0) alert("No se puede agregar cantidades negativas")
|
||||
else if (!Number.isInteger(this.cant)) alert("Las cantidades deben ser números enteros")
|
||||
else {
|
||||
this.$settearProducto(this.cant, this.producto.id);
|
||||
Event.$emit('sync-subpedido',this.cant, this.producto.id);
|
||||
this.cerrar();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<tr>
|
||||
<td>{{ this.producto.nombre }}</td>
|
||||
<td>{{ this.producto.pivot.cantidad }}</td>
|
||||
<td>{{ this.producto.pivot.total }}</td>
|
||||
<td>{{ Math.ceil(this.producto.pivot.total) }}</td>
|
||||
<td><button @click.capture="seleccionarProducto(producto)" class="button is-warning">
|
||||
<span class="icon">
|
||||
<i class="fas fa-edit"></i>
|
||||
|
|
|
|||
|
|
@ -80,7 +80,8 @@
|
|||
guardarSubpedidoEnSesion(subpedido) {
|
||||
axios.post("/subpedidos/guardar_sesion", {
|
||||
subpedido: subpedido
|
||||
}).then(response => {
|
||||
}).then(_ => {
|
||||
Event.$emit('obtener-sesion')
|
||||
window.location.href = 'productos';
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,10 +25,6 @@ table.table td {
|
|||
z-index: 30;
|
||||
}
|
||||
|
||||
main.chisma-abierta {
|
||||
padding-top: 25.5rem !important;
|
||||
}
|
||||
|
||||
#main {
|
||||
height: 100%;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue