formularios base instrumentos: ANC, APN,bonos,cete,depositos,vcn

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "frontend-inversiones",
-  "version": "0.0.0",
+  "version": "1.0.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

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

@@ -1 +1,177 @@
-ACCIONES NACIONALES
+<h4 class="card-title">
+  ACCIONES NACIONALES
+</h4>
+<form
+  class="form-auth-small ng-untouched ng-pristine ng-valid"
+  [formGroup]="investmentProposalForm"
+>
+  <div class="row">
+    <div class="col-lg-6 col-sm-12 pr-xl-5">
+      <div class="form-group">
+        <label for="precio_limpio">Precio Limpio: </label>
+        <input
+          type="text"
+          formControlName="precio_limpio"
+          class="form-control"
+          [ngClass]="{
+            'is-invalid': submitted && f.precio_limpio.errors
+          }"
+        />
+        <div
+          *ngIf="submitted && f.precio_limpio.errors"
+          class="invalid-feedback"
+        >
+          <div *ngIf="f.precio_limpio.errors.required">
+            Campo requerido
+          </div>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label for="unidades">Unidades: </label>
+        <input
+          type="text"
+          formControlName="unidades"
+          class="form-control"
+          [ngClass]="{
+            'is-invalid': submitted && f.unidades.errors
+          }"
+        />
+        <div *ngIf="submitted && f.unidades.errors" class="invalid-feedback">
+          <div *ngIf="f.unidades.errors.required">
+            Campo requerido
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="col-lg-6 col-sm-12 pr-xl-5">
+      <div class="form-group">
+        <label for="comision_casa">Comisión Casa: </label>
+        <input
+          type="text"
+          formControlName="comision_casa"
+          class="form-control"
+          [ngClass]="{
+            'is-invalid': submitted && f.comision_casa.errors
+          }"
+        />
+        <div
+          *ngIf="submitted && f.comision_casa.errors"
+          class="invalid-feedback"
+        >
+          <div *ngIf="f.comision_casa.errors.required">
+            Campo requerido
+          </div>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label for="comision_bolsa">Comisión Bolsa: </label>
+        <input
+          type="text"
+          formControlName="comision_bolsa"
+          class="form-control"
+          [ngClass]="{
+            'is-invalid': submitted && f.comision_bolsa.errors
+          }"
+        />
+        <div
+          *ngIf="submitted && f.comision_bolsa.errors"
+          class="invalid-feedback"
+        >
+          <div *ngIf="f.comision_bolsa.errors.required">
+            Campo requerido
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <br />
+  <div class="row">
+    <div class="col-lg-6 col-sm-12 pr-xl-5">
+      <div class="form-group">
+        <label for="fecha_operacion">Fecha Operación: </label>
+        <div class="input-box-container">
+          <p>
+            <i class="far fa-calendar" aria-hidden="true"></i>
+          </p>
+          <input
+            class="input-box form-control"
+            placeholder="Seleccione una fecha"
+            angular-mydatepicker
+            name="fecha_operacion"
+            (click)="dp.toggleCalendar()"
+            [options]="myDpOptions"
+            (dateChanged)="onDateChanged($event)"
+            #dp="angular-mydatepicker"
+            [ngClass]="{
+              'is-invalid': submitted && f.fecha_operacion.errors
+            }"
+          />
+        </div>
+
+        <div
+          *ngIf="submitted && f.fecha_operacion.errors"
+          class="invalid-feedback"
+        >
+          <div *ngIf="f.fecha_liquidacion.errors.required">
+            Campo requerido
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="col-lg-6 col-sm-12 pr-xl-5">
+      <div class="form-group">
+        <label for="fecha_vencimiento">Fecha Vencimiento: </label>
+
+        <div class="input-box-container">
+          <div>
+            <p>
+              <i class="far fa-calendar" aria-hidden="true"></i>
+            </p>
+            <input
+              class="input-box form-control"
+              placeholder="Seleccione una fecha"
+              angular-mydatepicker
+              name="fecha_vencimiento"
+              (click)="dp1.toggleCalendar()"
+              [options]="myDpOptions"
+              (dateChanged)="onDateChanged($event)"
+              #dp1="angular-mydatepicker"
+              [ngClass]="{
+                'is-invalid': submitted && f.fecha_vencimiento.errors
+              }"
+            />
+          </div>
+        </div>
+
+        <div
+          *ngIf="submitted && f.fecha_vencimiento.errors"
+          class="invalid-feedback"
+        >
+          <div *ngIf="f.fecha_vencimiento.errors.required">
+            Campo requerido
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!---->
+
+  <!---->
+
+  <br />
+  <div class="form-group text-center space-20">
+    <button
+      class="btn btn-primary center-component margin-right"
+      (click)="goToNext(personalForm)"
+    >
+      Siguiente
+    </button>
+  </div>
+
+  <!-- [disabled]="!investmentProposalForm.valid"
+                        <div *ngIf="error" class="alert alert-danger mt-3 mb-0">{{error}}</div>-->
+</form>

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

@@ -51,13 +51,12 @@ export class ANCComponent implements InstrumentComponent {
     console.log("init");
 
     this.investmentProposalForm = this.formBuilder.group({
-      valor_nominal: ["", Validators.required],
-      plazo_dias: ["", Validators.required],
-      casa: ["", Validators.required],
-      base_dias: ["", Validators.required],
+      precio_limpio: ["", Validators.required],
+      unidades: ["", Validators.required],
+      comision_casa: ["", Validators.required],
+      comision_bolsa: ["", Validators.required],
       fecha_operacion: ["", Validators.required],
-      fecha_liquidacion: ["", Validators.required],
-      fecha_rendencion: ["", Validators.required]
+      fecha_vencimiento: ["", Validators.required]
     });
   }
 }

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

