felix
/
pedi2
forked from nathalie/pedi2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

refactor

This commit is contained in:
nat 2022-05-25 19:03:29 -03:00
parent dce0620365
commit 8d5e780f94
29 changed files with 19220 additions and 719 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
package.json
View File

@ -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" "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js"
}, },
"devDependencies": { "devDependencies": {
"axios": "^0.19", "axios": "^0.19.2",
"bootstrap": "^4.0.0", "bootstrap": "^4.0.0",
"cross-env": "^7.0", "cross-env": "^7.0",
"jquery": "^3.2", "jquery": "^3.2",
@ -22,5 +22,10 @@
"sass-loader": "^8.0.0", "sass-loader": "^8.0.0",
"vue": "^2.5.17", "vue": "^2.5.17",
"vue-template-compiler": "^2.6.10" "vue-template-compiler": "^2.6.10"
},
"dependencies": {
"animate.css": "^4.1.1",
"bulma": "^0.9.4",
"bulma-toast": "^2.4.1"
} }
} }

7
public/css/animate.min.css vendored
View File

File diff suppressed because one or more lines are too long

37
public/css/app.css vendored
View File

@ -1,33 +1,11 @@
p.navbar-item:empty { @import url(https://fonts.googleapis.com/css?family=Nunito);main.has-top-padding {
display: none; padding-top: 4.5rem !important;
}
.breadcrumb a {
color: #cc0f35;
}
.help {
font-size: 1rem;
} }
table.table td { table.table td {
vertical-align: middle; 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;
}
.has-text-centered { .has-text-centered {
text-align: center; text-align: center;
margin: 0 1em; margin: 0 1em;
@ -38,16 +16,7 @@ main.has-top-padding {
z-index: 30; z-index: 30;
} }
.chismosa-container {
top: 6.5rem;
max-height: 21rem;
overflow-y: scroll;
overflow-x: hidden;
width: 100%;
position: fixed;
z-index: 15;
}
main.chisma-abierta { main.chisma-abierta {
padding-top: 25.5rem !important; padding-top: 25.5rem !important;
} }

10
public/css/productos.css vendored
View File

@ -1,10 +0,0 @@
figure.image.icono {
float: right;
margin: 4px;
}
.is-thin-centered {
width: 50%;
margin-left: auto;
margin-right: auto;
}

18517
public/js/app.js vendored
View File

File diff suppressed because one or more lines are too long

6
public/js/bulma-toast.min.js vendored
View File

File diff suppressed because one or more lines are too long

109
public/js/chismosa.js vendored
View File

@ -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");
}
}
})

114
public/js/login.js vendored
View File

@ -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'
});

205
public/js/productos.js vendored
View File

@ -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);
});
}
});

56
public/js/subpedidos-create.js vendored
View File

@ -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';
});
}
}
});

4
public/mix-manifest.json Normal file
View File

@ -0,0 +1,4 @@
{
"/js/app.js": "/js/app.js",
"/css/app.css": "/css/app.css"
}

16
resources/js/app.js vendored
View File

@ -3,10 +3,12 @@
* includes Vue and other libraries. It is a great starting point when * includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel. * building robust, powerful web applications using Vue and Laravel.
*/ */
import axios from 'axios';
require('./bootstrap'); import animate from 'animate.css';
window.Vue = require('vue'); 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 * 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> * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
*/ */
// const files = require.context('./', true, /\.vue$/i) const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default)) files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
/** /**
* Next, we will create a fresh Vue application instance and attach it to * 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({ const app = new Vue({
el: '#app', el: '#root'
}); });

47
resources/js/components/BarrioSelect.vue Normal file
View File

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

44
resources/js/components/CategoriasContainer.vue Normal file
View File

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

92
resources/js/components/Chismosa.vue Normal file
View File

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

23
resources/js/components/ExampleComponent.vue
View File

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

40
resources/js/components/Login.vue Normal file
View File

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

87
resources/js/components/NavBar.vue Normal file
View File

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

50
resources/js/components/NavMigas.vue Normal file
View File

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

112
resources/js/components/ProductoModal.vue Normal file
View File

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

34
resources/js/components/ProductoRow.vue Normal file
View File

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

72
resources/js/components/ProductosContainer.vue Normal file
View File

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

36
resources/js/components/RegionSelect.vue Normal file
View File

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

88
resources/js/components/SubpedidoSelect.vue Normal file
View File

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

23
resources/sass/app.scss vendored
View File

@ -4,5 +4,24 @@
// Variables // Variables
@import 'variables'; @import 'variables';
// Bootstrap main.has-top-padding {
@import '~bootstrap/scss/bootstrap'; 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;
}

4
resources/views/auth/login.blade.php
View File

@ -29,8 +29,6 @@
</form> </form>
</div> </div>
</section> </section>
<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>
<script src="{{ asset('js/login.js') }}" defer></script>
</body> </body>
</html> </html>

7
resources/views/layouts/app.blade.php
View File

@ -12,17 +12,14 @@
<!-- Fonts --> <!-- Fonts -->
<script src="https://kit.fontawesome.com/9235d1c676.js" crossorigin="anonymous"></script> <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="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/app.css') }}">
<link rel="stylesheet" href="{{ asset('css/animate.min.css') }}">
@yield('stylesheets') @yield('stylesheets')
</head> </head>
<body class="has-navbar-fixed-top"> <body class="has-navbar-fixed-top">
<div id="app"> <div id="root">
<nav-bar> <nav-bar>
<template slot="subpedido">{{ session('subpedido_nombre') ? 'Pedido de '. session('subpedido_nombre') : Auth::user()->name }}</template> <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> <template slot="gdc">{{ session('subpedido_nombre') ? Auth::user()->name : "" }}</template>
@ -45,9 +42,7 @@
</main> </main>
</div> </div>
<!-- Scripts --> <!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="{{ asset('js/app.js') }}" defer></script> <script src="{{ asset('js/app.js') }}" defer></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
@yield('scripts') @yield('scripts')
</body> </body>
</html> </html>

11
resources/views/productos.blade.php
View File

@ -1,17 +1,8 @@
@extends('layouts.app') @extends('layouts.app')
@section('stylesheets')
<link rel="stylesheet" href="{{ asset('css/productos.css') }}">
@endsection
@section('content') @section('content')
<chismosa></chismosa> <chismosa></chismosa>
<categorias-container></categorias-container> <categorias-container></categorias-container>
<productos-container></productos-container> <productos-container></productos-container>
<producto-container></producto-container> <producto-modal></producto-modal>
@endsection
@section('scripts')
<script src="{{ asset('js/productos.js') }}"></script>
<script src="{{ asset('js/chismosa.js') }}"></script>
@endsection @endsection

31
resources/views/subpedidos_create.blade.php
View File

@ -9,39 +9,10 @@
<p class="subtitle"> <p class="subtitle">
Bienvenidx a la aplicación de compras del <strong>Mercado Popular de Subsistencia</strong> Bienvenidx a la aplicación de compras del <strong>Mercado Popular de Subsistencia</strong>
</p> </p>
<subpedido-select inline-template gdcid="{{Auth::user()->grupoDeCompra->id}}"> <subpedido-select gdcid="{{Auth::user()->grupoDeCompra->id}}"></subpedido-select>
<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>
</div> </div>
</section> </section>
@endsection @endsection
@section('scripts') @section('scripts')
<script src="{{ asset('js/subpedidos-create.js') }}"></script>
@endsection @endsection