frontend-inversiones/src/app/components/investments/costs/pbur/pbur.costs.component.html

<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"
                                readonly
                              />
                            </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"
                                readonly
                              />
                            </div>
                          </div>
                        </div>
                      </div>

                      <div class="costs-input-normal-container">
                        <div class="form-group">
                          <label for="ingreso_bruto">Ingreso bruto: </label>

                          <div class="input-box-container">
                            <div>
                              <p>
                                <i class="fas fa-dollar-sign"></i>
                              </p>
                              <input
                                type="text"
                                formControlName="ingreso_bruto"
                                class="form-control"
                                readonly
                              />
                            </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="number"
                                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="number"
                                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="number"
                                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="number"
                                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"
                                readonly
                              />
                            </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"
                                readonly
                              />
                            </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="button"
                      class="btn btn-success center-component float-left"
                      (click)="saveProjection()"
                    >
                      Guardar información de proyecciones
                    </button>

                    <button
                      type="button"
                      class="btn btn-primary center-component float-right"
                      (click)="recalculateProjectionChanges()"
                    >
                      Recalcular proyecciones
                    </button>
                  </div>
                  <br />
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
      <br />
    </div>
  </div>
</div>