frontend-inversiones/src/app/components/investments/investments.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">Inversiones activas</li>
            </ol>
          </nav>
        </div>
      </div>

      <div class="col-12">
        <div class="align-container">
          <h4><b>Listado de inversiones</b></h4>
          <br />
          <div class="form-group">
            <label for="filter" class="control-label">Filtro: </label>
            <input
              name="filter"
              (keyup)="applyFilter($event)"
              class="form-control input-md"
              placeholder="Codigo, Instrumento, Asunto o Comentario"
            />
          </div>
          <br />
          <div class="example-container mat-elevation-z8">
            <div class="example-table-container table-responsive">
              <table
                mat-table
                [dataSource]="dataSource"
                matSort
                class="example-table"
              >
                <!-- Name Column -->
                <ng-container matColumnDef="codigo_inversion">
                  <th mat-header-cell *matHeaderCellDef mat-sort-header>
                    Codigo
                  </th>
                  <td mat-cell *matCellDef="let row">
                    {{ row.codigo_inversion }}
                  </td>
                </ng-container>
                <!-- Country Column -->
                <ng-container matColumnDef="asunto">
                  <th mat-header-cell *matHeaderCellDef mat-sort-header>
                    Asunto
                  </th>
                  <td mat-cell *matCellDef="let row">
                    {{ row.asunto }}
                  </td>
                </ng-container>

                <!-- Country Column -->
                <ng-container matColumnDef="id_empresa">
                  <th mat-header-cell *matHeaderCellDef mat-sort-header>
                    Empresa
                  </th>
                  <td mat-cell *matCellDef="let row">
                    {{
                      row.id_empresa == "" || row.id_empresa == undefined
                        ? "-"
                        : row.id_empresa.nombre
                    }}
                  </td>
                </ng-container>

                <!-- Country Column -->
                <ng-container matColumnDef="id_inversion_instrumento">
                  <th mat-header-cell *matHeaderCellDef mat-sort-header>
                    Instrumento
                  </th>
                  <td mat-cell *matCellDef="let row">
                    {{
                      row.id_inversion_instrumento.id_tipo_instrumento == "" ||
                      row.id_inversion_instrumento.id_tipo_instrumento ==
                        undefined
                        ? "-"
                        : row.id_inversion_instrumento.id_tipo_instrumento
                            .nombre
                    }}
                  </td>
                </ng-container>

                <!--  Column -->
                <ng-container matColumnDef="id">
                  <th mat-header-cell *matHeaderCellDef>&nbsp;</th>
                  <td mat-cell *matCellDef="let row">
                    <div class="action-buttons">
                      <a
                        title="Detalle propuesta"
                        class="btn btn-primary btn-custom-small"
                        (click)="view_investment_proposal(row.id_inversion)"
                      >
                        <i class="fas fa-info"></i>
                      </a>
                      <a
                        title="Costos"
                        class="btn btn-warning btn-custom-small"
                        *ngIf="
                          instrument_has_costs(row.id_inversion_instrumento)
                        "
                        (click)="
                          go_to_instrument_url(
                            row.id_inversion,
                            row.id_inversion_instrumento.id_tipo_instrumento
                              .codigo,
                            'costs'
                          )
                        "
                      >
                        <i class="fas fa-funnel-dollar"></i>
                        Costos
                      </a>
                    </div>
                  </td>
                </ng-container>

                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                <tr
                  mat-row
                  *matRowDef="let row; columns: displayedColumns"
                ></tr>
              </table>

              <mat-paginator
                [pageSizeOptions]="[10, 15, 25]"
                [pageIndex]="0"
                [pageSize]="10"
              ></mat-paginator>
            </div>
          </div>
        </div>
      </div>
      <br />
    </div>
  </div>
</div>