@@ -1 +1,177 @@
-ACCIONES PREFERENTES NACIONALES
+<h4 class="card-title">
+  ACCIONES PREFERENTES NACIONALES
+</h4>
+<form
+  class="form-auth-small ng-untouched ng-pristine ng-valid"
+  [formGroup]="investmentProposalForm"
+>
+  <div class="row">
+    <div class="col-lg-6 col-sm-12 pr-xl-5">
+      <div class="form-group">
+        <label for="precio_limpio">Precio Limpio: </label>
+        <input
+          type="text"
+          formControlName="precio_limpio"
+          class="form-control"
+          [ngClass]="{
+            'is-invalid': submitted && f.precio_limpio.errors
+          }"
+        />
+        <div
+          *ngIf="submitted && f.precio_limpio.errors"
+          class="invalid-feedback"
+        >
+          <div *ngIf="f.precio_limpio.errors.required">
+            Campo requerido
+          </div>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label for="unidades">Unidades: </label>
+        <input
+          type="text"
+          formControlName="unidades"
+          class="form-control"
+          [ngClass]="{
+            'is-invalid': submitted && f.unidades.errors
+          }"
+        />
+        <div *ngIf="submitted && f.unidades.errors" class="invalid-feedback">
+          <div *ngIf="f.unidades.errors.required">
+            Campo requerido
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="col-lg-6 col-sm-12 pr-xl-5">
+      <div class="form-group">
+        <label for="comision_casa">Comisión Casa: </label>
+        <input
+          type="text"
+          formControlName="comision_casa"
+          class="form-control"
+          [ngClass]="{
+            'is-invalid': submitted && f.comision_casa.errors
+          }"
+        />
+        <div
+          *ngIf="submitted && f.comision_casa.errors"
+          class="invalid-feedback"
+        >
+          <div *ngIf="f.comision_casa.errors.required">
+            Campo requerido
+          </div>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label for="comision_bolsa">Comisión Bolsa: </label>
+        <input
+          type="text"
+          formControlName="comision_bolsa"
+          class="form-control"
+          [ngClass]="{
+            'is-invalid': submitted && f.comision_bolsa.errors
+          }"
+        />
+        <div
+          *ngIf="submitted && f.comision_bolsa.errors"
+          class="invalid-feedback"
+        >
+          <div *ngIf="f.comision_bolsa.errors.required">
+            Campo requerido
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <br />
+  <div class="row">
+    <div class="col-lg-6 col-sm-12 pr-xl-5">
+      <div class="form-group">
+        <label for="fecha_operacion">Fecha Operación: </label>
+        <div class="input-box-container">
+          <p>
+            <i class="far fa-calendar" aria-hidden="true"></i>
+          </p>
+          <input
+            class="input-box form-control"
+            placeholder="Seleccione una fecha"
+            angular-mydatepicker
+            name="fecha_operacion"
+            (click)="dp.toggleCalendar()"
+            [options]="myDpOptions"
+            (dateChanged)="onDateChanged($event)"
+            #dp="angular-mydatepicker"
+            [ngClass]="{
+              'is-invalid': submitted && f.fecha_operacion.errors
+            }"
+          />
+        </div>
+
+        <div
+          *ngIf="submitted && f.fecha_operacion.errors"
+          class="invalid-feedback"
+        >
+          <div *ngIf="f.fecha_liquidacion.errors.required">
+            Campo requerido
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="col-lg-6 col-sm-12 pr-xl-5">
+      <div class="form-group">
+        <label for="fecha_vencimiento">Fecha Vencimiento: </label>
+
+        <div class="input-box-container">
+          <div>
+            <p>
+              <i class="far fa-calendar" aria-hidden="true"></i>
+            </p>
+            <input
+              class="input-box form-control"
+              placeholder="Seleccione una fecha"
+              angular-mydatepicker
+              name="fecha_vencimiento"
+              (click)="dp1.toggleCalendar()"
+              [options]="myDpOptions"
+              (dateChanged)="onDateChanged($event)"
+              #dp1="angular-mydatepicker"
+              [ngClass]="{
+                'is-invalid': submitted && f.fecha_vencimiento.errors
+              }"
+            />
+          </div>
+        </div>
+
+        <div
+          *ngIf="submitted && f.fecha_vencimiento.errors"
+          class="invalid-feedback"
+        >
+          <div *ngIf="f.fecha_vencimiento.errors.required">
+            Campo requerido
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!---->
+
+  <!---->
+
+  <br />
+  <div class="form-group text-center space-20">
+    <button
+      class="btn btn-primary center-component margin-right"
+      (click)="goToNext(personalForm)"
+    >
+      Siguiente
+    </button>
+  </div>
+
+  <!-- [disabled]="!investmentProposalForm.valid"
+                          <div *ngIf="error" class="alert alert-danger mt-3 mb-0">{{error}}</div>-->
+</form>

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

@@ -51,13 +51,12 @@ export class APNComponent implements InstrumentComponent {
     console.log("init");
 
     this.investmentProposalForm = this.formBuilder.group({
-      valor_nominal: ["", Validators.required],
-      plazo_dias: ["", Validators.required],
-      casa: ["", Validators.required],
-      base_dias: ["", Validators.required],
+      precio_limpio: ["", Validators.required],
+      unidades: ["", Validators.required],
+      comision_casa: ["", Validators.required],
+      comision_bolsa: ["", Validators.required],
       fecha_operacion: ["", Validators.required],
-      fecha_liquidacion: ["", Validators.required],
-      fecha_rendencion: ["", Validators.required]
+      fecha_vencimiento: ["", Validators.required]
     });
   }
 }

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

