soma-frontend/src/app/components/organizations/organizations.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">Organizaciones</li>
            </ol>
          </nav>

          <a class="btn btn-primary" [routerLink]="['/organizations/new']" *ngIf="allowedUser()">
            Nuevo registro
          </a>
        </div>
      </div>

      <div class="col-12">
          <div class="align-container">

            <h4><b>Listado de organizaciones</b></h4>
            <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="name">
                    <th mat-header-cell *matHeaderCellDef>Organizacion</th>
                    <td mat-cell *matCellDef="let row">{{row.name}}</td>
                  </ng-container>
          
                  <!-- State Column -->
                  <ng-container matColumnDef="contactName">
                    <th mat-header-cell *matHeaderCellDef>Nombre de contacto</th>
                    <td mat-cell *matCellDef="let row">{{row.contactName}}</td>
                  </ng-container>

                  <!-- City Column -->
                  <ng-container matColumnDef="contactNumber">
                    <th mat-header-cell *matHeaderCellDef>Número de contacto</th>
                    <td mat-cell *matCellDef="let row">{{row.contactNumber}}</td>
                  </ng-container>

                  <!-- Country Column -->
                  <ng-container matColumnDef="country">
                    <th mat-header-cell *matHeaderCellDef>País</th>
                    <td mat-cell *matCellDef="let row">{{row.country}}</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 class="btn btn-dark btn-sm" [routerLink]="['/organization', row.id]" *ngIf="allowedUser()" >
                          Ver detalles
                        </a>
                        <a class="btn btn-primary btn-sm" [routerLink]="['/organization', row.id, 'edit']" *ngIf="allowedUser()" >
                          Editar
                        </a>
                        <a class="btn btn-danger btn-sm" (click)="delete_organization(row.id)" *ngIf="allowedUser()" >
                          Eliminar
                        </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>