allerta-vvf/frontend/src/app/_components/table/table.component.html

<ng-container *ngIf="sourceType && enablePaginationTypes.includes(sourceType)">
    <div class="row mt-5">
        <div class="col-xs-12 col-12">
            <input type="text" class="form-control" placeholder="{{ 'search'|translate|titlecase }}" [(ngModel)]="searchText" (ngModelChange)="onSearchTextChange($event)">
        </div>
    </div>
</ng-container>

<div id="list" class="table-responsive mt-4">
    <table *ngIf="sourceType === 'list'" id="table" class="table table-striped table-bordered dt-responsive nowrap">
        <thead>
            <tr>
                <th>{{ 'name'|translate|titlecase }}</th>
                <th>{{ 'available'|translate|titlecase }}</th>
                <th>{{ 'driver'|translate|titlecase }}</th>
                <ng-container *ngIf="auth.profile.can('users-read')">
                <th>{{ 'call'|translate|titlecase }}</th>
                </ng-container>
                <th>{{ 'services'|translate|titlecase }}</th>
                <th>{{ 'availability_minutes'|translate|titlecase }}</th>
            </tr>
        </thead>
        <tbody id="table_body">
            <tr *ngFor="let row of data">
                <td>
                    <i *ngIf="auth.profile.can('users-impersonate') && row.id !== auth.profile.id" class="fa fa-user me-2" (click)="onUserImpersonate(row.id)"></i>
                    <img alt="red helmet" src="./assets/icons/red_helmet.png" width="20px" *ngIf="row.chief">
                    <img alt="red helmet" src="./assets/icons/black_helmet.png" width="20px" *ngIf="!row.chief">
                    <ng-container *ngIf="(getTime() - getTS(row.last_access)) <= 30;else userOffline"><u>{{ row.name }}</u></ng-container>
                    <ng-template #userOffline>{{ row.name }}</ng-template>
                </td>
                <td (click)="onChangeAvailability(row.id, row.available ? 0 : 1)">
                    <i class="fa fa-check" style="color:green" *ngIf="row.available"></i>
                    <i class="fa fa-times" style="color:red" *ngIf="!row.available"></i>
                </td>
                <td>
                    <img alt="driver" src="./assets/icons/wheel.png" width="20px" *ngIf="row.driver">
                </td>
                <td *ngIf="auth.profile.can('users-read')">
                    <ng-container *ngIf="row.phone_number">
                        <a href="tel:{{row.phone_number}}"><i class="fa fa-phone"></i></a>
                    </ng-container>
                </td>
                <td>{{ row.services }}</td>
                <td>{{ row.availability_minutes }}</td>
            </tr>
        </tbody>
    </table>

    <ng-container *ngIf="sourceType === 'logs'">
    <table id="table" class="table table-striped table-bordered dt-responsive nowrap">
        <thead>
            <tr>
                <th>{{ 'action'|translate|titlecase }}</th>
                <th>{{ 'changed'|translate|titlecase }}</th>
                <th>{{ 'editor'|translate|titlecase }}</th>
                <th>{{ 'datetime'|translate|titlecase }}</th>
            </tr>
        </thead>
        <tbody id="table_body">
            <tr *ngFor="let row of displayedData; index as i">
                <td>{{ row.action }}</td>
                <td>{{ row.changed }}</td>
                <td>{{ row.editor }}</td>
                <td>{{ row.created_at | date: 'dd/MM/YYYY HH:mm:ss' }}</td>
            </tr>
        </tbody>
    </table>
    </ng-container>

    <ng-container>
    <table *ngIf="sourceType === 'services'" id="table" class="table table-striped table-bordered dt-responsive nowrap">
        <thead>
            <tr>
                <th>#</th>
                <th>{{ 'start'|translate|titlecase }}</th>
                <th>{{ 'end'|translate|titlecase }}</th>
                <th>{{ 'code'|translate|titlecase }}</th>
                <th>{{ 'chief'|translate|titlecase }}</th>
                <th>{{ 'drivers'|translate|titlecase }}</th>
                <th>{{ 'crew'|translate|titlecase }}</th>
                <th>{{ 'place'|translate|titlecase }}</th>
                <th>{{ 'notes'|translate|titlecase }}</th>
                <th>{{ 'type'|translate|titlecase }}</th>
                <th>{{ 'update'|translate|titlecase }}</th>
                <th>{{ 'remove'|translate|titlecase }}</th>
            </tr>
        </thead>
        <tbody id="table_body">
            <tr *ngFor="let row of displayedData; index as i">
                <td>{{ data.length - (rowsPerPage * (currentPage-1) + i) }}</td>
                <td>{{ row.start | date:'dd/MM/YYYY, HH:mm' }}</td>
                <td>{{ row.end | date:'dd/MM/YYYY, HH:mm' }}</td>
                <td>{{ row.code }}</td>
                <td>{{ row.chief }}</td>
                <td>{{ extractNamesFromObject(row.drivers).join(', ') }}</td>
                <td>{{ extractNamesFromObject(row.crew).join(', ') }}</td>
                <td>
                    <ng-container *ngIf="row.place.name"><i>{{ row.place.name }}</i></ng-container><br>
                    <ng-container *ngIf="row.place.village">{{ row.place.village }}</ng-container><br>
                    <a class="place_details_link cursor-pointer" (click)="openPlaceDetails(row.place.id)">{{ 'more details'|translate|titlecase }}</a>
                </td>
                <td>{{ row.notes }}</td>
                <td>{{ row.type }}</td>
                <td (click)="editService(row.id)"><i class="fa fa-edit"></i></td>
                <td (click)="deleteService(row.id)"><i class="fa fa-trash"></i></td>
            </tr>
        </tbody>
    </table>
    </ng-container>

    <ng-container>
    <table *ngIf="sourceType === 'trainings'" id="table" class="table table-striped table-bordered dt-responsive nowrap">
        <thead>
            <tr>
                <td>#</td>
                <th>{{ 'name'|translate|titlecase }}</th>
                <th>{{ 'start'|translate|titlecase }}</th>
                <th>{{ 'end'|translate|titlecase }}</th>
                <th>{{ 'chief'|translate|titlecase }}</th>
                <th>{{ 'crew'|translate|titlecase }}</th>
                <th>{{ 'place'|translate|titlecase }}</th>
                <th>{{ 'notes'|translate|titlecase }}</th>
                <th>{{ 'update'|translate|titlecase }}</th>
                <th>{{ 'remove'|translate|titlecase }}</th>
            </tr>
        </thead>
        <tbody id="table_body">
            <tr *ngFor="let row of displayedData; index as i">
                <td>{{ data.length - (rowsPerPage * (currentPage-1) + i) }}</td>
                <td>{{ row.name }}</td>
                <td>{{ row.beginning }}</td>
                <td>{{ row.end }}</td>
                <td>{{ row.chief }}</td>
                <td>{{ row.crew }}</td>
                <td>{{ row.place }}</td>
                <td>{{ row.notes }}</td>
                <td><i class="fa fa-edit"></i></td>
                <td><i class="fa fa-trash"></i></td>
            </tr>
        </tbody>
    </table>
    </ng-container>