@@ -1 +1,294 @@
 BONOS FORM
+<h4 class="card-title">
+  BONO
+</h4>
+<form
+  class="form-auth-small ng-untouched ng-pristine ng-valid"
+  [formGroup]="investmentProposalForm"
+>
+  <div class="row">
+    <div class="col-lg-6 col-sm-12 pr-xl-5">
+      <div class="form-group">
+        <label for="valor_nominal">Valor nominal: </label>
+        <input
+          type="text"
+          formControlName="valor_nominal"
+          class="form-control"
+          [ngClass]="{
+            'is-invalid': submitted && f.valor_nominal.errors
+          }"
+        />
+        <div
+          *ngIf="submitted && f.valor_nominal.errors"
+          class="invalid-feedback"
+        >
+          <div *ngIf="f.valor_nominal.errors.required">
+            Campo requerido
+          </div>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label for="ytm_vencimiento">YTM al vencimiento: </label>
+        <input
+          type="text"
+          formControlName="ytm_vencimiento"
+          class="form-control"
+          [ngClass]="{
+            'is-invalid': submitted && f.ytm_vencimiento.errors
+          }"
+        />
+        <div
+          *ngIf="submitted && f.ytm_vencimiento.errors"
+          class="invalid-feedback"
+        >
+          <div *ngIf="f.ytm_vencimiento.errors.required">
+            Campo requerido
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="col-lg-6 col-sm-12 pr-xl-5">
+      <div class="form-group">
+        <label for="precio_c_v">Precio Compra/Venta: </label>
+        <input
+          type="text"
+          formControlName="precio_c_v"
+          class="form-control"
+          [ngClass]="{
+            'is-invalid': submitted && f.precio_c_v.errors
+          }"
+        />
+        <div *ngIf="submitted && f.precio_c_v.errors" class="invalid-feedback">
+          <div *ngIf="f.precio_c_v.errors.required">
+            Campo requerido
+          </div>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label for="precio_vencimiento">Precio al vencimiento: </label>
+        <input
+          type="text"
+          formControlName="precio_vencimiento"
+          class="form-control"
+          [ngClass]="{
+            'is-invalid': submitted && f.precio_vencimiento.errors
+          }"
+        />
+        <div
+          *ngIf="submitted && f.precio_vencimiento.errors"
+          class="invalid-feedback"
+        >
+          <div *ngIf="f.precio_vencimiento.errors.required">
+            Campo requerido
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <br />
+  <div class="row">
+    <div class="col-lg-6 col-sm-12 pr-xl-5">
+      <div class="form-group">
+        <label for="fecha_liquidacion">Fecha Liquidación: </label>
+        <div class="input-box-container">
+          <p>
+            <i class="far fa-calendar" aria-hidden="true"></i>
+          </p>
+          <input
+            class="input-box form-control"
+            placeholder="Seleccione una fecha"
+            angular-mydatepicker
+            name="fecha_liquidacion"
+            (click)="dp.toggleCalendar()"
+            [options]="myDpOptions"
+            (dateChanged)="onDateChanged($event)"
+            #dp="angular-mydatepicker"
+            [ngClass]="{
+              'is-invalid': submitted && f.fecha_liquidacion.errors
+            }"
+          />
+        </div>
+
+        <div
+          *ngIf="submitted && f.fecha_liquidacion.errors"
+          class="invalid-feedback"
+        >
+          <div *ngIf="f.fecha_liquidacion.errors.required">
+            Campo requerido
+          </div>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label for="fecha_vencimiento">Fecha Vencimiento: </label>
+
+        <div class="input-box-container">
+          <div>
+            <p>
+              <i class="far fa-calendar" aria-hidden="true"></i>
+            </p>
+            <input
+              class="input-box form-control"
+              placeholder="Seleccione una fecha"
+              angular-mydatepicker
+              name="fecha_vencimiento"
+              (click)="dp1.toggleCalendar()"
+              [options]="myDpOptions"
+              (dateChanged)="onDateChanged($event)"
+              #dp1="angular-mydatepicker"
+              [ngClass]="{
+                'is-invalid': submitted && f.fecha_vencimiento.errors
+              }"
+            />
+          </div>
+        </div>
+
+        <div
+          *ngIf="submitted && f.fecha_vencimiento.errors"
+          class="invalid-feedback"
+        >
+          <div *ngIf="f.fecha_vencimiento.errors.required">
+            Campo requerido
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="col-lg-6 col-sm-12 pr-xl-5">
+      <div class="form-group">
+        <label for="fecha_cupon">Última Fecha Cupón: </label>
+
+        <div class="input-box-container">
+          <div>
+            <p>
+              <i class="far fa-calendar" aria-hidden="true"></i>
+            </p>
+            <input
+              class="input-box form-control"
+              placeholder="Seleccione una fecha"
+              angular-mydatepicker
+              name="fecha_cupon"
+              (click)="dp2.toggleCalendar()"
+              [options]="myDpOptions"
+              (dateChanged)="onDateChanged($event)"
+              #dp2="angular-mydatepicker"
+              [ngClass]="{
+                'is-invalid': submitted && f.fecha_cupon.errors
+              }"
+            />
+          </div>
+        </div>
+
+        <div *ngIf="submitted && f.fecha_cupon.errors" class="invalid-feedback">
+          <div *ngIf="f.fecha_cupon.errors.required">
+            Campo requerido
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!---->
+
+  <!---->
+
+  <br />
+
+  <div class="row">
+    <div class="col-lg-6 col-sm-12 pr-xl-5">
+      <div class="form-group">
+        <label for="comision_casa">Comisión Casa: </label>
+        <input
+          type="text"
+          formControlName="comision_casa"
+          class="form-control"
+          [ngClass]="{
+            'is-invalid': submitted && f.comision_casa.errors
+          }"
+        />
+        <div
+          *ngIf="submitted && f.comision_casa.errors"
+          class="invalid-feedback"
+        >
+          <div *ngIf="f.comision_casa.errors.required">
+            Campo requerido
+          </div>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label for="comision_bolsa">Comisión Bolsa: </label>
+        <input
+          type="text"
+          formControlName="comision_bolsa"
+          class="form-control"
+          [ngClass]="{
+            'is-invalid': submitted && f.comision_bolsa.errors
+          }"
+        />
+        <div
+          *ngIf="submitted && f.comision_bolsa.errors"
+          class="invalid-feedback"
+        >
+          <div *ngIf="f.comision_bolsa.errors.required">
+            Campo requerido
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="col-lg-6 col-sm-12 pr-xl-5">
+      <div class="form-group">
+        <label for="cupon">Cupón: </label>
+        <input
+          type="text"
+          formControlName="cupon"
+          class="form-control"
+          [ngClass]="{
+            'is-invalid': submitted && f.cupon.errors
+          }"
+        />
+        <div *ngIf="submitted && f.cupon.errors" class="invalid-feedback">
+          <div *ngIf="f.cupon.errors.required">
+            Campo requerido
+          </div>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label for="costos_transferencia">Costos de Transferencia: </label>
+        <input
+          type="text"
+          formControlName="costos_transferencia"
+          class="form-control"
+          [ngClass]="{
+            'is-invalid': submitted && f.costos_transferencia.errors
+          }"
+        />
+        <div
+          *ngIf="submitted && f.costos_transferencia.errors"
+          class="invalid-feedback"
+        >
+          <div *ngIf="f.costos_transferencia.errors.required">
+            Campo requerido
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <br />
+  <div class="form-group text-center space-20">
+    <button
+      class="btn btn-primary center-component margin-right"
+      (click)="goToNext(personalForm)"
+    >
+      Siguiente
+    </button>
+  </div>
+
+  <!-- [disabled]="!investmentProposalForm.valid"
+                        <div *ngIf="error" class="alert alert-danger mt-3 mb-0">{{error}}</div>-->
+</form>

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

