Merge branch 'development' of onunez/frontend-inversiones into test

Jenkinsfile

@@ -3,10 +3,21 @@ pipeline {
     stages {
         stage('build') {
             steps {
-                sh  '''
-                    cd /opt/inversys/app/frontend/
-                    git pull
-                    '''
+                script {
+                    if(env.JOB_NAME == 'DEV_Inversys_frontend'){
+                        sh  '''
+                            cd /opt/inversys/app/frontend/
+                            git pull
+                            '''
+                    }
+                    else if(env.JOB_NAME == 'TST_Inversys_frontend'){
+                        sshagent(credentials: ['deployment-key']) {
+                            sh  '''
+                                ssh deploy@192.168.98.48 'cd /opt/inversys/app/frontend/ && git pull'
+                                '''
+                        }
+                    }
+                }                
             }
         }
         stage('Test') {
@@ -16,11 +27,21 @@ pipeline {
         }
         stage('Deploy') {
             steps {
-                sh  '''
-                    cd /opt/inversys/
-                    echo $USER
-                    docker-compose up -d --build frontend
-                    '''
+                script {
+                    if(env.JOB_NAME == 'DEV_Inversys_frontend'){
+                        sh  '''
+                            cd /opt/inversys/
+                            docker-compose up -d --build frontend
+                            '''
+                    }
+                    else if(env.JOB_NAME == 'TST_Inversys_frontend'){
+                        sshagent(credentials: ['deployment-key']) {
+                            sh  '''
+                                ssh deploy@192.168.98.48 'cd /opt/inversys/ && docker-compose up -d --build frontend'
+                                '''
+                        }
+                    }
+                }                
             }
         }
     }

nginx/nginx.conf

@@ -26,6 +26,8 @@ http {
             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
             proxy_set_header X-NginX-Proxy true;
             proxy_cache_bypass $http_upgrade;
+            client_max_body_size 0;
+
         }
 
         location /assets/ {

package-lock.json

@@ -2337,6 +2337,11 @@
       "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
       "dev": true
     },
+    "angular": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/angular/-/angular-1.8.0.tgz",
+      "integrity": "sha512-VdaMx+Qk0Skla7B5gw77a8hzlcOakwF8mjlW13DpIWIDlfqwAbSSLfd8N/qZnzEmQF4jC4iofInd3gE7vL8ZZg=="
+    },
     "angular-archwizard": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/angular-archwizard/-/angular-archwizard-5.0.0.tgz",
@@ -2353,6 +2358,16 @@
         "tslib": "^1.9.0"
       }
     },
+    "angular-chosen-localytics": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/angular-chosen-localytics/-/angular-chosen-localytics-1.9.3.tgz",
+      "integrity": "sha512-ruvcI8gxgeHXbycZ5rW/tkPeCy0uQfsEuGts9ectmV6Bob/bIMthWbx3tf4DUMKF0Ed7hUf2ipwGrS/ZphXB3Q==",
+      "requires": {
+        "angular": "^1.5.7",
+        "chosen-js": "^1.6.1",
+        "jquery": "^3.0.0"
+      }
+    },
     "angular-datatables": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/angular-datatables/-/angular-datatables-8.0.0.tgz",
@@ -3450,6 +3465,11 @@
         }
       }
     },
+    "chosen-js": {
+      "version": "1.8.7",
+      "resolved": "https://registry.npmjs.org/chosen-js/-/chosen-js-1.8.7.tgz",
+      "integrity": "sha512-eVdrZJ2U5ISdObkgsi0od5vIJdLwq1P1Xa/Vj/mgxkMZf14DlgobfB6nrlFi3kW4kkvKLsKk4NDqZj1MU1DCpw=="
+    },
     "chownr": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.3.tgz",
@@ -6978,8 +6998,7 @@
             "code-point-at": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "concat-map": {
               "version": "0.0.1",
@@ -6990,8 +7009,7 @@
             "console-control-strings": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -7108,8 +7126,7 @@
             "inherits": {
               "version": "2.0.4",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "ini": {
               "version": "1.3.5",
@@ -7121,7 +7138,6 @@
               "version": "1.0.0",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -7151,7 +7167,6 @@
               "version": "2.9.0",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -7170,7 +7185,6 @@
               "version": "0.5.1",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -7260,8 +7274,7 @@
             "number-is-nan": {
               "version": "1.0.1",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -7273,7 +7286,6 @@
               "version": "1.4.0",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -7395,7 +7407,6 @@
               "version": "1.0.2",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -8195,6 +8206,14 @@
       "integrity": "sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==",
       "dev": true
     },
+    "ng-select": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/ng-select/-/ng-select-1.0.2.tgz",
+      "integrity": "sha512-QMh5NqnYrsK18J8vmRBjpcv4o9euGd5Grs+4sutNNWWDX65rJlLh+S6oUq3uvo35S2v/ZMcMMR/e5f0gMlwxlA==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
     "ng2-file-upload": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/ng2-file-upload/-/ng2-file-upload-1.4.0.tgz",
@@ -8359,7 +8378,8 @@
             },
             "ansi-regex": {
               "version": "2.1.1",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -8396,7 +8416,8 @@
             },
             "code-point-at": {
               "version": "1.1.0",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "concat-map": {
               "version": "0.0.1",
@@ -8405,7 +8426,8 @@
             },
             "console-control-strings": {
               "version": "1.1.0",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -8508,7 +8530,8 @@
             },
             "inherits": {
               "version": "2.0.4",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "ini": {
               "version": "1.3.5",
@@ -8518,6 +8541,7 @@
             "is-fullwidth-code-point": {
               "version": "1.0.0",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -8639,7 +8663,8 @@
             },
             "number-is-nan": {
               "version": "1.0.1",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -8649,6 +8674,7 @@
             "once": {
               "version": "1.4.0",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -8754,6 +8780,7 @@
             "string-width": {
               "version": "1.0.2",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -8771,6 +8798,7 @@
             "strip-ansi": {
               "version": "3.0.1",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -8809,7 +8837,8 @@
             },
             "wrappy": {
               "version": "1.0.2",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "yallist": {
               "version": "3.1.1",

package.json

@@ -43,6 +43,7 @@
     "jquery": "^3.4.1",
     "mat-table-exporter": "^1.2.2",
     "moment": "^2.24.0",
+    "ng-select": "^1.0.2",
     "ng2-file-upload": "^1.4.0",
     "ngx-animating-datepicker": "^1.2.1",
     "ngx-bootstrap": "^5.1.1",

src/app/app.module.ts

@@ -8,6 +8,7 @@ import { HttpClientModule, HTTP_INTERCEPTORS } from "@angular/common/http";
 import { registerLocaleData, DatePipe } from "@angular/common";
 import { RouterModule } from "@angular/router";
 import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
+import { SelectModule } from "ng-select";
 
 // Internationalization i18n
 import localeEs from "@angular/common/locales/es";
@@ -43,6 +44,7 @@ import { MatPasswordStrengthModule } from "@angular-material-extensions/password
     PluginsModule,
     AngularMyDatePickerModule,
     FontAwesomeModule,
+    SelectModule,
     MatPasswordStrengthModule.forRoot()
   ],
   providers: [

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

@@ -1,174 +0,0 @@
-<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(investmentProposalForm)"
-    >
-      Siguiente
-    </button>
-  </div>
-
-
-</form>
--->

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

@@ -1,87 +0,0 @@
-import { Component, OnInit, Input } 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";
-
-@Component({
-  selector: "app-anc",
-  templateUrl: "./anc.component.html"
-})
-export class ANCComponent implements InstrumentComponent {
-  title: string = "Acciones nacionales comunes";
-  @Input() data: any;
-  @Input() summary: boolean;
-  @Input() investmentID: string;
-
-  form: any;
-
-  // 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;
-  model: IMyDateModel = null;
-
-  constructor(
-    private formBuilder: FormBuilder,
-    private router: Router,
-    private formDataService: FormInvestmentProposalService
-  ) {
-    console.log("init");
-
-    this.investmentProposalForm = this.formBuilder.group({
-      precio_limpio: ["", Validators.required],
-      unidades: ["", Validators.required],
-      comision_casa: ["", Validators.required],
-      comision_bolsa: ["", Validators.required],
-      fecha_operacion: ["", Validators.required],
-      fecha_vencimiento: ["", Validators.required]
-    });
-  }
-
-  save(form: any): boolean {
-    /*if (!form.valid) {
-      return false;
-    }*/
-    this.formDataService.setWork(this.investmentProposalForm.value);
-    return true;
-  }
-
-  goToNext(form: any) {
-    if (this.save(form)) {
-      console.log("all good");
-      // Navigate to the work page
-      this.router.navigate(["/address"]);
-    }
-  }
-}

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

@@ -1,174 +0,0 @@
-<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(investmentProposalForm)"
-    >
-      Siguiente
-    </button>
-  </div>
-
-</form>
--->

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

@@ -1,89 +0,0 @@
-import { Component, OnInit, Input } 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";
-
-@Component({
-  selector: "app-apn",
-  templateUrl: "./apn.component.html"
-})
-export class APNComponent implements InstrumentComponent {
-  title: string = "Acciones preferentes nacionales";
-  @Input() data: any;
-  @Input() summary: boolean;
-  @Input() investmentID: string;
-
-  form: any;
-
-  // 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;
-  model: IMyDateModel = null;
-
-  constructor(
-    private formBuilder: FormBuilder,
-    private router: Router,
-    private formDataService: FormInvestmentProposalService
-  ) {
-    console.log("init");
-
-    this.investmentProposalForm = this.formBuilder.group({
-      precio_limpio: ["", Validators.required],
-      unidades: ["", Validators.required],
-      comision_casa: ["", Validators.required],
-      comision_bolsa: ["", Validators.required],
-      fecha_operacion: ["", Validators.required],
-      fecha_vencimiento: ["", Validators.required]
-    });
-  }
-
-  save(form: any): boolean {
-    /*if (!form.valid) {
-      return false;
-    }*/
-    console.log(this.investmentProposalForm.value);
-    this.formDataService.setWork(this.investmentProposalForm.value);
-    return true;
-  }
-
-  goToNext(form: any) {
-    if (this.save(form)) {
-      console.log("all good");
-      // Navigate to the work page
-      console.log(this.formDataService.getWork());
-      this.router.navigate(["/address"]);
-    }
-  }
-}

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

@@ -971,7 +971,7 @@
     </div>
     <br />
     <!-- Tabla de proyecciones del instrumento-->
-    <div class="instrument-calcs">
+    <div *ngIf="hasProjections" class="instrument-calcs">
       <div class="row">
         <div class="col-12">
           <span class="badge badge-success badge-custom"
@@ -987,6 +987,7 @@
               <td mat-cell *matCellDef="let row">
                 {{ row.posicion }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>TOTAL</td>
             </ng-container>
             <!-- Country Column -->
             <ng-container matColumnDef="plazo">
@@ -994,6 +995,7 @@
               <td mat-cell *matCellDef="let row">
                 {{ row.plazo }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
 
             <ng-container matColumnDef="fecha_pago">
@@ -1005,6 +1007,7 @@
                     : row.fecha_pago
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
             <ng-container matColumnDef="ingreso_bruto">
               <th mat-header-cell *matHeaderCellDef>Ingreso bruto</th>
@@ -1015,6 +1018,11 @@
                     : row.ingreso_bruto
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_ingreso_bruto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="ingreso_neto">
               <th mat-header-cell *matHeaderCellDef>Ingreso neto</th>
@@ -1025,6 +1033,11 @@
                     : row.ingreso_neto
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_ingreso_neto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
 
             <ng-container matColumnDef="impuesto">
@@ -1036,10 +1049,14 @@
                     : row.impuesto
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{ consolidado_proyeccion.total_impuesto | number: "1.2-4" }}
+              </td>
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
             <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+            <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
           </table>
         </div>
       </div>
@@ -1522,6 +1539,7 @@
               <td mat-cell *matCellDef="let row">
                 {{ row.posicion }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>TOTAL</td>
             </ng-container>
             <!-- Country Column -->
             <ng-container matColumnDef="plazo">
@@ -1529,6 +1547,7 @@
               <td mat-cell *matCellDef="let row">
                 {{ row.plazo }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
 
             <!-- Country Column -->
@@ -1541,6 +1560,7 @@
                     : row.fecha_pago
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
 
             <!-- Country Column -->
@@ -1553,6 +1573,11 @@
                     : row.ingreso_bruto
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_ingreso_bruto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
 
             <ng-container matColumnDef="ingreso_neto">
@@ -1564,6 +1589,11 @@
                     : row.ingreso_neto
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_ingreso_neto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
 
             <ng-container matColumnDef="impuesto">
@@ -1575,10 +1605,14 @@
                     : row.impuesto
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{ consolidado_proyeccion.total_impuesto | number: "1.2-4" }}
+              </td>
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
             <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+            <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
           </table>
         </div>
       </div>

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

@@ -127,6 +127,7 @@ export class BONO implements InstrumentComponent {
   ytm_vencimiento_porcentaje_compra: any;
   ytm_vencimiento_porcentaje_venta: any;
   comision_bolsa_venta: any;
+  consolidado_proyeccion: any;
 
   constructor(
     private formBuilder: FormBuilder,
@@ -146,6 +147,9 @@ export class BONO implements InstrumentComponent {
       this.instrument_work.proyecciones != ""
     ) {
       this.hasProjections = true;
+      this.consolidado_proyeccion = this.instrument_work.proyecciones[
+        this.instrument_work.proyecciones.length - 1
+      ];
       this.operation_results_work = this.instrument_work["resultado_operacion"];
 
       if (this.instrument_work["instrumento"] != undefined) {
@@ -153,7 +157,7 @@ export class BONO implements InstrumentComponent {
       }
       this.instrument_work_summary = this.instrument_work;
 
-      this.dataSource2.data = this.instrument_work.proyecciones;
+      this.dataSource2.data = this.instrument_work.proyecciones.slice(0, -1);
       this.dataSource2.paginator = this.paginator;
       this.dataSource2.sort = this.sort;
     } else {
@@ -239,58 +243,34 @@ export class BONO implements InstrumentComponent {
       ],
 
       precio_venta: [
-        this.instrument_exists ? "" : this.instrument_work.precio_venta,
-        [
-          Validators.required,
-          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
-        ]
+        this.instrument_exists ? "" : this.instrument_work.precio_venta
       ],
 
       valor_nominal_venta: [
-        this.instrument_exists ? "" : this.instrument_work.valor_nominal_venta,
-        [
-          Validators.required,
-          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
-        ]
+        this.instrument_exists ? "" : this.instrument_work.valor_nominal_venta
       ],
 
       precio_vencimiento_venta: [
         this.instrument_exists
           ? ""
-          : this.instrument_work.precio_vencimiento_venta,
-        [
-          Validators.required,
-          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
-        ]
+          : this.instrument_work.precio_vencimiento_venta
       ],
 
       cupon_porcentaje_venta: [
         this.instrument_exists
           ? ""
-          : this.instrument_work.cupon_porcentaje_venta,
-        [
-          Validators.required,
-          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
-        ]
+          : this.instrument_work.cupon_porcentaje_venta
       ],
 
       comision_casa_porcentaje_venta: [
         this.instrument_exists
           ? ""
-          : this.instrument_work.comision_casa_porcentaje_venta,
-        [
-          Validators.required,
-          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
-        ]
+          : this.instrument_work.comision_casa_porcentaje_venta
       ],
       comision_bolsa_porcentaje_venta: [
         this.instrument_exists
           ? ""
-          : this.instrument_work.comision_bolsa_porcentaje_venta,
-        [
-          Validators.required,
-          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
-        ]
+          : this.instrument_work.comision_bolsa_porcentaje_venta
       ],
 
       fecha_ultima_cupon_compra: [
@@ -354,8 +334,7 @@ export class BONO implements InstrumentComponent {
                 ),
                 formatted: this.instrument_work.fecha_ultima_cupon_venta
               }
-            },
-        Validators.required
+            }
       ],
       fecha_liquidacion_venta: [
         this.instrument_exists
@@ -370,8 +349,7 @@ export class BONO implements InstrumentComponent {
                 ),
                 formatted: this.instrument_work.fecha_liquidacion_venta
               }
-            },
-        Validators.required
+            }
       ],
       fecha_vencimiento_venta: [
         this.instrument_exists
@@ -386,8 +364,7 @@ export class BONO implements InstrumentComponent {
                 ),
                 formatted: this.instrument_work.fecha_vencimiento_venta
               }
-            },
-        Validators.required
+            }
       ]
     });
   }
@@ -560,10 +537,17 @@ export class BONO implements InstrumentComponent {
 
           // Proyecciones
           this.proyecciones = ans["result"]["proyecciones"];
+          if (this.proyecciones != undefined && this.proyecciones.length > 0) {
+            this.hasProjections = true;
+            let proyecciones_temp = this.proyecciones;
+            this.consolidado_proyeccion =
+              proyecciones_temp[proyecciones_temp.length - 1];
+            this.proyecciones = ans["result"]["proyecciones"];
+          }
 
           this.operation_result = true;
-          this.dataSource.data = this.proyecciones;
-          this.dataSource2.data = this.proyecciones;
+          this.dataSource.data = this.proyecciones.slice(0, -1);
+          this.dataSource2.data = this.proyecciones.slice(0, -1);
           this.dataSource.paginator = this.paginator;
           this.dataSource.sort = this.sort;
 

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

@@ -971,7 +971,7 @@
     </div>
     <br />
     <!-- Tabla de proyecciones del instrumento-->
-    <div class="instrument-calcs">
+    <div *ngIf="hasProjections" class="instrument-calcs">
       <div class="row">
         <div class="col-12">
           <span class="badge badge-success badge-custom"
@@ -987,6 +987,7 @@
               <td mat-cell *matCellDef="let row">
                 {{ row.posicion }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>TOTAL</td>
             </ng-container>
             <!-- Country Column -->
             <ng-container matColumnDef="plazo">
@@ -994,6 +995,7 @@
               <td mat-cell *matCellDef="let row">
                 {{ row.plazo }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
 
             <ng-container matColumnDef="fecha_pago">
@@ -1005,6 +1007,7 @@
                     : row.fecha_pago
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
             <ng-container matColumnDef="ingreso_bruto">
               <th mat-header-cell *matHeaderCellDef>Ingreso bruto</th>
@@ -1015,6 +1018,11 @@
                     : row.ingreso_bruto
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_ingreso_bruto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="ingreso_neto">
               <th mat-header-cell *matHeaderCellDef>Ingreso neto</th>
@@ -1025,6 +1033,11 @@
                     : row.ingreso_neto
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_ingreso_neto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
 
             <ng-container matColumnDef="impuesto">
@@ -1036,10 +1049,14 @@
                     : row.impuesto
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{ consolidado_proyeccion.total_impuesto | number: "1.2-4" }}
+              </td>
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
             <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+            <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>            
           </table>
         </div>
       </div>
@@ -1521,6 +1538,7 @@
               <td mat-cell *matCellDef="let row">
                 {{ row.posicion }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>TOTAL</td>
             </ng-container>
             <!-- Country Column -->
             <ng-container matColumnDef="plazo">
@@ -1528,6 +1546,7 @@
               <td mat-cell *matCellDef="let row">
                 {{ row.plazo }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
 
             <!-- Country Column -->
@@ -1540,6 +1559,7 @@
                     : row.fecha_pago
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
 
             <!-- Country Column -->
@@ -1552,6 +1572,11 @@
                     : row.ingreso_bruto
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_ingreso_bruto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
 
             <ng-container matColumnDef="ingreso_neto">
@@ -1563,6 +1588,11 @@
                     : row.ingreso_neto
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_ingreso_neto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
 
             <ng-container matColumnDef="impuesto">
@@ -1574,10 +1604,16 @@
                     : row.impuesto
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_impuesto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-            <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>            
+            <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
           </table>
         </div>
       </div>

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

@@ -127,6 +127,7 @@ export class CINV implements InstrumentComponent {
   ytm_vencimiento_porcentaje_compra: any;
   ytm_vencimiento_porcentaje_venta: any;
   comision_bolsa_venta: any;
+  consolidado_proyeccion: any;
 
   constructor(
     private formBuilder: FormBuilder,
@@ -146,6 +147,9 @@ export class CINV implements InstrumentComponent {
       this.instrument_work.proyecciones != ""
     ) {
       this.hasProjections = true;
+      this.consolidado_proyeccion = this.instrument_work.proyecciones[
+        this.instrument_work.proyecciones.length - 1
+      ];
       this.operation_results_work = this.instrument_work["resultado_operacion"];
 
       if (this.instrument_work["instrumento"] != undefined) {
@@ -153,7 +157,7 @@ export class CINV implements InstrumentComponent {
       }
       this.instrument_work_summary = this.instrument_work;
 
-      this.dataSource2.data = this.instrument_work.proyecciones;
+      this.dataSource2.data = this.instrument_work.proyecciones.slice(0, -1);
       this.dataSource2.paginator = this.paginator;
       this.dataSource2.sort = this.sort;
     } else {
@@ -239,58 +243,34 @@ export class CINV implements InstrumentComponent {
       ],
 
       precio_venta: [
-        this.instrument_exists ? "" : this.instrument_work.precio_venta,
-        [
-          Validators.required,
-          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
-        ]
+        this.instrument_exists ? "" : this.instrument_work.precio_venta
       ],
 
       valor_nominal_venta: [
-        this.instrument_exists ? "" : this.instrument_work.valor_nominal_venta,
-        [
-          Validators.required,
-          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
-        ]
+        this.instrument_exists ? "" : this.instrument_work.valor_nominal_venta
       ],
 
       precio_vencimiento_venta: [
         this.instrument_exists
           ? ""
-          : this.instrument_work.precio_vencimiento_venta,
-        [
-          Validators.required,
-          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
-        ]
+          : this.instrument_work.precio_vencimiento_venta
       ],
 
       cupon_porcentaje_venta: [
         this.instrument_exists
           ? ""
-          : this.instrument_work.cupon_porcentaje_venta,
-        [
-          Validators.required,
-          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
-        ]
+          : this.instrument_work.cupon_porcentaje_venta
       ],
 
       comision_casa_porcentaje_venta: [
         this.instrument_exists
           ? ""
-          : this.instrument_work.comision_casa_porcentaje_venta,
-        [
-          Validators.required,
-          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
-        ]
+          : this.instrument_work.comision_casa_porcentaje_venta
       ],
       comision_bolsa_porcentaje_venta: [
         this.instrument_exists
           ? ""
-          : this.instrument_work.comision_bolsa_porcentaje_venta,
-        [
-          Validators.required,
-          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
-        ]
+          : this.instrument_work.comision_bolsa_porcentaje_venta
       ],
 
       fecha_ultima_cupon_compra: [
@@ -354,8 +334,7 @@ export class CINV implements InstrumentComponent {
                 ),
                 formatted: this.instrument_work.fecha_ultima_cupon_venta
               }
-            },
-        Validators.required
+            }
       ],
       fecha_liquidacion_venta: [
         this.instrument_exists
@@ -370,8 +349,7 @@ export class CINV implements InstrumentComponent {
                 ),
                 formatted: this.instrument_work.fecha_liquidacion_venta
               }
-            },
-        Validators.required
+            }
       ],
       fecha_vencimiento_venta: [
         this.instrument_exists
@@ -386,8 +364,7 @@ export class CINV implements InstrumentComponent {
                 ),
                 formatted: this.instrument_work.fecha_vencimiento_venta
               }
-            },
-        Validators.required
+            }
       ]
     });
   }