</div>

<ng-container *ngIf="sourceType && enablePaginationTypes.includes(sourceType)">
    <div class="row mt-5">
        <div class="col-xs-12 col-12">
            <pagination
              [totalItems]="totalElements"
              [(ngModel)]="currentPage"
              (pageChanged)="pageChanged($event)"
              [maxSize]="maxPaginationSize"
              [itemsPerPage]="rowsPerPage"
              [boundaryLinks]="totalElements > 100"
              [customFirstTemplate]="firstTemplate"
              [customLastTemplate]="lastTemplate"
              [customPreviousTemplate]="prevTemplate"
              [customNextTemplate]="nextTemplate"
              [customPageTemplate]="pageTemplate"
            ></pagination>
        </div>
    </div>
</ng-container>

<ng-template #pageTemplate let-page let-disabled="disabled" let-currentPage="currentPage">
  {{ page.number }}
</ng-template>
 
<ng-template #nextTemplate let-disabled="disabled" let-currentPage="currentPage">
  Successiva
</ng-template>
 
<ng-template #prevTemplate let-disabled="disabled" let-currentPage="currentPage">
  Precedente
</ng-template>
 
<ng-template #lastTemplate let-disabled="disabled" let-currentPage="currentPage">
  Ultima
</ng-template>
 
<ng-template #firstTemplate let-disabled="disabled" let-currentPage="currentPage">
  Prima
</ng-template>