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

<div *ngIf="!summary">
  <h4 class="card-title">
    Bonos
  </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="cuota_participacion">Cuota de participación: </label>
          <div class="input-box-container">
            <p>
              <i class="fas fa-dollar-sign" aria-hidden="true"></i>
            </p>
            <input
              type="text"
              formControlName="cuota_participacion"
              class="form-control"
              [ngClass]="{
                'is-invalid': submitted && f.cuota_participacion.errors
              }"
            />
            <div
              *ngIf="submitted && f.cuota_participacion.errors"
              class="invalid-feedback"
            >
              <div *ngIf="f.cuota_participacion.errors.required">
                Campo requerido
              </div>
              <div *ngIf="f.cuota_participacion.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_participacion_porcentaje"
            >Valor participación:
          </label>
          <div class="input-box-container">
            <p>
              <i class="fas fa-dollar-sign"></i>
            </p>
            <input
              type="text"
              formControlName="valor_participacion_porcentaje"
              class="form-control"
              [ngClass]="{
                'is-invalid':
                  submitted && f.valor_participacion_porcentaje.errors
              }"
            />
            <div
              *ngIf="submitted && f.valor_participacion_porcentaje.errors"
              class="invalid-feedback"
            >
              <div *ngIf="f.valor_participacion_porcentaje.errors.required">
                Campo requerido
              </div>
              <div *ngIf="f.valor_participacion_porcentaje.errors.pattern">
                Debe ingresar una cifra válida
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Comisión casa -->
      <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>

      <!-- Comisión bolsa -->
      <div class="col-lg-6 col-sm-12 pr-xl-3">
        <div class="form-group">
          <label for="comision_bolsa_porcentaje">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>

      <!-- Dividendo porcentaje -->
      <div class="col-lg-6 col-sm-12 pr-xl-3">
        <div class="form-group">
          <label for="dividendo_porcentaje">Dividendo </label>
          <div class="input-box-container">
            <p>
              <i class="fas fa-percent" aria-hidden="true"></i>
            </p>
            <input
              type="text"
              formControlName="dividendo_porcentaje"
              class="form-control"
              [ngClass]="{
                'is-invalid': submitted && f.dividendo_porcentaje.errors
              }"
            />
            <div
              *ngIf="submitted && f.dividendo_porcentaje.errors"
              class="invalid-feedback"
            >
              <div *ngIf="f.dividendo_porcentaje.errors.required">
                Campo requerido
              </div>
              <div *ngIf="f.dividendo_porcentaje.errors.pattern">
                Debe ingresar una cifra válida
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Rendimiento -->
      <div class="col-lg-6 col-sm-12 pr-xl-3">
        <div class="form-group">
          <label for="rendimiento_porcentaje">Rendimiento: </label>
          <div class="input-box-container">
            <p>
              <i class="fas fa-percent"></i>
            </p>
            <input
              type="text"
              formControlName="rendimiento_porcentaje"
              class="form-control"
              [ngClass]="{
                'is-invalid': submitted && f.rendimiento_porcentaje.errors
              }"
            />
            <div
              *ngIf="submitted && f.rendimiento_porcentaje.errors"
              class="invalid-feedback"
            >
              <div *ngIf="f.rendimiento_porcentaje.errors.required">
                Campo requerido
              </div>
              <div *ngIf="f.rendimiento_porcentaje.errors.pattern">
                Debe ingresar una cifra válida
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Días liquidación -->
      <div class="col-lg-6 col-sm-12 pr-xl-3">
        <div class="form-group">
          <label for="dias_liquidacion">Días liquidación: </label>
          <div class="input-box-container">
            <p>
              <i class="fas fa-calendar-alt"></i>
            </p>
            <input
              type="text"
              formControlName="dias_liquidacion"
              class="form-control"
              [ngClass]="{
                'is-invalid': submitted && f.dias_liquidacion.errors
              }"
            />
            <div
              *ngIf="submitted && f.dias_liquidacion.errors"
              class="invalid-feedback"
            >
              <div *ngIf="f.dias_liquidacion.errors.required">
                Campo requerido
              </div>
              <div *ngIf="f.dias_liquidacion.errors.pattern">
                Debe ingresar una cifra válida
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Días vencimiento -->
      <div class="col-lg-6 col-sm-12 pr-xl-3">
        <div class="form-group">
          <label for="dias_vencimiento">Días vencimiento: </label>
          <div class="input-box-container">
            <p>
              <i class="fas fa-calendar-alt"></i>
            </p>
            <input
              type="text"
              formControlName="dias_vencimiento"
              class="form-control"
              [ngClass]="{
                'is-invalid': submitted && f.dias_vencimiento.errors
              }"
            />
            <div
              *ngIf="submitted && f.dias_vencimiento.errors"
              class="invalid-feedback"
            >
              <div *ngIf="f.dias_vencimiento.errors.required">
                Campo requerido
              </div>
              <div *ngIf="f.dias_vencimiento.errors.pattern">
                Debe ingresar una cifra válida
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Fecha de operación -->
      <div class="col-lg-6 col-sm-12 pr-xl-3">
        <div class="form-group">
          <label for="fecha_operacion">Fecha de operació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_operacion"
                (click)="dp1.toggleCalendar()"
                [options]="myDpOptions"
                #dp1="angular-mydatepicker"
                [ngClass]="{
                  'is-invalid': submitted && f.fecha_operacion.errors
                }"
              />
            </div>
          </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-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 />
    <!-- Calculos del instrumento-->
    <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-4">
          <h4>Cuota participación:</h4>
          <div class="field">
            $USD {{ cuota_participacion | number: "1.2-4" }}
          </div>
        </div>

        <div class="col-sm-4">
          <h4>Valor participación:</h4>
          <div class="field">
            {{ valor_participacion_porcentaje | number: "1.2-4" }} %
          </div>
        </div>

        <div class="col-sm-4">
          <h4>Días liquidación:</h4>
          <div class="field">
            {{ dias_liquidacion }}
          </div>
        </div>

        <div class="col-sm-4">
          <h4>Días vencimiento:</h4>
          <div class="field">
            {{ dias_vencimiento }}
          </div>
        </div>

        <div class="col-sm-4">
          <h4>Valor nominal:</h4>
          <div class="field">$USD {{ valor_nominal | number: "1.2-4" }}</div>
        </div>

        <div class="col-sm-4">
          <h4>Valor transado:</h4>
          <div class="field">$USD {{ valor_transado | number: "1.2-4" }}</div>
        </div>

        <div class="col-sm-4">
          <h4>Monto a pagar:</h4>
          <div class="field">$USD {{ monto_pagar | number: "1.2-4" }}</div>
        </div>
        <div class="col-sm-4">
          <h4>Comisión casa (%):</h4>
          <div class="field">
            {{ comision_casa_porcentaje | number: "1.2-4" }}
            %
          </div>
        </div>
        <div class="col-sm-4">
          <div class="field">
            <h4>Comisión casa:</h4>
            $USD {{ comision_casa | number: "1.2-4" }}
          </div>
        </div>
        <div class="col-sm-4">
          <h4>Comisión bolsa (%):</h4>
          <div class="field">
            {{ comision_bolsa_porcentaje | number: "1.2-4" }}
            %
          </div>
        </div>
        <div class="col-sm-4">
          <div class="field">
            <h4>Comisión bolsa:</h4>
            $USD {{ comision_bolsa | number: "1.2-4" }}
          </div>
        </div>

        <div class="col-sm-4">
          <h4>Rendimiento (%):</h4>
          <div class="field">
            {{ rendimiento_porcentaje | number: "1.2-4" }}
            %
          </div>
        </div>

        <div class="col-sm-4">
          <h4>Dividendo (%):</h4>
          <div class="field">
            {{ dividendo_porcentaje | number: "1.2-4" }}
            %
          </div>
        </div>

        <div class="col-sm-4">
          <h4>Fecha operación:</h4>
          <div class="field">
            {{ fecha_operacion }}
          </div>
        </div>

        <div class="col-sm-4">
          <h4>Fecha liquidación:</h4>
          <div class="field">
            {{ fecha_liquidacion }}
          </div>
        </div>

        <div class="col-sm-4">
          <h4>Fecha vencimiento:</h4>
          <div class="field">
            {{ fecha_vencimiento }}
          </div>
        </div>
      </div>
    </div>
    <br />
    <!-- Tabla de proyecciones del instrumento-->
    <div *ngIf="hasProjections" class="instrument-calcs">
      <div class="row">
        <div class="col-12">
          <span class="badge badge-success badge-custom"
            >Proyecciones del instrumento</span
          >
        </div>

        <div class="cete-table-container">
          <table mat-table [dataSource]="dataSource" class="example-table">
            <!-- Name Column -->
            <ng-container matColumnDef="posicion">
              <th mat-header-cell *matHeaderCellDef>#</th>
              <td mat-cell *matCellDef="let row">
                {{ row.posicion }}
              </td>
              <td mat-footer-cell *matFooterCellDef>TOTAL</td>
            </ng-container>
            <!-- Country Column -->
            <ng-container matColumnDef="plazo">
              <th mat-header-cell *matHeaderCellDef>Plazo</th>
              <td mat-cell *matCellDef="let row">
                {{ row.plazo }}
              </td>
              <td mat-footer-cell *matFooterCellDef></td>
            </ng-container>

            <ng-container matColumnDef="fecha_pago">
              <th mat-header-cell *matHeaderCellDef>Fecha pago</th>
              <td mat-cell *matCellDef="let row">
                {{
                  row.fecha_pago == "" || row.fecha_pago == undefined
                    ? "-"
                    : row.fecha_pago
                }}
              </td>
              <td mat-footer-cell *matFooterCellDef></td>
            </ng-container>
            <ng-container matColumnDef="ingreso_bruto">
              <th mat-header-cell *matHeaderCellDef>Ingreso bruto</th>
              <td mat-cell *matCellDef="let row">
                {{
                  row.ingreso_bruto == "" || row.ingreso_bruto == undefined
                    ? "-"
                    : row.ingreso_bruto
                }}
              </td>
              <td mat-footer-cell *matFooterCellDef>
                {{
                  consolidado_proyeccion.total_ingreso_bruto | number: "1.2-4"
                }}
              </td>
            </ng-container>
            <ng-container matColumnDef="ingreso_neto">
              <th mat-header-cell *matHeaderCellDef>Ingreso neto</th>
              <td mat-cell *matCellDef="let row">
                {{
                  row.ingreso_neto == "" || row.ingreso_neto == undefined
                    ? "-"
                    : row.ingreso_neto
                }}
              </td>
              <td mat-footer-cell *matFooterCellDef>
                {{
                  consolidado_proyeccion.total_ingreso_neto | number: "1.2-4"
                }}
              </td>
            </ng-container>
            <ng-container matColumnDef="dividendo_porcentaje">
              <th mat-header-cell *matHeaderCellDef>Dividendo (%)</th>
              <td mat-cell *matCellDef="let row">
                {{
                  row.dividendo_porcentaje == "" ||
                  row.dividendo_porcentaje == undefined
                    ? "-"
                    : row.dividendo_porcentaje
                }}
              </td>
              <td mat-footer-cell *matFooterCellDef>
                {{
                  consolidado_proyeccion.total_dividendo_porcentaje
                    | number: "1.2-4"
                }}
              </td>
            </ng-container>
            <ng-container matColumnDef="rendimiento_porcentaje">
              <th mat-header-cell *matHeaderCellDef>Rendimiento (%)</th>
              <td mat-cell *matCellDef="let row">
                {{
                  row.rendimiento_porcentaje == "" ||
                  row.rendimiento_porcentaje == undefined
                    ? "-"
                    : row.rendimiento_porcentaje
                }}
              </td>
              <td mat-footer-cell *matFooterCellDef>
                {{
                  consolidado_proyeccion.total_rendimiento_porcentaje
                    | number: "1.2-4"
                }}
              </td>
            </ng-container>
            <ng-container matColumnDef="rendimiento">
              <th mat-header-cell *matHeaderCellDef>Rendimiento ($)</th>
              <td mat-cell *matCellDef="let row">
                {{
                  row.rendimiento == "" || row.rendimiento == undefined
                    ? "-"
                    : row.rendimiento
                }}
              </td>
              <td mat-footer-cell *matFooterCellDef>
                {{ consolidado_proyeccion.total_rendimiento | number: "1.2-4" }}
              </td>
            </ng-container>

            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
            <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
          </table>
        </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>
  </form>
