frontend-inversiones/src/app/components/instruments/vcn/vcn.component.html

<div *ngIf="!summary">
  <h4 class="card-title">
    Valor comercial negociable
  </h4>
  <form
    class="form-auth-small ng-untouched ng-pristine ng-valid"
    [formGroup]="investmentProposalForm"
  >
    <div class="row">
      <div class="col-lg-6 col-sm-12 pr-xl-3">
        <div class="form-group">
          <label for="valor_nominal">Valor nominal: </label>
          <div class="input-box-container">
            <p>
              <i class="fas fa-dollar-sign"></i>
            </p>
            <input
              type="text"
              formControlName="valor_nominal"
              class="form-control"
              [ngClass]="{
                'is-invalid': submitted && f.valor_nominal.errors
              }"
            />
            <div
              *ngIf="submitted && f.valor_nominal.errors"
              class="invalid-feedback"
            >
              <div *ngIf="f.valor_nominal.errors.required">
                Campo requerido
              </div>
              <div *ngIf="f.valor_nominal.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="renta_porcentaje">Porcentaje renta: </label>
          <div class="input-box-container">
            <p>
              <i class="fas fa-percent"></i>
            </p>
            <input
              type="text"
              formControlName="renta_porcentaje"
              class="form-control"
              [ngClass]="{
                'is-invalid': submitted && f.renta_porcentaje.errors
              }"
            />
            <div
              *ngIf="submitted && f.renta_porcentaje.errors"
              class="invalid-feedback"
            >
              <div *ngIf="f.renta_porcentaje.errors.required">
                Campo requerido
              </div>
              <div *ngIf="f.renta_porcentaje.errors.pattern">
                Debe ingresar una cifra válida
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-6 col-sm-12 pr-xl-3">
        <div class="form-group">
          <label for="comision_casa_porcentaje">Comisión casa: </label>
          <div class="input-box-container">
            <p>
              <i class="fas fa-percent" aria-hidden="true"></i>
            </p>
            <input
              type="text"
              formControlName="comision_casa_porcentaje"
              class="form-control"
              [ngClass]="{
                'is-invalid': submitted && f.comision_casa_porcentaje.errors
              }"
            />
            <div
              *ngIf="submitted && f.comision_casa_porcentaje.errors"
              class="invalid-feedback"
            >
              <div *ngIf="f.comision_casa_porcentaje.errors.required">
                Campo requerido
              </div>
              <div *ngIf="f.comision_casa_porcentaje.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="valor_nominal">Comisión bolsa: </label>
          <div class="input-box-container">
            <p>
              <i class="fas fa-percent" aria-hidden="true"></i>
            </p>
            <input
              type="text"
              formControlName="comision_bolsa_porcentaje"
              class="form-control"
              [ngClass]="{
                'is-invalid': submitted && f.comision_bolsa_porcentaje.errors
              }"
            />
            <div
              *ngIf="submitted && f.comision_bolsa_porcentaje.errors"
              class="invalid-feedback"
            >
              <div *ngIf="f.comision_bolsa_porcentaje.errors.required">
                Campo requerido
              </div>
              <div *ngIf="f.comision_bolsa_porcentaje.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="rendimiento_bruto">Rendimiento bruto: </label>
          <div class="input-box-container">
            <p>
              <i class="fas fa-percent" aria-hidden="true"></i>
            </p>
            <input
              type="text"
              formControlName="rendimiento_bruto"
              class="form-control"
              [ngClass]="{
                'is-invalid': submitted && f.rendimiento_bruto.errors
              }"
            />
            <div
              *ngIf="submitted && f.rendimiento_bruto.errors"
              class="invalid-feedback"
            >
              <div *ngIf="f.rendimiento_bruto.errors.required">
                Campo requerido
              </div>
              <div *ngIf="f.rendimiento_bruto.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="otros_costos">Otros costos: </label>
          <div class="input-box-container">
            <p>
              <i class="fas fa-dollar-sign" aria-hidden="true"></i>
            </p>
            <input
              type="text"
              formControlName="otros_costos"
              class="form-control"
              [ngClass]="{
                'is-invalid': submitted && f.otros_costos.errors
              }"
            />
            <div
              *ngIf="submitted && f.otros_costos.errors"
              class="invalid-feedback"
            >
              <div *ngIf="f.otros_costos.errors.pattern">
                Debe ingresar una cifra válida
              </div>
            </div>
          </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>
          <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
              formControlName="fecha_operacion"
              (click)="dp.toggleCalendar()"
              [options]="myDpOptions"
              #dp="angular-mydatepicker"
              [ngClass]="{
                'is-invalid': submitted && f.fecha_operacion.errors
              }"
            />
          </div>

          <div
            *ngIf="submitted && f.fecha_operacion.errors"
            class="invalid-feedback"
          >
            <div *ngIf="f.fecha_operacion.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="fecha_liquidacion">Fecha liquidación: </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_liquidacion"
                (click)="dp1.toggleCalendar()"
                [options]="myDpOptions"
                #dp1="angular-mydatepicker"
                [ngClass]="{
                  'is-invalid': submitted && f.fecha_liquidacion.errors
                }"
              />
            </div>
          </div>

          <div
            *ngIf="submitted && f.fecha_liquidacion.errors"
            class="invalid-feedback"
          >
            <div *ngIf="f.fecha_liquidacion.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="fecha_vencimiento">Fecha vencimiento: </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_vencimiento"
                (click)="dp2.toggleCalendar()"
                [options]="myDpOptions"
                #dp2="angular-mydatepicker"
                [ngClass]="{
                  'is-invalid': submitted && f.fecha_vencimiento.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-6 col-sm-12 pr-xl-3">
        <div class="form-group">
          <label for="fecha_ultima_cupon">Ultima fecha cupón: </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_ultima_cupon"
                (click)="dp3.toggleCalendar()"
                [options]="myDpOptions"
                #dp3="angular-mydatepicker"
                [ngClass]="{
                  'is-invalid': submitted && f.fecha_ultima_cupon.errors
                }"
              />
            </div>
          </div>

          <div
            *ngIf="submitted && f.fecha_ultima_cupon.errors"
            class="invalid-feedback"
          >
            <div *ngIf="f.fecha_ultima_cupon.errors.required">
              Campo requerido
            </div>
          </div>
        </div>
      </div>

      <div class="col-lg-12 col-sm-12 pr-xl-12">
        <div class="form-group text-right">
          <br />
          <button
            type="button"
            class="btn btn-success center-component"
            (click)="getCalculations(investmentProposalForm, false)"
          >
            Realizar cálculos
          </button>
        </div>
      </div>
    </div>

    <br />
    <div class="instrument-calcs">
      <div class="row">
        <div class="col-12">
          <span class="badge badge-success badge-custom"
            >Cálculos del instrumento</span
          >
        </div>

        <div class="col-sm-6">
          <h4>Ingreso bruto:</h4>
          <div class="field">$USD {{ ingreso_bruto | number: "1.2-4" }}</div>
        </div>
        <div class="col-sm-6">
          <h4>Ingreso neto:</h4>
          <div class="field">$USD {{ ingreso_neto | number: "1.2-4" }}</div>
        </div>
        <div class="col-sm-6">
          <h4>Interes acumulado:</h4>
          <div class="field">
            {{ interes_acumulado | number: "1.2-4" }}
          </div>
        </div>
        <div class="col-sm-6">
          <h4>Plazo:</h4>
          <div class="field">
            {{ plazo }}
          </div>
        </div>
        <div class="col-sm-6">
          <h4>Valor transado:</h4>
          <div class="field">$USD {{ valor_transado | number: "1.2-4" }}</div>
        </div>
        <div class="col-sm-6">
          <h4>Precio porcentaje:</h4>
          <div class="field">
            {{ precio_porcentaje | number: "1.2-4" }}
          </div>
        </div>
        <div class="col-sm-6">
          <h4>Rendimiento neto:</h4>
          <div class="field">{{ rendimiento_neto | number: "1.2-4" }} %</div>
        </div>
        <div class="col-sm-6">
          <h4>Total a pagar:</h4>
          <div class="field">$USD {{ total_pagar | number: "1.2-4" }}</div>
        </div>
        <div class="col-sm-6">
          <h4>Comision bolsa:</h4>
          <div class="field">$USD {{ comision_bolsa | number: "1.2-4" }}</div>
        </div>
        <div class="col-sm-6">
          <h4>Comision casa:</h4>
          <div class="field">$USD {{ comision_casa | number: "1.2-4" }}</div>
        </div>
        <div class="col-sm-6">
          <h4>Fecha de inicio de vigencia:</h4>
          <div class="field">{{ fecha_inicio_vigencia }}</div>
        </div>
      </div>
    </div>

    <br />
    <div class="form-group text-center space-20">
      <button
        type="button"
        class="btn btn-default center-component margin-right"
        (click)="goToPrevious()"
      >
        Anterior
      </button>
      <button
        type="submit"
        class="btn btn-primary center-component margin-right"
        (click)="goToNext(investmentProposalForm)"
      >
        Siguiente
      </button>
    </div>

    <!-- [disabled]="!investmentProposalForm.valid"
                      <div *ngIf="error" class="alert alert-danger mt-3 mb-0">{{error}}</div>-->
  </form>
</div>

<div *ngIf="summary">
  <div class="timeline-body">
    <div class="row">
      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Valor nominal:</h4>
        <div class="field">$USD {{ instrument_work.valor_nominal }}</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 }} %
        </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 }} %
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Rendimiento bruto:</h4>
        <div class="field">{{ instrument_work.rendimiento_bruto }} %</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>
  </div>
</div>