@@ -52,12 +52,16 @@ export class BonosComponent implements InstrumentComponent {
 
     this.investmentProposalForm = this.formBuilder.group({
       valor_nominal: ["", Validators.required],
-      plazo_dias: ["", Validators.required],
-      casa: ["", Validators.required],
-      base_dias: ["", Validators.required],
-      fecha_operacion: ["", Validators.required],
+      ytm_vencimiento: ["", Validators.required],
+      precio_c_v: ["", Validators.required],
+      precio_vencimiento: ["", Validators.required],
       fecha_liquidacion: ["", Validators.required],
-      fecha_rendencion: ["", Validators.required]
+      fecha_cupon: ["", Validators.required],
+      fecha_vencimiento: ["", Validators.required],
+      comision_casa: ["", Validators.required],
+      comision_bolsa: ["", Validators.required],
+      cupon: ["", Validators.required],
+      costos_transferencia: ["", Validators.required]
     });
   }
 }

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

@@ -1 +1,299 @@
-CETE
+<h4 class="card-title">
+  CETE
+</h4>
+<form
+  class="form-auth-small ng-untouched ng-pristine ng-valid"
+  [formGroup]="investmentProposalForm"
+>
+  <div class="row">
+    <div class="col-lg-6 col-sm-12 pr-xl-5">
+      <div class="form-group">
+        <label for="valor_nominal">Valor nominal: </label>
+        <input
+          type="text"
+          formControlName="valor_nominal"
+          class="form-control"
+          [ngClass]="{
+            'is-invalid': submitted && f.valor_nominal.errors
+          }"
+        />
+        <div
+          *ngIf="submitted && f.valor_nominal.errors"
+          class="invalid-feedback"
+        >
+          <div *ngIf="f.valor_nominal.errors.required">
+            Campo requerido
+          </div>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label for="plazo_dias">Plazo inversión: </label>
+        <input
+          type="text"
+          formControlName="plazo_dias"
+          class="form-control"
+          [ngClass]="{
+            'is-invalid': submitted && f.plazo_dias.errors
+          }"
+        />
+        <div *ngIf="submitted && f.plazo_dias.errors" class="invalid-feedback">
+          <div *ngIf="f.plazo_dias.errors.required">
+            Campo requerido
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="col-lg-6 col-sm-12 pr-xl-5">
+      <div class="form-group">
+        <label for="casa">Casa: </label>
+
+        <select
+          (change)="onInstrumentChange($event)"
+          class="custom-select"
+          formControlName="casa"
+          [ngClass]="{
+            'is-invalid': submitted && f.casa.errors
+          }"
+        >
+          <option *ngFor="let item of casa" [value]="item.key">{{
+            item.value
+          }}</option>
+        </select>
+        <div *ngIf="submitted && f.casa.errors" class="invalid-feedback">
+          <div *ngIf="f.casa.errors.required">
+            Campo requerido
+          </div>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label for="base_dias">Año base: </label>
+
+        <select
+          (change)="onInstrumentChange($event)"
+          class="custom-select"
+          formControlName="base_dias"
+          [ngClass]="{
+            'is-invalid': submitted && f.cod_tarifa.errors
+          }"
+        >
+          <option *ngFor="let item of base_dias" [value]="item.key">{{
+            item.value
+          }}</option>
+        </select>
+        <div *ngIf="submitted && f.base_dias.errors" class="invalid-feedback">
+          <div *ngIf="f.base_dias.errors.required">
+            Campo requerido
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-lg-6 col-sm-12 pr-xl-5">
+      <div class="form-group">
+        <label for="fecha_operacion">Fecha operación: </label>
+        <div class="input-box-container">
+          <p>
+            <i class="far fa-calendar" aria-hidden="true"></i>
+          </p>
+          <input
+            class="input-box form-control"
+            placeholder="Seleccione una fecha"
+            angular-mydatepicker
+            name="fecha_operacion"
+            (click)="dp.toggleCalendar()"
+            [options]="myDpOptions"
+            (dateChanged)="onDateChanged($event)"
+            #dp="angular-mydatepicker"
+            [ngClass]="{
+              'is-invalid': submitted && f.fecha_operacion.errors
+            }"
+          />
+        </div>
+
+        <div
+          *ngIf="submitted && f.fecha_operacion.errors"
+          class="invalid-feedback"
+        >
+          <div *ngIf="f.fecha_operacion.errors.required">
+            Campo requerido
+          </div>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label for="fecha_liquidacion">Fecha liquidación: </label>
+
+        <div class="input-box-container">
+          <div>
+            <p>
+              <i class="far fa-calendar" aria-hidden="true"></i>
+            </p>
+            <input
+              class="input-box form-control"
+              placeholder="Seleccione una fecha"
+              angular-mydatepicker
+              name="fecha_liquidacion"
+              (click)="dp1.toggleCalendar()"
+              [options]="myDpOptions"
+              (dateChanged)="onDateChanged($event)"
+              #dp1="angular-mydatepicker"
+              [ngClass]="{
+                'is-invalid': submitted && f.fecha_liquidacion.errors
+              }"
+            />
+          </div>
+        </div>
+
+        <div
+          *ngIf="submitted && f.fecha_liquidacion.errors"
+          class="invalid-feedback"
+        >
+          <div *ngIf="f.fecha_liquidacion.errors.required">
+            Campo requerido
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="col-lg-6 col-sm-12 pr-xl-5">
+      <div class="form-group">
+        <label for="fecha_cupon">Última Fecha Cupón: </label>
+
+        <div class="input-box-container">
+          <div>
+            <p>
+              <i class="far fa-calendar" aria-hidden="true"></i>
+            </p>
+            <input
+              class="input-box form-control"
+              placeholder="Seleccione una fecha"
+              angular-mydatepicker
+              name="fecha_cupon"
+              (click)="dp2.toggleCalendar()"
+              [options]="myDpOptions"
+              (dateChanged)="onDateChanged($event)"
+              #dp2="angular-mydatepicker"
+              [ngClass]="{
+                'is-invalid': submitted && f.fecha_cupon.errors
+              }"
+            />
+          </div>
+        </div>
+
+        <div *ngIf="submitted && f.fecha_cupon.errors" class="invalid-feedback">
+          <div *ngIf="f.fecha_cupon.errors.required">
+            Campo requerido
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!---->
+
+  <!---->
+
+  <br />
+
+  <div class="row">
+    <div class="col-lg-6 col-sm-12 pr-xl-5">
+      <div class="form-group">
+        <label for="comision_casa">Comisión Casa: </label>
+        <input
+          type="text"
+          formControlName="comision_casa"
+          class="form-control"
+          [ngClass]="{
+            'is-invalid': submitted && f.comision_casa.errors
+          }"
+        />
+        <div
+          *ngIf="submitted && f.comision_casa.errors"
+          class="invalid-feedback"
+        >
+          <div *ngIf="f.comision_casa.errors.required">
+            Campo requerido
+          </div>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label for="comision_bolsa">Comisión Bolsa: </label>
+        <input
+          type="text"
+          formControlName="comision_bolsa"
+          class="form-control"
+          [ngClass]="{
+            'is-invalid': submitted && f.comision_bolsa.errors
+          }"
+        />
+        <div
+          *ngIf="submitted && f.comision_bolsa.errors"
+          class="invalid-feedback"
+        >
+          <div *ngIf="f.comision_bolsa.errors.required">
+            Campo requerido
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="col-lg-6 col-sm-12 pr-xl-5">
+      <div class="form-group">
+        <label for="rendimiento_bruto">Rendimiento Bruto: </label>
+        <input
+          type="text"
+          formControlName="rendimiento_bruto"
+          class="form-control"
+          [ngClass]="{
+            'is-invalid': submitted && f.rendimiento_bruto.errors
+          }"
+        />
+        <div
+          *ngIf="submitted && f.rendimiento_bruto.errors"
+          class="invalid-feedback"
+        >
+          <div *ngIf="f.rendimiento_bruto.errors.required">
+            Campo requerido
+          </div>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label for="otros_costos">Otros Costos: </label>
+        <input
+          type="text"
+          formControlName="otros_costos"
+          class="form-control"
+          [ngClass]="{
+            'is-invalid': submitted && f.otros_costos.errors
+          }"
+        />
+        <div
+          *ngIf="submitted && f.otros_costos.errors"
+          class="invalid-feedback"
+        >
+          <div *ngIf="f.otros_costos.errors.required">
+            Campo requerido
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <br />
+  <div class="form-group text-center space-20">
+    <button
+      class="btn btn-primary center-component margin-right"
+      (click)="goToNext(personalForm)"
+    >
+      Siguiente
+    </button>
+  </div>
+
+  <!-- [disabled]="!investmentProposalForm.valid"
+                        <div *ngIf="error" class="alert alert-danger mt-3 mb-0">{{error}}</div>-->
+</form>

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

