1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<app-add-search
[title]="'Navios'"
[primaryButtonText]="'Adicionar Navio'"
[primaryButtonColor]="'primary'"
[primaryButtonAction]="openAddEmpForm.bind(this)"
[secondaryButtonText]="'Buscar Navio'"
[secondaryButtonColor]="'accent'"
[secondaryButtonAction]="openAddEmpFormSearch.bind(this)"
>
</app-add-search>
<div class="main-body">
<div class="table-container" style="overflow-x: auto">
<table mat-table [dataSource]="dataSource" matSort>
<!-- ID Column -->
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header>ID</th>
<td mat-cell *matCellDef="let row">{{ row.id }}</td>
</ng-container>
<!-- IMO Column -->
<ng-container matColumnDef="imo">
<th mat-header-cell *matHeaderCellDef mat-sort-header>IMO</th>
<td mat-cell *matCellDef="let row">{{ row.imo || "Null" }}</td>
</ng-container>
<!-- MMSI Column -->
<ng-container matColumnDef="mmsi">
<th mat-header-cell *matHeaderCellDef mat-sort-header>MMSI</th>
<td mat-cell *matCellDef="let row">{{ row.mmsi || "Null" }}</td>
</ng-container>
<!-- Nome Column -->
<ng-container matColumnDef="nome">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Nome</th>
<td mat-cell *matCellDef="let row">{{ row.nome || "Null" }}</td>
</ng-container>
<!-- Categoria Column -->
<ng-container matColumnDef="categoria">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Categoria</th>
<td mat-cell *matCellDef="let row">
{{ row.categoria == 1 ? "Granel Sólido" : "Granel Líquido" }}
</td>
</ng-container>
<!-- Flag Column -->
<ng-container matColumnDef="flag">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Flag</th>
<td mat-cell *matCellDef="let row">
<ng-container *ngIf="row.flag; else noFlag">
<div style="display: inline-flex; align-items: center;">
<img
[src]="countries[row.flag]?.flagUrl"
width="20"
height="15"
alt="{{ countries[row.flag]?.name }} flag"
style="margin-right: 8px"
/>
<span>{{ countries[row.flag]?.name }}</span>
</div>
</ng-container>
<ng-template #noFlag>Não Informado</ng-template>
</td>
</ng-container>
<!-- Action Column -->
<ng-container matColumnDef="action">
<th mat-header-cell *matHeaderCellDef>Action</th>
<td mat-cell *matCellDef="let row" style="white-space: nowrap">
<button mat-icon-button (click)="openEditForm(row)">
<mat-icon style="color: coral">edit</mat-icon>
</button>
<button mat-icon-button color="primary" (click)="getAceiteById(row)">
<mat-icon>visibility</mat-icon>
</button>
<button mat-icon-button color="warn" (click)="deleteEmployee(row.id)" *ngIf="user.role === 'COMPANY'">
<mat-icon>delete</mat-icon>
</button>
<button
*ngIf="user.role === 'COMPANY'"
mat-icon-button
color="accent"
(click)="addBlackList(row)"
>
<mat-icon>block</mat-icon>
</button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
</div>
<!-- Add paginator reference #paginator="matPaginator" -->
<mat-paginator
#paginator
[length]="totalItems"
[pageSize]="pageSize"
(page)="loadData($event)"
>
</mat-paginator>
<!-- Buttons for navigating to the first and last page -->
<button
mat-button
(click)="paginator.firstPage()"
[disabled]="paginator.pageIndex === 0"
>
Primeira Página
</button>
<button
mat-button
(click)="paginator.lastPage()"
[disabled]="paginator.pageIndex === paginator.getNumberOfPages() - 1"
>
Última Página
</button>
</div>