Se agrega bitacora de los cambios para la inversion, mejora en la pantalla de detalle de propuesta, formulario de costos para dap

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

@@ -30,117 +30,38 @@
           <div class="card borderless">
             <div class="card-header card-header-icon card-header-rose">
               <h4 class="card-title">
-                Histórico de cambios
+                Histórico de cambios para inversión: {{ investmentCode }}
               </h4>
             </div>
             <div class="card-body">
               <div class="align-container">
                 <ul class="list-unstyled">
-                  <li class="alert secondary-bg">
-                    <div class="media">
-                      <div class="user-icon">
-                        <i class="material-icons">
-                          person
-                        </i>
-                      </div>
-                      <div class="media-body">
-                        <h6 class="mt-0 ">
-                          Sarahi Garcia
-                          <div class="float-right">07/02/2020 18:00</div>
-                        </h6>
-                        <a href="javascript:void(0);">Modificacion</a>
-                        <p class="mt-10">
-                          Adjunto requisicion de pago.
-                        </p>
-                      </div>
-                    </div>
-                    <div class="divider mt-15"></div>
-                  </li>
-                  <li class="alert info-bg">
-                    <div class="media">
-                      <div class="user-icon clearfix">
-                        <i class="material-icons">
-                          person
-                        </i>
-                      </div>
-                      <div class="media-body">
-                        <h6 class="mt-0 ">
-                          Francisco Huezo
-                          <div class="float-right">07/02/2020 15:00</div>
-                        </h6>
-                        <a href="javascript:void(0);">Modificacion</a>
-                        <p class="mt-10">
-                          Lorem ipsum dolor sit amet consectetur adipisicing
-                          elit. Harum odio omnis dolorum voluptatibus
-                          consequatur atque culpa labore quo excepturi, porro
-                          voluptatum vel dolores sunt reprehenderit libero.
-                          Perspiciatis, accusamus! Nemo, ullam.
-                        </p>
-                      </div>
-                    </div>
-                    <div class="divider mt-15"></div>
-                  </li>
-                  <li class="alert secondary-bg">
-                    <div class="media">
-                      <div class="user-icon">
-                        <i class="material-icons">
-                          person
-                        </i>
-                      </div>
-                      <div class="media-body">
-                        <h6 class="mt-0 ">
-                          Carlos Chavez
-                          <div class="float-right">06/02/2020 13:40</div>
-                        </h6>
-                        <a href="javascript:void(0);">Modificacion</a>
-                        <p class="mt-10">
-                          Cambio el estado a Aprobado
-                        </p>
-                      </div>
-                    </div>
-                    <div class="divider mt-15"></div>
-                  </li>
-                  <li class="alert info-bg">
-                    <div class="media">
-                      <div class="user-icon">
-                        <i class="material-icons">
-                          person
-                        </i>
-                      </div>
-                      <div class="media-body">
-                        <h6 class="mt-0 ">
-                          Oscar Nuñez
-                          <div class="float-right">06/02/2020 08:58</div>
-                        </h6>
-                        <a href="javascript:void(0);">Modificacion</a>
-                        <p class="mt-10">
-                          Lorem, ipsum dolor sit amet consectetur adipisicing
-                          elit. Doloribus obcaecati excepturi mollitia eum nulla
-                          eos temporibus, a praesentium expedita animi nemo
-                          assumenda quasi iusto quas maxime amet recusandae ut!
-                          Id.
-                        </p>
-                      </div>
-                    </div>
-                    <div class="divider mt-15"></div>
-                  </li>
-                  <li class="alert secondary-bg">
-                    <div class="media">
-                      <div class="user-icon">
-                        <i class="material-icons">
-                          person
-                        </i>
-                      </div>
-                      <div class="media-body">
-                        <h6 class="mt-0 ">
-                          Angel Hernandez
-                          <div class="float-right">05/02/2020 10:55</div>
-                        </h6>
-                        <a href="javascript:void(0);">Creacion</a>
-                        <p class="mt-10">
-                          Lorem ipsum dolor sit amet consectetur adipisicing
-                          elit.
-                        </p>
+                  <li *ngFor="let item of logs; let i = index">
+                    <div
+                      [ngClass]="
+                        i % 2 == 0 ? 'log secondary-bg' : 'log info-bg'
+                      "
+                    >
+                      <div class="media">
+                        <div class="user-icon">
+                          <i class="material-icons">
+                            person
+                          </i>
+                        </div>
+                        <div class="media-body">
+                          <h6 class="mt-0 ">
+                            {{ item.created_by }}
+                            <div class="float-right">
+                              {{ item.created_date }}
+                            </div>
+                          </h6>
+                          <p class="mt-10">
+                            Estado inicial: {{ item.estado_inicial }}
+                          </p>
+                          <p class="mt-10">
+                            Estado final: {{ item.estado_final }}
+                          </p>
+                        </div>
                       </div>
                     </div>
                   </li>

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

