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

<h2 class="floating-title">{{ title }}</h2>

<div class="main-content">
  <div class="container-fluid">
    <div class="row">
      <div class="col-12 align-right">
        <div class="align-container">
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
              <li class="breadcrumb-item">
                <a [routerLink]="['/']">Dashboard</a>
              </li>
              <li class="breadcrumb-item">
                <a [routerLink]="['/investment-proposals']">
                  Propuestas de inversión
                </a>
              </li>
              <li class="breadcrumb-item">Nueva</li>
            </ol>
          </nav>
        </div>
      </div>

      <br />
    </div>
    <br />
    <div class="row justify-content-center">
      <div class="col-12">
        <div class="align-container">
          <inv-proposal-navbar
            [activeLink]="'result'"
            [investmentID]="investmentProposalID"
          ></inv-proposal-navbar>

          <div class="card borderless">
            <div class="card-header card-header-icon card-header-rose">
              <h4 class="card-title">
                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">
                        <span class="badge badge-success"
                          >Información general</span
                        >
                      </div>
                      <div class="timeline-body">
                        <div class="row">
                          <div class="col-lg-3 col-md-4 col-sm-6">
                            <h4>Asunto:</h4>
                            <div class="field">
                              {{ general.asunto }}
                            </div>
                          </div>
                          <div class="col-lg-3 col-md-4 col-sm-6">
                            <h4>Orígenes de fondo:</h4>
                            <div class="field">
                              {{ funds }}
                            </div>
                          </div>
                          <div class="col-lg-3 col-md-4 col-sm-6">
                            <h4>Nombre:</h4>
                            <div class="field">
                              {{ general.name }}
                            </div>
                          </div>
                          <div class="col-lg-3 col-md-4 col-sm-6">
                            <h4>Tipo Tasa:</h4>
                            <div class="field">
                              {{ rates }}
                            </div>
                          </div>
                          <div class="col-lg-3 col-md-4 col-sm-6">
                            <h4>Tipo Renta:</h4>
                            <div class="field">
                              {{ revenues }}
                            </div>
                          </div>
                          <div class="col-lg-3 col-md-4 col-sm-6">
                            <h4>Periodicidad:</h4>
                            <div class="field">
                              {{ periodicities }}
                            </div>
                          </div>
                          <div class="col-lg-3 col-md-4 col-sm-6">
                            <h4>Instrumentos:</h4>
                            <div class="field">
                              {{ instrumentTypes }}
                            </div>
                          </div>
                          <div class="col-lg-3 col-md-4 col-sm-6">
                            <h4>Casa:</h4>
                            <div class="field">
                              {{ financials }}
                            </div>
                          </div>
                          <div class="col-lg-3 col-md-4 col-sm-6">
                            <h4>Base:</h4>
                            <div class="field">
                              {{ base_types }}
                            </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-warning">Instrumento</span>
                        <ng-template instrument-host></ng-template>
                      </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"
                          >Información complementaria</span
                        >
                      </div>
                      <div class="timeline-body">
                        <div class="row">
                          <div class="col-lg-3 col-md-4 col-sm-6">
                            <h4>Tipo de mercado:</h4>
                            <div class="field">
                              {{ markets }}
                            </div>
                          </div>
                          <div class="col-lg-3 col-md-4 col-sm-6">
                            <h4>Emisores:</h4>
                            <div class="field">
                              {{ emitters }}
                            </div>
                          </div>
                          <div class="col-lg-3 col-md-4 col-sm-6">
                            <h4>Empresa:</h4>
                            <div class="field">
                              {{ companies }}
                            </div>
                          </div>
                          <div class="col-lg-3 col-md-4 col-sm-6">
                            <h4>País:</h4>
                            <div class="field">
                              {{ countries }}
                            </div>
                          </div>
                          <div class="col-lg-3 col-md-4 col-sm-6">
                            <h4>Plazo:</h4>
                            <div class="field">
                              {{ payment_terms }}
                            </div>
                          </div>
                          <div class="col-lg-3 col-md-4 col-sm-6">
                            <h4>Tipos de operaciones:</h4>
                            <div class="field">
                              {{ operations }}
                            </div>
                          </div>
                          <div class="col-lg-3 col-md-4 col-sm-6">
                            <h4>Comentarios:</h4>
                            <div class="field">
                              {{ complement.comentarios }}
                            </div>
                          </div>
                          <div class="col-lg-3 col-md-4 col-sm-6">
                            <h4>Justificación:</h4>
                            <div class="field">
                              {{ complement.justificacion }}
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>

                <div *ngIf="!investmentExists" class="text-center">
                  <button
                    class="btn btn-success center-component"
                    [disabled]="!isFormValid"
                    (click)="submit()"
                    type="button"
                  >
                    Guardar propuesta
                  </button>
                </div>

                <div *ngIf="investmentExists">
                  <a
                    class="btn btn-default center-component margin-right float-left"
                    href="#/investment-proposals"
                  >
                    Ir a listado
                  </a>

                  <button
                    *ngIf="can_finish_proposal(state)"
                    class="btn btn-primary center-component float-right"
                    type="button"
                    (click)="finishProposal()"
                  >
                    Finalizar
                  </button>

                  <button
                    *ngIf="can_send_to_review(state)"
                    class="btn btn-primary center-component float-right"
                    type="button"
                    (click)="sendToReview()"
                  >
                    Enviar a revision
                  </button>
                  <button
                    class="btn btn-success center-component margin-right float-right"
                    type="button"
                    (click)="update_proposal()"
                  >
                    Guardar propuesta
                  </button>
                  <button
                    class="btn btn-default center-component margin-right float-right"
                    type="button"
                    (click)="goToPrevious()"
                  >
                    Anterior
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>