Carga dinamica de instrumentos a partir del combobox seleccionado, ajuste para el navbar

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

@@ -171,10 +171,10 @@
               placeholder="Seleccione una fecha"
               angular-mydatepicker
               name="fecha_rendencion"
-              (click)="dp.toggleCalendar()"
+              (click)="dp2.toggleCalendar()"
               [options]="myDpOptions"
               (dateChanged)="onDateChanged($event)"
-              #dp="angular-mydatepicker"
+              #dp2="angular-mydatepicker"
               [ngClass]="{
                 'is-invalid': submitted && f.fecha_rendencion.errors
               }"

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

@@ -27,7 +27,9 @@
     <div class="row justify-content-center">
       <div class="col-12">
         <div class="align-container">
-          <inv-proposal-navbar></inv-proposal-navbar>
+          <inv-proposal-navbar
+            [activeLink]="'other_info'"
+          ></inv-proposal-navbar>
 
           <div class="card borderless">
             <div class="card-header card-header-icon card-header-rose">

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

@@ -27,7 +27,7 @@
     <div class="row justify-content-center">
       <div class="col-12">
         <div class="align-container">
-          <inv-proposal-navbar [activeLink]="general"></inv-proposal-navbar>
+          <inv-proposal-navbar [activeLink]="'general'"></inv-proposal-navbar>
 
           <div class="card borderless">
             <div class="card-header card-header-icon card-header-rose">

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

