finanzas_api/APP/pages/presupuesto.vue

<template>
  <div>
    <card>
      <div class="row">
        <base-input class="col-6">
          <select
            class="form-control"
            @change="onChange()"
            v-model="selectedPresupuestoName"
          >
            <option v-for="presupuesto in presupuestos">
              {{ presupuesto.nombrePresupuesto }}
            </option>
          </select>
        </base-input>

        <base-button
          type="danger"
          icon
          size="sm"
          v-if="selectedPresupuesto.nombrePresupuesto !== ''"
          class="btn-link"
          @click="deletePresupuesto()"
        >
          <i class="el-icon-delete-solid"></i>
        </base-button>

        <div class="row pull-right pull-buttom">
          <div class="col-12">
            <Fpresupuesto
              :newPresupuesto="newPresupuesto"
              :savePresupuesto="savePresupuesto"
              :isOpen="isOpen"
            />
          </div>
        </div>
      </div>
    </card>
    <card
      title="Presupuesto"
      v-if="selectedPresupuesto.nombrePresupuesto !== ''"
    >
      <div class="row">
        <div class="col-8">
          <el-table
            :data="selectedPresupuesto.datos"
            border
            empty-text="No hay items"
            stripe
            style="width: 100%"
            height="300"
          >
            <el-TableColumn prop="detalle" label="Detalle" sortable>
            </el-TableColumn>

            <el-TableColumn prop="valor" label="Valor" sortable>
            </el-TableColumn>

            <el-TableColumn prop="tipo" label="Tipo" sortable> </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="deleteItem(row._id)"
                  >
                    <i class="el-icon-delete-solid"></i>
                  </base-button>
                </el-tooltip>
              </div>
            </el-TableColumn>
          </el-table>
        </div>

        <div class="col-4">
          <base-input v-model="newItem.detalle" label="Descripción">
          </base-input>
          <base-input v-model="newItem.valor" type="Number"> </base-input>
          <base-input>
            <select class="form-control" v-model="newItem.tipo">
              <option>Ingreso</option>
              <option>Egreso</option>
            </select>
          </base-input>
          <base-button
            type="info"
            class="mb-3 col-12"
            size="lg"
            @click="addItem()"
            >Guardar</base-button
          >
        </div>
      </div>
    </card>

    <card>
      <div class="row">
        <div class="col-4">
          <b>Ingresos: </b> {{ formatMoneda(totalIngresos) }}
        </div>
        <div class="col-4">
          <b>Egreso:</b> <span>{{ formatMoneda(totalEgresos) }} </span>
        </div>
        <div class="col-4">
          <b
            >Total:<span :class="[total < 0 ? 'text-danger' : 'text-success']">
              {{ formatMoneda(total) }}</span
            ></b
          >
        </div>
      </div>
    </card>
  </div>
</template>

<script>
import { Table, TableColumn } from "element-ui";

