frontend-inversiones/src/app/components/investment-proposals/investment-proposals.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">Propuestas de inversión</li>
            </ol>
          </nav>
          <a
            class="btn btn-primary"
            *ngIf="userType(userRole, 'analistas')"
            (click)="create_investment_proposal()"
          >
            Nuevo registro
          </a>
        </div>
      </div>

      <div class="col-12">
        <div class="align-container">
          <h4><b>Listado de propuestas de inversión</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, Estado, Asunto o Comentario"
            />
          </div>
          <br />
          <div class="example-container mat-elevation-z8">
            <div class="example-table-container">
              <table mat-table [dataSource]="dataSource" class="example-table">
                <!-- Name Column -->
                <ng-container matColumnDef="codigo_inversion">
                  <th mat-header-cell *matHeaderCellDef>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>Asunto</th>
                  <td mat-cell *matCellDef="let row">
                    {{ row.asunto }}
                  </td>
                </ng-container>

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

                <!-- Country Column -->
                <ng-container matColumnDef="id_inversion_instrumento">
                  <th mat-header-cell *matHeaderCellDef>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>

                <ng-container matColumnDef="id_estado_inversion">
                  <th mat-header-cell *matHeaderCellDef>Estado</th>
                  <td mat-cell *matCellDef="let row">
                    {{
                      row.id_estado_inversion == "" ||
                      row.id_estado_inversion == undefined
                        ? "-"
                        : row.id_estado_inversion.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
                        *ngIf="
                          can_modify_or_send_to_review(
                            row.id_estado_inversion.codigo
                          ) ||
                          (can_finish_proposal(
                            row.id_estado_inversion.codigo
                          ) &&
                            userType(userRole, 'analistas'))
                        "
                        title="Editar"
                        class="btn btn-primary btn-custom-small"
                        (click)="modify_investment_proposal(row.id_inversion)"
                      >
                        <i class="fas fa-edit"></i>
                      </a>
                      <a
                        *ngIf="
                          can_modify_or_send_to_review(
                            row.id_estado_inversion.codigo
                          )
                        "
                        title="Enviar a revisión"
                        class="btn btn-dark btn-custom-small"
                        (click)="
                          sendToReview(
                            row.id_inversion,
                            row.codigo_inversion
                          ) && userType(userRole, 'analistas')
                        "
                      >
                        <i class="fas fa-share"></i>
                      </a>
                      <a
                        *ngIf="
                          can_review(row.id_estado_inversion.codigo) &&
                          userType(userRole, 'supervisores')
                        "
                        title="Revisar"
                        class="btn btn-warning btn-custom-small"
                        [routerLink]="[
                          '/investment-proposal',
                          row.id_inversion,
                          'review'
                        ]"
                      >
                        <i class="fas fa-spell-check"></i>
                      </a>
                      <a
                        *ngIf="
                          can_approve(row.id_estado_inversion.codigo) &&
                          userType(userRole, 'autorizadores')
                        "
                        title="Aprobar"
                        class="btn btn-warning btn-custom-small"
                        [routerLink]="[
                          '/investment-proposal',
                          row.id_inversion,
                          'approve'
                        ]"
                      >
                        <i class="far fa-thumbs-up"></i>
                      </a>

                      <a
                        *ngIf="
                          can_write_payment_info(
                            row.id_estado_inversion.codigo
                          ) && userType(userRole, 'analistas')
                        "
                        title="Información de pago"
                        class="btn btn-warning btn-custom-small"
                        [routerLink]="[
                          '/investment-proposal',
                          row.id_inversion,
                          'payment-info'
                        ]"
                      >
                        <i class="fas fa-money-check-alt"></i>
                      </a>
                      <a
                        *ngIf="
                          can_upload_payment(row.id_estado_inversion.codigo) &&
                          userType(userRole, 'contabilidad')
                        "
                        title="Requisición de pago"
                        class="btn btn-success btn-custom-small"
                        [routerLink]="[
                          '/investment-proposal',
                          row.id_inversion,
                          'payment'
                        ]"
                      >
                        <i class="fas fa-money-bill-wave"></i>
                      </a>
                      <a
                        *ngIf="
                          can_finish_proposal(row.id_estado_inversion.codigo) &&
                          userType(userRole, 'analistas')
                        "
                        title="Finalizar inversión"
                        class="btn btn-success btn-custom-small"
                        (click)="
                          finishProposal(row.id_inversion, row.codigo_inversion)
                        "
                      >
                        <i class="far fa-check-circle"></i>
                      </a>
                      <!--
                      <a
                        title="Historico"
                        class="btn btn-link btn-custom-small"
                        [routerLink]="[
                          '/investment-proposal',
                          row.id_inversion,
                          'change-history'
                        ]"
                      >
                        <i class="fas fa-history"></i>
                      </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>