pracownik.component.html

<app-sidebar></app-sidebar>
<div style="margin-left: 10%;">
  <div class="zawartosc">
    <div class="row">

      <div class="col-md-13">

        <br>
        <h1>Baza pracowników</h1>

      </div>

    </div>
    <div class="row">
      <div class="col-md-11">
        <p>Poniżej znajduje się baza pracowników danej firmy
          <button type="button" id="add" name="submit" class="btn btn-success pull-right"
                  mat-raised-button (click)="openDialog()"><img class="icons" alt="" src="../assets/icons8-add-32.png">
          </button>
          <button type="button" id="print" name="submit" class="btn btn-info pull-right"
                  mat-raised-button (click)="openDialog3()"><img class="icons" alt="" src="../assets/icons8-print-32.png">
          </button>
        </p>

        <hr>
        <mat-form-field>
          <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
        </mat-form-field>
        <div class="mat-elevation-z2">
          <table mat-table [dataSource]="dataSource" matSort>
            <ng-container matColumnDef="select">
              <th mat-header-cell *matHeaderCellDef>
                <mat-checkbox (change)="$event ? masterToggle() : null"
                              [checked]="selection.hasValue() && isAllSelected()"
                              [indeterminate]="selection.hasValue() && !isAllSelected()"
                              [aria-label]="checkboxLabel()">
                </mat-checkbox>
              </th>
              <td mat-cell *matCellDef="let row">
                <mat-checkbox (click)="$event.stopPropagation()"
                              (change)="$event ? selection.toggle(row) : null"
                              [checked]="selection.isSelected(row)"
                              [aria-label]="checkboxLabel(row)">
                </mat-checkbox>
              </td>
            </ng-container>
            <ng-container matColumnDef="id">
              <th mat-header-cell *matHeaderCellDef> No.</th>
              <td mat-cell *matCellDef="let user"> {{user.id}} </td>
            </ng-container>

            <ng-container matColumnDef="name">
              <th mat-header-cell *matHeaderCellDef> Imię</th>
              <td mat-cell *matCellDef="let user"> {{user.name}} </td>
            </ng-container>


            <ng-container matColumnDef="surname">
              <th mat-header-cell *matHeaderCellDef> Nazwisko</th>
              <td mat-cell *matCellDef="let user"> {{user.surname}} </td>
            </ng-container>


            <ng-container matColumnDef="status">
              <th mat-header-cell *matHeaderCellDef> Status</th>
              <td mat-cell *matCellDef="let user"> {{user.status}} </td>
            </ng-container>

            <ng-container matColumnDef="section">
              <th mat-header-cell *matHeaderCellDef> Dział</th>
              <td mat-cell *matCellDef="let user"> {{user.section}} </td>
            </ng-container>

            <ng-container matColumnDef="email">
              <th mat-header-cell *matHeaderCellDef> Email</th>
              <td mat-cell *matCellDef="let user"> {{user.email}} </td>
            </ng-container>

            <ng-container matColumnDef="mobileNumber">
              <th mat-header-cell *matHeaderCellDef> Telefon kom.</th>
              <td mat-cell *matCellDef="let user"> {{user.mobileNumber}} </td>
            </ng-container>

            <ng-container matColumnDef="phoneNumber">
              <th mat-header-cell *matHeaderCellDef> Telefon stacjonarny</th>
              <td mat-cell *matCellDef="let user"> {{user.phoneNumber}} </td>
            </ng-container>

            <ng-container matColumnDef="position">
              <th mat-header-cell *matHeaderCellDef> Stanowisko</th>
              <td mat-cell *matCellDef="let user"> {{user.position}} </td>
            </ng-container>

            <ng-container matColumnDef="edit">
              <th mat-header-cell *matHeaderCellDef> Edytuj</th>
              <td mat-cell *matCellDef="let row">
                <button class="btn btn-warning" (click)="openDialog2()"><img class="icons" alt=""
                 src="../assets/icons8-edit-32.png"></button>
              </td>
            </ng-container>

            <ng-container matColumnDef="delete">
              <th mat-header-cell *matHeaderCellDef> Usuń</th>
              <td mat-cell *matCellDef="let row">
                <button class="btn btn-danger" (click)="openDialog1()"><img class="icons" alt=""
                src="../assets/icons8-delete-bin-32.png"></button>
              </td>
            </ng-container>

            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selection.toggle(row)">

            </tr>
          </table>
          <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" showFirstLastButtons></mat-paginator>
        </div>
      </div>
    </div>

  </div>
</div>