nathalie
/
pedi2
3
3
Fork 1
Code Issues Pull Requests Projects Releases Wiki Activity

Cismosa: Ajustes visuales

This commit is contained in:
Rodrigo 2024-09-10 22:07:16 -03:00
parent 69cd306263
commit fbae6770df
5 changed files with 69 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
resources/js/components/CategoriasContainer.vue
View File

@ -1,5 +1,5 @@
<template>
<div v-show="visible" class="block ml-3 mr-3">
<div v-show="visible" class="column">
<div class="columns is-multiline is-mobile">
<div v-for="(categoria,i) in categorias" :key="i" class="block column is-one-quarter-desktop is-one-third-tablet is-half-mobile">
<div @click.capture="seleccionarCategoria(categoria)" class="card" style="height:100%" >

109
resources/js/components/Chismosa.vue
View File

@ -1,51 +1,53 @@
<template>
<div class="column">
<table v-show="mostrar_tabla" class="chismosa-tabla table is-narrow 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 class="has-text-right">{{ cantidadBonosDeTransporte() }}</th>
<th class="has-text-right">{{ totalBonosDeTransporte() }}</th>
<th></th>
<th></th>
</tr>
<tr v-if="this.$root.devoluciones">
<th><p>Devoluciones</p></th>
<td><p :title="notasDevoluciones()">...</p></td>
<th class="has-text-right">-{{ devoluciones() }}</th>
<th>
<button @click.capture="modificarDevoluciones()" class="button is-warning">
<span class="icon">
<i class="fas fa-edit"></i>
</span>
</button>
</th>
<th></th>
</tr>
<tr>
<th>Total total</th>
<th></th>
<th class="has-text-right">{{ total() }}</th>
<th></th>
<th></th>
</tr>
</tfoot>
<tbody>
<producto-row v-for="producto in productos()" :producto="producto" :key="producto.id"></producto-row>
</tbody>
</table>
<p class="has-text-centered" v-show="!mostrar_tabla">
Compa, todavía no agregaste nada a la chismosa.
</p>
<div class="column is-one-third full-height">
<div class="fixed-right">
<table v-show="mostrar_tabla" class="table is-striped is-bordered tabla-chismosa">
<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 class="has-text-right">{{ cantidadBonosDeTransporte() }}</th>
<th class="has-text-right">{{ totalBonosDeTransporte() }}</th>
<th></th>
<th></th>
</tr>
<tr v-if="this.$root.devoluciones">
<th><p>Devoluciones</p></th>
<td><p :title="notasDevoluciones()">...</p></td>
<th class="has-text-right">-{{ devoluciones() }}</th>
<th>
<button @click.capture="modificarDevoluciones()" class="button is-warning">
<span class="icon">
<i class="fas fa-edit"></i>
</span>
</button>
</th>
<th></th>
</tr>
<tr>
<th>Total total</th>
<th></th>
<th class="has-text-right">{{ total() }}</th>
<th></th>
<th></th>
</tr>
</tfoot>
<tbody>
<producto-row v-for="producto in productos()" :producto="producto" :key="producto.id"></producto-row>
</tbody>
</table>
<p class="has-text-centered" v-show="!mostrar_tabla">
Compa, todavía no agregaste nada a la chismosa.
</p>
</div>
</div>
</template>
@ -87,4 +89,15 @@
},
},
}
</script>
</script>
<style>
.tabla-chismosa {
width: 100%;
}
.fixed-right {
position: fixed;
overflow-y: auto;
max-height: 88vh;
}
</style>

2
resources/js/components/ChismosaDropdown.vue
View File

@ -31,7 +31,7 @@ export default {
methods: {
toggle() {
this.activa = !this.activa;
Event.$emit("toggle-chismosa");
Event.$emit("toggle-chismosa", this.activa);
},
},
}

11
resources/js/components/PedidoBody.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="columns">
<categorias-container></categorias-container>
<productos-container></productos-container>
<div class="columns ml-3 mr-3">
<categorias-container :class="chismosaActiva ? 'hide-below-1024' : ''"></categorias-container>
<productos-container :class="chismosaActiva ? 'hide-below-1024' : ''"></productos-container>
<chismosa v-show="chismosaActiva"></chismosa>
</div>
</template>
@ -23,9 +23,8 @@
}
},
mounted() {
Event.$on('toggle-chismosa', () => {
this.chismosaActiva = !this.chismosaActiva;
console.log(this.chismosaActiva);
Event.$on('toggle-chismosa', (activa) => {
this.chismosaActiva = activa;
});
},
}

2
resources/js/components/ProductosContainer.vue
View File

@ -1,5 +1,5 @@
<template>
<div v-show="visible" class="block ml-6 mr-6">
<div v-show="visible" class="column">
<div class="columns is-multiline is-mobile">
<producto-card v-for="(producto,i) in productos" :key="i" :producto="producto">
</producto-card><!-- END BLOCK COLUMN -->