buntspecht/buntspecht-frontend/src/app/pages/management/management.page.html

<div class="flex column fill">
    @if (entries && entries.error) {
    <div class="flex column fill">
        <mat-card class="accent box">
            <mat-card-header>
                <mat-card-title>{{ 'management.error.' + entries.error.status | i18n}}</mat-card-title>
                <mat-card-subtitle>{{'management.error' | i18n}}</mat-card-subtitle>
            </mat-card-header>
            <mat-card-content>
                <p>
                    {{ 'management.error.' + entries.error.status + '.text' | i18n}}
                </p>
            </mat-card-content>
        </mat-card>
    </div>
    }

    <div class="flex wrap filter-container">
        <a mat-icon-button (click)="filterOpen=!filterOpen" title="{{'turnovers.filter' | i18n}}"
            [color]="filterOpen ? 'primary': 'accent'">
            <mat-icon>filter_alt</mat-icon>
        </a>

        @if (filterOpen) {
        <form class="flex wrap filter">
            <mat-form-field class="margin">
                <mat-label>{{'management.filter.created' | i18n}}</mat-label>
                <mat-date-range-input [rangePicker]="picker">
                    <input matStartDate placeholder="{{'turnovers.filter.created.from' | i18n}}"
                        [value]="entries && entries.filter && entries.filter.from"
                        (dateChange)="setFilter('from', $event.value && $event.value.toISOString() || undefined)">
                    <input matEndDate placeholder="{{'turnovers.filter.created.to' | i18n}}"
                        [value]="entries && entries.filter && entries.filter.to"
                        (dateChange)="setFilter('to', $event.value && $event.value.endOf('day').toISOString() || undefined)">
                </mat-date-range-input>
                <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
                <mat-date-range-picker #picker></mat-date-range-picker>
            </mat-form-field>


            <mat-form-field class="margin">
                <mat-label>{{'management.filter.username' | i18n}}</mat-label>
                <input type="text" matInput [matAutocomplete]="auto" [formControl]="usersFormControl"
                    (change)="setInputFilter('username', $event.target)">
                <mat-autocomplete #auto="matAutocomplete" (optionSelected)="setFilter('username', $event.option.value)">
                    @for (user of users | async; track user.username) {
                    <mat-option [value]="user.username">{{user.username}}</mat-option>
                    }
                </mat-autocomplete>
            </mat-form-field>
        </form>
        }
    </div>

    @if (entries && entries.total == 0) {
    <mat-list>
        <mat-list-item>
            <p>{{'paginator.empty' | i18n}}</p>
        </mat-list-item>
    </mat-list>
    }

    @if (entries && entries.total) {
    <div class="scroll-container">
        <table class="default-table" mat-table [dataSource]="entries.results || []" multiTemplateDataRows matSort
            (matSortChange)="applySort($event)" [matSortDisableClear]="true">
            <ng-container matColumnDef="username">
                <th mat-header-cell *matHeaderCellDef mat-sort-header [disableClear]="false">
                    {{'user.username' | i18n}}
                </th>
                <td mat-cell *matCellDef="let entry">
                    <div class="flex middle">
                        <a class="select-user"
                            [ngClass]="{'selected': entries.filter && entries.filter.username == entry[0]}"
                            (click)="selectUser(entry[0])">{{entry[0]}}</a>
                    </div>
                </td>
            </ng-container>

            <ng-container matColumnDef="price">
                <th mat-header-cell *matHeaderCellDef mat-sort-header>
                    <span class="spacer"></span>
                    <span>{{'turnover.price' | i18n}}</span>
                </th>
                <td mat-cell *matCellDef="let entry">
                    <div class="flex">
                        <span class="spacer"></span>
                        <span>{{entry[1] | number: '1.2-2'}}</span>
                        <span>&nbsp;{{'turnover.price.suffix' | i18n}}</span>
                    </div>
                </td>
            </ng-container>

            <ng-container matColumnDef="timeInvestment">
                <th mat-header-cell *matHeaderCellDef mat-sort-header>
                    <span class="spacer"></span>
                    <span>{{'turnover.timeInvestment' | i18n}}</span>
                </th>
                <td mat-cell *matCellDef="let entry">
                    <div class="flex">
                        <span class="spacer"></span>
                        <span>{{entry[2] | number: '1.1-1'}}</span>
                        <span> &nbsp;{{'turnover.timeInvestment.suffix' | i18n}}</span>
                    </div>
                </td>
            </ng-container>

            <ng-container matColumnDef="menu">
                <th mat-header-cell *matHeaderCellDef></th>
                <td mat-cell *matCellDef="let entry">
                    @if (entries.filter && entries.filter.username == entry[0]) {
                    <button mat-icon-button (click)="expanded = !expanded">
                        @if (expanded) {
                        <mat-icon>keyboard_arrow_up</mat-icon>
                        } @else {
                        <mat-icon>keyboard_arrow_down</mat-icon>
                        }
                    </button>
                    }
                </td>
            </ng-container>

            <ng-container matColumnDef="expanded">
                <td mat-cell *matCellDef="let entry" [attr.colspan]="columns.length">
                    @if (expanded && entries.total && entries.filter && entries.filter.username == entry[0]) {
                    <ui-turnovers class="flex column fill" [turnovers]="turnovers" (page)="applyTurnoverPage($event)"
                        [enableSort]="false"></ui-turnovers>
                    }
                </td>
            </ng-container>

            <tr mat-header-row *matHeaderRowDef="columns; sticky: true"></tr>
            <tr class="entry" mat-row *matRowDef="let row; columns: columns;"></tr>

            <tr class="expanded-row" [ngClass]="{'visible' : expanded}" mat-row
                *matRowDef="let row; columns: expanded ? ['expanded'] : []"></tr>
        </table>
    </div>

    @if (!entries.filter || !entries.filter.username) {
    <span class="spacer"></span>
    <div class="mat-mdc-paginator flex">
        <span class="spacer"></span>
        <mat-paginator [pageSizeOptions]="pageSizeOptions" [pageIndex]="entries.offset / entries.limit"
            [length]="entries.total" [pageSize]="entries.limit" (page)="applyPage($event)" showFirstLastButtons>
        </mat-paginator>
    </div>
    }
    }

    @if (!entries || !entries.results && !entries.error) {
    <mat-progress-bar *ngIf="" mode="indeterminate"></mat-progress-bar>
    }
</div>