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

Cambio de lógica para usar el modulo admin de la store

Browse source
This commit is contained in:
Alejandro Tasistro 2025-05-19 00:17:50 -03:00
parent e6770172ac
commit 47ce7e3bd8
7 changed files with 99 additions and 160 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
resources/js/components/admin/Body.vue
View file

@ -1,15 +1,11 @@
<template>
<div class="block ml-3 mr-3 is-max-widescreen is-max-desktop">
<comunes-tabs-secciones :tabs="tabs" :tabInicial="tabActiva"></comunes-tabs-secciones>
<tabs-secciones :tabs="tabs" :tabInicial="tabActiva"></tabs-secciones>
<div class="block" id="pedidos-seccion"
:class="seccionActiva === 'pedidos-seccion' ? 'is-active' : 'is-hidden'">
<div class="block pb-6" id="pedidos-tabla-y-dropdown" v-if="hayPedidos">
<admin-dropdown-descargar
:gdc_id="gdc.id">
</admin-dropdown-descargar>
<admin-tabla-pedidos
:gdc="this.gdc"
></admin-tabla-pedidos>
<dropdown-descargar></dropdown-descargar>
<tabla-pedidos></tabla-pedidos>
</div>
<p class="has-text-centered" v-else>
Todavía no hay ningún pedido para administrar.
@ -17,8 +13,7 @@
</div>
<div class="block pb-6" id="caracteristicas-seccion"
:class="seccionActiva === 'caracteristicas-seccion' ? 'is-active' : 'is-hidden'">
<admin-caracteristicas-opcionales>
</admin-caracteristicas-opcionales>
<caracteristicas-opcionales></caracteristicas-opcionales>
</div>
</div>
</template>
@ -29,7 +24,7 @@ import TabsSecciones from "../comunes/TabsSecciones.vue";
import DropdownDescargar from "./DropdownDescargar.vue";
import TablaPedidos from "./TablaPedidos.vue";
import TablaBonos from "./TablaBonos.vue";
import axios from "axios";
import { mapActions, mapGetters } from "vuex";
export default {
components: {
CaracteristicasOpcionales,
@ -40,7 +35,6 @@ export default {
},
data() {
return {
gdc: undefined,
tabs: [{ id: "pedidos", nombre: "Pedidos" },
{ id: "caracteristicas", nombre: "Caracteristicas opcionales" }],
tabActiva: "pedidos",
@ -48,32 +42,17 @@ export default {
}
},
computed: {
hayPedidos: function() {
return this.gdc && this.gdc.pedidos.length !== 0
},
hayAprobados: function() {
return this.gdc && this.gdc.pedidos.filter(p => p.aprobado).length > 0
}
...mapGetters('admin', ['hayPedidos']),
},
methods: {
...mapActions('admin', ['getGrupoDeCompra']),
setSeccionActiva(tabId) {
this.tabActiva = tabId;
this.seccionActiva = tabId + "-seccion";
},
actualizar() {
axios.get('/api/grupos-de-compra/' + this.$root.gdc)
.then(response => {
this.gdc = response.data.data;
console.log(this.gdc);
})
}
},
async mounted() {
Event.$on('sync-aprobacion', (_) => {
this.actualizar();
});
await new Promise(r => setTimeout(r, 1000));
this.actualizar();
await this.getGrupoDeCompra();
},
}
</script>

8
resources/js/components/admin/CaracteristicasOpcionales.vue
View file

@ -8,8 +8,7 @@ export default {
caracteristicas: [
{
id: "devoluciones",
nombre: "Devoluciones",
habilitada: false
nombre: "Devoluciones"
},
]
}
@ -27,16 +26,15 @@ export default {
</tr>
</thead>
<tbody>
<admin-fila-caracteristica
<fila-caracteristica
v-for="(c,i) in caracteristicas"
:key="i"
:caracteristica="c">
</admin-fila-caracteristica>
</fila-caracteristica>
</tbody>
</table>
</div>
</template>
<style scoped>
</style>

24
resources/js/components/admin/DropdownDescargar.vue
View file

@ -14,13 +14,13 @@
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a :href="'/admin/exportar-pedido-a-csv/' + gdc_id" class="dropdown-item has-background-primary">
<a :href="'/admin/exportar-pedido-a-csv/' + grupo_de_compra_id" class="dropdown-item has-background-primary">
Planilla para central (CSV)
</a>
<a :href="'/admin/exportar-planillas-a-pdf/' + gdc_id" class="dropdown-item">
<a :href="'/admin/exportar-planillas-a-pdf/' + grupo_de_compra_id" class="dropdown-item">
Planillas para armado (PDF)
</a>
<a :href="'/admin/exportar-pedido-con-nucleos-a-csv/' + gdc_id" class="dropdown-item">
<a :href="'/admin/exportar-pedido-con-nucleos-a-csv/' + grupo_de_compra_id" class="dropdown-item">
Planilla completa de la canasta (CSV)
</a>
</div>
@ -30,27 +30,19 @@
</template>
<script>
import { mapGetters, mapState } from "vuex";
export default {
props: {
gdc_id: {
type: Number,
required: true
},
},
data() {
return {
dropdownActivo: false
}
};
},
computed: {
hayAprobados: function() {
return this.$parent.hayAprobados;
}
...mapState('admin',["grupo_de_compra_id"]),
...mapGetters('admin',["hayAprobados"]),
},
}
</script>
<style>
</style>
<style></style>

58
resources/js/components/admin/FilaCaracteristica.vue
View file

@ -1,48 +1,20 @@
<script>
import axios from "axios";
import {mapActions, mapGetters, mapState} from "vuex";
export default {
props: {
caracteristica: Object
},
data() {
return {
gdc: undefined
computed: {
...mapState('admin',["grupo_de_compra_id"]),
...mapGetters('admin',["getCaracteristica"]),
habilitada() {
return this.getCaracteristica(this.caracteristica.id);
}
},
watch: {
'$root.gdc' : {
handler(newValue) {
if (newValue) {
this.gdc = newValue;
this.obtenerValor();
}
}
},
},
methods: {
toggleActivacion() {
const id = this.caracteristica.id;
axios.post(`/api/grupos-de-compra/${this.gdc}/${id}`)
.then(response => {
this.caracteristica.habilitada = response.data[id];
this.$root[id] = response.data[id];
});
},
obtenerValor() {
const id = this.caracteristica.id;
axios.get(`/api/grupos-de-compra/${this.gdc}/${id}`)
.then(response => {
this.caracteristica.habilitada = response.data[id];
this.$root[id] = response.data[id];
});
},
},
mounted() {
if (this.$root.gdc) {
this.gdc = this.$root.gdc;
this.obtenerValor();
}
...mapActions('admin',["toggleCaracteristica"]),
}
}
</script>
@ -53,17 +25,17 @@ export default {
<td>
<div class="field">
<input type="checkbox" class="switch is-rounded is-success"
:id="'switch-'+caracteristica.id"
:checked="caracteristica.habilitada"
@change="toggleActivacion(caracteristica)">
<label :for="'switch-'+caracteristica.id">
<span class="is-hidden-mobile">{{ caracteristica.habilitada ? 'Habilitada' : 'Deshabilitada' }}</span>
:id="'switch-' + caracteristica.id"
:checked="habilitada"
@change="toggleCaracteristica({ caracteristica_id: caracteristica.id })">
<label :for="'switch-' + caracteristica.id">
<span class="is-hidden-mobile">
{{ habilitada ? 'Habilitada' : 'Deshabilitada' }}
</span>
</label>
</div>
</td>
</tr>
</template>
<style scoped>
</style>
<style scoped></style>

39
resources/js/components/admin/FilaPedido.vue
View file

@ -1,36 +1,39 @@
<template>
<tr>
<td>{{ pedido.nombre }}</td>
<td v-if="$root.devoluciones" class="has-text-right" >{{ pedido.total_sin_devoluciones }}</td>
<td v-if="$root.devoluciones" class="has-text-right" ><abbr :title="pedido.devoluciones_notas">-{{ pedido.devoluciones_total }}</abbr></td>
<td class="has-text-right" >{{ $root.devoluciones ? pedido.total : pedido.total_sin_devoluciones }}</td>
<td>
<admin-switch-aprobacion
:pedido="pedido">
</admin-switch-aprobacion>
<td v-if="devoluciones_habilitadas" class="has-text-right" >
{{ pedido.total_sin_devoluciones }}
</td>
<td v-if="devoluciones_habilitadas" class="has-text-right" >
<abbr :title="pedido.devoluciones_notas">
-{{ pedido.devoluciones_total }}
</abbr>
</td>
<td class="has-text-right" >
{{ devoluciones_habilitadas ? pedido.total : pedido.total_sin_devoluciones }}
</td>
<td><switch-aprobacion :pedido_id="pedido_id"></switch-aprobacion></td>
</tr>
</template>
<script>
import SwitchAprobacion from "./SwitchAprobacion.vue";
import { mapGetters, mapState } from "vuex";
export default {
components: {
SwitchAprobacion
},
props: {
pedido: Object
pedido_id: Number
},
computed: {
...mapState('admin',["devoluciones_habilitadas"]),
...mapGetters('admin',["getPedido"]),
pedido() {
return this.getPedido(this.pedido_id);
},
},
mounted() {
Event.$on('sync-aprobacion', (unPedido) => {
if (this.pedido.id === unPedido.id) {
this.pedido = unPedido
}
})
}
}
</script>
<style scoped>
</style>
<style scoped></style>

40
resources/js/components/admin/SwitchAprobacion.vue
View file

@ -1,46 +1,34 @@
<template>
<div class="field">
<input type="checkbox" name="switchRoundedSuccess" class="switch is-rounded is-success"
:id="'switch'+this.pedido.id"
:checked="pedido.aprobado"
@change="toggleAprobacion">
<label :for="'switch'+this.pedido.id">
:id="'switch' + pedido_id"
:checked="aprobado"
@change="setAprobacionPedido({ pedido_id: pedido_id, aprobacion: !aprobado })">
<label :for="'switch' + pedido_id">
<span class="is-hidden-mobile">{{ mensaje }}</span>
</label>
</div>
</template>
<script>
import { mapActions, mapGetters } from "vuex";
export default {
props: {
pedido: Object
},
data() {
return {
aprobado: this.pedido.aprobado
}
pedido_id: Number
},
computed: {
mensaje: function () {
return this.aprobado ? "Pagado" : "No pagado"
...mapGetters('admin', ["getPedido"]),
aprobado() {
return this.getPedido(this.pedido_id).aprobado;
},
mensaje() {
return this.aprobado ? "Pagado" : "No pagado";
}
},
methods: {
toggleAprobacion() {
Event.$emit('aprobacion-subpedido', this.pedido.id, !this.aprobado);
this.aprobado = !this.aprobado
}
...mapActions('admin',["setAprobacionPedido"]),
},
mounted() {
Event.$on('sync-aprobacion', (unPedido) => {
if (this.pedido.id === unPedido.id) {
this.pedido = unPedido
}
})
}
}
</script>
<style scoped>
</style>
<style scoped></style>

53
resources/js/components/admin/TablaPedidos.vue
View file

@ -4,17 +4,18 @@
<thead>
<tr>
<th>Núcleo</th>
<th v-if="$root.devoluciones"><abbr title="Total sin tomar en cuenta las devoluciones">Total parcial $</abbr></th>
<th v-if="$root.devoluciones"><abbr title="Devoluciones correspondientes al núcleo">Devoluciones $</abbr></th>
<th><abbr title="Total a Pagar por el núleo">{{ $root.devoluciones ? 'Total real' : 'Total' }} $</abbr></th>
<th v-if="devoluciones_habilitadas"><abbr title="Total sin tomar en cuenta las devoluciones">Total parcial $</abbr></th>
<th v-if="devoluciones_habilitadas"><abbr title="Devoluciones correspondientes al núcleo">Devoluciones $</abbr></th>
<th><abbr title="Total a Pagar por el núleo">{{ devoluciones_habilitadas ? 'Total real' : 'Total' }} $</abbr></th>
<th class="is-1"><abbr title="Pagado">Pagado</abbr></th>
</tr>
</thead>
<tbody>
<admin-fila-pedido
v-for="pedido in gdc.pedidos"
:pedido="pedido" :key="pedido.id">
</admin-fila-pedido>
<fila-pedido
v-for="pedido in pedidos"
:pedido_id="pedido.id"
:key="pedido.id">
</fila-pedido>
</tbody>
</table>
<table class="table is-striped is-bordered">
@ -23,27 +24,27 @@
</tr>
<tr>
<th>Total a recaudar:</th>
<td class="has-text-right">$ {{ gdc.total_a_recaudar }}</td>
<td class="has-text-right">$ {{ total_a_recaudar }}</td>
</tr>
<tr>
<th>Total bonos barriales:</th>
<td class="has-text-right">$ {{ gdc.total_barrial }}</td>
<td class="has-text-right">$ {{ total_barrial }}</td>
</tr>
<tr v-if="$root.devoluciones">
<tr v-if="devoluciones_habilitadas">
<th>Total devoluciones:</th>
<td class="has-text-right">- $ {{ gdc.total_devoluciones }}</td>
<td class="has-text-right">- $ {{ total_devoluciones }}</td>
</tr>
<tr>
<th>Cantidad bonos de transporte:</th>
<td class="has-text-right">{{ gdc.cantidad_transporte }}</td>
<td class="has-text-right">{{ cantidad_transporte }}</td>
</tr>
<tr>
<th>Total bonos de transporte:</th>
<td class="has-text-right">$ {{ gdc.total_transporte }}</td>
<td class="has-text-right">$ {{ total_transporte }}</td>
</tr>
<tr>
<th>Total a depositar:</th>
<td class="has-text-right">$ {{ gdc.total_a_transferir }}</td>
<td class="has-text-right">$ {{ total_a_transferir }}</td>
</tr>
</table>
</div>
@ -51,19 +52,25 @@
<script>
import FilaPedido from "./FilaPedido.vue";
import { mapGetters, mapState } from "vuex";
export default {
components: {
FilaPedido
},
props: {
gdc: {
type: Object,
required: true
}
}
computed: {
...mapState('admin', [
"devoluciones_habilitadas",
"pedidos",
"total_a_recaudar",
"total_barrial",
"total_devoluciones",
"cantidad_transporte",
"total_transporte",
"total_a_transferir",
]),
...mapGetters('admin', ['pedidosAprobados']),
},
}
</script>
<style>
</style>
<style></style>