export default {
  components: {
    [Table.name]: Table,
    [TableColumn.name]: TableColumn,
  },
  middleware: "authenticated",
  data() {
    return {
      isOpen: false,

      newPresupuesto: {
        nombrePresupuesto: "",
      },
      selectedPresupuesto: {
        _id: "",
        nombrePresupuesto: "",
        datos: [],
      },
      selectedPresupuestoName: "",
      newItem: {
        _id: "",
        detalle: "",
        valor: 0,
        tipo: "Egreso",
      },

      presupuestos: [],
      totalIngresos: 0,
      totalEgresos: 0,
      total: 0,
    };
  },
  methods: {
    savePresupuesto() {
      const axiosHeader = {
        headers: {
          token: this.$store.state.auth.token,
        },
      };
      this.newPresupuesto.nombrePresupuesto = this.newPresupuesto.nombrePresupuesto.trim();
      const toSend = this.newPresupuesto;
      this.$axios
        .post("/presupuesto", toSend, axiosHeader)
        .then((res) => {
          this.$notify({
            type: "success",
            icon: "tim-icons icon-check-2",
            message: "Presupuesto Creado",
          });
          this.isOpen = false;
          this.getPresupuesto();
        })
        .catch((e) => {
          this.$notify({
            type: "danger",
            icon: "tim-icons icon-alert-circle-exc",
            message: "El presupuesto ya existe :(",
          });
          return;
        });
    },
    addItem() {
    
      const axiosHeader = {
        headers: {
          token: this.$store.state.auth.token,
        },
      };
      const toSend = this.newItem;
      this.$axios
        .put("/presupuesto", toSend, axiosHeader)
        .then((res) => {
          console.log(res.data.status);
          this.getItems();
        })
        .catch((e) => console.log(e));
    },
    deleteItem(item_id) {
      const axiosHeader = {
        headers: {
          token: this.$store.state.auth.token,
        },
        params: {
          idPresupuesto: this.selectedPresupuesto._id,
          iditem: item_id,
        },
      };
      this.$axios
        .delete("/presupuestoitem", axiosHeader)
        .then((res) => {
          this.getItems();
        })
        .catch((e) => console.log(e));
    },
    getItems() {
      const axiosHeader = {
        headers: {
          token: this.$store.state.auth.token,
        },
        params: {
          presupuesto_id: this.selectedPresupuesto._id,
        },
      };
      this.$axios
        .get("/presupuesto_items", axiosHeader)
        .then((res) => {
          this.selectedPresupuesto.datos = res.data.data;
          this.sumItems();
        })
        .catch((e) => console.log(e));
    },

    sumItems() {
      this.totalIngresos = this.selectedPresupuesto.datos.reduce(
        (acc, x) => (x.tipo === "Ingreso" ? acc + Number(x.valor) : acc),
        0
      );

      this.totalEgresos = this.selectedPresupuesto.datos.reduce(
        (acc, x) => (x.tipo === "Egreso" ? acc + Number(x.valor) : acc),
        0
      );
      this.total = this.totalIngresos - this.totalEgresos;
    },
    formatMoneda(dato) {
      var num = dato;
      if (!isNaN(num)) {
        num = Math.abs(num)
          .toString()
          .split("")
          .reverse()
          .join("")
          .replace(/(?=\d*\.?)(\d{3})/g, "$1.");
        num = num.split("").reverse().join("").replace(/^[\.]/, "");
        return `$ ${num}`;
      }
    },
    getPresupuesto() {
      const axiosHeader = {
        headers: {
          token: this.$store.state.auth.token,
        },
      };

      this.$axios
        .get("/presupuesto", axiosHeader)
        .then((res) => {
          this.presupuestos = [];
          if (res.data.data.length) {
            this.presupuestos = res.data.data;
            this.selectedPresupuesto = this.presupuestos[0];
            this.selectedPresupuestoName = this.selectedPresupuesto.nombrePresupuesto;
            this.newItem._id = this.selectedPresupuesto._id;
            console.log(this.selectedPresupuesto);
            this.sumItems();
          }
        })
        .catch((e) => console.log(e));
    },
    onChange() {
      this.selectedPresupuesto = this.presupuestos.find(
        (x) => x.nombrePresupuesto === this.selectedPresupuestoName
      );
      this.newItem._id = this.selectedPresupuesto._id;
      this.sumItems();
    },
    deletePresupuesto() {
      console.log(this.selectedPresupuesto._id);
      const axiosHeader = {
        headers: {
          token: this.$store.state.auth.token,
        },
        params: {
          id: this.selectedPresupuesto._id,
        },
      };
      this.$axios
        .delete("/presupuesto", axiosHeader)
        .then((res) => {
          console.log(res.data);

          this.selectedPresupuesto = {
            _id: "",
            nombrePresupuesto: "",
            datos: [],
          };
          this.selectedPresupuestoName = "";
          this.getPresupuesto();
        })
        .catch((e) => console.log(e));
    },
  },
  mounted() {
    this.getPresupuesto();
  },
};
</script>

<style>
</style>