modulos de costos e ingresos

src/app/components/incomes/general-form/general-form.component.html

@@ -0,0 +1,448 @@
+<h2 class="floating-title">{{ title }}</h2>
+
+<div class="main-content">
+  <div class="container-fluid">
+    <div class="row">
+      <div class="col-12 align-right">
+        <div class="align-container">
+          <nav aria-label="breadcrumb">
+            <ol class="breadcrumb">
+              <li class="breadcrumb-item">
+                <a [routerLink]="['/']">Dashboard</a>
+              </li>
+              <li class="breadcrumb-item">
+                <a [routerLink]="['/investment-incomes']">
+                  Ingresos
+                </a>
+              </li>
+              <li class="breadcrumb-item">Formulario general</li>
+            </ol>
+          </nav>
+        </div>
+      </div>
+
+      <div class="col-12">
+        <div class="align-container">
+          <div class="card borderless card-wrapper">
+            <div class="wrapper-costs">
+              <h4 class="card-title">
+                Información de la proyección para la fecha: {{ payment_date }}
+              </h4>
+              <div class="align-container">
+                <div class="income-summary" *ngIf="projection_exists">
+                  <div class="row">
+                    <div class="col-lg-3 col-md-4 col-sm-6">
+                      <h4>Codigo de la inversión:</h4>
+                      <div class="field">
+                        {{ projection.codigo_inversion }}
+                      </div>
+                    </div>
+
+                    <div class="col-lg-3 col-md-4 col-sm-6">
+                      <h4>Nombre de la inversión:</h4>
+                      <div class="field">
+                        {{ projection.nombre_inversion }}
+                      </div>
+                    </div>
+
+                    <div class="col-lg-3 col-md-4 col-sm-6">
+                      <h4>Empresa:</h4>
+                      <div class="field">
+                        {{ projection.empresa }}
+                      </div>
+                    </div>
+
+                    <div class="col-lg-3 col-md-4 col-sm-6">
+                      <h4>Tipo instrumento:</h4>
+                      <div class="field">
+                        {{ projection.tipo_instrumento }}
+                      </div>
+                    </div>
+
+                    <div class="col-lg-3 col-md-4 col-sm-6">
+                      <h4>Capital:</h4>
+                      <div class="field">
+                        $USD {{ projection.capital | number: "1.2-4" }}
+                      </div>
+                    </div>
+                    <div class="col-lg-3 col-md-4 col-sm-6">
+                      <h4>Ingreso bruto:</h4>
+                      <div class="field">
+                        $USD {{ projection.ingreso_bruto | number: "1.2-4" }}
+                      </div>
+                    </div>
+                    <div class="col-lg-3 col-md-4 col-sm-6">
+                      <h4>Renta:</h4>
+                      <div class="field">
+                        $USD {{ projection.renta | number: "1.2-4" }}
+                      </div>
+                    </div>
+                    <div class="col-lg-3 col-md-4 col-sm-6">
+                      <h4>Ingreso neto:</h4>
+                      <div class="field">
+                        $USD {{ projection.ingreso_neto | number: "1.2-4" }}
+                      </div>
+                    </div>
+
+                    <div class="col-lg-3 col-md-4 col-sm-6">
+                      <h4>Capital faltante:</h4>
+                      <div class="field">
+                        $USD
+                        {{ projection.capital_faltante | number: "1.2-4" }}
+                      </div>
+                    </div>
+                    <div class="col-lg-3 col-md-4 col-sm-6">
+                      <h4>Ingreso bruto:</h4>
+                      <div class="field">
+                        $USD
+                        {{
+                          projection.ingreso_bruto_faltante | number: "1.2-4"
+                        }}
+                      </div>
+                    </div>
+                    <div class="col-lg-3 col-md-4 col-sm-6">
+                      <h4>Renta:</h4>
+                      <div class="field">
+                        $USD {{ projection.renta_faltante | number: "1.2-4" }}
+                      </div>
+                    </div>
+                    <div class="col-lg-3 col-md-4 col-sm-6">
+                      <h4>Ingreso neto:</h4>
+                      <div class="field">
+                        $USD
+                        {{ projection.ingreso_neto_faltante | number: "1.2-4" }}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <br />
+              <br />
+              <div *ngIf="incomes_exists">
+                <h4 class="card-title">
+                  Listado de ingresos parciales para proyección
+                </h4>
+                <div class="align-container">
+                  <div class="instrument-calcs-summary">
+                    <table
+                      mat-table
+                      [dataSource]="dataSource"
+                      class="example-table"
+                    >
+                      <ng-container matColumnDef="fecha_proyeccion_ingreso">
+                        <th mat-header-cell *matHeaderCellDef>
+                          Fecha de proyección
+                        </th>
+                        <td mat-cell *matCellDef="let row">
+                          {{
+                            row.fecha_proyeccion_ingreso == "" ||
+                            row.fecha_proyeccion_ingreso == undefined
+                              ? "-"
+                              : row.fecha_proyeccion_ingreso
+                          }}
+                        </td>
+                      </ng-container>
+                      <ng-container matColumnDef="fecha_ingreso">
+                        <th mat-header-cell *matHeaderCellDef>
+                          Fecha de ingreso
+                        </th>
+                        <td mat-cell *matCellDef="let row">
+                          {{
+                            row.fecha_ingreso == "" ||
+                            row.fecha_ingreso == undefined
+                              ? "-"
+                              : row.fecha_ingreso
+                          }}
+                        </td>
+                      </ng-container>
+                      <ng-container matColumnDef="fecha_conciliacion">
+                        <th mat-header-cell *matHeaderCellDef>
+                          Fecha conciliación
+                        </th>
+                        <td mat-cell *matCellDef="let row">
+                          {{
+                            row.fecha_conciliacion == "" ||
+                            row.fecha_conciliacion == undefined
+                              ? "-"
+                              : row.fecha_conciliacion
+                          }}
+                        </td>
+                      </ng-container>
+                      <ng-container matColumnDef="capital">
+                        <th mat-header-cell *matHeaderCellDef>Ingreso neto</th>
+                        <td mat-cell *matCellDef="let row">
+                          $USD
+                          {{
+                            row.capital == "" || row.capital == undefined
+                              ? "-"
+                              : (row.ingreso_neto | number: "1.2-4")
+                          }}
+                        </td>
+                      </ng-container>
+                      <ng-container matColumnDef="ingreso_bruto">
+                        <th mat-header-cell *matHeaderCellDef>Ingreso bruto</th>
+                        <td mat-cell *matCellDef="let row">
+                          $USD
+                          {{
+                            row.ingreso_bruto == "" ||
+                            row.ingreso_bruto == undefined
+                              ? "-"
+                              : (row.ingreso_bruto | number: "1.2-4")
+                          }}
+                        </td>
+                      </ng-container>
+                      <ng-container matColumnDef="renta">
+                        <th mat-header-cell *matHeaderCellDef>Renta</th>
+                        <td mat-cell *matCellDef="let row">
+                          {{
+                            row.renta == "" || row.renta == undefined
+                              ? "-"
+                              : (row.renta | number: "1.2-4")
+                          }}%
+                        </td>
+                      </ng-container>
+
+                      <tr
+                        mat-header-row
+                        *matHeaderRowDef="displayedColumns"
+                      ></tr>
+                      <tr
+                        mat-row
+                        *matRowDef="let row; columns: displayedColumns"
+                      ></tr>
+                    </table>
+
+                    <br />
+                  </div>
+                </div>
+              </div>
+
+              <br />
+              <br />
+              <h4 class="card-title">
+                Formulario para ingreso
+              </h4>
+
+              <div class="align-container">
+                <form
+                  class="form-auth-small ng-untouched ng-pristine ng-valid"
+                  [formGroup]="investmentProposalForm"
+                >
+                  <div class="row">
+                    <!-- Valor nominal -->
+                    <div class="col-lg-6 col-sm-12 pr-xl-3">
+                      <div class="form-group">
+                        <label for="capital">Capital: </label>
+                        <div class="input-box-container">
+                          <p>
+                            <i class="fas fa-dollar-sign"></i>
+                          </p>
+                          <input
+                            type="text"
+                            formControlName="capital"
+                            class="form-control"
+                            [ngClass]="{
+                              'is-invalid': submitted && f.capital.errors
+                            }"
+                          />
+                          <div
+                            *ngIf="submitted && f.capital.errors"
+                            class="invalid-feedback"
+                          >
+                            <div *ngIf="f.capital.errors.required">
+                              Campo requerido
+                            </div>
+                            <div *ngIf="f.capital.errors.pattern">
+                              Debe ingresar una cifra válida
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <!-- Valor nominal -->
+                    <div class="col-lg-6 col-sm-12 pr-xl-3">
+                      <div class="form-group">
+                        <label for="ingreso_bruto">Ingreso bruto: </label>
+                        <div class="input-box-container">
+                          <p>
+                            <i class="fas fa-dollar-sign"></i>
+                          </p>
+                          <input
+                            type="text"
+                            formControlName="ingreso_bruto"
+                            class="form-control"
+                            [ngClass]="{
+                              'is-invalid': submitted && f.ingreso_bruto.errors
+                            }"
+                          />
+                          <div
+                            *ngIf="submitted && f.ingreso_bruto.errors"
+                            class="invalid-feedback"
+                          >
+                            <div *ngIf="f.ingreso_bruto.errors.required">
+                              Campo requerido
+                            </div>
+                            <div *ngIf="f.ingreso_bruto.errors.pattern">
+                              Debe ingresar una cifra válida
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <!-- Valor nominal -->
+                    <div class="col-lg-6 col-sm-12 pr-xl-3">
+                      <div class="form-group">
+                        <label for="ingreso_neto">Ingreso neto: </label>
+                        <div class="input-box-container">
+                          <p>
+                            <i class="fas fa-dollar-sign"></i>
+                          </p>
+                          <input
+                            type="text"
+                            formControlName="ingreso_neto"
+                            class="form-control"
+                            [ngClass]="{
+                              'is-invalid': submitted && f.ingreso_neto.errors
+                            }"
+                          />
+                          <div
+                            *ngIf="submitted && f.ingreso_neto.errors"
+                            class="invalid-feedback"
+                          >
+                            <div *ngIf="f.ingreso_neto.errors.required">
+                              Campo requerido
+                            </div>
+                            <div *ngIf="f.ingreso_neto.errors.pattern">
+                              Debe ingresar una cifra válida
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="col-lg-6 col-sm-12 pr-xl-3">
+                      <div class="form-group">
+                        <label for="payment_types">Tipo pago: </label>
+
+                        <select
+                          class="custom-select"
+                          formControlName="tipo_pago"
+                          [ngClass]="{
+                            'is-invalid': submitted && f.tipo_pago.errors
+                          }"
+                        >
+                          <option
+                            *ngFor="let item of payment_types"
+                            [value]="item.id_tipo_pago"
+                          >
+                            {{ item.nombre }}</option
+                          >
+                        </select>
+                        <div
+                          *ngIf="submitted && f.tipo_pago.errors"
+                          class="invalid-feedback"
+                        >
+                          <div *ngIf="f.tipo_pago.errors.required">
+                            Campo requerido
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div class="col-lg-6 col-sm-12 pr-xl-3">
+                      <div class="form-group">
+                        <label for="cuenta_bancaria">Cuenta bancaria: </label>
+
+                        <select
+                          class="custom-select"
+                          formControlName="cuenta_bancaria"
+                          [ngClass]="{
+                            'is-invalid': submitted && f.cuenta_bancaria.errors
+                          }"
+                        >
+                          <option
+                            *ngFor="let item of accounts"
+                            [value]="item.id_cuenta_bancaria"
+                          >
+                            {{ nameBankAccounts(item.id_banco) }} -
+                            {{ item.nombre }}</option
+                          >
+                        </select>
+                        <div
+                          *ngIf="submitted && f.cuenta_bancaria.errors"
+                          class="invalid-feedback"
+                        >
+                          <div *ngIf="f.cuenta_bancaria.errors.required">
+                            Campo requerido
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <!-- Fecha vencimiento -->
+                    <div class="col-lg-6 col-sm-12 pr-xl-3">
+                      <div class="form-group">
+                        <label for="fecha_vencimiento">Fecha ingreso: </label>
+
+                        <div class="input-box-container">
+                          <div>
+                            <p>
+                              <i class="far fa-calendar" aria-hidden="true"></i>
+                            </p>
+                            <input
+                              class="input-box form-control"
+                              placeholder="Seleccione una fecha"
+                              angular-mydatepicker
+                              formControlName="fecha_ingreso"
+                              (click)="dp2.toggleCalendar()"
+                              [options]="myDpOptions"
+                              #dp2="angular-mydatepicker"
+                              [ngClass]="{
+                                'is-invalid':
+                                  submitted && f.fecha_ingreso.errors
+                              }"
+                            />
+                          </div>
+                        </div>
+
+                        <div
+                          *ngIf="submitted && f.fecha_vencimiento.errors"
+                          class="invalid-feedback"
+                        >
+                          <div *ngIf="f.fecha_vencimiento.errors.required">
+                            Campo requerido
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div class="col-lg-12 col-sm-12 pr-xl-12">
+                      <br />
+                      <button
+                        class="btn btn-primary center-component float-left"
+                        type="button"
+                        (click)="conciliateIncome()"
+                      >
+                        Conciliar ingreso
+                      </button>
+                      <button
+                        class="btn btn-success center-component float-right"
+                        type="submit"
+                        (click)="submitIncome(investmentProposalForm)"
+                      >
+                        Guardar información de ingreso
+                      </button>
+                    </div>
+                  </div>
+                </form>
+                <br />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <br />
+    </div>
+  </div>
+</div>