@@ -9,12 +9,58 @@ import { formatDate, DatePipe } from "@angular/common";
   templateUrl: "./cete.component.html"
 })
 export class CeteComponent implements InstrumentComponent {
-  title: string = "Letes";
+  title: string = "Cetes";
   @Input() data: any;
+  form: any;
 
-  constructor() {}
+  // 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"
+  };
 
-  ngOnInit() {
-    console.log("init");
+  investmentProposalForm: FormGroup;
+  myDpOptions: IAngularMyDpOptions = {
+    dateRange: false,
+    dateFormat: "dd/mm/yyyy",
+    dayLabels: this.daysLabels,
+    monthLabels: this.monthsLabels
+  };
+  myDateInit: boolean = true;
+  model: IMyDateModel = null;
+
+  constructor(private formBuilder: FormBuilder) {
+    this.investmentProposalForm = this.formBuilder.group({
+      valor_nominal: ["", Validators.required],
+      plazo_dias: ["", Validators.required],
+      casa: ["", Validators.required],
+      base_dias: ["", Validators.required],
+      fecha_operacion: ["", Validators.required],
+      fecha_liquidacion: ["", Validators.required],
+      fecha_cupon: ["", Validators.required],
+      comision_casa: ["", Validators.required],
+      comision_bolsa: ["", Validators.required],
+      rendimiento_bruto: ["", Validators.required],
+      otros_costos: ["", Validators.required]
+    });
   }
 }

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

