Merge branch 'development' into feature-totales_proyecciones

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

@@ -0,0 +1,1146 @@
+<div *ngIf="!summary">
+  <h4 class="card-title">
+    Futuros
+  </h4>
+  <form
+    class="form-auth-small ng-untouched ng-pristine ng-valid"
+    [formGroup]="investmentProposalForm"
+  >
+    <div class="row">
+      <div class="col-6">
+        <div class="form-group">
+          <label>Tipo de operación: </label>
+        </div>
+        <select
+          class="custom-select"
+          formControlName="operacion"
+          (change)="toggle_operacion($event.target.value)"
+        >
+          <option
+            *ngFor="let item of operaciones"
+            [value]="item.codigo"
+            [selected]="
+              instrument_exists == false && item.codigo == instrument_work.corto
+            "
+            >{{ item.nombre }}</option
+          >
+        </select>
+      </div>
+      <div class="col-6">
+        <div class="form-group">
+          <label>Tipo de ejecución: </label>
+        </div>
+        <select
+          class="custom-select"
+          formControlName="ejecucion"
+          (change)="toggle_ejecucion($event.target.value)"
+        >
+          <option
+            *ngFor="let item of ejecuciones"
+            [value]="item.codigo"
+            [selected]="
+              instrument_exists == false &&
+              item.codigo == instrument_work.completo
+            "
+          >
+            {{ item.nombre }}</option
+          >
+        </select>
+      </div>
+    </div>
+
+    <div class="row">
+      <!-- Fecha de vencimiento -->
+
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="ticket">Ticket: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-file-alt"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="ticket"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.ticket.errors
+              }"
+            />
+            <div *ngIf="submitted && f.ticket.errors" class="invalid-feedback">
+              <div *ngIf="f.ticket.errors.required">
+                Campo requerido
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <br />
+    <div
+      class="row"
+      *ngIf="tipoOperacion == 0 || (tipoOperacion == 1 && tipoEjecucion == 1)"
+    >
+      <div class="col-sm-12">
+        <h4>Información de compra</h4>
+      </div>
+
+      <!-- Precio unitario compra-->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="precio_unitario_compra">Precio unitario: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="precio_unitario_compra"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.precio_unitario_compra.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.precio_unitario_compra.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.precio_unitario_compra.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.precio_unitario_compra.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Comision broker compra-->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="comision_broker_compra">Comisión broker: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-percent"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="comision_broker_compra"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.comision_broker_compra.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.comision_broker_compra.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.comision_broker_compra.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.comision_broker_compra.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Cantidad contratos compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="cantidad_contratos_compra">Cantidad de contratos: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-list-ol" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="cantidad_contratos_compra"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.cantidad_contratos_compra.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.cantidad_contratos_compra.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.cantidad_contratos_compra.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.cantidad_contratos_compra.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Unidades contratos compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="unidades_contratos_compra">Unidades contratos: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-list-ol" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="unidades_contratos_compra"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.unidades_contratos_compra.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.unidades_contratos_compra.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.unidades_contratos_compra.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.unidades_contratos_compra.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_compra">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_compra"
+                (click)="dp0.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp0="angular-mydatepicker"
+                [ngClass]="{
+                  'is-invalid': submitted && f.fecha_operacion_compra.errors
+                }"
+              />
+            </div>
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_operacion_compra.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_operacion_compra.errors.required">
+              Campo requerido
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Fecha de liquidación -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_liquidacion_compra">Fecha de 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_compra"
+                (click)="dp1.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp1="angular-mydatepicker"
+                [ngClass]="{
+                  'is-invalid': submitted && f.fecha_liquidacion_compra.errors
+                }"
+              />
+            </div>
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_liquidacion_compra.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_liquidacion_compra.errors.required">
+              Campo requerido
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="row" *ngIf="tipoOperacion == 0">
+      <!-- Fecha de vencimiento -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_vencimiento_compra">Fecha de 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_compra"
+                (click)="dp2.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp2="angular-mydatepicker"
+                [ngClass]="{
+                  'is-invalid': submitted && f.fecha_vencimiento_compra.errors
+                }"
+              />
+            </div>
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_vencimiento_compra.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_vencimiento_compra.errors.required">
+              Campo requerido
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <br />
+    <div
+      class="row"
+      *ngIf="tipoOperacion == 1 || (tipoOperacion == 0 && tipoEjecucion == 1)"
+    >
+      <div class="col-sm-12">
+        <h4>Información de venta</h4>
+      </div>
+
+      <!-- Precio unitario compra-->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="precio_unitario_venta">Precio unitario: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="precio_unitario_venta"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.precio_unitario_venta.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.precio_unitario_venta.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.precio_unitario_venta.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.precio_unitario_venta.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Comision broker compra-->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="comision_broker_venta">Comisión broker: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-percent"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="comision_broker_venta"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.comision_broker_venta.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.comision_broker_venta.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.comision_broker_venta.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.comision_broker_venta.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Cantidad contratos compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="cantidad_contratos_venta">Cantidad de contratos: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-list-ol" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="cantidad_contratos_venta"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.cantidad_contratos_venta.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.cantidad_contratos_venta.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.cantidad_contratos_venta.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.cantidad_contratos_venta.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Unidades contratos compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="unidades_contratos_venta">Unidades contratos: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-list-ol" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="unidades_contratos_venta"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.unidades_contratos_venta.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.unidades_contratos_venta.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.unidades_contratos_venta.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.unidades_contratos_venta.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_venta">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_venta"
+                (click)="dp3.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp3="angular-mydatepicker"
+                [ngClass]="{
+                  'is-invalid': submitted && f.fecha_operacion_venta.errors
+                }"
+              />
+            </div>
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_operacion_venta.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_operacion_venta.errors.required">
+              Campo requerido
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Fecha de liquidación -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_liquidacion_venta">Fecha de 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_venta"
+                (click)="dp4.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp4="angular-mydatepicker"
+                [ngClass]="{
+                  'is-invalid': submitted && f.fecha_liquidacion_venta.errors
+                }"
+              />
+            </div>
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_liquidacion_venta.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_liquidacion_venta.errors.required">
+              Campo requerido
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="row" *ngIf="tipoOperacion == 1">
+      <!-- Fecha de vencimiento -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_vencimiento_venta">Fecha de 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_venta"
+                (click)="dp5.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp5="angular-mydatepicker"
+                [ngClass]="{
+                  'is-invalid': submitted && f.fecha_vencimiento_venta.errors
+                }"
+              />
+            </div>
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_vencimiento_venta.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_vencimiento_venta.errors.required">
+              Campo requerido
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="row">
+      <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>
+
+        <!-- COMPRA -->
+        <div class="col-12">
+          <h3>
+            Instrumento de compra
+          </h3>
+        </div>
+
+        <div
+          class="col-sm-4"
+          *ngIf="
+            operation_result == true && tipoEjecucion == 0 && tipoOperacion == 1
+          "
+        >
+          <h4>NO APLICA</h4>
+        </div>
+
+        <div
+          class="row align-container"
+          *ngIf="
+            operation_result == true &&
+            (tipoOperacion == 0 || tipoEjecucion == 1)
+          "
+        >
+          <div class="col-sm-4">
+            <h4>Precio unitario:</h4>
+            <div class="field">
+              $USD {{ precio_unitario_compra | number: "1.2-4" }}
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Comisión broker:</h4>
+            <div class="field">
+              {{ comision_broker_compra | number: "1.2-4" }} %
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Cantidad de contratos:</h4>
+            <div class="field">
+              {{ cantidad_contratos_compra | number: "1.2-4" }}
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Unidades de contratos:</h4>
+            <div class="field">
+              {{ unidades_contratos_compra | number: "1.2-4" }}
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Valor transado:</h4>
+            <div class="field">
+              $USD {{ valor_transado_compra | number: "1.2-4" }}
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Valor pagado:</h4>
+            <div class="field">$USD {{ valor_pagado | number: "1.2-4" }}</div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Ganancia / pérdida:</h4>
+            <div class="field">{{ ganancia_perdida | number: "1.2-4" }} %</div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Rendimiento:</h4>
+            <div class="field">{{ rendimiento | number: "1.2-4" }} %</div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Fecha operación:</h4>
+            <div class="field">
+              {{ fecha_operacion_compra }}
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Fecha liquidación:</h4>
+            <div class="field">
+              {{ fecha_liquidacion_compra }}
+            </div>
+          </div>
+
+          <div
+            class="col-sm-4"
+            *ngIf="
+              operation_result == true &&
+              tipoOperacion == 0 &&
+              tipoEjecucion == 1
+            "
+          >
+            <h4>Operación</h4>
+            <div class="field">
+              {{ corto == 0 ? "Largo" : "Corto" }}
+            </div>
+          </div>
+
+          <div
+            class="col-sm-4"
+            *ngIf="
+              operation_result == true &&
+              tipoOperacion == 0 &&
+              tipoEjecucion == 1
+            "
+          >
+            <h4>Fecha vencimiento:</h4>
+            <div class="field">
+              {{ fecha_vencimiento_compra }}
+            </div>
+          </div>
+
+          <div
+            class="col-sm-4"
+            *ngIf="
+              operation_result == true &&
+              tipoOperacion == 0 &&
+              tipoEjecucion == 1
+            "
+          >
+            <h4>Fecha inicio vigencia:</h4>
+            <div class="field">
+              {{ fecha_inicio_vigencia }}
+            </div>
+          </div>
+        </div>
+
+        <!-- VENTA -->
+        <div class="col-12">
+          <h3>
+            Instrumento de venta
+          </h3>
+        </div>
+
+        <div
+          class="col-sm-4"
+          *ngIf="
+            operation_result == true && tipoEjecucion == 0 && tipoOperacion == 0
+          "
+        >
+          <h4>NO APLICA</h4>
+        </div>
+
+        <div
+          class="row align-container"
+          *ngIf="
+            operation_result == true &&
+            (tipoOperacion == 1 || tipoEjecucion == 1)
+          "
+        >
+          <div class="col-sm-4">
+            <h4>Precio unitario:</h4>
+            <div class="field">
+              $USD {{ precio_unitario_venta | number: "1.2-4" }}
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Comisión broker:</h4>
+            <div class="field">
+              {{ comision_broker_venta | number: "1.2-4" }} %
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Cantidad de contratos:</h4>
+            <div class="field">
+              {{ cantidad_contratos_venta | number: "1.2-4" }}
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Unidades de contratos:</h4>
+            <div class="field">
+              {{ unidades_contratos_venta | number: "1.2-4" }}
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Valor transado:</h4>
+            <div class="field">
+              $USD {{ valor_transado_venta | number: "1.2-4" }}
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Valor recibido:</h4>
+            <div class="field">$USD {{ valor_recibido | number: "1.2-4" }}</div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Fecha operación:</h4>
+            <div class="field">
+              {{ fecha_operacion_venta }}
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Fecha liquidación:</h4>
+            <div class="field">
+              {{ fecha_liquidacion_venta }}
+            </div>
+          </div>
+
+          <div
+            class="col-sm-4"
+            *ngIf="
+              operation_result == true &&
+              tipoOperacion == 0 &&
+              tipoEjecucion == 1
+            "
+          >
+            <h4>Operación</h4>
+            <div class="field">
+              {{ corto == 0 ? "Largo" : "Corto" }}
+            </div>
+          </div>
+
+          <div
+            class="col-sm-4"
+            *ngIf="
+              operation_result == true &&
+              tipoOperacion == 0 &&
+              tipoEjecucion == 1
+            "
+          >
+            <h4>Fecha vencimiento:</h4>
+            <div class="field">
+              {{ fecha_vencimiento_venta }}
+            </div>
+          </div>
+
+          <div
+            class="col-sm-4"
+            *ngIf="
+              operation_result == true &&
+              tipoOperacion == 0 &&
+              tipoEjecucion == 1
+            "
+          >
+            <h4>Fecha inicio vigencia:</h4>
+            <div class="field">
+              {{ fecha_inicio_vigencia }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <br />
+
+    <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">
+      <!-- COMPRA -->
+      <div class="col-12">
+        <h3>
+          Instrumento de compra
+        </h3>
+      </div>
+
+      <div
+        class="col-sm-4"
+        *ngIf="
+          operation_result == true &&
+          instrument_work_summary.completo == 0 &&
+          instrument_work_summary.corto == 1
+        "
+      >
+        <h4>NO APLICA</h4>
+      </div>
+
+      <div
+        class="row align-container"
+        *ngIf="
+          operation_result == true &&
+          (instrument_work_summary.corto == 0 ||
+            instrument_work_summary.completo == 1)
+        "
+      >
+        <div class="col-sm-4">
+          <h4>Precio unitario:</h4>
+          <div class="field">
+            $USD
+            {{
+              instrument_work_summary.precio_unitario_compra | number: "1.2-4"
+            }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Comisión broker:</h4>
+          <div class="field">
+            {{
+              instrument_work_summary.comision_broker_compra | number: "1.2-4"
+            }}
+            %
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Cantidad de contratos:</h4>
+          <div class="field">
+            {{
+              instrument_work_summary.cantidad_contratos_compra
+                | number: "1.2-4"
+            }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Unidades de contratos:</h4>
+          <div class="field">
+            {{
+              instrument_work_summary.unidades_contratos_compra
+                | number: "1.2-4"
+            }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Valor transado:</h4>
+          <div class="field">
+            $USD
+            {{
+              instrument_work_summary.valor_transado_compra | number: "1.2-4"
+            }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Valor pagado:</h4>
+          <div class="field">
+            $USD {{ instrument_work_summary.valor_pagado | number: "1.2-4" }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Ganancia / pérdida:</h4>
+          <div class="field">
+            {{ instrument_work_summary.ganancia_perdida | number: "1.2-4" }} %
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Rendimiento:</h4>
+          <div class="field">
+            {{ instrument_work_summary.rendimiento | number: "1.2-4" }} %
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Fecha operación:</h4>
+          <div class="field">
+            {{ instrument_work_summary.fecha_operacion_compra }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Fecha liquidación:</h4>
+          <div class="field">
+            {{ instrument_work_summary.fecha_liquidacion_compra }}
+          </div>
+        </div>
+
+        <div
+          class="col-sm-4"
+          *ngIf="
+            operation_result == true && tipoOperacion == 0 && tipoEjecucion == 1
+          "
+        >
+          <h4>Operación</h4>
+          <div class="field">
+            {{ instrument_work_summary.corto == 0 ? "Largo" : "Corto" }}
+          </div>
+        </div>
+
+        <div
+          class="col-sm-4"
+          *ngIf="
+            operation_result == true && tipoOperacion == 0 && tipoEjecucion == 1
+          "
+        >
+          <h4>Fecha vencimiento:</h4>
+          <div class="field">
+            {{ instrument_work_summary.fecha_vencimiento_compra }}
+          </div>
+        </div>
+
+        <div
+          class="col-sm-4"
+          *ngIf="
+            operation_result == true && tipoOperacion == 0 && tipoEjecucion == 1
+          "
+        >
+          <h4>Fecha inicio vigencia:</h4>
+          <div class="field">
+            {{ instrument_work_summary.fecha_inicio_vigencia }}
+          </div>
+        </div>
+      </div>
+
+      <!-- VENTA -->
+      <div class="col-12">
+        <h3>
+          Instrumento de venta
+        </h3>
+      </div>
+      <div
+        class="col-sm-4"
+        *ngIf="
+          operation_result == true &&
+          instrument_work_summary.completo == 0 &&
+          instrument_work_summary.corto == 0
+        "
+      >
+        <h4>NO APLICA</h4>
+      </div>
+
+      <div
+        class="row align-container"
+        *ngIf="
+          operation_result == true &&
+          (instrument_work_summary.corto == 1 ||
+            instrument_work_summary.completo == 1)
+        "
+      >
+        <div class="col-sm-4">
+          <h4>Precio unitario:</h4>
+          <div class="field">
+            $USD
+            {{
+              instrument_work_summary.precio_unitario_venta | number: "1.2-4"
+            }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Comisión broker:</h4>
+          <div class="field">
+            {{
+              instrument_work_summary.comision_broker_venta | number: "1.2-4"
+            }}
+            %
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Cantidad de contratos:</h4>
+          <div class="field">
+            {{
+              instrument_work_summary.cantidad_contratos_venta | number: "1.2-4"
+            }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Unidades de contratos:</h4>
+          <div class="field">
+            {{
+              instrument_work_summary.unidades_contratos_venta | number: "1.2-4"
+            }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Valor transado:</h4>
+          <div class="field">
+            $USD
+            {{ instrument_work_summary.valor_transado_venta | number: "1.2-4" }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Valor recibido:</h4>
+          <div class="field">
+            $USD {{ instrument_work_summary.valor_recibido | number: "1.2-4" }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Fecha operación:</h4>
+          <div class="field">
+            {{ instrument_work_summary.fecha_operacion_venta }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Fecha liquidación:</h4>
+          <div class="field">
+            {{ instrument_work_summary.fecha_liquidacion_venta }}
+          </div>
+        </div>
+
+        <div
+          class="col-sm-4"
+          *ngIf="
+            operation_result == true && tipoOperacion == 0 && tipoEjecucion == 1
+          "
+        >
+          <h4>Operación</h4>
+          <div class="field">
+            {{ instrument_work_summary.corto == 0 ? "Largo" : "Corto" }}
+          </div>
+        </div>
+
+        <div
+          class="col-sm-4"
+          *ngIf="
+            operation_result == true && tipoOperacion == 0 && tipoEjecucion == 1
+          "
+        >
+          <h4>Fecha vencimiento:</h4>
+          <div class="field">
+            {{ instrument_work_summary.fecha_vencimiento_venta }}
+          </div>
+        </div>
+
+        <div
+          class="col-sm-4"
+          *ngIf="
+            operation_result == true && tipoOperacion == 0 && tipoEjecucion == 1
+          "
+        >
+          <h4>Fecha inicio vigencia:</h4>
+          <div class="field">
+            {{ instrument_work_summary.fecha_inicio_vigencia }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,700 @@
+import { Component, OnInit, Input, ViewChild } from "@angular/core";
+import { InstrumentComponent } from "@app/components/investment-proposals/instrument/instrument.component";
+import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { IAngularMyDpOptions, IMyDateModel } from "angular-mydatepicker";
+import { formatDate, DatePipe } from "@angular/common";
+import { Router } from "@angular/router";
+import { FormInvestmentProposalService } from "@app/services/form-investment-proposal.service";
+import { CatalogsService } from "@app/services/catalogs.service";
+import { InstrumentCalculations } from "@app/services/instrument-calculations.service";
+import Swal from "sweetalert2";
+import { GeneralInfo } from "@app/models/investment-proposal-form";
+import { parse } from "date-fns";
+import { MatPaginator } from "@angular/material/paginator";
+import { MatSort } from "@angular/material/sort";
+import { MatTableDataSource } from "@angular/material/table";
+
+@Component({
+  selector: "app-futuros",
+  templateUrl: "./futuros.component.html"
+})
+export class FUTU implements InstrumentComponent {
+  title: string = "Futuros";
+  @Input() data: any;
+  @Input() summary: boolean;
+  @Input() investmentID: string;
+
+  form: any;
+  general: GeneralInfo;
+
+  // 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"
+  };
+  investmentProposalForm: FormGroup;
+  myDpOptions: IAngularMyDpOptions = {
+    dateRange: false,
+    dateFormat: "dd/mm/yyyy",
+    dayLabels: this.daysLabels,
+    monthLabels: this.monthsLabels
+  };
+  myDateInit: boolean = true;
+  m_fecha_vencimiento_compra: IMyDateModel;
+  m_fecha_operacion: IMyDateModel;
+  m_fecha_rendencion: IMyDateModel;
+  m_fecha_liquidacion_compra: IMyDateModel;
+
+  submitted: boolean = false;
+  instrument_exists: boolean;
+  instrument_work: any = [];
+  financials: any;
+  base_types: any;
+
+  futurosObject: {};
+  hasProjections: boolean;
+
+  tipoOperacion: any;
+  tipoEjecucion: any;
+
+  fecha_vencimiento: any;
+  operation_result: boolean = false;
+  operation_results_work: any = [];
+  instrument_work_summary: any = [];
+  fecha_operacion_compra: any;
+  fecha_liquidacion_compra: any;
+  precio_unitario_compra: any;
+  comision_broker_compra: any;
+  cantidad_contratos_compra: any;
+  unidades_contratos_compra: any;
+  valor_transado_compra: any;
+  valor_pagado: any;
+  ganancia_perdida: any;
+  rendimiento: any;
+  corto: any;
+  fecha_inicio_vigencia: any;
+  fecha_vencimiento_compra: any;
+  fecha_operacion_venta: any;
+  fecha_liquidacion_venta: any;
+  precio_unitario_venta: any;
+  comision_broker_venta: any;
+  cantidad_contratos_venta: any;
+  unidades_contratos_venta: any;
+  valor_transado_venta: any;
+  valor_recibido: any;
+  fecha_vencimiento_venta: any;
+  valor_nominal: any;
+  valor_transado: any;
+  comision_casa: any;
+  comision_bolsa: any;
+  fecha_liquidacion: any;
+  operacion: any;
+  ejecucion: any;
+  operaciones = [
+    { codigo: 1, nombre: "Corto" },
+    { codigo: 0, nombre: "Largo" }
+  ];
+  ejecuciones = [
+    { codigo: 1, nombre: "Completa" },
+    { codigo: 0, nombre: "Parcial" }
+  ];
+  constructor(
+    private formBuilder: FormBuilder,
+    private router: Router,
+    private formDataService: FormInvestmentProposalService,
+    private catalogService: CatalogsService,
+    private instrumentCalcService: InstrumentCalculations,
+    public datepipe: DatePipe
+  ) {
+    this.instrument_work = this.formDataService.getWork();
+
+    this.instrument_exists = this.instrument_work == undefined;
+    this.general = this.formDataService.getGeneralInfo();
+
+    console.log("init");
+    console.log(this.operaciones);
+    console.log(this.instrument_work);
+
+    this.investmentProposalForm = this.formBuilder.group({
+      operacion: [this.instrument_exists ? "" : this.instrument_work.corto],
+      ejecucion: [this.instrument_exists ? "" : this.instrument_work.completa],
+      ticket: [this.instrument_exists ? "" : this.instrument_work.ticket],
+      precio_unitario_compra: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.precio_unitario_compra
+      ],
+      comision_broker_compra: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.comision_broker_compra
+      ],
+      cantidad_contratos_compra: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.cantidad_contratos_compra
+      ],
+      unidades_contratos_compra: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.unidades_contratos_compra
+      ],
+      fecha_operacion_compra: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_exists
+          ? ""
+          : {
+              isRange: false,
+              singleDate: {
+                jsDate: parse(
+                  this.instrument_work.fecha_operacion_compra,
+                  "dd/MM/yyyy",
+                  new Date()
+                ),
+                formatted: this.instrument_work.fecha_operacion_compra
+              }
+            }
+      ],
+      fecha_liquidacion_compra: [
+        this.instrument_exists
+          ? ""
+          : {
+              isRange: false,
+              singleDate: {
+                jsDate: parse(
+                  this.instrument_work.fecha_liquidacion_compra,
+                  "dd/MM/yyyy",
+                  new Date()
+                ),
+                formatted: this.instrument_work.fecha_liquidacion_compra
+              }
+            }
+      ],
+      fecha_vencimiento_compra: [
+        this.instrument_exists
+          ? ""
+          : {
+              isRange: false,
+              singleDate: {
+                jsDate: parse(
+                  this.instrument_work.fecha_vencimiento_compra,
+                  "dd/MM/yyyy",
+                  new Date()
+                ),
+                formatted: this.instrument_work.fecha_vencimiento_compra
+              }
+            }
+      ],
+      precio_unitario_venta: [
+        this.instrument_exists ? "" : this.instrument_work.precio_unitario_venta
+      ],
+      comision_broker_venta: [
+        this.instrument_exists ? "" : this.instrument_work.comision_broker_venta
+      ],
+      cantidad_contratos_venta: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.cantidad_contratos_venta
+      ],
+      unidades_contratos_venta: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.unidades_contratos_venta
+      ],
+      fecha_operacion_venta: [
+        this.instrument_exists
+          ? ""
+          : {
+              isRange: false,
+              singleDate: {
+                jsDate: parse(
+                  this.instrument_work.fecha_operacion_venta,
+                  "dd/MM/yyyy",
+                  new Date()
+                ),
+                formatted: this.instrument_work.fecha_operacion_venta
+              }
+            }
+      ],
+      fecha_liquidacion_venta: [
+        this.instrument_exists
+          ? ""
+          : {
+              isRange: false,
+              singleDate: {
+                jsDate: parse(
+                  this.instrument_work.fecha_liquidacion_venta,
+                  "dd/MM/yyyy",
+                  new Date()
+                ),
+                formatted: this.instrument_work.fecha_liquidacion_venta
+              }
+            }
+      ],
+      fecha_vencimiento_venta: [
+        this.instrument_exists
+          ? ""
+          : {
+              isRange: false,
+              singleDate: {
+                jsDate: parse(
+                  this.instrument_work.fecha_vencimiento_venta,
+                  "dd/MM/yyyy",
+                  new Date()
+                ),
+                formatted: this.instrument_work.fecha_vencimiento_venta
+              }
+            }
+      ]
+    });
+
+    if (this.instrument_work != undefined) {
+      this.instrument_work_summary = this.instrument_work;
+      this.operation_result = true;
+
+      console.log("datos");
+      console.log(this.instrument_work_summary);
+
+      this.operacion = this.instrument_work_summary.corto;
+      this.ejecucion = this.instrument_work_summary.completo;
+
+      this.toggle_operacion(this.operacion);
+      this.toggle_ejecucion(this.ejecucion);
+    }
+  }
+
+  toggle_operacion(input: any) {
+    this.tipoOperacion = +input;
+    this.setValidators();
+  }
+
+  toggle_ejecucion(input: any) {
+    this.tipoEjecucion = +input;
+    this.setValidators();
+  }
+
+  setValidators() {
+    console.log("tipo de operacion");
+    console.log(this.tipoOperacion);
+    console.log("tipo de ejecucion");
+    console.log(this.tipoEjecucion);
+
+    const precio_unitario_compra = this.investmentProposalForm.get(
+      "precio_unitario_compra"
+    );
+    const comision_broker_compra = this.investmentProposalForm.get(
+      "comision_broker_compra"
+    );
+    const cantidad_contratos_compra = this.investmentProposalForm.get(
+      "cantidad_contratos_compra"
+    );
+    const unidades_contratos_compra = this.investmentProposalForm.get(
+      "unidades_contratos_compra"
+    );
+    const fecha_operacion_compra = this.investmentProposalForm.get(
+      "fecha_operacion_compra"
+    );
+    const fecha_liquidacion_compra = this.investmentProposalForm.get(
+      "fecha_liquidacion_compra"
+    );
+    const fecha_vencimiento_compra = this.investmentProposalForm.get(
+      "fecha_vencimiento_compra"
+    );
+    const precio_unitario_venta = this.investmentProposalForm.get(
+      "precio_unitario_venta"
+    );
+    const comision_broker_venta = this.investmentProposalForm.get(
+      "comision_broker_venta"
+    );
+    const cantidad_contratos_venta = this.investmentProposalForm.get(
+      "cantidad_contratos_venta"
+    );
+    const unidades_contratos_venta = this.investmentProposalForm.get(
+      "unidades_contratos_venta"
+    );
+    const fecha_operacion_venta = this.investmentProposalForm.get(
+      "fecha_operacion_venta"
+    );
+    const fecha_liquidacion_venta = this.investmentProposalForm.get(
+      "fecha_liquidacion_venta"
+    );
+    const fecha_vencimiento_venta = this.investmentProposalForm.get(
+      "fecha_vencimiento_venta"
+    );
+
+    if (this.tipoEjecucion == 1) {
+      precio_unitario_compra.setValidators([
+        Validators.required,
+        Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+      ]);
+      comision_broker_compra.setValidators([
+        Validators.required,
+        Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+      ]);
+      cantidad_contratos_compra.setValidators([
+        Validators.required,
+        Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+      ]);
+      unidades_contratos_compra.setValidators([
+        Validators.required,
+        Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+      ]);
+      fecha_operacion_compra.setValidators([Validators.required]);
+      fecha_liquidacion_compra.setValidators([Validators.required]);
+      if (this.tipoOperacion == 0) {
+        fecha_vencimiento_compra.setValidators([Validators.required]);
+        fecha_vencimiento_venta.setValidators(null);
+      }
+      precio_unitario_venta.setValidators([
+        Validators.required,
+        Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+      ]);
+      comision_broker_venta.setValidators([
+        Validators.required,
+        Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+      ]);
+      cantidad_contratos_venta.setValidators([
+        Validators.required,
+        Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+      ]);
+      unidades_contratos_venta.setValidators([
+        Validators.required,
+        Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+      ]);
+      fecha_operacion_venta.setValidators([Validators.required]);
+      fecha_liquidacion_venta.setValidators([Validators.required]);
+
+      if (this.tipoOperacion == 1) {
+        fecha_vencimiento_venta.setValidators([Validators.required]);
+
+        fecha_vencimiento_compra.setValidators(null);
+      }
+    } else {
+      if (this.tipoOperacion == 1) {
+        precio_unitario_venta.setValidators([
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]);
+        comision_broker_venta.setValidators([
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]);
+        cantidad_contratos_venta.setValidators([
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]);
+        unidades_contratos_venta.setValidators([
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]);
+        fecha_operacion_venta.setValidators([Validators.required]);
+        fecha_liquidacion_venta.setValidators([Validators.required]);
+        fecha_vencimiento_venta.setValidators(null); //.setValidators([Validators.required]);
+        precio_unitario_compra.setValidators(null);
+        comision_broker_compra.setValidators(null);
+        cantidad_contratos_compra.setValidators(null);
+        unidades_contratos_compra.setValidators(null);
+        fecha_operacion_compra.setValidators(null);
+        fecha_liquidacion_compra.setValidators(null);
+        fecha_vencimiento_compra.setValidators(null);
+      }
+      if (this.tipoOperacion == 0) {
+        precio_unitario_compra.setValidators([
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]);
+        comision_broker_compra.setValidators([
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]);
+        cantidad_contratos_compra.setValidators([
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]);
+        unidades_contratos_compra.setValidators([
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]);
+        fecha_operacion_compra.setValidators([Validators.required]);
+        fecha_liquidacion_compra.setValidators([Validators.required]);
+        fecha_vencimiento_compra.setValidators(null); //.setValidators([Validators.required]);
+        precio_unitario_venta.setValidators(null);
+        comision_broker_venta.setValidators(null);
+        cantidad_contratos_venta.setValidators(null);
+        unidades_contratos_venta.setValidators(null);
+        fecha_operacion_venta.setValidators(null);
+        fecha_liquidacion_venta.setValidators(null);
+        fecha_vencimiento_venta.setValidators(null);
+      }
+    }
+
+    precio_unitario_compra.updateValueAndValidity();
+    comision_broker_compra.updateValueAndValidity();
+    cantidad_contratos_compra.updateValueAndValidity();
+    unidades_contratos_compra.updateValueAndValidity();
+    fecha_operacion_compra.updateValueAndValidity();
+    fecha_liquidacion_compra.updateValueAndValidity();
+    fecha_vencimiento_compra.updateValueAndValidity();
+    precio_unitario_venta.updateValueAndValidity();
+    comision_broker_venta.updateValueAndValidity();
+    cantidad_contratos_venta.updateValueAndValidity();
+    unidades_contratos_venta.updateValueAndValidity();
+    fecha_operacion_venta.updateValueAndValidity();
+    fecha_liquidacion_venta.updateValueAndValidity();
+    fecha_vencimiento_venta.updateValueAndValidity();
+  }
+
+  save(form: any): boolean {
+    if (!form.valid) {
+      return false;
+    }
+
+    this.formDataService.setWork(this.futurosObject);
+    return true;
+  }
+
+  get f() {
+    return this.investmentProposalForm.controls;
+  }
+
+  getCalculations(form: any, saveForm: boolean) {
+    this.submitted = true;
+    console.log(this.investmentProposalForm);
+    if (!form.valid) {
+      return false;
+    }
+
+    Swal.fire({
+      allowOutsideClick: false,
+      icon: "info",
+      text: "Espere por favor..."
+    });
+    Swal.showLoading();
+
+    this.instrumentCalcService
+      .opcionesFuturosCalc(
+        "OPC", // Codigo del instrumento
+        {
+          id_tipo_base: +this.general.base_anual,
+          id_formato_ingreso: +this.general.formato_ingreso,
+          id_periodicidad: +this.general.periodicidad
+        },
+        {
+          completo: this.tipoEjecucion,
+          corto: this.tipoOperacion,
+          precio_unitario_compra: this.f.precio_unitario_compra.value,
+          comision_broker_compra: this.f.comision_broker_compra.value,
+          cantidad_contratos_compra: this.f.cantidad_contratos_compra.value,
+          unidades_contratos_compra: this.f.unidades_contratos_compra.value,
+          fecha_operacion_compra:
+            this.f.fecha_operacion_compra.value == ""
+              ? ""
+              : this.f.fecha_operacion_compra.value.singleDate.formatted,
+          fecha_liquidacion_compra:
+            this.f.fecha_liquidacion_compra.value == ""
+              ? ""
+              : this.f.fecha_liquidacion_compra.value.singleDate.formatted,
+          fecha_vencimiento_compra:
+            this.f.fecha_vencimiento_compra.value == ""
+              ? ""
+              : this.f.fecha_vencimiento_compra.value.singleDate.formatted,
+          precio_unitario_venta: this.f.precio_unitario_venta.value,
+          comision_broker_venta: this.f.comision_broker_venta.value,
+          cantidad_contratos_venta: this.f.cantidad_contratos_venta.value,
+          unidades_contratos_venta: this.f.unidades_contratos_venta.value,
+          fecha_operacion_venta:
+            this.f.fecha_operacion_venta.value == ""
+              ? ""
+              : this.f.fecha_operacion_venta.value.singleDate.formatted,
+          fecha_liquidacion_venta:
+            this.f.fecha_liquidacion_venta.value == ""
+              ? ""
+              : this.f.fecha_liquidacion_venta.value.singleDate.formatted,
+          fecha_vencimiento_venta:
+            this.f.fecha_vencimiento_venta.value == ""
+              ? ""
+              : this.f.fecha_vencimiento_venta.value.singleDate.formatted
+        }
+      )
+      .subscribe(
+        ans => {
+          // Instrumento compra
+          this.fecha_operacion_compra =
+            ans["result"]["instrumento_compra"]["fecha_operacion_compra"];
+          this.fecha_liquidacion_compra =
+            ans["result"]["instrumento_compra"]["fecha_liquidacion_compra"];
+          this.precio_unitario_compra =
+            ans["result"]["instrumento_compra"]["precio_unitario_compra"];
+          this.comision_broker_compra =
+            ans["result"]["instrumento_compra"]["comision_broker_compra"];
+          this.cantidad_contratos_compra =
+            ans["result"]["instrumento_compra"]["cantidad_contratos_compra"];
+          this.unidades_contratos_compra =
+            ans["result"]["instrumento_compra"]["unidades_contratos_compra"];
+          this.valor_transado_compra =
+            ans["result"]["instrumento_compra"]["valor_transado_compra"];
+          this.valor_pagado =
+            ans["result"]["instrumento_compra"]["valor_pagado"];
+          this.ganancia_perdida =
+            ans["result"]["instrumento_compra"]["ganancia_perdida"];
+          this.rendimiento = ans["result"]["instrumento_compra"]["rendimiento"];
+
+          // Si es operacion largo y ejecucion completa
+
+          if (this.tipoOperacion == 0) {
+            this.corto = ans["result"]["instrumento_compra"]["corto"];
+            this.fecha_inicio_vigencia =
+              ans["result"]["instrumento_compra"]["fecha_inicio_vigencia"];
+
+            this.fecha_vencimiento_compra =
+              ans["result"]["instrumento_compra"]["fecha_vencimiento_compra"];
+          }
+
+          // Instrumento venta
+          this.fecha_operacion_venta =
+            ans["result"]["instrumento_venta"]["fecha_operacion_venta"];
+          this.fecha_liquidacion_venta =
+            ans["result"]["instrumento_venta"]["fecha_liquidacion_venta"];
+          this.precio_unitario_venta =
+            ans["result"]["instrumento_venta"]["precio_unitario_venta"];
+          this.comision_broker_venta =
+            ans["result"]["instrumento_venta"]["comision_broker_venta"];
+          this.cantidad_contratos_venta =
+            ans["result"]["instrumento_venta"]["cantidad_contratos_venta"];
+          this.unidades_contratos_venta =
+            ans["result"]["instrumento_venta"]["unidades_contratos_venta"];
+          this.valor_transado_venta =
+            ans["result"]["instrumento_venta"]["valor_transado_venta"];
+          this.valor_recibido =
+            ans["result"]["instrumento_venta"]["valor_recibido "];
+
+          // Si es operacion corto
+          if (this.tipoOperacion == 1) {
+            this.corto = ans["result"]["instrumento_venta"]["corto"];
+            this.fecha_inicio_vigencia =
+              ans["result"]["instrumento_venta"]["fecha_inicio_vigencia"];
+            this.fecha_vencimiento_venta =
+              ans["result"]["instrumento_venta"]["fecha_vencimiento_venta"];
+          }
+
+          this.operation_result = true;
+
+          this.futurosObject = {
+            completo: this.tipoEjecucion,
+            corto: this.tipoOperacion,
+            ticket: this.investmentProposalForm.value.ticket,
+            precio_unitario_compra: this.investmentProposalForm.value
+              .precio_unitario_compra,
+            comision_broker_compra: this.investmentProposalForm.value
+              .comision_broker_compra,
+            cantidad_contratos_compra: this.investmentProposalForm.value
+              .cantidad_contratos_compra,
+            unidades_contratos_compra: this.investmentProposalForm.value
+              .unidades_contratos_compra,
+            fecha_operacion_compra:
+              this.investmentProposalForm.value.fecha_operacion_compra == ""
+                ? ""
+                : this.investmentProposalForm.value.fecha_operacion_compra
+                    .singleDate.formatted,
+            fecha_liquidacion_compra:
+              this.investmentProposalForm.value.fecha_liquidacion_compra == ""
+                ? ""
+                : this.investmentProposalForm.value.fecha_liquidacion_compra
+                    .singleDate.formatted,
+
+            precio_unitario_venta: this.investmentProposalForm.value
+              .precio_unitario_venta,
+            comision_broker_venta: this.investmentProposalForm.value
+              .comision_broker_venta,
+            cantidad_contratos_venta: this.investmentProposalForm.value
+              .cantidad_contratos_venta,
+            unidades_contratos_venta: this.investmentProposalForm.value
+              .unidades_contratos_venta,
+            fecha_operacion_venta:
+              this.investmentProposalForm.value.fecha_operacion_venta == ""
+                ? ""
+                : this.investmentProposalForm.value.fecha_operacion_venta
+                    .singleDate.formatted,
+            fecha_liquidacion_venta:
+              this.investmentProposalForm.value.fecha_liquidacion_venta == ""
+                ? ""
+                : this.investmentProposalForm.value.fecha_liquidacion_venta
+                    .singleDate.formatted,
+
+            valor_transado_compra: this.valor_transado_compra,
+            valor_pagado: this.valor_pagado,
+            ganancia_perdida: this.ganancia_perdida,
+            rendimiento: this.rendimiento,
+            valor_transado_venta: this.valor_transado_venta,
+            valor_recibido: this.valor_recibido,
+            fecha_inicio_vigencia: this.fecha_inicio_vigencia
+          };
+          if (this.tipoOperacion == 0) {
+            this.futurosObject[
+              "fecha_vencimiento_compra"
+            ] = this.fecha_vencimiento_compra;
+          }
+          if (this.tipoOperacion == 1) {
+            this.futurosObject[
+              "fecha_vencimiento_venta"
+            ] = this.fecha_vencimiento_venta;
+          }
+
+          this.formDataService.setWork(this.futurosObject);
+          Swal.close();
+          if (saveForm == true) {
+            if (this.investmentID != undefined) {
+              this.router.navigate(["/investment-proposal/complement-info"], {
+                queryParams: { id: this.investmentID }
+              });
+            } else {
+              this.router.navigate(["/investment-proposal/complement-info"]);
+            }
+          }
+        },
+        err => {
+          Swal.fire({
+            icon: "error",
+            title: "Error en el servidor",
+            text: "No su pudo obtener la informacion"
+          });
+          return false;
+        }
+      );
+  }
+
+  goToPrevious() {
+    this.submitted = true;
+    if (this.investmentID != undefined) {
+      this.router.navigate(["/investment-proposal/general-info"], {
+        queryParams: { id: this.investmentID }
+      });
+    } else {
+      this.router.navigate(["/investment-proposal/general-info"]);
+    }
+  }
+
+  goToNext(form: any) {
+    this.getCalculations(form, true);
+  }
+}

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

@@ -0,0 +1,1146 @@
+<div *ngIf="!summary">
+  <h4 class="card-title">
+    Opciones
+  </h4>
+  <form
+    class="form-auth-small ng-untouched ng-pristine ng-valid"
+    [formGroup]="investmentProposalForm"
+  >
+    <div class="row">
+      <div class="col-6">
+        <div class="form-group">
+          <label>Tipo de operación: </label>
+        </div>
+        <select
+          class="custom-select"
+          formControlName="operacion"
+          (change)="toggle_operacion($event.target.value)"
+        >
+          <option
+            *ngFor="let item of operaciones"
+            [value]="item.codigo"
+            [selected]="
+              instrument_exists == false && item.codigo == instrument_work.corto
+            "
+            >{{ item.nombre }}</option
+          >
+        </select>
+      </div>
+      <div class="col-6">
+        <div class="form-group">
+          <label>Tipo de ejecución: </label>
+        </div>
+        <select
+          class="custom-select"
+          formControlName="ejecucion"
+          (change)="toggle_ejecucion($event.target.value)"
+        >
+          <option
+            *ngFor="let item of ejecuciones"
+            [value]="item.codigo"
+            [selected]="
+              instrument_exists == false &&
+              item.codigo == instrument_work.completo
+            "
+          >
+            {{ item.nombre }}</option
+          >
+        </select>
+      </div>
+    </div>
+
+    <div class="row">
+      <!-- Fecha de vencimiento -->
+
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="ticket">Ticket: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-file-alt"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="ticket"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.ticket.errors
+              }"
+            />
+            <div *ngIf="submitted && f.ticket.errors" class="invalid-feedback">
+              <div *ngIf="f.ticket.errors.required">
+                Campo requerido
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <br />
+    <div
+      class="row"
+      *ngIf="tipoOperacion == 0 || (tipoOperacion == 1 && tipoEjecucion == 1)"
+    >
+      <div class="col-sm-12">
+        <h4>Información de compra</h4>
+      </div>
+
+      <!-- Precio unitario compra-->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="precio_unitario_compra">Precio unitario: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="precio_unitario_compra"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.precio_unitario_compra.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.precio_unitario_compra.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.precio_unitario_compra.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.precio_unitario_compra.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Comision broker compra-->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="comision_broker_compra">Comisión broker: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-percent"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="comision_broker_compra"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.comision_broker_compra.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.comision_broker_compra.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.comision_broker_compra.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.comision_broker_compra.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Cantidad contratos compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="cantidad_contratos_compra">Cantidad de contratos: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-list-ol" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="cantidad_contratos_compra"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.cantidad_contratos_compra.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.cantidad_contratos_compra.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.cantidad_contratos_compra.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.cantidad_contratos_compra.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Unidades contratos compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="unidades_contratos_compra">Unidades contratos: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-list-ol" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="unidades_contratos_compra"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.unidades_contratos_compra.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.unidades_contratos_compra.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.unidades_contratos_compra.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.unidades_contratos_compra.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_compra">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_compra"
+                (click)="dp0.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp0="angular-mydatepicker"
+                [ngClass]="{
+                  'is-invalid': submitted && f.fecha_operacion_compra.errors
+                }"
+              />
+            </div>
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_operacion_compra.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_operacion_compra.errors.required">
+              Campo requerido
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Fecha de liquidación -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_liquidacion_compra">Fecha de 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_compra"
+                (click)="dp1.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp1="angular-mydatepicker"
+                [ngClass]="{
+                  'is-invalid': submitted && f.fecha_liquidacion_compra.errors
+                }"
+              />
+            </div>
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_liquidacion_compra.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_liquidacion_compra.errors.required">
+              Campo requerido
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="row" *ngIf="tipoOperacion == 0">
+      <!-- Fecha de vencimiento -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_vencimiento_compra">Fecha de 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_compra"
+                (click)="dp2.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp2="angular-mydatepicker"
+                [ngClass]="{
+                  'is-invalid': submitted && f.fecha_vencimiento_compra.errors
+                }"
+              />
+            </div>
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_vencimiento_compra.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_vencimiento_compra.errors.required">
+              Campo requerido
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <br />
+    <div
+      class="row"
+      *ngIf="tipoOperacion == 1 || (tipoOperacion == 0 && tipoEjecucion == 1)"
+    >
+      <div class="col-sm-12">
+        <h4>Información de venta</h4>
+      </div>
+
+      <!-- Precio unitario compra-->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="precio_unitario_venta">Precio unitario: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="precio_unitario_venta"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.precio_unitario_venta.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.precio_unitario_venta.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.precio_unitario_venta.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.precio_unitario_venta.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Comision broker compra-->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="comision_broker_venta">Comisión broker: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-percent"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="comision_broker_venta"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.comision_broker_venta.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.comision_broker_venta.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.comision_broker_venta.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.comision_broker_venta.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Cantidad contratos compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="cantidad_contratos_venta">Cantidad de contratos: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-list-ol" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="cantidad_contratos_venta"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.cantidad_contratos_venta.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.cantidad_contratos_venta.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.cantidad_contratos_venta.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.cantidad_contratos_venta.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Unidades contratos compra -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="unidades_contratos_venta">Unidades contratos: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-list-ol" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="unidades_contratos_venta"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.unidades_contratos_venta.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.unidades_contratos_venta.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.unidades_contratos_venta.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.unidades_contratos_venta.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_venta">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_venta"
+                (click)="dp3.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp3="angular-mydatepicker"
+                [ngClass]="{
+                  'is-invalid': submitted && f.fecha_operacion_venta.errors
+                }"
+              />
+            </div>
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_operacion_venta.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_operacion_venta.errors.required">
+              Campo requerido
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Fecha de liquidación -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_liquidacion_venta">Fecha de 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_venta"
+                (click)="dp4.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp4="angular-mydatepicker"
+                [ngClass]="{
+                  'is-invalid': submitted && f.fecha_liquidacion_venta.errors
+                }"
+              />
+            </div>
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_liquidacion_venta.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_liquidacion_venta.errors.required">
+              Campo requerido
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="row" *ngIf="tipoOperacion == 1">
+      <!-- Fecha de vencimiento -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_vencimiento_venta">Fecha de 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_venta"
+                (click)="dp5.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp5="angular-mydatepicker"
+                [ngClass]="{
+                  'is-invalid': submitted && f.fecha_vencimiento_venta.errors
+                }"
+              />
+            </div>
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_vencimiento_venta.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_vencimiento_venta.errors.required">
+              Campo requerido
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="row">
+      <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>
+
+        <!-- COMPRA -->
+        <div class="col-12">
+          <h3>
+            Instrumento de compra
+          </h3>
+        </div>
+
+        <div
+          class="col-sm-4"
+          *ngIf="
+            operation_result == true && tipoEjecucion == 0 && tipoOperacion == 1
+          "
+        >
+          <h4>NO APLICA</h4>
+        </div>
+
+        <div
+          class="row align-container"
+          *ngIf="
+            operation_result == true &&
+            (tipoOperacion == 0 || tipoEjecucion == 1)
+          "
+        >
+          <div class="col-sm-4">
+            <h4>Precio unitario:</h4>
+            <div class="field">
+              $USD {{ precio_unitario_compra | number: "1.2-4" }}
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Comisión broker:</h4>
+            <div class="field">
+              {{ comision_broker_compra | number: "1.2-4" }} %
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Cantidad de contratos:</h4>
+            <div class="field">
+              {{ cantidad_contratos_compra | number: "1.2-4" }}
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Unidades de contratos:</h4>
+            <div class="field">
+              {{ unidades_contratos_compra | number: "1.2-4" }}
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Valor transado:</h4>
+            <div class="field">
+              $USD {{ valor_transado_compra | number: "1.2-4" }}
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Valor pagado:</h4>
+            <div class="field">$USD {{ valor_pagado | number: "1.2-4" }}</div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Ganancia / pérdida:</h4>
+            <div class="field">{{ ganancia_perdida | number: "1.2-4" }} %</div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Rendimiento:</h4>
+            <div class="field">{{ rendimiento | number: "1.2-4" }} %</div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Fecha operación:</h4>
+            <div class="field">
+              {{ fecha_operacion_compra }}
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Fecha liquidación:</h4>
+            <div class="field">
+              {{ fecha_liquidacion_compra }}
+            </div>
+          </div>
+
+          <div
+            class="col-sm-4"
+            *ngIf="
+              operation_result == true &&
+              tipoOperacion == 0 &&
+              tipoEjecucion == 1
+            "
+          >
+            <h4>Operación</h4>
+            <div class="field">
+              {{ corto == 0 ? "Largo" : "Corto" }}
+            </div>
+          </div>
+
+          <div
+            class="col-sm-4"
+            *ngIf="
+              operation_result == true &&
+              tipoOperacion == 0 &&
+              tipoEjecucion == 1
+            "
+          >
+            <h4>Fecha vencimiento:</h4>
+            <div class="field">
+              {{ fecha_vencimiento_compra }}
+            </div>
+          </div>
+
+          <div
+            class="col-sm-4"
+            *ngIf="
+              operation_result == true &&
+              tipoOperacion == 0 &&
+              tipoEjecucion == 1
+            "
+          >
+            <h4>Fecha inicio vigencia:</h4>
+            <div class="field">
+              {{ fecha_inicio_vigencia }}
+            </div>
+          </div>
+        </div>
+
+        <!-- VENTA -->
+        <div class="col-12">
+          <h3>
+            Instrumento de venta
+          </h3>
+        </div>
+
+        <div
+          class="col-sm-4"
+          *ngIf="
+            operation_result == true && tipoEjecucion == 0 && tipoOperacion == 0
+          "
+        >
+          <h4>NO APLICA</h4>
+        </div>
+
+        <div
+          class="row align-container"
+          *ngIf="
+            operation_result == true &&
+            (tipoOperacion == 1 || tipoEjecucion == 1)
+          "
+        >
+          <div class="col-sm-4">
+            <h4>Precio unitario:</h4>
+            <div class="field">
+              $USD {{ precio_unitario_venta | number: "1.2-4" }}
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Comisión broker:</h4>
+            <div class="field">
+              {{ comision_broker_venta | number: "1.2-4" }} %
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Cantidad de contratos:</h4>
+            <div class="field">
+              {{ cantidad_contratos_venta | number: "1.2-4" }}
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Unidades de contratos:</h4>
+            <div class="field">
+              {{ unidades_contratos_venta | number: "1.2-4" }}
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Valor transado:</h4>
+            <div class="field">
+              $USD {{ valor_transado_venta | number: "1.2-4" }}
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Valor recibido:</h4>
+            <div class="field">$USD {{ valor_recibido | number: "1.2-4" }}</div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Fecha operación:</h4>
+            <div class="field">
+              {{ fecha_operacion_venta }}
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Fecha liquidación:</h4>
+            <div class="field">
+              {{ fecha_liquidacion_venta }}
+            </div>
+          </div>
+
+          <div
+            class="col-sm-4"
+            *ngIf="
+              operation_result == true &&
+              tipoOperacion == 0 &&
+              tipoEjecucion == 1
+            "
+          >
+            <h4>Operación</h4>
+            <div class="field">
+              {{ corto == 0 ? "Largo" : "Corto" }}
+            </div>
+          </div>
+
+          <div
+            class="col-sm-4"
+            *ngIf="
+              operation_result == true &&
+              tipoOperacion == 0 &&
+              tipoEjecucion == 1
+            "
+          >
+            <h4>Fecha vencimiento:</h4>
+            <div class="field">
+              {{ fecha_vencimiento_venta }}
+            </div>
+          </div>
+
+          <div
+            class="col-sm-4"
+            *ngIf="
+              operation_result == true &&
+              tipoOperacion == 0 &&
+              tipoEjecucion == 1
+            "
+          >
+            <h4>Fecha inicio vigencia:</h4>
+            <div class="field">
+              {{ fecha_inicio_vigencia }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <br />
+
+    <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">
+      <!-- COMPRA -->
+      <div class="col-12">
+        <h3>
+          Instrumento de compra
+        </h3>
+      </div>
+
+      <div
+        class="col-sm-4"
+        *ngIf="
+          operation_result == true &&
+          instrument_work_summary.completo == 0 &&
+          instrument_work_summary.corto == 1
+        "
+      >
+        <h4>NO APLICA</h4>
+      </div>
+
+      <div
+        class="row align-container"
+        *ngIf="
+          operation_result == true &&
+          (instrument_work_summary.corto == 0 ||
+            instrument_work_summary.completo == 1)
+        "
+      >
+        <div class="col-sm-4">
+          <h4>Precio unitario:</h4>
+          <div class="field">
+            $USD
+            {{
+              instrument_work_summary.precio_unitario_compra | number: "1.2-4"
+            }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Comisión broker:</h4>
+          <div class="field">
+            {{
+              instrument_work_summary.comision_broker_compra | number: "1.2-4"
+            }}
+            %
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Cantidad de contratos:</h4>
+          <div class="field">
+            {{
+              instrument_work_summary.cantidad_contratos_compra
+                | number: "1.2-4"
+            }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Unidades de contratos:</h4>
+          <div class="field">
+            {{
+              instrument_work_summary.unidades_contratos_compra
+                | number: "1.2-4"
+            }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Valor transado:</h4>
+          <div class="field">
+            $USD
+            {{
+              instrument_work_summary.valor_transado_compra | number: "1.2-4"
+            }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Valor pagado:</h4>
+          <div class="field">
+            $USD {{ instrument_work_summary.valor_pagado | number: "1.2-4" }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Ganancia / pérdida:</h4>
+          <div class="field">
+            {{ instrument_work_summary.ganancia_perdida | number: "1.2-4" }} %
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Rendimiento:</h4>
+          <div class="field">
+            {{ instrument_work_summary.rendimiento | number: "1.2-4" }} %
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Fecha operación:</h4>
+          <div class="field">
+            {{ instrument_work_summary.fecha_operacion_compra }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Fecha liquidación:</h4>
+          <div class="field">
+            {{ instrument_work_summary.fecha_liquidacion_compra }}
+          </div>
+        </div>
+
+        <div
+          class="col-sm-4"
+          *ngIf="
+            operation_result == true && tipoOperacion == 0 && tipoEjecucion == 1
+          "
+        >
+          <h4>Operación</h4>
+          <div class="field">
+            {{ instrument_work_summary.corto == 0 ? "Largo" : "Corto" }}
+          </div>
+        </div>
+
+        <div
+          class="col-sm-4"
+          *ngIf="
+            operation_result == true && tipoOperacion == 0 && tipoEjecucion == 1
+          "
+        >
+          <h4>Fecha vencimiento:</h4>
+          <div class="field">
+            {{ instrument_work_summary.fecha_vencimiento_compra }}
+          </div>
+        </div>
+
+        <div
+          class="col-sm-4"
+          *ngIf="
+            operation_result == true && tipoOperacion == 0 && tipoEjecucion == 1
+          "
+        >
+          <h4>Fecha inicio vigencia:</h4>
+          <div class="field">
+            {{ instrument_work_summary.fecha_inicio_vigencia }}
+          </div>
+        </div>
+      </div>
+
+      <!-- VENTA -->
+      <div class="col-12">
+        <h3>
+          Instrumento de venta
+        </h3>
+      </div>
+      <div
+        class="col-sm-4"
+        *ngIf="
+          operation_result == true &&
+          instrument_work_summary.completo == 0 &&
+          instrument_work_summary.corto == 0
+        "
+      >
+        <h4>NO APLICA</h4>
+      </div>
+
+      <div
+        class="row align-container"
+        *ngIf="
+          operation_result == true &&
+          (instrument_work_summary.corto == 1 ||
+            instrument_work_summary.completo == 1)
+        "
+      >
+        <div class="col-sm-4">
+          <h4>Precio unitario:</h4>
+          <div class="field">
+            $USD
+            {{
+              instrument_work_summary.precio_unitario_venta | number: "1.2-4"
+            }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Comisión broker:</h4>
+          <div class="field">
+            {{
+              instrument_work_summary.comision_broker_venta | number: "1.2-4"
+            }}
+            %
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Cantidad de contratos:</h4>
+          <div class="field">
+            {{
+              instrument_work_summary.cantidad_contratos_venta | number: "1.2-4"
+            }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Unidades de contratos:</h4>
+          <div class="field">
+            {{
+              instrument_work_summary.unidades_contratos_venta | number: "1.2-4"
+            }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Valor transado:</h4>
+          <div class="field">
+            $USD
+            {{ instrument_work_summary.valor_transado_venta | number: "1.2-4" }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Valor recibido:</h4>
+          <div class="field">
+            $USD {{ instrument_work_summary.valor_recibido | number: "1.2-4" }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Fecha operación:</h4>
+          <div class="field">
+            {{ instrument_work_summary.fecha_operacion_venta }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Fecha liquidación:</h4>
+          <div class="field">
+            {{ instrument_work_summary.fecha_liquidacion_venta }}
+          </div>
+        </div>
+
+        <div
+          class="col-sm-4"
+          *ngIf="
+            operation_result == true && tipoOperacion == 0 && tipoEjecucion == 1
+          "
+        >
+          <h4>Operación</h4>
+          <div class="field">
+            {{ instrument_work_summary.corto == 0 ? "Largo" : "Corto" }}
+          </div>
+        </div>
+
+        <div
+          class="col-sm-4"
+          *ngIf="
+            operation_result == true && tipoOperacion == 0 && tipoEjecucion == 1
+          "
+        >
+          <h4>Fecha vencimiento:</h4>
+          <div class="field">
+            {{ instrument_work_summary.fecha_vencimiento_venta }}
+          </div>
+        </div>
+
+        <div
+          class="col-sm-4"
+          *ngIf="
+            operation_result == true && tipoOperacion == 0 && tipoEjecucion == 1
+          "
+        >
+          <h4>Fecha inicio vigencia:</h4>
+          <div class="field">
+            {{ instrument_work_summary.fecha_inicio_vigencia }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,700 @@
+import { Component, OnInit, Input, ViewChild } from "@angular/core";
+import { InstrumentComponent } from "@app/components/investment-proposals/instrument/instrument.component";
+import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { IAngularMyDpOptions, IMyDateModel } from "angular-mydatepicker";
+import { formatDate, DatePipe } from "@angular/common";
+import { Router } from "@angular/router";
+import { FormInvestmentProposalService } from "@app/services/form-investment-proposal.service";
+import { CatalogsService } from "@app/services/catalogs.service";
+import { InstrumentCalculations } from "@app/services/instrument-calculations.service";
+import Swal from "sweetalert2";
+import { GeneralInfo } from "@app/models/investment-proposal-form";
+import { parse } from "date-fns";
+import { MatPaginator } from "@angular/material/paginator";
+import { MatSort } from "@angular/material/sort";
+import { MatTableDataSource } from "@angular/material/table";
+
+@Component({
+  selector: "app-opciones",
+  templateUrl: "./opciones.component.html"
+})
+export class OPC implements InstrumentComponent {
+  title: string = "Opciones";
+  @Input() data: any;
+  @Input() summary: boolean;
+  @Input() investmentID: string;
+
+  form: any;
+  general: GeneralInfo;
+
+  // 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"
+  };
+  investmentProposalForm: FormGroup;
+  myDpOptions: IAngularMyDpOptions = {
+    dateRange: false,
+    dateFormat: "dd/mm/yyyy",
+    dayLabels: this.daysLabels,
+    monthLabels: this.monthsLabels
+  };
+  myDateInit: boolean = true;
+  m_fecha_vencimiento_compra: IMyDateModel;
+  m_fecha_operacion: IMyDateModel;
+  m_fecha_rendencion: IMyDateModel;
+  m_fecha_liquidacion_compra: IMyDateModel;
+
+  submitted: boolean = false;
+  instrument_exists: boolean;
+  instrument_work: any = [];
+  financials: any;
+  base_types: any;
+
+  opcionesObject: {};
+  hasProjections: boolean;
+
+  tipoOperacion: any;
+  tipoEjecucion: any;
+
+  fecha_vencimiento: any;
+  operation_result: boolean = false;
+  operation_results_work: any = [];
+  instrument_work_summary: any = [];
+  fecha_operacion_compra: any;
+  fecha_liquidacion_compra: any;
+  precio_unitario_compra: any;
+  comision_broker_compra: any;
+  cantidad_contratos_compra: any;
+  unidades_contratos_compra: any;
+  valor_transado_compra: any;
+  valor_pagado: any;
+  ganancia_perdida: any;
+  rendimiento: any;
+  corto: any;
+  fecha_inicio_vigencia: any;
+  fecha_vencimiento_compra: any;
+  fecha_operacion_venta: any;
+  fecha_liquidacion_venta: any;
+  precio_unitario_venta: any;
+  comision_broker_venta: any;
+  cantidad_contratos_venta: any;
+  unidades_contratos_venta: any;
+  valor_transado_venta: any;
+  valor_recibido: any;
+  fecha_vencimiento_venta: any;
+  valor_nominal: any;
+  valor_transado: any;
+  comision_casa: any;
+  comision_bolsa: any;
+  fecha_liquidacion: any;
+  operacion: any;
+  ejecucion: any;
+  operaciones = [
+    { codigo: 1, nombre: "Corto" },
+    { codigo: 0, nombre: "Largo" }
+  ];
+  ejecuciones = [
+    { codigo: 1, nombre: "Completa" },
+    { codigo: 0, nombre: "Parcial" }
+  ];
+  constructor(
+    private formBuilder: FormBuilder,
+    private router: Router,
+    private formDataService: FormInvestmentProposalService,
+    private catalogService: CatalogsService,
+    private instrumentCalcService: InstrumentCalculations,
+    public datepipe: DatePipe
+  ) {
+    this.instrument_work = this.formDataService.getWork();
+
+    this.instrument_exists = this.instrument_work == undefined;
+    this.general = this.formDataService.getGeneralInfo();
+
+    console.log("init");
+    console.log(this.operaciones);
+    console.log(this.instrument_work);
+
+    this.investmentProposalForm = this.formBuilder.group({
+      operacion: [this.instrument_exists ? "" : this.instrument_work.corto],
+      ejecucion: [this.instrument_exists ? "" : this.instrument_work.completa],
+      ticket: [this.instrument_exists ? "" : this.instrument_work.ticket],
+      precio_unitario_compra: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.precio_unitario_compra
+      ],
+      comision_broker_compra: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.comision_broker_compra
+      ],
+      cantidad_contratos_compra: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.cantidad_contratos_compra
+      ],
+      unidades_contratos_compra: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.unidades_contratos_compra
+      ],
+      fecha_operacion_compra: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_exists
+          ? ""
+          : {
+              isRange: false,
+              singleDate: {
+                jsDate: parse(
+                  this.instrument_work.fecha_operacion_compra,
+                  "dd/MM/yyyy",
+                  new Date()
+                ),
+                formatted: this.instrument_work.fecha_operacion_compra
+              }
+            }
+      ],
+      fecha_liquidacion_compra: [
+        this.instrument_exists
+          ? ""
+          : {
+              isRange: false,
+              singleDate: {
+                jsDate: parse(
+                  this.instrument_work.fecha_liquidacion_compra,
+                  "dd/MM/yyyy",
+                  new Date()
+                ),
+                formatted: this.instrument_work.fecha_liquidacion_compra
+              }
+            }
+      ],
+      fecha_vencimiento_compra: [
+        this.instrument_exists
+          ? ""
+          : {
+              isRange: false,
+              singleDate: {
+                jsDate: parse(
+                  this.instrument_work.fecha_vencimiento_compra,
+                  "dd/MM/yyyy",
+                  new Date()
+                ),
+                formatted: this.instrument_work.fecha_vencimiento_compra
+              }
+            }
+      ],
+      precio_unitario_venta: [
+        this.instrument_exists ? "" : this.instrument_work.precio_unitario_venta
+      ],
+      comision_broker_venta: [
+        this.instrument_exists ? "" : this.instrument_work.comision_broker_venta
+      ],
+      cantidad_contratos_venta: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.cantidad_contratos_venta
+      ],
+      unidades_contratos_venta: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.unidades_contratos_venta
+      ],
+      fecha_operacion_venta: [
+        this.instrument_exists
+          ? ""
+          : {
+              isRange: false,
+              singleDate: {
+                jsDate: parse(
+                  this.instrument_work.fecha_operacion_venta,
+                  "dd/MM/yyyy",
+                  new Date()
+                ),
+                formatted: this.instrument_work.fecha_operacion_venta
+              }
+            }
+      ],
+      fecha_liquidacion_venta: [
+        this.instrument_exists
+          ? ""
+          : {
+              isRange: false,
+              singleDate: {
+                jsDate: parse(
+                  this.instrument_work.fecha_liquidacion_venta,
+                  "dd/MM/yyyy",
+                  new Date()
+                ),
+                formatted: this.instrument_work.fecha_liquidacion_venta
+              }
+            }
+      ],
+      fecha_vencimiento_venta: [
+        this.instrument_exists
+          ? ""
+          : {
+              isRange: false,
+              singleDate: {
+                jsDate: parse(
+                  this.instrument_work.fecha_vencimiento_venta,
+                  "dd/MM/yyyy",
+                  new Date()
+                ),
+                formatted: this.instrument_work.fecha_vencimiento_venta
+              }
+            }
+      ]
+    });
+
+    if (this.instrument_work != undefined) {
+      this.instrument_work_summary = this.instrument_work;
+      this.operation_result = true;
+
+      console.log("datos");
+      console.log(this.instrument_work_summary);
+
+      this.operacion = this.instrument_work_summary.corto;
+      this.ejecucion = this.instrument_work_summary.completo;
+
+      this.toggle_operacion(this.operacion);
+      this.toggle_ejecucion(this.ejecucion);
+    }
+  }
+
+  toggle_operacion(input: any) {
+    this.tipoOperacion = +input;
+    this.setValidators();
+  }
+
+  toggle_ejecucion(input: any) {
+    this.tipoEjecucion = +input;
+    this.setValidators();
+  }
+
+  setValidators() {
+    console.log("tipo de operacion");
+    console.log(this.tipoOperacion);
+    console.log("tipo de ejecucion");
+    console.log(this.tipoEjecucion);
+
+    const precio_unitario_compra = this.investmentProposalForm.get(
+      "precio_unitario_compra"
+    );
+    const comision_broker_compra = this.investmentProposalForm.get(
+      "comision_broker_compra"
+    );
+    const cantidad_contratos_compra = this.investmentProposalForm.get(
+      "cantidad_contratos_compra"
+    );
+    const unidades_contratos_compra = this.investmentProposalForm.get(
+      "unidades_contratos_compra"
+    );
+    const fecha_operacion_compra = this.investmentProposalForm.get(
+      "fecha_operacion_compra"
+    );
+    const fecha_liquidacion_compra = this.investmentProposalForm.get(
+      "fecha_liquidacion_compra"
+    );
+    const fecha_vencimiento_compra = this.investmentProposalForm.get(
+      "fecha_vencimiento_compra"
+    );
+    const precio_unitario_venta = this.investmentProposalForm.get(
+      "precio_unitario_venta"
+    );
+    const comision_broker_venta = this.investmentProposalForm.get(
+      "comision_broker_venta"
+    );
+    const cantidad_contratos_venta = this.investmentProposalForm.get(
+      "cantidad_contratos_venta"
+    );
+    const unidades_contratos_venta = this.investmentProposalForm.get(
+      "unidades_contratos_venta"
+    );
+    const fecha_operacion_venta = this.investmentProposalForm.get(
+      "fecha_operacion_venta"
+    );
+    const fecha_liquidacion_venta = this.investmentProposalForm.get(
+      "fecha_liquidacion_venta"
+    );
+    const fecha_vencimiento_venta = this.investmentProposalForm.get(
+      "fecha_vencimiento_venta"
+    );
+
+    if (this.tipoEjecucion == 1) {
+      precio_unitario_compra.setValidators([
+        Validators.required,
+        Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+      ]);
+      comision_broker_compra.setValidators([
+        Validators.required,
+        Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+      ]);
+      cantidad_contratos_compra.setValidators([
+        Validators.required,
+        Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+      ]);
+      unidades_contratos_compra.setValidators([
+        Validators.required,
+        Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+      ]);
+      fecha_operacion_compra.setValidators([Validators.required]);
+      fecha_liquidacion_compra.setValidators([Validators.required]);
+      if (this.tipoOperacion == 0) {
+        fecha_vencimiento_compra.setValidators([Validators.required]);
+        fecha_vencimiento_venta.setValidators(null);
+      }
+      precio_unitario_venta.setValidators([
+        Validators.required,
+        Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+      ]);
+      comision_broker_venta.setValidators([
+        Validators.required,
+        Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+      ]);
+      cantidad_contratos_venta.setValidators([
+        Validators.required,
+        Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+      ]);
+      unidades_contratos_venta.setValidators([
+        Validators.required,
+        Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+      ]);
+      fecha_operacion_venta.setValidators([Validators.required]);
+      fecha_liquidacion_venta.setValidators([Validators.required]);
+
+      if (this.tipoOperacion == 1) {
+        fecha_vencimiento_venta.setValidators([Validators.required]);
+
+        fecha_vencimiento_compra.setValidators(null);
+      }
+    } else {
+      if (this.tipoOperacion == 1) {
+        precio_unitario_venta.setValidators([
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]);
+        comision_broker_venta.setValidators([
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]);
+        cantidad_contratos_venta.setValidators([
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]);
+        unidades_contratos_venta.setValidators([
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]);
+        fecha_operacion_venta.setValidators([Validators.required]);
+        fecha_liquidacion_venta.setValidators([Validators.required]);
+        fecha_vencimiento_venta.setValidators(null); //.setValidators([Validators.required]);
+        precio_unitario_compra.setValidators(null);
+        comision_broker_compra.setValidators(null);
+        cantidad_contratos_compra.setValidators(null);
+        unidades_contratos_compra.setValidators(null);
+        fecha_operacion_compra.setValidators(null);
+        fecha_liquidacion_compra.setValidators(null);
+        fecha_vencimiento_compra.setValidators(null);
+      }
+      if (this.tipoOperacion == 0) {
+        precio_unitario_compra.setValidators([
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]);
+        comision_broker_compra.setValidators([
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]);
+        cantidad_contratos_compra.setValidators([
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]);
+        unidades_contratos_compra.setValidators([
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]);
+        fecha_operacion_compra.setValidators([Validators.required]);
+        fecha_liquidacion_compra.setValidators([Validators.required]);
+        fecha_vencimiento_compra.setValidators(null); //.setValidators([Validators.required]);
+        precio_unitario_venta.setValidators(null);
+        comision_broker_venta.setValidators(null);
+        cantidad_contratos_venta.setValidators(null);
+        unidades_contratos_venta.setValidators(null);
+        fecha_operacion_venta.setValidators(null);
+        fecha_liquidacion_venta.setValidators(null);
+        fecha_vencimiento_venta.setValidators(null);
+      }
+    }
+
+    precio_unitario_compra.updateValueAndValidity();
+    comision_broker_compra.updateValueAndValidity();
+    cantidad_contratos_compra.updateValueAndValidity();
+    unidades_contratos_compra.updateValueAndValidity();
+    fecha_operacion_compra.updateValueAndValidity();
+    fecha_liquidacion_compra.updateValueAndValidity();
+    fecha_vencimiento_compra.updateValueAndValidity();
+    precio_unitario_venta.updateValueAndValidity();
+    comision_broker_venta.updateValueAndValidity();
+    cantidad_contratos_venta.updateValueAndValidity();
+    unidades_contratos_venta.updateValueAndValidity();
+    fecha_operacion_venta.updateValueAndValidity();
+    fecha_liquidacion_venta.updateValueAndValidity();
+    fecha_vencimiento_venta.updateValueAndValidity();
+  }
+
+  save(form: any): boolean {
+    if (!form.valid) {
+      return false;
+    }
+
+    this.formDataService.setWork(this.opcionesObject);
+    return true;
+  }
+
+  get f() {
+    return this.investmentProposalForm.controls;
+  }
+
+  getCalculations(form: any, saveForm: boolean) {
+    this.submitted = true;
+    console.log(this.investmentProposalForm);
+    if (!form.valid) {
+      return false;
+    }
+
+    Swal.fire({
+      allowOutsideClick: false,
+      icon: "info",
+      text: "Espere por favor..."
+    });
+    Swal.showLoading();
+
+    this.instrumentCalcService
+      .opcionesFuturosCalc(
+        "OPC", // Codigo del instrumento
+        {
+          id_tipo_base: +this.general.base_anual,
+          id_formato_ingreso: +this.general.formato_ingreso,
+          id_periodicidad: +this.general.periodicidad
+        },
+        {
+          completo: this.tipoEjecucion,
+          corto: this.tipoOperacion,
+          precio_unitario_compra: this.f.precio_unitario_compra.value,
+          comision_broker_compra: this.f.comision_broker_compra.value,
+          cantidad_contratos_compra: this.f.cantidad_contratos_compra.value,
+          unidades_contratos_compra: this.f.unidades_contratos_compra.value,
+          fecha_operacion_compra:
+            this.f.fecha_operacion_compra.value == ""
+              ? ""
+              : this.f.fecha_operacion_compra.value.singleDate.formatted,
+          fecha_liquidacion_compra:
+            this.f.fecha_liquidacion_compra.value == ""
+              ? ""
+              : this.f.fecha_liquidacion_compra.value.singleDate.formatted,
+          fecha_vencimiento_compra:
+            this.f.fecha_vencimiento_compra.value == ""
+              ? ""
+              : this.f.fecha_vencimiento_compra.value.singleDate.formatted,
+          precio_unitario_venta: this.f.precio_unitario_venta.value,
+          comision_broker_venta: this.f.comision_broker_venta.value,
+          cantidad_contratos_venta: this.f.cantidad_contratos_venta.value,
+          unidades_contratos_venta: this.f.unidades_contratos_venta.value,
+          fecha_operacion_venta:
+            this.f.fecha_operacion_venta.value == ""
+              ? ""
+              : this.f.fecha_operacion_venta.value.singleDate.formatted,
+          fecha_liquidacion_venta:
+            this.f.fecha_liquidacion_venta.value == ""
+              ? ""
+              : this.f.fecha_liquidacion_venta.value.singleDate.formatted,
+          fecha_vencimiento_venta:
+            this.f.fecha_vencimiento_venta.value == ""
+              ? ""
+              : this.f.fecha_vencimiento_venta.value.singleDate.formatted
+        }
+      )
+      .subscribe(
+        ans => {
+          // Instrumento compra
+          this.fecha_operacion_compra =
+            ans["result"]["instrumento_compra"]["fecha_operacion_compra"];
+          this.fecha_liquidacion_compra =
+            ans["result"]["instrumento_compra"]["fecha_liquidacion_compra"];
+          this.precio_unitario_compra =
+            ans["result"]["instrumento_compra"]["precio_unitario_compra"];
+          this.comision_broker_compra =
+            ans["result"]["instrumento_compra"]["comision_broker_compra"];
+          this.cantidad_contratos_compra =
+            ans["result"]["instrumento_compra"]["cantidad_contratos_compra"];
+          this.unidades_contratos_compra =
+            ans["result"]["instrumento_compra"]["unidades_contratos_compra"];
+          this.valor_transado_compra =
+            ans["result"]["instrumento_compra"]["valor_transado_compra"];
+          this.valor_pagado =
+            ans["result"]["instrumento_compra"]["valor_pagado"];
+          this.ganancia_perdida =
+            ans["result"]["instrumento_compra"]["ganancia_perdida"];
+          this.rendimiento = ans["result"]["instrumento_compra"]["rendimiento"];
+
+          // Si es operacion largo y ejecucion completa
+
+          if (this.tipoOperacion == 0) {
+            this.corto = ans["result"]["instrumento_compra"]["corto"];
+            this.fecha_inicio_vigencia =
+              ans["result"]["instrumento_compra"]["fecha_inicio_vigencia"];
+
+            this.fecha_vencimiento_compra =
+              ans["result"]["instrumento_compra"]["fecha_vencimiento_compra"];
+          }
+
+          // Instrumento venta
+          this.fecha_operacion_venta =
+            ans["result"]["instrumento_venta"]["fecha_operacion_venta"];
+          this.fecha_liquidacion_venta =
+            ans["result"]["instrumento_venta"]["fecha_liquidacion_venta"];
+          this.precio_unitario_venta =
+            ans["result"]["instrumento_venta"]["precio_unitario_venta"];
+          this.comision_broker_venta =
+            ans["result"]["instrumento_venta"]["comision_broker_venta"];
+          this.cantidad_contratos_venta =
+            ans["result"]["instrumento_venta"]["cantidad_contratos_venta"];
+          this.unidades_contratos_venta =
+            ans["result"]["instrumento_venta"]["unidades_contratos_venta"];
+          this.valor_transado_venta =
+            ans["result"]["instrumento_venta"]["valor_transado_venta"];
+          this.valor_recibido =
+            ans["result"]["instrumento_venta"]["valor_recibido "];
+
+          // Si es operacion corto
+          if (this.tipoOperacion == 1) {
+            this.corto = ans["result"]["instrumento_venta"]["corto"];
+            this.fecha_inicio_vigencia =
+              ans["result"]["instrumento_venta"]["fecha_inicio_vigencia"];
+            this.fecha_vencimiento_venta =
+              ans["result"]["instrumento_venta"]["fecha_vencimiento_venta"];
+          }
+
+          this.operation_result = true;
+
+          this.opcionesObject = {
+            completo: this.tipoEjecucion,
+            corto: this.tipoOperacion,
+            ticket: this.investmentProposalForm.value.ticket,
+            precio_unitario_compra: this.investmentProposalForm.value
+              .precio_unitario_compra,
+            comision_broker_compra: this.investmentProposalForm.value
+              .comision_broker_compra,
+            cantidad_contratos_compra: this.investmentProposalForm.value
+              .cantidad_contratos_compra,
+            unidades_contratos_compra: this.investmentProposalForm.value
+              .unidades_contratos_compra,
+            fecha_operacion_compra:
+              this.investmentProposalForm.value.fecha_operacion_compra == ""
+                ? ""
+                : this.investmentProposalForm.value.fecha_operacion_compra
+                    .singleDate.formatted,
+            fecha_liquidacion_compra:
+              this.investmentProposalForm.value.fecha_liquidacion_compra == ""
+                ? ""
+                : this.investmentProposalForm.value.fecha_liquidacion_compra
+                    .singleDate.formatted,
+
+            precio_unitario_venta: this.investmentProposalForm.value
+              .precio_unitario_venta,
+            comision_broker_venta: this.investmentProposalForm.value
+              .comision_broker_venta,
+            cantidad_contratos_venta: this.investmentProposalForm.value
+              .cantidad_contratos_venta,
+            unidades_contratos_venta: this.investmentProposalForm.value
+              .unidades_contratos_venta,
+            fecha_operacion_venta:
+              this.investmentProposalForm.value.fecha_operacion_venta == ""
+                ? ""
+                : this.investmentProposalForm.value.fecha_operacion_venta
+                    .singleDate.formatted,
+            fecha_liquidacion_venta:
+              this.investmentProposalForm.value.fecha_liquidacion_venta == ""
+                ? ""
+                : this.investmentProposalForm.value.fecha_liquidacion_venta
+                    .singleDate.formatted,
+
+            valor_transado_compra: this.valor_transado_compra,
+            valor_pagado: this.valor_pagado,
+            ganancia_perdida: this.ganancia_perdida,
+            rendimiento: this.rendimiento,
+            valor_transado_venta: this.valor_transado_venta,
+            valor_recibido: this.valor_recibido,
+            fecha_inicio_vigencia: this.fecha_inicio_vigencia
+          };
+          if (this.tipoOperacion == 0) {
+            this.opcionesObject[
+              "fecha_vencimiento_compra"
+            ] = this.fecha_vencimiento_compra;
+          }
+          if (this.tipoOperacion == 1) {
+            this.opcionesObject[
+              "fecha_vencimiento_venta"
+            ] = this.fecha_vencimiento_venta;
+          }
+
+          this.formDataService.setWork(this.opcionesObject);
+          Swal.close();
+          if (saveForm == true) {
+            if (this.investmentID != undefined) {
+              this.router.navigate(["/investment-proposal/complement-info"], {
+                queryParams: { id: this.investmentID }
+              });
+            } else {
+              this.router.navigate(["/investment-proposal/complement-info"]);
+            }
+          }
+        },
+        err => {
+          Swal.fire({
+            icon: "error",
+            title: "Error en el servidor",
+            text: "No su pudo obtener la informacion"
+          });
+          return false;
+        }
+      );
+  }
+
+  goToPrevious() {
+    this.submitted = true;
+    if (this.investmentID != undefined) {
+      this.router.navigate(["/investment-proposal/general-info"], {
+        queryParams: { id: this.investmentID }
+      });
+    } else {
+      this.router.navigate(["/investment-proposal/general-info"]);
+    }
+  }
+
+  goToNext(form: any) {
+    this.getCalculations(form, true);
+  }
+}

src/app/components/investment-proposals/proposal-detail/proposal-detail.component.html

@@ -228,7 +228,28 @@
                       </div>
                     </div>
                   </li>
-
+                  <li class="timeline-inverted" *ngIf="liquidation_file">
+                    <div class="timeline-badge"></div>
+                    <div class="timeline-panel">
+                      <div class="timeline-heading">
+                        <span class="badge badge-info"
+                          >Hoja de liquidación</span
+                        >
+                      </div>
+                      <div class="timeline-body">
+                        <div class="col-lg-3 col-md-4 col-sm-6">
+                          <h4>Archivo de hoja de liquidación:</h4>
+                          <div class="field">
+                            <a
+                              [href]="fileDownload + liquidation_file"
+                              target="_blank"
+                              >Descargar archivo</a
+                            >
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </li>
                   <li class="timeline-inverted">
                     <div class="timeline-badge"></div>
                     <div class="timeline-panel">

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

@@ -74,6 +74,8 @@ import { MatPaginatorIntlSpa } from "@app/models/i18n-paginator";
 import { FINV } from "@app/components/instruments/fondos/fondos.component";
 import { UploadLiquidationComponent } from "@app/components/investment-proposals/upload-liquidation/upload-liquidation.component";
 import { SelectModule } from "ng-select";
+import { OPC } from "@app/components/instruments/opciones/opciones.component";
+import { FUTU } from "@app/components/instruments/futuros/futuros.component";
 
 // This array defines which "componentId" maps to which lazy-loaded module.
 
@@ -140,6 +142,8 @@ import { SelectModule } from "ng-select";
     EURB,
     CINV,
     FINV,
+    OPC,
+    FUTU,
     InstrumentDirective,
     PaymentInfoComponent,
     PaymentRequirementComponent,
@@ -152,6 +156,19 @@ import { SelectModule } from "ng-select";
     PaymentApprovalComponent,
     UploadLiquidationComponent
   ],
-  entryComponents: [LETE, CETE, VCN, PBUR, BONO, DAP, TIT, EURB, CINV, FINV]
+  entryComponents: [
+    LETE,
+    CETE,
+    VCN,
+    PBUR,
+    BONO,
+    DAP,
+    TIT,
+    EURB,
+    CINV,
+    FINV,
+    OPC,
+    FUTU
+  ]
 })
 export class AdminModule {}

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

@@ -302,6 +302,29 @@ export class InstrumentCalculations {
       );
   }
 
+  opcionesFuturosCalc(
+    codigo_instrumento: string,
+    info_inversion: {
+      id_tipo_base: number;
+      id_periodicidad: number;
+      id_formato_ingreso: number;
+    },
+    info_instrumento: any
+  ): Observable<boolean> {
+    return this.http
+      .post<any>(`${environment.productionApiUrl}/autocomplete`, {
+        codigo_instrumento,
+        info_inversion,
+        info_instrumento
+      })
+      .pipe(
+        map(response => {
+          return response;
+        }),
+        catchError(this.errorHandl)
+      );
+  }
+
   projectionCalc(id: string, proyecciones: any): Observable<boolean> {
     return this.http
       .put<any>(`${environment.productionApiUrl}/autocomplete/${id}`, {

src/app/services/instruments.service.ts

@@ -12,6 +12,8 @@ import { CINV } from "@app/components/instruments/certificados/certificados.comp
 import { EURB } from "@app/components/instruments/eurobonos/eurobonos.component";
 import { TIT } from "@app/components/instruments/titulos/titulos.component";
 import { FINV } from "@app/components/instruments/fondos/fondos.component";
+import { OPC } from "@app/components/instruments/opciones/opciones.component";
+import { FUTU } from "@app/components/instruments/futuros/futuros.component";
 
 @Injectable({
   providedIn: "root"
@@ -36,7 +38,9 @@ export class InstrumentsService {
         key: "DAP",
         name: "Depósitos a plazo"
       }),
-      new Instrument(FINV, { key: "FINV", name: "Fondo de inversión" })
+      new Instrument(FINV, { key: "FINV", name: "Fondo de inversión" }),
+      new Instrument(OPC, { key: "OPC", name: "Opciones" }),
+      new Instrument(FUTU, { key: "FINV", name: "Futuros" })
     ];
   }
 }