src/app/components/incomes/general-form/general-form.component.ts

@@ -0,0 +1,319 @@
+import { Component, ViewChild, OnInit } from "@angular/core";
+import { MatPaginator } from "@angular/material/paginator";
+import { MatSort } from "@angular/material/sort";
+import { MatTableDataSource } from "@angular/material/table";
+import Swal from "sweetalert2";
+import { CatalogsService } from "src/app/services/catalogs.service";
+import { IncomesService } from "@app/services/incomes.service";
+import { AuthService } from "@app/services/auth2.service";
+import { JwtHelperService } from "@auth0/angular-jwt";
+import { InvestmentProposal } from "@app/models/investment-proposal";
+import { from } from "rxjs";
+import { FormInvestmentProposalService } from "@app/services/form-investment-proposal.service";
+import { Router, ActivatedRoute } from "@angular/router";
+import {
+  FormBuilder,
+  FormGroup,
+  FormControl,
+  FormArray,
+  Validators
+} from "@angular/forms";
+import { IAngularMyDpOptions } from "angular-mydatepicker";
+
+@Component({
+  selector: "app-general-form-income",
+  templateUrl: "./general-form.component.html",
+  styleUrls: ["./general-form.component.scss"]
+})
+export class GeneralIncomeFormComponent implements OnInit {
+  helper = new JwtHelperService();
+
+  title: string = "Ingresos para depósito a plazo";
+
+  displayedColumns: string[] = [
+    "fecha_proyeccion_ingreso",
+    "fecha_ingreso",
+    "fecha_conciliacion",
+    "capital",
+    "ingreso_bruto",
+    "renta"
+  ];
+  //displayedColumns: string[] = ['state'];
+
+  // For daterange
+  daysLabels: any = {
+    su: "Dom",
+    mo: "Lun",
+    tu: "Mar",
+    we: "Mie",
+    th: "Jue",
+    fr: "Vie",
+    sa: "Sab"
+  };
+  monthsLabels: any = {
+    1: "Ene",
+    2: "Feb",
+    3: "Mar",
+    4: "Abr",
+    5: "May",
+    6: "Jun",
+    7: "Jul",
+    8: "Ago",
+    9: "Sep",
+    10: "Oct",
+    11: "Nov",
+    12: "Dic"
+  };
+  myDpOptions: IAngularMyDpOptions = {
+    dateRange: false,
+    dateFormat: "dd/mm/yyyy",
+    dayLabels: this.daysLabels,
+    monthLabels: this.monthsLabels
+  };
+  myDateInit: boolean = true;
+
+  listProposals: InvestmentProposal[];
+  dataSource = new MatTableDataSource(this.listProposals);
+
+  resultsLength = 0;
+  isLoadingResults = true;
+  isRateLimitReached = false;
+  userRole: any;
+
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
+  @ViewChild(MatSort, { static: true }) sort: MatSort;
+  role_number: any;
+  projectionID: string;
+
+  form: FormArray;
+  investmentProposalForm: FormGroup;
+
+  proyecciones: any;
+  proyeccionesProps = [];
+  dataRetrieved: boolean = false;
+
+  array1;
+  array2;
+  array3;
+  investment: any;
+  projection: any;
+  projection_exists: boolean;
+  instrumentCode: any;
+  payment_types: any;
+  funds: any;
+  banks: any;
+  accounts: any;
+  payment_date: string = "";
+  submitted: boolean;
+  incomeObject: any;
+  incomes: any;
+  incomes_exists: boolean;
+
+  constructor(
+    private catalogService: CatalogsService,
+    private incomesService: IncomesService,
+    private authService: AuthService,
+    private formInvestmentProposal: FormInvestmentProposalService,
+    private router: Router,
+    private route: ActivatedRoute,
+
+    private formBuilder: FormBuilder
+  ) {
+    const decodedToken = this.helper.decodeToken(
+      this.authService.getJwtToken()
+    );
+    this.userRole = decodedToken.groups;
+    //    console.log("User role");
+    //  console.log(this.userRole);
+    //console.log(this.userRole.length == 0);
+
+    Swal.fire({
+      allowOutsideClick: false,
+      icon: "info",
+      text: "Espere por favor..."
+    });
+    Swal.showLoading();
+  }
+
+  nameBankAccounts(id: string) {
+    let bank;
+    bank = this.banks.find(e => e.id_banco == id);
+    return bank.nombre;
+  }
+
+  ngOnInit() {
+    Swal.close();
+    const formDataObj = {};
+
+    this.route.params.subscribe(params => {
+      this.instrumentCode = params["instrument"];
+      this.projectionID = params["id"];
+    });
+
+    if (this.projectionID != undefined) {
+      this.incomesService
+        .getProjectionIncome(this.instrumentCode, this.projectionID)
+        .subscribe(
+          res => {
+            this.projection = res["result"]["proyeccion"];
+            this.projection_exists = true;
+            this.incomes = res["result"]["ingresos"];
+            if (this.incomes.length) {
+              this.incomes_exists = true;
+              this.dataSource.data = this.incomes;
+            }
+            this.payment_date = res["result"]["proyeccion"]["fecha_pago"];
+          },
+          err => {
+            Swal.fire({
+              icon: "error",
+              title: "Error en el servidor",
+              text: err.message
+            });
+          }
+        );
+    }
+
+    this.catalogService.getPaymentTypes().subscribe(res => {
+      this.payment_types = res;
+    });
+    this.catalogService.getCountries().subscribe(res => {
+      this.funds = res;
+    });
+    this.catalogService.getCatalogInfo("bancos").subscribe(res => {
+      this.banks = res;
+      this.catalogService.getCatalogInfo("cuentas-bancarias").subscribe(res => {
+        this.accounts = res;
+      });
+      //this.payment_types = res;
+    });
+
+    this.investmentProposalForm = this.formBuilder.group({
+      capital: [
+        "",
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+      ingreso_bruto: [
+        "",
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+      renta: [
+        "",
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+      ingreso_neto: [
+        "",
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+      tipo_pago: ["", Validators.required],
+      cuenta_bancaria: ["", Validators.required],
+      fecha_ingreso: ["", Validators.required]
+    });
+  }
+
+  get f() {
+    return this.investmentProposalForm.controls;
+  }
+
+  submitIncome(form: any) {
+    this.submitted = true;
+    console.log(form);
+    if (!form.valid) {
+      return false;
+    }
+
+    this.incomeObject = {
+      tipo_intrumento: this.projection.codigo_intrumento,
+      id_proyeccion_ingreso: this.projection.proyeccion_ingreso,
+      posicion_ingreso: this.projection.posicion,
+      id_inversion: this.projection.id_inversion,
+      fecha_pago: this.projection.fecha_pago,
+
+      fecha_ingreso: this.form.value.fecha_ingreso.singleDate.formatted,
+      capital: this.form.value.capital,
+      ingreso_bruto: this.form.value.ingreso_bruto,
+      renta: this.form.value.renta,
+      ingreso_neto: this.form.value.ingreso_neto,
+      id_cuenta_bancaria: this.form.value.id_cuenta_bancaria,
+      id_tipo_pago: this.form.value.id_tipo_pago
+    };
+
+    this.incomesService.createIncome(this.incomeObject).subscribe(
+      success => {
+        if (success) {
+          Swal.fire({
+            allowOutsideClick: false,
+            icon: "success",
+            showCancelButton: false,
+            title: "Exito",
+            confirmButtonText: "El ingreso ha sido guardado"
+          }).then(result => {
+            Swal.close();
+            window.location.href = "#/investment-incomes";
+          });
+        }
+      },
+      err => {
+        Swal.fire({
+          icon: "error",
+          title: "Error al guardar",
+          text: err.message
+        });
+      }
+    );
+  }
+
+  conciliateIncome() {
+    this.incomeObject = {
+      tipo_intrumento: this.projection.codigo_intrumento,
+      id_proyeccion_ingreso: this.projection.proyeccion_ingreso,
+      posicion_ingreso: this.projection.posicion,
+      id_inversion: this.projection.id_inversion,
+      fecha_pago: this.projection.fecha_pago,
+
+      fecha_ingreso: this.form.value.fecha_ingreso.singleDate.formatted,
+      capital: this.form.value.capital,
+      ingreso_bruto: this.form.value.ingreso_bruto,
+      renta: this.form.value.renta,
+      ingreso_neto: this.form.value.ingreso_neto,
+      id_cuenta_bancaria: this.form.value.id_cuenta_bancaria,
+      id_tipo_pago: this.form.value.id_tipo_pago
+    };
+
+    this.incomesService.createIncome(this.incomeObject).subscribe(
+      success => {
+        if (success) {
+          Swal.fire({
+            allowOutsideClick: false,
+            icon: "success",
+            showCancelButton: false,
+            title: "Exito",
+            confirmButtonText: "El ingreso ha sido conciliado"
+          }).then(result => {
+            Swal.close();
+            window.location.href = "#/investment-incomes";
+          });
+        }
+      },
+      err => {
+        Swal.fire({
+          icon: "error",
+          title: "Error al guardar",
+          text: err.message
+        });
+      }
+    );
+  }
+}

src/app/components/incomes/incomes.component.html

@@ -0,0 +1,182 @@
+<h2 class="floating-title">{{ title }}</h2>
+
+<div class="main-content">
+  <div class="container-fluid">
+    <div class="row">
+      <div class="col-12 align-right">
+        <div class="align-container">
+          <nav aria-label="breadcrumb">
+            <ol class="breadcrumb">
+              <li class="breadcrumb-item">
+                <a [routerLink]="['/']">Dashboard</a>
+              </li>
+              <li class="breadcrumb-item">Inversiones activas</li>
+            </ol>
+          </nav>
+        </div>
+      </div>
+
+      <div class="col-12">
+        <div class="align-container">
+          <h4><b>Listado de inversiones</b></h4>
+          <br />
+          <div class="row">
+            <div class="col-lg-4 col-sm-4 mr-1">
+              <div class="form-group">
+                <label for="instrumento">Instrumento: </label>
+
+                <select
+                  class="custom-select"
+                  name="instrumento"
+                  (change)="filter_by_instrument($event)"
+                >
+                  <option value="">Seleccione una opción</option>
+                  <option
+                    *ngFor="let item of instrumentTypes"
+                    [value]="item.nombre"
+                  >
+                    {{ item.nombre }}</option
+                  >
+                </select>
+              </div>
+            </div>
+
+            <div class="col-lg-4 col-sm-6 ml-1">
+              <div class="form-group">
+                <label for="instrumento">Rango de fechas: </label>
+
+                <div class="input-box-container">
+                  <p>
+                    <i class="far fa-calendar" aria-hidden="true"></i>
+                  </p>
+                  <input
+                    class="input-box form-control"
+                    placeholder="Seleccione una fecha"
+                    angular-mydatepicker
+                    name="fecha_rango"
+                    (click)="dp.toggleCalendar()"
+                    (dateChanged)="filter_by_date($event)"
+                    [options]="myDpOptions"
+                    #dp="angular-mydatepicker"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+          <br />
+
+          <div class="form-group">
+            <label for="filter" class="control-label">Filtro rápido: </label>
+            <input
+              name="filter"
+              (keyup)="applyFilter($event)"
+              class="form-control input-md"
+              placeholder="Codigo inversion, empresa"
+            />
+          </div>
+          <br />
+
+          <div class="example-container mat-elevation-z8">
+            <div class="example-table-container table-responsive">
+              <table mat-table [dataSource]="dataSource" class="example-table">
+                <!-- Name Column -->
+                <ng-container matColumnDef="codigo_inversion">
+                  <th mat-header-cell *matHeaderCellDef>Codigo</th>
+                  <td mat-cell *matCellDef="let row">
+                    {{ row.codigo_inversion }}
+                  </td>
+                </ng-container>
+                <!-- Country Column -->
+                <ng-container matColumnDef="nombre_inversion">
+                  <th mat-header-cell *matHeaderCellDef>Nombre inversión</th>
+                  <td mat-cell *matCellDef="let row">
+                    {{ row.nombre_inversion }}
+                  </td>
+                </ng-container>
+
+                <!-- Country Column -->
+                <ng-container matColumnDef="fecha_pago">
+                  <th mat-header-cell *matHeaderCellDef>Fecha de pago</th>
+                  <td mat-cell *matCellDef="let row">
+                    {{ row.fecha_pago }}
+                  </td>
+                </ng-container>
+
+                <!-- Country Column -->
+                <ng-container matColumnDef="tipo_instrumento">
+                  <th mat-header-cell *matHeaderCellDef>Instrumento</th>
+                  <td mat-cell *matCellDef="let row">
+                    {{ row.tipo_instrumento }}
+                  </td>
+                </ng-container>
+                <!-- Country Column -->
+                <ng-container matColumnDef="empresa">
+                  <th mat-header-cell *matHeaderCellDef>Empresa</th>
+                  <td mat-cell *matCellDef="let row">
+                    {{ row.empresa }}
+                  </td>
+                </ng-container>
+
+                <!-- Country Column -->
+                <ng-container matColumnDef="estado">
+                  <th mat-header-cell *matHeaderCellDef>Estado</th>
+                  <td mat-cell *matCellDef="let row">
+                    {{ row.estado }}
+                  </td>
+                </ng-container>
+
+                <!--  Column -->
+                <ng-container matColumnDef="id_inversion">
+                  <th mat-header-cell *matHeaderCellDef>&nbsp;</th>
+                  <td mat-cell *matCellDef="let row">
+                    <div class="action-buttons">
+                      <a
+                        title="Detalle de la inversion"
+                        class="btn btn-primary btn-custom-small"
+                        (click)="view_investment_proposal(row.id_inversion)"
+                      >
+                        <i class="fas fa-info"></i>
+                      </a>
+                    </div>
+                  </td>
+                </ng-container>
+                <ng-container matColumnDef="proyeccion_ingreso">
+                  <th mat-header-cell *matHeaderCellDef>&nbsp;</th>
+                  <td mat-cell *matCellDef="let row">
+                    <div class="action-buttons">
+                      <a
+                        title="Ingresos"
+                        class="btn btn-success btn-custom-small"
+                        (click)="
+                          go_to_instrument_url(
+                            row.proyeccion_ingreso,
+                            row.codigo_instrumento
+                          )
+                        "
+                      >
+                        <i class="fas fa-hand-holding-usd"></i>
+                        Ingresos
+                      </a>
+                    </div>
+                  </td>
+                </ng-container>
+                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                <tr
+                  mat-row
+                  *matRowDef="let row; columns: displayedColumns"
+                ></tr>
+              </table>
+
+              <mat-paginator
+                [pageSizeOptions]="[10, 15, 25]"
+                [pageIndex]="0"
+                [pageSize]="10"
+              ></mat-paginator>
+            </div>
+          </div>
+        </div>
+      </div>
+      <br />
+    </div>
+  </div>
+</div>

src/app/components/incomes/incomes.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IncomesComponent } from './incomes.component';
+
+describe('IncomesComponent', () => {
+  let component: IncomesComponent;
+  let fixture: ComponentFixture<IncomesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ IncomesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(IncomesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/incomes/incomes.component.ts

@@ -0,0 +1,224 @@
+import { Component, ViewChild, OnInit } from "@angular/core";
+import { MatPaginator } from "@angular/material/paginator";
+import { MatSort } from "@angular/material/sort";
+import { MatTableDataSource } from "@angular/material/table";
+import Swal from "sweetalert2";
+import { CatalogsService } from "src/app/services/catalogs.service";
+import { IncomesService } from "@app/services/incomes.service";
+
+import { AuthService } from "@app/services/auth2.service";
+import { JwtHelperService } from "@auth0/angular-jwt";
+import { IncomeList } from "@app/models/income-list";
+import { from } from "rxjs";
+import { FormInvestmentProposalService } from "@app/services/form-investment-proposal.service";
+import { Router } from "@angular/router";
+import { IAngularMyDpOptions, IMyDateModel } from "angular-mydatepicker";
+
+@Component({
+  selector: "app-income-proposals",
+  templateUrl: "./incomes.component.html",
+  styleUrls: ["./incomes.component.scss"]
+})
+export class IncomesComponent implements OnInit {
+  helper = new JwtHelperService();
+
+  title: string = "Ingresos";
+
+  // For daterange
+  daysLabels: any = {
+    su: "Dom",
+    mo: "Lun",
+    tu: "Mar",
+    we: "Mie",
+    th: "Jue",
+    fr: "Vie",
+    sa: "Sab"
+  };
+  monthsLabels: any = {
+    1: "Ene",
+    2: "Feb",
+    3: "Mar",
+    4: "Abr",
+    5: "May",
+    6: "Jun",
+    7: "Jul",
+    8: "Ago",
+    9: "Sep",
+    10: "Oct",
+    11: "Nov",
+    12: "Dic"
+  };
+  myDpOptions: IAngularMyDpOptions = {
+    dateRange: true,
+    dateFormat: "yyyy-mm-dd",
+    dayLabels: this.daysLabels,
+    monthLabels: this.monthsLabels
+  };
+  myDateInit: boolean = true;
+  model: IMyDateModel = null;
+
+  displayedColumns: string[] = [
+    "codigo_inversion",
+    "nombre_inversion",
+    "fecha_pago",
+    "tipo_instrumento",
+    "empresa",
+    "estado",
+    "id_inversion",
+    "proyeccion_ingreso"
+  ];
+  //displayedColumns: string[] = ['state'];
+
+  listProposals: IncomeList[];
+  dataSource = new MatTableDataSource(this.listProposals);
+
+  resultsLength = 0;
+  isLoadingResults = true;
+  isRateLimitReached = false;
+  userRole: any;
+
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
+  @ViewChild(MatSort, { static: true }) sort: MatSort;
+  role_number: any;
+  instrumentTypes: any;
+
+  constructor(
+    private catalogService: CatalogsService,
+    private incomesService: IncomesService,
+    private authService: AuthService,
+    private formInvestmentProposal: FormInvestmentProposalService,
+    private router: Router
+  ) {
+    const decodedToken = this.helper.decodeToken(
+      this.authService.getJwtToken()
+    );
+    this.userRole = decodedToken.groups;
+    //    console.log("User role");
+    //  console.log(this.userRole);
+    //console.log(this.userRole.length == 0);
+    /*  
+    this.dataSource.filterPredicate = (data, filter) => {
+      const dataStr =
+        data.id_inversion_instrumento.id_tipo_instrumento.nombre +
+        data.codigo_inversion +
+        data.nombre_inversion +
+        data.asunto +
+        data.comentario +
+        data.justificacion;
+      return dataStr.indexOf(filter) != -1;
+    };*/
+
+    Swal.fire({
+      allowOutsideClick: false,
+      icon: "info",
+      text: "Espere por favor..."
+    });
+    Swal.showLoading();
+  }
+
+  ngOnInit() {
+    this.catalogService.getInstrumentTypes().subscribe(res => {
+      this.instrumentTypes = res;
+    });
+
+    this.incomesService.getProjectionsIncomeList().subscribe(
+      ans => {
+        this.listProposals = ans.result;
+
+        console.log(this.listProposals);
+        this.dataSource.data = this.listProposals;
+
+        this.dataSource.paginator = this.paginator;
+        this.dataSource.sort = this.sort;
+      },
+      err => {
+        Swal.fire({
+          icon: "error",
+          title: "Error en el servidor",
+          text: err.message
+        });
+      }
+    );
+
+    setTimeout(() => {
+      Swal.close();
+    }, 1200);
+  }
+
+  filter_by_instrument(event: any) {
+    const filterInstrument = (event.target as HTMLInputElement).value;
+    this.dataSource.filter = filterInstrument;
+    if (this.dataSource.paginator) {
+      this.dataSource.paginator.firstPage();
+    }
+  }
+
+  filter_by_date(event: any) {
+    Swal.fire({
+      allowOutsideClick: false,
+      icon: "info",
+      text: "Espere por favor..."
+    });
+    Swal.showLoading();
+
+    let dateFormat = event.dateRange.formatted.split(" - ", 2);
+
+    this.incomesService
+      .searchProjectionsIncomeByDate(dateFormat[0], dateFormat[1])
+      .subscribe(
+        ans => {
+          this.listProposals = ans["result"];
+          this.dataSource.data = this.listProposals;
+          this.dataSource.paginator = this.paginator;
+          this.dataSource.sort = this.sort;
+          Swal.close();
+        },
+        err => {
+          Swal.fire({
+            icon: "error",
+            title: "Error en el servidor",
+            text: err.message
+          });
+        }
+      );
+  }
+
+  applyFilter(event: Event) {
+    const filterValue = (event.target as HTMLSelectElement).value;
+    this.dataSource.filter = filterValue;
+
+    if (this.dataSource.paginator) {
+      this.dataSource.paginator.firstPage();
+    }
+  }
+
+  view_investment_proposal(id: string) {
+    this.formInvestmentProposal.resetFormData();
+    Swal.fire({
+      allowOutsideClick: false,
+      icon: "info",
+      text: "Espere por favor..."
+    });
+    Swal.showLoading();
+    setTimeout(() => {
+      this.router.navigate([`/investment-proposal/${id}`]);
+    }, 1000);
+  }
+
+  instrument_has_costs(id: string) {
+    return true;
+  }
+
+  go_to_instrument_url(id: string, code: string) {
+    Swal.fire({
+      allowOutsideClick: false,
+      icon: "info",
+      text: "Espere por favor..."
+    });
+    Swal.showLoading();
+
+    setTimeout(() => {
+      this.router.navigate([`/investment-income/${code}/${id}`]);
+    }, 1000);
+  }
+}

src/app/components/instruments/lete/lete.component.ts

@@ -91,10 +91,6 @@ export class LETE implements InstrumentComponent {
 
     this.general = this.formDataService.getGeneralInfo();
 
-    console.log("intrument cargado:");
-    console.log(this.instrument_work);
-    console.log(this.general);
-
     this.investmentProposalForm = this.formBuilder.group({
       valor_nominal: [
         this.instrument_exists ? "" : this.instrument_work.valor_nominal,

src/app/components/instruments/pbur/pbur.component.html

@@ -192,30 +192,6 @@
           </div>
         </div>
       </div>
-      <!-- Plazo inversión -->
-      <div class="col-lg-6 col-sm-12 pr-xl-3">
-        <div class="form-group">
-          <label for="plazo">Plazo inversión: </label>
-          <div class="input-box-container">
-            <p>
-              <i class="fas fa-business-time"></i>
-            </p>
-            <input
-              type="text"
-              formControlName="plazo"
-              class="form-control"
-              [ngClass]="{
-                'is-invalid': submitted && f.plazo.errors
-              }"
-            />
-            <div *ngIf="submitted && f.plazo.errors" class="invalid-feedback">
-              <div *ngIf="f.plazo.errors.required">
-                Campo requerido
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
       <div class="col-lg-6 col-sm-12 pr-xl-3">
         <div class="form-group">
           <label for="fecha_operacion">Fecha operación: </label>

src/app/components/instruments/pbur/pbur.component.ts

@@ -161,10 +161,6 @@ export class PBUR implements InstrumentComponent {
           Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
         ]
       ],
-      plazo: [
-        this.instrument_exists ? "" : this.instrument_work.plazo,
-        [Validators.required]
-      ],
       rendimiento_bruto: [
         this.instrument_exists ? "" : this.instrument_work.rendimiento_bruto,
         [
@@ -281,7 +277,6 @@ export class PBUR implements InstrumentComponent {
           comision_bolsa_porcentaje: this.f.comision_bolsa_porcentaje.value,
           rendimiento_bruto: this.f.rendimiento_bruto.value,
           otros_costos: this.f.otros_costos.value,
-          plazo: this.f.plazo.value,
           renta_porcentaje: this.f.renta_porcentaje.value,
           //id_formato_ingreso: this.f.formato_ingreso.value,
           fecha_operacion: this.f.fecha_operacion.value.singleDate.formatted,
@@ -341,7 +336,7 @@ export class PBUR implements InstrumentComponent {
             interes_acumulado: this.interes_acumulado,
             fecha_inicio_vigencia: this.fecha_inicio_vigencia,
             proyecciones: this.proyecciones,
-            plazo: this.investmentProposalForm.value.plazo,
+            plazo: this.plazo,
             //id_formato_ingreso: this.investmentProposalForm.value.id_formato_ingreso,
 
             fecha_operacion: this.investmentProposalForm.value.fecha_operacion

src/app/components/instruments/vcn/vcn.component.html

@@ -192,30 +192,7 @@
           </div>
         </div>
       </div>
-      <!-- Plazo inversión -->
-      <div class="col-lg-6 col-sm-12 pr-xl-3">
-        <div class="form-group">
-          <label for="plazo">Plazo inversión: </label>
-          <div class="input-box-container">
-            <p>
-              <i class="fas fa-business-time"></i>
-            </p>
-            <input
-              type="text"
-              formControlName="plazo"
-              class="form-control"
-              [ngClass]="{
-                'is-invalid': submitted && f.plazo.errors
-              }"
-            />
-            <div *ngIf="submitted && f.plazo.errors" class="invalid-feedback">
-              <div *ngIf="f.plazo.errors.required">
-                Campo requerido
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
+
       <div class="col-lg-6 col-sm-12 pr-xl-3">
         <div class="form-group">
           <label for="fecha_operacion">Fecha operación: </label>

src/app/components/instruments/vcn/vcn.component.ts

@@ -139,10 +139,6 @@ export class VCN implements InstrumentComponent {
         this.instrument_exists ? 0 : this.instrument_work.otros_costos,
         [Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)]
       ],
-      plazo: [
-        this.instrument_exists ? "" : this.instrument_work.plazo,
-        [Validators.required]
-      ],
       renta_porcentaje: [
         this.instrument_exists ? "" : this.instrument_work.renta_porcentaje,
         [Validators.required]
@@ -283,7 +279,6 @@ export class VCN implements InstrumentComponent {
           comision_bolsa_porcentaje: this.f.comision_bolsa_porcentaje.value,
           rendimiento_bruto: this.f.rendimiento_bruto.value,
           otros_costos: this.f.otros_costos.value,
-          plazo: this.f.plazo.value,
           renta_porcentaje: this.f.renta_porcentaje.value,
           //id_formato_ingreso: this.f.formato_ingreso.value,
           fecha_operacion: this.f.fecha_operacion.value.singleDate.formatted,
@@ -343,7 +338,7 @@ export class VCN implements InstrumentComponent {
             interes_acumulado: this.interes_acumulado,
             fecha_inicio_vigencia: this.fecha_inicio_vigencia,
             proyecciones: this.proyecciones,
-            plazo: this.investmentProposalForm.value.plazo,
+            plazo: this.plazo,
             //id_formato_ingreso: this.investmentProposalForm.value.id_formato_ingreso,
 
             fecha_operacion: this.investmentProposalForm.value.fecha_operacion

src/app/components/investment-proposals/approve/approve.component.ts

@@ -330,7 +330,7 @@ export class InvestmentProposalApproveComponent implements OnInit {
         html: `<p style="text-align:left;">Comentario:</p>`,
         input: "textarea",
         showCancelButton: true,
-        confirmButtonText: "Enviar propuesta",
+        confirmButtonText: "Aprobar propuesta",
         cancelButtonText: "Cancelar",
         // inputValidator: value => {
         //   if (!value) {

src/app/components/investment-proposals/complement-info/complement-info.component.html

@@ -111,24 +111,47 @@
                       <div class="form-group">
                         <label for="empresa">Empresa: </label>
 
-                        <select
-                          s
-                          class="custom-select"
-                          formControlName="empresa"
-                          [ngClass]="{
-                            'is-invalid': submitted && f.empresa.errors
-                          }"
+                        <ng-container
+                          *ngIf="
+                            investmentProposalID == undefined;
+                            else elseTemplate
+                          "
                         >
-                          <option
-                            *ngFor="let item of companies"
-                            [value]="item.id_empresa"
-                            [selected]="
-                              item.id_empresa == complementInfo.empresa
-                            "
-                          >
-                            {{ item.nombre }}</option
+                          <select
+                            s
+                            class="custom-select"
+                            formControlName="empresa"
+                            [ngClass]="{
+                              'is-invalid': submitted && f.empresa.errors
+                            }"
                           >
-                        </select>
+                            <option
+                              *ngFor="let item of companies"
+                              [value]="item.id_empresa"
+                              [selected]="
+                                item.id_empresa == complementInfo.empresa
+                              "
+                            >
+                              {{ item.nombre }}</option
+                            >
+                          </select>
+                        </ng-container>
+                        <ng-template #elseTemplate>
+                          <input
+                            type="text"
+                            [value]="companyValue"
+                            name="x"
+                            class="form-control"
+                            readonly
+                          />
+                          <input
+                            type="hidden"
+                            formControlName="empresa"
+                            class="form-control"
+                            readonly
+                          />
+                        </ng-template>
+
                         <div
                           *ngIf="submitted && f.empresa.errors"
                           class="invalid-feedback"

src/app/components/investment-proposals/complement-info/complement-info.component.ts

@@ -66,6 +66,7 @@ export class ComplementInfoComponent implements OnInit {
   payment_terms: any;
 
   complementInfoExists: boolean;
+  companyValue: any;
   constructor(
     private router: Router,
     private route: ActivatedRoute,
@@ -86,6 +87,15 @@ export class ComplementInfoComponent implements OnInit {
 
     this.catalogService.getCompanies().subscribe(res => {
       this.companies = res;
+
+      if (this.investmentProposalID != undefined) {
+        this.companyValue = this.companies.find(
+          e => e.id_empresa == this.complementInfo.empresa
+        );
+
+        this.companyValue =
+          this.companyValue != undefined ? this.companyValue.nombre : "-";
+      }
     });
     this.catalogService.getCountries().subscribe(res => {
       this.countries = res;

src/app/components/investment-proposals/general-info/general-info.component.html

@@ -191,21 +191,43 @@
                     <div class="col-lg-6 col-sm-12 pr-xl-3">
                       <div class="form-group">
                         <label for="instrumentos">Instrumentos: </label>
-
-                        <select
-                          class="custom-select"
-                          formControlName="instrumentos"
-                          [ngClass]="{
-                            'is-invalid': submitted && f.instrumentos.errors
-                          }"
+                        <ng-container
+                          *ngIf="
+                            investmentProposalID == undefined;
+                            else elseTemplate
+                          "
                         >
-                          <option
-                            *ngFor="let item of instrumentTypes"
-                            [selected]="item.codigo == general.instrumentos"
-                            [value]="item.codigo"
-                            >{{ item.nombre }}</option
+                          <select
+                            class="custom-select"
+                            formControlName="instrumentos"
+                            [ngClass]="{
+                              'is-invalid': submitted && f.instrumentos.errors
+                            }"
                           >
-                        </select>
+                            <option
+                              *ngFor="let item of instrumentTypes"
+                              [selected]="item.codigo == general.instrumentos"
+                              [value]="item.codigo"
+                            >
+                              {{ item.nombre }}</option
+                            >
+                          </select>
+                        </ng-container>
+                        <ng-template #elseTemplate>
+                          <input
+                            type="text"
+                            [value]="instrumentValue"
+                            name="x"
+                            class="form-control"
+                            readonly
+                          />
+                          <input
+                            type="hidden"
+                            formControlName="instrumentos"
+                            class="form-control"
+                            readonly
+                          />
+                        </ng-template>
                         <div
                           *ngIf="submitted && f.instrumentos.errors"
                           class="invalid-feedback"

src/app/components/investment-proposals/general-info/general-info.component.ts

@@ -85,6 +85,7 @@ export class InvestmentProposalGeneralInfoComponent
   gComplement: any;
   datez: any;
   instrumentName: any;
+  instrumentValue: any;
   constructor(
     private formBuilder: FormBuilder,
     private router: Router,
@@ -181,6 +182,11 @@ export class InvestmentProposalGeneralInfoComponent
               justificacion: res["result"]["justificacion"]
             };
 
+            this.instrumentValue =
+              res["result"]["id_inversion_instrumento"]["id_tipo_instrumento"][
+                "nombre"
+              ];
+
             // Setear objeto dinamico con valores obtenidos del endpoint
             this.general = this.formDataService.getGeneralInfo();
 

src/app/components/investment-proposals/payment-info/payment-info.component.ts

@@ -92,11 +92,22 @@ export class PaymentInfoComponent implements OnInit {
       .getProposalInvestment(this.investmentProposalID)
       .subscribe(
         res => {
-          this.inversionCode = res["result"]["codigo_inversion"];
-          this.inversionAmount =
-            res["result"]["id_inversion_instrumento"]["instrumento"][
-              "valor_nominal"
+          let instrumentType =
+            res["result"]["id_inversion_instrumento"]["id_tipo_instrumento"][
+              "codigo"
             ];
+          this.inversionCode = res["result"]["codigo_inversion"];
+          if (instrumentType == "DAP") {
+            this.inversionAmount =
+              res["result"]["id_inversion_instrumento"]["instrumento"][
+                "monto_inversion"
+              ];
+          } else {
+            this.inversionAmount =
+              res["result"]["id_inversion_instrumento"]["instrumento"][
+                "valor_nominal"
+              ];
+          }
           this.investmentProposalForm.setValue({
             monto: this.inversionAmount,
             tipo_pago: "",

src/app/components/investment-proposals/review/review.component.ts

@@ -331,7 +331,7 @@ export class InvestmentProposalReviewComponent implements OnInit {
         html: `<p style="text-align:left;">Comentario:</p>`,
         input: "textarea",
         showCancelButton: true,
-        confirmButtonText: "Enviar propuesta",
+        confirmButtonText: "Aprobar propuesta",
         cancelButtonText: "Cancelar",
         // inputValidator: value => {
         //   if (!value) {

src/app/components/investments/costs/dap/dap.costs.component.html

@@ -28,10 +28,124 @@
               <h4 class="card-title">
                 Detalle de costos para el deposito
               </h4>
+              <br />
               <div class="align-container">
-                <form [formGroup]="form">
+                <div>
+                  <div class="costs-summary">
+                    <div class="row">
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Monto inversión:</h4>
+                        <div class="field">
+                          $USD
+                          {{
+                            instrument_work.monto_inversion | number: "1.2-4"
+                          }}
+                        </div>
+                      </div>
+
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Plazo en días:</h4>
+                        <div class="field">
+                          {{ instrument_work.plazo }}
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Tasa porcentaje:</h4>
+                        <div class="field">
+                          {{
+                            instrument_work.tasa_porcentaje | number: "1.2-4"
+                          }}
+                          %
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Renta porcentaje:</h4>
+                        <div class="field">
+                          {{
+                            instrument_work.renta_porcentaje | number: "1.2-4"
+                          }}
+                          %
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Renta:</h4>
+                        <div class="field">
+                          $USD {{ instrument_work.renta | number: "1.2-4" }}
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Ingreso bruto:</h4>
+                        <div class="field">
+                          $USD
+                          {{ instrument_work.ingreso_bruto | number: "1.2-4" }}
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Ingreso neto:</h4>
+                        <div class="field">
+                          $USD
+                          {{ instrument_work.ingreso_neto | number: "1.2-4" }}
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Rendimiento bruto:</h4>
+                        <div class="field">
+                          $USD
+                          {{
+                            instrument_work.rendimiento_bruto | number: "1.2-4"
+                          }}
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Rendimiento neto:</h4>
+                        <div class="field">
+                          $USD
+                          {{
+                            instrument_work.rendimiento_neto | number: "1.2-4"
+                          }}
+                        </div>
+                      </div>
+
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Fecha de operación:</h4>
+                        <div class="field">
+                          {{ instrument_work.fecha_operacion }}
+                        </div>
+                      </div>
+
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Fecha vencimiento:</h4>
+                        <div class="field">
+                          {{ instrument_work.fecha_vencimiento }}
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Fecha inicio de vigencia:</h4>
+                        <div class="field">
+                          {{ instrument_work.fecha_inicio_vigencia }}
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Número de certificado:</h4>
+                        <div class="field">
+                          {{
+                            instrument_work.numero_certificado == undefined ||
+                            instrument_work.numero_certifcado == ""
+                              ? "-"
+                              : instrument_work.numero_certificado
+                          }}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <br />
+              <br />
+              <div class="align-container">
+                <form *ngIf="dataRetrieved" [formGroup]="form">
                   <div *ngFor="let group of form.controls; let i = index">
-                    <div class="row" [formGroup]="group">
+                    <div class="wrapper-form" [formGroup]="group">
                       <div class="costs-input-small-container">
                         <div class="form-group">
                           <label for="posicion">Posicion: </label>
@@ -149,6 +263,18 @@
                       <div class="clear"></div>
                     </div>
                   </div>
+                  <br />
+                  <!--
+                  <div class="form-group text-right space-20">
+                    <button
+                      type="submit"
+                      class="btn btn-primary"
+                      (click)="submitProjectionChanges()"
+                    >
+                      Guardar información de proyecciones
+                    </button>
+                  </div>-->
+                  <br />
                 </form>
               </div>
             </div>

src/app/components/investments/costs/dap/dap.costs.component.ts

@@ -11,7 +11,13 @@ import { InvestmentProposal } from "@app/models/investment-proposal";
 import { from } from "rxjs";
 import { FormInvestmentProposalService } from "@app/services/form-investment-proposal.service";
 import { Router, ActivatedRoute } from "@angular/router";
-import { FormBuilder, FormGroup, FormControl, FormArray } from "@angular/forms";
+import {
+  FormBuilder,
+  FormGroup,
+  FormControl,
+  FormArray,
+  Validators
+} from "@angular/forms";
 
 @Component({
   selector: "app-dap-costs",
@@ -46,6 +52,7 @@ export class DAPCostsComponent implements OnInit {
   investmentProposalID: string;
 
   form: FormArray;
+  investmentProposalForm: FormGroup;
 
   proyecciones: any;
   proyeccionesProps = [];
@@ -54,6 +61,9 @@ export class DAPCostsComponent implements OnInit {
   array1;
   array2;
   array3;
+  investment: any;
+  instrument_work: any;
+  instrument_exists: boolean;
 
   constructor(
     private catalogService: CatalogsService,
@@ -93,6 +103,68 @@ export class DAPCostsComponent implements OnInit {
       this.investmentProposalID = this.route.snapshot.queryParamMap.get("id");
 
     if (this.investmentProposalID != undefined) {
+      this.investmentsService
+        .getProposalInvestment(this.investmentProposalID)
+        .subscribe(
+          res => {
+            this.investment = res["result"];
+            this.instrument_work =
+              res["result"]["id_inversion_instrumento"]["instrumento"];
+            this.instrument_exists = true;
+
+            this.investmentProposalForm = this.formBuilder.group({
+              monto_inversion: [
+                !this.instrument_exists
+                  ? ""
+                  : this.instrument_work.monto_inversion,
+                [
+                  Validators.required,
+                  Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+                ]
+              ],
+
+              renta_porcentaje: [
+                !this.instrument_exists
+                  ? ""
+                  : this.instrument_work.renta_porcentaje,
+                [Validators.required]
+              ],
+              tasa_porcentaje: [
+                !this.instrument_exists
+                  ? ""
+                  : this.instrument_work.tasa_porcentaje,
+                [
+                  Validators.required,
+                  Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+                ]
+              ],
+              plazo: [
+                !this.instrument_exists ? "" : this.instrument_work.plazo,
+                [Validators.required]
+              ],
+
+              /*formato_ingreso: [
+                !this.instrument_exists ? "" : this.instrument_work.formato_ingreso,
+                [Validators.required]
+              ],*/
+
+              fecha_vencimiento: [
+                !this.instrument_exists
+                  ? ""
+                  : this.instrument_work.fecha_vencimiento,
+                Validators.required
+              ],
+              fecha_operacion: [
+                !this.instrument_exists
+                  ? ""
+                  : this.instrument_work.fecha_operacion,
+                Validators.required
+              ]
+            });
+          },
+          err => {}
+        );
+
       this.investmentsService
         .getProposalInvestment(this.investmentProposalID)
         .subscribe(
@@ -103,7 +175,7 @@ export class DAPCostsComponent implements OnInit {
               ];
 
             this.form = new FormArray(this.buildForm(this.proyecciones));
-
+            this.dataRetrieved = true;
             /*
             this.array1 = [];
             this.array2 = [];
@@ -144,6 +216,47 @@ export class DAPCostsComponent implements OnInit {
     }, 1200);
   }
 
+  submitInstrumentChanges() {}
+
+  submitProjectionChanges() {
+    console.log("submit");
+    console.log(this.form.value);
+    let objProjection = { proyecciones: this.form.value };
+    Swal.fire({
+      allowOutsideClick: false,
+      icon: "info",
+      text: "Espere por favor..."
+    });
+    Swal.showLoading();
+
+    this.investmentsService
+      .updateInstrumentProjection(this.investmentProposalID, objProjection)
+      .subscribe(
+        success => {
+          if (success) {
+            Swal.fire({
+              allowOutsideClick: false,
+              icon: "success",
+              showCancelButton: false,
+              title: "Exito",
+              confirmButtonText: "La información ha sido actualizada"
+            }).then(result => {
+              console.log(result);
+              Swal.close();
+              //window.location.reload();
+            });
+          }
+        },
+        err => {
+          Swal.fire({
+            icon: "error",
+            title: "Error al guardar",
+            text: err.message
+          });
+        }
+      );
+  }
+
   buildForm(items: any[]): FormGroup[] {
     return items.map(x => this.buildItem(x));
   }

src/app/components/investments/costs/pbur/pbur.costs.component.html

@@ -0,0 +1,381 @@
+<h2 class="floating-title">{{ title }}</h2>
+
+<div class="main-content">
+  <div class="container-fluid">
+    <div class="row">
+      <div class="col-12 align-right">
+        <div class="align-container">
+          <nav aria-label="breadcrumb">
+            <ol class="breadcrumb">
+              <li class="breadcrumb-item">
+                <a [routerLink]="['/']">Dashboard</a>
+              </li>
+              <li class="breadcrumb-item">
+                <a [routerLink]="['/investments']">
+                  Inversiones activas
+                </a>
+              </li>
+              <li class="breadcrumb-item">Papel bursátil</li>
+            </ol>
+          </nav>
+        </div>
+      </div>
+
+      <div class="col-12">
+        <div class="align-container">
+          <div class="card borderless card-wrapper">
+            <div class="wrapper-costs">
+              <h4 class="card-title">
+                Detalle de costos para papel bursátil
+              </h4>
+              <br />
+
+              <div class="align-container">
+                <div>
+                  <div class="costs-summary" *ngIf="instrument_exists">
+                    <div class="row">
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Valor par:</h4>
+                        <div class="field">
+                          {{ instrument_work.valor_par == true ? "Si" : "No" }}
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Valor nominal:</h4>
+                        <div class="field">
+                          $USD
+                          {{ instrument_work.valor_nominal | number: "1.2-4" }}
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Valor transado:</h4>
+                        <div class="field">
+                          $USD
+                          {{ instrument_work.valor_transado | number: "1.2-4" }}
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Precio porcentaje:</h4>
+                        <div class="field">
+                          {{
+                            instrument_work.precio_porcentaje | number: "1.2-4"
+                          }}%
+                        </div>
+                      </div>
+
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Plazo en días:</h4>
+                        <div class="field">
+                          {{ instrument_work.plazo }}
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Comisión casa:</h4>
+                        <div class="field">
+                          {{
+                            instrument_work.comision_casa_porcentaje
+                              | number: "1.2-4"
+                          }}%
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Comisión bolsa:</h4>
+                        <div class="field">
+                          {{
+                            instrument_work.comision_bolsa_porcentaje
+                              | number: "1.2-4"
+                          }}%
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Rendimiento bruto:</h4>
+                        <div class="field">
+                          $USD
+                          {{
+                            instrument_work.rendimiento_bruto | number: "1.2-4"
+                          }}
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Rendimiento neto:</h4>
+                        <div class="field">
+                          $USD
+                          {{
+                            instrument_work.rendimiento_neto | number: "1.2-4"
+                          }}
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Interés acumulado:</h4>
+                        <div class="field">
+                          $USD
+                          {{
+                            instrument_work.interes_acumulado | number: "1.2-4"
+                          }}
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Total a pagar:</h4>
+                        <div class="field">
+                          $USD
+                          {{ instrument_work.total_pagar | number: "1.2-4" }}
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Fecha de operación:</h4>
+                        <div class="field">
+                          {{ instrument_work.fecha_operacion }}
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Fecha de liquidación:</h4>
+                        <div class="field">
+                          {{ instrument_work.fecha_liquidacion }}
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Fecha vencimiento:</h4>
+                        <div class="field">
+                          {{ instrument_work.fecha_vencimiento }}
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Ultima fecha de cupón:</h4>
+                        <div class="field">
+                          {{ instrument_work.fecha_ultima_cupon }}
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Fecha inicio de vigencia:</h4>
+                        <div class="field">
+                          {{ instrument_work.fecha_inicio_vigencia }}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <br />
+              <br />
+              <div class="align-container">
+                <form *ngIf="dataRetrieved" [formGroup]="form">
+                  <div *ngFor="let group of form.controls; let i = index">
+                    <div class="wrapper-form" [formGroup]="group">
+                      <div class="costs-input-small-container">
+                        <div class="form-group">
+                          <label for="posicion">Posicion: </label>
+
+                          <div class="input-box-container">
+                            <input
+                              type="text"
+                              formControlName="posicion"
+                              class="form-control"
+                              readonly
+                            />
+                          </div>
+                        </div>
+                      </div>
+
+                      <div class="costs-input-small-container">
+                        <div class="form-group">
+                          <label for="plazo">Plazo: </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i class="far fa-clock" aria-hidden="true"></i>
+                              </p>
+                              <input
+                                type="text"
+                                formControlName="plazo"
+                                class="form-control"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div class="costs-input-normal-container">
+                        <div class="form-group">
+                          <label for="fecha_pago">Fecha pago: </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i
+                                  class="far fa-calendar"
+                                  aria-hidden="true"
+                                ></i>
+                              </p>
+                              <input
+                                type="text"
+                                formControlName="fecha_pago"
+                                class="form-control"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div class="costs-input-normal-container">
+                        <div class="form-group">
+                          <label for="monto">Monto: </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i class="fas fa-dollar-sign"></i>
+                              </p>
+                              <input
+                                type="text"
+                                formControlName="monto"
+                                class="form-control"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="costs-input-normal-container">
+                        <div class="form-group">
+                          <label for="costo_cedeval">Costo cedeval: </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i class="fas fa-dollar-sign"></i>
+                              </p>
+                              <input
+                                type="text"
+                                formControlName="costo_cedeval"
+                                class="form-control"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="costs-input-normal-container">
+                        <div class="form-group">
+                          <label for="costo_transferencia"
+                            >Costo transferencia:
+                          </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i class="fas fa-dollar-sign"></i>
+                              </p>
+                              <input
+                                type="text"
+                                formControlName="costo_transferencia"
+                                class="form-control"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="costs-input-normal-container">
+                        <div class="form-group">
+                          <label for="costo_banco">Costo banco: </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i class="fas fa-dollar-sign"></i>
+                              </p>
+                              <input
+                                type="text"
+                                formControlName="costo_banco"
+                                class="form-control"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div class="costs-input-normal-container">
+                        <div class="form-group">
+                          <label for="otros_costos">Otros costos: </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i class="fas fa-dollar-sign"></i>
+                              </p>
+                              <input
+                                type="text"
+                                formControlName="otros_costos"
+                                class="form-control"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="costs-input-normal-container">
+                        <div class="form-group">
+                          <label for="renta">Renta: </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i class="fas fa-dollar-sign"></i>
+                              </p>
+                              <input
+                                type="text"
+                                formControlName="renta"
+                                class="form-control"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="costs-input-normal-container">
+                        <div class="form-group">
+                          <label for="ingreso_neto">Ingreso neto: </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i class="fas fa-dollar-sign"></i>
+                              </p>
+                              <input
+                                type="text"
+                                formControlName="ingreso_neto"
+                                class="form-control"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <input
+                        type="hidden"
+                        formControlName="id_valor_comercial"
+                      />
+                      <input
+                        type="hidden"
+                        formControlName="id_proyeccion_ingreso"
+                      />
+                      <div class="clear"></div>
+                    </div>
+                  </div>
+                  <br />
+                  <div class="form-group text-right space-20">
+                    <button
+                      type="submit"
+                      class="btn btn-primary"
+                      (click)="submitProjectionChanges()"
+                    >
+                      Guardar información de proyecciones
+                    </button>
+                  </div>
+                  <br />
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <br />
+    </div>
+  </div>
+</div>

src/app/components/investments/costs/pbur/pbur.costs.component.ts

@@ -0,0 +1,311 @@
+import { Component, ViewChild, OnInit } from "@angular/core";
+import { MatPaginator } from "@angular/material/paginator";
+import { MatSort } from "@angular/material/sort";
+import { MatTableDataSource } from "@angular/material/table";
+import Swal from "sweetalert2";
+import { CatalogsService } from "src/app/services/catalogs.service";
+import { InvestmentsService } from "@app/services/investments.service";
+import { InstrumentCalculations } from "@app/services/instrument-calculations.service";
+
+import { AuthService } from "@app/services/auth2.service";
+import { JwtHelperService } from "@auth0/angular-jwt";
+import { InvestmentProposal } from "@app/models/investment-proposal";
+import { from } from "rxjs";
+import { FormInvestmentProposalService } from "@app/services/form-investment-proposal.service";
+import { Router, ActivatedRoute } from "@angular/router";
+import {
+  FormBuilder,
+  FormGroup,
+  FormControl,
+  FormArray,
+  Validators
+} from "@angular/forms";
+
+@Component({
+  selector: "app-pbur-costs",
+  templateUrl: "./pbur.costs.component.html"
+  //styleUrls: ["./dap.costs.component.scss"]
+})
+export class PBURCostsComponent implements OnInit {
+  helper = new JwtHelperService();
+
+  title: string = "Costos para papel bursátil";
+
+  displayedColumns: string[] = [
+    "codigo_inversion",
+    "asunto",
+    "id_tipo_mercado",
+    "id_inversion_instrumento",
+    "id"
+  ];
+  //displayedColumns: string[] = ['state'];
+
+  listProposals: InvestmentProposal[];
+  dataSource = new MatTableDataSource(this.listProposals);
+
+  resultsLength = 0;
+  isLoadingResults = true;
+  isRateLimitReached = false;
+  userRole: any;
+
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
+  @ViewChild(MatSort, { static: true }) sort: MatSort;
+  role_number: any;
+  investmentProposalID: string;
+
+  form: FormArray;
+  investmentProposalForm: FormGroup;
+
+  proyecciones: any;
+  proyeccionesProps = [];
+  dataRetrieved: boolean = false;
+
+  array1;
+  array2;
+  array3;
+  investment: any;
+  instrument_work: any;
+  instrument_exists: boolean;
+
+  constructor(
+    private catalogService: CatalogsService,
+    private investmentsService: InvestmentsService,
+    private authService: AuthService,
+    private formInvestmentProposal: FormInvestmentProposalService,
+    private router: Router,
+    private route: ActivatedRoute,
+    private instrumentService: InstrumentCalculations,
+
+    private formBuilder: FormBuilder
+  ) {
+    const decodedToken = this.helper.decodeToken(
+      this.authService.getJwtToken()
+    );
+    this.userRole = decodedToken.groups;
+
+    Swal.fire({
+      allowOutsideClick: false,
+      icon: "info",
+      text: "Espere por favor..."
+    });
+    Swal.showLoading();
+  }
+
+  ngOnInit() {
+    Swal.close();
+    const formDataObj = {};
+
+    this.route.params.subscribe(params => {
+      this.investmentProposalID = params["id"];
+    });
+
+    if (this.investmentProposalID == undefined)
+      this.investmentProposalID = this.route.snapshot.queryParamMap.get("id");
+
+    if (this.investmentProposalID != undefined) {
+      this.investmentsService
+        .getProposalInvestment(this.investmentProposalID)
+        .subscribe(
+          res => {
+            this.investment = res["result"];
+            this.instrument_work =
+              res["result"]["id_inversion_instrumento"]["instrumento"];
+            this.instrument_exists = true;
+
+            this.investmentProposalForm = this.formBuilder.group({
+              valor_par: [
+                !this.instrument_exists ? false : this.instrument_work.valor_par
+              ],
+              valor_nominal: [
+                !this.instrument_exists
+                  ? ""
+                  : this.instrument_work.valor_nominal,
+                [
+                  Validators.required,
+                  Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+                ]
+              ],
+              otros_costos: [
+                !this.instrument_exists ? 0 : this.instrument_work.otros_costos,
+                [Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)]
+              ],
+              plazo: [
+                !this.instrument_exists ? "" : this.instrument_work.plazo,
+                [Validators.required]
+              ],
+              renta_porcentaje: [
+                !this.instrument_exists
+                  ? ""
+                  : this.instrument_work.renta_porcentaje,
+                [Validators.required]
+              ],
+              comision_casa_porcentaje: [
+                !this.instrument_exists
+                  ? ""
+                  : this.instrument_work.comision_casa_porcentaje,
+                [
+                  Validators.required,
+                  Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+                ]
+              ],
+              comision_bolsa_porcentaje: [
+                !this.instrument_exists
+                  ? ""
+                  : this.instrument_work.comision_bolsa_porcentaje,
+                [
+                  Validators.required,
+                  Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+                ]
+              ],
+              rendimiento_bruto: [
+                !this.instrument_exists
+                  ? ""
+                  : this.instrument_work.rendimiento_bruto,
+                [
+                  Validators.required,
+                  Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+                ]
+              ],
+              /*formato_ingreso: [
+                !this.instrument_exists ? "" : this.instrument_work.formato_ingreso,
+                [Validators.required]
+              ],*/
+              fecha_liquidacion: [
+                !this.instrument_exists
+                  ? ""
+                  : this.instrument_work.fecha_liquidacion,
+
+                [Validators.required]
+              ],
+              fecha_vencimiento: [
+                !this.instrument_exists
+                  ? ""
+                  : this.instrument_work.fecha_vencimiento,
+
+                [Validators.required]
+              ],
+              fecha_operacion: [
+                !this.instrument_exists
+                  ? ""
+                  : this.instrument_work.fecha_operacion,
+
+                [Validators.required]
+              ],
+              fecha_ultima_cupon: [
+                !this.instrument_exists
+                  ? ""
+                  : this.instrument_work.fecha_ultima_cupon,
+
+                [Validators.required]
+              ]
+            });
+          },
+          err => {}
+        );
+
+      this.investmentsService
+        .getProposalInvestment(this.investmentProposalID)
+        .subscribe(
+          res => {
+            this.proyecciones =
+              res["result"]["id_inversion_instrumento"]["instrumento"][
+                "proyecciones"
+              ];
+
+            this.form = new FormArray(this.buildForm(this.proyecciones));
+            this.dataRetrieved = true;
+          },
+          err => {
+            Swal.fire({
+              icon: "error",
+              title: "Error en el servidor",
+              text: err.message
+            });
+          }
+        );
+    }
+
+    setTimeout(() => {
+      Swal.close();
+    }, 1200);
+  }
+
+  submitInstrumentChanges() {}
+
+  submitProjectionChanges() {
+    console.log("submit");
+    console.log(this.form.value);
+    let objProjection = { proyecciones: this.form.value };
+    Swal.fire({
+      allowOutsideClick: false,
+      icon: "info",
+      text: "Espere por favor..."
+    });
+    Swal.showLoading();
+
+    this.instrumentService
+      .projectionCalc(this.investmentProposalID, this.form.value)
+      .subscribe(
+        resp => {
+          console.log(resp);
+          this.investmentsService
+            .updateInstrumentProjection(
+              this.investmentProposalID,
+              objProjection
+            )
+            .subscribe(
+              success => {
+                if (success) {
+                  Swal.fire({
+                    allowOutsideClick: false,
+                    icon: "success",
+                    showCancelButton: false,
+                    title: "Exito",
+                    confirmButtonText: "La información ha sido actualizada"
+                  }).then(result => {
+                    console.log(result);
+                    Swal.close();
+                    //window.location.reload();
+                  });
+                }
+              },
+              err => {
+                Swal.fire({
+                  icon: "error",
+                  title: "Error al guardar",
+                  text: err.message
+                });
+              }
+            );
+        },
+        err => {
+          Swal.fire({
+            icon: "error",
+            title: "Error al guardar",
+            text: err.message
+          });
+        }
+      );
+  }
+
+  buildForm(items: any[]): FormGroup[] {
+    return items.map(x => this.buildItem(x));
+  }
+  //return a formGroup
+  buildItem(item: any): FormGroup {
+    return new FormGroup({
+      id_proyeccion_ingreso: new FormControl(item.id_proyeccion_ingreso),
+      posicion: new FormControl(item.posicion),
+      plazo: new FormControl(item.plazo),
+      fecha_pago: new FormControl(item.fecha_pago),
+      monto: new FormControl(item.monto),
+      costo_cedeval: new FormControl(item.costo_cedeval),
+      costo_transferencia: new FormControl(item.costo_transferencia),
+      costo_banco: new FormControl(item.costo_banco),
+      otros_costos: new FormControl(item.otros_costos),
+      renta: new FormControl(item.renta),
+      ingreso_neto: new FormControl(item.ingreso_neto),
+      id_valor_comercial: new FormControl(item.id_valor_comercial)
+    });
+  }
+}

src/app/components/investments/costs/vcn/vcn.costs.component.html

@@ -0,0 +1,381 @@
+<h2 class="floating-title">{{ title }}</h2>
+
+<div class="main-content">
+  <div class="container-fluid">
+    <div class="row">
+      <div class="col-12 align-right">
+        <div class="align-container">
+          <nav aria-label="breadcrumb">
+            <ol class="breadcrumb">
+              <li class="breadcrumb-item">
+                <a [routerLink]="['/']">Dashboard</a>
+              </li>
+              <li class="breadcrumb-item">
+                <a [routerLink]="['/investments']">
+                  Inversiones activas
+                </a>
+              </li>
+              <li class="breadcrumb-item">Valores comerciales negociables</li>
+            </ol>
+          </nav>
+        </div>
+      </div>
+
+      <div class="col-12">
+        <div class="align-container">
+          <div class="card borderless card-wrapper">
+            <div class="wrapper-costs">
+              <h4 class="card-title">
+                Detalle de costos para el valor comercial
+              </h4>
+              <br />
+
+              <div class="align-container">
+                <div>
+                  <div class="costs-summary" *ngIf="instrument_exists">
+                    <div class="row">
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Valor par:</h4>
+                        <div class="field">
+                          {{ instrument_work.valor_par == true ? "Si" : "No" }}
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Valor nominal:</h4>
+                        <div class="field">
+                          $USD
+                          {{ instrument_work.valor_nominal | number: "1.2-4" }}
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Valor transado:</h4>
+                        <div class="field">
+                          $USD
+                          {{ instrument_work.valor_transado | number: "1.2-4" }}
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Precio porcentaje:</h4>
+                        <div class="field">
+                          {{
+                            instrument_work.precio_porcentaje | number: "1.2-4"
+                          }}%
+                        </div>
+                      </div>
+
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Plazo en días:</h4>
+                        <div class="field">
+                          {{ instrument_work.plazo }}
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Comisión casa:</h4>
+                        <div class="field">
+                          {{
+                            instrument_work.comision_casa_porcentaje
+                              | number: "1.2-4"
+                          }}%
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Comisión bolsa:</h4>
+                        <div class="field">
+                          {{
+                            instrument_work.comision_bolsa_porcentaje
+                              | number: "1.2-4"
+                          }}%
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Rendimiento bruto:</h4>
+                        <div class="field">
+                          $USD
+                          {{
+                            instrument_work.rendimiento_bruto | number: "1.2-4"
+                          }}
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Rendimiento neto:</h4>
+                        <div class="field">
+                          $USD
+                          {{
+                            instrument_work.rendimiento_neto | number: "1.2-4"
+                          }}
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Interés acumulado:</h4>
+                        <div class="field">
+                          $USD
+                          {{
+                            instrument_work.interes_acumulado | number: "1.2-4"
+                          }}
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Total a pagar:</h4>
+                        <div class="field">
+                          $USD
+                          {{ instrument_work.total_pagar | number: "1.2-4" }}
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Fecha de operación:</h4>
+                        <div class="field">
+                          {{ instrument_work.fecha_operacion }}
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Fecha de liquidación:</h4>
+                        <div class="field">
+                          {{ instrument_work.fecha_liquidacion }}
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Fecha vencimiento:</h4>
+                        <div class="field">
+                          {{ instrument_work.fecha_vencimiento }}
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Ultima fecha de cupón:</h4>
+                        <div class="field">
+                          {{ instrument_work.fecha_ultima_cupon }}
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Fecha inicio de vigencia:</h4>
+                        <div class="field">
+                          {{ instrument_work.fecha_inicio_vigencia }}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <br />
+              <br />
+              <div class="align-container">
+                <form *ngIf="dataRetrieved" [formGroup]="form">
+                  <div *ngFor="let group of form.controls; let i = index">
+                    <div class="wrapper-form" [formGroup]="group">
+                      <div class="costs-input-small-container">
+                        <div class="form-group">
+                          <label for="posicion">Posicion: </label>
+
+                          <div class="input-box-container">
+                            <input
+                              type="text"
+                              formControlName="posicion"
+                              class="form-control"
+                              readonly
+                            />
+                          </div>
+                        </div>
+                      </div>
+
+                      <div class="costs-input-small-container">
+                        <div class="form-group">
+                          <label for="plazo">Plazo: </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i class="far fa-clock" aria-hidden="true"></i>
+                              </p>
+                              <input
+                                type="text"
+                                formControlName="plazo"
+                                class="form-control"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div class="costs-input-normal-container">
+                        <div class="form-group">
+                          <label for="fecha_pago">Fecha pago: </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i
+                                  class="far fa-calendar"
+                                  aria-hidden="true"
+                                ></i>
+                              </p>
+                              <input
+                                type="text"
+                                formControlName="fecha_pago"
+                                class="form-control"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div class="costs-input-normal-container">
+                        <div class="form-group">
+                          <label for="monto">Monto: </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i class="fas fa-dollar-sign"></i>
+                              </p>
+                              <input
+                                type="text"
+                                formControlName="monto"
+                                class="form-control"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="costs-input-normal-container">
+                        <div class="form-group">
+                          <label for="costo_cedeval">Costo cedeval: </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i class="fas fa-dollar-sign"></i>
+                              </p>
+                              <input
+                                type="text"
+                                formControlName="costo_cedeval"
+                                class="form-control"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="costs-input-normal-container">
+                        <div class="form-group">
+                          <label for="costo_transferencia"
+                            >Costo transferencia:
+                          </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i class="fas fa-dollar-sign"></i>
+                              </p>
+                              <input
+                                type="text"
+                                formControlName="costo_transferencia"
+                                class="form-control"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="costs-input-normal-container">
+                        <div class="form-group">
+                          <label for="costo_banco">Costo banco: </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i class="fas fa-dollar-sign"></i>
+                              </p>
+                              <input
+                                type="text"
+                                formControlName="costo_banco"
+                                class="form-control"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div class="costs-input-normal-container">
+                        <div class="form-group">
+                          <label for="otros_costos">Otros costos: </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i class="fas fa-dollar-sign"></i>
+                              </p>
+                              <input
+                                type="text"
+                                formControlName="otros_costos"
+                                class="form-control"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="costs-input-normal-container">
+                        <div class="form-group">
+                          <label for="renta">Renta: </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i class="fas fa-dollar-sign"></i>
+                              </p>
+                              <input
+                                type="text"
+                                formControlName="renta"
+                                class="form-control"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="costs-input-normal-container">
+                        <div class="form-group">
+                          <label for="ingreso_neto">Ingreso neto: </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i class="fas fa-dollar-sign"></i>
+                              </p>
+                              <input
+                                type="text"
+                                formControlName="ingreso_neto"
+                                class="form-control"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <input
+                        type="hidden"
+                        formControlName="id_valor_comercial"
+                      />
+                      <input
+                        type="hidden"
+                        formControlName="id_proyeccion_ingreso"
+                      />
+                      <div class="clear"></div>
+                    </div>
+                  </div>
+                  <br />
+                  <div class="form-group text-right space-20">
+                    <button
+                      type="submit"
+                      class="btn btn-primary"
+                      (click)="submitProjectionChanges()"
+                    >
+                      Guardar información de proyecciones
+                    </button>
+                  </div>
+                  <br />
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <br />
+    </div>
+  </div>
+</div>

src/app/components/investments/costs/vcn/vcn.costs.component.ts

@@ -0,0 +1,311 @@
+import { Component, ViewChild, OnInit } from "@angular/core";
+import { MatPaginator } from "@angular/material/paginator";
+import { MatSort } from "@angular/material/sort";
+import { MatTableDataSource } from "@angular/material/table";
+import Swal from "sweetalert2";
+import { CatalogsService } from "src/app/services/catalogs.service";
+import { InvestmentsService } from "@app/services/investments.service";
+import { InstrumentCalculations } from "@app/services/instrument-calculations.service";
+
+import { AuthService } from "@app/services/auth2.service";
+import { JwtHelperService } from "@auth0/angular-jwt";
+import { InvestmentProposal } from "@app/models/investment-proposal";
+import { from } from "rxjs";
+import { FormInvestmentProposalService } from "@app/services/form-investment-proposal.service";
+import { Router, ActivatedRoute } from "@angular/router";
+import {
+  FormBuilder,
+  FormGroup,
+  FormControl,
+  FormArray,
+  Validators
+} from "@angular/forms";
+
+@Component({
+  selector: "app-vcn-costs",
+  templateUrl: "./vcn.costs.component.html"
+  //styleUrls: ["./dap.costs.component.scss"]
+})
+export class VCNCostsComponent implements OnInit {
+  helper = new JwtHelperService();
+
+  title: string = "Costos para valores comerciales";
+
+  displayedColumns: string[] = [
+    "codigo_inversion",
+    "asunto",
+    "id_tipo_mercado",
+    "id_inversion_instrumento",
+    "id"
+  ];
+  //displayedColumns: string[] = ['state'];
+
+  listProposals: InvestmentProposal[];
+  dataSource = new MatTableDataSource(this.listProposals);
+
+  resultsLength = 0;
+  isLoadingResults = true;
+  isRateLimitReached = false;
+  userRole: any;
+
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
+  @ViewChild(MatSort, { static: true }) sort: MatSort;
+  role_number: any;
+  investmentProposalID: string;
+
+  form: FormArray;
+  investmentProposalForm: FormGroup;
+
+  proyecciones: any;
+  proyeccionesProps = [];
+  dataRetrieved: boolean = false;
+
+  array1;
+  array2;
+  array3;
+  investment: any;
+  instrument_work: any;
+  instrument_exists: boolean;
+
+  constructor(
+    private catalogService: CatalogsService,
+    private investmentsService: InvestmentsService,
+    private authService: AuthService,
+    private formInvestmentProposal: FormInvestmentProposalService,
+    private router: Router,
+    private route: ActivatedRoute,
+    private instrumentService: InstrumentCalculations,
+
+    private formBuilder: FormBuilder
+  ) {
+    const decodedToken = this.helper.decodeToken(
+      this.authService.getJwtToken()
+    );
+    this.userRole = decodedToken.groups;
+
+    Swal.fire({
+      allowOutsideClick: false,
+      icon: "info",
+      text: "Espere por favor..."
+    });
+    Swal.showLoading();
+  }
+
+  ngOnInit() {
+    Swal.close();
+    const formDataObj = {};
+
+    this.route.params.subscribe(params => {
+      this.investmentProposalID = params["id"];
+    });
+
+    if (this.investmentProposalID == undefined)
+      this.investmentProposalID = this.route.snapshot.queryParamMap.get("id");
+
+    if (this.investmentProposalID != undefined) {
+      this.investmentsService
+        .getProposalInvestment(this.investmentProposalID)
+        .subscribe(
+          res => {
+            this.investment = res["result"];
+            this.instrument_work =
+              res["result"]["id_inversion_instrumento"]["instrumento"];
+            this.instrument_exists = true;
+
+            this.investmentProposalForm = this.formBuilder.group({
+              valor_par: [
+                !this.instrument_exists ? false : this.instrument_work.valor_par
+              ],
+              valor_nominal: [
+                !this.instrument_exists
+                  ? ""
+                  : this.instrument_work.valor_nominal,
+                [
+                  Validators.required,
+                  Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+                ]
+              ],
+              otros_costos: [
+                !this.instrument_exists ? 0 : this.instrument_work.otros_costos,
+                [Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)]
+              ],
+              plazo: [
+                !this.instrument_exists ? "" : this.instrument_work.plazo,
+                [Validators.required]
+              ],
+              renta_porcentaje: [
+                !this.instrument_exists
+                  ? ""
+                  : this.instrument_work.renta_porcentaje,
+                [Validators.required]
+              ],
+              comision_casa_porcentaje: [
+                !this.instrument_exists
+                  ? ""
+                  : this.instrument_work.comision_casa_porcentaje,
+                [
+                  Validators.required,
+                  Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+                ]
+              ],
+              comision_bolsa_porcentaje: [
+                !this.instrument_exists
+                  ? ""
+                  : this.instrument_work.comision_bolsa_porcentaje,
+                [
+                  Validators.required,
+                  Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+                ]
+              ],
+              rendimiento_bruto: [
+                !this.instrument_exists
+                  ? ""
+                  : this.instrument_work.rendimiento_bruto,
+                [
+                  Validators.required,
+                  Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+                ]
+              ],
+              /*formato_ingreso: [
+                !this.instrument_exists ? "" : this.instrument_work.formato_ingreso,
+                [Validators.required]
+              ],*/
+              fecha_liquidacion: [
+                !this.instrument_exists
+                  ? ""
+                  : this.instrument_work.fecha_liquidacion,
+
+                [Validators.required]
+              ],
+              fecha_vencimiento: [
+                !this.instrument_exists
+                  ? ""
+                  : this.instrument_work.fecha_vencimiento,
+
+                [Validators.required]
+              ],
+              fecha_operacion: [
+                !this.instrument_exists
+                  ? ""
+                  : this.instrument_work.fecha_operacion,
+
+                [Validators.required]
+              ],
+              fecha_ultima_cupon: [
+                !this.instrument_exists
+                  ? ""
+                  : this.instrument_work.fecha_ultima_cupon,
+
+                [Validators.required]
+              ]
+            });
+          },
+          err => {}
+        );
+
+      this.investmentsService
+        .getProposalInvestment(this.investmentProposalID)
+        .subscribe(
+          res => {
+            this.proyecciones =
+              res["result"]["id_inversion_instrumento"]["instrumento"][
+                "proyecciones"
+              ];
+
+            this.form = new FormArray(this.buildForm(this.proyecciones));
+            this.dataRetrieved = true;
+          },
+          err => {
+            Swal.fire({
+              icon: "error",
+              title: "Error en el servidor",
+              text: err.message
+            });
+          }
+        );
+    }
+
+    setTimeout(() => {
+      Swal.close();
+    }, 1200);
+  }
+
+  submitInstrumentChanges() {}
+
+  submitProjectionChanges() {
+    console.log("submit");
+    console.log(this.form.value);
+    let objProjection = { proyecciones: this.form.value };
+    Swal.fire({
+      allowOutsideClick: false,
+      icon: "info",
+      text: "Espere por favor..."
+    });
+    Swal.showLoading();
+
+    this.instrumentService
+      .projectionCalc(this.investmentProposalID, this.form.value)
+      .subscribe(
+        resp => {
+          console.log(resp);
+          this.investmentsService
+            .updateInstrumentProjection(
+              this.investmentProposalID,
+              objProjection
+            )
+            .subscribe(
+              success => {
+                if (success) {
+                  Swal.fire({
+                    allowOutsideClick: false,
+                    icon: "success",
+                    showCancelButton: false,
+                    title: "Exito",
+                    confirmButtonText: "La información ha sido actualizada"
+                  }).then(result => {
+                    console.log(result);
+                    Swal.close();
+                    //window.location.reload();
+                  });
+                }
+              },
+              err => {
+                Swal.fire({
+                  icon: "error",
+                  title: "Error al guardar",
+                  text: err.message
+                });
+              }
+            );
+        },
+        err => {
+          Swal.fire({
+            icon: "error",
+            title: "Error al guardar",
+            text: err.message
+          });
+        }
+      );
+  }
+
+  buildForm(items: any[]): FormGroup[] {
+    return items.map(x => this.buildItem(x));
+  }
+  //return a formGroup
+  buildItem(item: any): FormGroup {
+    return new FormGroup({
+      id_proyeccion_ingreso: new FormControl(item.id_proyeccion_ingreso),
+      posicion: new FormControl(item.posicion),
+      plazo: new FormControl(item.plazo),
+      fecha_pago: new FormControl(item.fecha_pago),
+      monto: new FormControl(item.monto),
+      costo_cedeval: new FormControl(item.costo_cedeval),
+      costo_transferencia: new FormControl(item.costo_transferencia),
+      costo_banco: new FormControl(item.costo_banco),
+      otros_costos: new FormControl(item.otros_costos),
+      renta: new FormControl(item.renta),
+      ingreso_neto: new FormControl(item.ingreso_neto),
+      id_valor_comercial: new FormControl(item.id_valor_comercial)
+    });
+  }
+}

src/app/components/investments/investments.component.html

@@ -89,16 +89,22 @@
                         <i class="fas fa-info"></i>
                       </a>
                       <a
+                        title="Costos"
+                        class="btn btn-warning btn-custom-small"
                         *ngIf="
-                          can_modify_or_send_to_review(
-                            row.id_estado_inversion.codigo
+                          instrument_has_costs(row.id_inversion_instrumento)
+                        "
+                        (click)="
+                          go_to_instrument_url(
+                            row.id_inversion,
+                            row.id_inversion_instrumento.id_tipo_instrumento
+                              .codigo,
+                            'costs'
                           )
                         "
-                        title="Editar"
-                        class="btn btn-primary btn-custom-small"
-                        (click)="modify_investment_proposal(row.id_inversion)"
                       >
-                        <i class="fas fa-edit"></i>
+                        <i class="fas fa-funnel-dollar"></i>
+                        Costos
                       </a>
                     </div>
                   </td>

src/app/components/investments/investments.component.scss

@@ -1,10 +0,0 @@
-.action-buttons {
-  i {
-    font-size: 18px;
-  }
-}
-
-.btn-custom-small {
-  padding: 7px 12px 5px 13px;
-  margin: 0 4px;
-}

src/app/components/investments/investments.component.ts

@@ -130,30 +130,37 @@ export class InvestmentsComponent implements OnInit {
     }, 1000);
   }
 
-  modify_investment_proposal(id: string) {
-    this.formInvestmentProposal.resetFormData();
+  instrument_has_costs(instrument: any) {
+    switch (instrument.id_tipo_instrumento.codigo) {
+      case "VCN":
+      case "PBUR":
+        if (instrument.id_inversion_instrumento.valor_par == true) {
+          return true;
+        } else {
+          return false;
+        }
+        break;
+      case "CETE":
+      case "DAP":
+        return true;
+        break;
+      default:
+        return false;
+    }
+  }
 
+  go_to_instrument_url(id: string, code: string, route: string) {
     Swal.fire({
       allowOutsideClick: false,
       icon: "info",
       text: "Espere por favor..."
     });
     Swal.showLoading();
+
     setTimeout(() => {
-      this.router.navigate(["/investment-proposal/general-info"], {
-        queryParams: { id: id }
-      });
+      this.router.navigate([
+        `/investment-${route}/${code.toLowerCase()}/${id}`
+      ]);
     }, 1000);
   }
-
-  // Verifica permisos para mostrar boton de edicion y/o envio a revision,
-  // segun los permisos del usuario y el estado de la propuesta
-  can_modify_or_send_to_review(status: string) {
-    if (status == "NUEVA" && (this.userRole.length == 0 || this.userRole)) {
-      // TO DO ver que el codigo de los tipos de usuario
-      return true;
-    } else {
-      return false;
-    }
-  }
 }

src/app/components/shared/sidebar/sidebar.component.ts

@@ -24,14 +24,20 @@ export const ROUTES: RouteInfo[] = [
     icon: "wb_incandescent",
     class: ""
     //allowed_roles: [2, 3]
-  }
-  /*,
+  },
   {
     path: "/investments",
     title: "Inversiones",
     icon: "work",
     class: ""
     //allowed_roles: [2, 3]
+  },
+  {
+    path: "/investment-incomes",
+    title: "Ingresos",
+    icon: "account_balance_wallet",
+    class: ""
+    //allowed_roles: [2, 3]
   }
   /*
   {

src/app/layouts/admin/admin.module.ts

@@ -71,6 +71,12 @@ import { PaymentInfoComponent } from "@app/components/investment-proposals/payme
 import { InvestmentProposalDetailComponent } from "@app/components/investment-proposals/proposal-detail/proposal-detail.component";
 import { InvestmentProposalApproveComponent } from "@app/components/investment-proposals/approve/approve.component";
 import { DAPCostsComponent } from "@app/components/investments/costs/dap/dap.costs.component";
+import { VCNCostsComponent } from "@app/components/investments/costs/vcn/vcn.costs.component";
+import { PBURCostsComponent } from "@app/components/investments/costs/pbur/pbur.costs.component";
+import { IncomesComponent } from "@app/components/incomes/incomes.component";
+
+import { GeneralIncomeFormComponent } from "@app/components/incomes/general-form/general-form.component";
+
 // This array defines which "componentId" maps to which lazy-loaded module.
 
 @NgModule({
@@ -136,7 +142,11 @@ import { DAPCostsComponent } from "@app/components/investments/costs/dap/dap.cos
     PaymentInfoComponent,
     PaymentRequirementComponent,
     InvestmentProposalDetailComponent,
-    DAPCostsComponent
+    DAPCostsComponent,
+    VCNCostsComponent,
+    PBURCostsComponent,
+    IncomesComponent,
+    GeneralIncomeFormComponent
   ],
   entryComponents: [
     LETE,

src/app/layouts/admin/admin.routing.ts

@@ -26,6 +26,10 @@ import { NgModule } from "@angular/core";
 import { from } from "rxjs";
 import { InvestmentProposalApproveComponent } from "@app/components/investment-proposals/approve/approve.component";
 import { DAPCostsComponent } from "@app/components/investments/costs/dap/dap.costs.component";
+import { VCNCostsComponent } from "@app/components/investments/costs/vcn/vcn.costs.component";
+import { PBURCostsComponent } from "@app/components/investments/costs/pbur/pbur.costs.component";
+import { IncomesComponent } from "@app/components/incomes/incomes.component";
+import { GeneralIncomeFormComponent } from "@app/components/incomes/general-form/general-form.component";
 
 export const AdminLayoutRoutes: Routes = [
   {
@@ -194,5 +198,35 @@ export const AdminLayoutRoutes: Routes = [
   {
     path: "investment-costs/dap/:id",
     component: DAPCostsComponent
-  }
+  },
+  {
+    path: "investment-costs/vcn/:id",
+    component: VCNCostsComponent
+  },
+  {
+    path: "investment-costs/pbur/:id",
+    component: PBURCostsComponent
+  },
+  {
+    path: "investment-incomes",
+    component: IncomesComponent
+  },
+  {
+    path: "investment-income/:instrument/:id",
+    component: GeneralIncomeFormComponent
+  } /*
+  {
+    path: "investment-income/vcn/:id",
+    component: VCNIncomeComponent
+  },
+  {
+    path: "investment-income/pbur/:id",
+    component: PBURIncomeComponent
+  },
+
+  {
+    path: "investment-income/cete/:id",
+    component: CETEIncomeComponent
+  },
+*/
 ];

src/app/models/income-list.ts

@@ -0,0 +1,16 @@
+export interface IncomeList {
+  proyeccion_ingreso: number;
+  fecha_pago: string;
+  id_inversion: number;
+  codigo_inversion: string;
+  nombre_inversion: string;
+  empresa: string;
+  tipo_instrumento: string;
+  codigo_instrumento: string;
+  posicion: number;
+  capital: number;
+  ingreso_bruto: number;
+  renta: number;
+  ingreso_neto: number;
+  estado: string;
+}

src/app/services/incomes.service.ts

@@ -0,0 +1,118 @@
+import { Injectable } from "@angular/core";
+
+import { of as observableOf, Observable, throwError } from "rxjs";
+import { HttpClient, HttpHeaders } from "@angular/common/http";
+import { retry, catchError, map, timeout } from "rxjs/operators";
+
+import { environment } from "@environments/environment";
+
+@Injectable({
+  providedIn: "root"
+})
+export class IncomesService {
+  time: number = 6000;
+
+  constructor(private http: HttpClient) {}
+
+  // Obtener listado de propuestas de inversiones
+  getProjectionsIncomeList() {
+    return this.http
+      .get<any>(`${environment.productionApiUrl}/proyecciones`, {})
+      .pipe(
+        map(response => {
+          return response;
+        }),
+        catchError(this.errorHandl)
+      );
+  }
+
+  // Obtener propuesta de inversion segun ID
+  searchProjectionsIncomeByInstrument(query: string) {
+    return this.http
+      .get<any>(
+        `${environment.productionApiUrl}/proyecciones?instrumento=${query}`
+      )
+      .pipe(
+        timeout(this.time),
+        map(response => {
+          return response;
+        }),
+        catchError(this.errorHandl)
+      );
+  }
+
+  searchProjectionsIncomeByDate(
+    start_date: string,
+    end_date: string
+  ): Observable<boolean> {
+    return this.http
+      .get<any>(
+        `${environment.productionApiUrl}/proyecciones?fecha_desde=${start_date}&fecha_hasta=${end_date}`
+      )
+      .pipe(
+        map(response => {
+          return response;
+        }),
+        catchError(this.errorHandl)
+      );
+  }
+
+  getProjectionIncome(instrument: string, id: string): Observable<boolean> {
+    return this.http
+      .get<any>(
+        `${environment.productionApiUrl}/proyeccion/${instrument}/${id}`
+      )
+      .pipe(
+        map(response => {
+          return response;
+        }),
+        catchError(this.errorHandl)
+      );
+  }
+
+  createIncome(income: Object): Observable<boolean> {
+    return this.http
+      .post<any>(`${environment.productionApiUrl}/ingreso`, income)
+      .pipe(
+        map(response => {
+          return response;
+        }),
+        catchError(this.errorHandl)
+      );
+  }
+
+  conciliateIncome(income: Object): Observable<boolean> {
+    return this.http
+      .post<any>(`${environment.productionApiUrl}/ingreso`, income)
+      .pipe(
+        map(response => {
+          return response;
+        }),
+        catchError(this.errorHandl)
+      );
+  }
+
+  updateProposalInvestment(id: string, inversion: Object): Observable<boolean> {
+    return this.http
+      .put<any>(`${environment.productionApiUrl}/inversion/${id}`, inversion)
+      .pipe(
+        map(response => {
+          return response;
+        }),
+        catchError(this.errorHandl)
+      );
+  }
+
+  //if(error.error instanceof ErrorEvent) {
+  errorHandl(error) {
+    let errorMessage = "";
+    if (error.error) {
+      // Get client-side error
+      errorMessage = error.error;
+    } else {
+      // Get server-side error
+      errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
+    }
+    return throwError(errorMessage);
+  }
+}

src/app/services/instrument-calculations.service.ts

@@ -89,7 +89,6 @@ export class InstrumentCalculations {
       comision_bolsa_porcentaje: number;
       rendimiento_bruto: number;
       otros_costos: number;
-      plazo: number;
       renta_porcentaje: number;
       fecha_operacion: string;
       fecha_liquidacion: string;
@@ -141,6 +140,19 @@ export class InstrumentCalculations {
       );
   }
 
+  projectionCalc(id: string, proyecciones: any): Observable<boolean> {
+    return this.http
+      .put<any>(`${environment.productionApiUrl}/autocomplete/${id}`, {
+        proyecciones
+      })
+      .pipe(
+        map(response => {
+          return response;
+        }),
+        catchError(this.errorHandl)
+      );
+  }
+
   errorHandl(error) {
     let errorMessage = "";
     if (error.error) {

src/app/services/investments.service.ts

@@ -134,6 +134,17 @@ export class InvestmentsService {
       );
   }
 
+  updateInstrumentProjection(id: string, list: any): Observable<boolean> {
+    return this.http
+      .put<any>(`${environment.productionApiUrl}/proyeccion/${id}`, list)
+      .pipe(
+        map(response => {
+          return response;
+        }),
+        catchError(this.errorHandl)
+      );
+  }
+
   //if(error.error instanceof ErrorEvent) {
   errorHandl(error) {
     let errorMessage = "";

src/styles.scss

@@ -247,10 +247,16 @@ textarea.form-control {
   text-align: left;
   margin-right: 5px;
   padding-left: 8px;
+  display: table-cell;
+}
 
-  .input-box-container input {
-    border-bottom: 1px solid;
-  }
+.wrapper-costs {
+  padding: 20px;
+}
+
+.wrapper-form {
+  width: 100%;
+  display: table;
 }
 
 .costs-input-small-container {
@@ -258,9 +264,48 @@ textarea.form-control {
 }
 
 .costs-input-normal-container {
-  width: 180px;
+  width: auto;
 }
 
-.wrapper-costs {
-  padding: 20px;
+.costs-summary {
+  border: 1px solid #afdb90;
+  padding: 20px 15px;
+  background: #dcefce;
+
+  h4 {
+    font-size: 1.2rem;
+    margin-bottom: 2px;
+    font-weight: bold;
+  }
+
+  .field {
+    margin-bottom: 5px;
+  }
+}
+
+.action-buttons {
+  i {
+    font-size: 18px;
+  }
+}
+
+.btn-custom-small {
+  padding: 7px 12px 5px 13px;
+  margin: 0 4px;
+}
+
+.income-summary {
+  border: 1px solid #000;
+  padding: 20px 15px;
+  background: #b1c9b5;
+
+  h4 {
+    font-size: 1.2rem;
+    margin-bottom: 2px;
+    font-weight: bold;
+  }
+
+  .field {
+    margin-bottom: 5px;
+  }
 }