@@ -33,14 +33,14 @@ export class InvestmentProposalGeneralInfoComponent implements OnInit {
 
   instruments = [
     //{ key: "AI", value: "Acciones internacionales" },
-    { key: "ANC", value: "Acciones nacionales comunes" },
-    { key: "AP", value: "Acciones preferentes nacionales" },
-    { key: "BONO", value: "Bonos" },
-    { key: "LETE", value: "Letes" },
-    //{ key: "CETE", value: "Cete" },
+    { key: "ANCComponent", value: "Acciones nacionales comunes" },
+    { key: "APNComponent", value: "Acciones preferentes nacionales" },
+    { key: "BonosComponent", value: "Bonos" },
+    { key: "LeteComponent", value: "Letes" },
+    { key: "CeteComponent", value: "Cete" },
     //{ key: "CDI", value: "Certificados de inversión" },
     //{ key: "ETF", value: "ETF" },
-    { key: "DP", value: "Depósitos a plazo" },
+    { key: "DepositosComponent", value: "Depósitos a plazo" },
     //{ key: "EB", value: "Euro bonos" },
     //{ key: "FI", value: "Fondos de inversión" },
     //{ key: "FU", value: "Futuros" },
@@ -52,7 +52,7 @@ export class InvestmentProposalGeneralInfoComponent implements OnInit {
     //{ key: "PP", value: "Préstamo personal" },
     //{ key: "RV", value: "Reporto de ventas" },
     //{ key: "RC", value: "Reporto de compras" },
-    { key: "VCN", value: "Valores comerciales negociables" }
+    { key: "VCNComponent", value: "Valores comerciales negociables" }
     //{ key: "TI", value: "Titulización" }
   ];
 

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

@@ -27,7 +27,7 @@
     <div class="row justify-content-center">
       <div class="col-12">
         <div class="align-container">
-          <inv-proposal-navbar></inv-proposal-navbar>
+          <inv-proposal-navbar [activeLink]="'result'"></inv-proposal-navbar>
 
           <div class="card borderless">
             <div class="card-header card-header-icon card-header-rose">

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

@@ -27,7 +27,9 @@
     <div class="row justify-content-center">
       <div class="col-12">
         <div class="align-container">
-          <inv-proposal-navbar></inv-proposal-navbar>
+          <inv-proposal-navbar
+            [activeLink]="'instrument'"
+          ></inv-proposal-navbar>
 
           <div class="card borderless">
             <div class="card-header card-header-icon card-header-rose">

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

@@ -34,6 +34,7 @@ export class WorkComponent implements OnInit {
   adHost: InstrumentDirective;
   interval: any;
   @Input() formData: InvestmentProposalForm;
+  indexDynamicComponent: number;
 
   constructor(
     private router: Router,
@@ -47,12 +48,25 @@ export class WorkComponent implements OnInit {
     console.log("form data:");
     console.log(this.formData);
     this.ads = this.instrumentService.getInstruments();
-    this.loadComponent();
+    this.formData = this.formDataService.getFormData();
+    this.formData.instrumentos;
+    console.log("instrumentos: ");
+    console.log(this.formData.instrumentos);
+
+    this.indexDynamicComponent = this.ads.findIndex(
+      x => x.component.name == this.formData.instrumentos
+    );
+    console.log(this.indexDynamicComponent);
+    if (this.indexDynamicComponent >= 0) {
+      this.loadComponent();
+    } else {
+      console.log("No existe el componente");
+    }
     //this.workType = this.formDataService.getWork();
   }
 
   loadComponent() {
-    this.currentAdIndex = (this.currentAdIndex + 5) % this.ads.length;
+    this.currentAdIndex = this.indexDynamicComponent % this.ads.length;
     const adItem = this.ads[this.currentAdIndex];
     const componentFactory = this.componentFactoryResolver.resolveComponentFactory(
       adItem.component

src/app/components/plugins/navbar-inv-proposals/navbar-inv-proposals.html

@@ -6,7 +6,6 @@
     <li>
       <a
         routerLink="/investment-proposals/general-info"
-        data-toggle="tab"
         title="general"
         [ngClass]="activeLink == 'general' ? 'active' : ''"
       >
@@ -18,7 +17,11 @@
 
     <!-- circular tasks icon -->
     <li>
-      <a routerLink="/work" data-toggle="tab" title="work">
+      <a
+        routerLink="/work"
+        title="instrument"
+        [ngClass]="activeLink == 'instrument' ? 'active' : ''"
+      >
         <span class="round-tabs two">
           <i class="material-icons">business_center</i>
         </span>
@@ -27,7 +30,11 @@
 
     <!-- circular home icon -->
     <li>
-      <a routerLink="/address" data-toggle="tab" title="address">
+      <a
+        routerLink="/address"
+        [ngClass]="activeLink == 'other_info' ? 'active' : ''"
+        title="address"
+      >
         <span class="round-tabs three">
           <i class="material-icons">library_books</i>
         </span>
@@ -36,7 +43,11 @@
 
     <!-- circular ok icon -->
     <li>
-      <a routerLink="/result" data-toggle="tab" title="completed">
+      <a
+        routerLink="/result"
+        [ngClass]="activeLink == 'result' ? 'active' : ''"
+        title="completed"
+      >
         <span class="round-tabs four">
           <i class="material-icons">check_box</i>
         </span>

src/app/components/plugins/plugins.module.ts

@@ -12,12 +12,11 @@ import {
   MatPaginatorModule,
   MatProgressSpinnerModule,
   MatSortModule
-} from '@angular/material';
-import { } from '@angular/material/table';
+} from "@angular/material";
+import {} from "@angular/material/table";
 
 @NgModule({
-  declarations: [
-  ],
+  declarations: [],
   imports: [
     CommonModule,
     MatButtonModule,
@@ -30,9 +29,8 @@ import { } from '@angular/material/table';
     MatTableModule,
     MatPaginatorModule,
     MatProgressSpinnerModule,
-    MatSortModule,
+    MatSortModule
   ],
-  exports: [
-  ]
+  exports: []
 })
-export class PluginsModule { }
+export class PluginsModule {}

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

@@ -29,8 +29,14 @@ import {
   MatProgressSpinnerModule,
   MatSortModule
 } from "@angular/material";
+
 import { MatPasswordStrengthModule } from "@angular-material-extensions/password-strength";
-import { BreadcrumbModule, IconsModule } from "angular-bootstrap-md";
+import {
+  BreadcrumbModule,
+  IconsModule,
+  WavesModule
+} from "angular-bootstrap-md";
+
 import { TermsComponent } from "@app/components/terms/terms.component";
 import { InvestmentProposalsComponent } from "@app/components/investment-proposals/investment-proposals.component";
 import { InvestmentProposalGeneralInfoComponent } from "@app/components/investment-proposals/general-info/general-info.component";
@@ -89,7 +95,8 @@ import { WorkflowGuard } from "@app/services/investment-proposal-workflow.guard"
     AngularMyDatePickerModule,
     MatPasswordStrengthModule,
     HttpClientModule,
-    ArchwizardModule
+    ArchwizardModule,
+    WavesModule
   ],
   providers: [
     WorkflowGuard,

src/app/services/investment-proposal-workflow.service.ts

@@ -15,7 +15,7 @@ import { APNComponent } from "@app/components/instruments/apn/apn.component";
 })
 export class InvestmentProposalWorkflowService {
   workflow = [
-    { step: STEPS.general, valid: true }, // test purposes
+    { step: STEPS.general, valid: false }, // test purposes
     { step: STEPS.work, valid: false },
     { step: STEPS.address, valid: false },
     { step: STEPS.result, valid: false }

src/styles.scss

@@ -9,6 +9,12 @@ body {
 
 .align-container {
   padding: 0 14px;
+  @media screen and (max-width: 960px) {
+    padding: 0;
+  }
+  @media screen and (max-width: 480px) {
+    padding: 0;
+  }
 }
 
 .borderless {