finanzas_api/APP/pages/creditos.vue

<template>
  <div>
    <card>
      <div class="row">
        <base-input class="col-6">
          <select
            class="form-control"
            @change="onChange()"
            v-model="selectedCreditoName"
          >
            <option v-for="Credito in Creditos">
              {{ Credito.nombreCredito }}
            </option>
          </select>
        </base-input>

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

        <div class="row pull-right pull-buttom">
          <div class="col-6">
            <Fcredito
              :newCredito="newCredito"
              :saveCredito="saveCredito"
              :isOpen="isOpen"
            />
          </div>
        </div>
      </div>
    </card>

    <card v-if="selectedCredito.nombreCredito !== ''">
      <table>
        <tr>
          <td><b>Credito:</b></td>
          <td>
            <span class="badge bg-Light">{{
              selectedCredito.nombreCredito
            }}</span>
          </td>
        </tr>

        <tr>
          <td><b>Valor Inicial:</b></td>
          <td>
            <span class="badge bg-Light">{{ formatMoneda(selectedCredito.valor) }}</span>
          </td>
        </tr>

        <tr>
          <td><b>Tasa Interés:</b></td>
          <td>
            <span class="badge bg-Light">{{ selectedCredito.tasa_interes }} %</span>
          </td>
        </tr>
      </table>
    </card>

    <card title="Credito" v-if="selectedCredito.nombreCredito !== ''">
      <div class="row">
        <div class="col-8">
          <el-table
            :data="selectedCredito.datos"
            border
            empty-text="No hay items"
            stripe
            style="width: 100%"
            height="300"
          >

            <el-TableColumn prop="fecha" label="Fecha" sortable>
            </el-TableColumn>

            <el-TableColumn prop="detalle" label="Detalle" sortable>
            </el-TableColumn>

            <el-TableColumn prop="valor" label="Valor" sortable :formatter="cell">
            </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
            label="Fecha"
            v-model="newItem.fecha"
            type="Date"
            required
          ></base-input>
          <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>Cuota</option>
              <option>Abono Capital</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>Total Cuotas: </b> {{ formatMoneda(totalCuotas) }}
        </div>
        <div class="col-4">
          <b>Total Abonos a Capital:</b> <span>{{ formatMoneda(totalAbonos) }} </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,

      newCredito: {
        nombreCredito: "",
        valor: 0,
        tasa_interes: 0.0,
      },
      selectedCredito: {
        _id: "",
        nombreCredito: "",
        valor: 0,
        tasa_interes: 0.0,
        datos: [],
      },
      selectedCreditoName: "",
      newItem: {
        _id: "",
        fecha:"",
        detalle: "",
        valor: 0,
        tipo: "Cuota",
      },

      Creditos: [],
      totalCuotas: 0,
      totalAbonos: 0,
      total: 0,
    };
  },
  methods: {
    cell(row, column, cellValue, index) {
      return this.formatMoneda(cellValue);
    },
    saveCredito() {
      const axiosHeader = {
        headers: {
          token: this.$store.state.auth.token,
        },
      };
      this.newCredito.nombreCredito = this.newCredito.nombreCredito.trim();
      const toSend = this.newCredito;
      this.$axios
        .post("/Credito", toSend, axiosHeader)
        .then((res) => {
          this.$notify({
            type: "success",
            icon: "tim-icons icon-check-2",
            message: "Credito Creado",
          });
          this.isOpen = false;
          this.getCredito();
        })
        .catch((e) => {
          this.$notify({
            type: "danger",
            icon: "tim-icons icon-alert-circle-exc",
            message: "El Credito ya existe :(",
          });
          return;
        });
    },
    addItem() {
      const axiosHeader = {
        headers: {
          token: this.$store.state.auth.token,
        },
      };
      const toSend = this.newItem;
      this.$axios
        .put("/Credito", toSend, axiosHeader)
        .then((res) => {
            this.getItems();
        })
        .catch((e) => console.log(e));
    },
    deleteItem(item_id) {
      const axiosHeader = {
        headers: {
          token: this.$store.state.auth.token,
        },
        params: {
          idCredito: this.selectedCredito._id,
          iditem: item_id,
        },
      };
      this.$axios
        .delete("/Creditoitem", axiosHeader)
        .then((res) => {
          this.getItems();
        })
        .catch((e) => console.log(e));
    },
    getItems() {
      const axiosHeader = {
        headers: {
          token: this.$store.state.auth.token,
        },
        params: {
          credito_id: this.selectedCredito._id,
        },
      };
      this.$axios
        .get("/Credito_items", axiosHeader)
        .then((res) => {
          this.selectedCredito.datos = res.data.data;
          this.sumItems();
        })
        .catch((e) => console.log(e));
    },

    sumItems() {
      this.totalCuotas = this.selectedCredito.datos.reduce(
        (acc, x) => (x.tipo === "Cuota" ? acc + Number(x.valor) : acc),
        0
      );

      this.totalAbonos = this.selectedCredito.datos.reduce(
        (acc, x) => (x.tipo === "Abono Capital" ? acc + Number(x.valor) : acc),
        0
      );
      this.total = this.totalCuotas + this.totalAbonos;
    },
    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}`;
      }
    },
    getCredito() {
      const axiosHeader = {
        headers: {
          token: this.$store.state.auth.token,
          limite: this.$store.state.filtro.nCredito,
        },
      };

      this.$axios
        .get("/Credito", axiosHeader)
        .then((res) => {
          this.Creditos = [];
          if (res.data.data.length) {
            this.Creditos = res.data.data;
            this.selectedCredito = this.Creditos[0];
            this.selectedCreditoName = this.selectedCredito.nombreCredito;
            this.newItem._id = this.selectedCredito._id;
            this.sumItems();
          }
        })
        .catch((e) => console.log(e));
    },
    onChange() {
      this.selectedCredito = this.Creditos.find(
        (x) => x.nombreCredito === this.selectedCreditoName
      );
      this.newItem._id = this.selectedCredito._id;
      this.sumItems();
    },
    deleteCredito() {
      const axiosHeader = {
        headers: {
          token: this.$store.state.auth.token,
        },
        params: {
          id: this.selectedCredito._id,
        },
      };
      this.$axios
        .delete("/Credito", axiosHeader)
        .then((res) => {
     
          this.selectedCredito = {
            _id: "",
            nombreCredito: "",
            datos: [],
          };
          this.selectedCreditoName = "";
          this.getCredito();
        })
        .catch((e) => console.log(e));
    },
  },
  mounted() {
    this.getCredito();
    this.newItem.fecha = this.$store.state.fecha;
  },
};
</script>

<style>
</style>