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

angular.json

@@ -23,7 +23,10 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
             "aot": false,
-            "assets": ["src/favicon.ico", "src/assets"],
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
             "styles": [
               "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "node_modules/perfect-scrollbar/css/perfect-scrollbar.css",
@@ -98,7 +101,10 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
-            "assets": ["src/favicon.ico", "src/assets"],
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
             "styles": [
               "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "node_modules/perfect-scrollbar/css/perfect-scrollbar.css",
@@ -126,7 +132,9 @@
               "tsconfig.spec.json",
               "e2e/tsconfig.json"
             ],
-            "exclude": ["**/node_modules/**"]
+            "exclude": [
+              "**/node_modules/**"
+            ]
           }
         },
         "e2e": {
@@ -144,5 +152,8 @@
       }
     }
   },
-  "defaultProject": "frontend-inversiones"
-}
+  "defaultProject": "frontend-inversiones",
+  "cli": {
+    "analytics": false
+  }
+}

package.json

@@ -59,13 +59,13 @@
     "zone.js": "~0.9.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.803.21",
+    "@angular-devkit/build-angular": "^0.803.29",
     "@angular/cli": "~8.3.21",
     "@angular/compiler-cli": "~8.2.14",
     "@angular/language-service": "~8.2.14",
-    "@types/node": "~8.9.4",
     "@types/jasmine": "~3.3.8",
     "@types/jasminewd2": "~2.0.3",
+    "@types/node": "~8.9.4",
     "codelyzer": "^5.0.0",
     "jasmine-core": "~3.4.0",
     "jasmine-spec-reporter": "~4.2.1",

src/app/app.module.ts

@@ -30,6 +30,7 @@ import { LoginComponent } from "./components/login/login.component";
 import { TokenInterceptor } from "@app/services/token.interceptor";
 import { MatPasswordStrengthModule } from "@angular-material-extensions/password-strength";
 
+
 @NgModule({
   declarations: [AppComponent, AdminComponent, LoginComponent],
   imports: [

src/app/components/extras/convert.dec.pipe.ts

@@ -0,0 +1,35 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'numberPipe'
+})
+export class NumberPipePipe implements PipeTransform {
+
+  transform(val) {
+    if(val){
+
+    val = this.format_number(val.toString(), '');
+    }
+    return val;
+  }
+
+  format_number(number, prefix) {
+    let thousand_separator = ',',
+      decimal_separator = '.',
+      regex = new RegExp('[^' + decimal_separator + '\\d]', 'g'),
+      number_string = number.replace(regex, '').toString(),
+      split = number_string.split(decimal_separator),
+      rest = split[0].length % 3,
+      result = split[0].substr(0, rest),
+      thousands = split[0].substr(rest).match(/\d{3}/g);
+
+    if (thousands) {
+      let separator = rest ? thousand_separator : '';
+      result += separator + thousands.join(thousand_separator);
+    }
+    result = split[1] != undefined ? result + decimal_separator + split[1] : result;
+
+    return prefix == undefined ? result : (result ? prefix + result : '');
+  };
+
+}

src/app/components/incomes/general-form/general-form.component.html

@@ -112,6 +112,11 @@
                               type="text"
                               formControlName="capital"
                               class="form-control"
+                              [value]="
+                                investmentProposalForm.get('capital').value
+                                  | numberPipe
+                              "
+                              (input)="inputValidator($event)"
                               [ngClass]="{
                                 'is-invalid': submitted && f.capital.errors
                               }"
@@ -142,6 +147,11 @@
                             <input
                               type="text"
                               formControlName="ingreso_bruto"
+                              [value]="
+                                investmentProposalForm.get('ingreso_bruto')
+                                  .value | numberPipe
+                              "
+                              (input)="inputValidator($event)"
                               class="form-control"
                               [ngClass]="{
                                 'is-invalid':
@@ -174,6 +184,11 @@
                             <input
                               type="text"
                               formControlName="ingreso_neto"
+                              [value]="
+                                investmentProposalForm.get('ingreso_neto')
+                                  .value | numberPipe
+                              "
+                              (input)="inputValidator($event)"
                               class="form-control"
                               [ngClass]="{
                                 'is-invalid': submitted && f.ingreso_neto.errors
@@ -293,27 +308,24 @@
                           </div>
                         </div>
                       </div>
-
                       <div class="col-lg-6 col-sm-12 pr-xl-3">
                         <div class="form-group">
-                          <label for="cuenta_bancaria">Cuenta bancaria: </label>
+                          <label for="cuenta_bancaria"
+                            >Cuenta bancaria destino:
+                          </label>
 
                           <select
                             class="custom-select"
                             formControlName="cuenta_bancaria"
-                            [ngClass]="{
-                              'is-invalid':
-                                submitted && f.cuenta_bancaria.errors
-                            }"
                           >
                             <option
-                              *ngFor="let item of accounts"
+                              *ngFor="let item of accounts_destination"
                               [value]="item.id_cuenta_bancaria"
                             >
-                              {{ nameBankAccounts(item.id_banco) }} -
                               {{ item.nombre }}</option
                             >
                           </select>
+
                           <div
                             *ngIf="submitted && f.cuenta_bancaria.errors"
                             class="invalid-feedback"

src/app/components/incomes/general-form/general-form.component.ts

@@ -118,6 +118,8 @@ export class GeneralIncomeFormComponent implements OnInit {
   conciliateObject: any;
   has_conciliate: boolean;
   showIncomeForm: boolean = false;
+  accounts_origin: any;
+  accounts_destination: any;
 
   constructor(
     private catalogService: CatalogsService,
@@ -142,12 +144,6 @@ export class GeneralIncomeFormComponent implements OnInit {
     Swal.showLoading();
   }
 
-  nameBankAccounts(id: string) {
-    let bank;
-    bank = this.banks.find(e => e.id_banco == id);
-    return bank.nombre;
-  }
-
   ngOnInit() {
     this.partial = false;
 
@@ -161,6 +157,18 @@ export class GeneralIncomeFormComponent implements OnInit {
       this.idProjection = params["id_proyeccion_ingreso"];
     });
 
+    this.catalogService
+      .getBankAccounts("origen", this.idInversion)
+      .subscribe(res => {
+        this.accounts_origin = res["result"];
+      });
+
+    this.catalogService
+      .getBankAccounts("destino", this.idInversion)
+      .subscribe(res => {
+        this.accounts_destination = res["result"];
+      });
+
     this.incomesService
       .getProjection(
         this.idInversion,
@@ -214,41 +222,38 @@ export class GeneralIncomeFormComponent implements OnInit {
     this.catalogService.getCountries().subscribe(res => {
       this.funds = res;
     });
-    this.catalogService.getCatalogInfo("bancos").subscribe(res => {
-      this.banks = res;
-      this.catalogService.getCatalogInfo("cuentas-bancarias").subscribe(res => {
-        this.accounts = res;
-      });
-      //this.payment_types = res;
-    });
 
     this.investmentProposalForm = this.formBuilder.group({
       capital: [
         "",
         [
           Validators.required,
-          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+          //Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+          Validators.pattern("^[0-9,.]+$")
         ]
       ],
       ingreso_bruto: [
         "",
         [
           Validators.required,
-          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+          //Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+          Validators.pattern("^[0-9,.]+$")
         ]
       ],
       renta: [
         "",
         [
           Validators.required,
-          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+          //Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+          Validators.pattern("^[0-9,.]+$")
         ]
       ],
       ingreso_neto: [
         "",
         [
           Validators.required,
-          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+          //Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+          Validators.pattern("^[0-9,.]+$")
         ]
       ],
       tipo_pago: ["", Validators.required],
@@ -274,7 +279,9 @@ export class GeneralIncomeFormComponent implements OnInit {
 
   submitIncome(form: any) {
     this.submitted = true;
-    console.log(form);
+    let inversionCapital = this.clearValor(form.value.capital, "decimal");
+    let inversionBruto = this.clearValor(form.value.ingreso_bruto, "decimal");
+    let inversionNeto = this.clearValor(form.value.ingreso_neto, "decimal");
     if (!form.valid) {
       return false;
     }
@@ -284,10 +291,10 @@ export class GeneralIncomeFormComponent implements OnInit {
       id_proyeccion_ingreso_instrumento: this.idInstrumentIncome,
       fecha_proyeccion_pago: this.projectionDate,
 
-      capital: form.value.capital,
-      ingreso_bruto: form.value.ingreso_bruto,
+      capital: inversionCapital,
+      ingreso_bruto: inversionBruto,
       renta: form.value.renta,
-      ingreso_neto: form.value.ingreso_neto,
+      ingreso_neto: inversionNeto,
       id_cuenta_bancaria: form.value.cuenta_bancaria,
       id_tipo_pago: form.value.tipo_pago,
       comentario: form.value.comentario
@@ -336,6 +343,21 @@ export class GeneralIncomeFormComponent implements OnInit {
     );
   }
 
+  clearValor(value, tipoDato) {
+    value = parseFloat(value.toString().replace(",", ""));
+    return value;
+  }
+
+  public inputValidator(event: any) {
+    //console.log(event.target.value);
+    const pattern = /^[0-9]*$/;
+    //let inputChar = String.fromCharCode(event.charCode)
+
+    if (!pattern.test(event.target.value)) {
+      event.target.value = event.target.value.replace(/[^\d,.]+/g, "");
+      // invalid character, prevent input
+    }
+  }
   conciliateIncome() {
     this.conciliateObject = {
       id_inversion_instrumento: this.projectionRes.id_inversion_instrumento,

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

@@ -7,7 +7,29 @@
     [formGroup]="investmentProposalForm"
   >
     <div class="row">
-      <div class=" col-md-6 col-sm-12 border border-light">
+      <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]="item.codigo == tipoEjecucion"
+          >
+            {{ item.nombre }}</option
+          >
+        </select>
+      </div>
+      <br />
+    </div>
+    <br />
+    <div class="row">
+      <div class=" col-md-12 col-sm-12 border border-light">
         <div class="row no-gutters">
           <!-- Valor nominal compra -->
 
@@ -15,6 +37,36 @@
             <h5>Compra</h5>
           </div>
 
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="renta_porcentaje">Renta: </label>
+              <div class="input-box-container">
+                <p>
+                  <i class="fas fa-percent" aria-hidden="true"></i>
+                </p>
+                <input
+                  type="text"
+                  formControlName="renta_porcentaje"
+                  class="form-control"
+                  [ngClass]="{
+                    'is-invalid': submitted && f.renta_porcentaje.errors
+                  }"
+                />
+                <div
+                  *ngIf="submitted && f.renta_porcentaje.errors"
+                  class="invalid-feedback"
+                >
+                  <div *ngIf="f.renta_porcentaje.errors.required">
+                    Campo requerido
+                  </div>
+                  <div *ngIf="f.renta_porcentaje.errors.pattern">
+                    Debe ingresar una cifra válida
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
           <div class="col-lg-6 col-sm-12 pr-xl-3">
             <div class="form-group">
               <label for="costo_cedeval">Costo CEDEVAL: </label>
@@ -394,8 +446,13 @@
           </div>
         </div>
       </div>
-
-      <div class=" col-md-6 col-sm-12 border border-light">
+    </div>
+    <br />
+    <div class="row">
+      <div
+        class=" col-md-12 col-sm-12 border border-light"
+        *ngIf="tipoEjecucion == 1"
+      >
         <div class="row no-gutters">
           <div class="col-12">
             <h5>Venta</h5>
@@ -823,7 +880,9 @@
             {{ fecha_inicio_vigencia }}
           </div>
         </div>
+      </div>
 
+      <div class="row" *ngIf="tipoEjecucion == 1">
         <div class="col-12">
           <h3>
             Instrumento de venta
@@ -899,71 +958,120 @@
             $USD {{ valor_transado_venta | number: "1.2-4" }}
           </div>
         </div>
-
+        <div class="col-sm-4">
+          <h4>Monto Recibir:</h4>
+          <div class="field">
+            $USD {{ monto_recibir | number: "1.2-4" }}
+          </div>
+        </div>
+        
+      </div>
+      <div class="row">
         <div class="row align-container" *ngIf="operation_result">
           <div class="col-12">
             <h3>
               Resultado de la operación
             </h3>
           </div>
+
           <div class="col-sm-4">
-            <h4>Monto a recibir:</h4>
-            <div class="field">$USD {{ monto_recibir | number: "1.2-4" }}</div>
+            <h4>Valor nominal compra:</h4>
+            <div class="field">
+              $USD{{ operation_results_work.valor_transado_compra }}
+            </div>
           </div>
+
           <div class="col-sm-4">
             <h4>Días tenencia total:</h4>
             <div class="field">
-              {{ dias_tenencia_total }}
+              {{ operation_results_work.dias_tenencia_total }}
             </div>
           </div>
+
+          <div class="col-sm-4">
+            <h4>Precio compra:</h4>
+            <div class="field">
+              {{ operation_results_work.precio_compra }}
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Precio venta:</h4>
+            <div class="field">
+              {{ operation_results_work.precio_venta }}
+            </div>
+          </div>
+
           <div class="col-sm-4">
             <h4>Ingresos intereses:</h4>
             <div class="field">
-              $USD {{ ingresos_intereses | number: "1.2-4" }}
+              $USD
+              {{ operation_results_work.ingresos_intereses | number: "1.2-4" }}
             </div>
           </div>
           <div class="col-sm-4">
             <h4>Costos totales:</h4>
-            <div class="field">$USD {{ costos_totales | number: "1.2-4" }}</div>
+            <div class="field">
+              $USD {{ operation_results_work.costos_totales | number: "1.2-4" }}
+            </div>
           </div>
           <div class="col-sm-4">
-            <h4>Ganancia / Pérdida total:</h4>
+            <h4>Ganancia o pérdida total:</h4>
             <div class="field">
-              $USD {{ ganancia_perdida_total | number: "1.2-4" }}
+              $USD
+              {{
+                operation_results_work.ganancia_perdida_total_neto
+                  | number: "1.2-4"
+              }}
             </div>
           </div>
           <div class="col-sm-4">
-            <h4>Ganancia / Pérdida de capital:</h4>
+            <h4>Ganancia o pérdida de capital:</h4>
             <div class="field">
-              {{ ganancia_perdida_capital_porcentaje | number: "1.2-4" }}%
+              {{
+                operation_results_work.ganancia_perdida_capital_porcentaje
+                  | number: "1.2-4"
+              }}%
             </div>
           </div>
 
           <div class="col-sm-4">
             <h4>Interés (%):</h4>
             <div class="field">
-              {{ intereses_porcentaje | number: "1.2-4" }} %
+              {{
+                operation_results_work.intereses_porcentaje | number: "1.2-4"
+              }}
+              %
             </div>
           </div>
           <div class="col-sm-4">
             <h4>Interés neto antes de impuesto (%):</h4>
             <div class="field">
-              {{ neto_antes_impuesto_porcentaje | number: "1.2-4" }}
+              {{
+                operation_results_work.neto_antes_renta_porcentaje
+                  | number: "1.2-4"
+              }}
               %
             </div>
           </div>
           <div class="col-sm-4">
             <h4>Interés neto después de impuesto (%):</h4>
             <div class="field">
-              {{ neto_despues_impuesto_porcentaje | number: "1.2-4" }}
+              {{
+                operation_results_work.neto_despues_renta_porcentaje
+                  | number: "1.2-4"
+              }}
               %
             </div>
           </div>
           <div class="col-sm-4">
-            <h4>Total de ingresos recibidos:</h4>
+            <h4>Total Ingresos Recibidos:</h4>
             <div class="field">
               $USD
-              {{ total_ingresos_recibidos | number: "1.2-4" }}
+              {{
+                operation_results_work.total_ingresos_recibidos
+                  | number: "1.2-4"
+              }}
             </div>
           </div>
         </div>
@@ -1012,15 +1120,14 @@
             <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
+                    : row.ingreso_bruto | number: "1.2-4"
                 }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD
-                {{
+                ${{
                   consolidado_proyeccion.total_ingreso_bruto | number: "1.2-4"
                 }}
               </td>
@@ -1028,32 +1135,28 @@
             <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
+                    : row.ingreso_neto | number: "1.2-4"
                 }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD
-                {{
+                ${{
                   consolidado_proyeccion.total_ingreso_neto | number: "1.2-4"
                 }}
               </td>
             </ng-container>
 
-            <ng-container matColumnDef="impuesto">
-              <th mat-header-cell *matHeaderCellDef>Impuesto</th>
+            <ng-container matColumnDef="renta">
+              <th mat-header-cell *matHeaderCellDef>Renta ($)</th>
               <td mat-cell *matCellDef="let row">
-                {{
-                  row.impuesto == "" || row.impuesto == undefined
-                    ? "-"
-                    : row.impuesto
+                ${{
+                  row.renta == "" || row.renta == undefined ? "-" : row.renta  | number: "1.2-4"
                 }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD
-                {{ consolidado_proyeccion.total_impuesto | number: "1.2-4" }}
+                ${{ consolidado_proyeccion.total_renta | number: "1.2-4" }}
               </td>
             </ng-container>
 
@@ -1093,6 +1196,12 @@
           Instrumento de compra
         </h3>
       </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Renta (%):</h4>
+        <div class="field">
+          {{ instrument_work_summary.renta_porcentaje | number: "1.2-4" }}%
+        </div>
+      </div>
       <div class="col-lg-3 col-md-4 col-sm-6">
         <h4>Costo CEDEVAL:</h4>
         <div class="field">
@@ -1279,8 +1388,7 @@
       </div>
     </div>
 
-    <!--
-    <div class="row">
+    <div class="row" *ngIf="tipoEjecucion == 1">
       <div class="col-12">
         <h3>
           Instrumento de venta
@@ -1431,6 +1539,13 @@
           {{ instrument_work_summary.valor_transado_venta | number: "1.2-4" }}
         </div>
       </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Monto Recibir:</h4>
+        <div class="field">
+          $USD
+          {{ instrument_work_summary.monto_recibir | number: "1.2-4" }}
+        </div>
+      </div>
       <div class="col-lg-3 col-md-4 col-sm-6">
         <h4>Ultima fecha de cupón:</h4>
         <div class="field">
@@ -1459,7 +1574,7 @@
       <div class="col-lg-3 col-md-4 col-sm-6">
         <h4>Valor nominal compra:</h4>
         <div class="field">
-          $USD{{ operation_results_work.valor_nominal_compra }}
+          $USD{{ operation_results_work.valor_transado_compra }}
         </div>
       </div>
       <div class="col-lg-3 col-md-4 col-sm-6">
@@ -1468,6 +1583,21 @@
           {{ operation_results_work.dias_tenencia_total }}
         </div>
       </div>
+
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Precio compra:</h4>
+        <div class="field">
+          {{ operation_results_work.precio_compra }}
+        </div>
+      </div>
+
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Precio venta:</h4>
+        <div class="field">
+          {{ operation_results_work.precio_venta }}
+        </div>
+      </div>
+
       <div class="col-lg-3 col-md-4 col-sm-6">
         <h4>Ingresos intereses:</h4>
         <div class="field">
@@ -1484,7 +1614,9 @@
         <h4>Ganancia o pérdida total:</h4>
         <div class="field">
           $USD
-          {{ operation_results_work.ganancia_perdida_total | number: "1.2-4" }}
+          {{
+            operation_results_work.ganancia_perdida_total_neto | number: "1.2-4"
+          }}
         </div>
       </div>
       <div class="col-lg-3 col-md-4 col-sm-6">
@@ -1507,8 +1639,7 @@
         <h4>Interés neto antes de impuesto (%):</h4>
         <div class="field">
           {{
-            operation_results_work.neto_antes_impuesto_porcentaje
-              | number: "1.2-4"
+            operation_results_work.neto_antes_renta_porcentaje | number: "1.2-4"
           }}
           %
         </div>
@@ -1517,14 +1648,23 @@
         <h4>Interés neto después de impuesto (%):</h4>
         <div class="field">
           {{
-            operation_results_work.neto_despues_impuesto_porcentaje
+            operation_results_work.neto_despues_renta_porcentaje
               | number: "1.2-4"
           }}
           %
         </div>
       </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Total Ingresos Recibidos:</h4>
+        <div class="field">
+          $USD
+          {{
+            operation_results_work.total_ingresos_recibidos | number: "1.2-4"
+          }}
+        </div>
+      </div>
     </div>
-  -->
+
     <br />
     <div *ngIf="hasProjections" class="instrument-calcs-summary">
       <div class="row">
@@ -1570,15 +1710,14 @@
             <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
+                    : row.ingreso_bruto | number: "1.2-4"
                 }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD
-                {{
+                ${{
                   consolidado_proyeccion.total_ingreso_bruto | number: "1.2-4"
                 }}
               </td>
@@ -1587,32 +1726,28 @@
             <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
+                    : row.ingreso_neto | number: "1.2-4"
                 }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD
-                {{
+                ${{
                   consolidado_proyeccion.total_ingreso_neto | number: "1.2-4"
                 }}
               </td>
             </ng-container>
 
-            <ng-container matColumnDef="impuesto">
-              <th mat-header-cell *matHeaderCellDef>Impuesto</th>
+            <ng-container matColumnDef="renta">
+              <th mat-header-cell *matHeaderCellDef>Renta ($)</th>
               <td mat-cell *matCellDef="let row">
-                {{
-                  row.impuesto == "" || row.impuesto == undefined
-                    ? "-"
-                    : row.impuesto
+                ${{
+                  row.renta == "" || row.renta == undefined ? "-" : row.renta | number: "1.2-4"
                 }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD
-                {{ consolidado_proyeccion.total_impuesto | number: "1.2-4" }}
+                ${{ consolidado_proyeccion.total_renta | number: "1.2-4" }}
               </td>
             </ng-container>
 

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

@@ -30,7 +30,7 @@ export class BONO implements InstrumentComponent {
     "fecha_pago",
     "ingreso_bruto",
     "ingreso_neto",
-    "impuesto"
+    "renta"
   ];
 
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
@@ -128,6 +128,11 @@ export class BONO implements InstrumentComponent {
   ytm_vencimiento_porcentaje_venta: any;
   comision_bolsa_venta: any;
   consolidado_proyeccion: any;
+  ejecuciones = [
+    { codigo: 1, nombre: "Completa" },
+    { codigo: 0, nombre: "Parcial" }
+  ];
+  tipoEjecucion: number = 0;
 
   constructor(
     private formBuilder: FormBuilder,
@@ -138,7 +143,6 @@ export class BONO implements InstrumentComponent {
     public datepipe: DatePipe
   ) {
     this.instrument_work = this.formDataService.getWork();
-
     this.instrument_exists = this.instrument_work == undefined;
     this.general = this.formDataService.getGeneralInfo();
 
@@ -146,6 +150,9 @@ export class BONO implements InstrumentComponent {
       this.instrument_work != undefined &&
       this.instrument_work.proyecciones != ""
     ) {
+      if (+this.instrument_work["valor_nominal_venta"] > 0) {
+        this.tipoEjecucion = 1;
+      }
       this.hasProjections = true;
       this.consolidado_proyeccion = this.instrument_work.proyecciones[
         this.instrument_work.proyecciones.length - 1
@@ -172,6 +179,15 @@ export class BONO implements InstrumentComponent {
     }
 
     this.investmentProposalForm = this.formBuilder.group({
+      ejecucion: [this.instrument_exists ? "" : this.tipoEjecucion],
+
+      renta_porcentaje: [
+        this.instrument_exists ? "" : this.instrument_work.renta_porcentaje,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
       costo_cedeval: [
         this.instrument_exists ? "" : this.instrument_work.costo_cedeval,
         [
@@ -403,6 +419,8 @@ export class BONO implements InstrumentComponent {
           id_periodicidad: +this.general.periodicidad
         },
         {
+          completo: this.tipoEjecucion,
+          renta_porcentaje: +this.f.renta_porcentaje.value,
           costo_cedeval: +this.f.costo_cedeval.value,
           costo_transferencia: +this.f.costo_transferencia.value,
           valor_nominal_compra: +this.f.valor_nominal_compra.value,
@@ -423,19 +441,31 @@ export class BONO implements InstrumentComponent {
           comision_bolsa_porcentaje_venta: this.f
             .comision_bolsa_porcentaje_venta.value,
 
-          fecha_vencimiento_compra: this.f.fecha_vencimiento_compra.value
-            .singleDate.formatted,
-          fecha_ultima_cupon_compra: this.f.fecha_ultima_cupon_compra.value
-            .singleDate.formatted,
-          fecha_liquidacion_compra: this.f.fecha_liquidacion_compra.value
-            .singleDate.formatted,
-
-          fecha_vencimiento_venta: this.f.fecha_vencimiento_venta.value
-            .singleDate.formatted,
-          fecha_ultima_cupon_venta: this.f.fecha_ultima_cupon_venta.value
-            .singleDate.formatted,
-          fecha_liquidacion_venta: this.f.fecha_liquidacion_venta.value
-            .singleDate.formatted
+          fecha_vencimiento_compra:
+            this.f.fecha_vencimiento_compra.value == ""
+              ? ""
+              : this.f.fecha_vencimiento_compra.value.singleDate.formatted,
+          fecha_ultima_cupon_compra:
+            this.f.fecha_ultima_cupon_compra.value == ""
+              ? ""
+              : this.f.fecha_ultima_cupon_compra.value.singleDate.formatted,
+          fecha_liquidacion_compra:
+            this.f.fecha_liquidacion_compra.value == ""
+              ? ""
+              : this.f.fecha_liquidacion_compra.value.singleDate.formatted,
+
+          fecha_vencimiento_venta:
+            this.f.fecha_vencimiento_venta.value == ""
+              ? ""
+              : this.f.fecha_vencimiento_venta.value.singleDate.formatted,
+          fecha_ultima_cupon_venta:
+            this.f.fecha_ultima_cupon_venta.value == ""
+              ? ""
+              : this.f.fecha_ultima_cupon_venta.value.singleDate.formatted,
+          fecha_liquidacion_venta:
+            this.f.fecha_liquidacion_venta.value == ""
+              ? ""
+              : this.f.fecha_liquidacion_venta.value.singleDate.formatted
         }
       )
       .subscribe(
@@ -476,64 +506,43 @@ export class BONO implements InstrumentComponent {
             ans["result"]["instrumento_compra"]["fecha_inicio_vigencia"];
 
           // Instrumento de venta
-          this.comision_casa_venta =
-            ans["result"]["instrumento_venta"]["comision_casa_venta"];
-          this.comision_bolsa_venta =
-            ans["result"]["instrumento_venta"]["comision_bolsa_venta"];
-          this.fecha_siguiente_cupon_venta =
-            ans["result"]["instrumento_venta"]["fecha_siguiente_cupon_venta"];
-          this.dias_vencimiento_venta =
-            ans["result"]["instrumento_venta"]["dias_vencimiento_venta"];
-          this.dias_acumulados_venta =
-            ans["result"]["instrumento_venta"]["dias_acumulados_venta"];
-          this.ytm_vencimiento_comision_porcentaje_venta =
-            ans["result"]["instrumento_venta"][
-              "ytm_vencimiento_comision_porcentaje_venta"
-            ];
-          this.ytm_vencimiento_porcentaje_venta =
-            ans["result"]["instrumento_venta"][
-              "ytm_vencimiento_porcentaje_venta"
-            ];
-          this.interes_acumulado_venta =
-            ans["result"]["instrumento_venta"]["interes_acumulado_venta"];
-          this.interes_acumulado_porcentaje_venta =
-            ans["result"]["instrumento_venta"][
-              "interes_acumulado_porcentaje_venta"
-            ];
-          this.precio_sucio_porcentaje_venta =
-            ans["result"]["instrumento_venta"]["precio_sucio_porcentaje_venta"];
-          this.valor_transado_venta =
-            ans["result"]["instrumento_venta"]["valor_transado_venta"];
-          this.monto_recibir =
-            ans["result"]["instrumento_venta"]["monto_recibir"];
-
-          // Resultado de la operacion
-          this.dias_tenencia_total =
-            ans["result"]["resultado_operacion"]["dias_tenencia_total"];
-          this.ganancia_perdida_capital =
-            ans["result"]["resultado_operacion"]["ganancia_perdida_capital"];
-          this.ingresos_intereses =
-            ans["result"]["resultado_operacion"]["ingresos_intereses"];
-          this.costos_totales =
-            ans["result"]["resultado_operacion"]["costos_totales"];
-          this.ganancia_perdida_total =
-            ans["result"]["resultado_operacion"]["ganancia_perdida_total"];
-          this.ganancia_perdida_capital_porcentaje =
-            ans["result"]["resultado_operacion"][
-              "ganancia_perdida_capital_porcentaje"
-            ];
-          this.intereses_porcentaje =
-            ans["result"]["resultado_operacion"]["intereses_porcentaje"];
-          this.neto_antes_impuesto_porcentaje =
-            ans["result"]["resultado_operacion"][
-              "neto_antes_impuesto_porcentaje"
-            ];
-          this.neto_despues_impuesto_porcentaje =
-            ans["result"]["resultado_operacion"][
-              "neto_despues_impuesto_porcentaje"
-            ];
-          this.total_ingresos_recibidos =
-            ans["result"]["resultado_operacion"]["total_ingresos_recibidos"];
+          if (this.tipoEjecucion == 1) {
+            this.comision_casa_venta =
+              ans["result"]["instrumento_venta"]["comision_casa_venta"];
+            this.comision_bolsa_venta =
+              ans["result"]["instrumento_venta"]["comision_bolsa_venta"];
+            this.fecha_siguiente_cupon_venta =
+              ans["result"]["instrumento_venta"]["fecha_siguiente_cupon_venta"];
+            this.dias_vencimiento_venta =
+              ans["result"]["instrumento_venta"]["dias_vencimiento_venta"];
+            this.dias_acumulados_venta =
+              ans["result"]["instrumento_venta"]["dias_acumulados_venta"];
+            this.ytm_vencimiento_comision_porcentaje_venta =
+              ans["result"]["instrumento_venta"][
+                "ytm_vencimiento_comision_porcentaje_venta"
+              ];
+            this.ytm_vencimiento_porcentaje_venta =
+              ans["result"]["instrumento_venta"][
+                "ytm_vencimiento_porcentaje_venta"
+              ];
+            this.interes_acumulado_venta =
+              ans["result"]["instrumento_venta"]["interes_acumulado_venta"];
+            this.interes_acumulado_porcentaje_venta =
+              ans["result"]["instrumento_venta"][
+                "interes_acumulado_porcentaje_venta"
+              ];
+            this.precio_sucio_porcentaje_venta =
+              ans["result"]["instrumento_venta"][
+                "precio_sucio_porcentaje_venta"
+              ];
+            this.valor_transado_venta =
+              ans["result"]["instrumento_venta"]["valor_transado_venta"];
+            this.monto_recibir =
+              ans["result"]["instrumento_venta"]["monto_recibir"];
+
+            this.operation_results_work = ans["result"]["resultado_operacion"];
+            this.operation_result = true;
+          }
 
           // Proyecciones
           this.proyecciones = ans["result"]["proyecciones"];
@@ -545,13 +554,16 @@ export class BONO implements InstrumentComponent {
             this.proyecciones = ans["result"]["proyecciones"];
           }
 
-          this.operation_result = true;
           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;
 
           this.bonosObject = {
+            completo: this.tipoEjecucion,
+            cancelado: this.tipoEjecucion,
+            renta_porcentaje: this.investmentProposalForm.value
+              .renta_porcentaje,
             costo_cedeval: this.investmentProposalForm.value.costo_cedeval,
             costo_transferencia: this.investmentProposalForm.value
               .costo_transferencia,
@@ -567,18 +579,6 @@ export class BONO implements InstrumentComponent {
             comision_bolsa_porcentaje_compra: this.investmentProposalForm.value
               .comision_bolsa_porcentaje_compra,
 
-            valor_nominal_venta: this.investmentProposalForm.value
-              .valor_nominal_venta,
-            precio_venta: this.investmentProposalForm.value.precio_venta,
-            precio_vencimiento_venta: this.investmentProposalForm.value
-              .precio_vencimiento_venta,
-            cupon_porcentaje_venta: this.investmentProposalForm.value
-              .cupon_porcentaje_venta,
-            comision_casa_porcentaje_venta: this.investmentProposalForm.value
-              .comision_casa_porcentaje_venta,
-            comision_bolsa_porcentaje_venta: this.investmentProposalForm.value
-              .comision_bolsa_porcentaje_venta,
-
             fecha_vencimiento_compra: this.f.fecha_vencimiento_compra.value
               .singleDate.formatted,
             fecha_ultima_cupon_compra: this.f.fecha_ultima_cupon_compra.value
@@ -586,13 +586,6 @@ export class BONO implements InstrumentComponent {
             fecha_liquidacion_compra: this.f.fecha_liquidacion_compra.value
               .singleDate.formatted,
 
-            fecha_vencimiento_venta: this.f.fecha_vencimiento_venta.value
-              .singleDate.formatted,
-            fecha_ultima_cupon_venta: this.f.fecha_ultima_cupon_venta.value
-              .singleDate.formatted,
-            fecha_liquidacion_venta: this.f.fecha_liquidacion_venta.value
-              .singleDate.formatted,
-
             // Instrumento de compra
 
             comision_casa_compra: this.comision_casa_compra,
@@ -611,24 +604,7 @@ export class BONO implements InstrumentComponent {
             valor_transado_compra: this.valor_transado_compra,
             monto_pagar: this.monto_pagar,
             fecha_inicio_vigencia: this.fecha_inicio_vigencia,
-            // Instrumento de venta
-
-            comision_casa_venta: this.comision_casa_venta,
-            comision_bolsa_venta: this.comision_bolsa_venta,
-
-            fecha_siguiente_cupon_venta: this.fecha_siguiente_cupon_venta,
-            dias_vencimiento_venta: this.dias_vencimiento_venta,
-            dias_acumulados_venta: this.dias_acumulados_venta,
-            ytm_vencimiento_porcentaje_venta: this
-              .ytm_vencimiento_porcentaje_venta,
-            ytm_vencimiento_comision_porcentaje_venta: this
-              .ytm_vencimiento_comision_porcentaje_venta,
-
-            interes_acumulado_venta: this.interes_acumulado_venta,
-            interes_acumulado_porcentaje_venta: this
-              .interes_acumulado_porcentaje_venta,
-            precio_sucio_porcentaje_venta: this.precio_sucio_porcentaje_venta,
-            valor_transado_venta: this.valor_transado_venta,
+
             // Resultado de la operacion
             /*
             monto_recibir: this.monto_recibir,
@@ -646,8 +622,72 @@ export class BONO implements InstrumentComponent {
             total_ingresos_recibidos: this.total_ingresos_recibidos,
             */
             // Proyecciones
+
             proyecciones: this.proyecciones
           };
+          if (this.tipoEjecucion == 1) {
+            this.bonosObject[
+              "valor_nominal_venta"
+            ] = this.investmentProposalForm.value.valor_nominal_venta;
+            this.bonosObject[
+              "precio_venta"
+            ] = this.investmentProposalForm.value.precio_venta;
+            this.bonosObject[
+              "precio_vencimiento_venta"
+            ] = this.investmentProposalForm.value.precio_vencimiento_venta;
+            this.bonosObject[
+              "comision_casa_porcentaje_venta"
+            ] = this.investmentProposalForm.value.comision_casa_porcentaje_venta;
+            this.bonosObject[
+              "cupon_porcentaje_venta"
+            ] = this.investmentProposalForm.value.cupon_porcentaje_venta;
+            this.bonosObject[
+              "comision_bolsa_porcentaje_venta"
+            ] = this.investmentProposalForm.value.comision_bolsa_porcentaje_venta;
+            this.bonosObject[
+              "fecha_vencimiento_venta"
+            ] = this.f.fecha_vencimiento_venta.value.singleDate.formatted;
+            this.bonosObject[
+              "fecha_ultima_cupon_venta"
+            ] = this.f.fecha_ultima_cupon_venta.value.singleDate.formatted;
+            this.bonosObject[
+              "fecha_liquidacion_venta"
+            ] = this.f.fecha_liquidacion_venta.value.singleDate.formatted;
+            this.bonosObject["comision_casa_venta"] = this.comision_casa_venta;
+            this.bonosObject[
+              "comision_bolsa_venta"
+            ] = this.comision_bolsa_venta;
+            this.bonosObject[
+              "fecha_siguiente_cupon_venta"
+            ] = this.fecha_siguiente_cupon_venta;
+            this.bonosObject[
+              "dias_vencimiento_venta"
+            ] = this.dias_vencimiento_venta;
+            this.bonosObject[
+              "dias_acumulados_venta"
+            ] = this.dias_acumulados_venta;
+            this.bonosObject[
+              "ytm_vencimiento_porcentaje_venta"
+            ] = this.ytm_vencimiento_porcentaje_venta;
+            this.bonosObject[
+              "ytm_vencimiento_comision_porcentaje_venta"
+            ] = this.ytm_vencimiento_comision_porcentaje_venta;
+            this.bonosObject[
+              "interes_acumulado_venta"
+            ] = this.interes_acumulado_venta;
+            this.bonosObject[
+              "interes_acumulado_porcentaje_venta"
+            ] = this.interes_acumulado_porcentaje_venta;
+            this.bonosObject[
+              "precio_sucio_porcentaje_venta"
+            ] = this.precio_sucio_porcentaje_venta;
+            this.bonosObject[
+              "valor_transado_venta"
+            ] = this.valor_transado_venta;
+            this.bonosObject[
+              "monto_recibir"
+            ] = this.monto_recibir;
+          }
 
           this.formDataService.setWork(this.bonosObject);
           Swal.close();
@@ -686,4 +726,90 @@ export class BONO implements InstrumentComponent {
   goToNext(form: any) {
     this.getCalculations(form, true);
   }
+
+  toggle_ejecucion(input: any) {
+    this.tipoEjecucion = +input;
+    this.setValidators();
+  }
+
+  setValidators() {
+    const precio_venta = this.investmentProposalForm.get("precio_venta");
+
+    const valor_nominal_venta = this.investmentProposalForm.get(
+      "valor_nominal_venta"
+    );
+    const precio_vencimiento_venta = this.investmentProposalForm.get(
+      "precio_vencimiento_venta"
+    );
+    const cupon_porcentaje_venta = this.investmentProposalForm.get(
+      "cupon_porcentaje_venta"
+    );
+    const comision_casa_porcentaje_venta = this.investmentProposalForm.get(
+      "comision_casa_porcentaje_venta"
+    );
+    const comision_bolsa_porcentaje_venta = this.investmentProposalForm.get(
+      "comision_bolsa_porcentaje_venta"
+    );
+    const fecha_ultima_cupon_venta = this.investmentProposalForm.get(
+      "fecha_ultima_cupon_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_venta.setValidators([
+        Validators.required,
+        Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+      ]);
+
+      valor_nominal_venta.setValidators([
+        Validators.required,
+        Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+      ]);
+      precio_vencimiento_venta.setValidators([
+        Validators.required,
+        Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+      ]);
+      cupon_porcentaje_venta.setValidators([
+        Validators.required,
+        Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+      ]);
+      comision_casa_porcentaje_venta.setValidators([
+        Validators.required,
+        Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+      ]);
+      comision_bolsa_porcentaje_venta.setValidators([
+        Validators.required,
+        Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+      ]);
+      fecha_ultima_cupon_venta.setValidators([Validators.required]);
+      fecha_liquidacion_venta.setValidators([Validators.required]);
+      fecha_vencimiento_venta.setValidators([Validators.required]);
+    } else {
+      precio_venta.setValidators(null);
+
+      valor_nominal_venta.setValidators(null);
+      precio_vencimiento_venta.setValidators(null);
+      cupon_porcentaje_venta.setValidators(null);
+      comision_casa_porcentaje_venta.setValidators(null);
+      comision_bolsa_porcentaje_venta.setValidators(null);
+      fecha_ultima_cupon_venta.setValidators(null);
+      fecha_liquidacion_venta.setValidators(null);
+      fecha_vencimiento_venta.setValidators(null);
+    }
+    precio_venta.updateValueAndValidity();
+
+    valor_nominal_venta.updateValueAndValidity();
+    precio_vencimiento_venta.updateValueAndValidity();
+    cupon_porcentaje_venta.updateValueAndValidity();
+    comision_casa_porcentaje_venta.updateValueAndValidity();
+    comision_bolsa_porcentaje_venta.updateValueAndValidity();
+    fecha_ultima_cupon_venta.updateValueAndValidity();
+    fecha_liquidacion_venta.updateValueAndValidity();
+    fecha_vencimiento_venta.updateValueAndValidity();
+  }
 }

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

@@ -7,7 +7,29 @@
     [formGroup]="investmentProposalForm"
   >
     <div class="row">
-      <div class=" col-md-6 col-sm-12 border border-light">
+      <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]="item.codigo == tipoEjecucion"
+          >
+            {{ item.nombre }}</option
+          >
+        </select>
+      </div>
+      <br />
+    </div>
+    <br />
+    <div class="row">
+      <div class=" col-md-12 col-sm-12 border border-light">
         <div class="row no-gutters">
           <!-- Valor nominal compra -->
 
@@ -15,6 +37,36 @@
             <h5>Compra</h5>
           </div>
 
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="renta_porcentaje">Renta: </label>
+              <div class="input-box-container">
+                <p>
+                  <i class="fas fa-percent" aria-hidden="true"></i>
+                </p>
+                <input
+                  type="text"
+                  formControlName="renta_porcentaje"
+                  class="form-control"
+                  [ngClass]="{
+                    'is-invalid': submitted && f.renta_porcentaje.errors
+                  }"
+                />
+                <div
+                  *ngIf="submitted && f.renta_porcentaje.errors"
+                  class="invalid-feedback"
+                >
+                  <div *ngIf="f.renta_porcentaje.errors.required">
+                    Campo requerido
+                  </div>
+                  <div *ngIf="f.renta_porcentaje.errors.pattern">
+                    Debe ingresar una cifra válida
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
           <div class="col-lg-6 col-sm-12 pr-xl-3">
             <div class="form-group">
               <label for="costo_cedeval">Costo CEDEVAL: </label>
@@ -394,8 +446,13 @@
           </div>
         </div>
       </div>
-
-      <div class=" col-md-6 col-sm-12 border border-light">
+    </div>
+    <br />
+    <div class="row">
+      <div
+        class=" col-md-12 col-sm-12 border border-light"
+        *ngIf="tipoEjecucion == 1"
+      >
         <div class="row no-gutters">
           <div class="col-12">
             <h5>Venta</h5>
@@ -823,7 +880,9 @@
             {{ fecha_inicio_vigencia }}
           </div>
         </div>
+      </div>
 
+      <div class="row" *ngIf="tipoEjecucion == 1">
         <div class="col-12">
           <h3>
             Instrumento de venta
@@ -899,71 +958,119 @@
             $USD {{ valor_transado_venta | number: "1.2-4" }}
           </div>
         </div>
-
+        <div class="col-sm-4">
+          <h4>Monto Recibir:</h4>
+          <div class="field">
+            $USD {{ monto_recibir | number: "1.2-4" }}
+          </div>
+        </div>
+      </div>
+      <div class="row">
         <div class="row align-container" *ngIf="operation_result">
           <div class="col-12">
             <h3>
               Resultado de la operación
             </h3>
           </div>
+
           <div class="col-sm-4">
-            <h4>Monto a recibir:</h4>
-            <div class="field">$USD {{ monto_recibir | number: "1.2-4" }}</div>
+            <h4>Valor nominal compra:</h4>
+            <div class="field">
+              $USD{{ operation_results_work.valor_transado_compra }}
+            </div>
           </div>
+
           <div class="col-sm-4">
             <h4>Días tenencia total:</h4>
             <div class="field">
-              {{ dias_tenencia_total }}
+              {{ operation_results_work.dias_tenencia_total }}
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Precio compra:</h4>
+            <div class="field">
+              {{ operation_results_work.precio_compra }}
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Precio venta:</h4>
+            <div class="field">
+              {{ operation_results_work.precio_venta }}
             </div>
           </div>
+
           <div class="col-sm-4">
             <h4>Ingresos intereses:</h4>
             <div class="field">
-              $USD {{ ingresos_intereses | number: "1.2-4" }}
+              $USD
+              {{ operation_results_work.ingresos_intereses | number: "1.2-4" }}
             </div>
           </div>
           <div class="col-sm-4">
             <h4>Costos totales:</h4>
-            <div class="field">$USD {{ costos_totales | number: "1.2-4" }}</div>
+            <div class="field">
+              $USD {{ operation_results_work.costos_totales | number: "1.2-4" }}
+            </div>
           </div>
           <div class="col-sm-4">
-            <h4>Ganancia / Pérdida total:</h4>
+            <h4>Ganancia o pérdida total:</h4>
             <div class="field">
-              $USD {{ ganancia_perdida_total | number: "1.2-4" }}
+              $USD
+              {{
+                operation_results_work.ganancia_perdida_total_neto
+                  | number: "1.2-4"
+              }}
             </div>
           </div>
           <div class="col-sm-4">
-            <h4>Ganancia / Pérdida de capital:</h4>
+            <h4>Ganancia o pérdida de capital:</h4>
             <div class="field">
-              {{ ganancia_perdida_capital_porcentaje | number: "1.2-4" }}%
+              {{
+                operation_results_work.ganancia_perdida_capital_porcentaje
+                  | number: "1.2-4"
+              }}%
             </div>
           </div>
 
           <div class="col-sm-4">
             <h4>Interés (%):</h4>
             <div class="field">
-              {{ intereses_porcentaje | number: "1.2-4" }} %
+              {{
+                operation_results_work.intereses_porcentaje | number: "1.2-4"
+              }}
+              %
             </div>
           </div>
           <div class="col-sm-4">
             <h4>Interés neto antes de impuesto (%):</h4>
             <div class="field">
-              {{ neto_antes_impuesto_porcentaje | number: "1.2-4" }}
+              {{
+                operation_results_work.neto_antes_renta_porcentaje
+                  | number: "1.2-4"
+              }}
               %
             </div>
           </div>
           <div class="col-sm-4">
             <h4>Interés neto después de impuesto (%):</h4>
             <div class="field">
-              {{ neto_despues_impuesto_porcentaje | number: "1.2-4" }}
+              {{
+                operation_results_work.neto_despues_renta_porcentaje
+                  | number: "1.2-4"
+              }}
               %
             </div>
           </div>
           <div class="col-sm-4">
-            <h4>Total de ingresos recibidos:</h4>
+            <h4>Total Ingresos Recibidos:</h4>
             <div class="field">
               $USD
-              {{ total_ingresos_recibidos | number: "1.2-4" }}
+              {{
+                operation_results_work.total_ingresos_recibidos
+                  | number: "1.2-4"
+              }}
             </div>
           </div>
         </div>
@@ -1012,15 +1119,14 @@
             <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
+                    : row.ingreso_bruto | number: "1.2-4"
                 }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD
-                {{
+                ${{
                   consolidado_proyeccion.total_ingreso_bruto | number: "1.2-4"
                 }}
               </td>
@@ -1028,32 +1134,28 @@
             <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
+                    : row.ingreso_neto | number: "1.2-4"
                 }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD
-                {{
+                ${{
                   consolidado_proyeccion.total_ingreso_neto | number: "1.2-4"
                 }}
               </td>
             </ng-container>
 
-            <ng-container matColumnDef="impuesto">
-              <th mat-header-cell *matHeaderCellDef>Impuesto</th>
+            <ng-container matColumnDef="renta">
+              <th mat-header-cell *matHeaderCellDef>Renta ($)</th>
               <td mat-cell *matCellDef="let row">
-                {{
-                  row.impuesto == "" || row.impuesto == undefined
-                    ? "-"
-                    : row.impuesto
+                ${{
+                  row.renta == "" || row.renta == undefined ? "-" : row.renta | number: "1.2-4"
                 }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD
-                {{ consolidado_proyeccion.total_impuesto | number: "1.2-4" }}
+                ${{ consolidado_proyeccion.total_renta | number: "1.2-4" }}
               </td>
             </ng-container>
 
@@ -1093,6 +1195,12 @@
           Instrumento de compra
         </h3>
       </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Renta (%):</h4>
+        <div class="field">
+          {{ instrument_work_summary.renta_porcentaje | number: "1.2-4" }}%
+        </div>
+      </div>
       <div class="col-lg-3 col-md-4 col-sm-6">
         <h4>Costo CEDEVAL:</h4>
         <div class="field">
@@ -1278,8 +1386,8 @@
         </div>
       </div>
     </div>
-    <!--
-    <div class="row">
+
+    <div class="row" *ngIf="tipoEjecucion == 1">
       <div class="col-12">
         <h3>
           Instrumento de venta
@@ -1430,6 +1538,13 @@
           {{ instrument_work_summary.valor_transado_venta | number: "1.2-4" }}
         </div>
       </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Monto Recibir:</h4>
+        <div class="field">
+          $USD
+          {{ instrument_work_summary.monto_recibir | number: "1.2-4" }}
+        </div>
+      </div>
       <div class="col-lg-3 col-md-4 col-sm-6">
         <h4>Ultima fecha de cupón:</h4>
         <div class="field">
@@ -1458,7 +1573,7 @@
       <div class="col-lg-3 col-md-4 col-sm-6">
         <h4>Valor nominal compra:</h4>
         <div class="field">
-          $USD{{ operation_results_work.valor_nominal_compra }}
+          $USD{{ operation_results_work.valor_transado_compra }}
         </div>
       </div>
       <div class="col-lg-3 col-md-4 col-sm-6">
@@ -1467,6 +1582,21 @@
           {{ operation_results_work.dias_tenencia_total }}
         </div>
       </div>
+
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Precio compra:</h4>
+        <div class="field">
+          {{ operation_results_work.precio_compra }}
+        </div>
+      </div>
+
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Precio venta:</h4>
+        <div class="field">
+          {{ operation_results_work.precio_venta }}
+        </div>
+      </div>
+
       <div class="col-lg-3 col-md-4 col-sm-6">
         <h4>Ingresos intereses:</h4>
         <div class="field">
@@ -1483,7 +1613,9 @@
         <h4>Ganancia o pérdida total:</h4>
         <div class="field">
           $USD
-          {{ operation_results_work.ganancia_perdida_total | number: "1.2-4" }}
+          {{
+            operation_results_work.ganancia_perdida_total_neto | number: "1.2-4"
+          }}
         </div>
       </div>
       <div class="col-lg-3 col-md-4 col-sm-6">
@@ -1506,8 +1638,7 @@
         <h4>Interés neto antes de impuesto (%):</h4>
         <div class="field">
           {{
-            operation_results_work.neto_antes_impuesto_porcentaje
-              | number: "1.2-4"
+            operation_results_work.neto_antes_renta_porcentaje | number: "1.2-4"
           }}
           %
         </div>
@@ -1516,14 +1647,23 @@
         <h4>Interés neto después de impuesto (%):</h4>
         <div class="field">
           {{
-            operation_results_work.neto_despues_impuesto_porcentaje
+            operation_results_work.neto_despues_renta_porcentaje
               | number: "1.2-4"
           }}
           %
         </div>
       </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Total Ingresos Recibidos:</h4>
+        <div class="field">
+          $USD
+          {{
+            operation_results_work.total_ingresos_recibidos | number: "1.2-4"
+          }}
+        </div>
+      </div>
     </div>
-  -->
+
     <br />
     <div *ngIf="hasProjections" class="instrument-calcs-summary">
       <div class="row">
@@ -1569,15 +1709,14 @@
             <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
+                    : row.ingreso_bruto | number: "1.2-4"
                 }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD
-                {{
+                ${{
                   consolidado_proyeccion.total_ingreso_bruto | number: "1.2-4"
                 }}
               </td>
@@ -1586,32 +1725,28 @@
             <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
+                    : row.ingreso_neto | number: "1.2-4"
                 }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD
-                {{
+                ${{
                   consolidado_proyeccion.total_ingreso_neto | number: "1.2-4"
                 }}
               </td>
             </ng-container>
 
-            <ng-container matColumnDef="impuesto">
-              <th mat-header-cell *matHeaderCellDef>Impuesto</th>
+            <ng-container matColumnDef="renta">
+              <th mat-header-cell *matHeaderCellDef>Renta ($)</th>
               <td mat-cell *matCellDef="let row">
-                {{
-                  row.impuesto == "" || row.impuesto == undefined
-                    ? "-"
-                    : row.impuesto
+                ${{
+                  row.renta == "" || row.renta == undefined ? "-" : row.renta | number: "1.2-4"
                 }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD
-                {{ consolidado_proyeccion.total_impuesto | number: "1.2-4" }}
+                ${{ consolidado_proyeccion.total_renta | number: "1.2-4" }}
               </td>
             </ng-container>
 

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

@@ -30,7 +30,7 @@ export class CINV implements InstrumentComponent {
     "fecha_pago",
     "ingreso_bruto",
     "ingreso_neto",
-    "impuesto"
+    "renta"
   ];
 
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
@@ -128,6 +128,11 @@ export class CINV implements InstrumentComponent {
   ytm_vencimiento_porcentaje_venta: any;
   comision_bolsa_venta: any;
   consolidado_proyeccion: any;
+  ejecuciones = [
+    { codigo: 1, nombre: "Completa" },
+    { codigo: 0, nombre: "Parcial" }
+  ];
+  tipoEjecucion: number = 0;
 
   constructor(
     private formBuilder: FormBuilder,
@@ -138,7 +143,6 @@ export class CINV implements InstrumentComponent {
     public datepipe: DatePipe
   ) {
     this.instrument_work = this.formDataService.getWork();
-
     this.instrument_exists = this.instrument_work == undefined;
     this.general = this.formDataService.getGeneralInfo();
 
@@ -146,6 +150,9 @@ export class CINV implements InstrumentComponent {
       this.instrument_work != undefined &&
       this.instrument_work.proyecciones != ""
     ) {
+      if (+this.instrument_work["valor_nominal_venta"] > 0) {
+        this.tipoEjecucion = 1;
+      }
       this.hasProjections = true;
       this.consolidado_proyeccion = this.instrument_work.proyecciones[
         this.instrument_work.proyecciones.length - 1
@@ -172,6 +179,15 @@ export class CINV implements InstrumentComponent {
     }
 
     this.investmentProposalForm = this.formBuilder.group({
+      ejecucion: [this.instrument_exists ? "" : this.tipoEjecucion],
+
+      renta_porcentaje: [
+        this.instrument_exists ? "" : this.instrument_work.renta_porcentaje,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
       costo_cedeval: [
         this.instrument_exists ? "" : this.instrument_work.costo_cedeval,
         [
@@ -403,6 +419,8 @@ export class CINV implements InstrumentComponent {
           id_periodicidad: +this.general.periodicidad
         },
         {
+          completo: this.tipoEjecucion,
+          renta_porcentaje: +this.f.renta_porcentaje.value,
           costo_cedeval: +this.f.costo_cedeval.value,
           costo_transferencia: +this.f.costo_transferencia.value,
           valor_nominal_compra: +this.f.valor_nominal_compra.value,
@@ -423,19 +441,31 @@ export class CINV implements InstrumentComponent {
           comision_bolsa_porcentaje_venta: this.f
             .comision_bolsa_porcentaje_venta.value,
 
-          fecha_vencimiento_compra: this.f.fecha_vencimiento_compra.value
-            .singleDate.formatted,
-          fecha_ultima_cupon_compra: this.f.fecha_ultima_cupon_compra.value
-            .singleDate.formatted,
-          fecha_liquidacion_compra: this.f.fecha_liquidacion_compra.value
-            .singleDate.formatted,
-
-          fecha_vencimiento_venta: this.f.fecha_vencimiento_venta.value
-            .singleDate.formatted,
-          fecha_ultima_cupon_venta: this.f.fecha_ultima_cupon_venta.value
-            .singleDate.formatted,
-          fecha_liquidacion_venta: this.f.fecha_liquidacion_venta.value
-            .singleDate.formatted
+          fecha_vencimiento_compra:
+            this.f.fecha_vencimiento_compra.value == ""
+              ? ""
+              : this.f.fecha_vencimiento_compra.value.singleDate.formatted,
+          fecha_ultima_cupon_compra:
+            this.f.fecha_ultima_cupon_compra.value == ""
+              ? ""
+              : this.f.fecha_ultima_cupon_compra.value.singleDate.formatted,
+          fecha_liquidacion_compra:
+            this.f.fecha_liquidacion_compra.value == ""
+              ? ""
+              : this.f.fecha_liquidacion_compra.value.singleDate.formatted,
+
+          fecha_vencimiento_venta:
+            this.f.fecha_vencimiento_venta.value == ""
+              ? ""
+              : this.f.fecha_vencimiento_venta.value.singleDate.formatted,
+          fecha_ultima_cupon_venta:
+            this.f.fecha_ultima_cupon_venta.value == ""
+              ? ""
+              : this.f.fecha_ultima_cupon_venta.value.singleDate.formatted,
+          fecha_liquidacion_venta:
+            this.f.fecha_liquidacion_venta.value == ""
+              ? ""
+              : this.f.fecha_liquidacion_venta.value.singleDate.formatted
         }
       )
       .subscribe(
@@ -476,85 +506,64 @@ export class CINV implements InstrumentComponent {
             ans["result"]["instrumento_compra"]["fecha_inicio_vigencia"];
 
           // Instrumento de venta
-          this.comision_casa_venta =
-            ans["result"]["instrumento_venta"]["comision_casa_venta"];
-
-          this.comision_bolsa_venta =
-            ans["result"]["instrumento_venta"]["comision_bolsa_venta"];
-
-          this.fecha_siguiente_cupon_venta =
-            ans["result"]["instrumento_venta"]["fecha_siguiente_cupon_venta"];
-          this.dias_vencimiento_venta =
-            ans["result"]["instrumento_venta"]["dias_vencimiento_venta"];
-          this.dias_acumulados_venta =
-            ans["result"]["instrumento_venta"]["dias_acumulados_venta"];
-          this.ytm_vencimiento_comision_porcentaje_venta =
-            ans["result"]["instrumento_venta"][
-              "ytm_vencimiento_comision_porcentaje_venta"
-            ];
-          this.ytm_vencimiento_porcentaje_venta =
-            ans["result"]["instrumento_venta"][
-              "ytm_vencimiento_porcentaje_venta"
-            ];
-          this.interes_acumulado_venta =
-            ans["result"]["instrumento_venta"]["interes_acumulado_venta"];
-          this.interes_acumulado_porcentaje_venta =
-            ans["result"]["instrumento_venta"][
-              "interes_acumulado_porcentaje_venta"
-            ];
-          this.precio_sucio_porcentaje_venta =
-            ans["result"]["instrumento_venta"]["precio_sucio_porcentaje_venta"];
-          this.valor_transado_venta =
-            ans["result"]["instrumento_venta"]["valor_transado_venta"];
-          this.monto_recibir =
-            ans["result"]["instrumento_venta"]["monto_recibir"];
-
-          // Resultado de la operacion
-          this.dias_tenencia_total =
-            ans["result"]["resultado_operacion"]["dias_tenencia_total"];
-          this.ganancia_perdida_capital =
-            ans["result"]["resultado_operacion"]["ganancia_perdida_capital"];
-          this.ingresos_intereses =
-            ans["result"]["resultado_operacion"]["ingresos_intereses"];
-          this.costos_totales =
-            ans["result"]["resultado_operacion"]["costos_totales"];
-          this.ganancia_perdida_total =
-            ans["result"]["resultado_operacion"]["ganancia_perdida_total"];
-          this.ganancia_perdida_capital_porcentaje =
-            ans["result"]["resultado_operacion"][
-              "ganancia_perdida_capital_porcentaje"
-            ];
-          this.intereses_porcentaje =
-            ans["result"]["resultado_operacion"]["intereses_porcentaje"];
-          this.neto_antes_impuesto_porcentaje =
-            ans["result"]["resultado_operacion"][
-              "neto_antes_impuesto_porcentaje"
-            ];
-          this.neto_despues_impuesto_porcentaje =
-            ans["result"]["resultado_operacion"][
-              "neto_despues_impuesto_porcentaje"
-            ];
-          this.total_ingresos_recibidos =
-            ans["result"]["resultado_operacion"]["total_ingresos_recibidos"];
+          if (this.tipoEjecucion == 1) {
+            this.comision_casa_venta =
+              ans["result"]["instrumento_venta"]["comision_casa_venta"];
+            this.comision_bolsa_venta =
+              ans["result"]["instrumento_venta"]["comision_bolsa_venta"];
+            this.fecha_siguiente_cupon_venta =
+              ans["result"]["instrumento_venta"]["fecha_siguiente_cupon_venta"];
+            this.dias_vencimiento_venta =
+              ans["result"]["instrumento_venta"]["dias_vencimiento_venta"];
+            this.dias_acumulados_venta =
+              ans["result"]["instrumento_venta"]["dias_acumulados_venta"];
+            this.ytm_vencimiento_comision_porcentaje_venta =
+              ans["result"]["instrumento_venta"][
+                "ytm_vencimiento_comision_porcentaje_venta"
+              ];
+            this.ytm_vencimiento_porcentaje_venta =
+              ans["result"]["instrumento_venta"][
+                "ytm_vencimiento_porcentaje_venta"
+              ];
+            this.interes_acumulado_venta =
+              ans["result"]["instrumento_venta"]["interes_acumulado_venta"];
+            this.interes_acumulado_porcentaje_venta =
+              ans["result"]["instrumento_venta"][
+                "interes_acumulado_porcentaje_venta"
+              ];
+            this.precio_sucio_porcentaje_venta =
+              ans["result"]["instrumento_venta"][
+                "precio_sucio_porcentaje_venta"
+              ];
+            this.valor_transado_venta =
+              ans["result"]["instrumento_venta"]["valor_transado_venta"];
+            this.monto_recibir =
+              ans["result"]["instrumento_venta"]["monto_recibir"];
+
+            this.operation_results_work = ans["result"]["resultado_operacion"];
+            this.operation_result = true;
+          }
 
           // 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;
 
-          // Obj
           this.bonosObject = {
+            completo: this.tipoEjecucion,
+            cancelado: this.tipoEjecucion,
+            renta_porcentaje: this.investmentProposalForm.value
+              .renta_porcentaje,
             costo_cedeval: this.investmentProposalForm.value.costo_cedeval,
             costo_transferencia: this.investmentProposalForm.value
               .costo_transferencia,
@@ -570,18 +579,6 @@ export class CINV implements InstrumentComponent {
             comision_bolsa_porcentaje_compra: this.investmentProposalForm.value
               .comision_bolsa_porcentaje_compra,
 
-            valor_nominal_venta: this.investmentProposalForm.value
-              .valor_nominal_venta,
-            precio_venta: this.investmentProposalForm.value.precio_venta,
-            precio_vencimiento_venta: this.investmentProposalForm.value
-              .precio_vencimiento_venta,
-            cupon_porcentaje_venta: this.investmentProposalForm.value
-              .cupon_porcentaje_venta,
-            comision_casa_porcentaje_venta: this.investmentProposalForm.value
-              .comision_casa_porcentaje_venta,
-            comision_bolsa_porcentaje_venta: this.investmentProposalForm.value
-              .comision_bolsa_porcentaje_venta,
-
             fecha_vencimiento_compra: this.f.fecha_vencimiento_compra.value
               .singleDate.formatted,
             fecha_ultima_cupon_compra: this.f.fecha_ultima_cupon_compra.value
@@ -589,13 +586,6 @@ export class CINV implements InstrumentComponent {
             fecha_liquidacion_compra: this.f.fecha_liquidacion_compra.value
               .singleDate.formatted,
 
-            fecha_vencimiento_venta: this.f.fecha_vencimiento_venta.value
-              .singleDate.formatted,
-            fecha_ultima_cupon_venta: this.f.fecha_ultima_cupon_venta.value
-              .singleDate.formatted,
-            fecha_liquidacion_venta: this.f.fecha_liquidacion_venta.value
-              .singleDate.formatted,
-
             // Instrumento de compra
 
             comision_casa_compra: this.comision_casa_compra,
@@ -614,26 +604,9 @@ export class CINV implements InstrumentComponent {
             valor_transado_compra: this.valor_transado_compra,
             monto_pagar: this.monto_pagar,
             fecha_inicio_vigencia: this.fecha_inicio_vigencia,
-            // Instrumento de venta
-
-            comision_casa_venta: this.comision_casa_venta,
-            comision_bolsa_venta: this.comision_bolsa_venta,
-
-            fecha_siguiente_cupon_venta: this.fecha_siguiente_cupon_venta,
-            dias_vencimiento_venta: this.dias_vencimiento_venta,
-            dias_acumulados_venta: this.dias_acumulados_venta,
-            ytm_vencimiento_porcentaje_venta: this
-              .ytm_vencimiento_porcentaje_venta,
-            ytm_vencimiento_comision_porcentaje_venta: this
-              .ytm_vencimiento_comision_porcentaje_venta,
-
-            interes_acumulado_venta: this.interes_acumulado_venta,
-            interes_acumulado_porcentaje_venta: this
-              .interes_acumulado_porcentaje_venta,
-            precio_sucio_porcentaje_venta: this.precio_sucio_porcentaje_venta,
-            valor_transado_venta: this.valor_transado_venta,
-            // Resultado de la operacion
 
+            // Resultado de la operacion
+            /*
             monto_recibir: this.monto_recibir,
             dias_tenencia_total: this.dias_tenencia_total,
             ganancia_perdida_capital: this.ganancia_perdida_capital,
@@ -647,10 +620,74 @@ export class CINV implements InstrumentComponent {
             neto_despues_impuesto_porcentaje: this
               .neto_despues_impuesto_porcentaje,
             total_ingresos_recibidos: this.total_ingresos_recibidos,
-
+            */
             // Proyecciones
+
             proyecciones: this.proyecciones
           };
+          if (this.tipoEjecucion == 1) {
+            this.bonosObject[
+              "valor_nominal_venta"
+            ] = this.investmentProposalForm.value.valor_nominal_venta;
+            this.bonosObject[
+              "precio_venta"
+            ] = this.investmentProposalForm.value.precio_venta;
+            this.bonosObject[
+              "precio_vencimiento_venta"
+            ] = this.investmentProposalForm.value.precio_vencimiento_venta;
+            this.bonosObject[
+              "comision_casa_porcentaje_venta"
+            ] = this.investmentProposalForm.value.comision_casa_porcentaje_venta;
+            this.bonosObject[
+              "cupon_porcentaje_venta"
+            ] = this.investmentProposalForm.value.cupon_porcentaje_venta;
+            this.bonosObject[
+              "comision_bolsa_porcentaje_venta"
+            ] = this.investmentProposalForm.value.comision_bolsa_porcentaje_venta;
+            this.bonosObject[
+              "fecha_vencimiento_venta"
+            ] = this.f.fecha_vencimiento_venta.value.singleDate.formatted;
+            this.bonosObject[
+              "fecha_ultima_cupon_venta"
+            ] = this.f.fecha_ultima_cupon_venta.value.singleDate.formatted;
+            this.bonosObject[
+              "fecha_liquidacion_venta"
+            ] = this.f.fecha_liquidacion_venta.value.singleDate.formatted;
+            this.bonosObject["comision_casa_venta"] = this.comision_casa_venta;
+            this.bonosObject[
+              "comision_bolsa_venta"
+            ] = this.comision_bolsa_venta;
+            this.bonosObject[
+              "fecha_siguiente_cupon_venta"
+            ] = this.fecha_siguiente_cupon_venta;
+            this.bonosObject[
+              "dias_vencimiento_venta"
+            ] = this.dias_vencimiento_venta;
+            this.bonosObject[
+              "dias_acumulados_venta"
+            ] = this.dias_acumulados_venta;
+            this.bonosObject[
+              "ytm_vencimiento_porcentaje_venta"
+            ] = this.ytm_vencimiento_porcentaje_venta;
+            this.bonosObject[
+              "ytm_vencimiento_comision_porcentaje_venta"
+            ] = this.ytm_vencimiento_comision_porcentaje_venta;
+            this.bonosObject[
+              "interes_acumulado_venta"
+            ] = this.interes_acumulado_venta;
+            this.bonosObject[
+              "interes_acumulado_porcentaje_venta"
+            ] = this.interes_acumulado_porcentaje_venta;
+            this.bonosObject[
+              "precio_sucio_porcentaje_venta"
+            ] = this.precio_sucio_porcentaje_venta;
+            this.bonosObject[
+              "valor_transado_venta"
+            ] = this.valor_transado_venta;
+            this.bonosObject[
+              "monto_recibir"
+            ] = this.monto_recibir;
+          }
 
           this.formDataService.setWork(this.bonosObject);
           Swal.close();
@@ -689,4 +726,90 @@ export class CINV implements InstrumentComponent {
   goToNext(form: any) {
     this.getCalculations(form, true);
   }
+
+  toggle_ejecucion(input: any) {
+    this.tipoEjecucion = +input;
+    this.setValidators();
+  }
+
+  setValidators() {
+    const precio_venta = this.investmentProposalForm.get("precio_venta");
+
+    const valor_nominal_venta = this.investmentProposalForm.get(
+      "valor_nominal_venta"
+    );
+    const precio_vencimiento_venta = this.investmentProposalForm.get(
+      "precio_vencimiento_venta"
+    );
+    const cupon_porcentaje_venta = this.investmentProposalForm.get(
+      "cupon_porcentaje_venta"
+    );
+    const comision_casa_porcentaje_venta = this.investmentProposalForm.get(
+      "comision_casa_porcentaje_venta"
+    );
+    const comision_bolsa_porcentaje_venta = this.investmentProposalForm.get(
+      "comision_bolsa_porcentaje_venta"
+    );
+    const fecha_ultima_cupon_venta = this.investmentProposalForm.get(
+      "fecha_ultima_cupon_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_venta.setValidators([
+        Validators.required,
+        Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+      ]);
+
+      valor_nominal_venta.setValidators([
+        Validators.required,
+        Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+      ]);
+      precio_vencimiento_venta.setValidators([
+        Validators.required,
+        Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+      ]);
+      cupon_porcentaje_venta.setValidators([
+        Validators.required,
+        Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+      ]);
+      comision_casa_porcentaje_venta.setValidators([
+        Validators.required,
+        Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+      ]);
+      comision_bolsa_porcentaje_venta.setValidators([
+        Validators.required,
+        Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+      ]);
+      fecha_ultima_cupon_venta.setValidators([Validators.required]);
+      fecha_liquidacion_venta.setValidators([Validators.required]);
+      fecha_vencimiento_venta.setValidators([Validators.required]);
+    } else {
+      precio_venta.setValidators(null);
+
+      valor_nominal_venta.setValidators(null);
+      precio_vencimiento_venta.setValidators(null);
+      cupon_porcentaje_venta.setValidators(null);
+      comision_casa_porcentaje_venta.setValidators(null);
+      comision_bolsa_porcentaje_venta.setValidators(null);
+      fecha_ultima_cupon_venta.setValidators(null);
+      fecha_liquidacion_venta.setValidators(null);
+      fecha_vencimiento_venta.setValidators(null);
+    }
+    precio_venta.updateValueAndValidity();
+
+    valor_nominal_venta.updateValueAndValidity();
+    precio_vencimiento_venta.updateValueAndValidity();
+    cupon_porcentaje_venta.updateValueAndValidity();
+    comision_casa_porcentaje_venta.updateValueAndValidity();
+    comision_bolsa_porcentaje_venta.updateValueAndValidity();
+    fecha_ultima_cupon_venta.updateValueAndValidity();
+    fecha_liquidacion_venta.updateValueAndValidity();
+    fecha_vencimiento_venta.updateValueAndValidity();
+  }
 }

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

@@ -334,9 +334,7 @@
         </div>
         <div class="col-sm-6">
           <h4>Rendimiento neto:</h4>
-          <div class="field">
-            {{ rendimiento_neto | number: "1.2-4" }}
-          </div>
+          <div class="field">{{ rendimiento_neto | number: "1.2-4" }} %</div>
         </div>
         <div class="col-sm-6">
           <h4>Total a pagar:</h4>
@@ -400,15 +398,14 @@
             <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
+                    : (row.ingreso_bruto | number: "1.2-4")
                 }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD
-                {{
+                ${{
                   consolidado_proyeccion.total_ingreso_bruto | number: "1.2-4"
                 }}
               </td>
@@ -417,15 +414,14 @@
             <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
+                    : (row.ingreso_neto | number: "1.2-4")
                 }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD
-                {{
+                ${{
                   consolidado_proyeccion.total_ingreso_neto | number: "1.2-4"
                 }}
               </td>
@@ -536,6 +532,7 @@
           $USD {{ instrument_work.comision_bolsa | number: "1.2-4" }}
         </div>
       </div>
+
       <div class="col-lg-3 col-md-4 col-sm-6">
         <h4>Rendimiento bruto:</h4>
         <div class="field">
@@ -626,15 +623,14 @@
             <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
+                    : (row.ingreso_bruto | number: "1.2-4")
                 }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD
-                {{
+                ${{
                   consolidado_proyeccion.total_ingreso_bruto | number: "1.2-4"
                 }}
               </td>
@@ -643,15 +639,14 @@
             <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
+                    : (row.ingreso_neto | number: "1.2-4")
                 }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD
-                {{
+                ${{
                   consolidado_proyeccion.total_ingreso_neto | number: "1.2-4"
                 }}
               </td>

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

@@ -218,11 +218,15 @@
 
         <div class="col-sm-6">
           <h4>Rendimiento bruto:</h4>
-          <div class="field">{{ rendimiento_bruto | number: "1.2-4" }}</div>
+          <div class="field">
+          $USD 
+          {{ rendimiento_bruto | number: "1.2-4" }}
+          </div>
         </div>
         <div class="col-sm-6">
           <h4>Rendimiento neto:</h4>
           <div class="field">
+            $USD 
             {{ rendimiento_neto | number: "1.2-4" }}
           </div>
         </div>
@@ -281,16 +285,16 @@
             <ng-container matColumnDef="ingreso_bruto">
               <th mat-header-cell *matHeaderCellDef>Ingreso bruto</th>
               <td mat-cell *matCellDef="let row">
-                $USD
-                {{
+                
+                ${{
                   row.ingreso_bruto == "" || row.ingreso_bruto == undefined
                     ? "-"
                     : (row.ingreso_bruto | number: "1.2-4")
                 }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD
-                {{
+                
+                ${{
                   consolidado_proyeccion.total_ingreso_bruto | number: "1.2-4"
                 }}
               </td>
@@ -298,30 +302,30 @@
             <ng-container matColumnDef="renta">
               <th mat-header-cell *matHeaderCellDef>Renta</th>
               <td mat-cell *matCellDef="let row">
-                $USD
-                {{
+                
+                ${{
                   row.renta == "" || row.renta == undefined
                     ? "-"
                     : (row.renta | number: "1.2-4")
                 }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD {{ consolidado_proyeccion.total_renta | number: "1.2-4" }}
+                ${{ consolidado_proyeccion.total_renta | 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">
-                $USD
-                {{
+                
+                ${{
                   row.ingreso_neto == "" || row.ingreso_neto == undefined
                     ? "-"
                     : (row.ingreso_neto | number: "1.2-4")
                 }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD
-                {{
+                
+                ${{
                   consolidado_proyeccion.total_ingreso_neto | number: "1.2-4"
                 }}
               </td>
@@ -495,16 +499,16 @@
             <ng-container matColumnDef="ingreso_bruto">
               <th mat-header-cell *matHeaderCellDef>Ingreso bruto</th>
               <td mat-cell *matCellDef="let row">
-                $USD
-                {{
+                
+                ${{
                   row.ingreso_bruto == "" || row.ingreso_bruto == undefined
                     ? "-"
                     : (row.ingreso_bruto | number: "1.2-4")
                 }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD
-                {{
+                
+                ${{
                   consolidado_proyeccion.total_ingreso_bruto | number: "1.2-4"
                 }}
               </td>
@@ -512,30 +516,30 @@
             <ng-container matColumnDef="renta">
               <th mat-header-cell *matHeaderCellDef>Renta</th>
               <td mat-cell *matCellDef="let row">
-                $USD
-                {{
+                
+                ${{
                   row.renta == "" || row.renta == undefined
                     ? "-"
                     : (row.renta | number: "1.2-4")
                 }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD {{ consolidado_proyeccion.total_renta | number: "1.2-4" }}
+                ${{ consolidado_proyeccion.total_renta | 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">
-                $USD
-                {{
+                
+                ${{
                   row.ingreso_neto == "" || row.ingreso_neto == undefined
                     ? "-"
                     : (row.ingreso_neto | number: "1.2-4")
                 }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD
-                {{
+                
+                ${{
                   consolidado_proyeccion.total_ingreso_neto | number: "1.2-4"
                 }}
               </td>

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

@@ -1,13 +1,35 @@
 <div *ngIf="!summary">
   <h4 class="card-title">
-    Eurobonos
+    EuroBonos
   </h4>
   <form
     class="form-auth-small ng-untouched ng-pristine ng-valid"
     [formGroup]="investmentProposalForm"
   >
     <div class="row">
-      <div class=" col-md-6 col-sm-12 border border-light">
+      <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]="item.codigo == tipoEjecucion"
+          >
+            {{ item.nombre }}</option
+          >
+        </select>
+      </div>
+      <br />
+    </div>
+    <br />
+    <div class="row">
+      <div class=" col-md-12 col-sm-12 border border-light">
         <div class="row no-gutters">
           <!-- Valor nominal compra -->
 
@@ -15,6 +37,36 @@
             <h5>Compra</h5>
           </div>
 
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="renta_porcentaje">Renta: </label>
+              <div class="input-box-container">
+                <p>
+                  <i class="fas fa-percent" aria-hidden="true"></i>
+                </p>
+                <input
+                  type="text"
+                  formControlName="renta_porcentaje"
+                  class="form-control"
+                  [ngClass]="{
+                    'is-invalid': submitted && f.renta_porcentaje.errors
+                  }"
+                />
+                <div
+                  *ngIf="submitted && f.renta_porcentaje.errors"
+                  class="invalid-feedback"
+                >
+                  <div *ngIf="f.renta_porcentaje.errors.required">
+                    Campo requerido
+                  </div>
+                  <div *ngIf="f.renta_porcentaje.errors.pattern">
+                    Debe ingresar una cifra válida
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
           <div class="col-lg-6 col-sm-12 pr-xl-3">
             <div class="form-group">
               <label for="costo_cedeval">Costo CEDEVAL: </label>
@@ -394,8 +446,13 @@
           </div>
         </div>
       </div>
-
-      <div class=" col-md-6 col-sm-12 border border-light">
+    </div>
+    <br />
+    <div class="row">
+      <div
+        class=" col-md-12 col-sm-12 border border-light"
+        *ngIf="tipoEjecucion == 1"
+      >
         <div class="row no-gutters">
           <div class="col-12">
             <h5>Venta</h5>
@@ -823,7 +880,9 @@
             {{ fecha_inicio_vigencia }}
           </div>
         </div>
+      </div>
 
+      <div class="row" *ngIf="tipoEjecucion == 1">
         <div class="col-12">
           <h3>
             Instrumento de venta
@@ -899,71 +958,119 @@
             $USD {{ valor_transado_venta | number: "1.2-4" }}
           </div>
         </div>
-
+        <div class="col-sm-4">
+          <h4>Monto Recibir:</h4>
+          <div class="field">
+            $USD {{ monto_recibir | number: "1.2-4" }}
+          </div>
+        </div>
+      </div>
+      <div class="row">
         <div class="row align-container" *ngIf="operation_result">
           <div class="col-12">
             <h3>
               Resultado de la operación
             </h3>
           </div>
+
           <div class="col-sm-4">
-            <h4>Monto a recibir:</h4>
-            <div class="field">$USD {{ monto_recibir | number: "1.2-4" }}</div>
+            <h4>Valor nominal compra:</h4>
+            <div class="field">
+              $USD{{ operation_results_work.valor_transado_compra }}
+            </div>
           </div>
+
           <div class="col-sm-4">
             <h4>Días tenencia total:</h4>
             <div class="field">
-              {{ dias_tenencia_total }}
+              {{ operation_results_work.dias_tenencia_total }}
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Precio compra:</h4>
+            <div class="field">
+              {{ operation_results_work.precio_compra }}
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <h4>Precio venta:</h4>
+            <div class="field">
+              {{ operation_results_work.precio_venta }}
             </div>
           </div>
+
           <div class="col-sm-4">
             <h4>Ingresos intereses:</h4>
             <div class="field">
-              $USD {{ ingresos_intereses | number: "1.2-4" }}
+              $USD
+              {{ operation_results_work.ingresos_intereses | number: "1.2-4" }}
             </div>
           </div>
           <div class="col-sm-4">
             <h4>Costos totales:</h4>
-            <div class="field">$USD {{ costos_totales | number: "1.2-4" }}</div>
+            <div class="field">
+              $USD {{ operation_results_work.costos_totales | number: "1.2-4" }}
+            </div>
           </div>
           <div class="col-sm-4">
-            <h4>Ganancia / Pérdida total:</h4>
+            <h4>Ganancia o pérdida total:</h4>
             <div class="field">
-              $USD {{ ganancia_perdida_total | number: "1.2-4" }}
+              $USD
+              {{
+                operation_results_work.ganancia_perdida_total_neto
+                  | number: "1.2-4"
+              }}
             </div>
           </div>
           <div class="col-sm-4">
-            <h4>Ganancia / Pérdida de capital:</h4>
+            <h4>Ganancia o pérdida de capital:</h4>
             <div class="field">
-              {{ ganancia_perdida_capital_porcentaje | number: "1.2-4" }}%
+              {{
+                operation_results_work.ganancia_perdida_capital_porcentaje
+                  | number: "1.2-4"
+              }}%
             </div>
           </div>
 
           <div class="col-sm-4">
             <h4>Interés (%):</h4>
             <div class="field">
-              {{ intereses_porcentaje | number: "1.2-4" }} %
+              {{
+                operation_results_work.intereses_porcentaje | number: "1.2-4"
+              }}
+              %
             </div>
           </div>
           <div class="col-sm-4">
             <h4>Interés neto antes de impuesto (%):</h4>
             <div class="field">
-              {{ neto_antes_impuesto_porcentaje | number: "1.2-4" }}
+              {{
+                operation_results_work.neto_antes_renta_porcentaje
+                  | number: "1.2-4"
+              }}
               %
             </div>
           </div>
           <div class="col-sm-4">
             <h4>Interés neto después de impuesto (%):</h4>
             <div class="field">
-              {{ neto_despues_impuesto_porcentaje | number: "1.2-4" }}
+              {{
+                operation_results_work.neto_despues_renta_porcentaje
+                  | number: "1.2-4"
+              }}
               %
             </div>
           </div>
           <div class="col-sm-4">
-            <h4>Total de ingresos recibidos:</h4>
+            <h4>Total Ingresos Recibidos:</h4>
             <div class="field">
               $USD
-              {{ total_ingresos_recibidos | number: "1.2-4" }}
+              {{
+                operation_results_work.total_ingresos_recibidos
+                  | number: "1.2-4"
+              }}
             </div>
           </div>
         </div>
@@ -1012,15 +1119,14 @@
             <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
+                    : row.ingreso_bruto | number: "1.2-4"
                 }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD
-                {{
+                ${{
                   consolidado_proyeccion.total_ingreso_bruto | number: "1.2-4"
                 }}
               </td>
@@ -1028,32 +1134,28 @@
             <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
+                    : row.ingreso_neto | number: "1.2-4"
                 }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD
-                {{
+                ${{
                   consolidado_proyeccion.total_ingreso_neto | number: "1.2-4"
                 }}
               </td>
             </ng-container>
 
-            <ng-container matColumnDef="impuesto">
-              <th mat-header-cell *matHeaderCellDef>Impuesto</th>
+            <ng-container matColumnDef="renta">
+              <th mat-header-cell *matHeaderCellDef>Renta ($)</th>
               <td mat-cell *matCellDef="let row">
-                {{
-                  row.impuesto == "" || row.impuesto == undefined
-                    ? "-"
-                    : row.impuesto
+                ${{
+                  row.renta == "" || row.renta == undefined ? "-" : row.renta | number: "1.2-4"
                 }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD
-                {{ consolidado_proyeccion.total_impuesto | number: "1.2-4" }}
+                ${{ consolidado_proyeccion.total_renta | number: "1.2-4" }}
               </td>
             </ng-container>
 
@@ -1093,6 +1195,12 @@
           Instrumento de compra
         </h3>
       </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Renta (%):</h4>
+        <div class="field">
+          {{ instrument_work_summary.renta_porcentaje | number: "1.2-4" }}%
+        </div>
+      </div>
       <div class="col-lg-3 col-md-4 col-sm-6">
         <h4>Costo CEDEVAL:</h4>
         <div class="field">
@@ -1278,8 +1386,8 @@
         </div>
       </div>
     </div>
-    <!--
-    <div class="row">
+
+    <div class="row" *ngIf="tipoEjecucion == 1">
       <div class="col-12">
         <h3>
           Instrumento de venta
@@ -1430,6 +1538,13 @@
           {{ instrument_work_summary.valor_transado_venta | number: "1.2-4" }}
         </div>
       </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Monto Recibir:</h4>
+        <div class="field">
+          $USD
+          {{ instrument_work_summary.monto_recibir | number: "1.2-4" }}
+        </div>
+      </div>
       <div class="col-lg-3 col-md-4 col-sm-6">
         <h4>Ultima fecha de cupón:</h4>
         <div class="field">
@@ -1458,7 +1573,7 @@
       <div class="col-lg-3 col-md-4 col-sm-6">
         <h4>Valor nominal compra:</h4>
         <div class="field">
-          $USD{{ operation_results_work.valor_nominal_compra }}
+          $USD{{ operation_results_work.valor_transado_compra }}
         </div>
       </div>
       <div class="col-lg-3 col-md-4 col-sm-6">
@@ -1467,6 +1582,21 @@
           {{ operation_results_work.dias_tenencia_total }}
         </div>
       </div>
+
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Precio compra:</h4>
+        <div class="field">
+          {{ operation_results_work.precio_compra }}
+        </div>
+      </div>
+
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Precio venta:</h4>
+        <div class="field">
+          {{ operation_results_work.precio_venta }}
+        </div>
+      </div>
+
       <div class="col-lg-3 col-md-4 col-sm-6">
         <h4>Ingresos intereses:</h4>
         <div class="field">
@@ -1483,7 +1613,9 @@
         <h4>Ganancia o pérdida total:</h4>
         <div class="field">
           $USD
-          {{ operation_results_work.ganancia_perdida_total | number: "1.2-4" }}
+          {{
+            operation_results_work.ganancia_perdida_total_neto | number: "1.2-4"
+          }}
         </div>
       </div>
       <div class="col-lg-3 col-md-4 col-sm-6">
@@ -1506,8 +1638,7 @@
         <h4>Interés neto antes de impuesto (%):</h4>
         <div class="field">
           {{
-            operation_results_work.neto_antes_impuesto_porcentaje
-              | number: "1.2-4"
+            operation_results_work.neto_antes_renta_porcentaje | number: "1.2-4"
           }}
           %
         </div>
@@ -1516,14 +1647,23 @@
         <h4>Interés neto después de impuesto (%):</h4>
         <div class="field">
           {{
-            operation_results_work.neto_despues_impuesto_porcentaje
+            operation_results_work.neto_despues_renta_porcentaje
               | number: "1.2-4"
           }}
           %
         </div>
       </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Total Ingresos Recibidos:</h4>
+        <div class="field">
+          $USD
+          {{
+            operation_results_work.total_ingresos_recibidos | number: "1.2-4"
+          }}
+        </div>
+      </div>
     </div>
-  -->
+
     <br />
     <div *ngIf="hasProjections" class="instrument-calcs-summary">
       <div class="row">
@@ -1569,15 +1709,14 @@
             <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
+                    : row.ingreso_bruto | number: "1.2-4"
                 }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD
-                {{
+                ${{
                   consolidado_proyeccion.total_ingreso_bruto | number: "1.2-4"
                 }}
               </td>
@@ -1586,32 +1725,28 @@
             <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
+                    : row.ingreso_neto | number: "1.2-4"
                 }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD
-                {{
+                ${{
                   consolidado_proyeccion.total_ingreso_neto | number: "1.2-4"
                 }}
               </td>
             </ng-container>
 
-            <ng-container matColumnDef="impuesto">
-              <th mat-header-cell *matHeaderCellDef>Impuesto</th>
+            <ng-container matColumnDef="renta">
+              <th mat-header-cell *matHeaderCellDef>Renta ($)</th>
               <td mat-cell *matCellDef="let row">
-                {{
-                  row.impuesto == "" || row.impuesto == undefined
-                    ? "-"
-                    : row.impuesto
+                ${{
+                  row.renta == "" || row.renta == undefined ? "-" : row.renta | number: "1.2-4"
                 }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD
-                {{ consolidado_proyeccion.total_impuesto | number: "1.2-4" }}
+                ${{ consolidado_proyeccion.total_renta | number: "1.2-4" }}
               </td>
             </ng-container>
 

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

@@ -30,7 +30,7 @@ export class EURB implements InstrumentComponent {
     "fecha_pago",
     "ingreso_bruto",
     "ingreso_neto",
-    "impuesto"
+    "renta"
   ];
 
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
@@ -128,6 +128,11 @@ export class EURB implements InstrumentComponent {
   ytm_vencimiento_porcentaje_venta: any;
   comision_bolsa_venta: any;
   consolidado_proyeccion: any;
+  ejecuciones = [
+    { codigo: 1, nombre: "Completa" },
+    { codigo: 0, nombre: "Parcial" }
+  ];
+  tipoEjecucion: number = 0;
 
   constructor(
     private formBuilder: FormBuilder,
@@ -138,7 +143,6 @@ export class EURB implements InstrumentComponent {
     public datepipe: DatePipe
   ) {
     this.instrument_work = this.formDataService.getWork();
-
     this.instrument_exists = this.instrument_work == undefined;
     this.general = this.formDataService.getGeneralInfo();
 
@@ -146,6 +150,9 @@ export class EURB implements InstrumentComponent {
       this.instrument_work != undefined &&
       this.instrument_work.proyecciones != ""
     ) {
+      if (+this.instrument_work["valor_nominal_venta"] > 0) {
+        this.tipoEjecucion = 1;
+      }
       this.hasProjections = true;
       this.consolidado_proyeccion = this.instrument_work.proyecciones[
         this.instrument_work.proyecciones.length - 1
@@ -172,6 +179,15 @@ export class EURB implements InstrumentComponent {
     }
 
     this.investmentProposalForm = this.formBuilder.group({
+      ejecucion: [this.instrument_exists ? "" : this.tipoEjecucion],
+
+      renta_porcentaje: [
+        this.instrument_exists ? "" : this.instrument_work.renta_porcentaje,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
       costo_cedeval: [
         this.instrument_exists ? "" : this.instrument_work.costo_cedeval,
         [
@@ -403,6 +419,8 @@ export class EURB implements InstrumentComponent {
           id_periodicidad: +this.general.periodicidad
         },
         {
+          completo: this.tipoEjecucion,
+          renta_porcentaje: +this.f.renta_porcentaje.value,
           costo_cedeval: +this.f.costo_cedeval.value,
           costo_transferencia: +this.f.costo_transferencia.value,
           valor_nominal_compra: +this.f.valor_nominal_compra.value,
@@ -423,19 +441,31 @@ export class EURB implements InstrumentComponent {
           comision_bolsa_porcentaje_venta: this.f
             .comision_bolsa_porcentaje_venta.value,
 
-          fecha_vencimiento_compra: this.f.fecha_vencimiento_compra.value
-            .singleDate.formatted,
-          fecha_ultima_cupon_compra: this.f.fecha_ultima_cupon_compra.value
-            .singleDate.formatted,
-          fecha_liquidacion_compra: this.f.fecha_liquidacion_compra.value
-            .singleDate.formatted,
-
-          fecha_vencimiento_venta: this.f.fecha_vencimiento_venta.value
-            .singleDate.formatted,
-          fecha_ultima_cupon_venta: this.f.fecha_ultima_cupon_venta.value
-            .singleDate.formatted,
-          fecha_liquidacion_venta: this.f.fecha_liquidacion_venta.value
-            .singleDate.formatted
+          fecha_vencimiento_compra:
+            this.f.fecha_vencimiento_compra.value == ""
+              ? ""
+              : this.f.fecha_vencimiento_compra.value.singleDate.formatted,
+          fecha_ultima_cupon_compra:
+            this.f.fecha_ultima_cupon_compra.value == ""
+              ? ""
+              : this.f.fecha_ultima_cupon_compra.value.singleDate.formatted,
+          fecha_liquidacion_compra:
+            this.f.fecha_liquidacion_compra.value == ""
+              ? ""
+              : this.f.fecha_liquidacion_compra.value.singleDate.formatted,
+
+          fecha_vencimiento_venta:
+            this.f.fecha_vencimiento_venta.value == ""
+              ? ""
+              : this.f.fecha_vencimiento_venta.value.singleDate.formatted,
+          fecha_ultima_cupon_venta:
+            this.f.fecha_ultima_cupon_venta.value == ""
+              ? ""
+              : this.f.fecha_ultima_cupon_venta.value.singleDate.formatted,
+          fecha_liquidacion_venta:
+            this.f.fecha_liquidacion_venta.value == ""
+              ? ""
+              : this.f.fecha_liquidacion_venta.value.singleDate.formatted
         }
       )
       .subscribe(
@@ -476,82 +506,64 @@ export class EURB implements InstrumentComponent {
             ans["result"]["instrumento_compra"]["fecha_inicio_vigencia"];
 
           // Instrumento de venta
-          this.comision_casa_venta =
-            ans["result"]["instrumento_venta"]["comision_casa_venta"];
-
-          this.comision_bolsa_venta =
-            ans["result"]["instrumento_venta"]["comision_bolsa_venta"];
-          this.fecha_siguiente_cupon_venta =
-            ans["result"]["instrumento_venta"]["fecha_siguiente_cupon_venta"];
-          this.dias_vencimiento_venta =
-            ans["result"]["instrumento_venta"]["dias_vencimiento_venta"];
-          this.dias_acumulados_venta =
-            ans["result"]["instrumento_venta"]["dias_acumulados_venta"];
-          this.ytm_vencimiento_comision_porcentaje_venta =
-            ans["result"]["instrumento_venta"][
-              "ytm_vencimiento_comision_porcentaje_venta"
-            ];
-          this.ytm_vencimiento_porcentaje_venta =
-            ans["result"]["instrumento_venta"][
-              "ytm_vencimiento_porcentaje_venta"
-            ];
-          this.interes_acumulado_venta =
-            ans["result"]["instrumento_venta"]["interes_acumulado_venta"];
-          this.interes_acumulado_porcentaje_venta =
-            ans["result"]["instrumento_venta"][
-              "interes_acumulado_porcentaje_venta"
-            ];
-          this.precio_sucio_porcentaje_venta =
-            ans["result"]["instrumento_venta"]["precio_sucio_porcentaje_venta"];
-          this.valor_transado_venta =
-            ans["result"]["instrumento_venta"]["valor_transado_venta"];
-          this.monto_recibir =
-            ans["result"]["instrumento_venta"]["monto_recibir"];
-
-          // Resultado de la operacion
-          this.dias_tenencia_total =
-            ans["result"]["resultado_operacion"]["dias_tenencia_total"];
-          this.ganancia_perdida_capital =
-            ans["result"]["resultado_operacion"]["ganancia_perdida_capital"];
-          this.ingresos_intereses =
-            ans["result"]["resultado_operacion"]["ingresos_intereses"];
-          this.costos_totales =
-            ans["result"]["resultado_operacion"]["costos_totales"];
-          this.ganancia_perdida_total =
-            ans["result"]["resultado_operacion"]["ganancia_perdida_total"];
-          this.ganancia_perdida_capital_porcentaje =
-            ans["result"]["resultado_operacion"][
-              "ganancia_perdida_capital_porcentaje"
-            ];
-          this.intereses_porcentaje =
-            ans["result"]["resultado_operacion"]["intereses_porcentaje"];
-          this.neto_antes_impuesto_porcentaje =
-            ans["result"]["resultado_operacion"][
-              "neto_antes_impuesto_porcentaje"
-            ];
-          this.neto_despues_impuesto_porcentaje =
-            ans["result"]["resultado_operacion"][
-              "neto_despues_impuesto_porcentaje"
-            ];
-          this.total_ingresos_recibidos =
-            ans["result"]["resultado_operacion"]["total_ingresos_recibidos"];
+          if (this.tipoEjecucion == 1) {
+            this.comision_casa_venta =
+              ans["result"]["instrumento_venta"]["comision_casa_venta"];
+            this.comision_bolsa_venta =
+              ans["result"]["instrumento_venta"]["comision_bolsa_venta"];
+            this.fecha_siguiente_cupon_venta =
+              ans["result"]["instrumento_venta"]["fecha_siguiente_cupon_venta"];
+            this.dias_vencimiento_venta =
+              ans["result"]["instrumento_venta"]["dias_vencimiento_venta"];
+            this.dias_acumulados_venta =
+              ans["result"]["instrumento_venta"]["dias_acumulados_venta"];
+            this.ytm_vencimiento_comision_porcentaje_venta =
+              ans["result"]["instrumento_venta"][
+                "ytm_vencimiento_comision_porcentaje_venta"
+              ];
+            this.ytm_vencimiento_porcentaje_venta =
+              ans["result"]["instrumento_venta"][
+                "ytm_vencimiento_porcentaje_venta"
+              ];
+            this.interes_acumulado_venta =
+              ans["result"]["instrumento_venta"]["interes_acumulado_venta"];
+            this.interes_acumulado_porcentaje_venta =
+              ans["result"]["instrumento_venta"][
+                "interes_acumulado_porcentaje_venta"
+              ];
+            this.precio_sucio_porcentaje_venta =
+              ans["result"]["instrumento_venta"][
+                "precio_sucio_porcentaje_venta"
+              ];
+            this.valor_transado_venta =
+              ans["result"]["instrumento_venta"]["valor_transado_venta"];
+            this.monto_recibir =
+              ans["result"]["instrumento_venta"]["monto_recibir"];
+
+            this.operation_results_work = ans["result"]["resultado_operacion"];
+            this.operation_result = true;
+          }
 
           // 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.slice(0, -1);
           this.dataSource2.data = this.proyecciones.slice(0, -1);
           this.dataSource.paginator = this.paginator;
           this.dataSource.sort = this.sort;
 
           this.bonosObject = {
+            completo: this.tipoEjecucion,
+            cancelado: this.tipoEjecucion,
+            renta_porcentaje: this.investmentProposalForm.value
+              .renta_porcentaje,
             costo_cedeval: this.investmentProposalForm.value.costo_cedeval,
             costo_transferencia: this.investmentProposalForm.value
               .costo_transferencia,
@@ -567,18 +579,6 @@ export class EURB implements InstrumentComponent {
             comision_bolsa_porcentaje_compra: this.investmentProposalForm.value
               .comision_bolsa_porcentaje_compra,
 
-            valor_nominal_venta: this.investmentProposalForm.value
-              .valor_nominal_venta,
-            precio_venta: this.investmentProposalForm.value.precio_venta,
-            precio_vencimiento_venta: this.investmentProposalForm.value
-              .precio_vencimiento_venta,
-            cupon_porcentaje_venta: this.investmentProposalForm.value
-              .cupon_porcentaje_venta,
-            comision_casa_porcentaje_venta: this.investmentProposalForm.value
-              .comision_casa_porcentaje_venta,
-            comision_bolsa_porcentaje_venta: this.investmentProposalForm.value
-              .comision_bolsa_porcentaje_venta,
-
             fecha_vencimiento_compra: this.f.fecha_vencimiento_compra.value
               .singleDate.formatted,
             fecha_ultima_cupon_compra: this.f.fecha_ultima_cupon_compra.value
@@ -586,13 +586,6 @@ export class EURB implements InstrumentComponent {
             fecha_liquidacion_compra: this.f.fecha_liquidacion_compra.value
               .singleDate.formatted,
 
-            fecha_vencimiento_venta: this.f.fecha_vencimiento_venta.value
-              .singleDate.formatted,
-            fecha_ultima_cupon_venta: this.f.fecha_ultima_cupon_venta.value
-              .singleDate.formatted,
-            fecha_liquidacion_venta: this.f.fecha_liquidacion_venta.value
-              .singleDate.formatted,
-
             // Instrumento de compra
 
             comision_casa_compra: this.comision_casa_compra,
@@ -611,26 +604,9 @@ export class EURB implements InstrumentComponent {
             valor_transado_compra: this.valor_transado_compra,
             monto_pagar: this.monto_pagar,
             fecha_inicio_vigencia: this.fecha_inicio_vigencia,
-            // Instrumento de venta
-
-            comision_casa_venta: this.comision_casa_venta,
-            comision_bolsa_venta: this.comision_bolsa_venta,
-
-            fecha_siguiente_cupon_venta: this.fecha_siguiente_cupon_venta,
-            dias_vencimiento_venta: this.dias_vencimiento_venta,
-            dias_acumulados_venta: this.dias_acumulados_venta,
-            ytm_vencimiento_porcentaje_venta: this
-              .ytm_vencimiento_porcentaje_venta,
-            ytm_vencimiento_comision_porcentaje_venta: this
-              .ytm_vencimiento_comision_porcentaje_venta,
-
-            interes_acumulado_venta: this.interes_acumulado_venta,
-            interes_acumulado_porcentaje_venta: this
-              .interes_acumulado_porcentaje_venta,
-            precio_sucio_porcentaje_venta: this.precio_sucio_porcentaje_venta,
-            valor_transado_venta: this.valor_transado_venta,
-            // Resultado de la operacion
 
+            // Resultado de la operacion
+            /*
             monto_recibir: this.monto_recibir,
             dias_tenencia_total: this.dias_tenencia_total,
             ganancia_perdida_capital: this.ganancia_perdida_capital,
@@ -644,10 +620,74 @@ export class EURB implements InstrumentComponent {
             neto_despues_impuesto_porcentaje: this
               .neto_despues_impuesto_porcentaje,
             total_ingresos_recibidos: this.total_ingresos_recibidos,
-
+            */
             // Proyecciones
+
             proyecciones: this.proyecciones
           };
+          if (this.tipoEjecucion == 1) {
+            this.bonosObject[
+              "valor_nominal_venta"
+            ] = this.investmentProposalForm.value.valor_nominal_venta;
+            this.bonosObject[
+              "precio_venta"
+            ] = this.investmentProposalForm.value.precio_venta;
+            this.bonosObject[
+              "precio_vencimiento_venta"
+            ] = this.investmentProposalForm.value.precio_vencimiento_venta;
+            this.bonosObject[
+              "comision_casa_porcentaje_venta"
+            ] = this.investmentProposalForm.value.comision_casa_porcentaje_venta;
+            this.bonosObject[
+              "cupon_porcentaje_venta"
+            ] = this.investmentProposalForm.value.cupon_porcentaje_venta;
+            this.bonosObject[
+              "comision_bolsa_porcentaje_venta"
+            ] = this.investmentProposalForm.value.comision_bolsa_porcentaje_venta;
+            this.bonosObject[
+              "fecha_vencimiento_venta"
+            ] = this.f.fecha_vencimiento_venta.value.singleDate.formatted;
+            this.bonosObject[
+              "fecha_ultima_cupon_venta"
+            ] = this.f.fecha_ultima_cupon_venta.value.singleDate.formatted;
+            this.bonosObject[
+              "fecha_liquidacion_venta"
+            ] = this.f.fecha_liquidacion_venta.value.singleDate.formatted;
+            this.bonosObject["comision_casa_venta"] = this.comision_casa_venta;
+            this.bonosObject[
+              "comision_bolsa_venta"
+            ] = this.comision_bolsa_venta;
+            this.bonosObject[
+              "fecha_siguiente_cupon_venta"
+            ] = this.fecha_siguiente_cupon_venta;
+            this.bonosObject[
+              "dias_vencimiento_venta"
+            ] = this.dias_vencimiento_venta;
+            this.bonosObject[
+              "dias_acumulados_venta"
+            ] = this.dias_acumulados_venta;
+            this.bonosObject[
+              "ytm_vencimiento_porcentaje_venta"
+            ] = this.ytm_vencimiento_porcentaje_venta;
+            this.bonosObject[
+              "ytm_vencimiento_comision_porcentaje_venta"
+            ] = this.ytm_vencimiento_comision_porcentaje_venta;
+            this.bonosObject[
+              "interes_acumulado_venta"
+            ] = this.interes_acumulado_venta;
+            this.bonosObject[
+              "interes_acumulado_porcentaje_venta"
+            ] = this.interes_acumulado_porcentaje_venta;
+            this.bonosObject[
+              "precio_sucio_porcentaje_venta"
+            ] = this.precio_sucio_porcentaje_venta;
+            this.bonosObject[
+              "valor_transado_venta"
+            ] = this.valor_transado_venta;
+            this.bonosObject[
+              "monto_recibir"
+            ] = this.monto_recibir;
+          }
 
           this.formDataService.setWork(this.bonosObject);
           Swal.close();
@@ -686,4 +726,90 @@ export class EURB implements InstrumentComponent {
   goToNext(form: any) {
     this.getCalculations(form, true);
   }
+
+  toggle_ejecucion(input: any) {
+    this.tipoEjecucion = +input;
+    this.setValidators();
+  }
+
+  setValidators() {
+    const precio_venta = this.investmentProposalForm.get("precio_venta");
+
+    const valor_nominal_venta = this.investmentProposalForm.get(
+      "valor_nominal_venta"
+    );
+    const precio_vencimiento_venta = this.investmentProposalForm.get(
+      "precio_vencimiento_venta"
+    );
+    const cupon_porcentaje_venta = this.investmentProposalForm.get(
+      "cupon_porcentaje_venta"
+    );
+    const comision_casa_porcentaje_venta = this.investmentProposalForm.get(
+      "comision_casa_porcentaje_venta"
+    );
+    const comision_bolsa_porcentaje_venta = this.investmentProposalForm.get(
+      "comision_bolsa_porcentaje_venta"
+    );
+    const fecha_ultima_cupon_venta = this.investmentProposalForm.get(
+      "fecha_ultima_cupon_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_venta.setValidators([
+        Validators.required,
+        Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+      ]);
+
+      valor_nominal_venta.setValidators([
+        Validators.required,
+        Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+      ]);
+      precio_vencimiento_venta.setValidators([
+        Validators.required,
+        Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+      ]);
+      cupon_porcentaje_venta.setValidators([
+        Validators.required,
+        Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+      ]);
+      comision_casa_porcentaje_venta.setValidators([
+        Validators.required,
+        Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+      ]);
+      comision_bolsa_porcentaje_venta.setValidators([
+        Validators.required,
+        Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+      ]);
+      fecha_ultima_cupon_venta.setValidators([Validators.required]);
+      fecha_liquidacion_venta.setValidators([Validators.required]);
+      fecha_vencimiento_venta.setValidators([Validators.required]);
+    } else {
+      precio_venta.setValidators(null);
+
+      valor_nominal_venta.setValidators(null);
+      precio_vencimiento_venta.setValidators(null);
+      cupon_porcentaje_venta.setValidators(null);
+      comision_casa_porcentaje_venta.setValidators(null);
+      comision_bolsa_porcentaje_venta.setValidators(null);
+      fecha_ultima_cupon_venta.setValidators(null);
+      fecha_liquidacion_venta.setValidators(null);
+      fecha_vencimiento_venta.setValidators(null);
+    }
+    precio_venta.updateValueAndValidity();
+
+    valor_nominal_venta.updateValueAndValidity();
+    precio_vencimiento_venta.updateValueAndValidity();
+    cupon_porcentaje_venta.updateValueAndValidity();
+    comision_casa_porcentaje_venta.updateValueAndValidity();
+    comision_bolsa_porcentaje_venta.updateValueAndValidity();
+    fecha_ultima_cupon_venta.updateValueAndValidity();
+    fecha_liquidacion_venta.updateValueAndValidity();
+    fecha_vencimiento_venta.updateValueAndValidity();
+  }
 }

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

@@ -253,6 +253,7 @@
         </div>
       </div>
 
+
       <!-- Fecha de operación -->
       <div class="col-lg-6 col-sm-12 pr-xl-3">
         <div class="form-group">
@@ -463,16 +464,16 @@
             <ng-container matColumnDef="ingreso_bruto">
               <th mat-header-cell *matHeaderCellDef>Ingreso bruto</th>
               <td mat-cell *matCellDef="let row">
-                $USD
-                {{
+                
+                ${{
                   row.ingreso_bruto == "" || row.ingreso_bruto == undefined
                     ? "-"
                     : (row.ingreso_bruto | number: "1.2-4")
                 }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD
-                {{
+                
+                ${{
                   consolidado_proyeccion.total_ingreso_bruto | number: "1.2-4"
                 }}
               </td>
@@ -480,15 +481,16 @@
             <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 | number: "1.2-4")
                 }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD
-                {{
+                
+                ${{
                   consolidado_proyeccion.total_ingreso_neto | number: "1.2-4"
                 }}
               </td>
@@ -530,16 +532,16 @@
             <ng-container matColumnDef="rendimiento">
               <th mat-header-cell *matHeaderCellDef>Rendimiento ($)</th>
               <td mat-cell *matCellDef="let row">
-                $USD
-                {{
+                
+                ${{
                   row.rendimiento == "" || row.rendimiento == undefined
                     ? "-"
                     : (row.rendimiento | number: "1.2-4")
                 }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD
-                {{ consolidado_proyeccion.total_rendimiento | number: "1.2-4" }}
+                
+                ${{ consolidado_proyeccion.total_rendimiento | number: "1.2-4" }}
               </td>
             </ng-container>
 
@@ -652,7 +654,7 @@
           $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">
@@ -732,16 +734,16 @@
             <ng-container matColumnDef="ingreso_bruto">
               <th mat-header-cell *matHeaderCellDef>Ingreso bruto</th>
               <td mat-cell *matCellDef="let row">
-                $USD
-                {{
+                
+                ${{
                   row.ingreso_bruto == "" || row.ingreso_bruto == undefined
                     ? "-"
                     : (row.ingreso_bruto | number: "1.2-4")
                 }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD
-                {{
+                
+                ${{
                   consolidado_proyeccion.total_ingreso_bruto | number: "1.2-4"
                 }}
               </td>
@@ -749,16 +751,16 @@
             <ng-container matColumnDef="ingreso_neto">
               <th mat-header-cell *matHeaderCellDef>Ingreso neto</th>
               <td mat-cell *matCellDef="let row">
-                $USD
-                {{
+                
+                ${{
                   row.ingreso_neto == "" || row.ingreso_neto == undefined
                     ? "-"
                     : (row.ingreso_neto | number: "1.2-4")
                 }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD
-                {{
+                
+                ${{
                   consolidado_proyeccion.total_ingreso_neto | number: "1.2-4"
                 }}
               </td>
@@ -800,15 +802,16 @@
             <ng-container matColumnDef="rendimiento">
               <th mat-header-cell *matHeaderCellDef>Rendimiento ($)</th>
               <td mat-cell *matCellDef="let row">
-                {{
+                
+                ${{
                   row.rendimiento == "" || row.rendimiento == undefined
                     ? "-"
                     : (row.rendimiento | number: "1.2-4")
                 }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD
-                {{ consolidado_proyeccion.total_rendimiento | number: "1.2-4" }}
+                
+                ${{ consolidado_proyeccion.total_rendimiento | number: "1.2-4" }}
               </td>
             </ng-container>
 

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

@@ -867,6 +867,15 @@
 <div *ngIf="summary">
   <div class="timeline-body">
     <div class="row">
+      <div class="col-6">
+        <h3>
+          Ticker
+        </h3>
+        <div class="field">
+          {{ instrument_work_summary.ticker }}
+        </div>
+      </div>
+
       <!-- COMPRA -->
       <div class="col-12">
         <h3>

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

@@ -130,10 +130,6 @@ export class FUTU implements InstrumentComponent {
     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
@@ -143,6 +139,11 @@ export class FUTU implements InstrumentComponent {
         this.instrument_work.valor_recibido > 0
       ) {
         this.ejecucion = 1;
+      } else if (
+        this.instrument_work.valor_pagado > 1 ||
+        this.instrument_work.valor_recibido > 1
+      ) {
+        this.ejecucion = 0;
       } else {
         this.ejecucion = +this.instrument_work_summary.completo;
       }
@@ -152,6 +153,7 @@ export class FUTU implements InstrumentComponent {
       operacion: [this.instrument_exists ? "" : this.instrument_work.corto],
       ejecucion: [this.instrument_exists ? "" : this.ejecucion],
       ticker: [this.instrument_exists ? "" : this.instrument_work.ticker],
+
       precio_unitario_compra: [
         this.instrument_exists
           ? ""
@@ -286,9 +288,6 @@ export class FUTU implements InstrumentComponent {
       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 (
@@ -317,11 +316,6 @@ export class FUTU implements InstrumentComponent {
   }
 
   setValidators() {
-    console.log("tipo de operacion");
-    console.log(this.tipoOperacion);
-    console.log("tipo de ejecucion");
-    console.log(this.tipoEjecucion);
-
     const ticker = this.investmentProposalForm.get("ticker");
 
     const precio_unitario_compra = this.investmentProposalForm.get(
@@ -506,7 +500,6 @@ export class FUTU implements InstrumentComponent {
 
   getCalculations(form: any, saveForm: boolean) {
     this.submitted = true;
-    console.log(this.investmentProposalForm);
     if (!form.valid) {
       return false;
     }
@@ -528,6 +521,8 @@ export class FUTU implements InstrumentComponent {
         },
         {
           completo: this.tipoEjecucion,
+          cancelado: this.tipoEjecucion,
+
           corto: this.tipoOperacion,
           precio_unitario_compra: this.f.precio_unitario_compra.value,
           comision_broker_compra: this.f.comision_broker_compra.value,
@@ -631,6 +626,8 @@ export class FUTU implements InstrumentComponent {
 
           this.futurosObject = {
             completo: this.tipoEjecucion,
+            cancelado: this.tipoEjecucion,
+
             corto: this.tipoOperacion,
             ticker: this.investmentProposalForm.value.ticker,
 

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

@@ -362,12 +362,6 @@
           $USD {{ instrument_work.valor_transado | number: "1.2-4" }}
         </div>
       </div>
-      <div class="col-lg-3 col-md-4 col-sm-6">
-        <h4>Ingreso neto:</h4>
-        <div class="field">
-          $USD {{ instrument_work.ingreso_neto | number: "1.2-4" }}
-        </div>
-      </div>
 
       <div class="col-lg-3 col-md-4 col-sm-6">
         <h4>Total a pagar:</h4>

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

@@ -47,8 +47,6 @@
     </div>
 
     <div class="row">
-      <!-- Fecha de vencimiento -->
-
       <div class="col-lg-6 col-sm-12 pr-xl-3">
         <div class="form-group">
           <label for="ticker">Ticker: </label>
@@ -864,7 +862,7 @@
 <div *ngIf="summary">
   <div class="timeline-body">
     <div class="row">
-      <div class="col-12">
+      <div class="col-6">
         <h3>
           Ticker
         </h3>
@@ -872,6 +870,7 @@
           {{ instrument_work_summary.ticker }}
         </div>
       </div>
+
       <!-- COMPRA -->
       <div class="col-12">
         <h3>

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

@@ -130,13 +130,10 @@ export class OPC implements InstrumentComponent {
     this.instrument_exists = this.instrument_work == undefined;
     this.general = this.formDataService.getGeneralInfo();
 
-    console.log("init");
-    console.log(this.operaciones);
-    console.log(this.instrument_work);
-
     this.investmentProposalForm = this.formBuilder.group({
       operacion: [this.instrument_exists ? "" : +this.instrument_work.corto],
       ejecucion: [this.instrument_exists ? "" : this.ejecucion],
+
       ticker: [this.instrument_exists ? "" : this.instrument_work.ticker],
       precio_unitario_compra: [
         this.instrument_exists
@@ -272,9 +269,6 @@ export class OPC implements InstrumentComponent {
       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 (
@@ -310,11 +304,6 @@ export class OPC implements InstrumentComponent {
   }
 
   setValidators() {
-    console.log("tipo de operacion");
-    console.log(this.tipoOperacion);
-    console.log("tipo de ejecucion");
-    console.log(this.tipoEjecucion);
-
     const ticker = this.investmentProposalForm.get("ticker");
 
     const precio_unitario_compra = this.investmentProposalForm.get(
@@ -498,7 +487,6 @@ export class OPC implements InstrumentComponent {
 
   getCalculations(form: any, saveForm: boolean) {
     this.submitted = true;
-    console.log(this.investmentProposalForm);
     if (!form.valid) {
       return false;
     }
@@ -520,6 +508,8 @@ export class OPC implements InstrumentComponent {
         },
         {
           completo: this.tipoEjecucion,
+          cancelado: this.tipoEjecucion,
+
           corto: this.tipoOperacion,
           precio_unitario_compra: this.f.precio_unitario_compra.value,
           comision_broker_compra: this.f.comision_broker_compra.value,
@@ -623,6 +613,8 @@ export class OPC implements InstrumentComponent {
 
           this.opcionesObject = {
             completo: this.tipoEjecucion,
+            cancelado: this.tipoEjecucion,
+
             corto: this.tipoOperacion,
             ticker: this.investmentProposalForm.value.ticker,
 

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

@@ -351,7 +351,10 @@
             >Cálculos del instrumento</span
           >
         </div>
-
+        <div class="col-sm-6">
+          <h4>Renta (%):</h4>
+          <div class="field">{{ renta_porcentaje | number: "1.2-4" }}%</div>
+        </div>
         <div class="col-sm-6">
           <h4>Ingreso bruto:</h4>
           <div class="field">$USD {{ ingreso_bruto | number: "1.2-4" }}</div>
@@ -444,15 +447,14 @@
             <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 | number: "1.2-4")
                 }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD $USD
-                {{
+                ${{
                   consolidado_proyeccion.total_ingreso_bruto | number: "1.2-4"
                 }}
               </td>
@@ -460,15 +462,14 @@
             <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 | number: "1.2-4")
                 }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD $USD
-                {{
+                ${{
                   consolidado_proyeccion.total_ingreso_neto | number: "1.2-4"
                 }}
               </td>
@@ -476,11 +477,10 @@
             <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" }}
+                ${{ row.costo_cedeval | number: "1.2-4" }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD $USD
-                {{
+                ${{
                   consolidado_proyeccion.total_costo_cedeval | number: "1.2-4"
                 }}
               </td>
@@ -488,20 +488,19 @@
             <ng-container matColumnDef="renta">
               <th mat-header-cell *matHeaderCellDef>Renta</th>
               <td mat-cell *matCellDef="let row">
-                {{ row.renta | number: "1.2-4" }}
+                ${{ row.renta | number: "1.2-4" }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD {{ consolidado_proyeccion.total_renta | number: "1.2-4" }}
+                ${{ 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" }}
+                ${{ row.costo_transferencia | number: "1.2-4" }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD $USD
-                {{
+                ${{
                   consolidado_proyeccion.total_costo_transferencia
                     | number: "1.2-4"
                 }}
@@ -510,21 +509,21 @@
             <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" }}
+                ${{ row.costo_banco | number: "1.2-4" }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD
-                {{ consolidado_proyeccion.total_costo_banco | number: "1.2-4" }}
+                ${{
+                  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" }}
+                ${{ row.otros_costos | number: "1.2-4" }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD $USD
-                {{
+                ${{
                   consolidado_proyeccion.total_otros_costos | number: "1.2-4"
                 }}
               </td>
@@ -588,7 +587,12 @@
           $USD {{ instrument_work.valor_transado | number: "1.2-4" }}
         </div>
       </div>
-
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Renta (%):</h4>
+        <div class="field">
+          {{ instrument_work.renta_porcentaje | number: "1.2-4" }}%
+        </div>
+      </div>
       <div class="col-lg-3 col-md-4 col-sm-6">
         <h4>Precio porcentaje:</h4>
         <div class="field">
@@ -737,15 +741,14 @@
             <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 | number: "1.2-4")
                 }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD
-                {{
+                ${{
                   consolidado_proyeccion.total_ingreso_bruto | number: "1.2-4"
                 }}
               </td>
@@ -753,15 +756,14 @@
             <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 | number: "1.2-4")
                 }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD
-                {{
+                ${{
                   consolidado_proyeccion.total_ingreso_neto | number: "1.2-4"
                 }}
               </td>
@@ -769,11 +771,10 @@
             <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" }}
+                ${{ row.costo_cedeval | number: "1.2-4" }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD
-                {{
+                ${{
                   consolidado_proyeccion.total_costo_cedeval | number: "1.2-4"
                 }}
               </td>
@@ -781,20 +782,19 @@
             <ng-container matColumnDef="renta">
               <th mat-header-cell *matHeaderCellDef>Renta</th>
               <td mat-cell *matCellDef="let row">
-                {{ row.renta | number: "1.2-4" }}
+                ${{ row.renta | number: "1.2-4" }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD {{ consolidado_proyeccion.total_renta | number: "1.2-4" }}
+                ${{ 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" }}
+                ${{ row.costo_transferencia | number: "1.2-4" }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD
-                {{
+                ${{
                   consolidado_proyeccion.total_costo_transferencia
                     | number: "1.2-4"
                 }}
@@ -803,21 +803,21 @@
             <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" }}
+                ${{ row.costo_banco | number: "1.2-4" }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD
-                {{ consolidado_proyeccion.total_costo_banco | number: "1.2-4" }}
+                ${{
+                  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" }}
+                ${{ row.otros_costos | number: "1.2-4" }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD
-                {{
+                ${{
                   consolidado_proyeccion.total_otros_costos | number: "1.2-4"
                 }}
               </td>

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

@@ -105,6 +105,7 @@ export class PBUR implements InstrumentComponent {
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
   @ViewChild(MatSort, { static: true }) sort: MatSort;
   fecha_vencimiento: any;
+  renta_porcentaje: any;
   constructor(
     private formBuilder: FormBuilder,
     private router: Router,
@@ -313,6 +314,7 @@ export class PBUR implements InstrumentComponent {
           this.fecha_inicio_vigencia = ans["result"]["fecha_inicio_vigencia"];
           this.fecha_vencimiento = ans["result"]["fecha_vencimiento"];
           this.proyecciones = ans["result"]["proyecciones"];
+          this.renta_porcentaje = ans["result"]["renta_porcentaje"];
 
           if (this.proyecciones != undefined && this.proyecciones.length > 0) {
             this.consolidado_proyeccion = this.proyecciones.slice(0, -1);

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

@@ -0,0 +1,671 @@
+<div *ngIf="!summary">
+  <h4 class="card-title">
+    Préstamo empresarial
+  </h4>
+  <form
+    class="form-auth-small ng-untouched ng-pristine ng-valid"
+    [formGroup]="investmentProposalForm"
+  >
+    <div class="row">
+      <!-- Monto préstamo -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="monto_prestamo">Monto préstamo: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="monto_prestamo"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.monto_prestamo.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.monto_prestamo.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.monto_prestamo.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.monto_prestamo.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Tasa -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="tasa_porcentaje">Tasa: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-percent" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="tasa_porcentaje"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.tasa_porcentaje.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.tasa_porcentaje.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.tasa_porcentaje.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.tasa_porcentaje.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- IVA -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="iva_porcentaje">IVA: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-percent" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="iva_porcentaje"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.iva_porcentaje.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.iva_porcentaje.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.iva_porcentaje.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.iva_porcentaje.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Comisián desembolso -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="comision_desembolso_porcentaje"
+            >Comisión desembolso:
+          </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-percent" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="comision_desembolso_porcentaje"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid':
+                  submitted && f.comision_desembolso_porcentaje.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.comision_desembolso_porcentaje.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.comision_desembolso_porcentaje.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.comision_desembolso_porcentaje.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Fecha operación -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_operacion">Fecha operación: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="far fa-calendar" aria-hidden="true"></i>
+            </p>
+            <input
+              class="input-box form-control"
+              placeholder="Seleccione una fecha"
+              angular-mydatepicker
+              formControlName="fecha_operacion"
+              (click)="dp.toggleCalendar()"
+              [options]="myDpOptions"
+              #dp="angular-mydatepicker"
+              [ngClass]="{
+                'is-invalid': submitted && f.fecha_operacion.errors
+              }"
+            />
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_operacion.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_operacion.errors.required">
+              Campo requerido
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Fecha vencimiento -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_vencimiento">Fecha vencimiento: </label>
+
+          <div class="input-box-container">
+            <div>
+              <p>
+                <i class="far fa-calendar" aria-hidden="true"></i>
+              </p>
+              <input
+                class="input-box form-control"
+                placeholder="Seleccione una fecha"
+                angular-mydatepicker
+                formControlName="fecha_vencimiento"
+                (click)="dp1.toggleCalendar()"
+                [options]="myDpOptions"
+                #dp1="angular-mydatepicker"
+                [ngClass]="{
+                  'is-invalid': submitted && f.fecha_vencimiento.errors
+                }"
+              />
+            </div>
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_vencimiento.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_vencimiento.errors.required">
+              Campo requerido
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="col-lg-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-6">
+          <h4>Monto préstamo:</h4>
+          <div class="field">$USD {{ monto_prestamo | number: "1.2-4" }}</div>
+        </div>
+        <div class="col-sm-6">
+          <h4>Tasa (%):</h4>
+          <div class="field">{{ tasa_porcentaje | number: "1.2-4" }}%</div>
+        </div>
+        <div class="col-sm-6">
+          <h4>IVA (%):</h4>
+          <div class="field">{{ iva_porcentaje | number: "1.2-4" }}%</div>
+        </div>
+        <div class="col-sm-6">
+          <h4>IVA ($):</h4>
+          <div class="field">$USD {{ iva | number: "1.2-4" }}</div>
+        </div>
+
+        <div class="col-sm-6">
+          <h4>Comisión desembolso (%):</h4>
+          <div class="field">
+            {{ comision_desembolso_porcentaje | number: "1.2-4" }}%
+          </div>
+        </div>
+        <div class="col-sm-6">
+          <h4>Comisión desembolso ($):</h4>
+          <div class="field">
+            $USD {{ comision_desembolso | number: "1.2-4" }}
+          </div>
+        </div>
+        <div class="col-sm-6">
+          <h4>Plazo:</h4>
+          <div class="field">{{ plazo | number: "1.2-4" }}</div>
+        </div>
+        <div class="col-sm-6">
+          <h4>Fecha de operacion:</h4>
+          <div class="field">{{ fecha_operacion }}</div>
+        </div>
+        <div class="col-sm-6">
+          <h4>Fecha de vencimiento:</h4>
+          <div class="field">{{ fecha_vencimiento }}</div>
+        </div>
+      </div>
+    </div>
+    <br />
+    <!-- Tabla de proyecciones del instrumento-->
+    <div class="instrument-calcs">
+      <div class="row">
+        <div class="col-12">
+          <span class="badge badge-success badge-custom"
+            >Proyecciones del instrumento</span
+          >
+        </div>
+
+        <div *ngIf="hasProjections" class="cete-table-container">
+          <table mat-table [dataSource]="dataSource" class="example-table">
+            <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>
+
+            <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="tasa_porcentaje">
+              <th mat-header-cell *matHeaderCellDef>Tasa (%)</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.tasa_porcentaje == "" || row.tasa_porcentaje == undefined
+                    ? "0"
+                    : (row.tasa_porcentaje | number: "1.2-4")
+                }}%
+              </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
+                    ? "0"
+                    : (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>
+              <td mat-cell *matCellDef="let row">
+                ${{
+                  row.ingreso_neto == "" || row.ingreso_neto == undefined
+                    ? "0"
+                    : (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="iva">
+              <th mat-header-cell *matHeaderCellDef>IVA</th>
+              <td mat-cell *matCellDef="let row">
+                ${{
+                  row.iva == "" || row.iva == undefined
+                    ? "0"
+                    : (row.iva | number: "1.2-4")
+                }}
+              </td>
+              <td mat-footer-cell *matFooterCellDef>
+                ${{ consolidado_proyeccion.total_iva | number: "1.2-4" }}
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="amortizacion_capital">
+              <th mat-header-cell *matHeaderCellDef>Amortización capital</th>
+              <td mat-cell *matCellDef="let row">
+                ${{
+                  row.amortizacion_capital == "" ||
+                  row.amortizacion_capital == undefined
+                    ? "0"
+                    : (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="monto_recibir">
+              <th mat-header-cell *matHeaderCellDef>Monto a recibir</th>
+              <td mat-cell *matCellDef="let row">
+                ${{
+                  row.monto_recibir == "" || row.monto_recibir == undefined
+                    ? "0"
+                    : (row.monto_recibir | number: "1.2-4")
+                }}
+              </td>
+              <td mat-footer-cell *matFooterCellDef>
+                ${{
+                  consolidado_proyeccion.total_monto_recibir | number: "1.2-4"
+                }}
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="capital_restante">
+              <th mat-header-cell *matHeaderCellDef>Capital restante</th>
+              <td mat-cell *matCellDef="let row">
+                ${{
+                  row.capital_restante == "" ||
+                  row.capital_restante == undefined
+                    ? "0"
+                    : (row.capital_restante | number: "1.2-4")
+                }}
+              </td>
+              <td mat-footer-cell *matFooterCellDef>
+                ${{
+                  consolidado_proyeccion.total_capital_restante
+                    | 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>Valor nominal:</h4>
+        <div class="field">
+          $USD {{ instrument_work.monto_prestamo | number: "1.2-4" }}
+        </div>
+      </div>
+
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Monto préstamo:</h4>
+        <div class="field">
+          $USD {{ instrument_work.monto_prestamo | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Tasa (%):</h4>
+        <div class="field">
+          {{ instrument_work.tasa_porcentaje | number: "1.2-4" }}%
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>IVA (%):</h4>
+        <div class="field">
+          {{ instrument_work.iva_porcentaje | number: "1.2-4" }}%
+        </div>
+      </div>
+
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>IVA ($):</h4>
+        <div class="field">
+          $USD {{ instrument_work.iva | number: "1.2-4" }}
+        </div>
+      </div>
+
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Comisión desembolso (%):</h4>
+        <div class="field">
+          {{
+            instrument_work.comision_desembolso_porcentaje | number: "1.2-4"
+          }}%
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Comisión desembolso ($):</h4>
+        <div class="field">
+          $USD {{ instrument_work.comision_desembolso | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Plazo:</h4>
+        <div class="field">{{ instrument_work.plazo | number: "1.2-4" }}</div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Fecha de operacion:</h4>
+        <div class="field">{{ instrument_work.fecha_operacion }}</div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Fecha de vencimiento:</h4>
+        <div class="field">{{ instrument_work.fecha_vencimiento }}</div>
+      </div>
+    </div>
+    <br />
+    <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">
+            <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>
+
+            <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="tasa_porcentaje">
+              <th mat-header-cell *matHeaderCellDef>Tasa (%)</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.tasa_porcentaje == "" || row.tasa_porcentaje == undefined
+                    ? "0"
+                    : (row.tasa_porcentaje | number: "1.2-4")
+                }}%
+              </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
+                    ? "0"
+                    : (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>
+              <td mat-cell *matCellDef="let row">
+                ${{
+                  row.ingreso_neto == "" || row.ingreso_neto == undefined
+                    ? "0"
+                    : (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="iva">
+              <th mat-header-cell *matHeaderCellDef>IVA</th>
+              <td mat-cell *matCellDef="let row">
+                ${{
+                  row.iva == "" || row.iva == undefined
+                    ? "0"
+                    : (row.iva | number: "1.2-4")
+                }}
+              </td>
+              <td mat-footer-cell *matFooterCellDef>
+                ${{ consolidado_proyeccion.total_iva | number: "1.2-4" }}
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="amortizacion_capital">
+              <th mat-header-cell *matHeaderCellDef>Amortización capital</th>
+              <td mat-cell *matCellDef="let row">
+                ${{
+                  row.amortizacion_capital == "" ||
+                  row.amortizacion_capital == undefined
+                    ? "0"
+                    : (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="monto_recibir">
+              <th mat-header-cell *matHeaderCellDef>Monto a recibir</th>
+              <td mat-cell *matCellDef="let row">
+                ${{
+                  row.monto_recibir == "" || row.monto_recibir == undefined
+                    ? "0"
+                    : (row.monto_recibir | number: "1.2-4")
+                }}
+              </td>
+              <td mat-footer-cell *matFooterCellDef>
+                ${{
+                  consolidado_proyeccion.total_monto_recibir | number: "1.2-4"
+                }}
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="capital_restante">
+              <th mat-header-cell *matHeaderCellDef>Capital restante</th>
+              <td mat-cell *matCellDef="let row">
+                ${{
+                  row.capital_restante == "" ||
+                  row.capital_restante == undefined
+                    ? "0"
+                    : (row.capital_restante | number: "1.2-4")
+                }}
+              </td>
+              <td mat-footer-cell *matFooterCellDef>
+                ${{
+                  consolidado_proyeccion.total_capital_restante
+                    | 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/pemp/pemp.component.ts

@@ -0,0 +1,328 @@
+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-pemp",
+  templateUrl: "./pemp.component.html"
+})
+export class PEMP implements InstrumentComponent {
+  title: string = "Préstamo empresarial";
+  @Input() data: any;
+  @Input() summary: boolean;
+  @Input() investmentID: string;
+
+  displayedColumns: string[] = [
+    "posicion",
+    "plazo",
+    "fecha_pago",
+    "tasa_porcentaje",
+    "ingreso_bruto",
+    "ingreso_neto",
+    "iva",
+    "amortizacion_capital",
+    "monto_recibir",
+    "capital_restante"
+  ];
+
+  @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_operacion: IMyDateModel;
+  m_fecha_liquidacion: IMyDateModel;
+  m_fecha_rendencion: IMyDateModel;
+
+  submitted: boolean = false;
+  instrument_exists: boolean;
+  instrument_work: any = [];
+  financials: any;
+  base_types: any;
+
+  ingreso_bruto: number = 0.0;
+  ingreso_neto: number = 0.0;
+  monto_prestamo: number = 0.0;
+  tasa_porcentaje: number = 0.0;
+  plazo: number = 0.0;
+  iva_porcentaje: number = 0.0;
+  comision_desembolso_porcentaje: number = 0.0;
+  iva: number = 0.0;
+  proyecciones: any;
+
+  pempObject: {};
+  dataSource = new MatTableDataSource(this.proyecciones);
+  dataSource2 = new MatTableDataSource(this.proyecciones);
+  hasProjections: boolean;
+  fecha_vencimiento: any;
+  consolidado_proyeccion: any;
+
+  fecha_operacion: any;
+  comision_desembolso: 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.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.slice(0, -1);
+      this.dataSource2.paginator = this.paginator;
+      this.dataSource2.sort = this.sort;
+    } else {
+      this.hasProjections = false;
+    }
+
+    this.investmentProposalForm = this.formBuilder.group({
+      monto_prestamo: [
+        this.instrument_exists ? "" : this.instrument_work.monto_prestamo,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+
+      tasa_porcentaje: [
+        this.instrument_exists ? "" : this.instrument_work.tasa_porcentaje,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+      iva_porcentaje: [
+        this.instrument_exists ? "" : this.instrument_work.iva_porcentaje,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+      comision_desembolso_porcentaje: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.comision_desembolso_porcentaje,
+        [
+          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
+      ],
+      fecha_vencimiento: [
+        this.instrument_exists
+          ? ""
+          : {
+              isRange: false,
+              singleDate: {
+                jsDate: parse(
+                  this.instrument_work.fecha_vencimiento,
+                  "dd/MM/yyyy",
+                  new Date()
+                ),
+                formatted: this.instrument_work.fecha_vencimiento
+              }
+            }
+      ]
+    });
+  }
+
+  get f() {
+    return this.investmentProposalForm.controls;
+  }
+
+  save(form: any): boolean {
+    if (!form.valid) {
+      return false;
+    }
+
+    this.formDataService.setWork(this.pempObject);
+    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
+      .pempCalc(
+        "PEMP", // Codigo del instrumento
+        {
+          id_tipo_base: +this.general.base_anual,
+          id_formato_ingreso: +this.general.formato_ingreso,
+          id_periodicidad: +this.general.periodicidad
+        },
+        {
+          monto_prestamo: +this.f.monto_prestamo.value,
+          tasa_porcentaje: +this.f.tasa_porcentaje.value,
+          iva_porcentaje: +this.f.iva_porcentaje.value,
+          comision_desembolso_porcentaje: +this.f.comision_desembolso_porcentaje
+            .value,
+          fecha_operacion: this.f.fecha_operacion.value.singleDate.formatted,
+          fecha_vencimiento: this.f.fecha_vencimiento.value.singleDate.formatted
+          //fecha_vencimiento: this.f.fecha_vencimiento.value.singleDate.formatted
+        }
+      )
+      .subscribe(
+        ans => {
+          this.monto_prestamo = ans["result"]["instrumento"]["monto_prestamo"];
+          this.tasa_porcentaje =
+            ans["result"]["instrumento"]["tasa_porcentaje"];
+          this.plazo = ans["result"]["instrumento"]["plazo"];
+          this.iva_porcentaje = ans["result"]["instrumento"]["iva_porcentaje"];
+          this.comision_desembolso_porcentaje =
+            ans["result"]["instrumento"]["comision_desembolso_porcentaje"];
+          this.iva = ans["result"]["instrumento"]["iva"];
+          this.fecha_operacion =
+            ans["result"]["instrumento"]["fecha_operacion"];
+          this.fecha_vencimiento =
+            ans["result"]["instrumento"]["fecha_vencimiento"];
+          this.comision_desembolso =
+            ans["result"]["instrumento"]["comision_desembolso"];
+          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.dataSource.data = this.proyecciones.slice(0, -1);
+          this.dataSource.paginator = this.paginator;
+          this.dataSource.sort = this.sort;
+
+          this.pempObject = {
+            monto_prestamo: this.investmentProposalForm.value.monto_prestamo,
+            tasa_porcentaje: this.investmentProposalForm.value.tasa_porcentaje,
+            iva_porcentaje: this.investmentProposalForm.value.iva_porcentaje,
+            comision_desembolso_porcentaje: this.investmentProposalForm.value
+              .comision_desembolso_porcentaje,
+            comision_desembolso: this.comision_desembolso,
+            fecha_operacion: this.f.fecha_operacion.value.singleDate.formatted,
+            fecha_vencimiento: this.f.fecha_vencimiento.value.singleDate
+              .formatted,
+
+            plazo: this.plazo,
+            iva: this.iva,
+            proyecciones: this.proyecciones
+          };
+
+          this.formDataService.setWork(this.pempObject);
+          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/pper/pper.component.html

@@ -0,0 +1,975 @@
+<div *ngIf="!summary">
+  <h4 class="card-title">
+    Préstamo personal
+  </h4>
+  <form
+    class="form-auth-small ng-untouched ng-pristine ng-valid"
+    [formGroup]="investmentProposalForm"
+  >
+    <div class="row">
+      <!-- Monto préstamo -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="monto_prestamo">Monto préstamo: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="monto_prestamo"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.monto_prestamo.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.monto_prestamo.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.monto_prestamo.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.monto_prestamo.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Tasa -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="tasa_porcentaje">Tasa: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-percent" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="tasa_porcentaje"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.tasa_porcentaje.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.tasa_porcentaje.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.tasa_porcentaje.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.tasa_porcentaje.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- IVA -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="iva_porcentaje">IVA: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-percent" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="iva_porcentaje"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.iva_porcentaje.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.iva_porcentaje.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.iva_porcentaje.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.iva_porcentaje.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Plazo -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="plazo_gracia">Plazo: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-list-ol" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="plazo_gracia"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.plazo_gracia.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.plazo_gracia.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.plazo_gracia.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.plazo_gracia.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Pago seguro daño -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="pago_seguro_dano">Pago seguro daño: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="pago_seguro_dano"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.pago_seguro_dano.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.pago_seguro_dano.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.pago_seguro_dano.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Pago seguro vivienda -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="pago_seguro_vivienda">Pago seguro vivienda: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-dollar-sign"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="pago_seguro_vivienda"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.pago_seguro_vivienda.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.pago_seguro_vivienda.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.pago_seguro_vivienda.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Total de cuotas mensuales -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="total_cuotas_mensuales"
+            >Total de cuotas mensuales:
+          </label>
+          <div class="input-box-container">
+            <p>
+              <i class="fas fa-list-ol" aria-hidden="true"></i>
+            </p>
+            <input
+              type="text"
+              formControlName="total_cuotas_mensuales"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid': submitted && f.total_cuotas_mensuales.errors
+              }"
+            />
+            <div
+              *ngIf="submitted && f.total_cuotas_mensuales.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.total_cuotas_mensuales.errors.required">
+                Campo requerido
+              </div>
+              <div *ngIf="f.total_cuotas_mensuales.errors.pattern">
+                Debe ingresar una cifra válida
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Fecha otorgamiento -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="fecha_otorgamiento">Fecha otorgamiento: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="far fa-calendar" aria-hidden="true"></i>
+            </p>
+            <input
+              class="input-box form-control"
+              placeholder="Seleccione una fecha"
+              angular-mydatepicker
+              formControlName="fecha_otorgamiento"
+              (click)="dp.toggleCalendar()"
+              [options]="myDpOptions"
+              #dp="angular-mydatepicker"
+              [ngClass]="{
+                'is-invalid': submitted && f.fecha_otorgamiento.errors
+              }"
+            />
+          </div>
+
+          <div
+            *ngIf="submitted && f.fecha_otorgamiento.errors"
+            class="invalid-feedback"
+          >
+            <div *ngIf="f.fecha_otorgamiento.errors.required">
+              Campo requerido
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Nombre deudor -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="nombre_deudor">Nombre deudor: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="far fa-user" aria-hidden="true"></i>
+            </p>
+            <input
+              class="input-box form-control"
+              formControlName="nombre_deudor"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- Número deudor -->
+      <div class="col-lg-6 col-sm-12 pr-xl-3">
+        <div class="form-group">
+          <label for="numero_deudor">Número deudor: </label>
+          <div class="input-box-container">
+            <p>
+              <i class="far fa-user" aria-hidden="true"></i>
+            </p>
+            <input
+              class="input-box form-control"
+              formControlName="numero_deudor"
+            />
+          </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-6">
+          <h4>Monto préstamo:</h4>
+          <div class="field">$USD {{ monto_prestamo | number: "1.2-4" }}</div>
+        </div>
+
+        <div class="col-sm-6">
+          <h4>Tasa (%):</h4>
+          <div class="field">{{ tasa_porcentaje | number: "1.2-4" }}%</div>
+        </div>
+        <div class="col-sm-6">
+          <h4>IVA (%):</h4>
+          <div class="field">{{ iva_porcentaje | number: "1.2-4" }}%</div>
+        </div>
+        <div class="col-sm-6">
+          <h4>Plazo:</h4>
+          <div class="field">{{ plazo_gracia }}</div>
+        </div>
+
+        <div class="col-sm-6">
+          <h4>Pago de seguro por daño</h4>
+          <div class="field">$USD {{ pago_seguro_dano | number: "1.2-4" }}</div>
+        </div>
+
+        <div class="col-sm-6">
+          <h4>Pago seguro de vivienda:</h4>
+          <div class="field">
+            $USD {{ pago_seguro_vivienda | number: "1.2-4" }}
+          </div>
+        </div>
+
+        <div class="col-sm-6">
+          <h4>Total de cuotas mensuales:</h4>
+          <div class="field">
+            {{ total_cuotas_mensuales }}
+          </div>
+        </div>
+
+        <div class="col-sm-6">
+          <h4>Cuota sin seguros:</h4>
+          <div class="field">
+            $USD {{ cuota_sin_seguros | number: "1.2-4" }}
+          </div>
+        </div>
+
+        <div class="col-sm-6">
+          <h4>Fecha de otorgamiento:</h4>
+          <div class="field">{{ fecha_otorgamiento }}</div>
+        </div>
+        <div class="col-sm-6">
+          <h4>Fecha de gracia:</h4>
+          <div class="field">{{ fecha_gracia }}</div>
+        </div>
+        <div class="col-sm-6">
+          <h4>Fecha fin de otorgamiento:</h4>
+          <div class="field">{{ fecha_fin_otorgamiento }}</div>
+        </div>
+      </div>
+    </div>
+    <br />
+    <!-- Tabla de proyecciones del instrumento-->
+    <div class="instrument-calcs">
+      <div class="row">
+        <div class="col-12">
+          <span class="badge badge-success badge-custom"
+            >Proyecciones del instrumento</span
+          >
+        </div>
+
+        <div *ngIf="hasProjections" class="custom-table-container">
+          <table mat-table [dataSource]="dataSource" class="example-table">
+            <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>
+
+            <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
+                    ? "0"
+                    : (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>
+              <td mat-cell *matCellDef="let row">
+                ${{
+                  row.ingreso_neto == "" || row.ingreso_neto == undefined
+                    ? "0"
+                    : (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="tasa_porcentaje">
+              <th mat-header-cell *matHeaderCellDef>Tasa (%)</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.tasa_porcentaje == "" || row.tasa_porcentaje == undefined
+                    ? "0"
+                    : (row.tasa_porcentaje | number: "1.2-4")
+                }}%
+              </td>
+              <td mat-footer-cell *matFooterCellDef></td>
+            </ng-container>
+
+            <ng-container matColumnDef="saldo_inicial">
+              <th mat-header-cell *matHeaderCellDef>Saldo inicial</th>
+              <td mat-cell *matCellDef="let row">
+                ${{
+                  row.saldo_inicial == "" || row.saldo_inicial == undefined
+                    ? "0"
+                    : (row.saldo_inicial | number: "1.2-4")
+                }}
+              </td>
+              <td mat-footer-cell *matFooterCellDef>
+                ${{
+                  consolidado_proyeccion.total_saldo_inicial | number: "1.2-4"
+                }}
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="pago_cuota">
+              <th mat-header-cell *matHeaderCellDef>Pago cuota ($)</th>
+              <td mat-cell *matCellDef="let row">
+                ${{
+                  row.pago_cuota == "" || row.pago_cuota == undefined
+                    ? "0"
+                    : (row.pago_cuota | number: "1.2-4")
+                }}
+              </td>
+              <td mat-footer-cell *matFooterCellDef>
+                ${{ consolidado_proyeccion.total_pago_cuota | number: "1.2-4" }}
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="iva_interes"
+              >`
+              <th mat-header-cell *matHeaderCellDef>IVA ($)</th>
+              <td mat-cell *matCellDef="let row">
+                ${{
+                  row.iva_interes == "" || row.iva_interes == undefined
+                    ? "0"
+                    : (row.iva_interes | number: "1.2-4")
+                }}
+              </td>
+              <td mat-footer-cell *matFooterCellDef>
+                ${{
+                  consolidado_proyeccion.total_iva_interes | number: "1.2-4"
+                }}
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="abono_capital">
+              <th mat-header-cell *matHeaderCellDef>Abono capital</th>
+              <td mat-cell *matCellDef="let row">
+                ${{
+                  row.abono_capital == "" || row.abono_capital == undefined
+                    ? "0"
+                    : (row.abono_capital | number: "1.2-4")
+                }}
+              </td>
+              <td mat-footer-cell *matFooterCellDef>
+                ${{
+                  consolidado_proyeccion.total_abono_capital | number: "1.2-4"
+                }}
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="capital_restante">
+              <th mat-header-cell *matHeaderCellDef>Capital restante</th>
+              <td mat-cell *matCellDef="let row">
+                ${{
+                  row.capital_restante == "" ||
+                  row.capital_restante == undefined
+                    ? "0"
+                    : (row.capital_restante | number: "1.2-4")
+                }}
+              </td>
+              <td mat-footer-cell *matFooterCellDef>
+                ${{
+                  consolidado_proyeccion.total_capital_restante
+                    | number: "1.2-4"
+                }}
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="pago_seguro_dano">
+              <th mat-header-cell *matHeaderCellDef>Pago seguro daño</th>
+              <td mat-cell *matCellDef="let row">
+                ${{
+                  row.pago_seguro_dano == "" ||
+                  row.pago_seguro_dano == undefined
+                    ? "0"
+                    : (row.pago_seguro_dano | number: "1.2-4")
+                }}
+              </td>
+              <td mat-footer-cell *matFooterCellDef>
+                ${{
+                  consolidado_proyeccion.total_pago_seguro_dano
+                    | number: "1.2-4"
+                }}
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="pago_seguro_vivienda">
+              <th mat-header-cell *matHeaderCellDef>Pago seguro vivienda</th>
+              <td mat-cell *matCellDef="let row">
+                ${{
+                  row.pago_seguro_vivienda == "" ||
+                  row.pago_seguro_vivienda == undefined
+                    ? "0"
+                    : (row.pago_seguro_vivienda | number: "1.2-4")
+                }}
+              </td>
+              <td mat-footer-cell *matFooterCellDef>
+                ${{
+                  consolidado_proyeccion.total_pago_seguro_vivienda
+                    | number: "1.2-4"
+                }}
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="total_cuota">
+              <th mat-header-cell *matHeaderCellDef>Pago seguro vivienda</th>
+              <td mat-cell *matCellDef="let row">
+                ${{
+                  row.total_cuota == "" || row.total_cuota == undefined
+                    ? "0"
+                    : (row.total_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_capital">
+              <th mat-header-cell *matHeaderCellDef>Amortización capital</th>
+              <td mat-cell *matCellDef="let row">
+                ${{
+                  row.amortizacion_capital == "" ||
+                  row.amortizacion_capital == undefined
+                    ? "0"
+                    : (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="total_recibir">
+              <th mat-header-cell *matHeaderCellDef>Total a recibir</th>
+              <td mat-cell *matCellDef="let row">
+                ${{
+                  row.total_recibir == "" || row.total_recibir == undefined
+                    ? "0"
+                    : (row.total_recibir | number: "1.2-4")
+                }}
+              </td>
+              <td mat-footer-cell *matFooterCellDef>
+                ${{ consolidado_proyeccion.total_recibir | 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>Valor nominal:</h4>
+        <div class="field">
+          $USD {{ instrument_work.monto_prestamo | number: "1.2-4" }}
+        </div>
+      </div>
+
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Monto préstamo:</h4>
+        <div class="field">
+          $USD {{ instrument_work.monto_prestamo | number: "1.2-4" }}
+        </div>
+      </div>
+
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>IVA (%):</h4>
+        <div class="field">
+          {{ instrument_work.iva_porcentaje | number: "1.2-4" }}%
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Plazo:</h4>
+        <div class="field">{{ instrument_work.plazo_gracia }}</div>
+      </div>
+
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Pago de seguro por daño</h4>
+        <div class="field">
+          $USD {{ instrument_work.pago_seguro_dano | number: "1.2-4" }}
+        </div>
+      </div>
+
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Pago seguro de vivienda:</h4>
+        <div class="field">
+          $USD {{ instrument_work.pago_seguro_vivienda | number: "1.2-4" }}
+        </div>
+      </div>
+
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Total de cuotas mensuales:</h4>
+        <div class="field">
+          {{ instrument_work.total_cuotas_mensuales }}
+        </div>
+      </div>
+
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Cuota sin seguros:</h4>
+        <div class="field">
+          $USD {{ instrument_work.cuota_sin_seguros | number: "1.2-4" }}
+        </div>
+      </div>
+
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Fecha de otorgamiento:</h4>
+        <div class="field">{{ instrument_work.fecha_otorgamiento }}</div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Fecha de gracia:</h4>
+        <div class="field">{{ instrument_work.fecha_gracia }}</div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Fecha fin de otorgamiento:</h4>
+        <div class="field">{{ instrument_work.fecha_fin_otorgamiento }}</div>
+      </div>
+
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Nombre del deudor:</h4>
+        <div class="field">{{ instrument_work.nombre_deudor }}</div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Número del deudor:</h4>
+        <div class="field">{{ instrument_work.numero_deudor }}</div>
+      </div>
+    </div>
+    <br />
+    <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="custom-table-container">
+          <table mat-table [dataSource]="dataSource2" class="example-table">
+            <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>
+
+            <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
+                    ? "0"
+                    : (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>
+              <td mat-cell *matCellDef="let row">
+                ${{
+                  row.ingreso_neto == "" || row.ingreso_neto == undefined
+                    ? "0"
+                    : (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="tasa_porcentaje">
+              <th mat-header-cell *matHeaderCellDef>Tasa (%)</th>
+              <td mat-cell *matCellDef="let row">
+                {{
+                  row.tasa_porcentaje == "" || row.tasa_porcentaje == undefined
+                    ? "0"
+                    : (row.tasa_porcentaje | number: "1.2-4")
+                }}%
+              </td>
+              <td mat-footer-cell *matFooterCellDef></td>
+            </ng-container>
+
+            <ng-container matColumnDef="saldo_inicial">
+              <th mat-header-cell *matHeaderCellDef>Saldo inicial</th>
+              <td mat-cell *matCellDef="let row">
+                ${{
+                  row.saldo_inicial == "" || row.saldo_inicial == undefined
+                    ? "0"
+                    : (row.saldo_inicial | number: "1.2-4")
+                }}
+              </td>
+              <td mat-footer-cell *matFooterCellDef>
+                ${{
+                  consolidado_proyeccion.total_saldo_inicial | number: "1.2-4"
+                }}
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="pago_cuota">
+              <th mat-header-cell *matHeaderCellDef>Pago cuota ($)</th>
+              <td mat-cell *matCellDef="let row">
+                ${{
+                  row.pago_cuota == "" || row.pago_cuota == undefined
+                    ? "0"
+                    : (row.pago_cuota | number: "1.2-4")
+                }}
+              </td>
+              <td mat-footer-cell *matFooterCellDef>
+                ${{ consolidado_proyeccion.total_pago_cuota | number: "1.2-4" }}
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="iva_interes"
+              >`
+              <th mat-header-cell *matHeaderCellDef>IVA ($)</th>
+              <td mat-cell *matCellDef="let row">
+                ${{
+                  row.iva_interes == "" || row.iva_interes == undefined
+                    ? "0"
+                    : (row.iva_interes | number: "1.2-4")
+                }}
+              </td>
+              <td mat-footer-cell *matFooterCellDef>
+                ${{
+                  consolidado_proyeccion.total_iva_interes | number: "1.2-4"
+                }}
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="abono_capital">
+              <th mat-header-cell *matHeaderCellDef>Abono capital</th>
+              <td mat-cell *matCellDef="let row">
+                ${{
+                  row.abono_capital == "" || row.abono_capital == undefined
+                    ? "0"
+                    : (row.abono_capital | number: "1.2-4")
+                }}
+              </td>
+              <td mat-footer-cell *matFooterCellDef>
+                ${{
+                  consolidado_proyeccion.total_abono_capital | number: "1.2-4"
+                }}
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="capital_restante">
+              <th mat-header-cell *matHeaderCellDef>Capital restante</th>
+              <td mat-cell *matCellDef="let row">
+                ${{
+                  row.capital_restante == "" ||
+                  row.capital_restante == undefined
+                    ? "0"
+                    : (row.capital_restante | number: "1.2-4")
+                }}
+              </td>
+              <td mat-footer-cell *matFooterCellDef>
+                ${{
+                  consolidado_proyeccion.total_capital_restante
+                    | number: "1.2-4"
+                }}
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="pago_seguro_dano">
+              <th mat-header-cell *matHeaderCellDef>Pago seguro daño</th>
+              <td mat-cell *matCellDef="let row">
+                ${{
+                  row.pago_seguro_dano == "" ||
+                  row.pago_seguro_dano == undefined
+                    ? "0"
+                    : (row.pago_seguro_dano | number: "1.2-4")
+                }}
+              </td>
+              <td mat-footer-cell *matFooterCellDef>
+                ${{
+                  consolidado_proyeccion.total_pago_seguro_dano
+                    | number: "1.2-4"
+                }}
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="pago_seguro_vivienda">
+              <th mat-header-cell *matHeaderCellDef>Pago seguro vivienda</th>
+              <td mat-cell *matCellDef="let row">
+                ${{
+                  row.pago_seguro_vivienda == "" ||
+                  row.pago_seguro_vivienda == undefined
+                    ? "0"
+                    : (row.pago_seguro_vivienda | number: "1.2-4")
+                }}
+              </td>
+              <td mat-footer-cell *matFooterCellDef>
+                ${{
+                  consolidado_proyeccion.total_pago_seguro_vivienda
+                    | number: "1.2-4"
+                }}
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="total_cuota">
+              <th mat-header-cell *matHeaderCellDef>Pago seguro vivienda</th>
+              <td mat-cell *matCellDef="let row">
+                ${{
+                  row.total_cuota == "" || row.total_cuota == undefined
+                    ? "0"
+                    : (row.total_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_capital">
+              <th mat-header-cell *matHeaderCellDef>Amortización capital</th>
+              <td mat-cell *matCellDef="let row">
+                ${{
+                  row.amortizacion_capital == "" ||
+                  row.amortizacion_capital == undefined
+                    ? "0"
+                    : (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="total_recibir">
+              <th mat-header-cell *matHeaderCellDef>Total a recibir</th>
+              <td mat-cell *matCellDef="let row">
+                ${{
+                  row.total_recibir == "" || row.total_recibir == undefined
+                    ? "0"
+                    : (row.total_recibir | number: "1.2-4")
+                }}
+              </td>
+              <td mat-footer-cell *matFooterCellDef>
+                ${{ consolidado_proyeccion.total_recibir | 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/pper/pper.component.ts

@@ -0,0 +1,353 @@
+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-pper",
+  templateUrl: "./pper.component.html"
+})
+export class PPER implements InstrumentComponent {
+  title: string = "Préstamo personal";
+  @Input() data: any;
+  @Input() summary: boolean;
+  @Input() investmentID: string;
+
+  displayedColumns: string[] = [
+    "posicion",
+    "plazo",
+    "fecha_pago",
+    "tasa_porcentaje",
+    "saldo_inicial",
+    "pago_cuota",
+    "ingreso_bruto",
+    "iva_interes",
+    "ingreso_neto",
+    "abono_capital",
+    "capital_restante",
+    "pago_seguro_dano",
+    "pago_seguro_vivienda",
+    "total_cuota",
+    "amortizacion_capital",
+    "total_recibir"
+  ];
+
+  @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_otorgamiento: IMyDateModel;
+  m_fecha_liquidacion: IMyDateModel;
+  m_fecha_rendencion: IMyDateModel;
+
+  submitted: boolean = false;
+  instrument_exists: boolean;
+  instrument_work: any = [];
+  financials: any;
+  base_types: any;
+
+  ingreso_bruto: number = 0.0;
+  ingreso_neto: number = 0.0;
+  monto_prestamo: number = 0.0;
+  tasa_porcentaje: number = 0.0;
+  plazo: number = 0.0;
+  iva_porcentaje: number = 0.0;
+  plazo_gracia: number = 0.0;
+  iva: number = 0.0;
+  proyecciones: any;
+
+  pperObject: {};
+  dataSource = new MatTableDataSource(this.proyecciones);
+  dataSource2 = new MatTableDataSource(this.proyecciones);
+  hasProjections: boolean;
+  fecha_vencimiento: any;
+  consolidado_proyeccion: any;
+  fecha_otorgamiento: any;
+  comision_desembolso: any;
+  fecha_gracia: any;
+  fecha_fin_otorgamiento: any;
+  pago_seguro_dano: any;
+  pago_seguro_vivienda: any;
+  total_cuotas_mensuales: any;
+  cuota_sin_seguros: 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.consolidado_proyeccion = this.instrument_work.proyecciones[
+        this.instrument_work.proyecciones.length - 1
+      ];
+      this.hasProjections = true;
+      this.dataSource2.data = this.instrument_work.proyecciones.slice(0, -1);
+      this.dataSource2.paginator = this.paginator;
+      this.dataSource2.sort = this.sort;
+    } else {
+      this.hasProjections = false;
+    }
+
+    this.investmentProposalForm = this.formBuilder.group({
+      monto_prestamo: [
+        this.instrument_exists ? "" : this.instrument_work.monto_prestamo,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+      tasa_porcentaje: [
+        this.instrument_exists ? "" : this.instrument_work.tasa_porcentaje,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+      iva_porcentaje: [
+        this.instrument_exists ? "" : this.instrument_work.iva_porcentaje,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+      plazo_gracia: [
+        this.instrument_exists ? "" : this.instrument_work.plazo_gracia,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+      pago_seguro_dano: [
+        this.instrument_exists ? 0 : this.instrument_work.pago_seguro_dano,
+        [Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)]
+      ],
+      pago_seguro_vivienda: [
+        this.instrument_exists ? 0 : this.instrument_work.pago_seguro_vivienda,
+        [Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)]
+      ],
+      total_cuotas_mensuales: [
+        this.instrument_exists
+          ? ""
+          : this.instrument_work.total_cuotas_mensuales,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
+      nombre_deudor: [
+        this.instrument_exists ? "" : this.instrument_work.nombre_deudor
+      ],
+      numero_deudor: [
+        this.instrument_exists ? "" : this.instrument_work.numero_deudor
+      ],
+      fecha_otorgamiento: [
+        this.instrument_exists
+          ? ""
+          : {
+              isRange: false,
+              singleDate: {
+                jsDate: parse(
+                  this.instrument_work.fecha_otorgamiento,
+                  "dd/MM/yyyy",
+                  new Date()
+                ),
+                formatted: this.instrument_work.fecha_otorgamiento
+              }
+            },
+        Validators.required
+      ]
+    });
+  }
+
+  get f() {
+    return this.investmentProposalForm.controls;
+  }
+
+  save(form: any): boolean {
+    if (!form.valid) {
+      return false;
+    }
+
+    this.formDataService.setWork(this.pperObject);
+    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
+      .pperCalc(
+        "PPER", // Codigo del instrumento
+        {
+          id_tipo_base: +this.general.base_anual,
+          id_formato_ingreso: +this.general.formato_ingreso,
+          id_periodicidad: +this.general.periodicidad
+        },
+        {
+          monto_prestamo: this.f.monto_prestamo.value,
+          fecha_otorgamiento: this.f.fecha_otorgamiento.value.singleDate
+            .formatted,
+          plazo_gracia: this.f.plazo_gracia.value,
+          tasa_porcentaje: this.f.tasa_porcentaje.value,
+          iva_porcentaje: this.f.iva_porcentaje.value,
+          pago_seguro_dano: this.f.pago_seguro_dano.value,
+          pago_seguro_vivienda: this.f.pago_seguro_vivienda.value,
+          total_cuotas_mensuales: this.f.total_cuotas_mensuales.value
+        }
+      )
+      .subscribe(
+        ans => {
+          this.monto_prestamo = ans["result"]["instrumento"]["monto_prestamo"];
+          this.fecha_otorgamiento =
+            ans["result"]["instrumento"]["fecha_otorgamiento"];
+          this.fecha_gracia = ans["result"]["instrumento"]["fecha_gracia"];
+          this.fecha_fin_otorgamiento =
+            ans["result"]["instrumento"]["fecha_fin_otorgamiento"];
+          this.plazo_gracia = ans["result"]["instrumento"]["plazo_gracia"];
+          this.tasa_porcentaje =
+            ans["result"]["instrumento"]["tasa_porcentaje"];
+          this.iva_porcentaje = ans["result"]["instrumento"]["iva_porcentaje"];
+          this.pago_seguro_dano =
+            ans["result"]["instrumento"]["pago_seguro_dano"];
+          this.pago_seguro_vivienda =
+            ans["result"]["instrumento"]["pago_seguro_vivienda"];
+          this.total_cuotas_mensuales =
+            ans["result"]["instrumento"]["total_cuotas_mensuales"];
+          this.cuota_sin_seguros =
+            ans["result"]["instrumento"]["cuota_sin_seguros"];
+          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.dataSource.data = this.proyecciones.slice(0, -1);
+          this.dataSource.paginator = this.paginator;
+          this.dataSource.sort = this.sort;
+
+          this.pperObject = {
+            monto_prestamo: this.investmentProposalForm.value.monto_prestamo,
+            plazo_gracia: this.investmentProposalForm.value.plazo_gracia,
+            tasa_porcentaje: this.investmentProposalForm.value.tasa_porcentaje,
+            iva_porcentaje: this.investmentProposalForm.value.iva_porcentaje,
+            pago_seguro_dano: this.investmentProposalForm.value
+              .pago_seguro_dano,
+            pago_seguro_vivienda: this.investmentProposalForm.value
+              .pago_seguro_vivienda,
+            total_cuotas_mensuales: this.investmentProposalForm.value
+              .total_cuotas_mensuales,
+            numero_deudor: this.investmentProposalForm.value.numero_deudor,
+            nombre_deudor: this.investmentProposalForm.value.nombre_deudor,
+            fecha_otorgamiento: this.f.fecha_otorgamiento.value.singleDate
+              .formatted,
+            fecha_fin_otorgamiento: this.fecha_fin_otorgamiento,
+            fecha_gracia: this.fecha_gracia,
+            cuota_sin_seguros: this.cuota_sin_seguros,
+            proyecciones: this.proyecciones
+          };
+
+          this.formDataService.setWork(this.pperObject);
+          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/titulos/titulos.component.html

@@ -8,12 +8,64 @@
     [formGroup]="investmentProposalForm"
   >
     <div class="row">
-      <div class=" col-md-6 col-sm-12 border border-light">
+      <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]="item.codigo == tipoEjecucion"
+          >
+            {{ item.nombre }}</option
+          >
+        </select>
+      </div>
+      <br />
+    </div>
+    <br />
+    <div class="row">
+      <div class=" col-md-12 col-sm-12 border border-light">
         <div class="row no-gutters">
           <div class="col-12">
             <h5>Compra</h5>
           </div>
 
+          <div class="col-lg-6 col-sm-12 pr-xl-3">
+            <div class="form-group">
+              <label for="renta_porcentaje">Renta: </label>
+              <div class="input-box-container">
+                <p>
+                  <i class="fas fa-percent" aria-hidden="true"></i>
+                </p>
+                <input
+                  type="text"
+                  formControlName="renta_porcentaje"
+                  class="form-control"
+                  [ngClass]="{
+                    'is-invalid': submitted && f.renta_porcentaje.errors
+                  }"
+                />
+                <div
+                  *ngIf="submitted && f.renta_porcentaje.errors"
+                  class="invalid-feedback"
+                >
+                  <div *ngIf="f.renta_porcentaje.errors.required">
+                    Campo requerido
+                  </div>
+                  <div *ngIf="f.renta_porcentaje.errors.pattern">
+                    Debe ingresar una cifra válida
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
           <div class="col-lg-6 col-sm-12 pr-xl-3">
             <div class="form-group">
               <label for="costo_cedeval">Costo CEDEVAL: </label>
@@ -430,7 +482,13 @@
           </div>
         </div>
       </div>
-      <div class=" col-md-6 col-sm-12 border border-light">
+    </div>
+    <br />
+    <div class="row">
+      <div
+        class=" col-md-12 col-sm-12 border border-light"
+        *ngIf="tipoEjecucion == 1"
+      >
         <div class="row no-gutters">
           <div class="col-12">
             <h5>Venta</h5>
@@ -877,7 +935,9 @@
             {{ fecha_inicio_vigencia }}
           </div>
         </div>
+      </div>
 
+      <div class="row" *ngIf="tipoEjecucion == 1">
         <div class="col-12">
           <h3>
             Instrumento de venta
@@ -899,7 +959,7 @@
           <h4>Comision bolsa venta:</h4>
           <div class="field">
             $USD
-            {{ instrument_work_summary.comision_bolsa_venta | number: "1.2-4" }}
+            {{ comision_bolsa_venta | number: "1.2-4" }}
           </div>
         </div>
         <div class="col-sm-4">
@@ -954,71 +1014,115 @@
             $USD {{ valor_transado_venta | number: "1.2-4" }}
           </div>
         </div>
-
+        <div class="col-sm-4">
+          <h4>Monto a recibir:</h4>
+          <div class="field">$USD {{ monto_recibir | number: "1.2-4" }}</div>
+        </div>
+      </div>
+      <div class="row">
         <div class="row align-container" *ngIf="operation_result">
           <div class="col-12">
             <h3>
               Resultado de la operación
             </h3>
           </div>
+
           <div class="col-sm-4">
-            <h4>Monto a recibir:</h4>
-            <div class="field">$USD {{ monto_recibir | number: "1.2-4" }}</div>
+            <h4>Valor transado compra:</h4>
+            <div class="field">
+              $USD
+              {{
+                operation_results_work.valor_transado_compra | number: "1.2-4"
+              }}
+            </div>
+          </div>
+          <div class="col-sm-4">
+            <h4>Precio compra:</h4>
+            <div class="field">
+              {{ operation_results_work.precio_compra }}
+            </div>
+          </div>
+          <div class="col-sm-4">
+            <h4>Precio venta:</h4>
+            <div class="field">
+              {{ operation_results_work.precio_venta }}
+            </div>
           </div>
           <div class="col-sm-4">
             <h4>Días tenencia total:</h4>
             <div class="field">
-              {{ dias_tenencia_total }}
+              {{ operation_results_work.dias_tenencia_total }}
             </div>
           </div>
           <div class="col-sm-4">
             <h4>Ingresos intereses:</h4>
             <div class="field">
-              $USD {{ ingresos_intereses | number: "1.2-4" }}
+              $USD
+              {{ operation_results_work.ingresos_intereses | number: "1.2-4" }}
             </div>
           </div>
           <div class="col-sm-4">
             <h4>Costos totales:</h4>
-            <div class="field">$USD {{ costos_totales | number: "1.2-4" }}</div>
+            <div class="field">
+              $USD {{ operation_results_work.costos_totales | number: "1.2-4" }}
+            </div>
           </div>
           <div class="col-sm-4">
             <h4>Ganancia o pérdida total:</h4>
             <div class="field">
-              $USD {{ ganancia_perdida_total | number: "1.2-4" }}
+              $USD
+              {{
+                operation_results_work.ganancia_perdida_total_neto
+                  | number: "1.2-4"
+              }}
             </div>
           </div>
           <div class="col-sm-4">
             <h4>Ganancia o pérdida de capital:</h4>
             <div class="field">
-              {{ ganancia_perdida_capital_porcentaje | number: "1.2-4" }}%
+              {{
+                operation_results_work.ganancia_perdida_capital_porcentaje
+                  | number: "1.2-4"
+              }}%
             </div>
           </div>
 
           <div class="col-sm-4">
             <h4>Interés (%):</h4>
             <div class="field">
-              {{ intereses_porcentaje | number: "1.2-4" }} %
+              {{
+                operation_results_work.intereses_porcentaje | number: "1.2-4"
+              }}
+              %
             </div>
           </div>
           <div class="col-sm-4">
-            <h4>Interés neto antes de impuesto (%):</h4>
+            <h4>Interés neto antes de renta (%):</h4>
             <div class="field">
-              {{ neto_antes_impuesto_porcentaje | number: "1.2-4" }}
+              {{
+                operation_results_work.neto_antes_renta_porcentaje
+                  | number: "1.2-4"
+              }}
               %
             </div>
           </div>
           <div class="col-sm-4">
-            <h4>Interés neto después de impuesto (%):</h4>
+            <h4>Interés neto después de renta (%):</h4>
             <div class="field">
-              {{ neto_despues_impuesto_porcentaje | number: "1.2-4" }}
+              {{
+                operation_results_work.neto_despues_renta_porcentaje
+                  | number: "1.2-4"
+              }}
               %
             </div>
           </div>
           <div class="col-sm-4">
-            <h4>Total de ingresos recibidos:</h4>
+            <h4>Total de intereses recibidos:</h4>
             <div class="field">
               $USD
-              {{ total_ingresos_recibidos | number: "1.2-4" }}
+              {{
+                operation_results_work.total_interes_recibidos | number: "1.2-4"
+              }}
             </div>
           </div>
         </div>
@@ -1068,14 +1172,14 @@
             <ng-container matColumnDef="cuota">
               <th mat-header-cell *matHeaderCellDef>Cuota</th>
               <td mat-cell *matCellDef="let row">
-                {{
+                ${{
                   row.cuota == "" || row.cuota == undefined
                     ? "-"
                     : (row.cuota | number: "1.2-4")
                 }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD {{ consolidado_proyeccion.total_cuota | number: "1.2-4" }}
+                ${{ consolidado_proyeccion.total_cuota | number: "1.2-4" }}
               </td>
             </ng-container>
             <ng-container matColumnDef="amortizacion_porcentaje">
@@ -1086,7 +1190,7 @@
                   row.amortizacion_porcentaje == undefined
                     ? "-"
                     : (row.amortizacion_porcentaje | number: "1.2-4")
-                }}
+                }}%
               </td>
               <td mat-footer-cell *matFooterCellDef>
                 {{
@@ -1098,7 +1202,7 @@
             <ng-container matColumnDef="amortizacion_capital">
               <th mat-header-cell *matHeaderCellDef>Amortización capital</th>
               <td mat-cell *matCellDef="let row">
-                {{
+                ${{
                   row.amortizacion_capital == "" ||
                   row.amortizacion_capital == undefined
                     ? "-"
@@ -1106,8 +1210,7 @@
                 }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD
-                {{
+                ${{
                   consolidado_proyeccion.total_amortizacion_capital
                     | number: "1.2-4"
                 }}
@@ -1116,45 +1219,42 @@
             <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 | number: "1.2-4")
                 }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD
-                {{
+                ${{
                   consolidado_proyeccion.total_ingreso_bruto | number: "1.2-4"
                 }}
               </td>
             </ng-container>
-            <ng-container matColumnDef="impuesto">
-              <th mat-header-cell *matHeaderCellDef>Impuesto</th>
+            <ng-container matColumnDef="renta">
+              <th mat-header-cell *matHeaderCellDef>Renta</th>
               <td mat-cell *matCellDef="let row">
-                {{
-                  row.impuesto == "" || row.impuesto == undefined
+                ${{
+                  row.renta == "" || row.renta == undefined
                     ? "-"
-                    : (row.impuesto | number: "1.2-4")
+                    : (row.renta | number: "1.2-4")
                 }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD
-                {{ consolidado_proyeccion.total_impuesto | number: "1.2-4" }}
+                ${{ consolidado_proyeccion.total_renta | 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 | number: "1.2-4")
                 }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD
-                {{
+                ${{
                   consolidado_proyeccion.total_ingreso_neto | number: "1.2-4"
                 }}
               </td>
@@ -1163,14 +1263,14 @@
             <ng-container matColumnDef="saldo">
               <th mat-header-cell *matHeaderCellDef>Saldo</th>
               <td mat-cell *matCellDef="let row">
-                {{
+                ${{
                   row.saldo == "" || row.saldo == undefined
                     ? "-"
                     : (row.saldo | number: "1.2-4")
                 }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD {{ consolidado_proyeccion.total_saldo | number: "1.2-4" }}
+                ${{ consolidado_proyeccion.total_saldo | number: "1.2-4" }}
               </td>
             </ng-container>
 
@@ -1216,6 +1316,12 @@
           Instrumento de compra
         </h3>
       </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Renta (%):</h4>
+        <div class="field">
+          {{ instrument_work_summary.renta_porcentaje | number: "1.2-4" }}%
+        </div>
+      </div>
       <div class="col-lg-3 col-md-4 col-sm-6">
         <h4>Costo CEDEVAL:</h4>
         <div class="field">
@@ -1403,8 +1509,7 @@
       </div>
     </div>
 
-    <!--
-    <div class="row">
+    <div class="row" *ngIf="tipoEjecucion == 1">
       <div class="col-12">
         <h3>
           Instrumento de venta
@@ -1555,6 +1660,14 @@
           {{ instrument_work_summary.valor_transado_venta | number: "1.2-4" }}
         </div>
       </div>
+
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Monto Recibir:</h4>
+        <div class="field">
+          $USD
+          {{ instrument_work_summary.monto_recibir | number: "1.2-4" }}
+        </div>
+      </div>
       <div class="col-lg-3 col-md-4 col-sm-6">
         <h4>Ultima fecha de cupón venta:</h4>
         <div class="field">
@@ -1580,10 +1693,24 @@
           Resultado de la operación
         </h3>
       </div>
+
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Valor transado compra:</h4>
+        <div class="field">
+          $USD
+          {{ operation_results_work.valor_transado_compra | number: "1.2-4" }}
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Precio compra:</h4>
+        <div class="field">
+          {{ operation_results_work.precio_compra }}
+        </div>
+      </div>
       <div class="col-lg-3 col-md-4 col-sm-6">
-        <h4>Valor nominal compra:</h4>
+        <h4>Precio venta:</h4>
         <div class="field">
-          $USD{{ operation_results_work.valor_nominal_compra }}
+          {{ operation_results_work.precio_venta }}
         </div>
       </div>
       <div class="col-lg-3 col-md-4 col-sm-6">
@@ -1605,14 +1732,16 @@
         </div>
       </div>
       <div class="col-lg-3 col-md-4 col-sm-6">
-        <h4>Ganancia / Pérdida total:</h4>
+        <h4>Ganancia o pérdida total:</h4>
         <div class="field">
           $USD
-          {{ operation_results_work.ganancia_perdida_total | number: "1.2-4" }}
+          {{
+            operation_results_work.ganancia_perdida_total_neto | number: "1.2-4"
+          }}
         </div>
       </div>
       <div class="col-lg-3 col-md-4 col-sm-6">
-        <h4>Ganancia / Pérdida de capital:</h4>
+        <h4>Ganancia o pérdida de capital:</h4>
         <div class="field">
           {{
             operation_results_work.ganancia_perdida_capital_porcentaje
@@ -1628,27 +1757,32 @@
         </div>
       </div>
       <div class="col-lg-3 col-md-4 col-sm-6">
-        <h4>Interés neto antes de impuesto (%):</h4>
+        <h4>Interés neto antes de renta (%):</h4>
         <div class="field">
           {{
-            operation_results_work.neto_antes_impuesto_porcentaje
-              | number: "1.2-4"
+            operation_results_work.neto_antes_renta_porcentaje | number: "1.2-4"
           }}
           %
         </div>
       </div>
       <div class="col-lg-3 col-md-4 col-sm-6">
-        <h4>Interés neto después de impuesto (%):</h4>
+        <h4>Interés neto después de renta (%):</h4>
         <div class="field">
           {{
-            operation_results_work.neto_despues_impuesto_porcentaje
+            operation_results_work.neto_despues_renta_porcentaje
               | number: "1.2-4"
           }}
           %
         </div>
       </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Total de intereses recibidos:</h4>
+        <div class="field">
+          $USD
+          {{ operation_results_work.total_interes_recibidos | number: "1.2-4" }}
+        </div>
+      </div>
     </div>
--->
     <br />
     <div *ngIf="hasProjections" class="instrument-calcs-summary">
       <div class="row">
@@ -1692,14 +1826,14 @@
             <ng-container matColumnDef="cuota">
               <th mat-header-cell *matHeaderCellDef>Cuota</th>
               <td mat-cell *matCellDef="let row">
-                {{
+                ${{
                   row.cuota == "" || row.cuota == undefined
                     ? "-"
                     : (row.cuota | number: "1.2-4")
                 }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD {{ consolidado_proyeccion.total_cuota | number: "1.2-4" }}
+                ${{ consolidado_proyeccion.total_cuota | number: "1.2-4" }}
               </td>
             </ng-container>
             <ng-container matColumnDef="amortizacion_porcentaje">
@@ -1710,7 +1844,7 @@
                   row.amortizacion_porcentaje == undefined
                     ? "-"
                     : (row.amortizacion_porcentaje | number: "1.2-4")
-                }}
+                }}%
               </td>
               <td mat-footer-cell *matFooterCellDef>
                 {{
@@ -1722,7 +1856,7 @@
             <ng-container matColumnDef="amortizacion_capital">
               <th mat-header-cell *matHeaderCellDef>Amortización capital</th>
               <td mat-cell *matCellDef="let row">
-                {{
+                ${{
                   row.amortizacion_capital == "" ||
                   row.amortizacion_capital == undefined
                     ? "-"
@@ -1730,7 +1864,7 @@
                 }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD{{
+                ${{
                   consolidado_proyeccion.total_amortizacion_capital
                     | number: "1.2-4"
                 }}
@@ -1739,44 +1873,42 @@
             <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 | number: "1.2-4")
                 }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD{{
+                ${{
                   consolidado_proyeccion.total_ingreso_bruto | number: "1.2-4"
                 }}
               </td>
             </ng-container>
-            <ng-container matColumnDef="impuesto">
-              <th mat-header-cell *matHeaderCellDef>Impuesto</th>
+            <ng-container matColumnDef="renta">
+              <th mat-header-cell *matHeaderCellDef>Renta</th>
               <td mat-cell *matCellDef="let row">
-                {{
-                  row.impuesto == "" || row.impuesto == undefined
+                ${{
+                  row.renta == "" || row.renta == undefined
                     ? "-"
-                    : (row.impuesto | number: "1.2-4")
+                    : (row.renta | number: "1.2-4")
                 }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD{{
-                  consolidado_proyeccion.total_impuesto | number: "1.2-4"
-                }}
+                ${{ consolidado_proyeccion.total_renta | 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 | number: "1.2-4")
                 }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD{{
+                ${{
                   consolidado_proyeccion.total_ingreso_neto | number: "1.2-4"
                 }}
               </td>
@@ -1785,14 +1917,14 @@
             <ng-container matColumnDef="saldo">
               <th mat-header-cell *matHeaderCellDef>Saldo</th>
               <td mat-cell *matCellDef="let row">
-                {{
+                ${{
                   row.saldo == "" || row.saldo == undefined
                     ? "-"
                     : (row.saldo | number: "1.2-4")
                 }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD{{ consolidado_proyeccion.total_saldo | number: "1.2-4" }}
+                ${{ consolidado_proyeccion.total_saldo | number: "1.2-4" }}
               </td>
             </ng-container>
 

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

@@ -34,9 +34,8 @@ export class TIT implements InstrumentComponent {
     "amortizacion_porcentaje",
     "amortizacion_capital",
     "ingreso_bruto",
-    "impuesto",
     "ingreso_neto",
-    "impuesto",
+    "renta",
     "saldo"
   ];
 
@@ -82,6 +81,7 @@ export class TIT implements InstrumentComponent {
   m_fecha_ultima_cupon_compra: IMyDateModel;
   m_fecha_rendencion: IMyDateModel;
   m_fecha_liquidacion_compra: IMyDateModel;
+  m_fecha_emision: IMyDateModel;
 
   submitted: boolean = false;
   instrument_exists: boolean;
@@ -137,6 +137,13 @@ export class TIT implements InstrumentComponent {
   ytm_vencimiento_porcentaje_venta: any;
   comision_bolsa_venta: any;
   consolidado_proyeccion: any;
+  ejecuciones = [
+    { codigo: 1, nombre: "Completa" },
+    { codigo: 0, nombre: "Parcial" }
+  ];
+  tipoEjecucion: number = 0;
+  precio_compra: any;
+  precio_venta: any;
 
   constructor(
     private formBuilder: FormBuilder,
@@ -155,6 +162,12 @@ export class TIT implements InstrumentComponent {
       this.instrument_work != undefined &&
       this.instrument_work.proyecciones != ""
     ) {
+      if (
+        this.instrument_work["valor_nominal_venta"] != undefined &&
+        +this.instrument_work["valor_nominal_venta"] > 0
+      ) {
+        this.tipoEjecucion = 1;
+      }
       this.hasProjections = true;
       this.consolidado_proyeccion = this.instrument_work.proyecciones[
         this.instrument_work.proyecciones.length - 1
@@ -184,6 +197,15 @@ export class TIT implements InstrumentComponent {
     }
 
     this.investmentProposalForm = this.formBuilder.group({
+      ejecucion: [this.instrument_exists ? "" : this.tipoEjecucion],
+
+      renta_porcentaje: [
+        this.instrument_exists ? "" : this.instrument_work.renta_porcentaje,
+        [
+          Validators.required,
+          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+        ]
+      ],
       costo_cedeval: [
         this.instrument_exists ? "" : this.instrument_work.costo_cedeval,
         [
@@ -469,6 +491,9 @@ export class TIT implements InstrumentComponent {
           id_periodicidad: +this.general.periodicidad
         },
         {
+          completo: this.tipoEjecucion,
+          renta_porcentaje: +this.f.renta_porcentaje.value,
+          costo_cedeval: +this.f.costo_cedeval.value,
           costo_transferencia: +this.f.costo_transferencia.value,
           valor_nominal_compra: +this.f.valor_nominal_compra.value,
           precio_compra: +this.f.precio_compra.value,
@@ -479,6 +504,19 @@ export class TIT implements InstrumentComponent {
           comision_bolsa_porcentaje_compra: this.f
             .comision_bolsa_porcentaje_compra.value,
 
+          fecha_vencimiento_compra:
+            this.f.fecha_vencimiento_compra.value == ""
+              ? ""
+              : this.f.fecha_vencimiento_compra.value.singleDate.formatted,
+          fecha_ultima_cupon_compra:
+            this.f.fecha_ultima_cupon_compra.value == ""
+              ? ""
+              : this.f.fecha_ultima_cupon_compra.value.singleDate.formatted,
+          fecha_liquidacion_compra:
+            this.f.fecha_liquidacion_compra.value == ""
+              ? ""
+              : this.f.fecha_liquidacion_compra.value.singleDate.formatted,
+
           valor_nominal_venta: +this.f.valor_nominal_venta.value,
           precio_venta: +this.f.precio_venta.value,
           precio_vencimiento_venta: +this.f.precio_vencimiento_venta.value,
@@ -487,22 +525,19 @@ export class TIT implements InstrumentComponent {
             .value,
           comision_bolsa_porcentaje_venta: this.f
             .comision_bolsa_porcentaje_venta.value,
-
-          fecha_vencimiento_compra: this.f.fecha_vencimiento_compra.value
-            .singleDate.formatted,
-          fecha_ultima_cupon_compra: this.f.fecha_ultima_cupon_compra.value
-            .singleDate.formatted,
-          fecha_liquidacion_compra: this.f.fecha_liquidacion_compra.value
-            .singleDate.formatted,
-
-          fecha_vencimiento_venta: this.f.fecha_vencimiento_venta.value
-            .singleDate.formatted,
-          fecha_ultima_cupon_venta: this.f.fecha_ultima_cupon_venta.value
-            .singleDate.formatted,
-          fecha_liquidacion_venta: 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,
+          fecha_ultima_cupon_venta:
+            this.f.fecha_ultima_cupon_venta.value == ""
+              ? ""
+              : this.f.fecha_ultima_cupon_venta.value.singleDate.formatted,
+          fecha_liquidacion_venta:
+            this.f.fecha_liquidacion_venta.value == ""
+              ? ""
+              : this.f.fecha_liquidacion_venta.value.singleDate.formatted,
           fecha_emision: this.f.fecha_emision.value.singleDate.formatted,
-          costo_cedeval: this.f.costo_cedeval.value,
           amortizacion_porcentajes: this.amortizaciones
         }
       )
@@ -543,71 +578,51 @@ export class TIT implements InstrumentComponent {
           this.fecha_inicio_vigencia =
             ans["result"]["instrumento_compra"]["fecha_inicio_vigencia"];
 
-          // Instrumento de venta
-          this.comision_casa_venta =
-            ans["result"]["instrumento_venta"]["comision_casa_venta"];
-          this.comision_bolsa_venta =
-            ans["result"]["instrumento_venta"]["comision_bolsa_venta"];
-
-          this.fecha_siguiente_cupon_venta =
-            ans["result"]["instrumento_venta"]["fecha_siguiente_cupon_venta"];
-          this.dias_vencimiento_venta =
-            ans["result"]["instrumento_venta"]["dias_vencimiento_venta"];
-          this.dias_acumulados_venta =
-            ans["result"]["instrumento_venta"]["dias_acumulados_venta"];
-          this.ytm_vencimiento_comision_porcentaje_venta =
-            ans["result"]["instrumento_venta"][
-              "ytm_vencimiento_comision_porcentaje_venta"
-            ];
-          this.ytm_vencimiento_porcentaje_venta =
-            ans["result"]["instrumento_venta"][
-              "ytm_vencimiento_porcentaje_venta"
-            ];
-          this.interes_acumulado_venta =
-            ans["result"]["instrumento_venta"]["interes_acumulado_venta"];
-          this.interes_acumulado_porcentaje_venta =
-            ans["result"]["instrumento_venta"][
-              "interes_acumulado_porcentaje_venta"
-            ];
-          this.precio_sucio_porcentaje_venta =
-            ans["result"]["instrumento_venta"]["precio_sucio_porcentaje_venta"];
-          this.valor_transado_venta =
-            ans["result"]["instrumento_venta"]["valor_transado_venta"];
-          this.monto_recibir =
-            ans["result"]["instrumento_venta"]["monto_recibir"];
-
-          // Resultado de la operacion
-          this.operation_result = true;
-          this.dias_tenencia_total =
-            ans["result"]["resultado_operacion"]["dias_tenencia_total"];
-          this.ganancia_perdida_capital =
-            ans["result"]["resultado_operacion"]["ganancia_perdida_capital"];
-          this.ingresos_intereses =
-            ans["result"]["resultado_operacion"]["ingresos_intereses"];
-          this.costos_totales =
-            ans["result"]["resultado_operacion"]["costos_totales"];
-          this.ganancia_perdida_total =
-            ans["result"]["resultado_operacion"]["ganancia_perdida_total"];
-          this.ganancia_perdida_capital_porcentaje =
-            ans["result"]["resultado_operacion"][
-              "ganancia_perdida_capital_porcentaje"
-            ];
-          this.intereses_porcentaje =
-            ans["result"]["resultado_operacion"]["intereses_porcentaje"];
-          this.neto_antes_impuesto_porcentaje =
-            ans["result"]["resultado_operacion"][
-              "neto_antes_impuesto_porcentaje"
-            ];
-          this.neto_despues_impuesto_porcentaje =
-            ans["result"]["resultado_operacion"][
-              "neto_despues_impuesto_porcentaje"
-            ];
-          this.total_ingresos_recibidos =
-            ans["result"]["resultado_operacion"]["total_ingresos_recibidos"];
+          if (this.tipoEjecucion == 1) {
+            // Instrumento de venta
+            this.comision_casa_venta =
+              ans["result"]["instrumento_venta"]["comision_casa_venta"];
+            this.comision_bolsa_venta =
+              ans["result"]["instrumento_venta"]["comision_bolsa_venta"];
+
+            this.fecha_siguiente_cupon_venta =
+              ans["result"]["instrumento_venta"]["fecha_siguiente_cupon_venta"];
+            this.dias_vencimiento_venta =
+              ans["result"]["instrumento_venta"]["dias_vencimiento_venta"];
+            this.dias_acumulados_venta =
+              ans["result"]["instrumento_venta"]["dias_acumulados_venta"];
+            this.ytm_vencimiento_comision_porcentaje_venta =
+              ans["result"]["instrumento_venta"][
+                "ytm_vencimiento_comision_porcentaje_venta"
+              ];
+            this.ytm_vencimiento_porcentaje_venta =
+              ans["result"]["instrumento_venta"][
+                "ytm_vencimiento_porcentaje_venta"
+              ];
+            this.interes_acumulado_venta =
+              ans["result"]["instrumento_venta"]["interes_acumulado_venta"];
+            this.interes_acumulado_porcentaje_venta =
+              ans["result"]["instrumento_venta"][
+                "interes_acumulado_porcentaje_venta"
+              ];
+            this.precio_sucio_porcentaje_venta =
+              ans["result"]["instrumento_venta"][
+                "precio_sucio_porcentaje_venta"
+              ];
+            this.valor_transado_venta =
+              ans["result"]["instrumento_venta"]["valor_transado_venta"];
+            this.monto_recibir =
+              ans["result"]["instrumento_venta"]["monto_recibir"];
+
+            // // Resultado de la operacion
+            this.operation_result = true;
+            this.operation_results_work = ans["result"]["resultado_operacion"];
+          }
 
           // 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];
@@ -620,7 +635,13 @@ export class TIT implements InstrumentComponent {
           this.dataSource.paginator = this.paginator;
           this.dataSource.sort = this.sort;
 
+          // Obj
           this.titulosObject = {
+            completo: this.tipoEjecucion,
+            cancelado: this.tipoEjecucion,
+            renta_porcentaje: this.investmentProposalForm.value
+              .renta_porcentaje,
+            costo_cedeval: this.investmentProposalForm.value.costo_cedeval,
             costo_transferencia: this.investmentProposalForm.value
               .costo_transferencia,
             valor_nominal_compra: this.investmentProposalForm.value
@@ -635,32 +656,14 @@ export class TIT implements InstrumentComponent {
             comision_bolsa_porcentaje_compra: this.investmentProposalForm.value
               .comision_bolsa_porcentaje_compra,
 
-            valor_nominal_venta: this.investmentProposalForm.value
-              .valor_nominal_venta,
-            precio_venta: this.investmentProposalForm.value.precio_venta,
-            precio_vencimiento_venta: this.investmentProposalForm.value
-              .precio_vencimiento_venta,
-            cupon_porcentaje_venta: this.investmentProposalForm.value
-              .cupon_porcentaje_venta,
-            comision_casa_porcentaje_venta: this.investmentProposalForm.value
-              .comision_casa_porcentaje_venta,
-            comision_bolsa_porcentaje_venta: this.investmentProposalForm.value
-              .comision_bolsa_porcentaje_venta,
-
             fecha_vencimiento_compra: this.f.fecha_vencimiento_compra.value
               .singleDate.formatted,
             fecha_ultima_cupon_compra: this.f.fecha_ultima_cupon_compra.value
               .singleDate.formatted,
             fecha_liquidacion_compra: this.f.fecha_liquidacion_compra.value
               .singleDate.formatted,
-
-            fecha_vencimiento_venta: this.f.fecha_vencimiento_venta.value
-              .singleDate.formatted,
-            fecha_ultima_cupon_venta: this.f.fecha_ultima_cupon_venta.value
-              .singleDate.formatted,
-            fecha_liquidacion_venta: this.f.fecha_liquidacion_venta.value
-              .singleDate.formatted,
             fecha_emision: this.f.fecha_emision.value.singleDate.formatted,
+
             // Instrumento de compra
 
             comision_casa_compra: this.comision_casa_compra,
@@ -679,24 +682,7 @@ export class TIT implements InstrumentComponent {
             valor_transado_compra: this.valor_transado_compra,
             monto_pagar: this.monto_pagar,
             fecha_inicio_vigencia: this.fecha_inicio_vigencia,
-            // Instrumento de venta
 
-            comision_casa_venta: this.comision_casa_venta,
-            comision_bolsa_venta: this.comision_bolsa_venta,
-
-            fecha_siguiente_cupon_venta: this.fecha_siguiente_cupon_venta,
-            dias_vencimiento_venta: this.dias_vencimiento_venta,
-            dias_acumulados_venta: this.dias_acumulados_venta,
-            ytm_vencimiento_porcentaje_venta: this
-              .ytm_vencimiento_porcentaje_venta,
-            ytm_vencimiento_comision_porcentaje_venta: this
-              .ytm_vencimiento_comision_porcentaje_venta,
-
-            interes_acumulado_venta: this.interes_acumulado_venta,
-            interes_acumulado_porcentaje_venta: this
-              .interes_acumulado_porcentaje_venta,
-            precio_sucio_porcentaje_venta: this.precio_sucio_porcentaje_venta,
-            valor_transado_venta: this.valor_transado_venta,
             // Resultado de la operacion
             /*
             monto_recibir: this.monto_recibir,
@@ -715,10 +701,79 @@ export class TIT implements InstrumentComponent {
 
             amortizacion_porcentajes: this.amortizaciones,-**/
             // Proyecciones
-            costo_cedeval: this.f.costo_cedeval.value,
             proyecciones: this.proyecciones
           };
 
+          if (this.tipoEjecucion == 1) {
+            this.titulosObject[
+              "valor_nominal_venta"
+            ] = this.investmentProposalForm.value.valor_nominal_venta;
+            this.titulosObject[
+              "precio_venta"
+            ] = this.investmentProposalForm.value.precio_venta;
+            this.titulosObject[
+              "precio_vencimiento_venta"
+            ] = this.investmentProposalForm.value.precio_vencimiento_venta;
+            this.titulosObject[
+              "cupon_porcentaje_venta"
+            ] = this.investmentProposalForm.value.cupon_porcentaje_venta;
+            this.titulosObject[
+              "comision_casa_porcentaje_venta"
+            ] = this.investmentProposalForm.value.comision_casa_porcentaje_venta;
+            this.titulosObject[
+              "comision_bolsa_porcentaje_venta"
+            ] = this.investmentProposalForm.value.comision_bolsa_porcentaje_venta;
+            this.titulosObject[
+              "fecha_vencimiento_venta"
+            ] = this.f.fecha_vencimiento_venta.value.singleDate.formatted;
+            this.titulosObject[
+              "fecha_ultima_cupon_venta"
+            ] = this.f.fecha_ultima_cupon_venta.value.singleDate.formatted;
+            this.titulosObject[
+              "fecha_liquidacion_venta"
+            ] = this.f.fecha_liquidacion_venta.value.singleDate.formatted;
+
+            // Instrumento de venta
+
+            this.titulosObject[
+              "comision_casa_venta"
+            ] = this.comision_casa_venta;
+            this.titulosObject[
+              "comision_bolsa_venta"
+            ] = this.comision_bolsa_venta;
+
+            this.titulosObject[
+              "fecha_siguiente_cupon_venta"
+            ] = this.fecha_siguiente_cupon_venta;
+            this.titulosObject[
+              "dias_vencimiento_venta"
+            ] = this.dias_vencimiento_venta;
+            this.titulosObject[
+              "dias_acumulados_venta"
+            ] = this.dias_acumulados_venta;
+            this.titulosObject[
+              "ytm_vencimiento_porcentaje_venta"
+            ] = this.ytm_vencimiento_porcentaje_venta;
+            this.titulosObject[
+              "ytm_vencimiento_comision_porcentaje_venta"
+            ] = this.ytm_vencimiento_comision_porcentaje_venta;
+
+            this.titulosObject[
+              "interes_acumulado_venta"
+            ] = this.interes_acumulado_venta;
+            this.titulosObject[
+              "interes_acumulado_porcentaje_venta"
+            ] = this.interes_acumulado_porcentaje_venta;
+            this.titulosObject[
+              "precio_sucio_porcentaje_venta"
+            ] = this.precio_sucio_porcentaje_venta;
+            this.titulosObject[
+              "valor_transado_venta"
+            ] = this.valor_transado_venta;
+
+            this.titulosObject["monto_recibir"] = this.monto_recibir;
+          }
+
           this.formDataService.setWork(this.titulosObject);
           Swal.close();
           if (saveForm == true) {
@@ -756,4 +811,90 @@ export class TIT implements InstrumentComponent {
   goToNext(form: any) {
     this.getCalculations(form, true);
   }
+
+  toggle_ejecucion(input: any) {
+    this.tipoEjecucion = +input;
+    this.setValidators();
+  }
+
+  setValidators() {
+    const precio_venta = this.investmentProposalForm.get("precio_venta");
+
+    const valor_nominal_venta = this.investmentProposalForm.get(
+      "valor_nominal_venta"
+    );
+    const precio_vencimiento_venta = this.investmentProposalForm.get(
+      "precio_vencimiento_venta"
+    );
+    const cupon_porcentaje_venta = this.investmentProposalForm.get(
+      "cupon_porcentaje_venta"
+    );
+    const comision_casa_porcentaje_venta = this.investmentProposalForm.get(
+      "comision_casa_porcentaje_venta"
+    );
+    const comision_bolsa_porcentaje_venta = this.investmentProposalForm.get(
+      "comision_bolsa_porcentaje_venta"
+    );
+    const fecha_ultima_cupon_venta = this.investmentProposalForm.get(
+      "fecha_ultima_cupon_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_venta.setValidators([
+        Validators.required,
+        Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+      ]);
+
+      valor_nominal_venta.setValidators([
+        Validators.required,
+        Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+      ]);
+      precio_vencimiento_venta.setValidators([
+        Validators.required,
+        Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+      ]);
+      cupon_porcentaje_venta.setValidators([
+        Validators.required,
+        Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+      ]);
+      comision_casa_porcentaje_venta.setValidators([
+        Validators.required,
+        Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+      ]);
+      comision_bolsa_porcentaje_venta.setValidators([
+        Validators.required,
+        Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+      ]);
+      fecha_ultima_cupon_venta.setValidators([Validators.required]);
+      fecha_liquidacion_venta.setValidators([Validators.required]);
+      fecha_vencimiento_venta.setValidators([Validators.required]);
+    } else {
+      precio_venta.setValidators(null);
+
+      valor_nominal_venta.setValidators(null);
+      precio_vencimiento_venta.setValidators(null);
+      cupon_porcentaje_venta.setValidators(null);
+      comision_casa_porcentaje_venta.setValidators(null);
+      comision_bolsa_porcentaje_venta.setValidators(null);
+      fecha_ultima_cupon_venta.setValidators(null);
+      fecha_liquidacion_venta.setValidators(null);
+      fecha_vencimiento_venta.setValidators(null);
+    }
+    precio_venta.updateValueAndValidity();
+
+    valor_nominal_venta.updateValueAndValidity();
+    precio_vencimiento_venta.updateValueAndValidity();
+    cupon_porcentaje_venta.updateValueAndValidity();
+    comision_casa_porcentaje_venta.updateValueAndValidity();
+    comision_bolsa_porcentaje_venta.updateValueAndValidity();
+    fecha_ultima_cupon_venta.updateValueAndValidity();
+    fecha_liquidacion_venta.updateValueAndValidity();
+    fecha_vencimiento_venta.updateValueAndValidity();
+  }
 }

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

@@ -362,7 +362,10 @@
             >Cálculos del instrumento</span
           >
         </div>
-
+        <div class="col-sm-6">
+          <h4>Renta (%):</h4>
+          <div class="field">{{ renta_porcentaje | number: "1.2-4" }}%</div>
+        </div>
         <div class="col-sm-6">
           <h4>Ingreso bruto:</h4>
           <div class="field">$USD {{ ingreso_bruto | number: "1.2-4" }}</div>
@@ -456,15 +459,14 @@
             <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 | number: "1.2-4")
                 }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD
-                {{
+                ${{
                   consolidado_proyeccion.total_ingreso_bruto | number: "1.2-4"
                 }}
               </td>
@@ -472,15 +474,14 @@
             <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 | number: "1.2-4")
                 }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD
-                {{
+                ${{
                   consolidado_proyeccion.total_ingreso_neto | number: "1.2-4"
                 }}
               </td>
@@ -488,11 +489,10 @@
             <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" }}
+                ${{ row.costo_cedeval | number: "1.2-4" }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD
-                {{
+                ${{
                   consolidado_proyeccion.total_costo_cedeval | number: "1.2-4"
                 }}
               </td>
@@ -500,20 +500,19 @@
             <ng-container matColumnDef="renta">
               <th mat-header-cell *matHeaderCellDef>Renta</th>
               <td mat-cell *matCellDef="let row">
-                {{ row.renta | number: "1.2-4" }}
+                ${{ row.renta | number: "1.2-4" }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD {{ consolidado_proyeccion.total_renta | number: "1.2-4" }}
+                ${{ 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" }}
+                ${{ row.costo_transferencia | number: "1.2-4" }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD
-                {{
+                ${{
                   consolidado_proyeccion.total_costo_transferencia
                     | number: "1.2-4"
                 }}
@@ -522,21 +521,21 @@
             <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" }}
+                ${{ row.costo_banco | number: "1.2-4" }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD
-                {{ consolidado_proyeccion.total_costo_banco | number: "1.2-4" }}
+                ${{
+                  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" }}
+                ${{ row.otros_costos | number: "1.2-4" }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD
-                {{
+                ${{
                   consolidado_proyeccion.total_otros_costos | number: "1.2-4"
                 }}
               </td>
@@ -601,6 +600,12 @@
           $USD {{ instrument_work.valor_transado | number: "1.2-4" }}
         </div>
       </div>
+      <div class="col-lg-3 col-md-4 col-sm-6">
+        <h4>Renta (%):</h4>
+        <div class="field">
+          {{ instrument_work.renta_porcentaje | number: "1.2-4" }}%
+        </div>
+      </div>
       <div class="col-lg-3 col-md-4 col-sm-6">
         <h4>Precio porcentaje:</h4>
         <div class="field">
@@ -748,15 +753,14 @@
             <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 | number: "1.2-4")
                 }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD
-                {{
+                ${{
                   consolidado_proyeccion.total_ingreso_bruto | number: "1.2-4"
                 }}
               </td>
@@ -764,15 +768,14 @@
             <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 | number: "1.2-4")
                 }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD
-                {{
+                ${{
                   consolidado_proyeccion.total_ingreso_neto | number: "1.2-4"
                 }}
               </td>
@@ -780,11 +783,10 @@
             <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" }}
+                ${{ row.costo_cedeval | number: "1.2-4" }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD
-                {{
+                ${{
                   consolidado_proyeccion.total_costo_cedeval | number: "1.2-4"
                 }}
               </td>
@@ -792,20 +794,19 @@
             <ng-container matColumnDef="renta">
               <th mat-header-cell *matHeaderCellDef>Renta</th>
               <td mat-cell *matCellDef="let row">
-                {{ row.renta | number: "1.2-4" }}
+                ${{ row.renta | number: "1.2-4" }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD {{ consolidado_proyeccion.total_renta | number: "1.2-4" }}
+                ${{ 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" }}
+                ${{ row.costo_transferencia | number: "1.2-4" }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD
-                {{
+                ${{
                   consolidado_proyeccion.total_costo_transferencia
                     | number: "1.2-4"
                 }}
@@ -814,21 +815,21 @@
             <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" }}
+                ${{ row.costo_banco | number: "1.2-4" }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD
-                {{ consolidado_proyeccion.total_costo_banco | number: "1.2-4" }}
+                ${{
+                  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" }}
+                ${{ row.otros_costos | number: "1.2-4" }}
               </td>
               <td mat-footer-cell *matFooterCellDef>
-                $USD
-                {{
+                ${{
                   consolidado_proyeccion.total_otros_costos | number: "1.2-4"
                 }}
               </td>

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

@@ -103,6 +103,7 @@ export class VCN implements InstrumentComponent {
     total_costo_banco: 0,
     total_otros_costos: 0
   };
+  renta_porcentaje: any;
 
   constructor(
     private formBuilder: FormBuilder,
@@ -322,6 +323,7 @@ export class VCN implements InstrumentComponent {
           this.interes_acumulado = ans["result"]["interes_acumulado"];
           this.fecha_inicio_vigencia = ans["result"]["fecha_inicio_vigencia"];
           this.proyecciones = ans["result"]["proyecciones"];
+          this.renta_porcentaje = ans["result"]["renta_porcentaje"];
 
           if (this.proyecciones != undefined && this.proyecciones.length > 0) {
             this.consolidado_proyeccion = this.proyecciones.slice(0, -1);
@@ -363,7 +365,6 @@ export class VCN implements InstrumentComponent {
             fecha_inicio_vigencia: this.fecha_inicio_vigencia,
             proyecciones: this.proyecciones,
             plazo: this.plazo,
-            //id_formato_ingreso: this.investmentProposalForm.value.id_formato_ingreso,
 
             fecha_operacion: this.investmentProposalForm.value.fecha_operacion
               .singleDate.formatted,

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

@@ -103,12 +103,36 @@ export class InvestmentProposalApproveComponent implements OnInit {
 
           if (this.userListPrevious.length > 0) {
             for (let i = 0; i < this.userListPrevious.length; i++) {
-              this.generated_inputs_previous += `<div class='form-check form-check-inline'><input type='checkbox' class='form-check-input' id='previous-${this.userListPrevious[i]}' name='users' value='${this.userListPrevious[i]}'><label class='form-check-label' for='previous-${this.userListPrevious[i]}'>${this.userListPrevious[i]}</label></div>`;
+              if (this.userListPrevious[i].default_email == true) {
+                this.generated_inputs_previous += `<div class='form-check form-check-inline'><input type='checkbox' class='form-check-input' id='previous-${
+                  this.userListPrevious[i].name
+                }' name='users' value='${
+                  this.userListPrevious[i].name
+                }' checked='${
+                  this.userListPrevious[i].default_email == "true"
+                    ? true
+                    : false
+                }' disabled='disabled'><label class='form-check-label' for='previous-${
+                  this.userListPrevious[i].name
+                }'>${this.userListPrevious[i].name}</label></div>`;
+              } else {
+                this.generated_inputs_previous += `<div class='form-check form-check-inline'><input type='checkbox' class='form-check-input' id='previous-${this.userListPrevious[i].name}' name='users' value='${this.userListPrevious[i].name}'><label class='form-check-label' for='previous-${this.userListPrevious[i].name}'>${this.userListPrevious[i].name}</label></div>`;
+              }
             }
           }
           if (this.userListNext.length > 0) {
             for (let i = 0; i < this.userListNext.length; i++) {
-              this.generated_inputs_next += `<div class='form-check form-check-inline'><input type='checkbox' class='form-check-input' id='next-${this.userListNext[i]}' name='users' value='${this.userListNext[i]}'><label class='form-check-label' for='next-${this.userListNext[i]}'>${this.userListNext[i]}</label></div>`;
+              if (this.userListNext[i].default_email == true) {
+                this.generated_inputs_next += `<div class='form-check form-check-inline'><input type='checkbox' class='form-check-input' id='next-${
+                  this.userListNext[i].name
+                }' name='users' value='${this.userListNext[i].name}' checked='${
+                  this.userListNext[i].default_email == "true" ? true : false
+                }' disabled='disabled'><label class='form-check-label' for='next-${
+                  this.userListNext[i].name
+                }'>${this.userListNext[i].name}</label></div>`;
+              } else {
+                this.generated_inputs_next += `<div class='form-check form-check-inline'><input type='checkbox' class='form-check-input' id='next-${this.userListNext[i].name}' name='users' value='${this.userListNext[i].name}'><label class='form-check-label' for='next-${this.userListNext[i].name}'>${this.userListNext[i].name}</label></div>`;
+              }
             }
           }
         });
@@ -350,171 +374,207 @@ export class InvestmentProposalApproveComponent implements OnInit {
 
   approve_proposal() {
     this.reviewProposal = undefined;
-    (async () => {
+
+    Swal.fire({
+      title: `<h3>Aprobación de propuesta de inversión</h3>`,
+      icon: "info",
+      html: `<p style="text-align:left;">Comentario:</p>`,
+      input: "textarea",
+      showCancelButton: true,
+      confirmButtonText: "Siguiente",
+      cancelButtonText: "Cancelar",
+      showLoaderOnConfirm: true,
+
+      preConfirm: comentario => {
+        this.reviewProposal = {
+          id_inversion: this.investmentProposalID,
+          step: "next",
+          comentario: comentario
+        };
+      },
+      allowOutsideClick: () => !Swal.isLoading()
+    }).then(result => {
+      if (result.dismiss) {
+        return false;
+      }
+
       Swal.fire({
         title: `<h3>Aprobación de propuesta de inversión</h3>`,
         icon: "info",
-        html: `<p style="text-align:left;">Comentario:</p>`,
-        input: "textarea",
+        html: `<div>Notificar a:</div>${this.generated_inputs_next}`,
+        confirmButtonText: "Aprobar propuesta",
         showCancelButton: true,
-        confirmButtonText: "Siguiente",
         cancelButtonText: "Cancelar",
         showLoaderOnConfirm: true,
-        inputValidator: value => {
-          if (!value) {
-            return "Debe ingresar un comentario";
-          }
-        },
 
-        preConfirm: comentario => {
-          this.reviewProposal = {
-            id_inversion: this.investmentProposalID,
-            step: "next",
-            comentario: comentario
-          };
-        },
-        allowOutsideClick: () => !Swal.isLoading()
-      }).then(result => {
-        if (result.value) {
-          Swal.fire({
-            title: `<h3>Aprobación de propuesta de inversión</h3>`,
-            icon: "info",
-            html: `<div>Notificar a:</div>${this.generated_inputs_next}`,
-            confirmButtonText: "Aprobar propuesta",
-            showCancelButton: true,
-            cancelButtonText: "Cancelar",
-            showLoaderOnConfirm: true,
-
-            preConfirm: () => {
-              let array = [];
-
-              for (let i = 0; i < this.userListNext.length; i++) {
-                let html_input: HTMLInputElement = document.getElementById(
-                  "next-" + this.userListNext[i]
-                ) as HTMLInputElement;
-                let html_value: string = html_input.value;
-                if (html_input.checked == true) {
-                  array.push(html_value);
-                }
-              }
+        preConfirm: () => {
+          let array = [];
 
-              this.reviewProposal["notificar"] = array.toString();
-
-              this.investmentService
-                .sendReviewProposalInvestment(this.reviewProposal)
-                .subscribe(
-                  success => {
-                    if (success) {
-                      Swal.fire({
-                        allowOutsideClick: false,
-                        icon: "success",
-                        showCancelButton: false,
-                        title: "Exito",
-                        confirmButtonText: "La propuesta ha sido aprobada"
-                      }).then(result => {
-                        Swal.close();
-                        window.location.href = "#/investment-proposals";
-                      });
-                    }
-                  },
-                  err => {
-                    Swal.fire({
-                      icon: "error",
-                      title: "Error al guardar",
-                      text: err.message
-                    });
-                  }
-                );
+          for (let i = 0; i < this.userListNext.length; i++) {
+            let html_input: HTMLInputElement = document.getElementById(
+              "next-" + this.userListNext[i].name
+            ) as HTMLInputElement;
+            let html_value: string = html_input.value;
+            if (html_input.checked == true) {
+              array.push(html_value);
             }
-          });
+          }
+          this.reviewProposal["notificar"] = array.toString();
         }
+      }).then(result1 => {
+        if (result1.dismiss) {
+          return false;
+        }
+
+        Swal.fire({
+          allowOutsideClick: false,
+          title: "Espere por favor...",
+          icon: "info"
+        });
+        Swal.showLoading();
+
+        this.investmentService
+          .sendReviewProposalInvestment(this.reviewProposal)
+          .subscribe(
+            success => {
+              if (success) {
+                Swal.fire({
+                  allowOutsideClick: false,
+                  icon: "success",
+                  showCancelButton: false,
+                  title: "Exito",
+                  confirmButtonText: "La propuesta ha sido aprobada"
+                }).then(result => {
+                  Swal.close();
+                  window.location.href = "#/investment-proposals";
+                });
+              }
+            },
+            err => {
+              debugger;
+              if (err.code == 405) {
+                Swal.fire({
+                  icon: "error",
+                  title: "Operacion no permitida",
+                  text: err.message
+                }).then(result => {
+                  Swal.close();
+                  window.location.href = "#/investment-proposals";
+                });
+              } else {
+                Swal.fire({
+                  icon: "error",
+                  title: "Error al guardar",
+                  text: err.message
+                });
+              }
+            }
+          );
       });
-    })();
+    });
   }
 
   dismiss_proposal() {
     this.reviewProposal = undefined;
-    (async () => {
+
+    Swal.fire({
+      title: `<h3>Rechazar propuesta de inversión</h3>`,
+      icon: "info",
+      html: `<p style="text-align:left;">Comentario:</p>`,
+      input: "textarea",
+      showCancelButton: true,
+      confirmButtonColor: "#C82333",
+      confirmButtonText: "Siguiente",
+      cancelButtonText: "Cancelar",
+      showLoaderOnConfirm: true,
+
+      preConfirm: comentario => {
+        this.reviewProposal = {
+          id_inversion: this.investmentProposalID,
+          step: "previous",
+          comentario: comentario
+        };
+      },
+      allowOutsideClick: () => !Swal.isLoading()
+    }).then(result => {
+      if (result.dismiss) {
+        return false;
+      }
+
       Swal.fire({
-        title: `<h3>Aprobación de propuesta de inversión</h3>`,
+        title: `<h3>Rechazar propuesta de inversión</h3>`,
         icon: "info",
-        html: `<p style="text-align:left;">Comentario:</p>`,
-        input: "textarea",
+        html: `<div>Notificar a:</div>${this.generated_inputs_previous}`,
         showCancelButton: true,
         confirmButtonColor: "#C82333",
-        confirmButtonText: "Siguiente",
+        confirmButtonText: "Rechazar propuesta",
         cancelButtonText: "Cancelar",
         showLoaderOnConfirm: true,
-        inputValidator: value => {
-          if (!value) {
-            return "Debe ingresar un comentario";
-          }
-        },
 
-        preConfirm: comentario => {
-          this.reviewProposal = {
-            id_inversion: this.investmentProposalID,
-            step: "previous",
-            comentario: comentario
-          };
-        },
-        allowOutsideClick: () => !Swal.isLoading()
-      }).then(result => {
-        if (result.value) {
-          Swal.fire({
-            title: `<h3>Aprobación de propuesta de inversión</h3>`,
-            icon: "info",
-            html: `<div>Notificar a:</div>${this.generated_inputs_previous}`,
-            confirmButtonText: "Rechazar propuesta",
-            showCancelButton: true,
-            confirmButtonColor: "#C82333",
-            cancelButtonText: "Cancelar",
-            showLoaderOnConfirm: true,
-
-            preConfirm: () => {
-              let array = [];
-
-              for (let i = 0; i < this.userListPrevious.length; i++) {
-                let html_input: HTMLInputElement = document.getElementById(
-                  "previous-" + this.userListPrevious[i]
-                ) as HTMLInputElement;
-                let html_value: string = html_input.value;
-                if (html_input.checked == true) {
-                  array.push(html_value);
-                }
-              }
+        preConfirm: () => {
+          let array = [];
 
-              this.reviewProposal["notificar"] = array.toString();
-
-              this.investmentService
-                .sendReviewProposalInvestment(this.reviewProposal)
-                .subscribe(
-                  success => {
-                    if (success) {
-                      Swal.fire({
-                        allowOutsideClick: false,
-                        icon: "success",
-                        showCancelButton: false,
-                        title: "Exito",
-                        confirmButtonText: "La propuesta ha sido rechazada"
-                      }).then(result => {
-                        Swal.close();
-                        window.location.href = "#/investment-proposals";
-                      });
-                    }
-                  },
-                  err => {
-                    Swal.fire({
-                      icon: "error",
-                      title: "Error al guardar",
-                      text: err.message
-                    });
-                  }
-                );
+          for (let i = 0; i < this.userListPrevious.length; i++) {
+            let html_input: HTMLInputElement = document.getElementById(
+              "previous-" + this.userListPrevious[i].name
+            ) as HTMLInputElement;
+            let html_value: string = html_input.value;
+            if (html_input.checked == true) {
+              array.push(html_value);
             }
-          });
+          }
+          this.reviewProposal["notificar"] = array.toString();
+        }
+      }).then(result1 => {
+        if (result1.dismiss) {
+          return false;
         }
+
+        Swal.fire({
+          allowOutsideClick: false,
+          title: "Espere por favor...",
+          icon: "info"
+        });
+        Swal.showLoading();
+
+        this.investmentService
+          .sendReviewProposalInvestment(this.reviewProposal)
+          .subscribe(
+            success => {
+              if (success) {
+                Swal.fire({
+                  allowOutsideClick: false,
+                  icon: "warning",
+                  showCancelButton: false,
+                  title: "Exito",
+                  confirmButtonText: "La propuesta ha sido rechazada"
+                }).then(result => {
+                  Swal.close();
+                  window.location.href = "#/investment-proposals";
+                });
+              }
+            },
+            err => {
+              if (err.code == 405) {
+                Swal.fire({
+                  icon: "error",
+                  title: "Operacion no permitida",
+                  text: err.message
+                }).then(result => {
+                  Swal.close();
+                  window.location.href = "#/investment-proposals";
+                });
+              } else {
+                Swal.fire({
+                  icon: "error",
+                  title: "Error al guardar",
+                  text: err.message
+                });
+              }
+              this.router.navigate(["/investment-proposals"]);
+            }
+          );
       });
-    })();
+    });
   }
 }

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

@@ -91,9 +91,6 @@ export class ComplementInfoComponent implements OnInit {
     this.complementInfoDontExists = this.complementInfo == undefined;
 
     this.instrumentInfo = this.formDataService.getGeneralInfo().instrumentos;
-    console.log(this.instrumentInfo);
-    console.log(this.complementInfo);
-
     this.catalogService.getCatalogInfo("empresas").subscribe(res => {
       this.companies = res;
 

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

@@ -292,7 +292,6 @@ export class InvestmentProposalGeneralInfoComponent
     this.catalogService.getInstrumentTypes().subscribe(res => {
       res;
       this.instrumentTypes = [];
-
       for (let property in res) {
         this.instrumentTypes.push({
           label: res[property]["nombre"],

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

@@ -80,7 +80,7 @@ export class InvestmentProposalsComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.investmentsService.getProposalInvestmentsList().subscribe(
+    this.investmentsService.getProposalInvestmentsList("propuestas").subscribe(
       ans => {
         this.listProposals = ans.result;
         /*
@@ -108,7 +108,20 @@ export class InvestmentProposalsComponent implements OnInit {
 
         this.dataSource.data = this.listProposals;
         this.dataSource.paginator = this.paginator;
+        this.dataSource.sortingDataAccessor = (item, property) => {
+          switch (property) {
+            case "id_inversion_instrumento":
+              return item.id_inversion_instrumento.id_tipo_instrumento.nombre;
+            case "id_estado_inversion":
+              return item.id_estado_inversion.nombre;
+            case "id_empresa":
+              return item.id_empresa.nombre;
+            default:
+              return item[property];
+          }
+        };
         this.dataSource.sort = this.sort;
+
         Swal.close();
       },
       err => {
@@ -282,7 +295,11 @@ export class InvestmentProposalsComponent implements OnInit {
 
         if (this.userList.length > 0) {
           for (let i = 0; i < this.userList.length; i++) {
-            this.test += `<div class='form-check form-check-inline'><input type='checkbox' class='form-check-input' id='${this.userList[i]}' name='users' value='${this.userList[i]}'><label class='form-check-label' for='${this.userList[i]}'>${this.userList[i]}</label></div>`;
+            if (this.userList[i].default_email == true) {
+              this.test += `<div class='form-check form-check-inline'><input type='checkbox' class='form-check-input' id='next-${this.userList[i].name}' name='users' value='${this.userList[i].name}' checked='true'><label class='form-check-label' for='next-${this.userList[i].name}'>${this.userList[i].name}</label></div>`;
+            } else {
+              this.test += `<div class='form-check form-check-inline'><input type='checkbox' class='form-check-input' id='next-${this.userList[i].name}' name='users' value='${this.userList[i].name}'><label class='form-check-label' for='next-${this.userList[i].name}'>${this.userList[i].name}</label></div>`;
+            }
           }
         }
       });
@@ -296,22 +313,19 @@ export class InvestmentProposalsComponent implements OnInit {
         showCancelButton: true,
         confirmButtonText: "Enviar propuesta",
         cancelButtonText: "Cancelar",
-        showLoaderOnConfirm: true,
-        inputValidator: value => {
-          if (!value) {
-            return "Debe ingresar un comentario";
-          }
-        },
-
+        allowEscapeKey: true,
         preConfirm: comentario => {
           this.reviewProposal = {
             id_inversion: investmentProposalID,
             step: "next",
-            comentario: comentario
+            comentario: comentario == null ? "" : comentario
           };
-        },
-        allowOutsideClick: () => !Swal.isLoading()
+        }
       }).then(result => {
+        if (result.dismiss) {
+          return false;
+        }
+
         Swal.fire({
           title: `<h3>Enviar a revisión propuesta de inversión ${investmentCode}</h3>`,
           icon: "info",
@@ -320,50 +334,77 @@ export class InvestmentProposalsComponent implements OnInit {
           showCancelButton: true,
           cancelButtonText: "Cancelar",
           showLoaderOnConfirm: true,
+          allowEscapeKey: true,
 
           preConfirm: () => {
             let array = [];
 
             for (let i = 0; i < this.userList.length; i++) {
               let html_input: HTMLInputElement = document.getElementById(
-                this.userList[i]
+                "next-" + this.userList[i].name
               ) as HTMLInputElement;
-              let html_value: string = html_input.value;
-              if (html_input.checked == true) {
-                array.push(html_value);
+              if (html_input != null) {
+                let html_value: string = html_input.value;
+                if (html_input.checked == true) {
+                  array.push(html_value);
+                }
+              } else {
+                array;
               }
             }
 
             this.reviewProposal["notificar"] = array.toString();
+          }
+        }).then(result1 => {
+          if (result1.dismiss) {
+            return false;
+          }
 
-            this.investmentsService
-              .sendReviewProposalInvestment(this.reviewProposal)
-              .subscribe(
-                success => {
-                  if (success) {
-                    Swal.fire({
-                      allowOutsideClick: false,
-                      icon: "success",
-                      showCancelButton: false,
-                      title: "Exito",
-                      confirmButtonText:
-                        "La propuesta ha sido enviada a revisión"
-                    }).then(result => {
-                      Swal.close();
-                      window.location.reload();
-                    });
-                  }
-                },
-                err => {
+          Swal.fire({
+            allowOutsideClick: false,
+            title: "Espere por favor...",
+            icon: "info"
+          });
+          Swal.showLoading();
+
+          this.investmentsService
+            .sendReviewProposalInvestment(this.reviewProposal)
+            .subscribe(
+              success => {
+                if (success) {
+                  Swal.fire({
+                    allowOutsideClick: false,
+                    icon: "success",
+                    showCancelButton: false,
+                    title: "Exito",
+                    confirmButtonText: "La propuesta ha sido enviada a revisión"
+                  }).then(result => {
+                    Swal.close();
+                    window.location.reload();
+                  });
+                }
+              },
+              err => {
+                if (err.code == 405) {
+                  Swal.fire({
+                    icon: "error",
+                    title: "Operacion no permitida",
+                    text: err.message
+                  }).then(result => {
+                    Swal.close();
+                    window.location.href = "#/investment-proposals";
+                  });
+                } else {
                   Swal.fire({
                     icon: "error",
                     title: "Error al guardar",
                     text: err.message
                   });
                 }
-              );
-          }
+              }
+            );
         });
+
         //window.location.reload();
       });
     })();
@@ -379,36 +420,49 @@ export class InvestmentProposalsComponent implements OnInit {
 
         if (this.userList.length > 0) {
           for (let i = 0; i < this.userList.length; i++) {
-            this.test += `<div class='form-check form-check-inline'><input type='checkbox' class='form-check-input' id='${this.userList[i]}' name='users' value='${this.userList[i]}'><label class='form-check-label' for='${this.userList[i]}'>${this.userList[i]}</label></div>`;
+            if (this.userList[i].default_email == true) {
+              this.test += `<div class='form-check form-check-inline'><input type='checkbox' class='form-check-input' id='next-${
+                this.userList[i].name
+              }' name='users' value='${this.userList[i].name}' checked='${
+                this.userList[i].default_email == "true" ? true : false
+              }'><label class='form-check-label' for='next-${
+                this.userList[i].name
+              }'>${this.userList[i].name}</label></div>`;
+            } else {
+              this.test += `<div class='form-check form-check-inline'><input type='checkbox' class='form-check-input' id='next-${this.userList[i].name}' name='users' value='${this.userList[i].name}'><label class='form-check-label' for='next-${this.userList[i].name}'>${this.userList[i].name}</label></div>`;
+            }
           }
         }
       });
     this.reviewProposal = undefined;
     (async () => {
       Swal.fire({
-        title: `<h3>Finalizar propuesta de inversión: ${investmentCode}</h3>`,
+        title: `<h3>Finalizar inversión: ${investmentCode}</h3>`,
         icon: "info",
         input: "textarea",
         html: `<p style="text-align:left;">Comentario:</p>`,
         showCancelButton: true,
         confirmButtonText: "Siguiente",
         cancelButtonText: "Cancelar",
-        inputValidator: value => {
+        /*inputValidator: value => {
           if (!value) {
             return "Debe ingresar un comentario";
           }
-        },
+        },*/
         preConfirm: comentario => {
           this.reviewProposal = {
             id_inversion: investmentProposalID,
             step: "next",
-            comentario: comentario
+            comentario: comentario == null ? "" : comentario
           };
         },
         allowOutsideClick: () => !Swal.isLoading()
       }).then(result => {
+        if (result.dismiss) {
+          return false;
+        }
         Swal.fire({
-          title: `<h3>Finalizar propuesta de inversión ${investmentCode}</h3>`,
+          title: `<h3>Finalizar inversión ${investmentCode}</h3>`,
           icon: "info",
           html: `${this.test}`,
           confirmButtonText: "Finalizar",
@@ -421,43 +475,71 @@ export class InvestmentProposalsComponent implements OnInit {
 
             for (let i = 0; i < this.userList.length; i++) {
               let html_input: HTMLInputElement = document.getElementById(
-                this.userList[i]
+                "next-" + this.userList[i].name
               ) as HTMLInputElement;
-              let html_value: string = html_input.value;
-              if (html_input.checked == true) {
-                array.push(html_value);
+              if (html_input != null) {
+                let html_value: string = html_input.value;
+                if (html_input.checked == true) {
+                  array.push(html_value);
+                }
+              } else {
+                array;
               }
             }
 
             this.reviewProposal["notificar"] = array.toString();
+          }
+        }).then(result1 => {
+          if (result1.dismiss) {
+            return false;
+          }
 
-            this.investmentsService
-              .sendReviewProposalInvestment(this.reviewProposal)
-              .subscribe(
-                success => {
-                  if (success) {
-                    Swal.fire({
-                      allowOutsideClick: false,
-                      icon: "success",
-                      showCancelButton: false,
-                      title: "Exito",
-                      confirmButtonText: "La propuesta ha sido finalizada"
-                    }).then(result => {
-                      Swal.close();
-                      window.location.reload();
-                    });
-                  }
-                },
-                err => {
+          Swal.fire({
+            allowOutsideClick: false,
+            title: "Espere por favor...",
+            icon: "info"
+          });
+          Swal.showLoading();
+
+          this.investmentsService
+            .sendReviewProposalInvestment(this.reviewProposal)
+            .subscribe(
+              success => {
+                if (success) {
+                  Swal.fire({
+                    allowOutsideClick: false,
+                    icon: "success",
+                    showCancelButton: false,
+                    title: "Exito",
+                    confirmButtonText: "La inversión ha sido finalizada"
+                  }).then(result => {
+                    Swal.close();
+                    window.location.reload();
+                  });
+                }
+              },
+              err => {
+                if (err.code == 405) {
+                  Swal.fire({
+                    icon: "error",
+                    title: "Operación no permitida",
+                    text: err.message
+                  }).then(result => {
+                    Swal.close();
+                    window.location.href = "#/investment-proposals";
+                  });
+                } else {
                   Swal.fire({
                     icon: "error",
                     title: "Error al guardar",
                     text: err.message
                   });
                 }
-              );
-          }
+                this.router.navigate(["/investment-proposals"]);
+              }
+            );
         });
+
         //window.location.reload();
       });
     })();

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

@@ -30,7 +30,7 @@
           <div class="card borderless">
             <div class="card-header card-header-icon card-header-rose">
               <h4 class="card-title">
-                Resumen de la propuesta
+                Resumen de la inversión
               </h4>
             </div>
             <div class="card-body">
@@ -95,7 +95,7 @@
                       <div class="timeline-body">
                         <div class="row">
                           <div class="col-sm-6">
-                            <h4>Código de la propuesta de inversión:</h4>
+                            <h4>Código de la inversión:</h4>
                             <div class="field">{{ codigo_inversion }}</div>
                           </div>
                           <div class="col-sm-6">

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

@@ -23,7 +23,7 @@ import { InvestmentsService } from "@app/services/investments.service";
   styleUrls: ["./payment-approval.component.scss"]
 })
 export class PaymentApprovalComponent implements OnInit {
-  title = "Aprobación de propuesta";
+  title = "Aprobación de inversión";
   @Input() ads: Instrument[];
   @Input() formData: InvestmentProposalForm;
   @ViewChild(InstrumentDirective, { static: true })
@@ -111,12 +111,36 @@ export class PaymentApprovalComponent implements OnInit {
 
           if (this.userListPrevious.length > 0) {
             for (let i = 0; i < this.userListPrevious.length; i++) {
-              this.generated_inputs_previous += `<div class='form-check form-check-inline'><input type='checkbox' class='form-check-input' id='previous-${this.userListPrevious[i]}' name='users' value='${this.userListPrevious[i]}'><label class='form-check-label' for='previous-${this.userListPrevious[i]}'>${this.userListPrevious[i]}</label></div>`;
+              if (this.userListPrevious[i].default_email == true) {
+                this.generated_inputs_previous += `<div class='form-check form-check-inline'><input type='checkbox' class='form-check-input' id='previous-${
+                  this.userListPrevious[i].name
+                }' name='users' value='${
+                  this.userListPrevious[i].name
+                }' checked='${
+                  this.userListPrevious[i].default_email == "true"
+                    ? true
+                    : false
+                }' disabled='disabled'><label class='form-check-label' for='previous-${
+                  this.userListPrevious[i].name
+                }'>${this.userListPrevious[i].name}</label></div>`;
+              } else {
+                this.generated_inputs_previous += `<div class='form-check form-check-inline'><input type='checkbox' class='form-check-input' id='previous-${this.userListPrevious[i].name}' name='users' value='${this.userListPrevious[i].name}'><label class='form-check-label' for='previous-${this.userListPrevious[i].name}'>${this.userListPrevious[i].name}</label></div>`;
+              }
             }
           }
           if (this.userListNext.length > 0) {
             for (let i = 0; i < this.userListNext.length; i++) {
-              this.generated_inputs_next += `<div class='form-check form-check-inline'><input type='checkbox' class='form-check-input' id='next-${this.userListNext[i]}' name='users' value='${this.userListNext[i]}'><label class='form-check-label' for='next-${this.userListNext[i]}'>${this.userListNext[i]}</label></div>`;
+              if (this.userListNext[i].default_email == true) {
+                this.generated_inputs_next += `<div class='form-check form-check-inline'><input type='checkbox' class='form-check-input' id='next-${
+                  this.userListNext[i].name
+                }' name='users' value='${this.userListNext[i].name}' checked='${
+                  this.userListNext[i].default_email == "true" ? true : false
+                }' disabled='disabled'><label class='form-check-label' for='next-${
+                  this.userListNext[i].name
+                }'>${this.userListNext[i].name}</label></div>`;
+              } else {
+                this.generated_inputs_next += `<div class='form-check form-check-inline'><input type='checkbox' class='form-check-input' id='next-${this.userListNext[i].name}' name='users' value='${this.userListNext[i].name}'><label class='form-check-label' for='next-${this.userListNext[i].name}'>${this.userListNext[i].name}</label></div>`;
+              }
             }
           }
         });
@@ -377,171 +401,205 @@ export class PaymentApprovalComponent implements OnInit {
 
   approve_proposal() {
     this.reviewProposal = undefined;
-    (async () => {
+
+    Swal.fire({
+      title: `<h3>Revisión de la información de pago de inversión</h3>`,
+      icon: "info",
+      html: `<p style="text-align:left;">Comentario:</p>`,
+      input: "textarea",
+      showCancelButton: true,
+      confirmButtonText: "Siguiente",
+      cancelButtonText: "Cancelar",
+      showLoaderOnConfirm: true,
+
+      preConfirm: comentario => {
+        this.reviewProposal = {
+          id_inversion: this.investmentProposalID,
+          step: "next",
+          comentario: comentario
+        };
+      },
+      allowOutsideClick: () => !Swal.isLoading()
+    }).then(result => {
+      if (result.dismiss) {
+        return false;
+      }
+
       Swal.fire({
-        title: `<h3>Revisión del pago de inversión</h3>`,
+        title: `<h3>Revisión de la información de pago de inversión</h3>`,
         icon: "info",
-        html: `<p style="text-align:left;">Comentario:</p>`,
-        input: "textarea",
+        html: `<div>Notificar a:</div>${this.generated_inputs_next}`,
+        confirmButtonText: "Aprobar pago",
         showCancelButton: true,
-        confirmButtonText: "Siguiente",
         cancelButtonText: "Cancelar",
         showLoaderOnConfirm: true,
-        inputValidator: value => {
-          if (!value) {
-            return "Debe ingresar un comentario";
-          }
-        },
 
-        preConfirm: comentario => {
-          this.reviewProposal = {
-            id_inversion: this.investmentProposalID,
-            step: "next",
-            comentario: comentario
-          };
-        },
-        allowOutsideClick: () => !Swal.isLoading()
-      }).then(result => {
-        if (result.value) {
-          Swal.fire({
-            title: `<h3>Revisión del pago de inversión</h3>`,
-            icon: "info",
-            html: `<div>Notificar a:</div>${this.generated_inputs_next}`,
-            confirmButtonText: "Aprobar propuesta",
-            showCancelButton: true,
-            cancelButtonText: "Cancelar",
-            showLoaderOnConfirm: true,
-
-            preConfirm: () => {
-              let array = [];
-
-              for (let i = 0; i < this.userListNext.length; i++) {
-                let html_input: HTMLInputElement = document.getElementById(
-                  "next-" + this.userListNext[i]
-                ) as HTMLInputElement;
-                let html_value: string = html_input.value;
-                if (html_input.checked == true) {
-                  array.push(html_value);
-                }
-              }
+        preConfirm: () => {
+          let array = [];
 
-              this.reviewProposal["notificar"] = array.toString();
-
-              this.investmentService
-                .sendReviewProposalInvestment(this.reviewProposal)
-                .subscribe(
-                  success => {
-                    if (success) {
-                      Swal.fire({
-                        allowOutsideClick: false,
-                        icon: "success",
-                        showCancelButton: false,
-                        title: "Exito",
-                        confirmButtonText: "La propuesta ha sido aprobada"
-                      }).then(result => {
-                        Swal.close();
-                        window.location.href = "#/investment-proposals";
-                      });
-                    }
-                  },
-                  err => {
-                    Swal.fire({
-                      icon: "error",
-                      title: "Error al guardar",
-                      text: err.message
-                    });
-                  }
-                );
+          for (let i = 0; i < this.userListNext.length; i++) {
+            let html_input: HTMLInputElement = document.getElementById(
+              "next-" + this.userListNext[i].name
+            ) as HTMLInputElement;
+            let html_value: string = html_input.value;
+            if (html_input.checked == true) {
+              array.push(html_value);
             }
-          });
+          }
+          this.reviewProposal["notificar"] = array.toString();
         }
+      }).then(result1 => {
+        if (result1.dismiss) {
+          return false;
+        }
+
+        Swal.fire({
+          allowOutsideClick: false,
+          title: "Espere por favor...",
+          icon: "info"
+        });
+        Swal.showLoading();
+
+        this.investmentService
+          .sendReviewProposalInvestment(this.reviewProposal)
+          .subscribe(
+            success => {
+              if (success) {
+                Swal.fire({
+                  allowOutsideClick: false,
+                  icon: "success",
+                  showCancelButton: false,
+                  title: "Exito",
+                  confirmButtonText: "La información de pago ha sido aprobado"
+                }).then(result => {
+                  Swal.close();
+                  window.location.href = "#/investment-proposals";
+                });
+              }
+            },
+            err => {
+              if (err.code == 405) {
+                Swal.fire({
+                  icon: "error",
+                  title: "Operacion no permitida",
+                  text: err.message
+                }).then(result => {
+                  Swal.close();
+                  window.location.href = "#/investment-proposals";
+                });
+              } else {
+                Swal.fire({
+                  icon: "error",
+                  title: "Error al guardar",
+                  text: err.message
+                });
+              }
+            }
+          );
       });
-    })();
+    });
   }
 
   dismiss_proposal() {
     this.reviewProposal = undefined;
-    (async () => {
+
+    Swal.fire({
+      title: `<h3>Rechazar información de pago</h3>`,
+      icon: "info",
+      html: `<p style="text-align:left;">Comentario:</p>`,
+      input: "textarea",
+      showCancelButton: true,
+      confirmButtonColor: "#C82333",
+      confirmButtonText: "Siguiente",
+      cancelButtonText: "Cancelar",
+      showLoaderOnConfirm: true,
+
+      preConfirm: comentario => {
+        this.reviewProposal = {
+          id_inversion: this.investmentProposalID,
+          step: "previous",
+          comentario: comentario
+        };
+      },
+      allowOutsideClick: () => !Swal.isLoading()
+    }).then(result => {
+      if (result.dismiss) {
+        return false;
+      }
+
       Swal.fire({
-        title: `<h3>Revisión propuesta de inversión</h3>`,
+        title: `<h3>Rechazar información de pago</h3>`,
         icon: "info",
-        html: `<p style="text-align:left;">Comentario:</p>`,
-        input: "textarea",
+        html: `<div>Notificar a:</div>${this.generated_inputs_previous}`,
         showCancelButton: true,
         confirmButtonColor: "#C82333",
-        confirmButtonText: "Siguiente",
+        confirmButtonText: "Rechazar pago",
         cancelButtonText: "Cancelar",
         showLoaderOnConfirm: true,
-        inputValidator: value => {
-          if (!value) {
-            return "Debe ingresar un comentario";
-          }
-        },
 
-        preConfirm: comentario => {
-          this.reviewProposal = {
-            id_inversion: this.investmentProposalID,
-            step: "previous",
-            comentario: comentario
-          };
-        },
-        allowOutsideClick: () => !Swal.isLoading()
-      }).then(result => {
-        if (result.value) {
-          Swal.fire({
-            title: `<h3>Revisión propuesta de inversión</h3>`,
-            icon: "info",
-            html: `<div>Notificar a:</div>${this.generated_inputs_previous}`,
-            confirmButtonText: "Rechazar propuesta",
-            showCancelButton: true,
-            confirmButtonColor: "#C82333",
-            cancelButtonText: "Cancelar",
-            showLoaderOnConfirm: true,
-
-            preConfirm: () => {
-              let array = [];
-
-              for (let i = 0; i < this.userListPrevious.length; i++) {
-                let html_input: HTMLInputElement = document.getElementById(
-                  "previous-" + this.userListPrevious[i]
-                ) as HTMLInputElement;
-                let html_value: string = html_input.value;
-                if (html_input.checked == true) {
-                  array.push(html_value);
-                }
-              }
+        preConfirm: () => {
+          let array = [];
 
-              this.reviewProposal["notificar"] = array.toString();
-
-              this.investmentService
-                .sendReviewProposalInvestment(this.reviewProposal)
-                .subscribe(
-                  success => {
-                    if (success) {
-                      Swal.fire({
-                        allowOutsideClick: false,
-                        icon: "success",
-                        showCancelButton: false,
-                        title: "Exito",
-                        confirmButtonText: "La propuesta ha sido rechazada"
-                      }).then(result => {
-                        Swal.close();
-                        window.location.href = "#/investment-proposals";
-                      });
-                    }
-                  },
-                  err => {
-                    Swal.fire({
-                      icon: "error",
-                      title: "Error al guardar",
-                      text: err.message
-                    });
-                  }
-                );
+          for (let i = 0; i < this.userListPrevious.length; i++) {
+            let html_input: HTMLInputElement = document.getElementById(
+              "previous-" + this.userListPrevious[i].name
+            ) as HTMLInputElement;
+            let html_value: string = html_input.value;
+            if (html_input.checked == true) {
+              array.push(html_value);
             }
-          });
+          }
+          this.reviewProposal["notificar"] = array.toString();
+        }
+      }).then(result1 => {
+        if (result1.dismiss) {
+          return false;
         }
+
+        Swal.fire({
+          allowOutsideClick: false,
+          title: "Espere por favor...",
+          icon: "info"
+        });
+        Swal.showLoading();
+
+        this.investmentService
+          .sendReviewProposalInvestment(this.reviewProposal)
+          .subscribe(
+            success => {
+              if (success) {
+                Swal.fire({
+                  allowOutsideClick: false,
+                  icon: "warning",
+                  showCancelButton: false,
+                  title: "Exito",
+                  confirmButtonText: "La información de pago ha sido rechazada"
+                }).then(result => {
+                  Swal.close();
+                  window.location.href = "#/investment-proposals";
+                });
+              }
+            },
+            err => {
+              if (err.code == 405) {
+                Swal.fire({
+                  icon: "error",
+                  title: "Operacion no permitida",
+                  text: err.message
+                }).then(result => {
+                  Swal.close();
+                  window.location.href = "#/investment-proposals";
+                });
+              } else {
+                Swal.fire({
+                  icon: "error",
+                  title: "Error al guardar",
+                  text: err.message
+                });
+              }
+            }
+          );
       });
-    })();
+    });
   }
 }

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

@@ -50,7 +50,9 @@
                       <input
                         type="text"
                         formControlName="monto"
+                        [value]="investmentProposalForm.get('monto').value | numberPipe" 
                         class="form-control"
+                        (input)="inputValidator($event)"
                         [ngClass]="{
                           'is-invalid': submitted && f.monto.errors
                         }"
@@ -114,10 +116,9 @@
                       }"
                     >
                       <option
-                        *ngFor="let item of accounts"
+                        *ngFor="let item of accounts_origin"
                         [value]="item.id_cuenta_bancaria"
                       >
-                        {{ nameBankAccounts(item.id_banco) }} -
                         {{ item.nombre }}</option
                       >
                     </select>
@@ -132,7 +133,7 @@
                   </div>
                 </div>
 
-                <div class="col-lg-6 col-sm-12 pr-xl-3" *ngIf="payment_check">
+                <div class="col-lg-6 col-sm-12 pr-xl-3">
                   <div class="form-group">
                     <label for="emitir_nombre">Emitir a nombre: </label>
                     <div class="input-box-container">
@@ -163,7 +164,7 @@
                     >
                       <option
                         *ngFor="let item of accounts_destination"
-                        [value]="item.id_cuenta_bancaria_destino"
+                        [value]="item.id_cuenta_bancaria"
                       >
                         {{ item.nombre }}</option
                       >

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

@@ -78,6 +78,7 @@ export class PaymentInfoComponent implements OnInit {
   payment_check: boolean;
   payment_transfer: boolean;
   accounts_destination: any;
+  accounts_origin: any;
 
   constructor(
     private router: Router,
@@ -102,10 +103,21 @@ export class PaymentInfoComponent implements OnInit {
         this.generated_inputs_next = "";
         if (this.userListNext.length > 0) {
           for (let i = 0; i < this.userListNext.length; i++) {
-            this.generated_inputs_next += `<div class='form-check form-check-inline'><input type='checkbox' class='form-check-input' id='next-${this.userListNext[i]}' name='users' value='${this.userListNext[i]}'><label class='form-check-label' for='next-${this.userListNext[i]}'>${this.userListNext[i]}</label></div>`;
+            if (this.userListNext[i].default_email == true) {
+              this.generated_inputs_next += `<div class='form-check form-check-inline'><input type='checkbox' class='form-check-input' id='next-${
+                this.userListNext[i].name
+              }' name='users' value='${this.userListNext[i].name}' checked='${
+                this.userListNext[i].default_email == "true" ? true : false
+              }'><label class='form-check-label' for='next-${
+                this.userListNext[i].name
+              }'>${this.userListNext[i].name}</label></div>`;
+            } else {
+              this.generated_inputs_next += `<div class='form-check form-check-inline'><input type='checkbox' class='form-check-input' id='next-${this.userListNext[i].name}' name='users' value='${this.userListNext[i].name}'><label class='form-check-label' for='next-${this.userListNext[i].name}'>${this.userListNext[i].name}</label></div>`;
+            }
           }
         }
       });
+
     this.investmentsService
       .getProposalInvestment(this.investmentProposalID)
       .subscribe(
@@ -139,6 +151,15 @@ export class PaymentInfoComponent implements OnInit {
               res["result"]["id_inversion_instrumento"]["instrumento"][
                 "monto_pagar"
               ];
+          } else if (
+            res["result"]["id_inversion_instrumento"]["instrumento"][
+              "monto_prestamo"
+            ] != undefined
+          ) {
+            this.inversionAmount =
+              res["result"]["id_inversion_instrumento"]["instrumento"][
+                "monto_prestamo"
+              ];
           }
           this.investmentProposalForm.setValue({
             monto:
@@ -147,7 +168,7 @@ export class PaymentInfoComponent implements OnInit {
             cuenta_bancaria: "",
             fecha_vencimiento: "",
             cuenta_bancaria_destino: "",
-            emitir_nombre: ""
+            emitir_nombre: res["result"]["emitir_a_nombre_de"]
           });
         },
         err => {
@@ -159,32 +180,46 @@ export class PaymentInfoComponent implements OnInit {
         }
       );
 
+    this.catalogService
+      .getBankAccounts("origen", this.investmentProposalID)
+      .subscribe(res => {
+        this.accounts_origin = res["result"];
+      });
+
+    this.catalogService
+      .getBankAccounts("destino", this.investmentProposalID)
+      .subscribe(res => {
+        this.accounts_destination = res["result"];
+      });
+
     this.catalogService.getPaymentTypes().subscribe(res => {
       this.payment_types = res;
     });
     this.catalogService.getCountries().subscribe(res => {
       this.funds = res;
     });
-    this.catalogService.getCatalogInfo("bancos").subscribe(res => {
+
+    /*this.catalogService.getCatalogInfo("bancos").subscribe(res => {
       this.banks = res;
       this.catalogService.getCatalogInfo("cuentas-bancarias").subscribe(res => {
         this.accounts = res;
       });
       //this.payment_types = res;
-    });
+    });*/
 
-    this.catalogService
+    /*this.catalogService
       .getCatalogInfo("cuentas-bancaria-destino")
       .subscribe(res => {
         this.accounts_destination = res;
       });
-
+      */
     this.investmentProposalForm = this.formBuilder.group({
       monto: [
         this.inversionAmount,
         [
           Validators.required,
-          Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+          //Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
+          Validators.pattern("^[0-9,.]+$")
         ]
       ],
       tipo_pago: ["", Validators.required],
@@ -212,6 +247,21 @@ export class PaymentInfoComponent implements OnInit {
     return this.investmentProposalForm.controls;
   }
 
+  clearValor(value, tipoDato) {
+    value = parseFloat(value.toString().replace(",", ""));
+    return value;
+  }
+
+  public inputValidator(event: any) {
+    const pattern = /^[0-9]*$/;
+    //let inputChar = String.fromCharCode(event.charCode)
+
+    if (!pattern.test(event.target.value)) {
+      event.target.value = event.target.value.replace(/[^\d,.]+/g, "");
+      // invalid character, prevent input
+    }
+  }
+
   nameBankAccounts(id: string) {
     let bank;
     bank = this.banks.find(e => e.id_banco == id);
@@ -220,6 +270,7 @@ export class PaymentInfoComponent implements OnInit {
 
   sendPaymentInfo(form: any) {
     this.submitted = true;
+    this.inversionAmount = this.clearValor(this.inversionAmount, "decimal");
     if (!form.valid) {
       return false;
     }
@@ -235,11 +286,11 @@ export class PaymentInfoComponent implements OnInit {
         confirmButtonText: "Siguiente",
         cancelButtonText: "Cancelar",
         showLoaderOnConfirm: true,
-        inputValidator: value => {
-          if (!value) {
-            return "Debe ingresar un comentario";
-          }
-        },
+        //inputValidator: value => {
+        //  if (!value) {
+        //   return "Debe ingresar un comentario";
+        //}
+        //},
 
         preConfirm: comentario => {
           this.reviewProposal = {
@@ -250,96 +301,111 @@ export class PaymentInfoComponent implements OnInit {
         },
         allowOutsideClick: () => !Swal.isLoading()
       }).then(result => {
-        if (result.value) {
-          Swal.fire({
-            title: `<h3>Enviar información de pago</h3>`,
-            icon: "info",
-            html: `<div>Notificar a:</div>${this.generated_inputs_next}`,
-            confirmButtonText: "Enviar información",
-            showCancelButton: true,
-            cancelButtonText: "Cancelar",
-            showLoaderOnConfirm: true,
-
-            preConfirm: () => {
-              let array = [];
-
-              for (let i = 0; i < this.userListNext.length; i++) {
-                let html_input: HTMLInputElement = document.getElementById(
-                  "next-" + this.userListNext[i]
-                ) as HTMLInputElement;
-                let html_value: string = html_input.value;
-                if (html_input.checked == true) {
-                  array.push(html_value);
-                }
-              }
+        if (result.dismiss) {
+          Swal.close();
+        }
+
+        Swal.fire({
+          title: `<h3>Enviar información de pago</h3>`,
+          icon: "info",
+          html: `<div>Notificar a:</div>${this.generated_inputs_next}`,
+          confirmButtonText: "Enviar información",
+          showCancelButton: true,
+          cancelButtonText: "Cancelar",
+          showLoaderOnConfirm: true,
+
+          preConfirm: () => {
+            let array = [];
 
-              this.reviewProposal["notificar"] = array.toString();
-              this.paymentObject = {
-                monto: this.inversionAmount,
-                id_tipo_pago: +this.investmentProposalForm.value.tipo_pago,
-                id_cuenta_bancaria: +this.investmentProposalForm.value
-                  .cuenta_bancaria,
-
-                //fecha_pago: this.investmentProposalForm.value.fecha_pago.singleDate.formatted,
-                fecha_vencimiento: this.investmentProposalForm.value
-                  .fecha_vencimiento.singleDate.formatted,
-                id_inversion: +this.investmentProposalID
-              };
-
-              if (+this.investmentProposalForm.value.tipo_pago == 2) {
-                this.paymentObject[
-                  "emitir_nombre"
-                ] = this.investmentProposalForm.value.emitir_nombre;
-              } else if (+this.investmentProposalForm.value.tipo_pago == 3) {
-                this.paymentObject["id_cuenta_bancaria_destino"] = +this
-                  .investmentProposalForm.value.cuenta_bancaria_destino;
+            for (let i = 0; i < this.userListNext.length; i++) {
+              let html_input: HTMLInputElement = document.getElementById(
+                "next-" + this.userListNext[i].name
+              ) as HTMLInputElement;
+              let html_value: string = html_input.value;
+              if (html_input.checked == true) {
+                array.push(html_value);
               }
+            }
+            // http://localhost:8001/api/cuentas-bancarias?tipo=origen&id_inversion=51
+
+            this.reviewProposal["notificar"] = array.toString();
+            this.paymentObject = {
+              monto: this.inversionAmount,
+              id_tipo_pago: +this.investmentProposalForm.value.tipo_pago,
+              id_cuenta_bancaria: +this.investmentProposalForm.value
+                .cuenta_bancaria,
+
+              //fecha_pago: this.investmentProposalForm.value.fecha_pago.singleDate.formatted,
+              fecha_vencimiento: this.investmentProposalForm.value
+                .fecha_vencimiento.singleDate.formatted,
+              emitir_nombre: this.investmentProposalForm.value.emitir_nombre,
+              id_inversion: +this.investmentProposalID
+            };
 
-              this.investmentsService
-                .sendPaymentInfoProposalInvestment(
-                  this.investmentProposalID,
-                  this.paymentObject
-                )
-                .subscribe(
-                  success => {
-                    this.investmentsService
-                      .sendProposalInvestmentToNextStep(this.reviewProposal)
-                      .subscribe(
-                        success => {
-                          if (success) {
-                            Swal.fire({
-                              allowOutsideClick: false,
-                              icon: "success",
-                              showCancelButton: false,
-                              title: "Exito",
-                              confirmButtonText:
-                                "La requisicion de pago ha sido generada"
-                            }).then(result => {
-                              Swal.close();
-                              window.location.href = "#/investment-proposals";
-                            });
-                          }
-                        },
-                        err => {
-                          Swal.fire({
-                            icon: "error",
-                            title: "Error al guardar",
-                            text: err.message
-                          });
-                        }
-                      );
-                  },
-                  err => {
-                    Swal.fire({
-                      icon: "error",
-                      title: "Error al guardar",
-                      text: err.message
-                    });
-                  }
-                );
+            if (+this.investmentProposalForm.value.tipo_pago == 3) {
+              this.paymentObject["id_cuenta_bancaria_destino"] = +this
+                .investmentProposalForm.value.cuenta_bancaria_destino;
+            } else {
+              this.paymentObject["id_cuenta_bancaria_destino"] = null;
             }
+          }
+        }).then(result1 => {
+          if (result1.dismiss) {
+            return false;
+          }
+
+          Swal.fire({
+            allowOutsideClick: false,
+            title: "Espere por favor...",
+            icon: "info"
           });
-        }
+          Swal.showLoading();
+
+          this.investmentsService
+            .sendPaymentInfoProposalInvestment(
+              this.investmentProposalID,
+              this.paymentObject
+            )
+            .subscribe(
+              success => {
+                this.investmentsService
+                  .sendProposalInvestmentToNextStep(this.reviewProposal)
+                  .subscribe(
+                    success => {
+                      if (success) {
+                        Swal.fire({
+                          allowOutsideClick: false,
+                          icon: "success",
+                          showCancelButton: false,
+                          title: "Exito",
+                          confirmButtonText:
+                            "La requisicion de pago ha sido generada"
+                        }).then(result => {
+                          Swal.close();
+                          window.location.href = "#/investment-proposals";
+                        });
+                      }
+                    },
+                    err => {
+                      Swal.fire({
+                        icon: "error",
+                        title: "Error al guardar",
+                        text: err.message
+                      });
+                    }
+                  );
+              },
+              err => {
+                Swal.fire({
+                  icon: "error",
+                  title: "Error al guardar",
+                  text: err.message
+                });
+              }
+            );
+        });
+
+        //window.location.reload();
       });
     })();
   }

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

@@ -80,6 +80,15 @@
                       <h4>Fecha de vencimiento:</h4>
                       <div class="field">{{ fecha_vencimiento }}</div>
                     </div>
+
+                    <div class="col-sm-6">
+                      <h4>Descargar información del instrumento:</h4>
+                      <div class="field">
+                        <app-investment-print
+                          [investmentID]="investmentProposalID"
+                        ></app-investment-print>
+                      </div>
+                    </div>
                   </div>
                 </div>
 
@@ -98,14 +107,24 @@
                           type="file"
                           name="evidencia"
                           (change)="fileProgress($event)"
+                          [ngClass]="{
+                            'is-invalid': submitted && fileData == null
+                          }"
                         />
+                        <div
+                          *ngIf="submitted && fileData == null"
+                          class="invalid-feedback"
+                        >
+                          <div>
+                            Archivo requerido
+                          </div>
+                        </div>
                       </div>
-                      <br />
                       <div *ngIf="fileUploadProgress">
                         Progreso: {{ fileUploadProgress }}
                       </div>
                       <div class="image-preview mb-3" *ngIf="previewUrl">
-                        <img [src]="previewUrl" height="300" />
+                        <img [src]="previewUrl" height="300" width="300" />
                       </div>
 
                       <div class="mb-3" *ngIf="uploadedFilePath">
@@ -132,14 +151,13 @@
                               'is-invalid': submitted && f.fecha_pago.errors
                             }"
                           />
-                        </div>
-
-                        <div
-                          *ngIf="submitted && f.fecha_pago.errors"
-                          class="invalid-feedback"
-                        >
-                          <div *ngIf="f.fecha_pago.errors.required">
-                            Campo requerido
+                          <div
+                            *ngIf="submitted && f.fecha_pago.errors"
+                            class="invalid-feedback"
+                          >
+                            <div>
+                              Campo requerido
+                            </div>
                           </div>
                         </div>
                       </div>

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

@@ -76,6 +76,7 @@ export class PaymentRequirementComponent implements OnInit {
   generated_inputs_next: string;
   cuenta_bancaria_destino: any;
   emitir_nombre: any;
+  formData: any;
 
   constructor(
     private http: HttpClient,
@@ -104,7 +105,6 @@ export class PaymentRequirementComponent implements OnInit {
     this.investmentService
       .getAvailableUsers(this.investmentProposalID)
       .subscribe(res => {
-        console.log(res);
         this.userListPrevious = res["usuarios_previous"];
         this.generated_inputs_previous = "";
 
@@ -113,12 +113,34 @@ export class PaymentRequirementComponent implements OnInit {
 
         if (this.userListPrevious.length > 0) {
           for (let i = 0; i < this.userListPrevious.length; i++) {
-            this.generated_inputs_previous += `<div class='form-check form-check-inline'><input type='checkbox' class='form-check-input' id='previous-${this.userListPrevious[i]}' name='users' value='${this.userListPrevious[i]}'><label class='form-check-label' for='previous-${this.userListPrevious[i]}'>${this.userListPrevious[i]}</label></div>`;
+            if (this.userListPrevious[i].default_email == true) {
+              this.generated_inputs_previous += `<div class='form-check form-check-inline'><input type='checkbox' class='form-check-input' id='previous-${
+                this.userListPrevious[i].name
+              }' name='users' value='${
+                this.userListPrevious[i].name
+              }' checked='${
+                this.userListPrevious[i].default_email == "true" ? true : false
+              }' disabled='disabled'><label class='form-check-label' for='previous-${
+                this.userListPrevious[i].name
+              }'>${this.userListPrevious[i].name}</label></div>`;
+            } else {
+              this.generated_inputs_previous += `<div class='form-check form-check-inline'><input type='checkbox' class='form-check-input' id='previous-${this.userListPrevious[i].name}' name='users' value='${this.userListPrevious[i].name}'><label class='form-check-label' for='previous-${this.userListPrevious[i].name}'>${this.userListPrevious[i].name}</label></div>`;
+            }
           }
         }
         if (this.userListNext.length > 0) {
           for (let i = 0; i < this.userListNext.length; i++) {
-            this.generated_inputs_next += `<div class='form-check form-check-inline'><input type='checkbox' class='form-check-input' id='next-${this.userListNext[i]}' name='users' value='${this.userListNext[i]}'><label class='form-check-label' for='next-${this.userListNext[i]}'>${this.userListNext[i]}</label></div>`;
+            if (this.userListNext[i].default_email == true) {
+              this.generated_inputs_next += `<div class='form-check form-check-inline'><input type='checkbox' class='form-check-input' id='next-${
+                this.userListNext[i].name
+              }' name='users' value='${this.userListNext[i].name}' checked='${
+                this.userListNext[i].default_email == "true" ? true : false
+              }' disabled='disabled'><label class='form-check-label' for='next-${
+                this.userListNext[i].name
+              }'>${this.userListNext[i].name}</label></div>`;
+            } else {
+              this.generated_inputs_next += `<div class='form-check form-check-inline'><input type='checkbox' class='form-check-input' id='next-${this.userListNext[i].name}' name='users' value='${this.userListNext[i].name}'><label class='form-check-label' for='next-${this.userListNext[i].name}'>${this.userListNext[i].name}</label></div>`;
+            }
           }
         }
       });
@@ -175,7 +197,8 @@ export class PaymentRequirementComponent implements OnInit {
 
   onSubmit(form: any) {
     this.submitted = true;
-    if (!form.valid) {
+
+    if (!form.valid && this.fileData == null) {
       return false;
     }
 
@@ -195,137 +218,81 @@ export class PaymentRequirementComponent implements OnInit {
 
           for (let i = 0; i < this.userListNext.length; i++) {
             let html_input: HTMLInputElement = document.getElementById(
-              "next-" + this.userListNext[i]
+              "next-" + this.userListNext[i].name
             ) as HTMLInputElement;
             let html_value: string = html_input.value;
             if (html_input.checked == true) {
               array.push(html_value);
             }
           }
-          const formData = new FormData();
-          formData.append("id_inversion", this.investmentProposalID);
-          formData.append("evidencia", this.fileData);
-          formData.append("step", "next");
-          formData.append("comentario", form.value.comentario);
-          formData.append("notificar", array.toString());
+          this.formData = new FormData();
+          this.formData.append("id_inversion", this.investmentProposalID);
+          this.formData.append("evidencia", this.fileData);
+          this.formData.append("step", "next");
+          this.formData.append("comentario", form.value.comentario);
+          this.formData.append("notificar", array.toString());
 
           this.paymentObject = {
             fecha_pago: form.value.fecha_pago.singleDate.formatted,
             id_inversion: this.investmentProposalID
             //comentario:
           };
+        }
+      }).then(result1 => {
+        if (result1.dismiss) {
+          return false;
+        }
 
-          this.investmentsService
-            .updatePaymentInfoProposalInvestment(
-              this.investmentProposalID,
-              this.paymentObject
-            )
-            .subscribe(
-              success => {
-                this.investmentService
-                  .sendProposalInvestmentToNextStep(formData)
-                  .subscribe(
-                    success => {
-                      if (success) {
-                        Swal.fire({
-                          allowOutsideClick: false,
-                          icon: "success",
-                          showCancelButton: false,
-                          title: "Exito",
-                          confirmButtonText: "La propuesta ha sido liquidada"
-                        }).then(result => {
-                          Swal.close();
-                          window.location.href = "#/investment-proposals";
-                        });
-                      }
-                    },
-                    err => {
+        Swal.fire({
+          allowOutsideClick: false,
+          title: "Espere por favor...",
+          icon: "info"
+        });
+        Swal.showLoading();
+
+        this.investmentsService
+          .updatePaymentInfoProposalInvestment(
+            this.investmentProposalID,
+            this.paymentObject
+          )
+          .subscribe(
+            success => {
+              this.investmentService
+                .sendProposalInvestmentToNextStep(this.formData)
+                .subscribe(
+                  success => {
+                    if (success) {
                       Swal.fire({
-                        icon: "error",
-                        title: "Error en el servidor",
-                        text: err.message
+                        allowOutsideClick: false,
+                        icon: "success",
+                        showCancelButton: false,
+                        title: "Exito",
+                        confirmButtonText: "La propuesta ha sido liquidada"
+                      }).then(result => {
+                        Swal.close();
+                        window.location.href = "#/investment-proposals";
                       });
                     }
-                  );
-              },
-              err => {
-                Swal.fire({
-                  icon: "error",
-                  title: "Error en el servidor",
-                  text: err.message
-                });
-              }
-            );
-        }
+                  },
+                  err => {
+                    Swal.fire({
+                      icon: "error",
+                      title: "Error en el servidor",
+                      text: err.message
+                    });
+                  }
+                );
+            },
+            err => {
+              Swal.fire({
+                icon: "error",
+                title: "Error en el servidor",
+                text: err.message
+              });
+            }
+          );
       });
     })();
-
-    /*
-    this.submitted = true;
-    if (!form.valid) {
-      return false;
-    }
-
-    this.paymentObject = {
-      fecha_pago: form.value.fecha_pago.singleDate.formatted,
-      id_inversion: this.investmentProposalID
-      //comentario:
-    };
-
-    Swal.fire({
-      allowOutsideClick: false,
-      icon: "info",
-      text: "Espere por favor..."
-    });
-    Swal.showLoading();
-
-    const formData = new FormData();
-    formData.append("id_inversion", this.investmentProposalID);
-    formData.append("evidencia", this.fileData);
-    formData.append("step", "next");
-    formData.append("comentario", form.value.comentario);
-
-    this.investmentsService
-      .updatePaymentInfoProposalInvestment(
-        this.investmentProposalID,
-        this.paymentObject
-      )
-      .subscribe(
-        success => {
-          this.investmentService
-            .sendProposalInvestmentToNextStep(formData)
-            .subscribe(
-              success => {
-                if (success) {
-                  Swal.fire({
-                    allowOutsideClick: false,
-                    icon: "success",
-                    showCancelButton: false,
-                    title: "Exito",
-                    confirmButtonText: "La propuesta ha sido liquidada"
-                  }).then(result => {
-                    Swal.close();
-                    window.location.href = "#/investment-proposals";
-                  });
-                }
-              },
-              err => {
-                Swal.fire({
-                  icon: "error",
-                  title: "Error en el servidor",
-                  text: err.message
-                });
-              }
-            );
-        },
-        err => {
-          Swal.fire({
-            icon: "error",
-            title: "Error en el servidor",
-            text: err.message
-          });
-        }
-      );*/
   }
 
   sendPaymentInfo(form: any) {}

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

@@ -33,9 +33,21 @@
                 Resumen de la propuesta
               </h4>
             </div>
+
             <div class="card-body">
               <div class="align-container">
                 <ul class="timeline timeline-simple">
+                  <li class="timeline-inverted">
+                    <div class="timeline-badge"></div>
+                    <div class="timeline-panel">
+                      <div class="timeline-heading">
+                        <app-investment-print
+                          [investmentID]="investmentProposalID"
+                        ></app-investment-print>
+                      </div>
+                    </div>
+                  </li>
+
                   <li class="timeline-inverted">
                     <div class="timeline-badge"></div>
                     <div class="timeline-panel">
@@ -293,7 +305,7 @@
 
                         <a
                           title="Historico"
-                          class="btn btn-primary btn-custom-small"
+                          class="btn btn-dark btn-custom-small"
                           [routerLink]="[
                             '/investment-proposal',
                             investmentProposalID,

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

@@ -154,6 +154,9 @@ export class InvestmentProposalDetailComponent implements OnInit {
               "id_inversion_instrumento"
             ];
 
+          this.gInstrument["resultado_operacion"] =
+            res["result"]["id_inversion_instrumento"]["resultado_operacion"];
+
           this.gComplement = {
             tipo_mercado:
               res["result"]["id_tipo_mercado"] == null
@@ -352,7 +355,6 @@ export class InvestmentProposalDetailComponent implements OnInit {
           res => {
             this.logs = res["result"];
             this.logsExists = true;
-            console.log(this.logs);
           },
           error => {}
         );

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

@@ -120,7 +120,6 @@ export class ResultComponent implements OnInit {
     this.general = this.formDataService.getGeneralInfo();
     this.instrument = this.formDataService.getWork();
     this.complement = this.formDataService.getComplementInfo();
-    console.log(this.instrument);
     this.catalogService.getFinancialEntities().subscribe(res => {
       this.financials = res.find(
         e => e.id_entidad_financiera == this.general.casa
@@ -250,7 +249,9 @@ export class ResultComponent implements OnInit {
         this.inversion["codigo_instrumento"] == "EURB" ||
         this.inversion["codigo_instrumento"] == "CINV" ||
         this.inversion["codigo_instrumento"] == "FINV" ||
-        this.inversion["codigo_instrumento"] == "PBUR") &&
+        this.inversion["codigo_instrumento"] == "PBUR" ||
+        this.inversion["codigo_instrumento"] == "PPER" ||
+        this.inversion["codigo_instrumento"] == "PEMP") &&
       (this.instrument["proyecciones"] != undefined ||
         this.instrument["proyecciones"] != "")
     ) {
@@ -353,6 +354,10 @@ export class ResultComponent implements OnInit {
         },
         allowOutsideClick: () => !Swal.isLoading()
       }).then(result => {
+        if (result.dismiss) {
+          return false;
+        }
+
         Swal.fire({
           title: `<h3>Enviar a revisión propuesta de inversión</h3>`,
           icon: "info",
@@ -376,35 +381,57 @@ export class ResultComponent implements OnInit {
             }
 
             this.reviewProposal["notificar"] = array.toString();
+          }
+        }).then(result1 => {
+          if (result1.dismiss) {
+            return false;
+          }
 
-            this.investmentService
-              .sendReviewProposalInvestment(this.reviewProposal)
-              .subscribe(
-                success => {
-                  if (success) {
-                    Swal.fire({
-                      allowOutsideClick: false,
-                      icon: "success",
-                      showCancelButton: false,
-                      title: "Exito",
-                      confirmButtonText:
-                        "La propuesta ha sido enviada a revisión"
-                    }).then(result => {
-                      Swal.close();
-                      window.location.reload();
-                    });
-                  }
-                },
-                err => {
+          Swal.fire({
+            allowOutsideClick: false,
+            title: "Espere por favor...",
+            icon: "info"
+          });
+          Swal.showLoading();
+
+          this.investmentService
+            .sendReviewProposalInvestment(this.reviewProposal)
+            .subscribe(
+              success => {
+                if (success) {
+                  Swal.fire({
+                    allowOutsideClick: false,
+                    icon: "success",
+                    showCancelButton: false,
+                    title: "Exito",
+                    confirmButtonText: "La propuesta ha sido enviada a revisión"
+                  }).then(result => {
+                    Swal.close();
+                    window.location.reload();
+                  });
+                }
+              },
+              err => {
+                if (err.code == 405) {
+                  Swal.fire({
+                    icon: "error",
+                    title: "Operacion no permitida",
+                    text: err.message
+                  }).then(result => {
+                    Swal.close();
+                    window.location.href = "#/investment-proposals";
+                  });
+                } else {
                   Swal.fire({
                     icon: "error",
                     title: "Error al guardar",
                     text: err.message
                   });
                 }
-              );
-          }
+              }
+            );
         });
+
         //window.location.reload();
       });
     })();
@@ -494,6 +521,9 @@ export class ResultComponent implements OnInit {
         },
         allowOutsideClick: () => !Swal.isLoading()
       }).then(result => {
+        if (result.dismiss) {
+          return false;
+        }
         Swal.fire({
           title: `<h3>Finalizar propuesta de inversión</h3>`,
           icon: "info",
@@ -517,39 +547,61 @@ export class ResultComponent implements OnInit {
             }
 
             this.reviewProposal["notificar"] = array.toString();
+          }
+        }).then(result1 => {
+          if (result1.dismiss) {
+            return false;
+          }
 
-            this.investmentService
-              .sendReviewProposalInvestment(this.reviewProposal)
-              .subscribe(
-                success => {
-                  if (success) {
-                    Swal.fire({
-                      allowOutsideClick: false,
-                      icon: "success",
-                      showCancelButton: false,
-                      title: "Exito",
-                      confirmButtonText: "La propuesta ha sido finalizada"
-                    }).then(result => {
-                      Swal.close();
-                      window.location.reload();
-                    });
-                  }
-                },
-                err => {
+          Swal.fire({
+            allowOutsideClick: false,
+            title: "Espere por favor...",
+            icon: "info"
+          });
+          Swal.showLoading();
+
+          this.investmentService
+            .sendReviewProposalInvestment(this.reviewProposal)
+            .subscribe(
+              success => {
+                if (success) {
+                  Swal.fire({
+                    allowOutsideClick: false,
+                    icon: "success",
+                    showCancelButton: false,
+                    title: "Exito",
+                    confirmButtonText: "La propuesta ha sido finalizada"
+                  }).then(result => {
+                    Swal.close();
+                    window.location.reload();
+                  });
+                }
+              },
+              err => {
+                if (err.code == 405) {
+                  Swal.fire({
+                    icon: "error",
+                    title: "Operacion no permitida",
+                    text: err.message
+                  }).then(result => {
+                    Swal.close();
+                    window.location.href = "#/investment-proposals";
+                  });
+                } else {
                   Swal.fire({
                     icon: "error",
                     title: "Error al guardar",
                     text: err.message
                   });
                 }
-              );
-          }
+              }
+            );
         });
+
         //window.location.reload();
       });
     })();
   }
-
   // Verifica permisos para mostrar boton de edicion y/o envio a revision,
   // segun los permisos del usuario y el estado de la propuesta
   can_send_to_review(status: string) {

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

@@ -105,12 +105,36 @@ export class InvestmentProposalReviewComponent implements OnInit {
 
           if (this.userListPrevious.length > 0) {
             for (let i = 0; i < this.userListPrevious.length; i++) {
-              this.generated_inputs_previous += `<div class='form-check form-check-inline'><input type='checkbox' class='form-check-input' id='previous-${this.userListPrevious[i]}' name='users' value='${this.userListPrevious[i]}'><label class='form-check-label' for='previous-${this.userListPrevious[i]}'>${this.userListPrevious[i]}</label></div>`;
+              if (this.userListPrevious[i].default_email == true) {
+                this.generated_inputs_previous += `<div class='form-check form-check-inline'><input type='checkbox' class='form-check-input' id='previous-${
+                  this.userListPrevious[i].name
+                }' name='users' value='${
+                  this.userListPrevious[i].name
+                }' checked='${
+                  this.userListPrevious[i].default_email == "true"
+                    ? true
+                    : false
+                }' disabled='disabled'><label class='form-check-label' for='previous-${
+                  this.userListPrevious[i].name
+                }'>${this.userListPrevious[i].name}</label></div>`;
+              } else {
+                this.generated_inputs_previous += `<div class='form-check form-check-inline'><input type='checkbox' class='form-check-input' id='previous-${this.userListPrevious[i].name}' name='users' value='${this.userListPrevious[i].name}'><label class='form-check-label' for='previous-${this.userListPrevious[i].name}'>${this.userListPrevious[i].name}</label></div>`;
+              }
             }
           }
           if (this.userListNext.length > 0) {
             for (let i = 0; i < this.userListNext.length; i++) {
-              this.generated_inputs_next += `<div class='form-check form-check-inline'><input type='checkbox' class='form-check-input' id='next-${this.userListNext[i]}' name='users' value='${this.userListNext[i]}'><label class='form-check-label' for='next-${this.userListNext[i]}'>${this.userListNext[i]}</label></div>`;
+              if (this.userListNext[i].default_email == true) {
+                this.generated_inputs_next += `<div class='form-check form-check-inline'><input type='checkbox' class='form-check-input' id='next-${
+                  this.userListNext[i].name
+                }' name='users' value='${this.userListNext[i].name}' checked='${
+                  this.userListNext[i].default_email == "true" ? true : false
+                }' disabled='disabled'><label class='form-check-label' for='next-${
+                  this.userListNext[i].name
+                }'>${this.userListNext[i].name}</label></div>`;
+              } else {
+                this.generated_inputs_next += `<div class='form-check form-check-inline'><input type='checkbox' class='form-check-input' id='next-${this.userListNext[i].name}' name='users' value='${this.userListNext[i].name}'><label class='form-check-label' for='next-${this.userListNext[i].name}'>${this.userListNext[i].name}</label></div>`;
+              }
             }
           }
         });
@@ -352,171 +376,205 @@ export class InvestmentProposalReviewComponent implements OnInit {
 
   approve_proposal() {
     this.reviewProposal = undefined;
-    (async () => {
+
+    Swal.fire({
+      title: `<h3>Revisión de propuesta de inversión</h3>`,
+      icon: "info",
+      html: `<p style="text-align:left;">Comentario:</p>`,
+      input: "textarea",
+      showCancelButton: true,
+      confirmButtonText: "Siguiente",
+      cancelButtonText: "Cancelar",
+      showLoaderOnConfirm: true,
+
+      preConfirm: comentario => {
+        this.reviewProposal = {
+          id_inversion: this.investmentProposalID,
+          step: "next",
+          comentario: comentario
+        };
+      },
+      allowOutsideClick: () => !Swal.isLoading()
+    }).then(result => {
+      if (result.dismiss) {
+        return false;
+      }
+
       Swal.fire({
-        title: `<h3>Revisión propuesta de inversión</h3>`,
+        title: `<h3>Revisión de propuesta de inversión</h3>`,
         icon: "info",
-        html: `<p style="text-align:left;">Comentario:</p>`,
-        input: "textarea",
+        html: `<div>Notificar a:</div>${this.generated_inputs_next}`,
+        confirmButtonText: "Aprobar propuesta",
         showCancelButton: true,
-        confirmButtonText: "Siguiente",
         cancelButtonText: "Cancelar",
         showLoaderOnConfirm: true,
-        inputValidator: value => {
-          if (!value) {
-            return "Debe ingresar un comentario";
-          }
-        },
 
-        preConfirm: comentario => {
-          this.reviewProposal = {
-            id_inversion: this.investmentProposalID,
-            step: "next",
-            comentario: comentario
-          };
-        },
-        allowOutsideClick: () => !Swal.isLoading()
-      }).then(result => {
-        if (result.value) {
-          Swal.fire({
-            title: `<h3>Revisión propuesta de inversión</h3>`,
-            icon: "info",
-            html: `<div>Notificar a:</div>${this.generated_inputs_next}`,
-            confirmButtonText: "Aprobar propuesta",
-            showCancelButton: true,
-            cancelButtonText: "Cancelar",
-            showLoaderOnConfirm: true,
-
-            preConfirm: () => {
-              let array = [];
-
-              for (let i = 0; i < this.userListNext.length; i++) {
-                let html_input: HTMLInputElement = document.getElementById(
-                  "next-" + this.userListNext[i]
-                ) as HTMLInputElement;
-                let html_value: string = html_input.value;
-                if (html_input.checked == true) {
-                  array.push(html_value);
-                }
-              }
+        preConfirm: () => {
+          let array = [];
 
-              this.reviewProposal["notificar"] = array.toString();
-
-              this.investmentService
-                .sendReviewProposalInvestment(this.reviewProposal)
-                .subscribe(
-                  success => {
-                    if (success) {
-                      Swal.fire({
-                        allowOutsideClick: false,
-                        icon: "success",
-                        showCancelButton: false,
-                        title: "Exito",
-                        confirmButtonText: "La propuesta ha sido aprobada"
-                      }).then(result => {
-                        Swal.close();
-                        window.location.href = "#/investment-proposals";
-                      });
-                    }
-                  },
-                  err => {
-                    Swal.fire({
-                      icon: "error",
-                      title: "Error al guardar",
-                      text: err.message
-                    });
-                  }
-                );
+          for (let i = 0; i < this.userListNext.length; i++) {
+            let html_input: HTMLInputElement = document.getElementById(
+              "next-" + this.userListNext[i].name
+            ) as HTMLInputElement;
+            let html_value: string = html_input.value;
+            if (html_input.checked == true) {
+              array.push(html_value);
             }
-          });
+          }
+          this.reviewProposal["notificar"] = array.toString();
         }
+      }).then(result1 => {
+        if (result1.dismiss) {
+          return false;
+        }
+
+        Swal.fire({
+          allowOutsideClick: false,
+          title: "Espere por favor...",
+          icon: "info"
+        });
+        Swal.showLoading();
+
+        this.investmentService
+          .sendReviewProposalInvestment(this.reviewProposal)
+          .subscribe(
+            success => {
+              if (success) {
+                Swal.fire({
+                  allowOutsideClick: false,
+                  icon: "success",
+                  showCancelButton: false,
+                  title: "Exito",
+                  confirmButtonText: "La propuesta ha sido aprobada"
+                }).then(result => {
+                  Swal.close();
+                  window.location.href = "#/investment-proposals";
+                });
+              }
+            },
+            err => {
+              if (err.code == 405) {
+                Swal.fire({
+                  icon: "error",
+                  title: "Operacion no permitida",
+                  text: err.message
+                }).then(result => {
+                  Swal.close();
+                  window.location.href = "#/investment-proposals";
+                });
+              } else {
+                Swal.fire({
+                  icon: "error",
+                  title: "Error al guardar",
+                  text: err.message
+                });
+              }
+            }
+          );
       });
-    })();
+    });
   }
 
   dismiss_proposal() {
     this.reviewProposal = undefined;
-    (async () => {
+
+    Swal.fire({
+      title: `<h3>Revisión de propuesta de inversión</h3>`,
+      icon: "info",
+      html: `<p style="text-align:left;">Comentario:</p>`,
+      input: "textarea",
+      showCancelButton: true,
+      confirmButtonColor: "#C82333",
+      confirmButtonText: "Siguiente",
+      cancelButtonText: "Cancelar",
+      showLoaderOnConfirm: true,
+
+      preConfirm: comentario => {
+        this.reviewProposal = {
+          id_inversion: this.investmentProposalID,
+          step: "previous",
+          comentario: comentario
+        };
+      },
+      allowOutsideClick: () => !Swal.isLoading()
+    }).then(result => {
+      if (result.dismiss) {
+        return false;
+      }
+
       Swal.fire({
-        title: `<h3>Revisión propuesta de inversión</h3>`,
+        title: `<h3>Revisión de propuesta de inversión</h3>`,
         icon: "info",
-        html: `<p style="text-align:left;">Comentario:</p>`,
-        input: "textarea",
+        html: `<div>Notificar a:</div>${this.generated_inputs_previous}`,
         showCancelButton: true,
         confirmButtonColor: "#C82333",
-        confirmButtonText: "Siguiente",
+        confirmButtonText: "Rechazar propuesta",
         cancelButtonText: "Cancelar",
         showLoaderOnConfirm: true,
-        inputValidator: value => {
-          if (!value) {
-            return "Debe ingresar un comentario";
-          }
-        },
 
-        preConfirm: comentario => {
-          this.reviewProposal = {
-            id_inversion: this.investmentProposalID,
-            step: "previous",
-            comentario: comentario
-          };
-        },
-        allowOutsideClick: () => !Swal.isLoading()
-      }).then(result => {
-        if (result.value) {
-          Swal.fire({
-            title: `<h3>Revisión propuesta de inversión</h3>`,
-            icon: "info",
-            html: `<div>Notificar a:</div>${this.generated_inputs_previous}`,
-            confirmButtonText: "Rechazar propuesta",
-            showCancelButton: true,
-            confirmButtonColor: "#C82333",
-            cancelButtonText: "Cancelar",
-            showLoaderOnConfirm: true,
-
-            preConfirm: () => {
-              let array = [];
-
-              for (let i = 0; i < this.userListPrevious.length; i++) {
-                let html_input: HTMLInputElement = document.getElementById(
-                  "previous-" + this.userListPrevious[i]
-                ) as HTMLInputElement;
-                let html_value: string = html_input.value;
-                if (html_input.checked == true) {
-                  array.push(html_value);
-                }
-              }
+        preConfirm: () => {
+          let array = [];
 
-              this.reviewProposal["notificar"] = array.toString();
-
-              this.investmentService
-                .sendReviewProposalInvestment(this.reviewProposal)
-                .subscribe(
-                  success => {
-                    if (success) {
-                      Swal.fire({
-                        allowOutsideClick: false,
-                        icon: "success",
-                        showCancelButton: false,
-                        title: "Exito",
-                        confirmButtonText: "La propuesta ha sido rechazada"
-                      }).then(result => {
-                        Swal.close();
-                        window.location.href = "#/investment-proposals";
-                      });
-                    }
-                  },
-                  err => {
-                    Swal.fire({
-                      icon: "error",
-                      title: "Error al guardar",
-                      text: err.message
-                    });
-                  }
-                );
+          for (let i = 0; i < this.userListPrevious.length; i++) {
+            let html_input: HTMLInputElement = document.getElementById(
+              "previous-" + this.userListPrevious[i].name
+            ) as HTMLInputElement;
+            let html_value: string = html_input.value;
+            if (html_input.checked == true) {
+              array.push(html_value);
             }
-          });
+          }
+          this.reviewProposal["notificar"] = array.toString();
+        }
+      }).then(result1 => {
+        if (result1.dismiss) {
+          return false;
         }
+
+        Swal.fire({
+          allowOutsideClick: false,
+          title: "Espere por favor...",
+          icon: "info"
+        });
+        Swal.showLoading();
+
+        this.investmentService
+          .sendReviewProposalInvestment(this.reviewProposal)
+          .subscribe(
+            success => {
+              if (success) {
+                Swal.fire({
+                  allowOutsideClick: false,
+                  icon: "warning",
+                  showCancelButton: false,
+                  title: "Exito",
+                  confirmButtonText: "La propuesta ha sido rechazada"
+                }).then(result => {
+                  Swal.close();
+                  window.location.href = "#/investment-proposals";
+                });
+              }
+            },
+            err => {
+              if (err.code == 405) {
+                Swal.fire({
+                  icon: "error",
+                  title: "Operacion no permitida",
+                  text: err.message
+                }).then(result => {
+                  Swal.close();
+                  window.location.href = "#/investment-proposals";
+                });
+              } else {
+                Swal.fire({
+                  icon: "error",
+                  title: "Error al guardar",
+                  text: err.message
+                });
+              }
+            }
+          );
       });
-    })();
+    });
   }
 }

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

@@ -49,7 +49,7 @@
                         <h4>Valor participación:</h4>
                         <div class="field">
                           {{
-                            instrument_work.valor_participacion_porcentaje
+                            instrument_work.valor_participacion
                               | number: "1.2-4"
                           }}
                           %
@@ -249,6 +249,7 @@
                               <input
                                 type="text"
                                 formControlName="ingreso_bruto"
+                                [value]="group.get('ingreso_bruto').value | number: '1.2-4'"
                                 class="form-control"
                                 readonly
                               />
@@ -268,6 +269,7 @@
                               <input
                                 type="text"
                                 formControlName="ingreso_neto"
+                                [value]="group.get('ingreso_neto').value | number: '1.2-4'"
                                 class="form-control"
                                 readonly
                               />
@@ -288,9 +290,11 @@
                                 <i class="fas fa-percent"></i>
                               </p>
                               <input
-                                type="number"
+                                type="text"  
                                 formControlName="dividendo_porcentaje"
+                                [value]="group.get('dividendo_porcentaje').value | numberPipe" 
                                 class="form-control"
+                                (input)="inputValidator($event)"
                               />
                             </div>
                           </div>
@@ -299,7 +303,7 @@
                       <div class="costs-input-normal-container">
                         <div class="form-group">
                           <label for="rendimiento_porcentaje"
-                            >Rendimiento:
+                            >Rendimiento (%):
                           </label>
 
                           <div class="input-box-container">
@@ -308,9 +312,11 @@
                                 <i class="fas fa-percent"></i>
                               </p>
                               <input
-                                type="number"
+                                type="text"  
                                 formControlName="rendimiento_porcentaje"
+                                [value]="group.get('rendimiento_porcentaje').value | numberPipe" 
                                 class="form-control"
+                                (input)="inputValidator($event)"
                               />
                             </div>
                           </div>
@@ -328,6 +334,7 @@
                               <input
                                 type="number"
                                 formControlName="rendimiento"
+                                [value]="group.get('rendimiento').value | number: '1.2-4'"
                                 class="form-control"
                                 readonly
                               />

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

@@ -140,9 +140,43 @@ export class FINVCostsComponent implements OnInit {
       Swal.close();
     }, 1200);
   }
-
+  clearProyeccion(proyecciones,nombres,tipoDato){
+    let clearPro = []  
+ 
+     proyecciones.forEach(createNewProyeccion); 
+   
+    function createNewProyeccion(arrFila, index) {
+     nombres.forEach(loopNombres);
+    
+     function loopNombres(nombre, index) {
+ 
+       arrFila[nombre] = parseFloat(arrFila[nombre].toString().replace(",",""))        
+       } 
+       clearPro.push(arrFila)
+       
+     } 
+ 
+   return clearPro;
+   }
+ 
+   public inputValidator(event: any) {
+     //console.log(event.target.value);
+     const pattern = /^[0-9]*$/;   
+     //let inputChar = String.fromCharCode(event.charCode)
+     
+     if (!pattern.test(event.target.value)) {
+ 
+       event.target.value = event.target.value.replace(/[^\d,.]+/g, '');
+       // invalid character, prevent input
+ 
+     }
+     
+   }
   recalculateProjectionChanges() {
-    let objProjection = { proyecciones: this.form.value };
+    let nombresProyecciones = ["dividendo_porcentaje",
+                                "rendimiento_porcentaje"]
+    let clearPro = this.clearProyeccion(this.form.value,nombresProyecciones,"decimal")
+    let objProjection = { proyecciones: clearPro };
     Swal.fire({
       allowOutsideClick: false,
       icon: "info",

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

@@ -54,6 +54,14 @@
                           {{ instrument_work.valor_transado | number: "1.2-4" }}
                         </div>
                       </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Renta (%):</h4>
+                        <div class="field">
+                          {{
+                            instrument_work.renta_porcentaje | number: "1.2-4"
+                          }}%
+                        </div>
+                      </div>
                       <div class="col-lg-3 col-md-4 col-sm-6">
                         <h4>Precio porcentaje:</h4>
                         <div class="field">
@@ -231,6 +239,10 @@
                               <input
                                 type="text"
                                 formControlName="ingreso_bruto"
+                                [value]="
+                                  group.get('ingreso_bruto').value
+                                    | number: '1.2-4'
+                                "
                                 class="form-control"
                                 readonly
                               />
@@ -248,9 +260,13 @@
                                 <i class="fas fa-dollar-sign"></i>
                               </p>
                               <input
-                                type="number"
+                                type="text"
                                 formControlName="costo_cedeval"
+                                [value]="
+                                  group.get('costo_cedeval').value | numberPipe
+                                "
                                 class="form-control"
+                                (input)="inputValidator($event)"
                               />
                             </div>
                           </div>
@@ -268,9 +284,14 @@
                                 <i class="fas fa-dollar-sign"></i>
                               </p>
                               <input
-                                type="number"
+                                type="text"
                                 formControlName="costo_transferencia"
+                                [value]="
+                                  group.get('costo_transferencia').value
+                                    | numberPipe
+                                "
                                 class="form-control"
+                                (input)="inputValidator($event)"
                               />
                             </div>
                           </div>
@@ -286,9 +307,13 @@
                                 <i class="fas fa-dollar-sign"></i>
                               </p>
                               <input
-                                type="number"
+                                type="text"
                                 formControlName="costo_banco"
+                                [value]="
+                                  group.get('costo_banco').value | numberPipe
+                                "
                                 class="form-control"
+                                (input)="inputValidator($event)"
                               />
                             </div>
                           </div>
@@ -305,9 +330,13 @@
                                 <i class="fas fa-dollar-sign"></i>
                               </p>
                               <input
-                                type="number"
+                                type="text"
                                 formControlName="otros_costos"
+                                [value]="
+                                  group.get('otros_costos').value | numberPipe
+                                "
                                 class="form-control"
+                                (input)="inputValidator($event)"
                               />
                             </div>
                           </div>
@@ -326,6 +355,9 @@
                                 type="text"
                                 formControlName="renta"
                                 class="form-control"
+                                [value]="
+                                  group.get('renta').value | number: '1.2-4'
+                                "
                                 readonly
                               />
                             </div>
@@ -344,6 +376,10 @@
                               <input
                                 type="text"
                                 formControlName="ingreso_neto"
+                                [value]="
+                                  group.get('ingreso_neto').value
+                                    | number: '1.2-4'
+                                "
                                 class="form-control"
                                 readonly
                               />

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

@@ -111,94 +111,6 @@ export class PBURCostsComponent implements OnInit {
             this.instrument_work =
               res["result"]["id_inversion_instrumento"]["instrumento"];
             this.instrument_exists = true;
-
-            this.investmentProposalForm = this.formBuilder.group({
-              valor_par: [
-                !this.instrument_exists ? false : this.instrument_work.valor_par
-              ],
-              valor_nominal: [
-                !this.instrument_exists
-                  ? ""
-                  : this.instrument_work.valor_nominal,
-                [
-                  Validators.required,
-                  Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
-                ]
-              ],
-              otros_costos: [
-                !this.instrument_exists ? 0 : this.instrument_work.otros_costos,
-                [Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)]
-              ],
-              plazo: [
-                !this.instrument_exists ? "" : this.instrument_work.plazo,
-                [Validators.required]
-              ],
-              renta_porcentaje: [
-                !this.instrument_exists
-                  ? ""
-                  : this.instrument_work.renta_porcentaje,
-                [Validators.required]
-              ],
-              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]+)$/)
-                ]
-              ],
-              rendimiento_bruto: [
-                !this.instrument_exists
-                  ? ""
-                  : this.instrument_work.rendimiento_bruto,
-                [
-                  Validators.required,
-                  Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
-                ]
-              ],
-              /*formato_ingreso: [
-                !this.instrument_exists ? "" : this.instrument_work.formato_ingreso,
-                [Validators.required]
-              ],*/
-              fecha_liquidacion: [
-                !this.instrument_exists
-                  ? ""
-                  : this.instrument_work.fecha_liquidacion,
-
-                [Validators.required]
-              ],
-              fecha_vencimiento: [
-                !this.instrument_exists
-                  ? ""
-                  : this.instrument_work.fecha_vencimiento,
-
-                [Validators.required]
-              ],
-              fecha_operacion: [
-                !this.instrument_exists
-                  ? ""
-                  : this.instrument_work.fecha_operacion,
-
-                [Validators.required]
-              ],
-              fecha_ultima_cupon: [
-                !this.instrument_exists
-                  ? ""
-                  : this.instrument_work.fecha_ultima_cupon,
-
-                [Validators.required]
-              ]
-            });
           },
           err => {}
         );
@@ -229,9 +141,48 @@ export class PBURCostsComponent implements OnInit {
       Swal.close();
     }, 1200);
   }
+  clearProyeccion(proyecciones, nombres, tipoDato) {
+    let clearPro = [];
+
+    proyecciones.forEach(createNewProyeccion);
+
+    function createNewProyeccion(arrFila, index) {
+      nombres.forEach(loopNombres);
+
+      function loopNombres(nombre, index) {
+        arrFila[nombre] = parseFloat(
+          arrFila[nombre].toString().replace(",", "")
+        );
+      }
+      clearPro.push(arrFila);
+    }
+
+    return clearPro;
+  }
+
+  public inputValidator(event: any) {
+    //console.log(event.target.value);
+    const pattern = /^[0-9]*$/;
+    //let inputChar = String.fromCharCode(event.charCode)
 
+    if (!pattern.test(event.target.value)) {
+      event.target.value = event.target.value.replace(/[^\d,.]+/g, "");
+      // invalid character, prevent input
+    }
+  }
   recalculateProjectionChanges() {
-    let objProjection = { proyecciones: this.form.value };
+    let nombresProyecciones = [
+      "costo_transferencia",
+      "costo_cedeval",
+      "costo_banco",
+      "otros_costos"
+    ];
+    let clearPro = this.clearProyeccion(
+      this.form.value,
+      nombresProyecciones,
+      "decimal"
+    );
+    let objProjection = { proyecciones: clearPro };
     Swal.fire({
       allowOutsideClick: false,
       icon: "info",

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

@@ -0,0 +1,382 @@
+<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">Préstamos empresariales</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 proyecciones para el préstamo empresarial
+              </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>Valor nominal:</h4>
+                        <div class="field">
+                          $USD
+                          {{ instrument_work.monto_prestamo | number: "1.2-4" }}
+                        </div>
+                      </div>
+
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Monto préstamo:</h4>
+                        <div class="field">
+                          $USD
+                          {{ instrument_work.monto_prestamo | number: "1.2-4" }}
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Tasa (%):</h4>
+                        <div class="field">
+                          {{
+                            instrument_work.tasa_porcentaje | number: "1.2-4"
+                          }}%
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>IVA (%):</h4>
+                        <div class="field">
+                          {{
+                            instrument_work.iva_porcentaje | number: "1.2-4"
+                          }}%
+                        </div>
+                      </div>
+
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>IVA ($):</h4>
+                        <div class="field">
+                          $USD {{ instrument_work.iva | number: "1.2-4" }}
+                        </div>
+                      </div>
+
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Comisión desembolso (%):</h4>
+                        <div class="field">
+                          {{
+                            instrument_work.comision_desembolso_porcentaje
+                              | number: "1.2-4"
+                          }}%
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Comisión desembolso ($):</h4>
+                        <div class="field">
+                          $USD
+                          {{
+                            instrument_work.comision_desembolso
+                              | number: "1.2-4"
+                          }}
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Plazo:</h4>
+                        <div class="field">
+                          {{ instrument_work.plazo | number: "1.2-4" }}
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Fecha de operacion:</h4>
+                        <div class="field">
+                          {{ instrument_work.fecha_operacion }}
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Fecha de 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"
+                                [value]="
+                                  group.get('ingreso_bruto').value
+                                    | number: '1.2-4'
+                                "
+                                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"
+                                [value]="
+                                  group.get('ingreso_neto').value
+                                    | number: '1.2-4'
+                                "
+                                class="form-control"
+                                readonly
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="costs-input-normal-container">
+                        <div class="form-group">
+                          <label for="tasa_porcentaje">Tasa: </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i class="fas fa-percent"></i>
+                              </p>
+                              <input
+                                type="text"
+                                formControlName="tasa_porcentaje"
+                                [value]="
+                                  group.get('tasa_porcentaje').value
+                                    | numberPipe
+                                "
+                                (input)="inputValidator($event)"
+                                class="form-control"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="costs-input-normal-container">
+                        <div class="form-group">
+                          <label for="amortizacion_capital"
+                            >Amortización capital:
+                          </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i class="fas fa-dollar-sign"></i>
+                              </p>
+                              <input
+                                type="text"
+                                formControlName="amortizacion_capital"
+                                [value]="
+                                  group.get('amortizacion_capital').value
+                                    | numberPipe
+                                "
+                                (input)="inputValidator($event)"
+                                class="form-control"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="costs-input-normal-container">
+                        <div class="form-group">
+                          <label for="monto_recibir">Monto a recibir: </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i class="fas fa-dollar-sign"></i>
+                              </p>
+                              <input
+                                type="text"
+                                formControlName="monto_recibir"
+                                [value]="
+                                  group.get('monto_recibir').value
+                                    | number: '1.2-4'
+                                "
+                                class="form-control"
+                                readonly
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div class="costs-input-normal-container">
+                        <div class="form-group">
+                          <label for="iva">IVA: </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i class="fas fa-dollar-sign"></i>
+                              </p>
+                              <input
+                                type="text"
+                                formControlName="iva"
+                                [value]="
+                                  group.get('iva').value | number: '1.2-4'
+                                "
+                                class="form-control"
+                                readonly
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="costs-input-normal-container">
+                        <div class="form-group">
+                          <label for="capital_restante"
+                            >Capital restante:
+                          </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i class="fas fa-dollar-sign"></i>
+                              </p>
+                              <input
+                                type="text"
+                                formControlName="capital_restante"
+                                [value]="
+                                  group.get('capital_restante').value
+                                    | number: '1.2-4'
+                                "
+                                class="form-control"
+                                readonly
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <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/pemp/pemp.costs.component.ts

@@ -0,0 +1,259 @@
+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-pemp-costs",
+  templateUrl: "./pemp.costs.component.html"
+  //styleUrls: ["./dap.costs.component.scss"]
+})
+export class PEMPCostsComponent implements OnInit {
+  helper = new JwtHelperService();
+
+  title: string = "Proyecciones para préstamos empresariales";
+
+  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;
+          },
+          err => {}
+        );
+
+      this.investmentsService
+        .getProposalInvestment(this.investmentProposalID)
+        .subscribe(
+          res => {
+            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);
+  }
+  clearProyeccion(proyecciones,nombres,tipoDato){
+    let clearPro = []  
+ 
+     proyecciones.forEach(createNewProyeccion); 
+   
+    function createNewProyeccion(arrFila, index) {
+     nombres.forEach(loopNombres);
+    
+     function loopNombres(nombre, index) {
+ 
+       arrFila[nombre] = parseFloat(arrFila[nombre].toString().replace(",",""))        
+       } 
+       clearPro.push(arrFila)
+       
+     } 
+ 
+   return clearPro;
+   }
+ 
+   public inputValidator(event: any) {
+     //console.log(event.target.value);
+     const pattern = /^[0-9]*$/;   
+     //let inputChar = String.fromCharCode(event.charCode)
+     
+     if (!pattern.test(event.target.value)) {
+ 
+       event.target.value = event.target.value.replace(/[^\d,.]+/g, '');
+       // invalid character, prevent input
+ 
+     }
+     
+   }
+  recalculateProjectionChanges() {
+    let nombresProyecciones = ["tasa_porcentaje",
+                              "amortizacion_capital"]
+    let clearPro = this.clearProyeccion(this.form.value,nombresProyecciones,"decimal")
+    let objProjection = { proyecciones: clearPro };
+    Swal.fire({
+      allowOutsideClick: false,
+      icon: "info",
+      text: "Espere por favor..."
+    });
+    Swal.showLoading();
+
+    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),
+      tasa_porcentaje: new FormControl(item.tasa_porcentaje),
+      amortizacion_capital: new FormControl(item.amortizacion_capital),
+      monto_recibir: new FormControl(item.monto_recibir),
+      iva: new FormControl(item.iva),
+      capital_restante: new FormControl(item.capital_restante)
+    });
+  }
+}

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

@@ -0,0 +1,499 @@
+<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">Préstamos personales</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 proyecciones para el préstamo personal
+              </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>Nombre deudor:</h4>
+                        <div class="field">
+                          
+                          {{ instrument_work.nombre_deudor }}
+                        </div>
+                      </div>
+                      
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Número deudor:</h4>
+                        <div class="field">
+                          
+                          {{ instrument_work.numero_deudor }}
+                        </div>
+                      </div>
+
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Monto préstamo:</h4>
+                        <div class="field">
+                          $USD
+                          {{ instrument_work.monto_prestamo | number: "1.2-4" }}
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Cuota sin seguros:</h4>
+                        <div class="field">
+                          $USD
+                          {{ instrument_work.cuota_sin_seguros | number: "1.2-4" }}
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Tasa (%):</h4>
+                        <div class="field">
+                          {{
+                            instrument_work.tasa_porcentaje | number: "1.2-4"
+                          }}%
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>IVA (%):</h4>
+                        <div class="field">
+                          {{
+                            instrument_work.iva_porcentaje | number: "1.2-4"
+                          }}%
+                        </div>
+                      </div>
+     
+
+
+
+
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Plazo gracia:</h4>
+                        <div class="field">
+                          {{ instrument_work.plazo_gracia | number: "1.2-4" }}
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Fecha de otorgamiento:</h4>
+                        <div class="field">
+                          {{ instrument_work.fecha_otorgamiento }}
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Fecha de gracia:</h4>
+                        <div class="field">
+                          {{ instrument_work.fecha_gracia }}
+                        </div>
+                      </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Fecha de vencimiento:</h4>
+                        <div class="field">
+                          {{ instrument_work.fecha_fin_otorgamiento }}
+                        </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="tasa_porcentaje">Tasa: </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i class="fas fa-percent"></i>
+                              </p>
+                              <input
+                                type="text"
+                                formControlName="tasa_porcentaje"
+                                [value]="group.get('tasa_porcentaje').value | numberPipe" 
+                                class="form-control"
+                                (input)="inputValidator($event)"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div class="costs-input-normal-container">
+                        <div class="form-group">
+                          <label for="saldo_inicial">Saldo inicial: </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i class="fas fa-dollar-sign"></i>
+                              </p>
+                              <input
+                                type="text"
+                                formControlName="saldo_inicial"
+                                [value]="group.get('saldo_inicial').value | number: '1.2-4'"
+                                class="form-control"
+                                readonly
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div class="costs-input-normal-container">
+                        <div class="form-group">
+                          <label for="pago_cuota">Pago cuota: </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i class="fas fa-dollar-sign"></i>
+                              </p>
+                              <input
+                                type="text"
+                                formControlName="pago_cuota"
+                                [value]="group.get('pago_cuota').value | number: '1.2-4'"
+                                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"
+                                [value]="group.get('ingreso_bruto').value | number: '1.2-4'"
+                                class="form-control"
+                                readonly
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div class="costs-input-normal-container">
+                        <div class="form-group">
+                          <label for="iva_interes">IVA ($): </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i class="fas fa-dollar-sign"></i>
+                              </p>
+                              <input
+                                type="text"
+                                formControlName="iva_interes"
+                                [value]="group.get('iva_interes').value | number: '1.2-4'"
+                                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"
+                                [value]="group.get('ingreso_neto').value | number: '1.2-4'"
+                                class="form-control"
+                                readonly
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div class="costs-input-normal-container">
+                        <div class="form-group">
+                          <label for="abono_capital">Abono capital: </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i class="fas fa-dollar-sign"></i>
+                              </p>
+                              <input
+                                type="text"
+                                formControlName="abono_capital"
+                                [value]="group.get('abono_capital').value | number: '1.2-4'"
+                                class="form-control"
+                                readonly
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div class="costs-input-normal-container">
+                        <div class="form-group">
+                          <label for="capital_restante"
+                            >Capital restante:
+                          </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i class="fas fa-dollar-sign"></i>
+                              </p>
+                              <input
+                                type="text"
+                                formControlName="capital_restante"
+                                [value]="group.get('capital_restante').value | number: '1.2-4'"
+                                class="form-control"
+                                readonly
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div class="costs-input-normal-container">
+                        <div class="form-group">
+                          <label for="pago_seguro_dano"
+                            >Pago seguro daño:
+                          </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i class="fas fa-dollar-sign"></i>
+                              </p>
+                              <input
+                                type="text"
+                                formControlName="pago_seguro_dano"
+                                [value]="group.get('pago_seguro_dano').value | numberPipe" 
+                                class="form-control"
+                                (input)="inputValidator($event)"
+                                class="form-control"
+                                
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="costs-input-normal-container">
+                        <div class="form-group">
+                          <label for="pago_seguro_vivienda"
+                            >Pago seguro vivienda:
+                          </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i class="fas fa-dollar-sign"></i>
+                              </p>
+                              <input
+                                type="text"
+                                formControlName="pago_seguro_vivienda"
+                                [value]="group.get('pago_seguro_vivienda').value | numberPipe" 
+                                class="form-control"
+                                (input)="inputValidator($event)"
+                                class="form-control"
+                                
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div class="costs-input-normal-container">
+                        <div class="form-group">
+                          <label for="total_cuota">Total cuota: </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i class="fas fa-dollar-sign"></i>
+                              </p>
+                              <input
+                                type="text"
+                                formControlName="total_cuota"
+                                [value]="group.get('total_cuota').value | number: '1.2-4'"
+                                class="form-control"
+                                readonly
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div class="costs-input-normal-container">
+                        <div class="form-group">
+                          <label for="amortizacion_capital"
+                            >Amortización capital:
+                          </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i class="fas fa-dollar-sign"></i>
+                              </p>
+                              <input
+                                type="text"
+                                formControlName="amortizacion_capital"
+                                [value]="group.get('amortizacion_capital').value | numberPipe" 
+                                class="form-control"
+                                (input)="inputValidator($event)"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="costs-input-normal-container">
+                        <div class="form-group">
+                          <label for="total_recibir">Total a recibir: </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i class="fas fa-dollar-sign"></i>
+                              </p>
+                              <input
+                                type="text"
+                                formControlName="total_recibir"
+                                [value]="group.get('total_recibir').value | number: '1.2-4'"
+                                class="form-control"
+                                readonly
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <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/pper/pper.costs.component.ts

@@ -0,0 +1,267 @@
+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-pper-costs",
+  templateUrl: "./pper.costs.component.html"
+  //styleUrls: ["./dap.costs.component.scss"]
+})
+export class PPERCostsComponent implements OnInit {
+  helper = new JwtHelperService();
+
+  title: string = "Proyecciones para préstamos personales";
+
+  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;
+          },
+          err => {}
+        );
+
+      this.investmentsService
+        .getProposalInvestment(this.investmentProposalID)
+        .subscribe(
+          res => {
+            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);
+  }
+  clearProyeccion(proyecciones,nombres,tipoDato){
+    let clearPro = []  
+ 
+     proyecciones.forEach(createNewProyeccion); 
+   
+    function createNewProyeccion(arrFila, index) {
+     nombres.forEach(loopNombres);
+    
+     function loopNombres(nombre, index) {
+ 
+       arrFila[nombre] = parseFloat(arrFila[nombre].toString().replace(",",""))        
+       } 
+       clearPro.push(arrFila)
+       
+     } 
+ 
+   return clearPro;
+   }
+ 
+   public inputValidator(event: any) {
+     //console.log(event.target.value);
+     const pattern = /^[0-9]*$/;   
+     //let inputChar = String.fromCharCode(event.charCode)
+     
+     if (!pattern.test(event.target.value)) {
+ 
+       event.target.value = event.target.value.replace(/[^\d,.]+/g, '');
+       // invalid character, prevent input
+ 
+     }
+     
+   }
+  recalculateProjectionChanges() {
+    let nombresProyecciones = ["tasa_porcentaje",
+                                "amortizacion_capital",
+                                 "pago_seguro_dano",
+                                 "pago_seguro_vivienda"]
+    let clearPro = this.clearProyeccion(this.form.value,nombresProyecciones,"decimal")
+    let objProjection = { proyecciones: clearPro };
+    Swal.fire({
+      allowOutsideClick: false,
+      icon: "info",
+      text: "Espere por favor..."
+    });
+    Swal.showLoading();
+
+    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),
+      tasa_porcentaje: new FormControl(item.tasa_porcentaje),
+      saldo_inicial: new FormControl(item.saldo_inicial),
+      pago_cuota: new FormControl(item.pago_cuota),
+      ingreso_bruto: new FormControl(item.ingreso_bruto),
+      iva_interes: new FormControl(item.iva_interes),
+      ingreso_neto: new FormControl(item.ingreso_neto),
+      abono_capital: new FormControl(item.abono_capital),
+      capital_restante: new FormControl(item.capital_restante),
+      pago_seguro_dano: new FormControl(item.pago_seguro_dano),
+      pago_seguro_vivienda: new FormControl(item.pago_seguro_vivienda),
+      total_cuota: new FormControl(item.total_cuota),
+      amortizacion_capital: new FormControl(item.amortizacion_capital),
+      total_recibir: new FormControl(item.total_recibir)
+    });
+  }
+}

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

@@ -47,6 +47,7 @@
                           {{ 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">
@@ -54,6 +55,14 @@
                           {{ instrument_work.valor_transado | number: "1.2-4" }}
                         </div>
                       </div>
+                      <div class="col-lg-3 col-md-4 col-sm-6">
+                        <h4>Renta (%):</h4>
+                        <div class="field">
+                          {{
+                            instrument_work.renta_porcentaje | number: "1.2-4"
+                          }}%
+                        </div>
+                      </div>
                       <div class="col-lg-3 col-md-4 col-sm-6">
                         <h4>Precio porcentaje:</h4>
                         <div class="field">
@@ -231,6 +240,10 @@
                               <input
                                 type="text"
                                 formControlName="ingreso_bruto"
+                                [value]="
+                                  group.get('ingreso_bruto').value
+                                    | number: '1.2-4'
+                                "
                                 class="form-control"
                                 readonly
                               />
@@ -248,9 +261,13 @@
                                 <i class="fas fa-dollar-sign"></i>
                               </p>
                               <input
-                                type="number"
+                                type="text"
                                 formControlName="costo_cedeval"
+                                [value]="
+                                  group.get('costo_cedeval').value | numberPipe
+                                "
                                 class="form-control"
+                                (input)="inputValidator($event)"
                               />
                             </div>
                           </div>
@@ -268,9 +285,14 @@
                                 <i class="fas fa-dollar-sign"></i>
                               </p>
                               <input
-                                type="number"
+                                type="text"
                                 formControlName="costo_transferencia"
+                                [value]="
+                                  group.get('costo_transferencia').value
+                                    | numberPipe
+                                "
                                 class="form-control"
+                                (input)="inputValidator($event)"
                               />
                             </div>
                           </div>
@@ -286,9 +308,13 @@
                                 <i class="fas fa-dollar-sign"></i>
                               </p>
                               <input
-                                type="number"
+                                type="text"
                                 formControlName="costo_banco"
+                                [value]="
+                                  group.get('costo_banco').value | numberPipe
+                                "
                                 class="form-control"
+                                (input)="inputValidator($event)"
                               />
                             </div>
                           </div>
@@ -305,9 +331,13 @@
                                 <i class="fas fa-dollar-sign"></i>
                               </p>
                               <input
-                                type="number"
+                                type="text"
                                 formControlName="otros_costos"
+                                [value]="
+                                  group.get('otros_costos').value | numberPipe
+                                "
                                 class="form-control"
+                                (input)="inputValidator($event)"
                               />
                             </div>
                           </div>
@@ -325,6 +355,9 @@
                               <input
                                 type="text"
                                 formControlName="renta"
+                                [value]="
+                                  group.get('renta').value | number: '1.2-4'
+                                "
                                 class="form-control"
                                 readonly
                               />
@@ -344,6 +377,10 @@
                               <input
                                 type="text"
                                 formControlName="ingreso_neto"
+                                [value]="
+                                  group.get('ingreso_neto').value
+                                    | number: '1.2-4'
+                                "
                                 class="form-control"
                                 readonly
                               />

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

@@ -28,7 +28,8 @@ import {
 })
 export class VCNCostsComponent implements OnInit {
   helper = new JwtHelperService();
-
+  price: string;
+  value: any;
   title: string = "Costos para valores comerciales";
 
   displayedColumns: string[] = [
@@ -111,94 +112,6 @@ export class VCNCostsComponent implements OnInit {
             this.instrument_work =
               res["result"]["id_inversion_instrumento"]["instrumento"];
             this.instrument_exists = true;
-
-            this.investmentProposalForm = this.formBuilder.group({
-              valor_par: [
-                !this.instrument_exists ? false : this.instrument_work.valor_par
-              ],
-              valor_nominal: [
-                !this.instrument_exists
-                  ? ""
-                  : this.instrument_work.valor_nominal,
-                [
-                  Validators.required,
-                  Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
-                ]
-              ],
-              otros_costos: [
-                !this.instrument_exists ? 0 : this.instrument_work.otros_costos,
-                [Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)]
-              ],
-              plazo: [
-                !this.instrument_exists ? "" : this.instrument_work.plazo,
-                [Validators.required]
-              ],
-              renta_porcentaje: [
-                !this.instrument_exists
-                  ? ""
-                  : this.instrument_work.renta_porcentaje,
-                [Validators.required]
-              ],
-              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]+)$/)
-                ]
-              ],
-              rendimiento_bruto: [
-                !this.instrument_exists
-                  ? ""
-                  : this.instrument_work.rendimiento_bruto,
-                [
-                  Validators.required,
-                  Validators.pattern(/^[+]?([0-9]+(?:[\.][0-9]*)?|\.[0-9]+)$/)
-                ]
-              ],
-              /*formato_ingreso: [
-                !this.instrument_exists ? "" : this.instrument_work.formato_ingreso,
-                [Validators.required]
-              ],*/
-              fecha_liquidacion: [
-                !this.instrument_exists
-                  ? ""
-                  : this.instrument_work.fecha_liquidacion,
-
-                [Validators.required]
-              ],
-              fecha_vencimiento: [
-                !this.instrument_exists
-                  ? ""
-                  : this.instrument_work.fecha_vencimiento,
-
-                [Validators.required]
-              ],
-              fecha_operacion: [
-                !this.instrument_exists
-                  ? ""
-                  : this.instrument_work.fecha_operacion,
-
-                [Validators.required]
-              ],
-              fecha_ultima_cupon: [
-                !this.instrument_exists
-                  ? ""
-                  : this.instrument_work.fecha_ultima_cupon,
-
-                [Validators.required]
-              ]
-            });
           },
           err => {}
         );
@@ -229,9 +142,50 @@ export class VCNCostsComponent implements OnInit {
       Swal.close();
     }, 1200);
   }
+  clearProyeccion(proyecciones, nombres, tipoDato) {
+    let clearPro = [];
+
+    proyecciones.forEach(createNewProyeccion);
+
+    function createNewProyeccion(arrFila, index) {
+      nombres.forEach(loopNombres);
+
+      function loopNombres(nombre, index) {
+        arrFila[nombre] = parseFloat(
+          arrFila[nombre].toString().replace(",", "")
+        );
+      }
+      clearPro.push(arrFila);
+    }
+
+    return clearPro;
+  }
+
+  public inputValidator(event: any) {
+    //console.log(event.target.value);
+    const pattern = /^[0-9]*$/;
+    //let inputChar = String.fromCharCode(event.charCode)
+
+    if (!pattern.test(event.target.value)) {
+      event.target.value = event.target.value.replace(/[^\d,.]+/g, "");
+      // invalid character, prevent input
+    }
+  }
 
   recalculateProjectionChanges() {
-    let objProjection = { proyecciones: this.form.value };
+    let nombresProyecciones = [
+      "costo_transferencia",
+      "costo_cedeval",
+      "costo_banco",
+      "otros_costos"
+    ];
+    let clearPro = this.clearProyeccion(
+      this.form.value,
+      nombresProyecciones,
+      "decimal"
+    );
+    let objProjection = { proyecciones: clearPro };
+
     Swal.fire({
       allowOutsideClick: false,
       icon: "info",
@@ -253,6 +207,7 @@ export class VCNCostsComponent implements OnInit {
           this.proyecciones.pop();
           this.form.clear();
           this.form = new FormArray(this.buildForm(this.proyecciones));
+
           Swal.close();
           //window.location.reload();
         },

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

@@ -75,18 +75,23 @@ export class InvestmentsComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.investmentsService.getProposalInvestmentsList().subscribe(
+    this.investmentsService.getProposalInvestmentsList("portafolio").subscribe(
       ans => {
         this.listProposals = ans.result;
-
-        this.listProposals = this.listProposals.filter(
-          proposals =>
-            proposals["id_estado_inversion"] != null &&
-            proposals["id_estado_inversion"]["codigo"] == "FINAL"
-        );
-
         this.dataSource.data = this.listProposals;
         this.dataSource.paginator = this.paginator;
+        this.dataSource.sortingDataAccessor = (item, property) => {
+          switch (property) {
+            case "id_inversion_instrumento":
+              return item.id_inversion_instrumento.id_tipo_instrumento.nombre;
+            case "id_estado_inversion":
+              return item.id_estado_inversion.nombre;
+            case "id_empresa":
+              return item.id_empresa.nombre;
+            default:
+              return item[property];
+          }
+        };
         this.dataSource.sort = this.sort;
       },
       err => {
@@ -136,6 +141,8 @@ export class InvestmentsComponent implements OnInit {
         }
         break;
       case "FINV":
+      case "PEMP":
+      case "PPER":
         return true;
       default:
         return false;

src/app/components/plugins/investment-print/investment-print.html

@@ -0,0 +1,9 @@
+<button
+  (click)="generatePdf('download')"
+  class="btn btn-primary btn-custom-small "
+>
+  <i class="material-icons">cloud_download</i>
+  <span>
+    Resumen de propuesta de inversión
+  </span>
+</button>

src/app/components/profile/profile.component.html

@@ -1,16 +1,119 @@
-<h2 class="floating-title">{{title}}</h2>
+<h2 class="floating-title">{{ title }}</h2>
 
 <div class="main-content">
-  
   <div class="container-fluid">
+    <div class="row justify-content-center">
+      <div class="col-12">
+        <div class="align-container">
+          <div class="card">
+            <div class="card-header">
+              <div class="row align-items-center">
+                <div class="col-8">
+                  <h3 class="mb-0">Editar perfil</h3>
+                </div>
+              </div>
+            </div>
+            <div class="card-body">
+              <form
+                class="form-auth-small ng-untouched ng-pristine ng-valid"
+                [formGroup]="userForm"
+              >
+                <h6 class="heading-small text-muted mb-4">
+                  Información de usuario
+                </h6>
+                <div class="pl-lg-4">
+                  <div class="row">
+                    <div class="col-lg-12">
+                      <div class="hint-wrapper">
+                        <small class="hint">
+                          <i class="fas fa-exclamation-circle"></i>
+                          La contraseña debe contener letras mayusculas,
+                          minusculas, al menos un número y un símbolo.
+                        </small>
+                      </div>
 
-    <div class="row">
-      <div class="col-lg-12 col-md-12 col-sm-12">
-        <div class="card dark-yellow-skin bg-gradient-danger card-img-holder text-white profile">
-          <div class="card-body">
-            <img alt="circle-image" class="card-img-absolute" src="assets/img/waves-opt.png">
-            <h4 class="font-weight-normal mb-3">Administrador</h4>
-            <h2 class="mb-3">{{email}}</h2>
+                      <div class="form-group">
+                        <label for="old_password">Contraseña vieja</label>
+                        <input
+                          type="password"
+                          class="form-control"
+                          formControlName="old_password"
+                          [ngClass]="{
+                            'is-invalid': submitted && f.old_password.errors
+                          }"
+                        />
+                        <div
+                          *ngIf="submitted && f.old_password.errors"
+                          class="invalid-feedback"
+                        >
+                          <div *ngIf="f.old_password.errors.required">
+                            Campo requerido
+                          </div>
+                        </div>
+                      </div>
+                      <div class="form-group">
+                        <label for="new_password">Nueva contraseña</label>
+                        <input
+                          type="password"
+                          class="form-control"
+                          formControlName="new_password"
+                          [ngClass]="{
+                            'is-invalid': submitted && f.new_password.errors
+                          }"
+                        />
+                        <div
+                          *ngIf="submitted && f.new_password.errors"
+                          class="invalid-feedback"
+                        >
+                          <div *ngIf="f.new_password.errors.required">
+                            Campo requerido
+                          </div>
+                          <div *ngIf="f.new_password.errors.minlength">
+                            La contraseña debe contener al menos 8 caracteres
+                          </div>
+                          <div
+                            *ngIf="f.new_password.hasError('passwordStrength')"
+                            style="white-space: pre;"
+                          >
+                            {{ f.new_password.errors["passwordStrength"] }}
+                          </div>
+                        </div>
+                      </div>
+                      <div class="form-group">
+                        <label for="confirm_new_password"
+                          >Nueva confirmar contraseña</label
+                        >
+                        <input
+                          type="password"
+                          class="form-control"
+                          formControlName="confirm_new_password"
+                          [ngClass]="{
+                            'is-invalid':
+                              submitted && f.confirm_new_password.errors
+                          }"
+                        />
+                        <div
+                          *ngIf="submitted && f.confirm_new_password.errors"
+                          class="invalid-feedback"
+                        >
+                          <div *ngIf="f.confirm_new_password.errors.required">
+                            Campo requerido
+                          </div>
+                          <div *ngIf="f.confirm_new_password.errors.mustMatch">
+                            Las contraseñas deben coincidir
+                          </div>
+                        </div>
+                      </div>
+
+                      <br />
+                      <button class="btn btn-primary" (click)="editUser()">
+                        Actualizar contraseña
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </form>
+            </div>
           </div>
         </div>
       </div>

src/app/components/profile/profile.component.scss

@@ -1,6 +1,20 @@
-
 .profile {
   background: url("/assets/img/dawn.jpg") 0 320px;
 }
 
+.header {
+  position: relative;
+  padding: 10px 20px;
+}
+.bg-gradient-default {
+  background: linear-gradient(87deg, #172b4d 0, #1a174d 100%) !important;
+}
 
+.mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transition: all 0.15s ease;
+}

src/app/components/profile/profile.component.ts

@@ -1,23 +1,94 @@
-import { Component, OnInit } from '@angular/core';
-import { Title } from '@angular/platform-browser';
+import { Component, OnInit } from "@angular/core";
+import { FormGroup, FormBuilder, Validators, FormArray } from "@angular/forms";
+import { UserService } from "@app/services/user.service";
+
+import Swal from "sweetalert2";
+import {
+  PasswordStrengthValidator,
+  ValidatorComponent
+} from "../plugins/validator/validator.component";
 
 @Component({
-  selector: 'app-profile',
-  templateUrl: './profile.component.html',
-  styleUrls: ['./profile.component.scss']
+  selector: "app-profile",
+  templateUrl: "./profile.component.html",
+  styleUrls: ["./profile.component.scss"]
 })
 export class ProfileComponent implements OnInit {
-
   title = "Perfil del usuario";
+  userForm: FormGroup;
+  submitted: boolean = false;
+  editProfile: boolean;
 
-  constructor(private titleService: Title) { }
-
-  email:string;
+  constructor(
+    private userService: UserService,
+    private formBuilder: FormBuilder
+  ) {}
 
   ngOnInit() {
-    this.titleService.setTitle(this.title);
-    this.email = localStorage.getItem("email");
+    this.userForm = this.formBuilder.group(
+      {
+        old_password: ["", Validators.required],
+        new_password: [
+          "",
+          [
+            Validators.required,
+            Validators.minLength(8),
+            PasswordStrengthValidator
+          ]
+        ],
+        confirm_new_password: ["", Validators.required]
+      },
+      {
+        validator: ValidatorComponent("new_password", "confirm_new_password")
+      }
+    );
+  }
 
+  get f() {
+    return this.userForm.controls;
   }
 
+  editUser() {
+    this.submitted = true;
+    // stop here if form is invalid
+    if (this.userForm.invalid) {
+      return;
+    }
+
+    let user = {
+      old_password: this.f.old_password.value,
+      new_password: this.f.new_password.value,
+      confirm_new_password: this.f.confirm_new_password.value
+    };
+
+    Swal.fire({
+      allowOutsideClick: false,
+      icon: "info",
+      text: "Espere por favor..."
+    });
+    Swal.showLoading();
+    this.userService.changePassword(user).subscribe(
+      success => {
+        if (success) {
+          Swal.fire({
+            allowOutsideClick: false,
+            icon: "success",
+            showCancelButton: false,
+            title: "Exito",
+            confirmButtonText: "Se ha actualizado su perfil exitosamente"
+          }).then(result => {
+            Swal.close();
+            window.location.reload();
+          });
+        }
+      },
+      err => {
+        Swal.fire({
+          icon: "error",
+          title: "Error al guardar",
+          text: err.message
+        });
+      }
+    );
+  }
 }

src/app/components/shared/sidebar/sidebar.component.ts

@@ -18,6 +18,13 @@ export const ROUTES: RouteInfo[] = [
     icon: "dashboard",
     class: ""
   },
+  {
+    path: "/profile",
+    title: "Perfil del usuario",
+    icon: "people",
+    class: ""
+    //allowed_roles: [2, 3]
+  },
   {
     path: "/investment-proposals",
     title: "Propuestas de inversión",

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

@@ -62,6 +62,7 @@ import { InvestmentProposalDetailComponent } from "@app/components/investment-pr
 import { InvestmentProposalApproveComponent } from "@app/components/investment-proposals/approve/approve.component";
 import { DAPCostsComponent } from "@app/components/investments/costs/dap/dap.costs.component";
 import { VCNCostsComponent } from "@app/components/investments/costs/vcn/vcn.costs.component";
+import { NumberPipePipe } from "@app/components/extras/convert.dec.pipe";
 import { PBURCostsComponent } from "@app/components/investments/costs/pbur/pbur.costs.component";
 import { IncomesComponent } from "@app/components/incomes/incomes.component";
 
@@ -77,6 +78,11 @@ 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";
+import { InvestmentPrint } from "@app/components/plugins/investment-print/investment-print";
+import { PPER } from "@app/components/instruments/pper/pper.component";
+import { PEMP } from "@app/components/instruments/pemp/pemp.component";
+import { PEMPCostsComponent } from "@app/components/investments/costs/pemp/pemp.costs.component";
+import { PPERCostsComponent } from "@app/components/investments/costs/pper/pper.costs.component";
 
 // This array defines which "componentId" maps to which lazy-loaded module.
 
@@ -145,6 +151,8 @@ import { FINVCostsComponent } from "@app/components/investments/costs/fondos/fon
     FINV,
     OPC,
     FUTU,
+    PPER,
+    PEMP,
     InstrumentDirective,
     PaymentInfoComponent,
     PaymentRequirementComponent,
@@ -153,10 +161,14 @@ import { FINVCostsComponent } from "@app/components/investments/costs/fondos/fon
     VCNCostsComponent,
     PBURCostsComponent,
     FINVCostsComponent,
+    PEMPCostsComponent,
+    PPERCostsComponent,
     IncomesComponent,
     GeneralIncomeFormComponent,
     PaymentApprovalComponent,
-    UploadLiquidationComponent
+    UploadLiquidationComponent,
+    InvestmentPrint,
+    NumberPipePipe
   ],
   entryComponents: [
     LETE,
@@ -170,7 +182,9 @@ import { FINVCostsComponent } from "@app/components/investments/costs/fondos/fon
     CINV,
     FINV,
     OPC,
-    FUTU
+    FUTU,
+    PPER,
+    PEMP
   ]
 })
 export class AdminModule {}

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

@@ -33,6 +33,8 @@ import { GeneralIncomeFormComponent } from "@app/components/incomes/general-form
 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";
+import { PEMPCostsComponent } from "@app/components/investments/costs/pemp/pemp.costs.component";
+import { PPERCostsComponent } from "@app/components/investments/costs/pper/pper.costs.component";
 
 export const AdminLayoutRoutes: Routes = [
   {
@@ -218,6 +220,14 @@ export const AdminLayoutRoutes: Routes = [
     path: "investment-costs/finv/:id",
     component: FINVCostsComponent
   },
+  {
+    path: "investment-costs/pemp/:id",
+    component: PEMPCostsComponent
+  },
+  {
+    path: "investment-costs/pper/:id",
+    component: PPERCostsComponent
+  },
   {
     path: "investment-costs/pbur/:id",
     component: PBURCostsComponent

src/app/models/investment-proposal-form.ts

@@ -19,6 +19,7 @@ export class InvestmentProposalForm {
   formato_ingreso: string = "";
   plazo: string = "";
   operaciones: string = "";
+  resultado_operacion: string = "";
 
   clear() {
     this.asunto = "";
@@ -41,6 +42,7 @@ export class InvestmentProposalForm {
     this.plazo = "";
     this.operaciones = "";
     this.formato_ingreso = "";
+    this.resultado_operacion = "";
   }
 }
 

src/app/services/catalogs.service.ts

@@ -14,6 +14,20 @@ export class CatalogsService {
 
   constructor(private http: HttpClient) {}
 
+  getBankAccounts(origen: string, id_inversion: string) {
+    return this.http
+      .get<any>(
+        `${environment.productionApiUrl}/cuentas-bancarias?tipo=${origen}&id_inversion=${id_inversion}`,
+        {}
+      )
+      .pipe(
+        map(response => {
+          return response;
+        }),
+        catchError(this.errorHandl)
+      );
+  }
+
   getCatalogInfo(url: string) {
     return this.http
       .get<any>(`${environment.productionApiUrl}/${url}`, {})

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

@@ -84,6 +84,8 @@ export class InstrumentCalculations {
       id_formato_ingreso: number;
     },
     info_instrumento: {
+      completo: number;
+      renta_porcentaje: number;
       costo_cedeval: number;
       comision_casa_porcentaje_compra: number;
       comision_bolsa_porcentaje_compra: number;
@@ -128,6 +130,7 @@ export class InstrumentCalculations {
       id_formato_ingreso: number;
     },
     info_instrumento: {
+      completo: number;
       comision_casa_porcentaje_compra: number;
       comision_bolsa_porcentaje_compra: number;
       cupon_porcentaje_compra: number;
@@ -149,6 +152,7 @@ export class InstrumentCalculations {
       fecha_vencimiento_venta: string;
       fecha_emision: string;
       costo_cedeval: number;
+      renta_porcentaje: number;
       amortizacion_porcentajes: any;
     }
   ): Observable<boolean> {
@@ -325,6 +329,68 @@ export class InstrumentCalculations {
       );
   }
 
+  pempCalc(
+    codigo_instrumento: string,
+    info_inversion: {
+      id_tipo_base: number;
+      id_periodicidad: number;
+      id_formato_ingreso: number;
+    },
+    info_instrumento: {
+      monto_prestamo: number;
+      tasa_porcentaje: number;
+      iva_porcentaje: number;
+      comision_desembolso_porcentaje: number;
+      fecha_operacion: string;
+      fecha_vencimiento: 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)
+      );
+  }
+
+  pperCalc(
+    codigo_instrumento: string,
+    info_inversion: {
+      id_tipo_base: number;
+      id_periodicidad: number;
+      id_formato_ingreso: number;
+    },
+    info_instrumento: {
+      monto_prestamo: number;
+      fecha_otorgamiento: string;
+      plazo_gracia: number;
+      tasa_porcentaje: number;
+      iva_porcentaje: number;
+      pago_seguro_dano: number;
+      pago_seguro_vivienda: number;
+      total_cuotas_mensuales: number;
+    }
+  ): 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

@@ -14,6 +14,8 @@ 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";
+import { PPER } from "@app/components/instruments/pper/pper.component";
+import { PEMP } from "@app/components/instruments/pemp/pemp.component";
 
 @Injectable({
   providedIn: "root"
@@ -40,7 +42,9 @@ export class InstrumentsService {
       }),
       new Instrument(FINV, { key: "FINV", name: "Fondo de inversión" }),
       new Instrument(OPC, { key: "OPC", name: "Opciones" }),
-      new Instrument(FUTU, { key: "FINV", name: "Futuros" })
+      new Instrument(FUTU, { key: "FUTU", name: "Futuros" }),
+      new Instrument(PPER, { key: "PPER", name: "Préstamos personales" }),
+      new Instrument(PEMP, { key: "PEMP", name: "Préstamos empresariales" })
     ];
   }
 }

src/app/services/investments.service.ts

@@ -15,7 +15,17 @@ export class InvestmentsService {
   constructor(private http: HttpClient) {}
 
   // Obtener listado de propuestas de inversiones
-  getProposalInvestmentsList() {
+  getProposalInvestmentsList(type: string = "") {
+    if (type != ""){
+      return this.http
+      .get<any>(`${environment.productionApiUrl}/inversiones?tipo=`+type, {})
+      .pipe(
+        map(response => {
+          return response;
+        }),
+        catchError(this.errorHandl)
+      );  
+    }
     return this.http
       .get<any>(`${environment.productionApiUrl}/inversiones`, {})
       .pipe(

src/app/services/pdfmake-script.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { PdfmakeScriptService } from './pdfmake-script.service';
+
+describe('PdfmakeScriptService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: PdfmakeScriptService = TestBed.get(PdfmakeScriptService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/pdfmake-script.service.ts

@@ -0,0 +1,59 @@
+import { Injectable } from "@angular/core";
+
+interface Scripts {
+  name: string;
+  src: string;
+}
+export const ScriptStore: Scripts[] = [
+  {
+    name: "pdfMake",
+    src: "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.59/pdfmake.min.js"
+  },
+  {
+    name: "vfsFonts",
+    src: "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.59/vfs_fonts.js"
+  }
+];
+
+@Injectable({
+  providedIn: "root"
+})
+export class PdfmakeScriptService {
+  private scripts: any = {};
+
+  constructor() {
+    ScriptStore.forEach((script: any) => {
+      this.scripts[script.name] = {
+        loaded: false,
+        src: script.src
+      };
+    });
+  }
+
+  load(...scripts: string[]) {
+    const promises: any[] = [];
+    scripts.forEach(script => promises.push(this.loadScript(script)));
+    return Promise.all(promises);
+  }
+
+  loadScript(name: string) {
+    return new Promise((resolve, reject) => {
+      // resolve if already loaded
+      if (this.scripts[name].loaded) {
+        resolve({ script: name, loaded: true, status: "Already Loaded" });
+      } else {
+        // load script
+        const script = document.createElement("script");
+        script.type = "text/javascript";
+        script.src = this.scripts[name].src;
+        script.onload = () => {
+          this.scripts[name].loaded = true;
+          resolve({ script: name, loaded: true, status: "Loaded" });
+        };
+        script.onerror = (error: any) =>
+          resolve({ script: name, loaded: false, status: "Loaded" });
+        document.getElementsByTagName("head")[0].appendChild(script);
+      }
+    });
+  }
+}

src/app/services/user.service.ts

@@ -1,57 +1,34 @@
-import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
+import { Injectable } from "@angular/core";
+import { HttpClient } from "@angular/common/http";
 
-import { environment } from '@environments/environment';
-import { User } from '@app/models';
-import { Observable } from 'rxjs/internal/Observable';
-import { throwError } from 'rxjs/internal/observable/throwError';
-import { map, catchError } from 'rxjs/operators';
+import { environment } from "@environments/environment";
+import { User } from "@app/models";
+import { Observable } from "rxjs/internal/Observable";
+import { throwError } from "rxjs/internal/observable/throwError";
+import { map, catchError } from "rxjs/operators";
 
-@Injectable({ providedIn: 'root' })
+@Injectable({ providedIn: "root" })
 export class UserService {
-  constructor(private http: HttpClient) { }
-
-  getAllUsers() {
-      return this.http.get<User[]>(`${environment.productionApiUrl}/users`);
-  }
-
-
-  createUser(user: { first_name :string, last_name :string, 
-    email :string, role :number, organizations?: any }): Observable<boolean> {
-      return this.http.post<any>(`${environment.productionApiUrl}/users`, user)
-      .pipe(
-        map(response => {
-          return response;
-        }),
-        catchError(this.errorHandl)
-      )  
-  }
-
-  validateUserToken(user: {token :string}): Observable<boolean> {
-      return this.http.post<any>(`${environment.productionApiUrl}/user/tokenvalidation`, user)
-      .pipe(
-        map(response => {
-          return response;
-        }),
-        catchError(this.errorHandl)
-      )  
-  }
-  
-  activateUser(user: { first_name :string, last_name :string, 
-    email :string, password: string, confirm_password :string }): Observable<boolean> {
-      return this.http.post<any>(`${environment.productionApiUrl}/user/activate`, user)
+  constructor(private http: HttpClient) {}
+
+  changePassword(user: {
+    old_password: string;
+    new_password: string;
+    confirm_new_password: string;
+  }): Observable<boolean> {
+    return this.http
+      .put<any>(`${environment.productionApiUrl}/change-password`, user)
       .pipe(
         map(response => {
           return response;
         }),
         catchError(this.errorHandl)
-      )  
+      );
   }
 
-
   errorHandl(error) {
-    let errorMessage = '';
-    if(error.error) {
+    let errorMessage = "";
+    if (error.error) {
       // Get client-side error
       errorMessage = error.error;
     } else {
@@ -59,6 +36,5 @@ export class UserService {
       errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
     }
     return throwError(errorMessage);
- }
-
+  }
 }

src/styles.scss

@@ -201,7 +201,7 @@ textarea.form-control {
 .instrument-calcs,
 .instrument-calcs-summary {
   border: 1px solid #999;
-  padding: 10px;
+  padding: 15px;
   border-radius: 5px;
 
   h4 {
@@ -217,6 +217,12 @@ textarea.form-control {
   }
 }
 
+td.mat-cell,
+td.mat-footer-cell,
+th.mat-header-cell {
+  padding-right: 15px !important;
+}
+
 .badge-custom {
   font-size: 100%;
   padding: 0.5em 0.7em;
@@ -240,6 +246,16 @@ textarea.form-control {
   }
 }
 
+.custom-table-container {
+  position: relative;
+  overflow: scroll;
+  padding: 15px;
+
+  table {
+    background: none;
+  }
+}
+
 .costs-input-small-container,
 .costs-input-normal-container {
   max-width: 100%;