@@ -562,6 +539,12 @@ export class CINV implements InstrumentComponent {
 
           // Proyecciones
           this.proyecciones = ans["result"]["proyecciones"];
+          if (this.proyecciones != undefined && this.proyecciones.length > 0) {
+            let proyecciones_temp = this.proyecciones;
+            this.consolidado_proyeccion =
+              proyecciones_temp[proyecciones_temp.length - 1];
+            this.proyecciones = ans["result"]["proyecciones"];
+          }
 
           this.operation_result = true;
           this.dataSource.data = this.proyecciones;

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

@@ -366,7 +366,7 @@
           >
         </div>
 
-        <div class="cete-table-container">
+        <div *ngIf="hasProjections" class="cete-table-container">
           <table mat-table [dataSource]="dataSource" class="example-table">
             <!-- Name Column -->
             <ng-container matColumnDef="posicion">
@@ -374,6 +374,7 @@
               <td mat-cell *matCellDef="let row">
                 {{ row.posicion }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>TOTAL</td>
             </ng-container>
             <!-- Country Column -->
             <ng-container matColumnDef="plazo">
@@ -381,6 +382,7 @@
               <td mat-cell *matCellDef="let row">
                 {{ row.plazo }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
 
             <!-- Country Column -->
@@ -393,6 +395,7 @@
                     : row.fecha_pago
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
             <ng-container matColumnDef="ingreso_bruto">
               <th mat-header-cell *matHeaderCellDef>Ingreso bruto</th>
@@ -403,6 +406,11 @@
                     : row.ingreso_bruto
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_ingreso_bruto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
             <!-- Country Column -->
             <ng-container matColumnDef="ingreso_neto">
@@ -414,10 +422,16 @@
                     : row.ingreso_neto
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_ingreso_neto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-            <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>            
+            <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
           </table>
 
           <mat-paginator
@@ -582,6 +596,7 @@
               <td mat-cell *matCellDef="let row">
                 {{ row.posicion }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>TOTAL</td>
             </ng-container>
             <!-- Country Column -->
             <ng-container matColumnDef="plazo">
@@ -589,6 +604,7 @@
               <td mat-cell *matCellDef="let row">
                 {{ row.plazo }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
 
             <!-- Country Column -->
@@ -601,6 +617,7 @@
                     : row.fecha_pago
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
 
             <!-- Country Column -->
@@ -613,6 +630,11 @@
                     : row.ingreso_bruto
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_ingreso_bruto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
 
             <ng-container matColumnDef="ingreso_neto">
@@ -624,10 +646,16 @@
                     : row.ingreso_neto
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_ingreso_neto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
             <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+            <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
           </table>
 
           <mat-paginator

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

@@ -95,6 +95,10 @@ export class CETE implements InstrumentComponent {
   dataSource2 = new MatTableDataSource(this.proyecciones);
   hasProjections: boolean;
   fecha_vencimiento: any;
+  consolidado_proyeccion = {
+    total_ingreso_bruto: 0,
+    total_ingreso_neto: 0
+  };
 
   constructor(
     private formBuilder: FormBuilder,
@@ -113,8 +117,11 @@ export class CETE implements InstrumentComponent {
       (this.instrument_work.proyecciones != "" ||
         this.instrument_work != undefined)
     ) {
+      this.consolidado_proyeccion = this.instrument_work.proyecciones[
+        this.instrument_work.proyecciones.length - 1
+      ];
       this.hasProjections = true;
-      this.dataSource2.data = this.instrument_work.proyecciones;
+      this.dataSource2.data = this.instrument_work.proyecciones.slice(0, -1);
       this.dataSource2.paginator = this.paginator;
       this.dataSource2.sort = this.sort;
     } else {
@@ -290,7 +297,14 @@ export class CETE implements InstrumentComponent {
           this.proyecciones = ans["result"]["proyecciones"];
           this.fecha_vencimiento = ans["result"]["fecha_vencimiento"];
 
-          this.dataSource.data = this.proyecciones;
+          if (this.proyecciones != undefined && this.proyecciones.length > 0) {
+            this.hasProjections = true;
+            let proyecciones_temp = this.proyecciones;
+            this.consolidado_proyeccion =
+              proyecciones_temp[proyecciones_temp.length - 1];
+            this.proyecciones = ans["result"]["proyecciones"];
+          }
+          this.dataSource.data = this.proyecciones.slice(0, -1);
           this.dataSource.paginator = this.paginator;
           this.dataSource.sort = this.sort;
 

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

@@ -242,7 +242,7 @@
     </div>
     <br />
     <!-- Tabla de proyecciones del instrumento-->
-    <div class="instrument-calcs">
+    <div *ngIf="hasProjections" class="instrument-calcs">
       <div class="row">
         <div class="col-12">
           <span class="badge badge-success badge-custom"
@@ -257,12 +257,14 @@
               <td mat-cell *matCellDef="let row">
                 {{ row.posicion | number: "1.2-4" }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>TOTAL</td>
             </ng-container>
             <ng-container matColumnDef="plazo">
               <th mat-header-cell *matHeaderCellDef>Plazo</th>
               <td mat-cell *matCellDef="let row">
                 {{ row.plazo }}
-              </td>
+              </td>              
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
 
             <ng-container matColumnDef="fecha_pago">
@@ -274,6 +276,7 @@
                     : row.fecha_pago
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
             <ng-container matColumnDef="ingreso_bruto">
               <th mat-header-cell *matHeaderCellDef>Ingreso bruto</th>
@@ -285,6 +288,11 @@
                     : (row.ingreso_bruto | number: "1.2-4")
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_ingreso_bruto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="renta">
               <th mat-header-cell *matHeaderCellDef>Renta</th>
@@ -296,6 +304,11 @@
                     : (row.renta | number: "1.2-4")
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_renta | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="ingreso_neto">
               <th mat-header-cell *matHeaderCellDef>Ingreso neto</th>
@@ -307,10 +320,16 @@
                     : (row.ingreso_neto | number: "1.2-4")
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_ingreso_neto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-            <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>            
+            <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
           </table>
 
           <mat-paginator
@@ -452,12 +471,14 @@
               <td mat-cell *matCellDef="let row">
                 {{ row.posicion | number: "1.2-4" }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>TOTAL</td>
             </ng-container>
             <ng-container matColumnDef="plazo">
               <th mat-header-cell *matHeaderCellDef>Plazo</th>
               <td mat-cell *matCellDef="let row">
                 {{ row.plazo }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
 
             <ng-container matColumnDef="fecha_pago">
@@ -469,6 +490,7 @@
                     : row.fecha_pago
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
             <ng-container matColumnDef="ingreso_bruto">
               <th mat-header-cell *matHeaderCellDef>Ingreso bruto</th>
@@ -480,6 +502,11 @@
                     : (row.ingreso_bruto | number: "1.2-4")
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_ingreso_bruto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="renta">
               <th mat-header-cell *matHeaderCellDef>Renta</th>
@@ -491,6 +518,11 @@
                     : (row.renta | number: "1.2-4")
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_renta | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="ingreso_neto">
               <th mat-header-cell *matHeaderCellDef>Ingreso neto</th>
@@ -502,10 +534,16 @@
                     : (row.ingreso_neto | number: "1.2-4")
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_ingreso_neto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-            <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>            
+            <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
           </table>
 
           <mat-paginator

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

@@ -93,6 +93,11 @@ export class DAP implements InstrumentComponent {
   hasProjections: boolean;
   numero_certificado: any;
   fecha_vencimiento: any;
+  consolidado_proyeccion = {
+    total_ingreso_bruto: 0,
+    total_renta: 0,
+    total_ingreso_neto: 0
+  };
 
   constructor(
     private formBuilder: FormBuilder,
@@ -112,7 +117,10 @@ export class DAP implements InstrumentComponent {
         this.instrument_work != undefined)
     ) {
       this.hasProjections = true;
-      this.dataSource2.data = this.instrument_work.proyecciones;
+      this.consolidado_proyeccion = this.instrument_work.proyecciones[
+        this.instrument_work.proyecciones.length - 1
+      ];
+      this.dataSource2.data = this.instrument_work.proyecciones.slice(0, -1);
       this.dataSource2.paginator = this.paginator;
       this.dataSource2.sort = this.sort;
     } else {
@@ -226,7 +234,15 @@ export class DAP implements InstrumentComponent {
           this.numero_certificado = ans["result"]["numero_certificado"];
           this.fecha_vencimiento = ans["result"]["fecha_vencimiento"];
 
-          this.dataSource.data = this.proyecciones;
+          if (this.proyecciones != undefined && this.proyecciones.length > 0) {
+            this.hasProjections = true;
+            let proyecciones_temp = this.proyecciones;
+            this.consolidado_proyeccion =
+              proyecciones_temp[proyecciones_temp.length - 1];
+            this.proyecciones = ans["result"]["proyecciones"];
+          }
+
+          this.dataSource.data = this.proyecciones.slice(0, -1);
           this.dataSource.paginator = this.paginator;
           this.dataSource.sort = this.sort;
 

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

@@ -971,7 +971,7 @@
     </div>
     <br />
     <!-- Tabla de proyecciones del instrumento-->
-    <div class="instrument-calcs">
+    <div *ngIf="hasProjections" class="instrument-calcs">
       <div class="row">
         <div class="col-12">
           <span class="badge badge-success badge-custom"
@@ -986,7 +986,8 @@
               <th mat-header-cell *matHeaderCellDef>#</th>
               <td mat-cell *matCellDef="let row">
                 {{ row.posicion }}
-              </td>
+              </td>              
+              <td mat-footer-cell *matFooterCellDef>TOTAL</td>
             </ng-container>
             <!-- Country Column -->
             <ng-container matColumnDef="plazo">
@@ -994,6 +995,7 @@
               <td mat-cell *matCellDef="let row">
                 {{ row.plazo }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
 
             <ng-container matColumnDef="fecha_pago">
@@ -1005,6 +1007,7 @@
                     : row.fecha_pago
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
             <ng-container matColumnDef="ingreso_bruto">
               <th mat-header-cell *matHeaderCellDef>Ingreso bruto</th>
@@ -1015,6 +1018,11 @@
                     : row.ingreso_bruto
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_ingreso_bruto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="ingreso_neto">
               <th mat-header-cell *matHeaderCellDef>Ingreso neto</th>
@@ -1025,6 +1033,11 @@
                     : row.ingreso_neto
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_ingreso_neto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
 
             <ng-container matColumnDef="impuesto">
@@ -1036,10 +1049,14 @@
                     : row.impuesto
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{ consolidado_proyeccion.total_impuesto | number: "1.2-4" }}
+              </td>
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
             <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+            <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
           </table>
         </div>
       </div>
@@ -1521,6 +1538,7 @@
               <td mat-cell *matCellDef="let row">
                 {{ row.posicion }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>TOTAL</td>
             </ng-container>
             <!-- Country Column -->
             <ng-container matColumnDef="plazo">
@@ -1528,6 +1546,7 @@
               <td mat-cell *matCellDef="let row">
                 {{ row.plazo }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
 
             <!-- Country Column -->
@@ -1540,6 +1559,7 @@
                     : row.fecha_pago
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
 
             <!-- Country Column -->
@@ -1552,6 +1572,11 @@
                     : row.ingreso_bruto
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_ingreso_bruto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
 
             <ng-container matColumnDef="ingreso_neto">
@@ -1563,6 +1588,11 @@
                     : row.ingreso_neto
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_ingreso_neto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
 
             <ng-container matColumnDef="impuesto">
@@ -1577,7 +1607,8 @@
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-            <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>            
+            <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
           </table>
         </div>
       </div>

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

@@ -127,6 +127,7 @@ export class EURB implements InstrumentComponent {
   ytm_vencimiento_porcentaje_compra: any;
   ytm_vencimiento_porcentaje_venta: any;
   comision_bolsa_venta: any;
+  consolidado_proyeccion: any;
 
   constructor(
     private formBuilder: FormBuilder,
@@ -146,6 +147,9 @@ export class EURB implements InstrumentComponent {
       this.instrument_work.proyecciones != ""
     ) {
       this.hasProjections = true;
+      this.consolidado_proyeccion = this.instrument_work.proyecciones[
+        this.instrument_work.proyecciones.length - 1
+      ];
       this.operation_results_work = this.instrument_work["resultado_operacion"];
 
       if (this.instrument_work["instrumento"] != undefined) {
@@ -153,7 +157,7 @@ export class EURB implements InstrumentComponent {
       }
       this.instrument_work_summary = this.instrument_work;
 
-      this.dataSource2.data = this.instrument_work.proyecciones;
+      this.dataSource2.data = this.instrument_work.proyecciones.slice(0, -1);
       this.dataSource2.paginator = this.paginator;
       this.dataSource2.sort = this.sort;
     } else {
@@ -239,58 +243,34 @@ export class EURB implements InstrumentComponent {
       ],
 
       precio_venta: [
-        this.instrument_exists ? "" : this.instrument_work.precio_venta,
-        [
-          Validators.required,
-          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
-        ]
+        this.instrument_exists ? "" : this.instrument_work.precio_venta
       ],
 
       valor_nominal_venta: [
-        this.instrument_exists ? "" : this.instrument_work.valor_nominal_venta,
-        [
-          Validators.required,
-          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
-        ]
+        this.instrument_exists ? "" : this.instrument_work.valor_nominal_venta
       ],
 
       precio_vencimiento_venta: [
         this.instrument_exists
           ? ""
-          : this.instrument_work.precio_vencimiento_venta,
-        [
-          Validators.required,
-          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
-        ]
+          : this.instrument_work.precio_vencimiento_venta
       ],
 
       cupon_porcentaje_venta: [
         this.instrument_exists
           ? ""
-          : this.instrument_work.cupon_porcentaje_venta,
-        [
-          Validators.required,
-          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
-        ]
+          : this.instrument_work.cupon_porcentaje_venta
       ],
 
       comision_casa_porcentaje_venta: [
         this.instrument_exists
           ? ""
-          : this.instrument_work.comision_casa_porcentaje_venta,
-        [
-          Validators.required,
-          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
-        ]
+          : this.instrument_work.comision_casa_porcentaje_venta
       ],
       comision_bolsa_porcentaje_venta: [
         this.instrument_exists
           ? ""
-          : this.instrument_work.comision_bolsa_porcentaje_venta,
-        [
-          Validators.required,
-          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
-        ]
+          : this.instrument_work.comision_bolsa_porcentaje_venta
       ],
 
       fecha_ultima_cupon_compra: [
@@ -354,8 +334,7 @@ export class EURB implements InstrumentComponent {
                 ),
                 formatted: this.instrument_work.fecha_ultima_cupon_venta
               }
-            },
-        Validators.required
+            }
       ],
       fecha_liquidacion_venta: [
         this.instrument_exists
@@ -370,8 +349,7 @@ export class EURB implements InstrumentComponent {
                 ),
                 formatted: this.instrument_work.fecha_liquidacion_venta
               }
-            },
-        Validators.required
+            }
       ],
       fecha_vencimiento_venta: [
         this.instrument_exists
@@ -386,8 +364,7 @@ export class EURB implements InstrumentComponent {
                 ),
                 formatted: this.instrument_work.fecha_vencimiento_venta
               }
-            },
-        Validators.required
+            }
       ]
     });
   }
@@ -561,10 +538,16 @@ export class EURB implements InstrumentComponent {
 
           // Proyecciones
           this.proyecciones = ans["result"]["proyecciones"];
+          if (this.proyecciones != undefined && this.proyecciones.length > 0) {
+            let proyecciones_temp = this.proyecciones;
+            this.consolidado_proyeccion =
+              proyecciones_temp[proyecciones_temp.length - 1];
+            this.proyecciones = ans["result"]["proyecciones"];
+          }
 
           this.operation_result = true;
-          this.dataSource.data = this.proyecciones;
-          this.dataSource2.data = this.proyecciones;
+          this.dataSource.data = this.proyecciones.slice(0, -1);
+          this.dataSource2.data = this.proyecciones.slice(0, -1);
           this.dataSource.paginator = this.paginator;
           this.dataSource.sort = this.sort;
 

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

@@ -0,0 +1,820 @@
+<div *ngIf="!summary">
+  <h4 class="card-title">
+    Bonos
+  </h4>
+  <form
+    class="form-auth-small ng-untouched ng-pristine ng-valid"
+    [formGroup]="investmentProposalForm"
+  >
+    <div class="row">
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="cuota_participacion">Cuota de participación: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="cuota_participacion"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.cuota_participacion.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.cuota_participacion.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.cuota_participacion.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.cuota_participacion.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="valor_participacion_porcentaje"
+            >Valor participación:
+          </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="valor_participacion_porcentaje"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid':
+                  submitted && f.valor_participacion_porcentaje.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.valor_participacion_porcentaje.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.valor_participacion_porcentaje.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.valor_participacion_porcentaje.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Comisión casa -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="comision_casa_porcentaje">Comisión casa: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-percent" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="comision_casa_porcentaje"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.comision_casa_porcentaje.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.comision_casa_porcentaje.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.comision_casa_porcentaje.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.comision_casa_porcentaje.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Comisión bolsa -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="comision_bolsa_porcentaje">Comisión bolsa: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-percent" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="comision_bolsa_porcentaje"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.comision_bolsa_porcentaje.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.comision_bolsa_porcentaje.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.comision_bolsa_porcentaje.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.comision_bolsa_porcentaje.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Dividendo porcentaje -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="dividendo_porcentaje">Dividendo </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-percent" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="dividendo_porcentaje"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.dividendo_porcentaje.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.dividendo_porcentaje.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.dividendo_porcentaje.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.dividendo_porcentaje.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Rendimiento -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="rendimiento_porcentaje">Rendimiento: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-percent"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="rendimiento_porcentaje"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.rendimiento_porcentaje.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.rendimiento_porcentaje.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.rendimiento_porcentaje.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.rendimiento_porcentaje.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Días liquidación -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="dias_liquidacion">Días liquidación: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-calendar-alt"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="dias_liquidacion"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.dias_liquidacion.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.dias_liquidacion.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.dias_liquidacion.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.dias_liquidacion.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Días vencimiento -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="dias_vencimiento">Días vencimiento: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-calendar-alt"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="dias_vencimiento"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.dias_vencimiento.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.dias_vencimiento.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.dias_vencimiento.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.dias_vencimiento.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Fecha de operación -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_operacion">Fecha de operación </label>
+
+          <div class="input-box-container">
+            <div>
+              <p>
+                <i class="far fa-calendar" aria-hidden="true"></i>
+              </p>
+              <input
+                class="input-box form-control"
+                placeholder="Seleccione una fecha"
+                angular-mydatepicker
+                formControlName="fecha_operacion"
+                (click)="dp1.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp1="angular-mydatepicker"
+                [ngClass]="{
+                  'is-invalid': submitted && f.fecha_operacion.errors
+                }"
+              />
+            </div>
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_operacion.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_operacion.errors.required">
+              Campo requerido
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="col-lg-12 col-sm-12 pr-xl-12">
+        <div class="form-group text-right">
+          <br />
+          <button
+            type="button"
+            class="btn btn-success center-component"
+            (click)="getCalculations(investmentProposalForm, false)"
+          >
+            Realizar cálculos
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <br />
+    <!-- Calculos del instrumento-->
+    <div class="instrument-calcs">
+      <div class="row">
+        <div class="col-12">
+          <span class="badge badge-success badge-custom"
+            >Cálculos del instrumento</span
+          >
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Cuota participación:</h4>
+          <div class="field">
+            $USD {{ cuota_participacion | number: "1.2-4" }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Valor participación:</h4>
+          <div class="field">
+            {{ valor_participacion_porcentaje | number: "1.2-4" }} %
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Días liquidación:</h4>
+          <div class="field">
+            {{ dias_liquidacion }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Días vencimiento:</h4>
+          <div class="field">
+            {{ dias_vencimiento }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Valor nominal:</h4>
+          <div class="field">$USD {{ valor_nominal | number: "1.2-4" }}</div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Valor transado:</h4>
+          <div class="field">$USD {{ valor_transado | number: "1.2-4" }}</div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Monto a pagar:</h4>
+          <div class="field">$USD {{ monto_pagar | number: "1.2-4" }}</div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Comisión casa (%):</h4>
+          <div class="field">
+            {{ comision_casa_porcentaje | number: "1.2-4" }}
+            %
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <div class="field">
+            <h4>Comisión casa:</h4>
+            $USD {{ comision_casa | number: "1.2-4" }}
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <h4>Comisión bolsa (%):</h4>
+          <div class="field">
+            {{ comision_bolsa_porcentaje | number: "1.2-4" }}
+            %
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <div class="field">
+            <h4>Comisión bolsa:</h4>
+            $USD {{ comision_bolsa | number: "1.2-4" }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Rendimiento (%):</h4>
+          <div class="field">
+            {{ rendimiento_porcentaje | number: "1.2-4" }}
+            %
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Dividendo (%):</h4>
+          <div class="field">
+            {{ dividendo_porcentaje | number: "1.2-4" }}
+            %
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Fecha operación:</h4>
+          <div class="field">
+            {{ fecha_operacion }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Fecha liquidación:</h4>
+          <div class="field">
+            {{ fecha_liquidacion }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Fecha vencimiento:</h4>
+          <div class="field">
+            {{ fecha_vencimiento }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <br />
+    <!-- Tabla de proyecciones del instrumento-->
+    <div *ngIf="hasProjections" class="instrument-calcs">
+      <div class="row">
+        <div class="col-12">
+          <span class="badge badge-success badge-custom"
+            >Proyecciones del instrumento</span
+          >
+        </div>
+
+        <div class="cete-table-container">
+          <table mat-table [dataSource]="dataSource" class="example-table">
+            <!-- Name Column -->
+            <ng-container matColumnDef="posicion">
+              <th mat-header-cell *matHeaderCellDef>#</th>
+              <td mat-cell *matCellDef="let row">
+                {{ row.posicion }}
+              </td>
+              <td mat-footer-cell *matFooterCellDef>TOTAL</td>
+            </ng-container>
+            <!-- Country Column -->
+            <ng-container matColumnDef="plazo">
+              <th mat-header-cell *matHeaderCellDef>Plazo</th>
+              <td mat-cell *matCellDef="let row">
+                {{ row.plazo }}
+              </td>
+              <td mat-footer-cell *matFooterCellDef></td>
+            </ng-container>
+
+            <ng-container matColumnDef="fecha_pago">
+              <th mat-header-cell *matHeaderCellDef>Fecha pago</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.fecha_pago == "" || row.fecha_pago == undefined
+                    ? "-"
+                    : row.fecha_pago
+                }}
+              </td>
+              <td mat-footer-cell *matFooterCellDef></td>
+            </ng-container>
+            <ng-container matColumnDef="ingreso_bruto">
+              <th mat-header-cell *matHeaderCellDef>Ingreso bruto</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.ingreso_bruto == "" || row.ingreso_bruto == undefined
+                    ? "-"
+                    : row.ingreso_bruto
+                }}
+              </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_ingreso_bruto | number: "1.2-4"
+                }}
+              </td>
+            </ng-container>
+            <ng-container matColumnDef="ingreso_neto">
+              <th mat-header-cell *matHeaderCellDef>Ingreso neto</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.ingreso_neto == "" || row.ingreso_neto == undefined
+                    ? "-"
+                    : row.ingreso_neto
+                }}
+              </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_ingreso_neto | number: "1.2-4"
+                }}
+              </td>
+            </ng-container>
+            <ng-container matColumnDef="dividendo_porcentaje">
+              <th mat-header-cell *matHeaderCellDef>Dividendo (%)</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.dividendo_porcentaje == "" ||
+                  row.dividendo_porcentaje == undefined
+                    ? "-"
+                    : row.dividendo_porcentaje
+                }}
+              </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_dividendo_porcentaje
+                    | number: "1.2-4"
+                }}
+              </td>
+            </ng-container>
+            <ng-container matColumnDef="rendimiento_porcentaje">
+              <th mat-header-cell *matHeaderCellDef>Rendimiento (%)</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.rendimiento_porcentaje == "" ||
+                  row.rendimiento_porcentaje == undefined
+                    ? "-"
+                    : row.rendimiento_porcentaje
+                }}
+              </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_rendimiento_porcentaje
+                    | number: "1.2-4"
+                }}
+              </td>
+            </ng-container>
+            <ng-container matColumnDef="rendimiento">
+              <th mat-header-cell *matHeaderCellDef>Rendimiento ($)</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.rendimiento == "" || row.rendimiento == undefined
+                    ? "-"
+                    : row.rendimiento
+                }}
+              </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{ consolidado_proyeccion.total_rendimiento | number: "1.2-4" }}
+              </td>
+            </ng-container>
+
+            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+            <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
+          </table>
+        </div>
+      </div>
+    </div>
+
+    <br />
+    <div class="form-group text-center space-20">
+      <button
+        type="button"
+        class="btn btn-default center-component margin-right"
+        (click)="goToPrevious()"
+      >
+        Anterior
+      </button>
+      <button
+        type="submit"
+        class="btn btn-primary center-component margin-right"
+        (click)="goToNext(investmentProposalForm)"
+      >
+        Siguiente
+      </button>
+    </div>
+  </form>
+</div>
+
+<div *ngIf="summary">
+  <div class="timeline-body">
+    <div class="row">
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Cuota participación:</h4>
+        <div class="field">
+          $USD
+          {{ instrument_work_summary.cuota_participacion | number: "1.2-4" }}
+        </div>
+      </div>
+
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Valor participación:</h4>
+        <div class="field">
+          {{
+            instrument_work_summary.valor_participacion_porcentaje
+              | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Días liquidación:</h4>
+        <div class="field">
+          {{ instrument_work_summary.dias_liquidacion }}
+        </div>
+      </div>
+
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Días vencimiento:</h4>
+        <div class="field">
+          {{ instrument_work_summary.dias_vencimiento }}
+        </div>
+      </div>
+
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Valor nominal:</h4>
+        <div class="field">
+          $USD {{ instrument_work_summary.valor_nominal | number: "1.2-4" }}
+        </div>
+      </div>
+
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Valor transado:</h4>
+        <div class="field">
+          $USD {{ instrument_work_summary.valor_transado | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Monto a pagar:</h4>
+        <div class="field">
+          $USD {{ instrument_work_summary.monto_pagar | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Comisión casa (%):</h4>
+        <div class="field">
+          {{
+            instrument_work_summary.comision_casa_porcentaje | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <div class="field">
+          <h4>Comisión casa:</h4>
+          $USD {{ instrument_work_summary.comision_casa | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Comisión bolsa (%):</h4>
+        <div class="field">
+          {{
+            instrument_work_summary.comision_bolsa_porcentaje | number: "1.2-4"
+          }}
+          %
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <div class="field">
+          <h4>Comisión bolsa:</h4>
+          $USD {{ instrument_work_summary.comision_bolsa | number: "1.2-4" }}
+        </div>
+      </div>
+
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Rendimiento (%):</h4>
+        <div class="field">
+          {{ instrument_work_summary.rendimiento_porcentaje | number: "1.2-4" }}
+          %
+        </div>
+      </div>
+
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Dividendo (%):</h4>
+        <div class="field">
+          {{ instrument_work_summary.dividendo_porcentaje | number: "1.2-4" }}
+          %
+        </div>
+      </div>
+
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Fecha operación:</h4>
+        <div class="field">
+          {{ instrument_work_summary.fecha_operacion }}
+        </div>
+      </div>
+
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Fecha liquidación:</h4>
+        <div class="field">
+          {{ instrument_work_summary.fecha_liquidacion }}
+        </div>
+      </div>
+
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Fecha vencimiento:</h4>
+        <div class="field">
+          {{ instrument_work_summary.fecha_vencimiento }}
+        </div>
+      </div>
+    </div>
+
+    <div *ngIf="hasProjections" class="instrument-calcs-summary">
+      <div class="row">
+        <div class="col-12">
+          <span class="badge-warning badge-custom-instrument"
+            >Proyecciones del instrumento</span
+          >
+        </div>
+
+        <div class="cete-table-container">
+          <table mat-table [dataSource]="dataSource2" class="example-table">
+            <!-- Name Column -->
+            <ng-container matColumnDef="posicion">
+              <th mat-header-cell *matHeaderCellDef>#</th>
+              <td mat-cell *matCellDef="let row">
+                {{ row.posicion }}
+              </td>
+              <td mat-footer-cell *matFooterCellDef>TOTAL</td>
+            </ng-container>
+            <!-- Country Column -->
+            <ng-container matColumnDef="plazo">
+              <th mat-header-cell *matHeaderCellDef>Plazo</th>
+              <td mat-cell *matCellDef="let row">
+                {{ row.plazo }}
+              </td>
+              <td mat-footer-cell *matFooterCellDef></td>
+            </ng-container>
+
+            <ng-container matColumnDef="fecha_pago">
+              <th mat-header-cell *matHeaderCellDef>Fecha pago</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.fecha_pago == "" || row.fecha_pago == undefined
+                    ? "-"
+                    : row.fecha_pago
+                }}
+              </td>
+              <td mat-footer-cell *matFooterCellDef></td>
+            </ng-container>
+            <ng-container matColumnDef="ingreso_bruto">
+              <th mat-header-cell *matHeaderCellDef>Ingreso bruto</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.ingreso_bruto == "" || row.ingreso_bruto == undefined
+                    ? "-"
+                    : row.ingreso_bruto
+                }}
+              </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_ingreso_bruto | number: "1.2-4"
+                }}
+              </td>
+            </ng-container>
+            <ng-container matColumnDef="ingreso_neto">
+              <th mat-header-cell *matHeaderCellDef>Ingreso neto</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.ingreso_neto == "" || row.ingreso_neto == undefined
+                    ? "-"
+                    : row.ingreso_neto
+                }}
+              </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_ingreso_neto | number: "1.2-4"
+                }}
+              </td>
+            </ng-container>
+            <ng-container matColumnDef="dividendo_porcentaje">
+              <th mat-header-cell *matHeaderCellDef>Dividendo (%)</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.dividendo_porcentaje == "" ||
+                  row.dividendo_porcentaje == undefined
+                    ? "-"
+                    : row.dividendo_porcentaje
+                }}
+              </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_dividendo_porcentaje
+                    | number: "1.2-4"
+                }}
+              </td>
+            </ng-container>
+            <ng-container matColumnDef="rendimiento_porcentaje">
+              <th mat-header-cell *matHeaderCellDef>Rendimiento (%)</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.rendimiento_porcentaje == "" ||
+                  row.rendimiento_porcentaje == undefined
+                    ? "-"
+                    : row.rendimiento_porcentaje
+                }}
+              </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_rendimiento_porcentaje
+                    | number: "1.2-4"
+                }}
+              </td>
+            </ng-container>
+            <ng-container matColumnDef="rendimiento">
+              <th mat-header-cell *matHeaderCellDef>Rendimiento ($)</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.rendimiento == "" || row.rendimiento == undefined
+                    ? "-"
+                    : row.rendimiento
+                }}
+              </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{ consolidado_proyeccion.total_rendimiento | number: "1.2-4" }}
+              </td>
+            </ng-container>
+
+            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+            <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,407 @@
+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-fondos",
+  templateUrl: "./fondos.component.html"
+})
+export class FINV implements InstrumentComponent {
+  title: string = "Fondos de inversión";
+  @Input() data: any;
+  @Input() summary: boolean;
+  @Input() investmentID: string;
+
+  displayedColumns: string[] = [
+    "posicion",
+    "plazo",
+    "fecha_pago",
+    "ingreso_bruto",
+    "ingreso_neto",
+    "dividendo_porcentaje",
+    "rendimiento_porcentaje",
+    "rendimiento"
+  ];
+
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
+  @ViewChild(MatSort, { static: true }) sort: MatSort;
+
+  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;
+
+  proyecciones: any;
+
+  fondosObject: {};
+  dataSource = new MatTableDataSource(this.proyecciones);
+  dataSource2 = new MatTableDataSource(this.proyecciones);
+  hasProjections: boolean;
+  fecha_vencimiento: any;
+  operation_result: boolean = false;
+  operation_results_work: any = [];
+  instrument_work_summary: any = [];
+  cuota_participacion: any;
+  valor_participacion_porcentaje: any;
+  dias_liquidacion: any;
+  dias_vencimiento: any;
+  valor_nominal: any;
+  valor_transado: any;
+  comision_casa_porcentaje: any;
+  comision_casa: any;
+  comision_bolsa_porcentaje: any;
+  comision_bolsa: any;
+  rendimiento_porcentaje: any;
+  dividendo_porcentaje: any;
+  fecha_operacion: any;
+  fecha_liquidacion: any;
+  consolidado_proyeccion: any;
+  monto_pagar: any;
+
+  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();
+
+    if (
+      this.instrument_work != undefined &&
+      this.instrument_work.proyecciones != ""
+    ) {
+      this.hasProjections = true;
+
+      this.consolidado_proyeccion = this.instrument_work.proyecciones[
+        this.instrument_work.proyecciones.length - 1
+      ];
+      this.operation_results_work = this.instrument_work["resultado_operacion"];
+
+      if (this.instrument_work["instrumento"] != undefined) {
+        this.instrument_work = this.instrument_work["instrumento"];
+      }
+      this.instrument_work_summary = this.instrument_work;
+
+      this.dataSource2.data = this.instrument_work.proyecciones.slice(0, -1);
+      this.dataSource2.paginator = this.paginator;
+      this.dataSource2.sort = this.sort;
+    } else {
+      this.hasProjections = false;
+    }
+
+    if (
+      this.operation_results_work != undefined &&
+      this.operation_results_work != ""
+    ) {
+      this.operation_result = true;
+    }
+
+    this.investmentProposalForm = this.formBuilder.group({
+      cuota_participacion: [
+        this.instrument_exists ? "" : this.instrument_work.cuota_participacion,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+      valor_participacion_porcentaje: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.valor_participacion_porcentaje,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      comision_casa_porcentaje: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.comision_casa_porcentaje,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      comision_bolsa_porcentaje: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.comision_bolsa_porcentaje,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      dividendo_porcentaje: [
+        this.instrument_exists ? "" : this.instrument_work.dividendo_porcentaje,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      rendimiento_porcentaje: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.rendimiento_porcentaje,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      dias_liquidacion: [
+        this.instrument_exists ? "" : this.instrument_work.dias_liquidacion,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+      dias_vencimiento: [
+        this.instrument_exists ? "" : this.instrument_work.dias_vencimiento,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      fecha_operacion: [
+        this.instrument_exists
+          ? ""
+          : {
+              isRange: false,
+              singleDate: {
+                jsDate: parse(
+                  this.instrument_work.fecha_operacion,
+                  "dd/MM/yyyy",
+                  new Date()
+                ),
+                formatted: this.instrument_work.fecha_operacion
+              }
+            },
+        Validators.required
+      ]
+    });
+  }
+
+  get f() {
+    return this.investmentProposalForm.controls;
+  }
+
+  save(form: any): boolean {
+    if (!form.valid) {
+      return false;
+    }
+
+    this.formDataService.setWork(this.fondosObject);
+    return true;
+  }
+
+  getCalculations(form: any, saveForm: boolean) {
+    this.submitted = true;
+
+    if (!form.valid) {
+      return false;
+    }
+    Swal.fire({
+      allowOutsideClick: false,
+      icon: "info",
+      text: "Espere por favor..."
+    });
+    Swal.showLoading();
+    this.instrumentCalcService
+      .fondosCalc(
+        "FINV", // Codigo del instrumento
+        {
+          id_tipo_base: +this.general.base_anual,
+          id_formato_ingreso: +this.general.formato_ingreso,
+          id_periodicidad: +this.general.periodicidad
+        },
+        {
+          cuota_participacion: +this.f.cuota_participacion.value,
+          valor_participacion_porcentaje: +this.f.valor_participacion_porcentaje
+            .value,
+          comision_bolsa_porcentaje: +this.f.comision_bolsa_porcentaje.value,
+          comision_casa_porcentaje: +this.f.comision_casa_porcentaje.value,
+          dividendo_porcentaje: +this.f.dividendo_porcentaje.value,
+          rendimiento_porcentaje: +this.f.rendimiento_porcentaje.value,
+          dias_liquidacion: this.f.dias_liquidacion.value,
+          dias_vencimiento: this.f.dias_vencimiento.value,
+          fecha_operacion: this.f.fecha_operacion.value.singleDate.formatted
+        }
+      )
+      .subscribe(
+        ans => {
+          this.cuota_participacion =
+            ans["result"]["instrumento"]["cuota_participacion"];
+          this.valor_participacion_porcentaje =
+            ans["result"]["instrumento"]["valor_participacion_porcentaje"];
+          this.dias_liquidacion =
+            ans["result"]["instrumento"]["dias_liquidacion"];
+          this.dias_vencimiento =
+            ans["result"]["instrumento"]["dias_vencimiento"];
+          this.valor_nominal = ans["result"]["instrumento"]["valor_nominal"];
+          this.valor_transado = ans["result"]["instrumento"]["valor_transado"];
+          this.monto_pagar = ans["result"]["instrumento"]["monto_pagar"];
+          this.comision_casa_porcentaje =
+            ans["result"]["instrumento"]["comision_casa_porcentaje"];
+          this.comision_casa = ans["result"]["instrumento"]["comision_casa"];
+          this.comision_bolsa_porcentaje =
+            ans["result"]["instrumento"]["comision_bolsa_porcentaje"];
+          this.comision_bolsa = ans["result"]["instrumento"]["comision_bolsa"];
+          this.rendimiento_porcentaje =
+            ans["result"]["instrumento"]["rendimiento_porcentaje"];
+          this.dividendo_porcentaje =
+            ans["result"]["instrumento"]["dividendo_porcentaje"];
+          this.fecha_operacion =
+            ans["result"]["instrumento"]["fecha_operacion"];
+          this.fecha_liquidacion =
+            ans["result"]["instrumento"]["fecha_liquidacion"];
+          this.fecha_vencimiento =
+            ans["result"]["instrumento"]["fecha_vencimiento"];
+
+          // Proyecciones
+          this.proyecciones = ans["result"]["proyecciones"];
+          if (this.proyecciones != undefined && this.proyecciones.length > 0) {
+            this.hasProjections = true;
+            let proyecciones_temp = this.proyecciones;
+            this.consolidado_proyeccion =
+              proyecciones_temp[proyecciones_temp.length - 1];
+            this.proyecciones = ans["result"]["proyecciones"];
+          }
+
+          this.operation_result = true;
+          this.dataSource.data = this.proyecciones;
+          this.dataSource2.data = this.proyecciones;
+          this.dataSource.paginator = this.paginator;
+          this.dataSource.sort = this.sort;
+
+          this.fondosObject = {
+            cuota_participacion: this.investmentProposalForm.value
+              .cuota_participacion,
+            valor_participacion_porcentaje: this.investmentProposalForm.value
+              .valor_participacion_porcentaje,
+            comision_bolsa_porcentaje: this.investmentProposalForm.value
+              .comision_bolsa_porcentaje,
+            comision_casa_porcentaje: this.investmentProposalForm.value
+              .comision_casa_porcentaje,
+            dividendo_porcentaje: this.investmentProposalForm.value
+              .dividendo_porcentaje,
+            rendimiento_porcentaje: this.investmentProposalForm.value
+              .rendimiento_porcentaje,
+            dias_liquidacion: this.investmentProposalForm.value
+              .dias_liquidacion,
+            dias_vencimiento: this.investmentProposalForm.value
+              .dias_vencimiento,
+
+            fecha_operacion: this.f.fecha_operacion.value.singleDate.formatted,
+            valor_nominal: this.valor_nominal,
+            valor_transado: this.valor_transado,
+            monto_pagar: this.monto_pagar,
+            comision_casa: this.comision_casa,
+            comision_bolsa: this.comision_bolsa,
+            fecha_liquidacion: this.fecha_liquidacion,
+            fecha_vencimiento: this.fecha_vencimiento,
+
+            // Proyecciones
+            proyecciones: this.proyecciones
+          };
+
+          this.formDataService.setWork(this.fondosObject);
+          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/futuros/futuros.component.html

@@ -0,0 +1,1149 @@
+<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">
+              $USD {{ ganancia_perdida | number: "1.2-4" }}
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Rendimiento:</h4>
+            <div class="field">$USD {{ 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">
+            $USD
+            {{ instrument_work_summary.ganancia_perdida | number: "1.2-4" }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Rendimiento:</h4>
+          <div class="field">
+            $USD {{ 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,751 @@
+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);
+
+    if (
+      this.instrument_work != undefined &&
+      this.instrument_work.completo == undefined
+    ) {
+      if (
+        this.instrument_work.valor_pagado > 0 &&
+        this.instrument_work.valor_recibido > 0
+      ) {
+        this.ejecucion = 1;
+      } else {
+        this.ejecucion = +this.instrument_work_summary.completo;
+      }
+    }
+
+    this.investmentProposalForm = this.formBuilder.group({
+      operacion: [this.instrument_exists ? "" : this.instrument_work.corto],
+      ejecucion: [this.instrument_exists ? "" : this.ejecucion],
+      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;
+      if (this.instrument_work_summary.completo == undefined) {
+        if (
+          this.instrument_work_summary.valor_pagado > 0 &&
+          this.instrument_work_summary.valor_recibido > 0
+        ) {
+          this.ejecucion = 1;
+        }
+      } else {
+        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
+          if (this.tipoOperacion == 0 || this.tipoEjecucion == 1) {
+            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
+          if (this.tipoOperacion == 1 || this.tipoEjecucion == 1) {
+            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,
+
+            fecha_inicio_vigencia: this.fecha_inicio_vigencia
+          };
+
+          if (this.tipoOperacion == 0 || this.tipoEjecucion == 1) {
+            (this.futurosObject[
+              "precio_unitario_compra"
+            ] = this.investmentProposalForm.value.precio_unitario_compra),
+              (this.futurosObject[
+                "comision_broker_compra"
+              ] = this.investmentProposalForm.value.comision_broker_compra),
+              (this.futurosObject[
+                "cantidad_contratos_compra"
+              ] = this.investmentProposalForm.value.cantidad_contratos_compra),
+              (this.futurosObject[
+                "unidades_contratos_compra"
+              ] = this.investmentProposalForm.value.unidades_contratos_compra),
+              (this.futurosObject["fecha_operacion_compra"] =
+                this.investmentProposalForm.value.fecha_operacion_compra == ""
+                  ? ""
+                  : this.investmentProposalForm.value.fecha_operacion_compra
+                      .singleDate.formatted),
+              (this.futurosObject["fecha_liquidacion_compra"] =
+                this.investmentProposalForm.value.fecha_liquidacion_compra == ""
+                  ? ""
+                  : this.investmentProposalForm.value.fecha_liquidacion_compra
+                      .singleDate.formatted),
+              (this.futurosObject[
+                "valor_transado_compra"
+              ] = this.valor_transado_compra),
+              (this.futurosObject["valor_pagado"] = this.valor_pagado),
+              (this.futurosObject["ganancia_perdida"] = this.ganancia_perdida),
+              (this.futurosObject["rendimiento"] = this.rendimiento);
+          }
+
+          if (this.tipoOperacion == 1 || this.tipoEjecucion == 1) {
+            (this.futurosObject[
+              "precio_unitario_venta"
+            ] = this.investmentProposalForm.value.precio_unitario_venta),
+              (this.futurosObject[
+                "comision_broker_venta"
+              ] = this.investmentProposalForm.value.comision_broker_venta),
+              (this.futurosObject[
+                "cantidad_contratos_venta"
+              ] = this.investmentProposalForm.value.cantidad_contratos_venta),
+              (this.futurosObject[
+                "unidades_contratos_venta"
+              ] = this.investmentProposalForm.value.unidades_contratos_venta),
+              (this.futurosObject["fecha_operacion_venta"] =
+                this.investmentProposalForm.value.fecha_operacion_venta == ""
+                  ? ""
+                  : this.investmentProposalForm.value.fecha_operacion_venta
+                      .singleDate.formatted),
+              (this.futurosObject["fecha_liquidacion_venta"] =
+                this.investmentProposalForm.value.fecha_liquidacion_venta == ""
+                  ? ""
+                  : this.investmentProposalForm.value.fecha_liquidacion_venta
+                      .singleDate.formatted),
+              (this.futurosObject[
+                "valor_transado_venta"
+              ] = this.valor_transado_venta),
+              (this.futurosObject["valor_recibido"] = this.valor_recibido);
+          }
+
+          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;
+          }
+
+          if (this.tipoEjecucion == 1) {
+            this.futurosObject["fecha_cancelado"] = this.datepipe.transform(
+              new Date(),
+              "dd/MM/yyyy"
+            ); //.toISOString().slice(0, 10);
+          }
+
+          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">$USD {{ ganancia_perdida | number: "1.2-4" }}</div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Rendimiento:</h4>
+            <div class="field">$USD {{ 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">
+            $USD {{ instrument_work_summary.ganancia_perdida | number: "1.2-4" }}
+          </div>
+        </div>
+
+        <div class="col-sm-4">
+          <h4>Rendimiento:</h4>
+          <div class="field">
+            $USD {{ 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,751 @@
+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);
+
+    if (
+      this.instrument_work != undefined &&
+      this.instrument_work.completo == undefined
+    ) {
+      if (
+        this.instrument_work.valor_pagado > 0 &&
+        this.instrument_work.valor_recibido > 0
+      ) {
+        this.ejecucion = 1;
+      } else {
+        this.ejecucion = +this.instrument_work_summary.completo;
+      }
+    }
+
+    this.investmentProposalForm = this.formBuilder.group({
+      operacion: [this.instrument_exists ? "" : this.instrument_work.corto],
+      ejecucion: [this.instrument_exists ? "" : this.ejecucion],
+      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;
+      if (this.instrument_work_summary.completo == undefined) {
+        if (
+          this.instrument_work_summary.valor_pagado > 0 &&
+          this.instrument_work_summary.valor_recibido > 0
+        ) {
+          this.ejecucion = 1;
+        }
+      } else {
+        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
+          if (this.tipoOperacion == 0 || this.tipoEjecucion == 1) {
+            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
+          if (this.tipoOperacion == 1 || this.tipoEjecucion == 1) {
+            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,
+
+            fecha_inicio_vigencia: this.fecha_inicio_vigencia
+          };
+
+          if (this.tipoOperacion == 0 || this.tipoEjecucion == 1) {
+            (this.opcionesObject[
+              "precio_unitario_compra"
+            ] = this.investmentProposalForm.value.precio_unitario_compra),
+              (this.opcionesObject[
+                "comision_broker_compra"
+              ] = this.investmentProposalForm.value.comision_broker_compra),
+              (this.opcionesObject[
+                "cantidad_contratos_compra"
+              ] = this.investmentProposalForm.value.cantidad_contratos_compra),
+              (this.opcionesObject[
+                "unidades_contratos_compra"
+              ] = this.investmentProposalForm.value.unidades_contratos_compra),
+              (this.opcionesObject["fecha_operacion_compra"] =
+                this.investmentProposalForm.value.fecha_operacion_compra == ""
+                  ? ""
+                  : this.investmentProposalForm.value.fecha_operacion_compra
+                      .singleDate.formatted),
+              (this.opcionesObject["fecha_liquidacion_compra"] =
+                this.investmentProposalForm.value.fecha_liquidacion_compra == ""
+                  ? ""
+                  : this.investmentProposalForm.value.fecha_liquidacion_compra
+                      .singleDate.formatted),
+              (this.opcionesObject[
+                "valor_transado_compra"
+              ] = this.valor_transado_compra),
+              (this.opcionesObject["valor_pagado"] = this.valor_pagado),
+              (this.opcionesObject["ganancia_perdida"] = this.ganancia_perdida),
+              (this.opcionesObject["rendimiento"] = this.rendimiento);
+          }
+
+          if (this.tipoOperacion == 1 || this.tipoEjecucion == 1) {
+            (this.opcionesObject[
+              "precio_unitario_venta"
+            ] = this.investmentProposalForm.value.precio_unitario_venta),
+              (this.opcionesObject[
+                "comision_broker_venta"
+              ] = this.investmentProposalForm.value.comision_broker_venta),
+              (this.opcionesObject[
+                "cantidad_contratos_venta"
+              ] = this.investmentProposalForm.value.cantidad_contratos_venta),
+              (this.opcionesObject[
+                "unidades_contratos_venta"
+              ] = this.investmentProposalForm.value.unidades_contratos_venta),
+              (this.opcionesObject["fecha_operacion_venta"] =
+                this.investmentProposalForm.value.fecha_operacion_venta == ""
+                  ? ""
+                  : this.investmentProposalForm.value.fecha_operacion_venta
+                      .singleDate.formatted),
+              (this.opcionesObject["fecha_liquidacion_venta"] =
+                this.investmentProposalForm.value.fecha_liquidacion_venta == ""
+                  ? ""
+                  : this.investmentProposalForm.value.fecha_liquidacion_venta
+                      .singleDate.formatted),
+              (this.opcionesObject[
+                "valor_transado_venta"
+              ] = this.valor_transado_venta),
+              (this.opcionesObject["valor_recibido"] = this.valor_recibido);
+          }
+
+          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;
+          }
+
+          if (this.tipoEjecucion == 1) {
+            this.opcionesObject["fecha_cancelado"] = this.datepipe.transform(
+              new Date(),
+              "dd/MM/yyyy"
+            ); //.toISOString().slice(0, 10);
+          }
+
+          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/instruments/pbur/pbur.component.html

@@ -9,14 +9,26 @@
     <div class="row">
       <div class="col-lg-6 col-sm-12 pr-xl-3">
         <div class="form-group form-check">
-          <input
-            type="checkbox"
-            class="form-check-input"
-            id="valor_par"
-            formControlName="valor_par"
-            [checked]="f.valor_par.value"
-          />
-          <label class="form-check-label" for="valor_par">Valor par</label>
+          <ng-container *ngIf="investmentID == undefined; else elseTemplate">
+            <input
+              type="checkbox"
+              class="form-check-input"
+              id="valor_par"
+              formControlName="valor_par"
+              [checked]="f.valor_par.value"
+            />
+            <label class="form-check-label" for="valor_par">Valor par</label>
+          </ng-container>
+          <ng-template #elseTemplate>
+            <input
+              type="hidden"
+              formControlName="valor_par"
+              [value]="f.valor_par.value"
+            />
+            <label
+              >Valor par: {{ f.valor_par.value == true ? "Si" : "No" }}</label
+            >
+          </ng-template>
         </div>
       </div>
 
@@ -407,12 +419,14 @@
               <td mat-cell *matCellDef="let row">
                 {{ row.posicion }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>TOTAL</td>
             </ng-container>
             <ng-container matColumnDef="plazo">
               <th mat-header-cell *matHeaderCellDef>Plazo</th>
               <td mat-cell *matCellDef="let row">
                 {{ row.plazo }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
 
             <ng-container matColumnDef="fecha_pago">
@@ -424,6 +438,7 @@
                     : row.fecha_pago
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
 
             <ng-container matColumnDef="ingreso_bruto">
@@ -435,6 +450,11 @@
                     : (row.ingreso_bruto | number: "1.2-4")
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_ingreso_bruto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="ingreso_neto">
               <th mat-header-cell *matHeaderCellDef>Ingreso neto</th>
@@ -445,40 +465,68 @@
                     : (row.ingreso_neto | number: "1.2-4")
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_ingreso_neto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="costo_cedeval">
               <th mat-header-cell *matHeaderCellDef>Costo CEDEVAL</th>
               <td mat-cell *matCellDef="let row">
                 {{ row.costo_cedeval | number: "1.2-4" }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_costo_cedeval | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="renta">
               <th mat-header-cell *matHeaderCellDef>Renta</th>
               <td mat-cell *matCellDef="let row">
                 {{ row.renta | number: "1.2-4" }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{ consolidado_proyeccion.total_renta | number: "1.2-4" }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="costo_transferencia">
               <th mat-header-cell *matHeaderCellDef>Costo transferencia</th>
               <td mat-cell *matCellDef="let row">
                 {{ row.costo_transferencia | number: "1.2-4" }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_costo_transferencia
+                    | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="costo_banco">
               <th mat-header-cell *matHeaderCellDef>Costo banco</th>
               <td mat-cell *matCellDef="let row">
                 {{ row.costo_banco | number: "1.2-4" }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{ consolidado_proyeccion.total_costo_banco | number: "1.2-4" }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="otros_costos">
               <th mat-header-cell *matHeaderCellDef>Otros costos</th>
               <td mat-cell *matCellDef="let row">
                 {{ row.otros_costos | number: "1.2-4" }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_otros_costos | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
             <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+            <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
           </table>
 
           <mat-paginator
@@ -658,12 +706,14 @@
               <td mat-cell *matCellDef="let row">
                 {{ row.posicion }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>TOTAL</td>
             </ng-container>
             <ng-container matColumnDef="plazo">
               <th mat-header-cell *matHeaderCellDef>Plazo</th>
               <td mat-cell *matCellDef="let row">
                 {{ row.plazo }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
 
             <ng-container matColumnDef="fecha_pago">
@@ -675,6 +725,7 @@
                     : row.fecha_pago
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
 
             <ng-container matColumnDef="ingreso_bruto">
@@ -686,6 +737,11 @@
                     : (row.ingreso_bruto | number: "1.2-4")
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_ingreso_bruto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="ingreso_neto">
               <th mat-header-cell *matHeaderCellDef>Ingreso neto</th>
@@ -696,40 +752,68 @@
                     : (row.ingreso_neto | number: "1.2-4")
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_ingreso_neto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="costo_cedeval">
               <th mat-header-cell *matHeaderCellDef>Costo CEDEVAL</th>
               <td mat-cell *matCellDef="let row">
                 {{ row.costo_cedeval | number: "1.2-4" }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_costo_cedeval | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="renta">
               <th mat-header-cell *matHeaderCellDef>Renta</th>
               <td mat-cell *matCellDef="let row">
                 {{ row.renta | number: "1.2-4" }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{ consolidado_proyeccion.total_renta | number: "1.2-4" }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="costo_transferencia">
               <th mat-header-cell *matHeaderCellDef>Costo transferencia</th>
               <td mat-cell *matCellDef="let row">
                 {{ row.costo_transferencia | number: "1.2-4" }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_costo_transferencia
+                    | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="costo_banco">
               <th mat-header-cell *matHeaderCellDef>Costo banco</th>
               <td mat-cell *matCellDef="let row">
                 {{ row.costo_banco | number: "1.2-4" }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{ consolidado_proyeccion.total_costo_banco | number: "1.2-4" }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="otros_costos">
               <th mat-header-cell *matHeaderCellDef>Otros costos</th>
               <td mat-cell *matCellDef="let row">
                 {{ row.otros_costos | number: "1.2-4" }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_otros_costos | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
             <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+            <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
           </table>
 
           <mat-paginator

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

@@ -92,6 +92,16 @@ export class PBUR implements InstrumentComponent {
 
   dataSource = new MatTableDataSource(this.proyecciones);
   dataSource2 = new MatTableDataSource(this.proyecciones);
+  consolidado_proyeccion = {
+    total_ingreso_bruto: 0,
+    total_ingreso_neto: 0,
+    total_costo_cedeval: 0,
+    total_renta: 0,
+    total_costo_transferencia: 0,
+    total_costo_banco: 0,
+    total_otros_costos: 0
+  };
+
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
   @ViewChild(MatSort, { static: true }) sort: MatSort;
   fecha_vencimiento: any;
@@ -113,9 +123,12 @@ export class PBUR implements InstrumentComponent {
       this.instrument_work.proyecciones != undefined
     ) {
       this.hasProjections = true;
-      this.dataSource2.data = this.instrument_work.proyecciones;
+      this.dataSource2.data = this.instrument_work.proyecciones.slice(0, -1);
       this.dataSource2.paginator = this.paginator;
       this.dataSource2.sort = this.sort;
+      this.consolidado_proyeccion = this.instrument_work.proyecciones[
+        this.instrument_work.proyecciones.length - 1
+      ];
     } else {
       this.hasProjections = false;
     }
@@ -298,8 +311,13 @@ export class PBUR implements InstrumentComponent {
           this.comision_casa = ans["result"]["comision_casa"];
           this.interes_acumulado = ans["result"]["interes_acumulado"];
           this.fecha_inicio_vigencia = ans["result"]["fecha_inicio_vigencia"];
-          this.proyecciones = ans["result"]["proyecciones"];
           this.fecha_vencimiento = ans["result"]["fecha_vencimiento"];
+          this.proyecciones = ans["result"]["proyecciones"];
+
+          if (this.proyecciones != undefined && this.proyecciones.length > 0) {
+            this.consolidado_proyeccion = this.proyecciones.slice(0, -1);
+            this.proyecciones = ans["result"]["proyecciones"];
+          }
 
           if (this.f.valor_par.value == true) {
             this.hasProjections = true;

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

@@ -1026,7 +1026,7 @@
     </div>
     <br />
     <!-- Tabla de proyecciones del instrumento-->
-    <div class="instrument-calcs">
+    <div *ngIf="hasProjections" class="instrument-calcs">
       <div class="row">
         <div class="col-12">
           <span class="badge badge-success badge-custom"
@@ -1042,6 +1042,7 @@
               <td mat-cell *matCellDef="let row">
                 {{ row.posicion }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>TOTAL</td>
             </ng-container>
             <!-- Country Column -->
             <ng-container matColumnDef="plazo">
@@ -1049,6 +1050,7 @@
               <td mat-cell *matCellDef="let row">
                 {{ row.plazo }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
 
             <ng-container matColumnDef="fecha_pago">
@@ -1060,6 +1062,7 @@
                     : row.fecha_pago
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
 
             <ng-container matColumnDef="cuota">
@@ -1071,6 +1074,11 @@
                     : (row.cuota | number: "1.2-4")
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_cuota | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="amortizacion_porcentaje">
               <th mat-header-cell *matHeaderCellDef>Porcentaje amortización</th>
@@ -1082,6 +1090,11 @@
                     : (row.amortizacion_porcentaje | number: "1.2-4")
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_amortizacion_porcentaje | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="amortizacion_capital">
               <th mat-header-cell *matHeaderCellDef>Amortización capital</th>
@@ -1093,6 +1106,11 @@
                     : (row.amortizacion_capital | number: "1.2-4")
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_amortizacion_capital | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="ingreso_bruto">
               <th mat-header-cell *matHeaderCellDef>Ingreso bruto</th>
@@ -1103,6 +1121,11 @@
                     : (row.ingreso_bruto | number: "1.2-4")
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_ingreso_bruto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="impuesto">
               <th mat-header-cell *matHeaderCellDef>Impuesto</th>
@@ -1113,6 +1136,11 @@
                     : (row.impuesto | number: "1.2-4")
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_impuesto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="ingreso_neto">
               <th mat-header-cell *matHeaderCellDef>Ingreso neto</th>
@@ -1123,6 +1151,11 @@
                     : (row.ingreso_neto | number: "1.2-4")
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_ingreso_neto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
 
             <ng-container matColumnDef="saldo">
@@ -1134,10 +1167,16 @@
                     : (row.saldo | number: "1.2-4")
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_saldo | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-            <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>            
+            <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
           </table>
 
           <mat-paginator
@@ -1627,6 +1666,7 @@
               <td mat-cell *matCellDef="let row">
                 {{ row.posicion }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>TOTAL</td>
             </ng-container>
             <!-- Country Column -->
             <ng-container matColumnDef="plazo">
@@ -1634,6 +1674,7 @@
               <td mat-cell *matCellDef="let row">
                 {{ row.plazo }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
 
             <ng-container matColumnDef="fecha_pago">
@@ -1645,6 +1686,7 @@
                     : row.fecha_pago
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
 
             <ng-container matColumnDef="cuota">
@@ -1656,6 +1698,11 @@
                     : (row.cuota | number: "1.2-4")
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_cuota | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="amortizacion_porcentaje">
               <th mat-header-cell *matHeaderCellDef>Porcentaje amortización</th>
@@ -1667,6 +1714,11 @@
                     : (row.amortizacion_porcentaje | number: "1.2-4")
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_amortizacion_porcentaje | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="amortizacion_capital">
               <th mat-header-cell *matHeaderCellDef>Amortización capital</th>
@@ -1678,6 +1730,11 @@
                     : (row.amortizacion_capital | number: "1.2-4")
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_amortizacion_capital | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="ingreso_bruto">
               <th mat-header-cell *matHeaderCellDef>Ingreso bruto</th>
@@ -1688,6 +1745,11 @@
                     : (row.ingreso_bruto | number: "1.2-4")
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_ingreso_bruto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="impuesto">
               <th mat-header-cell *matHeaderCellDef>Impuesto</th>
@@ -1698,6 +1760,11 @@
                     : (row.impuesto | number: "1.2-4")
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_impuesto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="ingreso_neto">
               <th mat-header-cell *matHeaderCellDef>Ingreso neto</th>
@@ -1708,6 +1775,11 @@
                     : (row.ingreso_neto | number: "1.2-4")
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_ingreso_neto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
 
             <ng-container matColumnDef="saldo">
@@ -1719,10 +1791,16 @@
                     : (row.saldo | number: "1.2-4")
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_saldo | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-            <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>            
+            <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
           </table>
         </div>
       </div>

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

@@ -136,6 +136,7 @@ export class TIT implements InstrumentComponent {
   ytm_vencimiento_porcentaje_compra: any;
   ytm_vencimiento_porcentaje_venta: any;
   comision_bolsa_venta: any;
+  consolidado_proyeccion: any;
 
   constructor(
     private formBuilder: FormBuilder,
@@ -155,6 +156,9 @@ export class TIT implements InstrumentComponent {
       this.instrument_work.proyecciones != ""
     ) {
       this.hasProjections = true;
+      this.consolidado_proyeccion = this.instrument_work.proyecciones[
+        this.instrument_work.proyecciones.length - 1
+      ];
       this.operation_results_work = this.instrument_work["resultado_operacion"];
 
       if (this.instrument_work["instrumento"] != undefined) {
@@ -162,12 +166,13 @@ export class TIT implements InstrumentComponent {
       }
       this.instrument_work_summary = this.instrument_work;
 
-      this.dataSource2.data = this.instrument_work.proyecciones;
+      this.dataSource2.data = this.instrument_work.proyecciones.slice(0, -1);
       this.dataSource2.paginator = this.paginator;
       this.dataSource2.sort = this.sort;
     } else {
       this.hasProjections = false;
     }
+
     if (!this.instrument_exists) {
       this.amortizaciones = this.instrument_work.amortizacion_porcentajes;
     }
@@ -179,6 +184,14 @@ export class TIT implements InstrumentComponent {
     }
 
     this.investmentProposalForm = this.formBuilder.group({
+      costo_cedeval: [
+        this.instrument_exists ? "" : this.instrument_work.costo_cedeval,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
       costo_transferencia: [
         this.instrument_exists ? "" : this.instrument_work.costo_transferencia,
         [
@@ -243,58 +256,34 @@ export class TIT implements InstrumentComponent {
       ],
 
       precio_venta: [
-        this.instrument_exists ? "" : this.instrument_work.precio_venta,
-        [
-          Validators.required,
-          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
-        ]
+        this.instrument_exists ? "" : this.instrument_work.precio_venta
       ],
 
       valor_nominal_venta: [
-        this.instrument_exists ? "" : this.instrument_work.valor_nominal_venta,
-        [
-          Validators.required,
-          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
-        ]
+        this.instrument_exists ? "" : this.instrument_work.valor_nominal_venta
       ],
 
       precio_vencimiento_venta: [
         this.instrument_exists
           ? ""
-          : this.instrument_work.precio_vencimiento_venta,
-        [
-          Validators.required,
-          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
-        ]
+          : this.instrument_work.precio_vencimiento_venta
       ],
 
       cupon_porcentaje_venta: [
         this.instrument_exists
           ? ""
-          : this.instrument_work.cupon_porcentaje_venta,
-        [
-          Validators.required,
-          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
-        ]
+          : this.instrument_work.cupon_porcentaje_venta
       ],
 
       comision_casa_porcentaje_venta: [
         this.instrument_exists
           ? ""
-          : this.instrument_work.comision_casa_porcentaje_venta,
-        [
-          Validators.required,
-          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
-        ]
+          : this.instrument_work.comision_casa_porcentaje_venta
       ],
       comision_bolsa_porcentaje_venta: [
         this.instrument_exists
           ? ""
-          : this.instrument_work.comision_bolsa_porcentaje_venta,
-        [
-          Validators.required,
-          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
-        ]
+          : this.instrument_work.comision_bolsa_porcentaje_venta
       ],
 
       fecha_ultima_cupon_compra: [
@@ -358,8 +347,7 @@ export class TIT implements InstrumentComponent {
                 ),
                 formatted: this.instrument_work.fecha_ultima_cupon_venta
               }
-            },
-        Validators.required
+            }
       ],
       fecha_liquidacion_venta: [
         this.instrument_exists
@@ -374,8 +362,7 @@ export class TIT implements InstrumentComponent {
                 ),
                 formatted: this.instrument_work.fecha_liquidacion_venta
               }
-            },
-        Validators.required
+            }
       ],
       fecha_vencimiento_venta: [
         this.instrument_exists
@@ -390,8 +377,7 @@ export class TIT implements InstrumentComponent {
                 ),
                 formatted: this.instrument_work.fecha_vencimiento_venta
               }
-            },
-        Validators.required
+            }
       ],
       fecha_emision: [
         this.instrument_exists
@@ -621,9 +607,15 @@ export class TIT implements InstrumentComponent {
 
           // Proyecciones
           this.proyecciones = ans["result"]["proyecciones"];
+          if (this.proyecciones != undefined && this.proyecciones.length > 0) {
+            let proyecciones_temp = this.proyecciones;
+            this.consolidado_proyeccion =
+              proyecciones_temp[proyecciones_temp.length - 1];
+            this.proyecciones = ans["result"]["proyecciones"];
+          }
 
-          this.dataSource.data = this.proyecciones;
-          this.dataSource2.data = this.proyecciones;
+          this.dataSource.data = this.proyecciones.slice(0, -1);
+          this.dataSource2.data = this.proyecciones.slice(0, -1);
 
           this.dataSource.paginator = this.paginator;
           this.dataSource.sort = this.sort;

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

@@ -9,14 +9,26 @@
     <div class="row">
       <div class="col-lg-6 col-sm-12 pr-xl-3">
         <div class="form-group form-check">
-          <input
-            type="checkbox"
-            class="form-check-input"
-            id="valor_par"
-            formControlName="valor_par"
-            [checked]="f.valor_par.value"
-          />
-          <label class="form-check-label" for="valor_par">Valor par</label>
+          <ng-container *ngIf="investmentID == undefined; else elseTemplate">
+            <input
+              type="checkbox"
+              class="form-check-input"
+              id="valor_par"
+              formControlName="valor_par"
+              [checked]="f.valor_par.value"
+            />
+            <label class="form-check-label" for="valor_par">Valor par</label>
+          </ng-container>
+          <ng-template #elseTemplate>
+            <input
+              type="hidden"
+              formControlName="valor_par"
+              [value]="f.valor_par.value"
+            />
+            <label
+              >Valor par: {{ f.valor_par.value == true ? "Si" : "No" }}</label
+            >
+          </ng-template>
         </div>
       </div>
 
@@ -377,9 +389,7 @@
         </div>
         <div class="col-sm-6">
           <h4>Precio porcentaje:</h4>
-          <div class="field">
-            {{ precio_porcentaje | number: "1.2-4" }}
-          </div>
+          <div class="field">{{ precio_porcentaje | number: "1.2-4" }} %</div>
         </div>
         <div class="col-sm-6">
           <h4>Rendimiento neto:</h4>
@@ -422,12 +432,14 @@
               <td mat-cell *matCellDef="let row">
                 {{ row.posicion }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>TOTAL</td>
             </ng-container>
             <ng-container matColumnDef="plazo">
               <th mat-header-cell *matHeaderCellDef>Plazo</th>
               <td mat-cell *matCellDef="let row">
                 {{ row.plazo }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
 
             <ng-container matColumnDef="fecha_pago">
@@ -439,8 +451,8 @@
                     : row.fecha_pago
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
-
             <ng-container matColumnDef="ingreso_bruto">
               <th mat-header-cell *matHeaderCellDef>Ingreso bruto</th>
               <td mat-cell *matCellDef="let row">
@@ -450,6 +462,11 @@
                     : (row.ingreso_bruto | number: "1.2-4")
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_ingreso_bruto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="ingreso_neto">
               <th mat-header-cell *matHeaderCellDef>Ingreso neto</th>
@@ -460,44 +477,73 @@
                     : (row.ingreso_neto | number: "1.2-4")
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_ingreso_neto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="costo_cedeval">
               <th mat-header-cell *matHeaderCellDef>Costo CEDEVAL</th>
               <td mat-cell *matCellDef="let row">
                 {{ row.costo_cedeval | number: "1.2-4" }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_costo_cedeval | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="renta">
               <th mat-header-cell *matHeaderCellDef>Renta</th>
               <td mat-cell *matCellDef="let row">
                 {{ row.renta | number: "1.2-4" }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{ consolidado_proyeccion.total_renta | number: "1.2-4" }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="costo_transferencia">
               <th mat-header-cell *matHeaderCellDef>Costo transferencia</th>
               <td mat-cell *matCellDef="let row">
                 {{ row.costo_transferencia | number: "1.2-4" }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_costo_transferencia
+                    | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="costo_banco">
               <th mat-header-cell *matHeaderCellDef>Costo banco</th>
               <td mat-cell *matCellDef="let row">
                 {{ row.costo_banco | number: "1.2-4" }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{ consolidado_proyeccion.total_costo_banco | number: "1.2-4" }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="otros_costos">
               <th mat-header-cell *matHeaderCellDef>Otros costos</th>
               <td mat-cell *matCellDef="let row">
                 {{ row.otros_costos | number: "1.2-4" }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_otros_costos | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
             <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+            <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
           </table>
 
           <mat-paginator
-            [pageSizeOptions]="[10, 15, 25]"
+            [pageSizeOptions]="[5, 10, 25, dataSource2.data.length]"
+            [length]="dataSource2.data.length"
             [pageIndex]="0"
             [pageSize]="10"
           ></mat-paginator>
@@ -672,12 +718,14 @@
               <td mat-cell *matCellDef="let row">
                 {{ row.posicion }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>TOTAL</td>
             </ng-container>
             <ng-container matColumnDef="plazo">
               <th mat-header-cell *matHeaderCellDef>Plazo</th>
               <td mat-cell *matCellDef="let row">
                 {{ row.plazo }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
 
             <ng-container matColumnDef="fecha_pago">
@@ -689,8 +737,8 @@
                     : row.fecha_pago
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef></td>
             </ng-container>
-
             <ng-container matColumnDef="ingreso_bruto">
               <th mat-header-cell *matHeaderCellDef>Ingreso bruto</th>
               <td mat-cell *matCellDef="let row">
@@ -700,6 +748,11 @@
                     : (row.ingreso_bruto | number: "1.2-4")
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_ingreso_bruto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="ingreso_neto">
               <th mat-header-cell *matHeaderCellDef>Ingreso neto</th>
@@ -710,40 +763,68 @@
                     : (row.ingreso_neto | number: "1.2-4")
                 }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_ingreso_neto | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="costo_cedeval">
               <th mat-header-cell *matHeaderCellDef>Costo CEDEVAL</th>
               <td mat-cell *matCellDef="let row">
                 {{ row.costo_cedeval | number: "1.2-4" }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_costo_cedeval | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="renta">
               <th mat-header-cell *matHeaderCellDef>Renta</th>
               <td mat-cell *matCellDef="let row">
                 {{ row.renta | number: "1.2-4" }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{ consolidado_proyeccion.total_renta | number: "1.2-4" }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="costo_transferencia">
               <th mat-header-cell *matHeaderCellDef>Costo transferencia</th>
               <td mat-cell *matCellDef="let row">
                 {{ row.costo_transferencia | number: "1.2-4" }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_costo_transferencia
+                    | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="costo_banco">
               <th mat-header-cell *matHeaderCellDef>Costo banco</th>
               <td mat-cell *matCellDef="let row">
                 {{ row.costo_banco | number: "1.2-4" }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{ consolidado_proyeccion.total_costo_banco | number: "1.2-4" }}
+              </td>
             </ng-container>
             <ng-container matColumnDef="otros_costos">
               <th mat-header-cell *matHeaderCellDef>Otros costos</th>
               <td mat-cell *matCellDef="let row">
                 {{ row.otros_costos | number: "1.2-4" }}
               </td>
+              <td mat-footer-cell *matFooterCellDef>
+                {{
+                  consolidado_proyeccion.total_otros_costos | number: "1.2-4"
+                }}
+              </td>
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
             <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+            <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
           </table>
 
           <mat-paginator

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

@@ -94,6 +94,15 @@ export class VCN implements InstrumentComponent {
   @ViewChild(MatSort, { static: true }) sort: MatSort;
   dataSource = new MatTableDataSource(this.proyecciones);
   dataSource2 = new MatTableDataSource(this.proyecciones);
+  consolidado_proyeccion = {
+    total_ingreso_bruto: 0,
+    total_ingreso_neto: 0,
+    total_costo_cedeval: 0,
+    total_renta: 0,
+    total_costo_transferencia: 0,
+    total_costo_banco: 0,
+    total_otros_costos: 0
+  };
 
   constructor(
     private formBuilder: FormBuilder,
@@ -113,9 +122,12 @@ export class VCN implements InstrumentComponent {
       this.instrument_work.proyecciones != undefined
     ) {
       this.hasProjections = true;
-      this.dataSource2.data = this.instrument_work.proyecciones;
+      this.dataSource2.data = this.instrument_work.proyecciones.slice(0, -1);
       this.dataSource2.paginator = this.paginator;
       this.dataSource2.sort = this.sort;
+      this.consolidado_proyeccion = this.instrument_work.proyecciones[
+        this.instrument_work.proyecciones.length - 1
+      ];
     } else {
       this.hasProjections = false;
     }
@@ -311,6 +323,11 @@ export class VCN implements InstrumentComponent {
           this.fecha_inicio_vigencia = ans["result"]["fecha_inicio_vigencia"];
           this.proyecciones = ans["result"]["proyecciones"];
 
+          if (this.proyecciones != undefined && this.proyecciones.length > 0) {
+            this.consolidado_proyeccion = this.proyecciones.slice(0, -1);
+            this.proyecciones = ans["result"]["proyecciones"];
+          }
+
           if (this.f.valor_par.value == true) {
             this.hasProjections = true;
           } else {

src/app/components/investment-proposals/complement-info/complement-info.component.html

@@ -80,23 +80,15 @@
                       <div class="form-group">
                         <label for="emisores">Emisores: </label>
 
-                        <select
-                          class="custom-select"
+                        <ng-select
+                          #emisorSelect
+                          [options]="emitters"
                           formControlName="emisores"
                           [ngClass]="{
                             'is-invalid': submitted && f.emisores.errors
                           }"
                         >
-                          <option
-                            *ngFor="let item of emitters"
-                            [value]="item.id_tipo_emisor"
-                            [selected]="
-                              item.id_tipo_emisor == complementInfo.emisores
-                            "
-                          >
-                            {{ item.nombre }}</option
-                          >
-                        </select>
+                        </ng-select>
                         <div
                           *ngIf="submitted && f.emisores.errors"
                           class="invalid-feedback"

src/app/components/investment-proposals/complement-info/complement-info.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit, ViewChild } from "@angular/core";
 import { Router, ActivatedRoute } from "@angular/router";
 
 import { ComplementInfo } from "@app/models/investment-proposal-form";
@@ -8,6 +8,7 @@ import { CatalogsService } from "@app/services/catalogs.service";
 import { IAngularMyDpOptions, IMyDateModel } from "angular-mydatepicker";
 import { formatDate, DatePipe } from "@angular/common";
 import { parse } from "date-fns";
+import { IOption } from "ng-select";
 
 @Component({
   selector: "app-complement-info",
@@ -54,7 +55,7 @@ export class ComplementInfoComponent implements OnInit {
   submitted: boolean = false;
   role_number: any;
   markets: any;
-  emitters: any;
+  emitters: Array<IOption>;
   periodicities: any;
   rate_agencies: any;
   scores: any;
@@ -65,8 +66,12 @@ export class ComplementInfoComponent implements OnInit {
   operations: any;
   payment_terms: any;
 
-  complementInfoExists: boolean;
+  complementInfoDontExists: boolean;
   companyValue: any;
+  instrumentInfo: any;
+  @ViewChild("emisorSelect", { static: false })
+  public emisorSelect: any;
+
   constructor(
     private router: Router,
     private route: ActivatedRoute,
@@ -83,9 +88,13 @@ export class ComplementInfoComponent implements OnInit {
       this.investmentProposalID = this.route.snapshot.queryParamMap.get("id");
 
     this.complementInfo = this.formDataService.getComplementInfo();
-    this.complementInfoExists = this.complementInfo == undefined;
+    this.complementInfoDontExists = this.complementInfo == undefined;
+
+    this.instrumentInfo = this.formDataService.getGeneralInfo().instrumentos;
+    console.log(this.instrumentInfo);
+    console.log(this.complementInfo);
 
-    this.catalogService.getCompanies().subscribe(res => {
+    this.catalogService.getCatalogInfo("empresas").subscribe(res => {
       this.companies = res;
 
       if (this.investmentProposalID != undefined) {
@@ -97,15 +106,25 @@ export class ComplementInfoComponent implements OnInit {
           this.companyValue != undefined ? this.companyValue.nombre : "-";
       }
     });
-    this.catalogService.getCountries().subscribe(res => {
+    this.catalogService.getCatalogInfo("paises").subscribe(res => {
       this.countries = res;
     });
 
-    this.catalogService.getMarketTypes().subscribe(res => {
+    this.catalogService.getCatalogInfo("tipos-mercados").subscribe(res => {
       this.markets = res;
     });
-    this.catalogService.getEmitterTypes().subscribe(res => {
-      this.emitters = res;
+    this.catalogService.getCatalogInfo("tipos-emisores").subscribe(res => {
+      this.emitters = [];
+      for (let property in res) {
+        this.emitters.push({
+          label: res[property]["nombre"],
+          value: res[property]["id_tipo_emisor"].toString()
+        });
+      }
+
+      if (this.complementInfo.emisores.toString() != "") {
+        this.emisorSelect.select(this.complementInfo.emisores.toString());
+      }
     });
 
     this.catalogService.getRateAgencies().subscribe(res => {
@@ -120,46 +139,158 @@ export class ComplementInfoComponent implements OnInit {
       this.payment_terms = res;
     });
 
-    this.catalogService.getOperationTypes().subscribe(res => {
+    this.catalogService.getCatalogInfo("tipos-operaciones").subscribe(res => {
       this.operations = res;
     });
 
     this.investmentProposalForm = this.formBuilder.group({
       tipo_mercado: [
-        this.complementInfoExists ? "" : this.complementInfo.tipo_mercado,
+        this.complementInfoDontExists ? "" : this.complementInfo.tipo_mercado,
         [Validators.required]
       ],
 
       emisores: [
-        this.complementInfoExists ? "" : this.complementInfo.emisores,
+        this.complementInfoDontExists
+          ? ""
+          : this.complementInfo.emisores.toString(),
         [Validators.required]
       ],
       empresa: [
-        this.complementInfoExists ? "" : this.complementInfo.empresa,
+        this.complementInfoDontExists ? "" : this.complementInfo.empresa,
         [Validators.required]
       ],
       pais: [
-        this.complementInfoExists ? "" : this.complementInfo.pais,
+        this.complementInfoDontExists ? "" : this.complementInfo.pais,
         [Validators.required]
       ],
       plazo: [
-        this.complementInfoExists ? "" : this.complementInfo.plazo,
+        this.complementInfoDontExists ? "" : this.complementInfo.plazo,
         [Validators.required]
       ],
       operaciones: [
-        this.complementInfoExists ? "" : this.complementInfo.operaciones,
+        this.complementInfoDontExists ? "" : this.complementInfo.operaciones,
         [Validators.required]
       ],
 
       comentarios: [
-        this.complementInfoExists ? "" : this.complementInfo.comentarios,
+        this.complementInfoDontExists ? "" : this.complementInfo.comentarios,
         []
       ],
       justificacion: [
-        this.complementInfoExists ? "" : this.complementInfo.justificacion,
+        this.complementInfoDontExists ? "" : this.complementInfo.justificacion,
         []
       ]
     });
+
+    // Set default values depending of the instrument
+    if (
+      this.complementInfoDontExists == true ||
+      Object.values(this.complementInfo).every(x => x === null || x === "")
+    ) {
+      switch (this.instrumentInfo) {
+        case "LETE":
+          this.investmentProposalForm.patchValue({
+            emisores: this.investmentProposalForm.value.emisores = "985",
+            pais: this.investmentProposalForm.value.pais = 210
+          });
+          break;
+        case "CETE":
+          this.investmentProposalForm.patchValue({
+            emisores: this.investmentProposalForm.value.emisores = "985",
+            pais: this.investmentProposalForm.value.pais = 210,
+            operaciones: this.investmentProposalForm.value.operaciones = 2
+          });
+          break;
+
+        case "VCN":
+          this.investmentProposalForm.patchValue({
+            operaciones: this.investmentProposalForm.value.operaciones = 2
+          });
+          break;
+
+        case "PBUR":
+          this.investmentProposalForm.patchValue({
+            pais: this.investmentProposalForm.value.pais = 210,
+            operaciones: this.investmentProposalForm.value.operaciones = 2
+          });
+          break;
+
+        case "DAP":
+          this.investmentProposalForm.patchValue({
+            tipo_mercado: this.investmentProposalForm.value.tipo_mercado = 5,
+            operaciones: this.investmentProposalForm.value.operaciones = 2
+          });
+          break;
+
+        case "BONO":
+          this.investmentProposalForm.patchValue({
+            pais: this.investmentProposalForm.value.pais = 210,
+            operaciones: this.investmentProposalForm.value.operaciones = 2
+          });
+          break;
+
+        case "EURB":
+          this.investmentProposalForm.patchValue({
+            pais: this.investmentProposalForm.value.pais = 210,
+            operaciones: this.investmentProposalForm.value.operaciones = 2
+          });
+          break;
+
+        case "CINV":
+          this.investmentProposalForm.patchValue({
+            pais: this.investmentProposalForm.value.pais = 210,
+            operaciones: this.investmentProposalForm.value.operaciones = 2
+          });
+          break;
+
+        case "TIT":
+          this.investmentProposalForm.patchValue({
+            pais: this.investmentProposalForm.value.pais = 210,
+            operaciones: this.investmentProposalForm.value.operaciones = 2
+          });
+          break;
+
+        case "FINV":
+          this.investmentProposalForm.patchValue({
+            tipo_mercado: this.investmentProposalForm.value.tipo_mercado = 5,
+            pais: this.investmentProposalForm.value.pais = 210,
+            operaciones: this.investmentProposalForm.value.operaciones = 2
+          });
+          break;
+
+        case "OPC":
+          this.investmentProposalForm.patchValue({
+            //tipo_mercado: this.investmentProposalForm.value.tipo_mercado = 0,
+            pais: this.investmentProposalForm.value.pais = 233,
+            operaciones: this.investmentProposalForm.value.operaciones = 2
+          });
+          break;
+
+        case "FUTU":
+          this.investmentProposalForm.patchValue({
+            //tipo_mercado: this.investmentProposalForm.value.tipo_mercado = 0,
+            pais: this.investmentProposalForm.value.pais = 233,
+            operaciones: this.investmentProposalForm.value.operaciones = 2
+          });
+          break;
+
+        case "PEMP":
+          this.investmentProposalForm.patchValue({
+            tipo_mercado: this.investmentProposalForm.value.tipo_mercado = 5,
+            pais: this.investmentProposalForm.value.pais = 210,
+            operaciones: this.investmentProposalForm.value.operaciones = 2
+          });
+          break;
+
+        case "PPER":
+          this.investmentProposalForm.patchValue({
+            tipo_mercado: this.investmentProposalForm.value.tipo_mercado = 5,
+            pais: this.investmentProposalForm.value.pais = 210,
+            operaciones: this.investmentProposalForm.value.operaciones = 2
+          });
+          break;
+      }
+    }
   }
 
   get f() {
@@ -167,9 +298,10 @@ export class ComplementInfoComponent implements OnInit {
   }
 
   save(form: any): boolean {
-    //if (!form.valid) {
-    //return false;
-    //}
+    this.submitted = true;
+    if (!form.valid) {
+      return false;
+    }
     this.formDataService.setComplementInfo(this.investmentProposalForm.value);
     return true;
   }
@@ -186,8 +318,6 @@ export class ComplementInfoComponent implements OnInit {
   }
 
   goToNext(form: any) {
-    this.submitted = true;
-
     if (this.save(form)) {
       if (this.investmentProposalID != undefined) {
         this.router.navigate(["/investment-proposal/result"], {

src/app/components/investment-proposals/general-info/general-info.component.html

@@ -128,6 +128,54 @@
                         </div>
                       </div>
                     </div>
+
+                    <div class="col-lg-6 col-sm-12 pr-xl-3">
+                      <div class="form-group">
+                        <label for="instrumentos">Instrumentos: </label>
+                        <ng-container
+                          *ngIf="
+                            investmentProposalID == undefined;
+                            else elseTemplate
+                          "
+                        >
+                          <ng-select
+                            #instrumentType
+                            [options]="instrumentTypes"
+                            formControlName="instrumentos"
+                            [ngClass]="{
+                              'is-invalid': submitted && f.instrumentos.errors
+                            }"
+                            (selected)="pre_filled_fields($event)"
+                          >
+                          </ng-select>
+                        </ng-container>
+                        <ng-template #elseTemplate>
+                          <input
+                            type="text"
+                            [value]="instrumentValue"
+                            name="x"
+                            class="form-control"
+                            readonly
+                          />
+                          <input
+                            type="hidden"
+                            formControlName="instrumentos"
+                            class="form-control"
+                            [value]="general.instrumentos"
+                            readonly
+                          />
+                        </ng-template>
+                        <div
+                          *ngIf="submitted && f.instrumentos.errors"
+                          class="invalid-feedback"
+                        >
+                          <div *ngIf="f.instrumentos.errors.required">
+                            Campo requerido
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
                     <div class="col-lg-6 col-sm-12 pr-xl-3">
                       <div class="form-group">
                         <label for="tipo_tasa">Tipo Tasa: </label>
@@ -156,8 +204,7 @@
                         </div>
                       </div>
                     </div>
-                  </div>
-                  <div class="row">
+
                     <div class="col-lg-6 col-sm-12 pr-xl-3">
                       <div class="form-group">
                         <label for="tipo_renta">Tipo Renta: </label>
@@ -188,57 +235,6 @@
                         </div>
                       </div>
                     </div>
-                    <div class="col-lg-6 col-sm-12 pr-xl-3">
-                      <div class="form-group">
-                        <label for="instrumentos">Instrumentos: </label>
-                        <ng-container
-                          *ngIf="
-                            investmentProposalID == undefined;
-                            else elseTemplate
-                          "
-                        >
-                          <select
-                            class="custom-select"
-                            formControlName="instrumentos"
-                            [ngClass]="{
-                              'is-invalid': submitted && f.instrumentos.errors
-                            }"
-                          >
-                            <option
-                              *ngFor="let item of instrumentTypes"
-                              [selected]="item.codigo == general.instrumentos"
-                              [value]="item.codigo"
-                            >
-                              {{ item.nombre }}</option
-                            >
-                          </select>
-                        </ng-container>
-                        <ng-template #elseTemplate>
-                          <input
-                            type="text"
-                            [value]="instrumentValue"
-                            name="x"
-                            class="form-control"
-                            readonly
-                          />
-                          <input
-                            type="hidden"
-                            formControlName="instrumentos"
-                            class="form-control"
-                            [value]="general.instrumentos"
-                            readonly
-                          />
-                        </ng-template>
-                        <div
-                          *ngIf="submitted && f.instrumentos.errors"
-                          class="invalid-feedback"
-                        >
-                          <div *ngIf="f.instrumentos.errors.required">
-                            Campo requerido
-                          </div>
-                        </div>
-                      </div>
-                    </div>
 
                     <div class="col-lg-6 col-sm-12 pr-xl-3">
                       <div class="form-group">
@@ -306,24 +302,16 @@
                     <div class="col-lg-6 col-sm-12 pr-xl-3">
                       <div class="form-group">
                         <label for="casa">Casa: </label>
-
-                        <select
-                          class="custom-select"
+                        <ng-select
+                          #casaSelect
+                          [options]="financials"
                           formControlName="casa"
                           [ngClass]="{
                             'is-invalid': submitted && f.casa.errors
                           }"
                         >
-                          <option
-                            *ngFor="let item of financials"
-                            [value]="item.id_entidad_financiera"
-                            [selected]="
-                              item.id_entidad_financiera == general.casa
-                            "
-                          >
-                            {{ item.nombre }}
-                          </option>
-                        </select>
+                        </ng-select>
+
                         <div
                           *ngIf="submitted && f.casa.errors"
                           class="invalid-feedback"

src/app/components/investment-proposals/general-info/general-info.component.ts

@@ -4,7 +4,8 @@ import {
   OnChanges,
   ViewChild,
   ComponentRef,
-  Type
+  Type,
+  ElementRef
 } from "@angular/core";
 import { FormBuilder, FormGroup, Validators } from "@angular/forms";
 import Swal from "sweetalert2";
@@ -19,6 +20,7 @@ import { IAngularMyDpOptions, IMyDateModel } from "angular-mydatepicker";
 import { InvestmentsService } from "@app/services/investments.service";
 import { DatePipe } from "@angular/common";
 import { parse } from "date-fns";
+import { IOption } from "ng-select";
 
 @Component({
   selector: "app-new-investment-proposal",
@@ -73,11 +75,11 @@ export class InvestmentProposalGeneralInfoComponent
   rates: any;
   revenues: any;
   funds: any;
-  instrumentTypes: any;
+  instrumentTypes: Array<IOption>;
   generalInfoDontExists: boolean;
   plazos: any;
   base_types: any;
-  financials: any;
+  financials: Array<IOption>;
   format_incomes: any;
 
   gInfo: any;
@@ -86,6 +88,17 @@ export class InvestmentProposalGeneralInfoComponent
   datez: any;
   instrumentName: any;
   instrumentValue: any;
+
+  myOptions: Array<IOption> = [
+    { label: "Belgium", value: "BE" },
+    { label: "Luxembourg", value: "LU" },
+    { label: "Netherlands", value: "NL" }
+  ];
+
+  @ViewChild("instrumentType", { static: false })
+  public instrumentType: any;
+  @ViewChild("casaSelect", { static: false })
+  public casaSelect: any;
   constructor(
     private formBuilder: FormBuilder,
     private router: Router,
@@ -197,19 +210,21 @@ export class InvestmentProposalGeneralInfoComponent
               this.formDataService.setGeneralInfo(this.gInfo);
               this.general = this.formDataService.getGeneralInfo();
               this.generalInfoDontExists = this.general == undefined;
-              this.investmentProposalForm.setValue({
+              this.investmentProposalForm.patchValue({
                 asunto: this.gInfo.asunto,
                 origenes_fondo: this.gInfo.origenes_fondo,
                 name: this.gInfo.name,
                 tipo_tasa: this.gInfo.tipo_tasa,
                 tipo_renta: this.gInfo.tipo_renta,
                 periodicidad: this.gInfo.periodicidad,
-
                 instrumentos: this.gInfo.instrumentos,
                 base_anual: this.gInfo.base_anual,
-                casa: this.gInfo.casa,
+                casa: this.gInfo.casa.toString(),
                 formato_ingreso: this.gInfo.formato_ingreso
               });
+              if (this.gInfo.casa != "") {
+                this.casaSelect.select(this.gInfo.casa.toString());
+              }
             }
 
             this.instrument = this.formDataService.getWork();
@@ -249,7 +264,13 @@ export class InvestmentProposalGeneralInfoComponent
     });
 
     this.catalogService.getFinancialEntities().subscribe(res => {
-      this.financials = res;
+      this.financials = [];
+      for (let property in res) {
+        this.financials.push({
+          label: res[property]["nombre"],
+          value: res[property]["id_entidad_financiera"].toString()
+        });
+      }
     });
 
     this.catalogService.getBaseTypes().subscribe(res => {
@@ -269,8 +290,23 @@ export class InvestmentProposalGeneralInfoComponent
       this.funds = res;
     });
     this.catalogService.getInstrumentTypes().subscribe(res => {
-      this.instrumentTypes = res;
+      res;
+      this.instrumentTypes = [];
+
+      for (let property in res) {
+        this.instrumentTypes.push({
+          label: res[property]["nombre"],
+          value: res[property]["codigo"]
+        });
+      }
       if (this.generalInfoDontExists == false) {
+        if (
+          this.instrumentType != undefined &&
+          (this.general.instrumentos != "" ||
+            this.general.instrumentos != undefined)
+        ) {
+          this.instrumentType.select(this.general.instrumentos);
+        }
         this.instrumentName = res.find(
           e => e.codigo == this.general.instrumentos
         );
@@ -350,4 +386,120 @@ export class InvestmentProposalGeneralInfoComponent
   get f() {
     return this.investmentProposalForm.controls;
   }
+
+  pre_filled_fields(event: IOption) {
+    const selectedInstrument = event.value;
+    switch (selectedInstrument) {
+      case "LETE":
+        this.investmentProposalForm.patchValue({
+          tipo_tasa: this.investmentProposalForm.value.tipo_tasa = 2,
+          tipo_renta: this.investmentProposalForm.value.tipo_renta = 2,
+          periodicidad: this.investmentProposalForm.value.periodicidad = 7,
+          base_anual: 6
+        });
+
+      case "CETE":
+        this.investmentProposalForm.patchValue({
+          tipo_tasa: this.investmentProposalForm.value.tipo_tasa = 2,
+          tipo_renta: this.investmentProposalForm.value.tipo_renta = 2,
+          periodicidad: this.investmentProposalForm.value.periodicidad = 7,
+          base_anual: 6
+        });
+        break;
+
+      case "VCN":
+        this.investmentProposalForm.patchValue({
+          tipo_tasa: this.investmentProposalForm.value.tipo_tasa = 2,
+          tipo_renta: this.investmentProposalForm.value.tipo_renta = 2
+        });
+        break;
+
+      case "PBUR":
+        this.investmentProposalForm.patchValue({
+          tipo_tasa: this.investmentProposalForm.value.tipo_tasa = 2,
+          tipo_renta: this.investmentProposalForm.value.tipo_renta = 2
+        });
+        break;
+
+      case "DAP":
+        this.investmentProposalForm.patchValue({
+          tipo_tasa: this.investmentProposalForm.value.tipo_tasa = 2,
+          tipo_renta: this.investmentProposalForm.value.tipo_renta = 2,
+          base_anual: 8
+        });
+        break;
+
+      case "BONO":
+        this.investmentProposalForm.patchValue({
+          tipo_tasa: this.investmentProposalForm.value.tipo_tasa = 2,
+          tipo_renta: this.investmentProposalForm.value.tipo_renta = 2,
+          base_anual: 7
+        });
+        break;
+
+      case "EURB":
+        this.investmentProposalForm.patchValue({
+          tipo_tasa: this.investmentProposalForm.value.tipo_tasa = 2,
+          tipo_renta: this.investmentProposalForm.value.tipo_renta = 2,
+          base_anual: 6
+        });
+        break;
+
+      case "CINV":
+        this.investmentProposalForm.patchValue({
+          tipo_tasa: this.investmentProposalForm.value.tipo_tasa = 2,
+          tipo_renta: this.investmentProposalForm.value.tipo_renta = 2,
+          base_anual: 7
+        });
+        break;
+
+      case "TIT":
+        this.investmentProposalForm.patchValue({
+          tipo_tasa: this.investmentProposalForm.value.tipo_tasa = 2,
+          tipo_renta: this.investmentProposalForm.value.tipo_renta = 2,
+          base_anual: 7
+        });
+        break;
+
+      case "FINV":
+        this.investmentProposalForm.patchValue({
+          tipo_tasa: this.investmentProposalForm.value.tipo_tasa = 2,
+          tipo_renta: this.investmentProposalForm.value.tipo_renta = 2,
+          base_anual: 7
+        });
+        break;
+
+      case "OPC":
+        this.investmentProposalForm.patchValue({
+          tipo_tasa: this.investmentProposalForm.value.tipo_tasa = 3,
+          tipo_renta: this.investmentProposalForm.value.tipo_renta = 3,
+          base_anual: 7
+        });
+        break;
+
+      case "FUTU":
+        this.investmentProposalForm.patchValue({
+          tipo_tasa: this.investmentProposalForm.value.tipo_tasa = 3,
+          tipo_renta: this.investmentProposalForm.value.tipo_renta = 3,
+          base_anual: 7
+        });
+        break;
+
+      case "PEMP":
+        this.investmentProposalForm.patchValue({
+          tipo_tasa: this.investmentProposalForm.value.tipo_tasa = 2,
+          tipo_renta: this.investmentProposalForm.value.tipo_renta = 2,
+          base_anual: 7
+        });
+        break;
+
+      case "PPER":
+        this.investmentProposalForm.patchValue({
+          tipo_tasa: this.investmentProposalForm.value.tipo_tasa = 2,
+          tipo_renta: this.investmentProposalForm.value.tipo_renta = 2,
+          base_anual: 7
+        });
+        break;
+    }
+  }
 }

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

@@ -121,6 +121,19 @@
                       >
                         <i class="fas fa-info"></i>
                       </a>
+                      <a
+                        *ngIf="
+                          can_upload_file(
+                            row.id_estado_inversion.codigo,
+                            row.hoja_liquidacion
+                          ) && userType(userRole, 'analistas')
+                        "
+                        title="Subir hoja de liquidación"
+                        class="btn btn-danger btn-custom-small"
+                        (click)="upload_liquidation_file(row.id_inversion)"
+                      >
+                        <i class="fas fa-file-upload"></i>
+                      </a>
                       <a
                         *ngIf="
                           can_modify(row.id_estado_inversion.codigo) &&

src/app/components/investment-proposals/investment-proposals.component.scss

@@ -6,5 +6,5 @@
 
 .btn-custom-small {
   padding: 7px 12px 5px 13px;
-  margin: 0 4px;
+  margin: 5px 4px;
 }

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

@@ -130,6 +130,19 @@ export class InvestmentProposalsComponent implements OnInit {
     }
   }
 
+  upload_liquidation_file(id: string) {
+    this.formInvestmentProposal.resetFormData();
+    Swal.fire({
+      allowOutsideClick: false,
+      icon: "info",
+      text: "Espere por favor..."
+    });
+    Swal.showLoading();
+    setTimeout(() => {
+      this.router.navigate([`/investment-proposal/${id}/upload-file`]);
+    }, 1000);
+  }
+
   view_investment_proposal(id: string) {
     this.formInvestmentProposal.resetFormData();
     Swal.fire({
@@ -178,6 +191,7 @@ export class InvestmentProposalsComponent implements OnInit {
       status == "NUEVA" ||
       status == "RECHA" ||
       status == "APROB" ||
+      status == "PGNPR" ||
       status == "LIQUI"
     ) {
       return true;
@@ -186,6 +200,22 @@ export class InvestmentProposalsComponent implements OnInit {
     }
   }
 
+  can_upload_file(status: string, file: string) {
+    if (
+      (status == "APROB" ||
+        status == "LIQUI" ||
+        status == "COMPR" ||
+        status == "PGAPR" ||
+        status == "PGNPR" ||
+        status == "LIQUI") &&
+      file == null
+    ) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
   // Verifica permisos para mostrar boton de edicion y/o envio a revision,
   // segun los permisos del usuario y el estado de la propuesta
   can_modify_or_send_to_review(status: string) {
@@ -213,7 +243,7 @@ export class InvestmentProposalsComponent implements OnInit {
   }
 
   can_write_payment_info(status: string) {
-    if (status == "APROB") {
+    if (status == "APROB" || status == "PGNPR") {
       return true;
     } else {
       return false;

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/components/investment-proposals/proposal-detail/proposal-detail.component.ts

@@ -16,6 +16,7 @@ import { InstrumentsService } from "@app/services/instruments.service";
 import Swal from "sweetalert2";
 import { CatalogsService } from "@app/services/catalogs.service";
 import { InvestmentsService } from "@app/services/investments.service";
+import { environment } from "@environments/environment";
 
 @Component({
   selector: "app-investment-proposal-detail",
@@ -74,6 +75,8 @@ export class InvestmentProposalDetailComponent implements OnInit {
   fecha_pago: any;
   cuenta_bancaria_destino: any;
   emitir_nombre: any;
+  liquidation_file: any;
+  fileDownload: string;
 
   constructor(
     private router: Router,
@@ -103,7 +106,9 @@ export class InvestmentProposalDetailComponent implements OnInit {
         .getProposalInvestment(this.investmentProposalID)
         .subscribe(res => {
           this.state = res["result"]["id_estado_inversion"]["codigo"];
+          this.fileDownload = environment.productionMediaUrl;
 
+          this.liquidation_file = res["result"]["hoja_liquidacion"];
           this.gInfo = {
             asunto: res["result"]["asunto"],
             origenes_fondo:
@@ -202,7 +207,6 @@ export class InvestmentProposalDetailComponent implements OnInit {
             this.investmentName = this.general.name;
             this.comment = this.complement.comentarios;
             this.justification = this.complement.justificacion;
-
             this.catalogService.getFinancialEntities().subscribe(res => {
               this.financials = res.find(
                 e => e.id_entidad_financiera == this.general.casa

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

@@ -249,6 +249,7 @@ export class ResultComponent implements OnInit {
         this.inversion["codigo_instrumento"] == "TIT" ||
         this.inversion["codigo_instrumento"] == "EURB" ||
         this.inversion["codigo_instrumento"] == "CINV" ||
+        this.inversion["codigo_instrumento"] == "FINV" ||
         this.inversion["codigo_instrumento"] == "PBUR") &&
       (this.instrument["proyecciones"] != undefined ||
         this.instrument["proyecciones"] != "")

src/app/components/investment-proposals/upload-liquidation/upload-liquidation.component.html

@@ -0,0 +1,130 @@
+<h2 class="floating-title">{{ title }}</h2>
+
+<div class="main-content">
+  <div class="container-fluid">
+    <div class="row">
+      <div class="col-12 align-right">
+        <div class="align-container">
+          <nav aria-label="breadcrumb">
+            <ol class="breadcrumb">
+              <li class="breadcrumb-item">
+                <a [routerLink]="['/']">Dashboard</a>
+              </li>
+              <li class="breadcrumb-item">
+                <a [routerLink]="['/investment-proposals']">
+                  Propuestas de inversión
+                </a>
+              </li>
+              <li class="breadcrumb-item">Hoja de liquidación</li>
+            </ol>
+          </nav>
+        </div>
+      </div>
+
+      <br />
+    </div>
+    <br />
+    <div class="row justify-content-center">
+      <div class="col-12">
+        <div class="align-container">
+          <div class="card borderless">
+            <div class="card-header card-header-icon card-header-rose">
+              <h4 class="card-title">
+                Subir archivo de hoja de liquidación
+              </h4>
+            </div>
+            <div class="card-body">
+              <div class="align-container">
+                <div class="instrument-calcs">
+                  <div class="row">
+                    <div class="col-12">
+                      <span class="badge badge-success badge-custom"
+                        >Información básica de la inversión</span
+                      >
+                    </div>
+                    <div class="col-sm-12">
+                      <h4>Estado de la propuesta de inversión:</h4>
+                      <div class="field">{{ estado }}</div>
+                    </div>
+                    <div class="col-sm-6">
+                      <h4>Código de la propuesta de inversión:</h4>
+                      <div class="field">{{ codigo_inversion }}</div>
+                    </div>
+                    <div class="col-sm-6">
+                      <h4>Instrumento:</h4>
+                      <div class="field">{{ instrumento }}</div>
+                    </div>
+                    <div class="col-sm-6">
+                      <h4>Emisor:</h4>
+                      <div class="field">{{ emisor }}</div>
+                    </div>
+                    <div class="col-sm-6">
+                      <h4>Empresa:</h4>
+                      <div class="field">{{ empresa }}</div>
+                    </div>
+                  </div>
+                </div>
+
+                <br />
+
+                <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-6">
+                      <div class="form-group">
+                        <label for="hoja_liquidacion">Archivo: </label>
+
+                        <input
+                          type="file"
+                          name="hoja_liquidacion"
+                          (change)="fileProgress($event)"
+                          [ngClass]="{
+                            'is-invalid': submitted && fileData == null
+                          }"
+                        />
+                        <div
+                          *ngIf="submitted && fileData == null"
+                          class="invalid-feedback"
+                        >
+                          Campo requerido
+                        </div>
+                      </div>
+                      <br />
+                      <div *ngIf="fileUploadProgress">
+                        Progreso: {{ fileUploadProgress }}
+                      </div>
+                      <div class="image-preview mb-3" *ngIf="previewUrl">
+                        <img [src]="previewUrl" height="300" />
+                      </div>
+
+                      <div class="mb-3" *ngIf="uploadedFilePath">
+                        {{ uploadedFilePath }}
+                      </div>
+                    </div>
+                  </div>
+                  <br />
+                  <div class="row">
+                    <div class="col-lg-12 col-sm-12 align-right">
+                      <div class="form-group">
+                        <button
+                          class="btn btn-primary"
+                          (click)="onSubmit(investmentProposalForm)"
+                          type="submit"
+                        >
+                          Subir archivo
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                  <br />
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/components/investment-proposals/upload-liquidation/upload-liquidation.component.scss

@@ -0,0 +1,34 @@
+.area {
+  width: 77%;
+  padding: 15px;
+  margin: 15px;
+  border: 1px solid #333;
+  background: rgba(0, 0, 0, 0.7);
+}
+
+#dropZone {
+  border: 2px dashed #bbb;
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
+  padding: 50px;
+  text-align: center;
+  font: 21pt bold arial;
+  color: #bbb;
+}
+
+.drop-file-over {
+  background: #333;
+}
+
+.form-group input[type="file"] {
+  opacity: 1;
+  z-index: 1;
+  position: relative;
+}
+
+.invalid-feedback {
+  background-color: #f44336;
+  color: #fff;
+  border: 1px solid #f20221;
+  padding: 2px;
+}

src/app/components/investment-proposals/upload-liquidation/upload-liquidation.component.ts

@@ -0,0 +1,144 @@
+import { Component, OnInit, ComponentFactoryResolver } from "@angular/core";
+import { FileUploader, FileLikeObject } from "ng2-file-upload";
+import { concat } from "rxjs";
+import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { HttpClient, HttpEventType } from "@angular/common/http";
+import { FormInvestmentProposalService } from "@app/services/form-investment-proposal.service";
+import { InvestmentProposalWorkflowService } from "@app/services/investment-proposal-workflow.service";
+import { InstrumentsService } from "@app/services/instruments.service";
+import { CatalogsService } from "@app/services/catalogs.service";
+import { ActivatedRoute } from "@angular/router";
+import { InvestmentsService } from "@app/services/investments.service";
+import Swal from "sweetalert2";
+import { IAngularMyDpOptions } from "angular-mydatepicker";
+
+@Component({
+  selector: "app-upload-liquidation",
+  templateUrl: "./upload-liquidation.component.html",
+  styleUrls: ["./upload-liquidation.component.scss"]
+})
+export class UploadLiquidationComponent implements OnInit {
+  title: string = "Subir hoja de liquidación";
+  // For daterange
+
+  form: FormGroup;
+  fileData: File = null;
+  previewUrl: any = null;
+  fileUploadProgress: string = null;
+  uploadedFilePath: string = null;
+  interval: any;
+  indexDynamicComponent: number;
+  investmentProposalID: string;
+  investmentExists;
+  codigo_inversion: string = "";
+  empresa: string = "";
+  estado: string = "";
+  emisor: string = "";
+  instrumento: string = "";
+
+  investmentProposalForm: FormGroup;
+  submitted: boolean = false;
+  paymentObject: Object;
+
+  constructor(
+    private http: HttpClient,
+
+    private formDataService: FormInvestmentProposalService,
+    private componentFactoryResolver: ComponentFactoryResolver,
+    private instrumentService: InvestmentProposalWorkflowService,
+    private loadInstrumentsService: InstrumentsService,
+    private catalogService: CatalogsService,
+    private route: ActivatedRoute,
+    private investmentService: InvestmentsService,
+    private formBuilder: FormBuilder,
+
+    private investmentsService: InvestmentsService
+  ) {}
+
+  ngOnInit() {
+    //this.formDataService
+    //this.ads = this.loadInstrumentsService.getInstruments();
+    this.route.params.subscribe(params => {
+      this.investmentProposalID = params["id"];
+    });
+    if (this.investmentProposalID == undefined)
+      this.investmentProposalID = this.route.snapshot.queryParamMap.get("id");
+
+    this.investmentService
+      .getProposalInvestment(this.investmentProposalID)
+      .subscribe(resp => {
+        this.codigo_inversion = resp["result"]["codigo_inversion"];
+        this.estado = resp["result"]["id_estado_inversion"]["nombre"];
+        this.instrumento =
+          resp["result"]["id_inversion_instrumento"]["id_tipo_instrumento"][
+            "nombre"
+          ];
+        this.emisor = resp["result"]["id_tipo_emisor"]["nombre"];
+
+        this.empresa = resp["result"]["id_empresa"]["nombre"];
+        Swal.close();
+      });
+
+    this.investmentProposalForm = this.formBuilder.group({
+      id_inversion: [this.investmentProposalID]
+    });
+  }
+
+  fileProgress(fileInput: any) {
+    this.fileData = <File>fileInput.target.files[0];
+    this.preview();
+  }
+
+  preview() {
+    // Show preview
+    var mimeType = this.fileData.type;
+    if (mimeType.match(/image\/*/) == null) {
+      return;
+    }
+
+    var reader = new FileReader();
+    reader.readAsDataURL(this.fileData);
+    reader.onload = _event => {
+      this.previewUrl = reader.result;
+    };
+  }
+
+  get f() {
+    return this.investmentProposalForm.controls;
+  }
+
+  onSubmit(form: any) {
+    this.submitted = true;
+    if (this.fileData == null) {
+      return false;
+    }
+
+    const formData = new FormData();
+    formData.append("id_inversion", this.investmentProposalID);
+    formData.append("hoja_liquidacion", this.fileData);
+
+    this.investmentService.sendLiquidationFile(formData).subscribe(
+      success => {
+        if (success) {
+          Swal.fire({
+            allowOutsideClick: false,
+            icon: "success",
+            showCancelButton: false,
+            title: "Exito",
+            confirmButtonText: "Se ha subido la hoja de liquidación"
+          }).then(result => {
+            Swal.close();
+            window.location.href = "#/investment-proposals";
+          });
+        }
+      },
+      err => {
+        Swal.fire({
+          icon: "error",
+          title: "Error en el servidor",
+          text: err.message
+        });
+      }
+    );
+  }
+}

src/app/components/investments/costs/fondos/fondos.costs.component.html

@@ -0,0 +1,378 @@
+<h2 class="floating-title">{{ title }}</h2>
+
+<div class="main-content">
+  <div class="container-fluid">
+    <div class="row">
+      <div class="col-12 align-right">
+        <div class="align-container">
+          <nav aria-label="breadcrumb">
+            <ol class="breadcrumb">
+              <li class="breadcrumb-item">
+                <a [routerLink]="['/']">Dashboard</a>
+              </li>
+              <li class="breadcrumb-item">
+                <a [routerLink]="['/investments']">
+                  Inversiones activas
+                </a>
+              </li>
+              <li class="breadcrumb-item">Fondos de inversión</li>
+            </ol>
+          </nav>
+        </div>
+      </div>
+
+      <div class="col-12">
+        <div class="align-container">
+          <div class="card borderless card-wrapper">
+            <div class="wrapper-costs">
+              <h4 class="card-title">
+                Detalle de dividendos para el fondos de inversión
+              </h4>
+              <br />
+
+              <div class="align-container">
+                <div>
+                  <div class="costs-summary" *ngIf="instrument_exists">
+                    <div class="row">
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Cuota participación:</h4>
+                        <div class="field">
+                          $USD
+                          {{
+                            instrument_work.cuota_participacion
+                              | number: "1.2-4"
+                          }}
+                        </div>
+                      </div>
+
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Valor participación:</h4>
+                        <div class="field">
+                          {{
+                            instrument_work.valor_participacion_porcentaje
+                              | number: "1.2-4"
+                          }}
+                          %
+                        </div>
+                      </div>
+
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Días liquidación:</h4>
+                        <div class="field">
+                          {{ instrument_work.dias_liquidacion }}
+                        </div>
+                      </div>
+
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Días vencimiento:</h4>
+                        <div class="field">
+                          {{ instrument_work.dias_vencimiento }}
+                        </div>
+                      </div>
+
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Valor nominal:</h4>
+                        <div class="field">
+                          $USD
+                          {{ instrument_work.valor_nominal | number: "1.2-4" }}
+                        </div>
+                      </div>
+
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Valor transado:</h4>
+                        <div class="field">
+                          $USD
+                          {{ instrument_work.valor_transado | number: "1.2-4" }}
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Monto a pagar:</h4>
+                        <div class="field">
+                          $USD
+                          {{ instrument_work.monto_pagar | number: "1.2-4" }}
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Comisión casa (%):</h4>
+                        <div class="field">
+                          {{
+                            instrument_work.comision_casa_porcentaje
+                              | number: "1.2-4"
+                          }}
+                          %
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <div class="field">
+                          <h4>Comisión casa:</h4>
+                          $USD
+                          {{ instrument_work.comision_casa | number: "1.2-4" }}
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Comisión bolsa (%):</h4>
+                        <div class="field">
+                          {{
+                            instrument_work.comision_bolsa_porcentaje
+                              | number: "1.2-4"
+                          }}
+                          %
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <div class="field">
+                          <h4>Comisión bolsa:</h4>
+                          $USD
+                          {{ instrument_work.comision_bolsa | number: "1.2-4" }}
+                        </div>
+                      </div>
+
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Rendimiento (%):</h4>
+                        <div class="field">
+                          {{
+                            instrument_work.rendimiento_porcentaje
+                              | number: "1.2-4"
+                          }}
+                          %
+                        </div>
+                      </div>
+
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Dividendo (%):</h4>
+                        <div class="field">
+                          {{
+                            instrument_work.dividendo_porcentaje
+                              | number: "1.2-4"
+                          }}
+                          %
+                        </div>
+                      </div>
+
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Fecha operación:</h4>
+                        <div class="field">
+                          {{ instrument_work.fecha_operacion }}
+                        </div>
+                      </div>
+
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Fecha liquidación:</h4>
+                        <div class="field">
+                          {{ instrument_work.fecha_liquidacion }}
+                        </div>
+                      </div>
+
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Fecha vencimiento:</h4>
+                        <div class="field">
+                          {{ instrument_work.fecha_vencimiento }}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <br />
+              <br />
+              <div class="align-container">
+                <form *ngIf="dataRetrieved" [formGroup]="form">
+                  <div *ngFor="let group of form.controls; let i = index">
+                    <div class="wrapper-form" [formGroup]="group">
+                      <div class="costs-input-small-container">
+                        <div class="form-group">
+                          <label for="posicion">Posicion: </label>
+
+                          <div class="input-box-container">
+                            <input
+                              type="text"
+                              formControlName="posicion"
+                              class="form-control"
+                              readonly
+                            />
+                          </div>
+                        </div>
+                      </div>
+
+                      <div class="costs-input-small-container">
+                        <div class="form-group">
+                          <label for="plazo">Plazo: </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i class="far fa-clock" aria-hidden="true"></i>
+                              </p>
+                              <input
+                                type="text"
+                                formControlName="plazo"
+                                class="form-control"
+                                readonly
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div class="costs-input-normal-container">
+                        <div class="form-group">
+                          <label for="fecha_pago">Fecha pago: </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i
+                                  class="far fa-calendar"
+                                  aria-hidden="true"
+                                ></i>
+                              </p>
+                              <input
+                                type="text"
+                                formControlName="fecha_pago"
+                                class="form-control"
+                                readonly
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div class="costs-input-normal-container">
+                        <div class="form-group">
+                          <label for="ingreso_bruto">Ingreso bruto: </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i class="fas fa-dollar-sign"></i>
+                              </p>
+                              <input
+                                type="text"
+                                formControlName="ingreso_bruto"
+                                class="form-control"
+                                readonly
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="costs-input-normal-container">
+                        <div class="form-group">
+                          <label for="ingreso_neto">Ingreso neto: </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i class="fas fa-dollar-sign"></i>
+                              </p>
+                              <input
+                                type="text"
+                                formControlName="ingreso_neto"
+                                class="form-control"
+                                readonly
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div class="costs-input-normal-container">
+                        <div class="form-group">
+                          <label for="dividendo_porcentaje"
+                            >Dividendo (%):
+                          </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i class="fas fa-percent"></i>
+                              </p>
+                              <input
+                                type="number"
+                                formControlName="dividendo_porcentaje"
+                                class="form-control"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="costs-input-normal-container">
+                        <div class="form-group">
+                          <label for="rendimiento_porcentaje"
+                            >Rendimiento:
+                          </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i class="fas fa-percent"></i>
+                              </p>
+                              <input
+                                type="number"
+                                formControlName="rendimiento_porcentaje"
+                                class="form-control"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="costs-input-normal-container">
+                        <div class="form-group">
+                          <label for="rendimiento">Rendimiento ($): </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i class="fas fa-dollar-sign"></i>
+                              </p>
+                              <input
+                                type="number"
+                                formControlName="rendimiento"
+                                class="form-control"
+                                readonly
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <input
+                        type="hidden"
+                        formControlName="id_fondo_inversion"
+                      />
+                      <input
+                        type="hidden"
+                        formControlName="id_proyeccion_ingreso"
+                      />
+                      <div class="clear"></div>
+                    </div>
+                  </div>
+                  <br />
+                  <div class="form-group text-right space-20">
+                    <button
+                      type="button"
+                      class="btn btn-success center-component float-left"
+                      (click)="saveProjection()"
+                    >
+                      Guardar información de proyecciones
+                    </button>
+
+                    <button
+                      type="button"
+                      class="btn btn-primary center-component float-right"
+                      (click)="recalculateProjectionChanges()"
+                    >
+                      Recalcular proyecciones
+                    </button>
+                  </div>
+                  <br />
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <br />
+    </div>
+  </div>
+</div>

src/app/components/investments/costs/fondos/fondos.costs.component.ts

@@ -0,0 +1,233 @@
+import { Component, ViewChild, OnInit } from "@angular/core";
+import { MatPaginator } from "@angular/material/paginator";
+import { MatSort } from "@angular/material/sort";
+import { MatTableDataSource } from "@angular/material/table";
+import Swal from "sweetalert2";
+import { CatalogsService } from "src/app/services/catalogs.service";
+import { InvestmentsService } from "@app/services/investments.service";
+import { InstrumentCalculations } from "@app/services/instrument-calculations.service";
+
+import { AuthService } from "@app/services/auth2.service";
+import { JwtHelperService } from "@auth0/angular-jwt";
+import { InvestmentProposal } from "@app/models/investment-proposal";
+import { from } from "rxjs";
+import { FormInvestmentProposalService } from "@app/services/form-investment-proposal.service";
+import { Router, ActivatedRoute } from "@angular/router";
+import {
+  FormBuilder,
+  FormGroup,
+  FormControl,
+  FormArray,
+  Validators
+} from "@angular/forms";
+
+@Component({
+  selector: "app-fondos-costs",
+  templateUrl: "./fondos.costs.component.html"
+  //styleUrls: ["./dap.costs.component.scss"]
+})
+export class FINVCostsComponent implements OnInit {
+  helper = new JwtHelperService();
+
+  title: string = "Dividendos para fondos de inversión";
+
+  displayedColumns: string[] = [
+    "posicion",
+    "plazo",
+    "fecha_pago",
+    "ingreso_bruto",
+    "ingreso_neto",
+    "dividendo_porcentaje",
+    "rendimiento_porcentaje",
+    "rendimiento",
+    "id_fondo_inversion"
+  ];
+
+  //displayedColumns: string[] = ['state'];
+
+  listProposals: InvestmentProposal[];
+  dataSource = new MatTableDataSource(this.listProposals);
+
+  resultsLength = 0;
+  isLoadingResults = true;
+  isRateLimitReached = false;
+  userRole: any;
+
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
+  @ViewChild(MatSort, { static: true }) sort: MatSort;
+  role_number: any;
+  investmentProposalID: string;
+
+  form: FormArray;
+  investmentProposalForm: FormGroup;
+
+  proyecciones: any;
+  proyeccionesProps = [];
+  dataRetrieved: boolean = false;
+
+  array1;
+  array2;
+  array3;
+  investment: any;
+  instrument_work: any;
+  instrument_exists: boolean;
+
+  constructor(
+    private catalogService: CatalogsService,
+    private investmentsService: InvestmentsService,
+    private authService: AuthService,
+    private formInvestmentProposal: FormInvestmentProposalService,
+    private router: Router,
+    private route: ActivatedRoute,
+    private instrumentService: InstrumentCalculations,
+
+    private formBuilder: FormBuilder
+  ) {
+    const decodedToken = this.helper.decodeToken(
+      this.authService.getJwtToken()
+    );
+    this.userRole = decodedToken.groups;
+
+    Swal.fire({
+      allowOutsideClick: false,
+      icon: "info",
+      text: "Espere por favor..."
+    });
+    Swal.showLoading();
+  }
+
+  ngOnInit() {
+    Swal.close();
+    const formDataObj = {};
+
+    this.route.params.subscribe(params => {
+      this.investmentProposalID = params["id"];
+    });
+
+    if (this.investmentProposalID == undefined)
+      this.investmentProposalID = this.route.snapshot.queryParamMap.get("id");
+
+    if (this.investmentProposalID != undefined) {
+      this.investmentsService
+        .getProposalInvestment(this.investmentProposalID)
+        .subscribe(
+          res => {
+            this.investment = res["result"];
+            this.instrument_work =
+              res["result"]["id_inversion_instrumento"]["instrumento"];
+            this.instrument_exists = true;
+
+            this.proyecciones =
+              res["result"]["id_inversion_instrumento"]["instrumento"][
+                "proyecciones"
+              ];
+            this.proyecciones.pop();
+
+            this.form = new FormArray(this.buildForm(this.proyecciones));
+            this.dataRetrieved = true;
+          },
+          err => {
+            Swal.fire({
+              icon: "error",
+              title: "Error en el servidor",
+              text: err.message
+            });
+          }
+        );
+    }
+
+    setTimeout(() => {
+      Swal.close();
+    }, 1200);
+  }
+
+  recalculateProjectionChanges() {
+    let objProjection = { proyecciones: this.form.value };
+    Swal.fire({
+      allowOutsideClick: false,
+      icon: "info",
+      text: "Espere por favor..."
+    });
+    Swal.showLoading();
+    console.log(objProjection);
+    this.instrumentService
+      .projectionCalc(this.investmentProposalID, this.form.value)
+      .subscribe(
+        result => {
+          Swal.fire({
+            allowOutsideClick: false,
+            icon: "success",
+            showCancelButton: false,
+            title: "Exito"
+          });
+          this.proyecciones = result["result"]["proyecciones"];
+          this.proyecciones.pop();
+
+          this.form.clear();
+          this.form = new FormArray(this.buildForm(this.proyecciones));
+          Swal.close();
+          //window.location.reload();
+        },
+        err => {
+          Swal.fire({
+            icon: "error",
+            title: "Error al guardar",
+            text: err.message
+          });
+        }
+      );
+  }
+
+  saveProjection() {
+    let objProjection = { proyecciones: this.form.value };
+    Swal.fire({
+      allowOutsideClick: false,
+      icon: "info",
+      text: "Espere por favor..."
+    });
+    Swal.showLoading();
+
+    this.instrumentService
+      .projectionModification(this.investmentProposalID, objProjection)
+      .subscribe(
+        resp => {
+          Swal.fire({
+            allowOutsideClick: false,
+            icon: "success",
+            showCancelButton: false,
+            title: "Exito",
+            confirmButtonText: "La información ha sido actualizada"
+          }).then(result => {
+            Swal.close();
+            //window.location.reload();
+          });
+        },
+        err => {
+          Swal.fire({
+            icon: "error",
+            title: "Error al guardar",
+            text: err.message
+          });
+        }
+      );
+  }
+
+  buildForm(items: any[]): FormGroup[] {
+    return items.map(x => this.buildItem(x));
+  }
+  //return a formGroup
+  buildItem(item: any): FormGroup {
+    return new FormGroup({
+      id_proyeccion_ingreso: new FormControl(item.id_proyeccion_ingreso),
+      posicion: new FormControl(item.posicion),
+      plazo: new FormControl(item.plazo),
+      fecha_pago: new FormControl(item.fecha_pago),
+      ingreso_bruto: new FormControl(item.ingreso_bruto),
+      ingreso_neto: new FormControl(item.ingreso_neto),
+      dividendo_porcentaje: new FormControl(item.dividendo_porcentaje),
+      rendimiento_porcentaje: new FormControl(item.rendimiento_porcentaje),
+      rendimiento: new FormControl(item.rendimiento),
+      id_fondo_inversion: new FormControl(item.id_fondo_inversion)
+    });
+  }
+}

src/app/components/investments/costs/pbur/pbur.costs.component.ts

@@ -211,7 +211,7 @@ export class PBURCostsComponent implements OnInit {
               res["result"]["id_inversion_instrumento"]["instrumento"][
                 "proyecciones"
               ];
-
+            this.proyecciones.pop();
             this.form = new FormArray(this.buildForm(this.proyecciones));
             this.dataRetrieved = true;
           },
@@ -250,6 +250,7 @@ export class PBURCostsComponent implements OnInit {
             title: "Exito"
           });
           this.proyecciones = result["result"]["proyecciones"];
+          this.proyecciones.pop();
           this.form.clear();
           this.form = new FormArray(this.buildForm(this.proyecciones));
           Swal.close();

src/app/components/investments/costs/vcn/vcn.costs.component.ts

@@ -211,7 +211,7 @@ export class VCNCostsComponent implements OnInit {
               res["result"]["id_inversion_instrumento"]["instrumento"][
                 "proyecciones"
               ];
-
+            this.proyecciones.pop();
             this.form = new FormArray(this.buildForm(this.proyecciones));
             this.dataRetrieved = true;
           },
@@ -250,6 +250,7 @@ export class VCNCostsComponent implements OnInit {
             title: "Exito"
           });
           this.proyecciones = result["result"]["proyecciones"];
+          this.proyecciones.pop();
           this.form.clear();
           this.form = new FormArray(this.buildForm(this.proyecciones));
           Swal.close();

src/app/components/investments/investments.component.html

@@ -116,7 +116,7 @@
                         "
                       >
                         <i class="fas fa-funnel-dollar"></i>
-                        Costos
+                        Proyecciones
                       </a>
                     </div>
                   </td>

src/app/components/investments/investments.component.ts

@@ -135,6 +135,8 @@ export class InvestmentsComponent implements OnInit {
           return false;
         }
         break;
+      case "FINV":
+        return true;
       default:
         return false;
     }

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

@@ -13,8 +13,6 @@ import { ProfileComponent } from "../../components/profile/profile.component";
 import { PluginsModule } from "../../components/plugins/plugins.module";
 
 import { MatDialogModule, MatPaginatorIntl } from "@angular/material";
-import { BrowserModule } from "@angular/platform-browser";
-import { NoopAnimationsModule } from "@angular/platform-browser/animations";
 
 import { MatTableExporterModule } from "mat-table-exporter";
 import {
@@ -31,12 +29,6 @@ import {
 } from "@angular/material";
 
 import { MatPasswordStrengthModule } from "@angular-material-extensions/password-strength";
-import {
-  BreadcrumbModule,
-  IconsModule,
-  WavesModule
-} from "angular-bootstrap-md";
-
 import { TermsComponent } from "@app/components/terms/terms.component";
 import { InvestmentProposalsComponent } from "@app/components/investment-proposals/investment-proposals.component";
 import { InvestmentProposalGeneralInfoComponent } from "@app/components/investment-proposals/general-info/general-info.component";
@@ -59,8 +51,6 @@ import { PBUR } from "@app/components/instruments/pbur/pbur.component";
 
 import { BONO } from "@app/components/instruments/bonos/bonos.component";
 import { DAP } from "@app/components/instruments/dap/dap.component";
-import { ANCComponent } from "@app/components/instruments/anc/anc.component";
-import { APNComponent } from "@app/components/instruments/apn/apn.component";
 
 import { InstrumentDirective } from "@app/components/investment-proposals/instrument/instrument.directive";
 import { WorkflowGuard } from "@app/services/investment-proposal-workflow.guard";
@@ -81,6 +71,12 @@ import { TIT } from "@app/components/instruments/titulos/titulos.component";
 import { EURB } from "@app/components/instruments/eurobonos/eurobonos.component";
 import { CINV } from "@app/components/instruments/certificados/certificados.component";
 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";
+import { FINVCostsComponent } from "@app/components/investments/costs/fondos/fondos.costs.component";
 
 // This array defines which "componentId" maps to which lazy-loaded module.
 
@@ -106,7 +102,7 @@ import { MatPaginatorIntlSpa } from "@app/models/i18n-paginator";
     AngularMyDatePickerModule,
     MatPasswordStrengthModule,
     HttpClientModule,
-    WavesModule
+    SelectModule
   ],
   providers: [
     { provide: MatPaginatorIntl, useClass: MatPaginatorIntlSpa },
@@ -146,8 +142,9 @@ import { MatPaginatorIntlSpa } from "@app/models/i18n-paginator";
     TIT,
     EURB,
     CINV,
-    ANCComponent,
-    APNComponent,
+    FINV,
+    OPC,
+    FUTU,
     InstrumentDirective,
     PaymentInfoComponent,
     PaymentRequirementComponent,
@@ -155,9 +152,11 @@ import { MatPaginatorIntlSpa } from "@app/models/i18n-paginator";
     DAPCostsComponent,
     VCNCostsComponent,
     PBURCostsComponent,
+    FINVCostsComponent,
     IncomesComponent,
     GeneralIncomeFormComponent,
-    PaymentApprovalComponent
+    PaymentApprovalComponent,
+    UploadLiquidationComponent
   ],
   entryComponents: [
     LETE,
@@ -169,8 +168,9 @@ import { MatPaginatorIntlSpa } from "@app/models/i18n-paginator";
     TIT,
     EURB,
     CINV,
-    ANCComponent,
-    APNComponent
+    FINV,
+    OPC,
+    FUTU
   ]
 })
 export class AdminModule {}

src/app/layouts/admin/admin.routing.ts

@@ -31,6 +31,8 @@ import { PBURCostsComponent } from "@app/components/investments/costs/pbur/pbur.
 import { IncomesComponent } from "@app/components/incomes/incomes.component";
 import { GeneralIncomeFormComponent } from "@app/components/incomes/general-form/general-form.component";
 import { PaymentApprovalComponent } from "@app/components/investment-proposals/payment-approval/payment-approval.component";
+import { UploadLiquidationComponent } from "@app/components/investment-proposals/upload-liquidation/upload-liquidation.component";
+import { FINVCostsComponent } from "@app/components/investments/costs/fondos/fondos.costs.component";
 
 export const AdminLayoutRoutes: Routes = [
   {
@@ -196,6 +198,10 @@ export const AdminLayoutRoutes: Routes = [
     path: "investment-proposal/:id/payment",
     component: PaymentRequirementComponent
   },
+  {
+    path: "investment-proposal/:id/upload-file",
+    component: UploadLiquidationComponent
+  },
   {
     path: "investment-proposal/:id",
     component: InvestmentProposalDetailComponent
@@ -208,6 +214,10 @@ export const AdminLayoutRoutes: Routes = [
     path: "investment-costs/vcn/:id",
     component: VCNCostsComponent
   },
+  {
+    path: "investment-costs/finv/:id",
+    component: FINVCostsComponent
+  },
   {
     path: "investment-costs/pbur/:id",
     component: PBURCostsComponent

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

@@ -166,6 +166,40 @@ export class InstrumentCalculations {
       );
   }
 
+  // Fondos de inversion
+  fondosCalc(
+    codigo_instrumento: string,
+    info_inversion: {
+      id_tipo_base: number;
+      id_periodicidad: number;
+      id_formato_ingreso: number;
+    },
+    info_instrumento: {
+      cuota_participacion: number;
+      valor_participacion_porcentaje: number;
+      comision_bolsa_porcentaje: number;
+      comision_casa_porcentaje: number;
+      dividendo_porcentaje: number;
+      rendimiento_porcentaje: number;
+      dias_liquidacion: number;
+      dias_vencimiento: number;
+      fecha_operacion: string;
+    }
+  ): Observable<boolean> {
+    return this.http
+      .post<any>(`${environment.productionApiUrl}/autocomplete`, {
+        codigo_instrumento,
+        info_inversion,
+        info_instrumento
+      })
+      .pipe(
+        map(response => {
+          return response;
+        }),
+        catchError(this.errorHandl)
+      );
+  }
+
   // Para vcn
   vcnCalc(
     codigo_instrumento: string,
@@ -268,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

@@ -8,11 +8,12 @@ import { VCN } from "@app/components/instruments/vcn/vcn.component";
 import { PBUR } from "@app/components/instruments/pbur/pbur.component";
 import { BONO } from "@app/components/instruments/bonos/bonos.component";
 import { DAP } from "@app/components/instruments/dap/dap.component";
-import { ANCComponent } from "@app/components/instruments/anc/anc.component";
-import { APNComponent } from "@app/components/instruments/apn/apn.component";
 import { CINV } from "@app/components/instruments/certificados/certificados.component";
 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"
@@ -37,14 +38,9 @@ export class InstrumentsService {
         key: "DAP",
         name: "Depósitos a plazo"
       }),
-      new Instrument(ANCComponent, {
-        key: "ANC",
-        name: "Acciones nacionales comunes"
-      }),
-      new Instrument(APNComponent, {
-        key: "APN",
-        name: "Acciones preferentes nacionales"
-      })
+      new Instrument(FINV, { key: "FINV", name: "Fondo de inversión" }),
+      new Instrument(OPC, { key: "OPC", name: "Opciones" }),
+      new Instrument(FUTU, { key: "FINV", name: "Futuros" })
     ];
   }
 }

src/app/services/investments.service.ts

@@ -95,6 +95,17 @@ export class InvestmentsService {
       );
   }
 
+  sendLiquidationFile(inversion: Object): Observable<boolean> {
+    return this.http
+      .post<any>(`${environment.productionApiUrl}/hoja-liquidacion`, inversion)
+      .pipe(
+        map(response => {
+          return response;
+        }),
+        catchError(this.errorHandl)
+      );
+  }
+
   sendPaymentInfoProposalInvestment(
     id: string,
     inversion: Object

src/assets/scss/material-dashboard.scss

@@ -209,3 +209,19 @@ input.form-control.is-invalid {
   color: black;
   z-index: 1;
 }
+
+ng-select {
+  font-size: 14px;
+}
+
+ng-select > div {
+  border: 1px solid #ddd;
+  border-radius: 4px;
+}
+
+ng-select > div > div.single > div.toggle {
+  color: #aaa;
+  line-height: 30px;
+  text-align: center;
+  width: 45px !important;
+}