finanzas_api/APP/pages/configuracion.vue

<template>
  <div>
    <card title="Filtro general">
      <base-input label="Filtro de fechas" v-model="filtro.fechas"></base-input>
      <base-input
        label="Número de presupuestos"
        type="number"
        v-model="filtro.npresupuesto"
      ></base-input>
      <base-button @click="guardarFiltro()" type="info">Guardar</base-button>
    </card>
    <div class="row">
      <card title="Categorias">
        <div class="row">
          <div class="col-8">
            <el-table :data="categorias" border height="500">
              <el-TableColumn prop="name" label="Nombre Categoría" sortable>
              </el-TableColumn>

              <el-TableColumn prop="icon" label="Icono" sortable>
                <div slot-scope="{ row, $index }">
                  <i class="fas text-success fa-2x" :class="[row.icon]"></i>
                </div>
              </el-TableColumn>
              <el-TableColumn>
                <div slot-scope="{ row, $index }">
                  <el-tooltip content="Delete" effect="light">
                    <base-button
                      type="danger"
                      icon
                      size="sm"
                      class="btn-link"
                      @click="deleteCategoria(row._id)"
                    >
                      <i class="fa fa-trash"></i>
                    </base-button>
                  </el-tooltip>
                </div>
              </el-TableColumn>
            </el-table>
          </div>
          <div class="col-4">
            <form>
              <base-input
                type="text"
                placeholder="Nombre de categoria"
                v-model="newCategoria.name"
              />

              <base-input>
                <select class="form-control" v-model="newCategoria.icon">
                  <option v-for="icono in iconos">
                    {{ icono.icon }}
                  </option>
                </select>
              </base-input>

              <div class="col pull-buttom">
                <base-button
                  type="info"
                  class="mb-3"
                  size="lg"
                  @click="enviarCategoria()"
                  >Enviar</base-button
                >
              </div>
            </form>
          </div>
        </div>
      </card>
    </div>

    <div class="row">
      <card title="Metodos de pago">
        <div class="row">
          <div class="col-8">
            <el-table :data="metodos" border height="500">
              <el-TableColumn prop="name" label="Nombre Categoría" sortable>
              </el-TableColumn>

              <el-TableColumn prop="icon" label="Icono" sortable>
                <div slot-scope="{ row, $index }">
                  <i class="fas text-success fa-2x" :class="[row.icon]"></i>
                </div>
              </el-TableColumn>
              <el-TableColumn>
                <div slot-scope="{ row, $index }">
                  <el-tooltip content="Delete" effect="light">
                    <base-button
                      type="danger"
                      icon
                      size="sm"
                      class="btn-link"
                      @click="deleteMetodo(row._id)"
                    >
                      <i class="fa fa-trash"></i>
                    </base-button>
                  </el-tooltip>
                </div>
              </el-TableColumn>
            </el-table>
          </div>
          <div class="col-4">
            <form>
              <base-input
                placeholder="Nombre pago"
                v-model="newMetodo.name"
              ></base-input>
              <base-input>
                <select class="form-control" v-model="newMetodo.icon">
                  <option v-for="icono in iconos">
                    {{ icono.icon }}
                  </option>
                </select>
              </base-input>

              <div class="col pull-buttom">
                <base-button
                  type="info"
                  class="mb-3"
                  size="lg"
                  @click="enviarMetodo()"
                  >Enviar</base-button
                >
              </div>
            </form>
          </div>
        </div>
      </card>
    </div>
  </div>
</template>

<script>
import { Table, TableColumn } from "element-ui";
export default {
  middleware: "authenticated",
  components: {
    [Table.name]: Table,
    [TableColumn.name]: TableColumn,
  },
  mounted() {
    this.getCategorias();
    this.getMetodos();
    this.filtro = JSON.parse(JSON.stringify(this.$store.state.filtro));
  },
  data() {
    return {
      newCategoria: {
        name: "",
        icon: "",
      },
      newMetodo: {
        name: "",
        icon: "",
      },

      iconos: [
        { icon: "fa-bell" },
        { icon: "fa-book" },
        { icon: "fa-bookmark" },
        { icon: "fa-adjust" },
        { icon: "fa-puzzle-piece" },
        { icon: "fa-heart" },
        { icon: "fa-hotel" },
        { icon: "fa-plug" },
        { icon: "fa-square" },
        { icon: "fa-truck" },
        { icon: "fa-bus" },
        { icon: "fa-university" },
        { icon: "fa-tasks" },
        { icon: "fa-shopping-bag" },
        { icon: "fa-graduation-cap" },
        { icon: "fa-shopping-cart" },
        { icon: "fa-microchip" },
        { icon: "fa-bath" },
        { icon: "fa-star" },
        { icon: "fa-suitcase" },
        { icon: "fa-tablet" },
        { icon: "fa-terminal" },
        { icon: "fa-address-card" },
        { icon: "fa-credit-card" },
        { icon: "fa-paypal" },
        { icon: "fa-cc-mastercard" },
        { icon: "fa-cc-visa" },
        { icon: "fa-money" },
        { icon: "fa-bank" },
      ],
      categorias: [],
      metodos: [],
      filtro: {
        fechas: "",
        npresupuesto: 0
      },
    };
  },
  methods: {
    guardarFiltro() {
      this.$store.commit("actualizarFiltro", this.filtro);
    },
    enviarCategoria() {
      const axiosHeader = {
        headers: {
          token: this.$store.state.auth.token,
        },
      };
      const toSend = this.newCategoria;

      this.$axios
        .post("/categoria", toSend, axiosHeader)
        .then((res) => {
          this.getCategorias();
        })
        .catch((e) => {
          this.$notify({
            type: "danger",
            icon: "tim-icons icon-alert-circle-exc",
            message: JSON.parse(e.request.response).error,
          });
        });
    },

    getCategorias() {
      const axiosHeader = {
        headers: {
          token: this.$store.state.auth.token,
        },
      };
      this.$axios
        .get("/categoria", axiosHeader)
        .then((res) => {
          this.categorias = res.data.data;
          this.$store.commit("setCategorias", this.categorias);
        })
        .catch((e) => console.log(e));
    },
    deleteCategoria(id) {
      const axiosHeader = {
        headers: {
          token: this.$store.state.auth.token,
        },
        params: {
          id: id,
        },
      };
      this.$axios
        .delete("/categoria", axiosHeader)
        .then((res) => {
          this.getCategorias();
        })
        .catch((e) => {
          console.log(e);
        });
    },
    enviarMetodo() {
      const axiosHeader = {
        headers: {
          token: this.$store.state.auth.token,
        },
      };
      const toSend = this.newMetodo;

      this.$axios
        .post("/metodo", toSend, axiosHeader)
        .then((res) => {
          this.getMetodos();
        })
        .catch((e) => {
          this.$notify({
            type: "danger",
            icon: "tim-icons icon-alert-circle-exc",
            message: JSON.parse(e.request.response).error,
          });
        });
    },

    getMetodos() {
      const axiosHeader = {
        headers: {
          token: this.$store.state.auth.token,
        },
      };
      this.$axios
        .get("/metodo", axiosHeader)
        .then((res) => {
          this.metodos = res.data.data;
          this.$store.commit("setMetodos", this.metodos);
        })
        .catch((e) => console.log(e));
    },
    deleteMetodo(id) {
      const axiosHeader = {
        headers: {
          token: this.$store.state.auth.token,
        },
        params: {
          id: id,
        },
      };
      this.$axios
        .delete("/metodo", axiosHeader)
        .then((res) => {
          this.getMetodos();
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
};
</script>

<style>
</style>