matsen-tool-fe/matsen-tool/src/app/sales/sales.component.html

<div class="spt-container">
    <div class="d-flex justify-content-between align-items-start">
        <h2>{{ 'basic.sales' | translate }}</h2>
        <button class="btn btn-primary" (click)="openModalNewSale()">{{ 'basic.new-sale' | translate }}</button>
    </div>

    <div class="sales-summary-container mb-4" *ngFor="let saleSummary of saleSummaries">
        <p><strong>{{ saleSummary.ownerName }}</strong></p>
        <div class="sales-summary-bar">
            <div>
                <span class="sales-summary-turnover"
                      [ngStyle]="{ 'width.%': calculateWidthPercentage(Number(saleSummary.turnover), saleSummaryMaxTurnover)}">
                    {{ 'sales.turnover' | translate }}: <strong>{{ saleSummary.turnover | currency: 'EUR' }}</strong>
                </span>
            </div>
        </div>
        <div class="sales-summary-bar">
            <div>
                <span class="sales-summary-profit"
                      [ngStyle]="{ 'width.%': calculateWidthPercentage(Number(saleSummary.profit), saleSummaryMaxTurnover)}">
                    {{ 'sales.profit' | translate }}: <strong>{{ saleSummary.profit | currency: 'EUR' }}</strong>
                </span>
            </div>
        </div>
    </div>


    <table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)"
           class="mat-elevation-z8 mb-3">

        <ng-container matColumnDef="pos">
            <th mat-header-cell *matHeaderCellDef>
                {{ 'overview.number' | translate }}
            </th>
            <td mat-cell
                *matCellDef="let element">{{ (pageSize * pageIndex) + dataSource.filteredData.indexOf(element) + 1 }}
            </td>
        </ng-container>

        <ng-container matColumnDef="user">
            <th mat-header-cell *matHeaderCellDef mat-sort-header
                sortActionDescription="{{ 'overview.sort' | translate }}:  {{ 'overview.sale-user' | translate }}">
                {{ 'overview.sale-user' | translate }}
            </th>
            <td mat-cell *matCellDef="let element">
                {{ element.ownerName }}
            </td>
        </ng-container>

        <ng-container matColumnDef="partner">
            <th mat-header-cell *matHeaderCellDef mat-sort-header="address"
                sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.sale-partner' | translate }}">
                {{ 'overview.sale-partner' | translate }}
            </th>
            <td mat-cell *matCellDef="let element">
                <a [routerLink]="['/customer', ApiConverter.extractId(element.partner)]">{{ element.partnerName }}</a>
            </td>
        </ng-container>

        <ng-container matColumnDef="product">
            <th mat-header-cell *matHeaderCellDef mat-sort-header
                sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.productname' | translate }}">
                {{ 'overview.productname' | translate }}
            </th>
            <td mat-cell *matCellDef="let element">
                <a [routerLink]="['/products', ApiConverter.extractId(element.product)]">{{ element.productName }}</a>
            </td>
        </ng-container>

        <ng-container matColumnDef="turnover">
            <th mat-header-cell *matHeaderCellDef mat-sort-header
                sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.turnover' | translate }}">
                {{ 'overview.turnover' | translate }}
            </th>
            <td mat-cell *matCellDef="let element">
                {{ element.turnover | currency: 'EUR' }}
            </td>
        </ng-container>

        <ng-container matColumnDef="profit">
            <th mat-header-cell *matHeaderCellDef mat-sort-header
                sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.profit' | translate }}">
                {{ 'overview.profit' | translate }}
            </th>
            <td mat-cell *matCellDef="let element">
                {{ element.profit | currency: 'EUR' }}
            </td>
        </ng-container>

        <ng-container matColumnDef="date">
            <th mat-header-cell *matHeaderCellDef mat-sort-header
                sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.createdAt' | translate }}">
                {{ 'overview.createdAt' | translate }}
            </th>
            <td mat-cell *matCellDef="let element">
                {{ element.createdAt | date:'dd.MM.YYYY HH:mm' }}
            </td>
        </ng-container>

        <ng-container matColumnDef="details">
            <th mat-header-cell *matHeaderCellDef>
                {{ 'overview.details' | translate }}
            </th>
            <td mat-cell *matCellDef="let element">
                <span class="btn btn-primary bi bi-zoom-in p-2-4"
                      data-type="user-tool" data-action="edit" (click)="navigateToSaleDetails(element)"></span>
            </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
    <mat-paginator class="rounded-1"
                   [pageSizeOptions]="[10,25,50]"
                   [length]="length"
                   (page)="handlePageEvent($event)"
                   [pageSize]="pageSize"
                   [pageIndex]="pageIndex"
                   showFirstLastButtons>
    </mat-paginator>
</div>