</div>

<div *ngIf="summary">
  <div class="timeline-body">
    <div class="row">
      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Cuota participación:</h4>
        <div class="field">
          $USD
          {{ instrument_work_summary.cuota_participacion | number: "1.2-4" }}
        </div>
      </div>

      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Valor participación:</h4>
        <div class="field">
          {{
            instrument_work_summary.valor_participacion_porcentaje
              | number: "1.2-4"
          }}
          %
        </div>
      </div>

      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Días liquidación:</h4>
        <div class="field">
          {{ instrument_work_summary.dias_liquidacion }}
        </div>
      </div>

      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Días vencimiento:</h4>
        <div class="field">
          {{ instrument_work_summary.dias_vencimiento }}
        </div>
      </div>

      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Valor nominal:</h4>
        <div class="field">
          $USD {{ instrument_work_summary.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_summary.valor_transado | number: "1.2-4" }}
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Monto a pagar:</h4>
        <div class="field">
          $USD {{ instrument_work_summary.monto_pagar | number: "1.2-4" }}
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Comisión casa (%):</h4>
        <div class="field">
          {{
            instrument_work_summary.comision_casa_porcentaje | number: "1.2-4"
          }}
          %
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6">
        <div class="field">
          <h4>Comisión casa:</h4>
          $USD {{ instrument_work_summary.comision_casa | 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_summary.comision_bolsa_porcentaje | number: "1.2-4"
          }}
          %
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6">
        <div class="field">
          <h4>Comisión bolsa:</h4>
          $USD {{ instrument_work_summary.comision_bolsa | number: "1.2-4" }}
        </div>
      </div>

      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Rendimiento (%):</h4>
        <div class="field">
          {{ instrument_work_summary.rendimiento_porcentaje | number: "1.2-4" }}
          %
        </div>
      </div>

      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Dividendo (%):</h4>
        <div class="field">
          {{ instrument_work_summary.dividendo_porcentaje | number: "1.2-4" }}
          %
        </div>
      </div>

      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Fecha operación:</h4>
        <div class="field">
          {{ instrument_work_summary.fecha_operacion }}
        </div>
      </div>

      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Fecha liquidación:</h4>
        <div class="field">
          {{ instrument_work_summary.fecha_liquidacion }}
        </div>
      </div>

      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Fecha vencimiento:</h4>
        <div class="field">
          {{ instrument_work_summary.fecha_vencimiento }}
        </div>
      </div>
    </div>

    <div *ngIf="hasProjections" class="instrument-calcs-summary">
      <div class="row">
        <div class="col-12">
          <span class="badge-warning badge-custom-instrument"
            >Proyecciones del instrumento</span
          >
        </div>

        <div class="cete-table-container">
          <table mat-table [dataSource]="dataSource2" class="example-table">
            <!-- Name Column -->
            <ng-container matColumnDef="posicion">
              <th mat-header-cell *matHeaderCellDef>#</th>
              <td mat-cell *matCellDef="let row">
                {{ row.posicion }}
              </td>
              <td mat-footer-cell *matFooterCellDef>TOTAL</td>
            </ng-container>
            <!-- Country Column -->
            <ng-container matColumnDef="plazo">
              <th mat-header-cell *matHeaderCellDef>Plazo</th>
              <td mat-cell *matCellDef="let row">
                {{ row.plazo }}
              </td>
              <td mat-footer-cell *matFooterCellDef></td>
            </ng-container>

            <ng-container matColumnDef="fecha_pago">
              <th mat-header-cell *matHeaderCellDef>Fecha pago</th>
              <td mat-cell *matCellDef="let row">
                {{
                  row.fecha_pago == "" || row.fecha_pago == undefined
                    ? "-"
                    : row.fecha_pago
                }}
              </td>
              <td mat-footer-cell *matFooterCellDef></td>
            </ng-container>
            <ng-container matColumnDef="ingreso_bruto">
              <th mat-header-cell *matHeaderCellDef>Ingreso bruto</th>
              <td mat-cell *matCellDef="let row">
                {{
                  row.ingreso_bruto == "" || row.ingreso_bruto == undefined
                    ? "-"
                    : row.ingreso_bruto
                }}
              </td>
              <td mat-footer-cell *matFooterCellDef>
                {{
                  consolidado_proyeccion.total_ingreso_bruto | number: "1.2-4"
                }}
              </td>
            </ng-container>
            <ng-container matColumnDef="ingreso_neto">
              <th mat-header-cell *matHeaderCellDef>Ingreso neto</th>
              <td mat-cell *matCellDef="let row">
                {{
                  row.ingreso_neto == "" || row.ingreso_neto == undefined
                    ? "-"
                    : row.ingreso_neto
                }}
              </td>
              <td mat-footer-cell *matFooterCellDef>
                {{
                  consolidado_proyeccion.total_ingreso_neto | number: "1.2-4"
                }}
              </td>
            </ng-container>
            <ng-container matColumnDef="dividendo_porcentaje">
              <th mat-header-cell *matHeaderCellDef>Dividendo (%)</th>
              <td mat-cell *matCellDef="let row">
                {{
                  row.dividendo_porcentaje == "" ||
                  row.dividendo_porcentaje == undefined
                    ? "-"
                    : row.dividendo_porcentaje
                }}
              </td>
              <td mat-footer-cell *matFooterCellDef>
                {{
                  consolidado_proyeccion.total_dividendo_porcentaje
                    | number: "1.2-4"
                }}
              </td>
            </ng-container>
            <ng-container matColumnDef="rendimiento_porcentaje">
              <th mat-header-cell *matHeaderCellDef>Rendimiento (%)</th>
              <td mat-cell *matCellDef="let row">
                {{
                  row.rendimiento_porcentaje == "" ||
                  row.rendimiento_porcentaje == undefined
                    ? "-"
                    : row.rendimiento_porcentaje
                }}
              </td>
              <td mat-footer-cell *matFooterCellDef>
                {{
                  consolidado_proyeccion.total_rendimiento_porcentaje
                    | number: "1.2-4"
                }}
              </td>
            </ng-container>
            <ng-container matColumnDef="rendimiento">
              <th mat-header-cell *matHeaderCellDef>Rendimiento ($)</th>
              <td mat-cell *matCellDef="let row">
                {{
                  row.rendimiento == "" || row.rendimiento == undefined
                    ? "-"
                    : row.rendimiento
                }}
              </td>
              <td mat-footer-cell *matFooterCellDef>
                {{ consolidado_proyeccion.total_rendimiento | number: "1.2-4" }}
              </td>
            </ng-container>

            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
            <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>