refactor
This commit is contained in:
nat
parent
dce0620365
commit
8d5e780f94
|
|
@ -10,7 +10,7 @@
|
|||
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js"
|
||||
},
|
||||
"devDependencies": {
|
||||
"axios": "^0.19",
|
||||
"axios": "^0.19.2",
|
||||
"bootstrap": "^4.0.0",
|
||||
"cross-env": "^7.0",
|
||||
"jquery": "^3.2",
|
||||
|
|
@ -22,5 +22,10 @@
|
|||
"sass-loader": "^8.0.0",
|
||||
"vue": "^2.5.17",
|
||||
"vue-template-compiler": "^2.6.10"
|
||||
},
|
||||
"dependencies": {
|
||||
"animate.css": "^4.1.1",
|
||||
"bulma": "^0.9.4",
|
||||
"bulma-toast": "^2.4.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,53 +1,22 @@
|
|||
p.navbar-item:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.breadcrumb a {
|
||||
color: #cc0f35;
|
||||
}
|
||||
|
||||
|
||||
.help {
|
||||
font-size: 1rem;
|
||||
@import url(https://fonts.googleapis.com/css?family=Nunito);main.has-top-padding {
|
||||
padding-top: 4.5rem !important;
|
||||
}
|
||||
|
||||
table.table td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
nav.breadcrumb.is-fixed-top {
|
||||
left: 0;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
z-index: 30;
|
||||
top: 3.25rem;
|
||||
height: 3.25rem;
|
||||
}
|
||||
|
||||
main.has-top-padding {
|
||||
padding-top: 4.5rem !important;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.has-text-centered {
|
||||
text-align: center;
|
||||
margin: 0 1em;
|
||||
text-align: center;
|
||||
margin: 0 1em;
|
||||
}
|
||||
|
||||
.is-fixed-top {
|
||||
position: fixed;
|
||||
z-index: 30;
|
||||
}
|
||||
|
||||
.chismosa-container {
|
||||
top: 6.5rem;
|
||||
max-height: 21rem;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
z-index: 15;
|
||||
position: fixed;
|
||||
z-index: 30;
|
||||
}
|
||||
|
||||
main.chisma-abierta {
|
||||
padding-top: 25.5rem !important;
|
||||
}
|
||||
padding-top: 25.5rem !important;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +0,0 @@
|
|||
figure.image.icono {
|
||||
float: right;
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
.is-thin-centered {
|
||||
width: 50%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,109 +0,0 @@
|
|||
Vue.component('chismosa', {
|
||||
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">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Producto</th>
|
||||
<th><abbr title="Cantidad">C</abbr></th>
|
||||
<th><abbr title="Precio Total">$</abbr></th>
|
||||
<th></th>
|
||||
<th><abbr title="Eliminar"></abbr></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<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></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Total total</th>
|
||||
<th></th>
|
||||
<th>{{ this.subpedido.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>
|
||||
</tbody>
|
||||
</table>
|
||||
<p class="has-text-centered" v-show="this.subpedido.productos.length == 0">Compa, todavía no agregaste nada a la chismosa.</p>
|
||||
</div>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
subpedido: {
|
||||
productos:[]
|
||||
},
|
||||
init: true,
|
||||
visible: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
animation: function() {
|
||||
return this.visible ? "animate__slideInDown" : "animate__slideOutUp";
|
||||
}
|
||||
},
|
||||
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");
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
Vue.component('producto-row', {
|
||||
template: `
|
||||
<tr>
|
||||
<td>{{ this.producto.nombre }}</td>
|
||||
<td>{{ this.producto.pivot.cantidad }}</td>
|
||||
<td>{{ this.producto.pivot.total }}</td>
|
||||
<td><button @click.capture="seleccionarProducto(producto)" class="button is-warning">
|
||||
<span class="icon">
|
||||
<i class="fas fa-edit"></i>
|
||||
</span>
|
||||
</button></td>
|
||||
<td><button @click.capture="eliminarProducto(producto)" class="button is-danger">
|
||||
<span class="icon">
|
||||
<i class="fas fa-trash-alt"></i>
|
||||
</span>
|
||||
</button></td>
|
||||
</tr>
|
||||
`,
|
||||
props: {
|
||||
producto: Object
|
||||
},
|
||||
methods: {
|
||||
seleccionarProducto(producto) {
|
||||
Event.$emit("producto-seleccionado",producto);
|
||||
},
|
||||
eliminarProducto(producto) {
|
||||
Event.$emit("sync-subpedido", 0, this.producto.id);
|
||||
Event.$emit("sync-subpedido");
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
@ -1,114 +0,0 @@
|
|||
window.Event = new Vue();
|
||||
|
||||
Vue.component('region-select', {
|
||||
template: `
|
||||
<div class="block">
|
||||
<div class="field">
|
||||
<label class="label">Seleccioná tu región</label>
|
||||
<div class="control">
|
||||
<div class="select">
|
||||
<select @change="onRegionSelected" v-model="region">
|
||||
<option :disabled="isDefaultDisabled==1" value=null>Seleccionar</option>
|
||||
<option v-for="region in regiones" v-text="region" :name="region"></option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`,
|
||||
data() {
|
||||
return {
|
||||
regiones: [],
|
||||
isDefaultDisabled: 0,
|
||||
region: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
axios.get("/api/regiones").then(response => this.regiones = response.data);
|
||||
},
|
||||
methods: {
|
||||
onRegionSelected() {
|
||||
this.isDefaultDisabled = 1;
|
||||
Event.$emit("region-seleccionada",this.region);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Vue.component('barrio-select', {
|
||||
template: `
|
||||
<div v-show="visible" class="block">
|
||||
<div class="field">
|
||||
<label class="label">Seleccioná tu barrio o grupo de compra</label>
|
||||
<div class="control">
|
||||
<div class="select">
|
||||
<select @change="onGDCSelected" v-model="gdc" name="name">
|
||||
<option :disabled="isDefaultDisabled==1" value=null>Seleccionar</option>
|
||||
<option v-for="gdc in gdcs" v-text="gdc.nombre" :name="gdc.nombre"></option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`,
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
region: null,
|
||||
gdcs: [],
|
||||
isDefaultDisabled: 0,
|
||||
gdc: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
Event.$on('region-seleccionada', (region)=> {
|
||||
this.region = region;
|
||||
this.fillGDC(region);
|
||||
this.visible = true;
|
||||
});
|
||||
},
|
||||
methods : {
|
||||
fillGDC(region) {
|
||||
axios.get("/api/grupos-de-compra").then(response => {
|
||||
this.gdcs = response.data[this.region];
|
||||
});
|
||||
},
|
||||
onGDCSelected() {
|
||||
this.isDefaultDisabled = 1;
|
||||
Event.$emit("gdc-seleccionado",this.gdc);
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
Vue.component('login', {
|
||||
template: `
|
||||
<div v-show="visible" class="block">
|
||||
<div class="field">
|
||||
<label class="label">Contraseña del barrio</label>
|
||||
<p class="control">
|
||||
<input required class="input" type="password" name="password" placeholder="Contraseña del barrio">
|
||||
</p>
|
||||
<p class="help">Si no la sabés, consultá a tus compañerxs.</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input type="submit" class="button is-success" value="Ingresar">
|
||||
</input>
|
||||
</div>
|
||||
</div>
|
||||
</div>`,
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
gdc: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
Event.$on('gdc-seleccionado', (gdc) => {
|
||||
this.gdc = gdc;
|
||||
this.visible = true;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
new Vue({
|
||||
el: '#root'
|
||||
});
|
||||
|
|
@ -1,205 +0,0 @@
|
|||
Vue.component('categorias-container', {
|
||||
template: `
|
||||
<div v-show="visible" class="container">
|
||||
<div class="columns is-multiline is-mobile">
|
||||
<div v-for="catego in categorias" class="block column is-one-quarter-desktop is-one-third-tablet is-half-mobile">
|
||||
<div @click.capture="seleccionarCategoria(catego)" class="card" style="height:100%" >
|
||||
<div class="card-content">
|
||||
<div class="media">
|
||||
<div class="media-content" style="overflow:hidden">
|
||||
<p class="title is-6" v-text="catego"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- END CARD -->
|
||||
</div><!-- END BLOCK COLUMN -->
|
||||
</div><!-- END COLUMNS -->
|
||||
</div><!-- END CONTAINER -->`,
|
||||
data() {
|
||||
return {
|
||||
categorias: null,
|
||||
visible: true,
|
||||
miga: {
|
||||
nombre: "Categorías",
|
||||
href: "/productos"
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
axios.get("/api/categorias").then(response => {
|
||||
this.categorias = response.data;
|
||||
});
|
||||
Event.$emit("migas-setear-como-inicio",this.miga);
|
||||
},
|
||||
methods: {
|
||||
seleccionarCategoria(categoria) {
|
||||
this.visible = false;
|
||||
Event.$emit("categoria-seleccionada",categoria);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Vue.component('productos-container', {
|
||||
template: `
|
||||
<div v-show="visible" class="container">
|
||||
<div class="columns is-multiline is-mobile">
|
||||
<div v-for="producto in productos" class="block column is-one-quarter-desktop is-one-third-tablet is-half-mobile">
|
||||
<div @click.capture="seleccionarProducto(producto)" class="card" style="height:100%">
|
||||
<div class="card-image">
|
||||
<figure class="image is-4by3">
|
||||
<img v-bind:src="producto.imagen ? producto.imagen : 'https://bulma.io/images/placeholders/1280x960.png'">
|
||||
</figure>
|
||||
<figure v-show="producto.nacional" class="image icono is-32x32">
|
||||
<img src="/assets/uruguay.png">
|
||||
</figure>
|
||||
<figure v-show="producto.economia_solidaria" class="image icono is-32x32">
|
||||
<img src="/assets/solidaria.png">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="media">
|
||||
<div class="media-content">
|
||||
<p class="title is-6" v-text="producto.nombre"></p>
|
||||
<p class="subtitle is-7" v-text="producto.proveedor"></p>
|
||||
<p class="subtitle is-7">$<span v-text="producto.precio"></span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- END CARD -->
|
||||
</div><!-- END BLOCK COLUMN -->
|
||||
</div><!-- END COLUMNS -->
|
||||
</div><!-- END CONTAINER -->`,
|
||||
data() {
|
||||
return {
|
||||
productos: [],
|
||||
visible: false,
|
||||
categoria: null,
|
||||
paginar: 150
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
miga: function(){
|
||||
return {
|
||||
nombre: this.categoria,
|
||||
href: "#" + this.categoria
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
Event.$on('categoria-seleccionada', (categoria) => {
|
||||
this.categoria = categoria;
|
||||
|
||||
axios.get("/api/productos", {
|
||||
params: {
|
||||
categoria: this.categoria,
|
||||
paginar: this.paginar
|
||||
}
|
||||
}).then(response => {
|
||||
this.productos = response.data.data;
|
||||
});
|
||||
this.visible = true;
|
||||
Event.$emit("migas-agregar",this.miga);
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
seleccionarProducto(producto) {
|
||||
Event.$emit("producto-seleccionado",producto);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Vue.component('producto-container', {
|
||||
template: `
|
||||
<div v-bind:class="visible ? 'is-active modal' : 'modal'">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-card">
|
||||
<header class="modal-card-head">
|
||||
<p class="modal-card-title" v-text="producto.nombre"></p>
|
||||
<button class="delete" aria-label="close" @click.capture="cerrar"></button>
|
||||
</header>
|
||||
<section class="modal-card-body">
|
||||
<div class="card-image">
|
||||
<figure v-show="producto.nacional" class="image icono is-32x32" style="z-index:10">
|
||||
<img src="/assets/uruguay.png">
|
||||
</figure>
|
||||
<figure v-show="producto.economia_solidaria" class="image icono is-32x32" style="z-index:10">
|
||||
<img src="/assets/solidaria.png">
|
||||
</figure>
|
||||
<figure class="image is-4by3">
|
||||
<img
|
||||
v-bind:src="producto.imagen ? producto.imagen : 'https://bulma.io/images/placeholders/1280x960.png'">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<p class="title is-4" v-text="producto.proveedor"></p>
|
||||
<p class="subtitle is-4">$<span v-text="producto.precio"></span></p>
|
||||
<p class="subtitle is-6"><span v-show="producto.apto_veganxs">Apto para veganxs. </span><span v-show="producto.apto_celiacxs">Apto para celíacxs.</span></p>
|
||||
<p class="subtitle is-5"><span v-text="producto.descripcion"></span></p>
|
||||
<div class="field has-addons is-centered is-thin-centered">
|
||||
<p class="control">
|
||||
<button class="button" @click="cant !== 0 ? cant-- : cant">
|
||||
<span class="icon is-small">
|
||||
<!-- Habría que ver de poner un ícono de - -->
|
||||
</span>
|
||||
<span>-</span>
|
||||
</button>
|
||||
</p>
|
||||
<p class="control">
|
||||
<input id="cantidad" class="input" type="number" v-model.number="cant" style="text-align: center">
|
||||
</p>
|
||||
<p class="control">
|
||||
<button class="button" @click="cant++">
|
||||
<span class="icon is-small">
|
||||
<!-- Habría que ver de poner un ícono de + -->
|
||||
</span>
|
||||
<span>+</span>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="modal-card-foot">
|
||||
<!-- Habría que ver si cambiar el botón cuando al cantidad es 0 -->
|
||||
<button class="button is-success" :disabled="cant <= 0" @click="agregarProducto">Aceptar</button>
|
||||
<button class="button" @click.capture="cerrar">Cancelar</button>
|
||||
</footer>
|
||||
</div>
|
||||
</div>`,
|
||||
data() {
|
||||
return {
|
||||
producto: null,
|
||||
visible: false,
|
||||
cant: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
miga: function(){
|
||||
return {
|
||||
nombre: this.producto.nombre,
|
||||
href: "#" + this.producto.nombre
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
cerrar() {
|
||||
this.cant = 0;
|
||||
this.visible = false;
|
||||
Event.$emit("migas-pop");
|
||||
},
|
||||
agregarProducto() {
|
||||
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 {
|
||||
Event.$emit("sync-subpedido", this.cant, this.producto.id);
|
||||
this.cerrar();
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
Event.$on('producto-seleccionado', (producto) => {
|
||||
this.producto = producto;
|
||||
this.visible = true;
|
||||
Event.$emit("migas-agregar",this.miga);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
Vue.component('subpedido-select', {
|
||||
data() {
|
||||
return {
|
||||
subpedido: null,
|
||||
subpedidosExistentes: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
nombresDeSubpedidos: function() {
|
||||
return this.subpedidosExistentes.map(a => a.nombre.toLowerCase())
|
||||
},
|
||||
botonCrearDesabilitado : function() {
|
||||
return !this.subpedido || this.nombresDeSubpedidos.includes(this.subpedido.toLowerCase())
|
||||
}
|
||||
},
|
||||
props: ["gdcid"],
|
||||
mounted() {
|
||||
console.log("ready");
|
||||
},
|
||||
methods: {
|
||||
onType() {
|
||||
if (!this.subpedido){
|
||||
this.subpedidosExistentes = [];
|
||||
return;
|
||||
}
|
||||
axios.get("/api/subpedidos", {
|
||||
params: {
|
||||
nombre: this.subpedido,
|
||||
grupo_de_compra: this.gdcid
|
||||
}
|
||||
}).then(response => {
|
||||
this.subpedidosExistentes = response.data
|
||||
});
|
||||
},
|
||||
submit() {
|
||||
axios.post("/api/subpedidos", {
|
||||
nombre: this.subpedido,
|
||||
grupo_de_compra_id: this.gdcid
|
||||
}).then(response => {
|
||||
//se creo el subpedido
|
||||
this.elegirSubpedido(response.data);
|
||||
});
|
||||
},
|
||||
elegirSubpedido(subpedido){
|
||||
//lo guardamos en sesion
|
||||
this.guardarSubpedidoEnSesion(subpedido);
|
||||
},
|
||||
guardarSubpedidoEnSesion(subpedido) {
|
||||
axios.post("/subpedidos/guardar_sesion", {
|
||||
subpedido: subpedido
|
||||
}).then(response => {
|
||||
window.location.href = 'productos';
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"/js/app.js": "/js/app.js",
|
||||
"/css/app.css": "/css/app.css"
|
||||
}
|
||||
|
|
@ -3,10 +3,12 @@
|
|||
* includes Vue and other libraries. It is a great starting point when
|
||||
* building robust, powerful web applications using Vue and Laravel.
|
||||
*/
|
||||
|
||||
require('./bootstrap');
|
||||
|
||||
import axios from 'axios';
|
||||
import animate from 'animate.css';
|
||||
window.Vue = require('vue');
|
||||
window.Event = new Vue();
|
||||
window.axios = axios;
|
||||
window.bulmaToast = require('bulma-toast');
|
||||
|
||||
/**
|
||||
* The following block of code may be used to automatically register your
|
||||
|
|
@ -16,10 +18,8 @@ window.Vue = require('vue');
|
|||
* 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))
|
||||
|
||||
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
|
||||
const files = require.context('./', true, /\.vue$/i)
|
||||
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
|
||||
|
||||
/**
|
||||
* Next, we will create a fresh Vue application instance and attach it to
|
||||
|
|
@ -28,5 +28,5 @@ Vue.component('example-component', require('./components/ExampleComponent.vue').
|
|||
*/
|
||||
|
||||
const app = new Vue({
|
||||
el: '#app',
|
||||
el: '#root'
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,47 @@
|
|||
<template>
|
||||
<div v-show="visible" class="block">
|
||||
<div class="field">
|
||||
<label class="label">Seleccioná tu barrio o grupo de compra</label>
|
||||
<div class="control">
|
||||
<div class="select">
|
||||
<select @change="onGDCSelected" v-model="gdc" name="name">
|
||||
<option :disabled="isDefaultDisabled==1" value=null>Seleccionar</option>
|
||||
<option v-for="gdc in gdcs" v-text="gdc.nombre" :name="gdc.nombre"></option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
region: null,
|
||||
gdcs: [],
|
||||
isDefaultDisabled: 0,
|
||||
gdc: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
Event.$on('region-seleccionada', (region)=> {
|
||||
this.region = region;
|
||||
this.fillGDC(region);
|
||||
this.visible = true;
|
||||
});
|
||||
},
|
||||
methods : {
|
||||
fillGDC(region) {
|
||||
axios.get("/api/grupos-de-compra").then(response => {
|
||||
this.gdcs = response.data[this.region];
|
||||
});
|
||||
},
|
||||
onGDCSelected() {
|
||||
this.isDefaultDisabled = 1;
|
||||
Event.$emit("gdc-seleccionado",this.gdc);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<template>
|
||||
<div v-show="visible" class="container">
|
||||
<div class="columns is-multiline is-mobile">
|
||||
<div v-for="catego in categorias" class="block column is-one-quarter-desktop is-one-third-tablet is-half-mobile">
|
||||
<div @click.capture="seleccionarCategoria(catego)" class="card" style="height:100%" >
|
||||
<div class="card-content">
|
||||
<div class="media">
|
||||
<div class="media-content" style="overflow:hidden">
|
||||
<p class="title is-6" v-text="catego"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- END CARD -->
|
||||
</div><!-- END BLOCK COLUMN -->
|
||||
</div><!-- END COLUMNS -->
|
||||
</div><!-- END CONTAINER -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
categorias: null,
|
||||
visible: true,
|
||||
miga: {
|
||||
nombre: "Categorías",
|
||||
href: "/productos"
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
axios.get("/api/categorias").then(response => {
|
||||
this.categorias = response.data;
|
||||
});
|
||||
Event.$emit("migas-setear-como-inicio",this.miga);
|
||||
},
|
||||
methods: {
|
||||
seleccionarCategoria(categoria) {
|
||||
this.visible = false;
|
||||
Event.$emit("categoria-seleccionada",categoria);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
<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">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Producto</th>
|
||||
<th><abbr title="Cantidad">C</abbr></th>
|
||||
<th><abbr title="Precio Total">$</abbr></th>
|
||||
<th></th>
|
||||
<th><abbr title="Eliminar"></abbr></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<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></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Total total</th>
|
||||
<th></th>
|
||||
<th>{{ this.subpedido.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>
|
||||
</tbody>
|
||||
</table>
|
||||
<p class="has-text-centered" v-show="this.subpedido.productos.length == 0">Compa, todavía no agregaste nada a la chismosa.</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
subpedido: {
|
||||
productos:[]
|
||||
},
|
||||
init: true,
|
||||
visible: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
animation: function() {
|
||||
return this.visible ? "animate__slideInDown" : "animate__slideOutUp";
|
||||
}
|
||||
},
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8">
|
||||
<div class="card">
|
||||
<div class="card-header">Example Component</div>
|
||||
|
||||
<div class="card-body">
|
||||
I'm an example component.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
mounted() {
|
||||
console.log('Component mounted.')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<template>
|
||||
<div v-show="visible" class="block">
|
||||
<div class="field">
|
||||
<label class="label">Contraseña del barrio</label>
|
||||
<p class="control">
|
||||
<input required class="input" type="password" name="password" placeholder="Contraseña del barrio">
|
||||
</p>
|
||||
<p class="help">Si no la sabés, consultá a tus compañerxs.</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input type="submit" class="button is-success" value="Ingresar">
|
||||
</input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
gdc: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
Event.$on('gdc-seleccionado', (gdc) => {
|
||||
this.gdc = gdc;
|
||||
this.visible = true;
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.help {
|
||||
font-size: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
<template>
|
||||
<nav 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>
|
||||
<p style="margin:0 auto" class="navbar-item"><slot name="subpedido"></slot></p>
|
||||
<a class="navbar-item" href="#chismosa" @click.capture="toggleChismosa">
|
||||
<img style="padding:0 0.3em;" src="/assets/chismosa.png" height="28">
|
||||
<p style="margin:0 auto; color:white">$ <span v-text="subpedido == null ? 0 : subpedido.total"></span></p>
|
||||
</a>
|
||||
<a role="button" class="navbar-burger" :class="{'is-active':isActive}" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample" @click="toggleState">
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div id="navbarBasicExample" class="navbar-menu" :class="{'is-active':isActive}">
|
||||
<div class="navbar-start has-text-right-mobile">
|
||||
<!-- Styles nombre del barrio-->
|
||||
<p class="navbar-item"><slot name="gdc"></slot></p>
|
||||
<a class="navbar-item"
|
||||
onclick="event.preventDefault();
|
||||
document.getElementById('logout-form').submit();">
|
||||
Cerrar sesión
|
||||
</a>
|
||||
<slot name="logout-form"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isActive: false,
|
||||
subpedido: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleState() {
|
||||
this.isActive = !this.isActive;
|
||||
},
|
||||
actualizarSubpedido(){
|
||||
axios.get("/api/subpedidos/" + this.subpedido.id)
|
||||
.then(response => {
|
||||
this.subpedido = response.data.data;
|
||||
});
|
||||
},
|
||||
toggleChismosa(){
|
||||
Event.$emit("toggle-chismosa");
|
||||
}
|
||||
}, 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' }
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
p.navbar-item:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<template>
|
||||
<div class="notification">
|
||||
{{message}}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
migas: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
visible: function() {
|
||||
return this.migas.length > 0
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
Event.$on('migas-setear-como-inicio', (miga) => {
|
||||
this.migas = [];
|
||||
this.migas.push(miga);
|
||||
});
|
||||
Event.$on('migas-agregar', (miga) => {
|
||||
this.migas.push(miga);
|
||||
});
|
||||
Event.$on('migas-reset', () => {
|
||||
this.migas = [];
|
||||
});
|
||||
Event.$on('migas-pop', () => {
|
||||
this.migas.pop();
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.breadcrumb a {
|
||||
color: #cc0f35;
|
||||
}
|
||||
|
||||
nav.breadcrumb.is-fixed-top {
|
||||
left: 0;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
z-index: 30;
|
||||
top: 3.25rem;
|
||||
height: 3.25rem;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,112 @@
|
|||
<template>
|
||||
<div v-bind:class="visible ? 'is-active modal' : 'modal'">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-card">
|
||||
<header class="modal-card-head">
|
||||
<p class="modal-card-title" v-text="producto.nombre"></p>
|
||||
<button class="delete" aria-label="close" @click.capture="cerrar"></button>
|
||||
</header>
|
||||
<section class="modal-card-body">
|
||||
<div class="card-image">
|
||||
<figure v-show="producto.nacional" class="image icono is-32x32" style="z-index:10">
|
||||
<img src="/assets/uruguay.png">
|
||||
</figure>
|
||||
<figure v-show="producto.economia_solidaria" class="image icono is-32x32" style="z-index:10">
|
||||
<img src="/assets/solidaria.png">
|
||||
</figure>
|
||||
<figure class="image is-4by3">
|
||||
<img
|
||||
v-bind:src="producto.imagen ? producto.imagen : 'https://bulma.io/images/placeholders/1280x960.png'">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<p class="title is-4" v-text="producto.proveedor"></p>
|
||||
<p class="subtitle is-4">$<span v-text="producto.precio"></span></p>
|
||||
<p class="subtitle is-6"><span v-show="producto.apto_veganxs">Apto para veganxs. </span><span v-show="producto.apto_celiacxs">Apto para celíacxs.</span></p>
|
||||
<p class="subtitle is-5"><span v-text="producto.descripcion"></span></p>
|
||||
<div class="field has-addons is-centered is-thin-centered">
|
||||
<p class="control">
|
||||
<button class="button" @click="cant !== 0 ? cant-- : cant">
|
||||
<span class="icon is-small">
|
||||
<!-- Habría que ver de poner un ícono de - -->
|
||||
</span>
|
||||
<span>-</span>
|
||||
</button>
|
||||
</p>
|
||||
<p class="control">
|
||||
<input id="cantidad" class="input" type="number" v-model.number="cant" style="text-align: center">
|
||||
</p>
|
||||
<p class="control">
|
||||
<button class="button" @click="cant++">
|
||||
<span class="icon is-small">
|
||||
<!-- Habría que ver de poner un ícono de + -->
|
||||
</span>
|
||||
<span>+</span>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="modal-card-foot">
|
||||
<!-- Habría que ver si cambiar el botón cuando al cantidad es 0 -->
|
||||
<button class="button is-success" :disabled="cant <= 0" @click="agregarProducto">Aceptar</button>
|
||||
<button class="button" @click.capture="cerrar">Cancelar</button>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
producto: null,
|
||||
visible: false,
|
||||
cant: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
miga: function(){
|
||||
return {
|
||||
nombre: this.producto.nombre,
|
||||
href: "#" + this.producto.nombre
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
cerrar() {
|
||||
this.cant = 0;
|
||||
this.visible = false;
|
||||
Event.$emit("migas-pop");
|
||||
},
|
||||
agregarProducto() {
|
||||
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 {
|
||||
Event.$emit("sync-subpedido", this.cant, this.producto.id);
|
||||
this.cerrar();
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
Event.$on('producto-seleccionado', (producto) => {
|
||||
this.producto = producto;
|
||||
this.visible = true;
|
||||
Event.$emit("migas-agregar",this.miga);
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
figure.image.icono {
|
||||
float: right;
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
.is-thin-centered {
|
||||
width: 50%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<template>
|
||||
<tr>
|
||||
<td>{{ this.producto.nombre }}</td>
|
||||
<td>{{ this.producto.pivot.cantidad }}</td>
|
||||
<td>{{ this.producto.pivot.total }}</td>
|
||||
<td><button @click.capture="seleccionarProducto(producto)" class="button is-warning">
|
||||
<span class="icon">
|
||||
<i class="fas fa-edit"></i>
|
||||
</span>
|
||||
</button></td>
|
||||
<td><button @click.capture="eliminarProducto(producto)" class="button is-danger">
|
||||
<span class="icon">
|
||||
<i class="fas fa-trash-alt"></i>
|
||||
</span>
|
||||
</button></td>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
producto: Object
|
||||
},
|
||||
methods: {
|
||||
seleccionarProducto(producto) {
|
||||
Event.$emit("producto-seleccionado",producto);
|
||||
},
|
||||
eliminarProducto(producto) {
|
||||
Event.$emit("sync-subpedido", 0, this.producto.id);
|
||||
Event.$emit("sync-subpedido");
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<template>
|
||||
<div v-show="visible" class="container">
|
||||
<div class="columns is-multiline is-mobile">
|
||||
<div v-for="producto in productos" class="block column is-one-quarter-desktop is-one-third-tablet is-half-mobile">
|
||||
<div @click.capture="seleccionarProducto(producto)" class="card" style="height:100%">
|
||||
<div class="card-image">
|
||||
<figure class="image is-4by3">
|
||||
<img v-bind:src="producto.imagen ? producto.imagen : 'https://bulma.io/images/placeholders/1280x960.png'">
|
||||
</figure>
|
||||
<figure v-show="producto.nacional" class="image icono is-32x32">
|
||||
<img src="/assets/uruguay.png">
|
||||
</figure>
|
||||
<figure v-show="producto.economia_solidaria" class="image icono is-32x32">
|
||||
<img src="/assets/solidaria.png">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="media">
|
||||
<div class="media-content">
|
||||
<p class="title is-6" v-text="producto.nombre"></p>
|
||||
<p class="subtitle is-7" v-text="producto.proveedor"></p>
|
||||
<p class="subtitle is-7">$<span v-text="producto.precio"></span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- END CARD -->
|
||||
</div><!-- END BLOCK COLUMN -->
|
||||
</div><!-- END COLUMNS -->
|
||||
</div><!-- END CONTAINER -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
productos: [],
|
||||
visible: false,
|
||||
categoria: null,
|
||||
paginar: 150
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
miga: function(){
|
||||
return {
|
||||
nombre: this.categoria,
|
||||
href: "#" + this.categoria
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
Event.$on('categoria-seleccionada', (categoria) => {
|
||||
this.categoria = categoria;
|
||||
|
||||
axios.get("/api/productos", {
|
||||
params: {
|
||||
categoria: this.categoria,
|
||||
paginar: this.paginar
|
||||
}
|
||||
}).then(response => {
|
||||
this.productos = response.data.data;
|
||||
});
|
||||
this.visible = true;
|
||||
Event.$emit("migas-agregar",this.miga);
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
seleccionarProducto(producto) {
|
||||
Event.$emit("producto-seleccionado",producto);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<template>
|
||||
<div class="block">
|
||||
<div class="field">
|
||||
<label class="label">Seleccioná tu región</label>
|
||||
<div class="control">
|
||||
<div class="select">
|
||||
<select @change="onRegionSelected" v-model="region">
|
||||
<option :disabled="isDefaultDisabled==1" value=null>Seleccionar</option>
|
||||
<option v-for="region in regiones" v-text="region" :name="region"></option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
regiones: [],
|
||||
isDefaultDisabled: 0,
|
||||
region: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
axios.get("/api/regiones").then(response => this.regiones = response.data);
|
||||
},
|
||||
methods: {
|
||||
onRegionSelected() {
|
||||
this.isDefaultDisabled = 1;
|
||||
Event.$emit("region-seleccionada",this.region);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
<template>
|
||||
<div>
|
||||
<label class="label">Escribí el nombre de tu familia o grupo de convivencia</label>
|
||||
<div class="columns">
|
||||
<div class="column is-two-thirds">
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input class="input" @input="onType" v-model="subpedido"></input>
|
||||
</div>
|
||||
<p class="help">Debe ser claro para que tus compas del barrio te identifiquen.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-one-third buttons">
|
||||
<button class="button is-danger" v-show="!botonCrearDesabilitado" @click="submit">Crear nuevo pedido</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="subpedidosExistentes.length" class="block">
|
||||
<label class="label">Si ya comenzaste a hacer tu pedido este mes, elegilo en esta lista:</label>
|
||||
<p class="help">Podés seguir escribiendo en el campo de arriba para refinar la búsqueda.</p>
|
||||
<div class="columns is-mobile" v-for="(subpedidoExistente, index) in subpedidosExistentes" :class="{'has-background-grey-lighter': index % 2}">
|
||||
<div class="column is-half-mobile is-two-thirds-desktop is-two-thirds-tablet"><p style="padding-top: calc(.5em - 1px); margin-bottom: .5rem" v-text="subpedidoExistente.nombre"></p></div>
|
||||
<div class="buttons column is-half-mobile is-one-third-desktop is-one-third-tablet">
|
||||
<button class="button is-danger" @click="elegirSubpedido(subpedidoExistente)">Continuar pedido</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
subpedido: null,
|
||||
subpedidosExistentes: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
nombresDeSubpedidos: function() {
|
||||
return this.subpedidosExistentes.map(a => a.nombre.toLowerCase())
|
||||
},
|
||||
botonCrearDesabilitado : function() {
|
||||
return !this.subpedido || this.nombresDeSubpedidos.includes(this.subpedido.toLowerCase())
|
||||
}
|
||||
},
|
||||
props: ["gdcid"],
|
||||
mounted() {
|
||||
console.log("ready");
|
||||
},
|
||||
methods: {
|
||||
onType() {
|
||||
if (!this.subpedido){
|
||||
this.subpedidosExistentes = [];
|
||||
return;
|
||||
}
|
||||
axios.get("/api/subpedidos", {
|
||||
params: {
|
||||
nombre: this.subpedido,
|
||||
grupo_de_compra: this.gdcid
|
||||
}
|
||||
}).then(response => {
|
||||
this.subpedidosExistentes = response.data
|
||||
});
|
||||
},
|
||||
submit() {
|
||||
axios.post("/api/subpedidos", {
|
||||
nombre: this.subpedido,
|
||||
grupo_de_compra_id: this.gdcid
|
||||
}).then(response => {
|
||||
//se creo el subpedido
|
||||
this.elegirSubpedido(response.data);
|
||||
});
|
||||
},
|
||||
elegirSubpedido(subpedido){
|
||||
//lo guardamos en sesion
|
||||
this.guardarSubpedidoEnSesion(subpedido);
|
||||
},
|
||||
guardarSubpedidoEnSesion(subpedido) {
|
||||
axios.post("/subpedidos/guardar_sesion", {
|
||||
subpedido: subpedido
|
||||
}).then(response => {
|
||||
window.location.href = 'productos';
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -4,5 +4,24 @@
|
|||
// Variables
|
||||
@import 'variables';
|
||||
|
||||
// Bootstrap
|
||||
@import '~bootstrap/scss/bootstrap';
|
||||
main.has-top-padding {
|
||||
padding-top: 4.5rem !important;
|
||||
}
|
||||
|
||||
table.table td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.has-text-centered {
|
||||
text-align: center;
|
||||
margin: 0 1em;
|
||||
}
|
||||
|
||||
.is-fixed-top {
|
||||
position: fixed;
|
||||
z-index: 30;
|
||||
}
|
||||
|
||||
main.chisma-abierta {
|
||||
padding-top: 25.5rem !important;
|
||||
}
|
||||
|
|
@ -29,8 +29,6 @@
|
|||
</form>
|
||||
</div>
|
||||
</section>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
||||
<script src="{{ asset('js/login.js') }}" defer></script>
|
||||
<script src="{{ asset('js/app.js') }}" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -12,17 +12,14 @@
|
|||
|
||||
<!-- Fonts -->
|
||||
<script src="https://kit.fontawesome.com/9235d1c676.js" crossorigin="anonymous"></script>
|
||||
<script src="{{ asset('js/bulma-toast.min.js') }}"></script>
|
||||
<!-- Styles -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
|
||||
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
|
||||
<link rel="stylesheet" href="{{ asset('css/animate.min.css') }}">
|
||||
@yield('stylesheets')
|
||||
|
||||
|
||||
</head>
|
||||
<body class="has-navbar-fixed-top">
|
||||
<div id="app">
|
||||
<div id="root">
|
||||
<nav-bar>
|
||||
<template slot="subpedido">{{ session('subpedido_nombre') ? 'Pedido de '. session('subpedido_nombre') : Auth::user()->name }}</template>
|
||||
<template slot="gdc">{{ session('subpedido_nombre') ? Auth::user()->name : "" }}</template>
|
||||
|
|
@ -45,9 +42,7 @@
|
|||
</main>
|
||||
</div>
|
||||
<!-- Scripts -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
|
||||
<script src="{{ asset('js/app.js') }}" defer></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
||||
@yield('scripts')
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,17 +1,8 @@
|
|||
@extends('layouts.app')
|
||||
|
||||
@section('stylesheets')
|
||||
<link rel="stylesheet" href="{{ asset('css/productos.css') }}">
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
<chismosa></chismosa>
|
||||
<categorias-container></categorias-container>
|
||||
<productos-container></productos-container>
|
||||
<producto-container></producto-container>
|
||||
@endsection
|
||||
|
||||
@section('scripts')
|
||||
<script src="{{ asset('js/productos.js') }}"></script>
|
||||
<script src="{{ asset('js/chismosa.js') }}"></script>
|
||||
<producto-modal></producto-modal>
|
||||
@endsection
|
||||
|
|
|
|||
|
|
@ -9,39 +9,10 @@
|
|||
<p class="subtitle">
|
||||
Bienvenidx a la aplicación de compras del <strong>Mercado Popular de Subsistencia</strong>
|
||||
</p>
|
||||
<subpedido-select inline-template gdcid="{{Auth::user()->grupoDeCompra->id}}">
|
||||
<div>
|
||||
<label class="label">Escribí el nombre de tu familia o grupo de convivencia</label>
|
||||
<div class="columns">
|
||||
<div class="column is-two-thirds">
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input class="input" @input="onType" v-model="subpedido"></input>
|
||||
</div>
|
||||
<p class="help">Debe ser claro para que tus compas del barrio te identifiquen.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-one-third buttons">
|
||||
<button class="button is-danger" v-show="!botonCrearDesabilitado" @click="submit">Crear nuevo pedido</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="subpedidosExistentes.length" class="block">
|
||||
<label class="label">Si ya comenzaste a hacer tu pedido este mes, elegilo en esta lista:</label>
|
||||
<p class="help">Podés seguir escribiendo en el campo de arriba para refinar la búsqueda.</p>
|
||||
<div class="columns is-mobile" v-for="(subpedidoExistente, index) in subpedidosExistentes" :class="{'has-background-grey-lighter': index % 2}">
|
||||
<div class="column is-half-mobile is-two-thirds-desktop is-two-thirds-tablet"><p style="padding-top: calc(.5em - 1px); margin-bottom: .5rem" v-text="subpedidoExistente.nombre"></p></div>
|
||||
<div class="buttons column is-half-mobile is-one-third-desktop is-one-third-tablet">
|
||||
<button class="button is-danger" @click="elegirSubpedido(subpedidoExistente)">Continuar pedido</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</subpedido-select>
|
||||
<subpedido-select gdcid="{{Auth::user()->grupoDeCompra->id}}"></subpedido-select>
|
||||
</div>
|
||||
</section>
|
||||
@endsection
|
||||
|
||||
@section('scripts')
|
||||
<script src="{{ asset('js/subpedidos-create.js') }}"></script>
|
||||
@endsection
|
||||
Loading…
Reference in New Issue