@@ -0,0 +1,199 @@
+<h4 class="card-title">
+  DAP
+</h4>
+<form
+  class="form-auth-small ng-untouched ng-pristine ng-valid"
+  [formGroup]="investmentProposalForm"
+>
+  <div class="row">
+    <div class="col-lg-6 col-sm-12 pr-xl-5">
+      <div class="form-group">
+        <label for="monto_inversion">Monto de Inversión: </label>
+        <input
+          type="text"
+          formControlName="monto_inversion"
+          class="form-control"
+          [ngClass]="{
+            'is-invalid': submitted && f.monto_inversion.errors
+          }"
+        />
+        <div
+          *ngIf="submitted && f.monto_inversion.errors"
+          class="invalid-feedback"
+        >
+          <div *ngIf="f.monto_inversion.errors.required">
+            Campo requerido
+          </div>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label for="plazo_dias">Plazo inversión: </label>
+        <input
+          type="text"
+          formControlName="plazo_dias"
+          class="form-control"
+          [ngClass]="{
+            'is-invalid': submitted && f.plazo_dias.errors
+          }"
+        />
+        <div *ngIf="submitted && f.plazo_dias.errors" class="invalid-feedback">
+          <div *ngIf="f.plazo_dias.errors.required">
+            Campo requerido
+          </div>
+        </div>
+
+        <div class="form-group">
+          <label for="tasa">Tasa: </label>
+          <input
+            type="text"
+            formControlName="tasa"
+            class="form-control"
+            [ngClass]="{
+              'is-invalid': submitted && f.tasa.errors
+            }"
+          />
+          <div *ngIf="submitted && f.tasa.errors" class="invalid-feedback">
+            <div *ngIf="f.tasa.errors.required">
+              Campo requerido
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="col-lg-6 col-sm-12 pr-xl-5">
+      <div class="form-group">
+        <label for="renta">Renta: </label>
+        <input
+          type="text"
+          formControlName="renta"
+          class="form-control"
+          [ngClass]="{
+            'is-invalid': submitted && f.renta.errors
+          }"
+        />
+        <div *ngIf="submitted && f.renta.errors" class="invalid-feedback">
+          <div *ngIf="f.renta.errors.required">
+            Campo requerido
+          </div>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label for="periodicidad">Periodicidad: </label>
+
+        <select
+          (change)="onInstrumentChange($event)"
+          class="custom-select"
+          formControlName="periodicidad"
+          [ngClass]="{
+            'is-invalid': submitted && f.periodicidad.errors
+          }"
+        >
+          <option *ngFor="let item of casa" [value]="item.key">{{
+            item.value
+          }}</option>
+        </select>
+        <div
+          *ngIf="submitted && f.periodicidad.errors"
+          class="invalid-feedback"
+        >
+          <div *ngIf="f.periodicidad.errors.required">
+            Campo requerido
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <br />
+
+  <div class="row">
+    <div class="col-lg-6 col-sm-12 pr-xl-5">
+      <div class="form-group">
+        <label for="fecha_operacion">Fecha operación: </label>
+        <div class="input-box-container">
+          <p>
+            <i class="far fa-calendar" aria-hidden="true"></i>
+          </p>
+          <input
+            class="input-box form-control"
+            placeholder="Seleccione una fecha"
+            angular-mydatepicker
+            name="fecha_operacion"
+            (click)="dp.toggleCalendar()"
+            [options]="myDpOptions"
+            (dateChanged)="onDateChanged($event)"
+            #dp="angular-mydatepicker"
+            [ngClass]="{
+              'is-invalid': submitted && f.fecha_operacion.errors
+            }"
+          />
+        </div>
+
+        <div
+          *ngIf="submitted && f.fecha_operacion.errors"
+          class="invalid-feedback"
+        >
+          <div *ngIf="f.fecha_operacion.errors.required">
+            Campo requerido
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="col-lg-6 col-sm-12 pr-xl-5">
+      <div class="form-group">
+        <label for="fecha_cupon">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
+              name="fecha_vencimiento"
+              (click)="dp2.toggleCalendar()"
+              [options]="myDpOptions"
+              (dateChanged)="onDateChanged($event)"
+              #dp2="angular-mydatepicker"
+              [ngClass]="{
+                'is-invalid': submitted && f.fecha_vencimiento.errors
+              }"
+            />
+          </div>
+        </div>
+
+        <div
+          *ngIf="submitted && f.fecha_vencimiento.errors"
+          class="invalid-feedback"
+        >
+          <div *ngIf="f.fecha_cupon.errors.required">
+            Campo requerido
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!---->
+
+  <!---->
+
+  <br />
+  <div class="form-group text-center space-20">
+    <button
+      class="btn btn-primary center-component margin-right"
+      (click)="goToNext(personalForm)"
+    >
+      Siguiente
+    </button>
+  </div>
+
+  <!-- [disabled]="!investmentProposalForm.valid"
+                          <div *ngIf="error" class="alert alert-danger mt-3 mb-0">{{error}}</div>-->
+</form>

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