@@ -15,3 +15,11 @@
 .secondary-bg {
   background: #ddd;
 }
+
+.log {
+  padding: 10px;
+  margin-bottom: 10px;
+  p {
+    margin-bottom: 5px;
+  }
+}

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

@@ -5,7 +5,7 @@ import {
   ViewChild,
   ComponentFactoryResolver
 } from "@angular/core";
-import { Router } from "@angular/router";
+import { Router, ActivatedRoute } from "@angular/router";
 import { InvestmentProposalForm } from "@app/models/investment-proposal-form";
 import { FormInvestmentProposalService } from "@app/services/form-investment-proposal.service";
 import { Instrument } from "@app/models/instrument";
@@ -13,6 +13,7 @@ import { InvestmentProposalWorkflowService } from "@app/services/investment-prop
 import { InstrumentDirective } from "../instrument/instrument.directive";
 import { InstrumentComponent } from "../instrument/instrument.component";
 import { InstrumentsService } from "@app/services/instruments.service";
+import { InvestmentsService } from "@app/services/investments.service";
 
 @Component({
   selector: "app-investment-proposal-changes",
@@ -25,16 +26,10 @@ export class ChangeHistoryComponent implements OnInit {
   @Input() formData: InvestmentProposalForm;
   @ViewChild(InstrumentDirective, { static: true })
   adHost: InstrumentDirective;
-  isFormValid: boolean = false;
-  general: any;
-  instrument: any;
-  complement: any;
-  final: any;
-  workType: string;
-  form: any;
-  currentAdIndex = -1;
-  interval: any;
-  indexDynamicComponent: number;
+
+  investmentProposalID: string;
+  logs: any;
+  investmentCode: any;
 
   constructor(
     private router: Router,
@@ -42,54 +37,35 @@ export class ChangeHistoryComponent implements OnInit {
     private formDataService: FormInvestmentProposalService,
     private componentFactoryResolver: ComponentFactoryResolver,
     private instrumentService: InvestmentProposalWorkflowService,
-    private loadInstrumentsService: InstrumentsService
+    private loadInstrumentsService: InstrumentsService,
+    private route: ActivatedRoute,
+    private investmentService: InvestmentsService
   ) {}
 
   ngOnInit() {
-    this.formData = this.formDataService.getFormData();
-    this.isFormValid = this.formDataService.isFormValid();
-    this.ads = this.loadInstrumentsService.getInstruments();
-    this.formData.instrumentos;
-
-    this.indexDynamicComponent = this.ads.findIndex(
-      x => x.data.key == this.formData.instrumentos
-    );
-    if (this.indexDynamicComponent >= 0) {
-      this.loadComponent();
-    } else {
-      console.log("No existe el componente");
-    }
-
-    this.general = this.formDataService.getGeneralInfo();
-    this.instrument = this.formDataService.getWork();
-    this.complement = this.formDataService.getComplementInfo();
-
-    this.final = {};
-
-    Object.assign(this.final, this.general, this.instrument, this.complement);
-    console.log("Result feature loaded!");
-    console.log(this.final);
-  }
-
-  loadComponent() {
-    this.currentAdIndex = this.indexDynamicComponent % this.ads.length;
-    const adItem = this.ads[this.currentAdIndex];
-    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(
-      adItem.component
-    );
-
-    const viewContainerRef = this.adHost.viewContainerRef;
-    viewContainerRef.clear();
-
-    const componentRef = viewContainerRef.createComponent(componentFactory);
-    (<InstrumentComponent>componentRef.instance).data = adItem.data;
-    (<InstrumentComponent>componentRef.instance).summary = true;
-  }
+    this.route.params.subscribe(params => {
+      this.investmentProposalID = params["id"];
+    });
+    if (this.investmentProposalID == undefined)
+      this.investmentProposalID = this.route.snapshot.queryParamMap.get("id");
 
-  submit() {
-    console.log(this.final);
+    this.investmentService
+      .getProposalInvestment(this.investmentProposalID)
+      .subscribe(
+        res => {
+          this.investmentCode = res["result"]["codigo_inversion"];
+        },
+        err => {}
+      );
 
-    this.formData = this.formDataService.resetFormData();
-    this.isFormValid = false;
+    this.investmentService
+      .getInvestmentProposalLogs(this.investmentProposalID)
+      .subscribe(
+        res => {
+          this.logs = res["result"];
+          console.log(this.logs);
+        },
+        error => {}
+      );
   }
 }

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

@@ -109,16 +109,8 @@
                       </a>
                       <a
                         *ngIf="
-                          can_modify_or_send_to_review(
-                            row.id_estado_inversion.codigo
-                          ) ||
-                          can_write_payment_info(
-                            row.id_estado_inversion.codigo
-                          ) ||
-                          (can_finish_proposal(
-                            row.id_estado_inversion.codigo
-                          ) &&
-                            userType(userRole, 'analistas'))
+                          can_modify(row.id_estado_inversion.codigo) &&
+                          userType(userRole, 'analistas')
                         "
                         title="Editar"
                         class="btn btn-primary btn-custom-small"

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

@@ -172,11 +172,23 @@ export class InvestmentProposalsComponent implements OnInit {
     }, 1000);
   }
 
+  can_modify(status: string) {
+    if (
+      status == "NUEVA" ||
+      status == "RECHA" ||
+      status == "APROB" ||
+      status == "LIQUI"
+    ) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
   // Verifica permisos para mostrar boton de edicion y/o envio a revision,
   // segun los permisos del usuario y el estado de la propuesta
   can_modify_or_send_to_review(status: string) {
-    if (status == "NUEVA" && (this.userRole.length == 0 || this.userRole)) {
-      // TO DO ver que el codigo de los tipos de usuario
+    if (status == "NUEVA" || status == "RECHA") {
       return true;
     } else {
       return false;
@@ -184,8 +196,7 @@ export class InvestmentProposalsComponent implements OnInit {
   }
 
   can_review(status: string) {
-    if (status == "PENDI" && (this.userRole.length == 0 || this.userRole)) {
-      // TO DO ver que el codigo de los tipos de usuario
+    if (status == "PENDI") {
       return true;
     } else {
       return false;
@@ -193,8 +204,7 @@ export class InvestmentProposalsComponent implements OnInit {
   }
 
   can_approve(status: string) {
-    if (status == "REVIS" && (this.userRole.length == 0 || this.userRole)) {
-      // TO DO ver que el codigo de los tipos de usuario
+    if (status == "REVIS") {
       return true;
     } else {
       return false;
@@ -202,8 +212,7 @@ export class InvestmentProposalsComponent implements OnInit {
   }
 
   can_write_payment_info(status: string) {
-    if (status == "APROB" && (this.userRole.length == 0 || this.userRole)) {
-      // TO DO ver que el codigo de los tipos de usuario
+    if (status == "APROB") {
       return true;
     } else {
       return false;
@@ -211,8 +220,7 @@ export class InvestmentProposalsComponent implements OnInit {
   }
 
   can_upload_payment(status: string) {
-    if (status == "COMPR" && (this.userRole.length == 0 || this.userRole)) {
-      // TO DO ver que el codigo de los tipos de usuario
+    if (status == "COMPR") {
       return true;
     } else {
       return false;
@@ -220,8 +228,7 @@ export class InvestmentProposalsComponent implements OnInit {
   }
 
   can_finish_proposal(status: string) {
-    if (status == "LIQUI" && (this.userRole.length == 0 || this.userRole)) {
-      // TO DO ver que el codigo de los tipos de usuario
+    if (status == "LIQUI") {
       return true;
     } else {
       return false;

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

@@ -41,7 +41,7 @@
                     <div class="timeline-panel">
                       <div class="timeline-heading">
                         <span class="badge badge-success"
-                          >Información general</span
+                          ><h4>Información general</h4></span
                         >
                       </div>
                       <div class="timeline-body">
@@ -158,7 +158,111 @@
                       <div class="timeline-heading">
                         <span class="badge badge-warning">Instrumento</span>
                       </div>
-                      <ng-template instrument-host></ng-template>
+                      <div class="timeline-body">
+                        <ng-template instrument-host></ng-template>
+                      </div>
+                    </div>
+                  </li>
+
+                  <li class="timeline-inverted" *ngIf="paymentExists">
+                    <div class="timeline-badge"></div>
+                    <div class="timeline-panel">
+                      <div class="timeline-heading">
+                        <span class="badge badge-danger"
+                          >Información del pago</span
+                        >
+                      </div>
+                      <div class="timeline-body">
+                        <div class="row">
+                          <div class="col-lg-3 col-md-4 col-sm-6">
+                            <h4>Monto:</h4>
+                            <div class="field">
+                              $USD {{ monto | number: "1.2-4" }}
+                            </div>
+                          </div>
+                          <div class="col-lg-3 col-md-4 col-sm-6">
+                            <h4>Código:</h4>
+                            <div class="field">{{ codigo }}</div>
+                          </div>
+                          <div class="col-lg-3 col-md-4 col-sm-6">
+                            <h4>Tipo pago:</h4>
+                            <div class="field">{{ tipo_pago }}</div>
+                          </div>
+                          <div class="col-lg-3 col-md-4 col-sm-6">
+                            <h4>Cuenta bancaria:</h4>
+                            <div class="field">{{ cuenta_bancaria }}</div>
+                          </div>
+
+                          <div class="col-lg-3 col-md-4 col-sm-6">
+                            <h4>Fecha de vencimiento:</h4>
+                            <div class="field">{{ fecha_vencimiento }}</div>
+                          </div>
+
+                          <div class="col-lg-3 col-md-4 col-sm-6">
+                            <h4>Fecha de pago:</h4>
+                            <div class="field">{{ fecha_vencimiento }}</div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </li>
+
+                  <li class="timeline-inverted">
+                    <div class="timeline-badge"></div>
+                    <div class="timeline-panel">
+                      <div class="timeline-heading">
+                        <span class="badge badge-primary"
+                          >Historico de cambios</span
+                        >
+                      </div>
+                      <div class="timeline-body">
+                        <ul class="list-unstyled">
+                          <li *ngFor="let item of logs; let i = index">
+                            <div
+                              *ngIf="i < 3"
+                              [ngClass]="
+                                i % 2 == 0 ? 'log secondary-bg' : 'log info-bg'
+                              "
+                            >
+                              <div class="media">
+                                <div class="user-icon">
+                                  <i class="material-icons">
+                                    person
+                                  </i>
+                                </div>
+                                <div class="media-body">
+                                  <h6 class="mt-0 ">
+                                    {{ item.created_by }}
+                                    <div class="float-right">
+                                      {{ item.created_date }}
+                                    </div>
+                                  </h6>
+                                  <p class="mt-10">
+                                    Estado inicial: {{ item.estado_inicial }}
+                                  </p>
+                                  <p class="mt-10">
+                                    Estado final: {{ item.estado_final }}
+                                  </p>
+                                </div>
+                              </div>
+                              <div class="divider mt-15"></div>
+                            </div>
+                          </li>
+                        </ul>
+
+                        <a
+                          title="Historico"
+                          class="btn btn-primary btn-custom-small"
+                          [routerLink]="[
+                            '/investment-proposal',
+                            investmentProposalID,
+                            'change-history'
+                          ]"
+                          target="_blank"
+                        >
+                          <i class="fas fa-history"></i> Ver histórico completo
+                        </a>
+                      </div>
                     </div>
                   </li>
                 </ul>

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

@@ -4,3 +4,35 @@
     margin: 0 20px;
   }
 }
+
+.user-icon {
+  width: 40px;
+  height: 40px;
+  border: 1px solid #666;
+  line-height: 50px;
+  text-align: center;
+  margin-right: 10px;
+  color: inherit;
+}
+
+.info-bg {
+  background: #a9daf2;
+}
+
+.secondary-bg {
+  background: #ddd;
+}
+
+.list-unstyled {
+  li {
+    margin: 0;
+  }
+}
+
+.log {
+  padding: 10px;
+  margin-bottom: 10px;
+  p {
+    margin-bottom: 5px;
+  }
+}

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

@@ -62,6 +62,16 @@ export class InvestmentProposalDetailComponent implements OnInit {
   investmentName: any;
   comment: any;
   justification: any;
+  logs: any;
+  logsExists: boolean = false;
+  paymentExists: boolean = false;
+  monto: any;
+  codigo_inversion: any;
+  codigo: any;
+  tipo_pago: any;
+  cuenta_bancaria: any;
+  fecha_vencimiento: any;
+  fecha_pago: any;
 
   constructor(
     private router: Router,
@@ -302,7 +312,36 @@ export class InvestmentProposalDetailComponent implements OnInit {
                   : "-";
             });
           }
+
+          if (
+            this.state == "COMPR" ||
+            this.state == "LIQUI" ||
+            this.state == "FINAL"
+          )
+            this.investmentService
+              .getPaymentInfoProposalInvestment(this.investmentProposalID)
+              .subscribe(resp => {
+                this.paymentExists = true;
+                this.monto = resp["result"]["monto"];
+                this.codigo = resp["result"]["codigo"];
+                this.tipo_pago = resp["result"]["id_tipo_pago"]["nombre"];
+                this.cuenta_bancaria =
+                  resp["result"]["id_cuenta_bancaria"]["nombre"];
+                this.fecha_vencimiento = resp["result"]["fecha_vencimiento"];
+                this.fecha_pago = resp["result"]["fecha_pago"] || "";
+              });
         });
+
+      this.investmentService
+        .getInvestmentProposalLogs(this.investmentProposalID)
+        .subscribe(
+          res => {
+            this.logs = res["result"];
+            this.logsExists = true;
+            console.log(this.logs);
+          },
+          error => {}
+        );
     } else {
       this.investmentExists = false;
     }

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

@@ -0,0 +1,161 @@
+<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
+                </a>
+              </li>
+              <li class="breadcrumb-item">Depósito a plazo</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 costos para el deposito
+              </h4>
+              <div class="align-container">
+                <form [formGroup]="form">
+                  <div *ngFor="let group of form.controls; let i = index">
+                    <div class="row" [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"
+                              />
+                            </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"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="costs-input-normal-container">
+                        <div class="form-group">
+                          <label for="ingreso_bruto">Ingreso bruto: </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i class="fas fa-dollar-sign"></i>
+                              </p>
+                              <input
+                                type="text"
+                                formControlName="ingreso_bruto"
+                                class="form-control"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="costs-input-normal-container">
+                        <div class="form-group">
+                          <label for="renta">Renta: </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i class="fas fa-dollar-sign"></i>
+                              </p>
+                              <input
+                                type="text"
+                                formControlName="renta"
+                                class="form-control"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="costs-input-normal-container">
+                        <div class="form-group">
+                          <label for="ingreso_neto">Ingreso neto: </label>
+
+                          <div class="input-box-container">
+                            <div>
+                              <p>
+                                <i class="fas fa-dollar-sign"></i>
+                              </p>
+                              <input
+                                type="text"
+                                formControlName="ingreso_neto"
+                                class="form-control"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <input
+                        type="hidden"
+                        formControlName="id_deposito_plazo"
+                      />
+                      <div class="clear"></div>
+                    </div>
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <br />
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,212 @@
+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 { 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 } from "@angular/forms";
+
+@Component({
+  selector: "app-dap-costs",
+  templateUrl: "./dap.costs.component.html"
+  //styleUrls: ["./dap.costs.component.scss"]
+})
+export class DAPCostsComponent implements OnInit {
+  helper = new JwtHelperService();
+
+  title: string = "Costos para depósito a plazo";
+
+  displayedColumns: string[] = [
+    "codigo_inversion",
+    "asunto",
+    "id_tipo_mercado",
+    "id_inversion_instrumento",
+    "id"
+  ];
+  //displayedColumns: string[] = ['state'];
+
+  listProposals: InvestmentProposal[];
+  dataSource = new MatTableDataSource(this.listProposals);
+
+  resultsLength = 0;
+  isLoadingResults = true;
+  isRateLimitReached = false;
+  userRole: any;
+
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
+  @ViewChild(MatSort, { static: true }) sort: MatSort;
+  role_number: any;
+  investmentProposalID: string;
+
+  form: FormArray;
+
+  proyecciones: any;
+  proyeccionesProps = [];
+  dataRetrieved: boolean = false;
+
+  array1;
+  array2;
+  array3;
+
+  constructor(
+    private catalogService: CatalogsService,
+    private investmentsService: InvestmentsService,
+    private authService: AuthService,
+    private formInvestmentProposal: FormInvestmentProposalService,
+    private router: Router,
+    private route: ActivatedRoute,
+
+    private formBuilder: FormBuilder
+  ) {
+    const decodedToken = this.helper.decodeToken(
+      this.authService.getJwtToken()
+    );
+    this.userRole = decodedToken.groups;
+    //    console.log("User role");
+    //  console.log(this.userRole);
+    //console.log(this.userRole.length == 0);
+
+    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.proyecciones =
+              res["result"]["id_inversion_instrumento"]["instrumento"][
+                "proyecciones"
+              ];
+
+            this.form = new FormArray(this.buildForm(this.proyecciones));
+
+            /*
+            this.array1 = [];
+            this.array2 = [];
+
+            for (var i = 0; i < this.proyecciones.length; i++) {
+              this.array2 = [];
+              for (const prop2 of Object.keys(this.proyecciones[i])) {
+                this.array3 = [];
+                formDataObj[prop2] = new FormControl(
+                  this.proyecciones[i][prop2]
+                );
+                this.proyeccionesProps.push(prop2);
+
+                this.array3.push(prop2);
+                this.array2.push(this.array3);
+              }
+              this.array1.push(this.array2);
+            }
+            console.log(this.array1);
+
+            this.form = new FormGroup(formDataObj);
+            console.log(this.form);
+            */
+            this.dataRetrieved = true;
+          },
+          err => {
+            Swal.fire({
+              icon: "error",
+              title: "Error en el servidor",
+              text: err.message
+            });
+          }
+        );
+    }
+
+    setTimeout(() => {
+      Swal.close();
+    }, 1200);
+  }
+
+  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),
+      renta: new FormControl(item.renta),
+      ingreso_neto: new FormControl(item.ingreso_neto),
+      id_deposito_plazo: new FormControl(item.id_deposito_plazo)
+    });
+  }
+
+  applyFilter(event: Event) {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.dataSource.filter = filterValue;
+
+    if (this.dataSource.paginator) {
+      this.dataSource.paginator.firstPage();
+    }
+  }
+
+  view_investment_proposal(id: string) {
+    this.formInvestmentProposal.resetFormData();
+    Swal.fire({
+      allowOutsideClick: false,
+      icon: "info",
+      text: "Espere por favor..."
+    });
+    Swal.showLoading();
+    setTimeout(() => {
+      this.router.navigate([`/investment-proposal/${id}`]);
+    }, 1000);
+  }
+
+  modify_investment_proposal(id: string) {
+    this.formInvestmentProposal.resetFormData();
+
+    Swal.fire({
+      allowOutsideClick: false,
+      icon: "info",
+      text: "Espere por favor..."
+    });
+    Swal.showLoading();
+    setTimeout(() => {
+      this.router.navigate(["/investment-proposal/general-info"], {
+        queryParams: { id: id }
+      });
+    }, 1000);
+  }
+
+  // Verifica permisos para mostrar boton de edicion y/o envio a revision,
+  // segun los permisos del usuario y el estado de la propuesta
+  can_modify_or_send_to_review(status: string) {
+    if (status == "NUEVA" && (this.userRole.length == 0 || this.userRole)) {
+      // TO DO ver que el codigo de los tipos de usuario
+      return true;
+    } else {
+      return false;
+    }
+  }
+}

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

@@ -31,7 +31,7 @@
           </div>
           <br />
           <div class="example-container mat-elevation-z8">
-            <div class="example-table-container">
+            <div class="example-table-container table-responsive">
               <table mat-table [dataSource]="dataSource" class="example-table">
                 <!-- Name Column -->
                 <ng-container matColumnDef="codigo_inversion">

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

@@ -83,7 +83,9 @@ export class InvestmentsComponent implements OnInit {
         this.listProposals = ans.result;
 
         this.listProposals = this.listProposals.filter(
-          proposals => proposals["id_estado_inversion"]["codigo"] == "FINAL"
+          proposals =>
+            proposals["id_estado_inversion"] != null &&
+            proposals["id_estado_inversion"]["codigo"] == "FINAL"
         );
 
         console.log(this.listProposals);

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

@@ -70,7 +70,7 @@ import { PaymentRequirementComponent } from "@app/components/investment-proposal
 import { PaymentInfoComponent } from "@app/components/investment-proposals/payment-info/payment-info.component";
 import { InvestmentProposalDetailComponent } from "@app/components/investment-proposals/proposal-detail/proposal-detail.component";
 import { InvestmentProposalApproveComponent } from "@app/components/investment-proposals/approve/approve.component";
-
+import { DAPCostsComponent } from "@app/components/investments/costs/dap/dap.costs.component";
 // This array defines which "componentId" maps to which lazy-loaded module.
 
 @NgModule({
@@ -135,7 +135,8 @@ import { InvestmentProposalApproveComponent } from "@app/components/investment-p
     InstrumentDirective,
     PaymentInfoComponent,
     PaymentRequirementComponent,
-    InvestmentProposalDetailComponent
+    InvestmentProposalDetailComponent,
+    DAPCostsComponent
   ],
   entryComponents: [
     LETE,

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

@@ -25,6 +25,7 @@ import { InvestmentProposalDetailComponent } from "@app/components/investment-pr
 import { NgModule } from "@angular/core";
 import { from } from "rxjs";
 import { InvestmentProposalApproveComponent } from "@app/components/investment-proposals/approve/approve.component";
+import { DAPCostsComponent } from "@app/components/investments/costs/dap/dap.costs.component";
 
 export const AdminLayoutRoutes: Routes = [
   {
@@ -189,5 +190,9 @@ export const AdminLayoutRoutes: Routes = [
   {
     path: "investment-proposal/:id",
     component: InvestmentProposalDetailComponent
+  },
+  {
+    path: "investment-costs/dap/:id",
+    component: DAPCostsComponent
   }
 ];

src/app/services/investments.service.ts

@@ -39,6 +39,18 @@ export class InvestmentsService {
       );
   }
 
+  getInvestmentProposalLogs(id: string) {
+    return this.http
+      .get<any>(`${environment.productionApiUrl}/auditoria/${id}`)
+      .pipe(
+        timeout(this.time),
+        map(response => {
+          return response;
+        }),
+        catchError(this.errorHandl)
+      );
+  }
+
   createProposalInvestment(inversion: Object): Observable<boolean> {
     return this.http
       .post<any>(`${environment.productionApiUrl}/inversion`, inversion)

src/styles.scss

@@ -239,3 +239,28 @@ textarea.form-control {
     background: none;
   }
 }
+
+.costs-input-small-container,
+.costs-input-normal-container {
+  max-width: 100%;
+
+  text-align: left;
+  margin-right: 5px;
+  padding-left: 8px;
+
+  .input-box-container input {
+    border-bottom: 1px solid;
+  }
+}
+
+.costs-input-small-container {
+  width: 80px;
+}
+
+.costs-input-normal-container {
+  width: 180px;
+}
+
+.wrapper-costs {
+  padding: 20px;
+}