Agregados seccion, fila, y logica para obtener y modificar parametros desde comisiones

resources/js/components/comisiones/Body.vue

@@ -18,6 +18,11 @@
              :class="seccionActiva === 'saldos-comisiones-seccion' ? 'is-active' : 'is-hidden'">
             <saldos-seccion/>
         </div>
+        <div class="block pb-6"
+             id="parametros-comisiones-seccion"
+             :class="seccionActiva === 'parametros-comisiones-seccion' ? 'is-active' : 'is-hidden'">
+            <parametros-seccion/>
+        </div>
     </div>
 </template>
 
@@ -27,11 +32,12 @@ import DropdownDescargar from "./DropdownDescargar.vue";
 import InputFileButton from "../comunes/InputFileButton.vue";
 import CanastaSeccion from "./canasta/CanastaSeccion.vue";
 import SaldosSeccion from "./saldos/SaldosSeccion.vue";
-import { mapActions } from "vuex";
+import ParametrosSeccion from "./parametros/ParametrosSeccion.vue";
 
 export default {
     name: "ComisionesBody",
     components: {
+        ParametrosSeccion,
         SaldosSeccion,
         CanastaSeccion,
         TabsSecciones,
@@ -44,6 +50,7 @@ export default {
                 { id: "pedidos-comisiones", nombre: "Pedidos" },
                 { id: "canasta-comisiones", nombre: "Canasta" },
                 { id: "saldos-comisiones", nombre: "Saldos" },
+                { id: "parametros-comisiones", nombre: "Parámetros" },
             ],
             tabActiva: "pedidos-comisiones",
             seccionActiva: "pedidos-comisiones-seccion",

resources/js/components/comisiones/parametros/FilaParametro.vue

@@ -0,0 +1,71 @@
+<script>
+import {mapActions, mapGetters} from "vuex";
+
+export default {
+    props: {
+        parametro: {
+            type: Object,
+            required: true,
+        }
+    },
+    data() {
+        return {
+            control: this.parametro.valor,
+        };
+    },
+    computed: {
+        hayCambios() {
+            return this.control !== this.parametro.valor;
+        }
+    },
+    methods: {
+        ...mapActions("comisiones", ["cambiarParametro"]),
+        modificar() {
+            this.cambiarParametro({
+                parametro_id: this.parametro.id,
+                valor: this.control,
+            });
+        }
+    }
+}
+</script>
+
+<template>
+    <tr>
+        <td>{{ parametro.nombre }}</td>
+        <td>
+            <div class="field">
+                <input :type="parametro.tipo"
+                       :id="'input-' + parametro.id"
+                       v-model="control"
+                       class="has-text-right">
+            </div>
+        </td>
+        <td class="has-text-centered">
+            <div class="control">
+                <button class="button is-small is-success"
+                        @click="modificar"
+                        :disabled="!hayCambios">
+                        <span class="icon">
+                            <i class="fas fa-check"></i>
+                        </span>
+                </button>
+            </div>
+        </td>
+        <td class="has-text-centered">
+            <div class="control">
+                <button class="button is-small is-danger"
+                        @click="control = parametro.valor"
+                        :disabled="!hayCambios">
+                        <span class="icon">
+                            <i class="fa fa-undo" aria-hidden="true"></i>
+                        </span>
+                </button>
+            </div>
+        </td>
+    </tr>
+</template>
+
+<style scoped>
+
+</style>

resources/js/components/comisiones/parametros/ParametrosSeccion.vue

@@ -0,0 +1,41 @@
+<script>
+import FilaCaracteristica from "../../admin/FilaCaracteristica.vue";
+import FilaParametro from "./FilaParametro.vue";
+import { mapActions, mapState } from "vuex";
+
+export default {
+    name:"ParametrosSeccion",
+    components: { FilaParametro, FilaCaracteristica },
+    methods: {
+        ...mapActions("comisiones", ["getParametros"]),
+    },
+    computed: {
+        ...mapState("comisiones", ["parametros"]),
+    },
+    async mounted() {
+        await this.getParametros();
+    },
+}
+</script>
+
+<template>
+    <table class="table is-striped is-bordered">
+        <thead>
+            <tr>
+                <th> Parámetro </th>
+                <th> Valor $ </th>
+                <th> Cambiar </th>
+                <th> Deshacer </th>
+            </tr>
+        </thead>
+        <tbody>
+            <fila-parametro v-for="(p,i) in parametros"
+                            :key="i"
+                            :parametro="p"/>
+        </tbody>
+    </table>
+</template>
+
+<style scoped>
+
+</style>

resources/js/store/modules/comisiones.js

@@ -3,6 +3,7 @@ import axios from "axios";
 const state = {
     lastFetch: undefined,
     grupos_de_compra: [],
+    parametros: [],
 };
 
 const mutations = {
@@ -10,6 +11,15 @@ const mutations = {
         state.grupos_de_compra = data;
         state.lastFetch = new Date();
     },
+    setParametros(state, parametros) {
+        state.parametros = parametros;
+        state.parametros.forEach(
+            p => p.valor = Number.parseInt(p.valor)
+        );
+    },
+    actualizarParametro(state, { parametro_id, valor }) {
+        state.parametros.find(p => p.id === parametro_id).valor = valor;
+    },
     setSaldo(state, { gdc_id, saldo }) {
         const barrio = state.grupos_de_compra.find(gdc => gdc.id === gdc_id);
         const i = state.grupos_de_compra.indexOf(barrio);
@@ -22,6 +32,22 @@ const actions = {
         const response = await axios.get('/api/grupos-de-compra/saldos');
         commit('setGruposDeCompra', response.data);
     },
+    async getParametros({ commit }) {
+        const response = await axios.get('/api/parametros');
+        commit('setParametros', response.data);
+    },
+    async cambiarParametro({ commit, dispatch }, { parametro_id, valor }) {
+        try {
+            await axios.put(
+                `/comisiones/parametros/${parametro_id}`,
+                { valor: valor }
+            );
+            commit('actualizarParametro', { parametro_id, valor });
+            dispatch("ui/toast", { mensaje: 'Parámetro modificado con éxito' }, { root: true });
+        } catch (error) {
+            dispatch("ui/error", { error: error }, { root: true });
+        }
+    },
     async setSaldo({ commit, dispatch }, { gdc_id, saldo }) {
         try {
             await axios.post(