frontend-inversiones/src/app/components/investments/costs/pper/pper.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">Préstamos personales</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 proyecciones para el préstamo personal
              </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>Nombre deudor:</h4>
                        <div class="field">
                          
                          {{ instrument_work.nombre_deudor }}
                        </div>
                      </div>
                      
                      <div class="col-lg-3 col-md-4 col-sm-6">
                        <h4>Número deudor:</h4>
                        <div class="field">
                          
                          {{ instrument_work.numero_deudor }}
                        </div>
                      </div>

                      <div class="col-lg-3 col-md-4 col-sm-6">
                        <h4>Monto préstamo:</h4>
                        <div class="field">
                          $USD
                          {{ instrument_work.monto_prestamo | number: "1.2-4" }}
                        </div>
                      </div>
                      <div class="col-lg-3 col-md-4 col-sm-6">
                        <h4>Cuota sin seguros:</h4>
                        <div class="field">
                          $USD
                          {{ instrument_work.cuota_sin_seguros | number: "1.2-4" }}
                        </div>
                      </div>
                      <div class="col-lg-3 col-md-4 col-sm-6">
                        <h4>Tasa (%):</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>IVA (%):</h4>
                        <div class="field">
                          {{
                            instrument_work.iva_porcentaje | number: "1.2-4"
                          }}%
                        </div>
                      </div>
     




                      <div class="col-lg-3 col-md-4 col-sm-6">
                        <h4>Plazo gracia:</h4>
                        <div class="field">
                          {{ instrument_work.plazo_gracia | number: "1.2-4" }}
                        </div>
                      </div>
                      <div class="col-lg-3 col-md-4 col-sm-6">
                        <h4>Fecha de otorgamiento:</h4>
                        <div class="field">
                          {{ instrument_work.fecha_otorgamiento }}
                        </div>
                      </div>
                      <div class="col-lg-3 col-md-4 col-sm-6">
                        <h4>Fecha de gracia:</h4>
                        <div class="field">
                          {{ instrument_work.fecha_gracia }}
                        </div>
                      </div>
                      <div class="col-lg-3 col-md-4 col-sm-6">
                        <h4>Fecha de vencimiento:</h4>
                        <div class="field">
                          {{ instrument_work.fecha_fin_otorgamiento }}
                        </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="tasa_porcentaje">Tasa: </label>

                          <div class="input-box-container">
                            <div>
                              <p>
                                <i class="fas fa-percent"></i>
                              </p>
                              <input
                                type="text"
                                formControlName="tasa_porcentaje"
                                [value]="group.get('tasa_porcentaje').value | numberPipe" 
                                class="form-control"
                                (input)="inputValidator($event)"
                              />
                            </div>
                          </div>
                        </div>
                      </div>

                      <div class="costs-input-normal-container">
                        <div class="form-group">
                          <label for="saldo_inicial">Saldo inicial: </label>

                          <div class="input-box-container">
                            <div>
                              <p>
                                <i class="fas fa-dollar-sign"></i>
                              </p>
                              <input
                                type="text"
                                formControlName="saldo_inicial"
                                [value]="group.get('saldo_inicial').value | number: '1.2-4'"
                                class="form-control"
                                readonly
                              />
                            </div>
                          </div>
                        </div>
                      </div>

                      <div class="costs-input-normal-container">
                        <div class="form-group">
                          <label for="pago_cuota">Pago cuota: </label>

                          <div class="input-box-container">
                            <div>
                              <p>
                                <i class="fas fa-dollar-sign"></i>
                              </p>
                              <input
                                type="text"
                                formControlName="pago_cuota"
                                [value]="group.get('pago_cuota').value | number: '1.2-4'"
                                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"
                                [value]="group.get('ingreso_bruto').value | number: '1.2-4'"
                                class="form-control"
                                readonly
                              />
                            </div>
                          </div>
                        </div>
                      </div>

                      <div class="costs-input-normal-container">
                        <div class="form-group">
                          <label for="iva_interes">IVA ($): </label>

                          <div class="input-box-container">
                            <div>
                              <p>
                                <i class="fas fa-dollar-sign"></i>
                              </p>
                              <input
                                type="text"
                                formControlName="iva_interes"
                                [value]="group.get('iva_interes').value | number: '1.2-4'"
                                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"
                                [value]="group.get('ingreso_neto').value | number: '1.2-4'"
                                class="form-control"
                                readonly
                              />
                            </div>
                          </div>
                        </div>
                      </div>

                      <div class="costs-input-normal-container">
                        <div class="form-group">
                          <label for="abono_capital">Abono capital: </label>

                          <div class="input-box-container">
                            <div>
                              <p>
                                <i class="fas fa-dollar-sign"></i>
                              </p>
                              <input
                                type="text"
                                formControlName="abono_capital"
                                [value]="group.get('abono_capital').value | number: '1.2-4'"
                                class="form-control"
                                readonly
                              />
                            </div>
                          </div>
                        </div>
                      </div>

                      <div class="costs-input-normal-container">
                        <div class="form-group">
                          <label for="capital_restante"
                            >Capital restante:
                          </label>

                          <div class="input-box-container">
                            <div>
                              <p>
                                <i class="fas fa-dollar-sign"></i>
                              </p>
                              <input
                                type="text"
                                formControlName="capital_restante"
                                [value]="group.get('capital_restante').value | number: '1.2-4'"
                                class="form-control"
                                readonly
                              />
                            </div>
                          </div>
                        </div>
                      </div>

                      <div class="costs-input-normal-container">
                        <div class="form-group">
                          <label for="pago_seguro_dano"
                            >Pago seguro daño:
                          </label>

                          <div class="input-box-container">
                            <div>
                              <p>
                                <i class="fas fa-dollar-sign"></i>
                              </p>
                              <input
                                type="text"
                                formControlName="pago_seguro_dano"
                                [value]="group.get('pago_seguro_dano').value | numberPipe" 
                                class="form-control"
                                (input)="inputValidator($event)"
                                class="form-control"
                                
                              />
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="costs-input-normal-container">
                        <div class="form-group">
                          <label for="pago_seguro_vivienda"
                            >Pago seguro vivienda:
                          </label>

                          <div class="input-box-container">
                            <div>
                              <p>
                                <i class="fas fa-dollar-sign"></i>
                              </p>
                              <input
                                type="text"
                                formControlName="pago_seguro_vivienda"
                                [value]="group.get('pago_seguro_vivienda').value | numberPipe" 
                                class="form-control"
                                (input)="inputValidator($event)"
                                class="form-control"
                                
                              />
                            </div>
                          </div>
                        </div>
                      </div>

                      <div class="costs-input-normal-container">
                        <div class="form-group">
                          <label for="total_cuota">Total cuota: </label>

                          <div class="input-box-container">
                            <div>
                              <p>
                                <i class="fas fa-dollar-sign"></i>
                              </p>
                              <input
                                type="text"
                                formControlName="total_cuota"
                                [value]="group.get('total_cuota').value | number: '1.2-4'"
                                class="form-control"
                                readonly
                              />
                            </div>
                          </div>
                        </div>
                      </div>

                      <div class="costs-input-normal-container">
                        <div class="form-group">
                          <label for="amortizacion_capital"
                            >Amortización capital:
                          </label>

                          <div class="input-box-container">
                            <div>
                              <p>
                                <i class="fas fa-dollar-sign"></i>
                              </p>
                              <input
                                type="text"
                                formControlName="amortizacion_capital"
                                [value]="group.get('amortizacion_capital').value | numberPipe" 
                                class="form-control"
                                (input)="inputValidator($event)"
                              />
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="costs-input-normal-container">
                        <div class="form-group">
                          <label for="total_recibir">Total a recibir: </label>

                          <div class="input-box-container">
                            <div>
                              <p>
                                <i class="fas fa-dollar-sign"></i>
                              </p>
                              <input
                                type="text"
                                formControlName="total_recibir"
                                [value]="group.get('total_recibir').value | number: '1.2-4'"
                                class="form-control"
                                readonly
                              />
                            </div>
                          </div>
                        </div>
                      </div>

                      <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>