@@ -51,13 +51,14 @@ export class DepositosComponent implements InstrumentComponent {
     console.log("init");
 
     this.investmentProposalForm = this.formBuilder.group({
-      valor_nominal: ["", Validators.required],
+      monto_inversion: ["", Validators.required],
       plazo_dias: ["", Validators.required],
-      casa: ["", Validators.required],
+      periodicidad: ["", Validators.required],
+      renta: ["", Validators.required],
+      tasa: ["", Validators.required],
       base_dias: ["", Validators.required],
       fecha_operacion: ["", Validators.required],
-      fecha_liquidacion: ["", Validators.required],
-      fecha_rendencion: ["", Validators.required]
+      fecha_vencimiento: ["", Validators.required]
     });
   }
 }

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

@@ -1 +1,299 @@
-VCN Form
+<h4 class="card-title">
+  VCN
+</h4>
+<form
+  class="form-auth-small ng-untouched ng-pristine ng-valid"
+  [formGroup]="investmentProposalForm"
+>
+  <div class="row">
+    <div class="col-lg-6 col-sm-12 pr-xl-5">
+      <div class="form-group">
+        <label for="valor_nominal">Valor nominal: </label>
+        <input
+          type="text"
+          formControlName="valor_nominal"
+          class="form-control"
+          [ngClass]="{
+            'is-invalid': submitted && f.valor_nominal.errors
+          }"
+        />
+        <div
+          *ngIf="submitted && f.valor_nominal.errors"
+          class="invalid-feedback"
+        >
+          <div *ngIf="f.valor_nominal.errors.required">
+            Campo requerido
+          </div>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label for="plazo_dias">Plazo inversión: </label>
+        <input
+          type="text"
+          formControlName="plazo_dias"
+          class="form-control"
+          [ngClass]="{
+            'is-invalid': submitted && f.plazo_dias.errors
+          }"
+        />
+        <div *ngIf="submitted && f.plazo_dias.errors" class="invalid-feedback">
+          <div *ngIf="f.plazo_dias.errors.required">
+            Campo requerido
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="col-lg-6 col-sm-12 pr-xl-5">
+      <div class="form-group">
+        <label for="casa">Casa: </label>
+
+        <select
+          (change)="onInstrumentChange($event)"
+          class="custom-select"
+          formControlName="casa"
+          [ngClass]="{
+            'is-invalid': submitted && f.cod_tarifa.errors
+          }"
+        >
+          <option *ngFor="let item of casa" [value]="item.key">{{
+            item.value
+          }}</option>
+        </select>
+        <div *ngIf="submitted && f.casa.errors" class="invalid-feedback">
+          <div *ngIf="f.casa.errors.required">
+            Campo requerido
+          </div>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label for="base_dias">Año base: </label>
+
+        <select
+          (change)="onInstrumentChange($event)"
+          class="custom-select"
+          formControlName="base_dias"
+          [ngClass]="{
+            'is-invalid': submitted && f.cod_tarifa.errors
+          }"
+        >
+          <option *ngFor="let item of base_dias" [value]="item.key">{{
+            item.value
+          }}</option>
+        </select>
+        <div *ngIf="submitted && f.base_dias.errors" class="invalid-feedback">
+          <div *ngIf="f.base_dias.errors.required">
+            Campo requerido
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-lg-6 col-sm-12 pr-xl-5">
+      <div class="form-group">
+        <label for="fecha_operacion">Fecha operación: </label>
+        <div class="input-box-container">
+          <p>
+            <i class="far fa-calendar" aria-hidden="true"></i>
+          </p>
+          <input
+            class="input-box form-control"
+            placeholder="Seleccione una fecha"
+            angular-mydatepicker
+            name="fecha_operacion"
+            (click)="dp.toggleCalendar()"
+            [options]="myDpOptions"
+            (dateChanged)="onDateChanged($event)"
+            #dp="angular-mydatepicker"
+            [ngClass]="{
+              'is-invalid': submitted && f.fecha_operacion.errors
+            }"
+          />
+        </div>
+
+        <div
+          *ngIf="submitted && f.fecha_operacion.errors"
+          class="invalid-feedback"
+        >
+          <div *ngIf="f.fecha_operacion.errors.required">
+            Campo requerido
+          </div>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label for="fecha_liquidacion">Fecha liquidación: </label>
+
+        <div class="input-box-container">
+          <div>
+            <p>
+              <i class="far fa-calendar" aria-hidden="true"></i>
+            </p>
+            <input
+              class="input-box form-control"
+              placeholder="Seleccione una fecha"
+              angular-mydatepicker
+              name="fecha_liquidacion"
+              (click)="dp1.toggleCalendar()"
+              [options]="myDpOptions"
+              (dateChanged)="onDateChanged($event)"
+              #dp1="angular-mydatepicker"
+              [ngClass]="{
+                'is-invalid': submitted && f.fecha_liquidacion.errors
+              }"
+            />
+          </div>
+        </div>
+
+        <div
+          *ngIf="submitted && f.fecha_liquidacion.errors"
+          class="invalid-feedback"
+        >
+          <div *ngIf="f.fecha_liquidacion.errors.required">
+            Campo requerido
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="col-lg-6 col-sm-12 pr-xl-5">
+      <div class="form-group">
+        <label for="fecha_cupon">Última Fecha Cupón: </label>
+
+        <div class="input-box-container">
+          <div>
+            <p>
+              <i class="far fa-calendar" aria-hidden="true"></i>
+            </p>
+            <input
+              class="input-box form-control"
+              placeholder="Seleccione una fecha"
+              angular-mydatepicker
+              name="fecha_cupon"
+              (click)="dp2.toggleCalendar()"
+              [options]="myDpOptions"
+              (dateChanged)="onDateChanged($event)"
+              #dp2="angular-mydatepicker"
+              [ngClass]="{
+                'is-invalid': submitted && f.fecha_cupon.errors
+              }"
+            />
+          </div>
+        </div>
+
+        <div *ngIf="submitted && f.fecha_cupon.errors" class="invalid-feedback">
+          <div *ngIf="f.fecha_cupon.errors.required">
+            Campo requerido
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!---->
+
+  <!---->
+
+  <br />
+
+  <div class="row">
+    <div class="col-lg-6 col-sm-12 pr-xl-5">
+      <div class="form-group">
+        <label for="comision_casa">Comisión Casa: </label>
+        <input
+          type="text"
+          formControlName="comision_casa"
+          class="form-control"
+          [ngClass]="{
+            'is-invalid': submitted && f.comision_casa.errors
+          }"
+        />
+        <div
+          *ngIf="submitted && f.comision_casa.errors"
+          class="invalid-feedback"
+        >
+          <div *ngIf="f.comision_casa.errors.required">
+            Campo requerido
+          </div>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label for="comision_bolsa">Comisión Bolsa: </label>
+        <input
+          type="text"
+          formControlName="comision_bolsa"
+          class="form-control"
+          [ngClass]="{
+            'is-invalid': submitted && f.comision_bolsa.errors
+          }"
+        />
+        <div
+          *ngIf="submitted && f.comision_bolsa.errors"
+          class="invalid-feedback"
+        >
+          <div *ngIf="f.comision_bolsa.errors.required">
+            Campo requerido
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="col-lg-6 col-sm-12 pr-xl-5">
+      <div class="form-group">
+        <label for="rendimiento_bruto">Rendimiento Bruto: </label>
+        <input
+          type="text"
+          formControlName="rendimiento_bruto"
+          class="form-control"
+          [ngClass]="{
+            'is-invalid': submitted && f.rendimiento_bruto.errors
+          }"
+        />
+        <div
+          *ngIf="submitted && f.rendimiento_bruto.errors"
+          class="invalid-feedback"
+        >
+          <div *ngIf="f.rendimiento_bruto.errors.required">
+            Campo requerido
+          </div>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label for="otros_costos">Otros Costos: </label>
+        <input
+          type="text"
+          formControlName="otros_costos"
+          class="form-control"
+          [ngClass]="{
+            'is-invalid': submitted && f.otros_costos.errors
+          }"
+        />
+        <div
+          *ngIf="submitted && f.otros_costos.errors"
+          class="invalid-feedback"
+        >
+          <div *ngIf="f.otros_costos.errors.required">
+            Campo requerido
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <br />
+  <div class="form-group text-center space-20">
+    <button
+      class="btn btn-primary center-component margin-right"
+      (click)="goToNext(personalForm)"
+    >
+      Siguiente
+    </button>
+  </div>
+
+  <!-- [disabled]="!investmentProposalForm.valid"
+                      <div *ngIf="error" class="alert alert-danger mt-3 mb-0">{{error}}</div>-->
+</form>

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

@@ -37,6 +37,7 @@ export class VCNComponent implements InstrumentComponent {
     11: "Nov",
     12: "Dic"
   };
+
   investmentProposalForm: FormGroup;
   myDpOptions: IAngularMyDpOptions = {
     dateRange: false,
@@ -57,7 +58,11 @@ export class VCNComponent implements InstrumentComponent {
       base_dias: ["", Validators.required],
       fecha_operacion: ["", Validators.required],
       fecha_liquidacion: ["", Validators.required],
-      fecha_rendencion: ["", Validators.required]
+      fecha_cupon: ["", Validators.required],
+      comision_casa: ["", Validators.required],
+      comision_bolsa: ["", Validators.required],
+      rendimiento_bruto: ["", Validators.required],
+      otros_costos: ["", Validators.required]
     });
   }
 }

src/app/components/investment-proposals/work/work.component.ts

@@ -52,7 +52,7 @@ export class WorkComponent implements OnInit {
   }
 
   loadComponent() {
-    this.currentAdIndex = (this.currentAdIndex + 2) % this.ads.length;
+    this.currentAdIndex = (this.currentAdIndex + 5) % this.ads.length;
     const adItem = this.ads[this.currentAdIndex];
     const componentFactory = this.componentFactoryResolver.resolveComponentFactory(
       adItem.component