2654ea2965
As of this commit, I've restructured some of how data flows and added documentation to make it easier for the next time.
74 lines
3 KiB
HTML
74 lines
3 KiB
HTML
<div class="main-container container-fluid">
|
|
<ng-container *transloco="let t; read:'browse-authors'" >
|
|
<app-side-nav-companion-bar [hasFilter]="true" (filterOpen)="filterOpen.emit($event)" [filterActive]="filterActive">
|
|
<h2 title>
|
|
<span>{{t('title')}}</span>
|
|
</h2>
|
|
<h6 subtitle>{{t('author-count', {num: pagination.totalItems | number})}} </h6>
|
|
|
|
</app-side-nav-companion-bar>
|
|
|
|
<form [formGroup]="filterGroup">
|
|
<div class="row mb-3">
|
|
<div class="col-md-4 col-auto">
|
|
<div class="form-group">
|
|
<label for="role-selection">{{t('roles-label')}}</label>
|
|
<select2 [data]="allRoles"
|
|
id="role-selection"
|
|
formControlName="roles"
|
|
[hideSelectedItems]="true"
|
|
[multiple]="true"
|
|
[infiniteScroll]="true"
|
|
[resettable]="true"
|
|
style="min-width: 200px">
|
|
</select2>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-auto ms-auto me-auto">
|
|
<div class="form-group">
|
|
<label for="query">Filter</label>
|
|
<input type="text" id="query" style="min-width: 100px" autocomplete="off" formControlName="query" class="form-control" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-auto ms-auto">
|
|
<div class="form-group">
|
|
<label for="sort">{{t('sort-label')}}</label>
|
|
<app-sort-button (update)="onSortUpdate($event)"></app-sort-button>
|
|
<select class="form-select" style="min-width: 100px" formControlName="sortField">
|
|
<option [value]="PersonSortField.Name">{{t('name-label')}}</option>
|
|
<option [value]="PersonSortField.SeriesCount">{{t('series-count-label')}}</option>
|
|
<option [value]="PersonSortField.ChapterCount">{{t('issue-count-label')}}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<app-card-detail-layout
|
|
[isLoading]="isLoading"
|
|
[items]="authors"
|
|
[pagination]="pagination"
|
|
[trackByIdentity]="trackByIdentity"
|
|
[jumpBarKeys]="jumpKeys"
|
|
[filteringDisabled]="true"
|
|
[customSort]="filterGroup.get('sortField')!.value !== PersonSortField.Name"
|
|
[refresh]="refresh"
|
|
[filterSettings]="filterSettings"
|
|
[filterOpen]="filterOpen"
|
|
>
|
|
<ng-template #cardItem let-item let-position="idx">
|
|
<app-person-card [entity]="item" [title]="item.name" [imageUrl]="imageService.getPersonImage(item.id)" (clicked)="goToPerson(item)">
|
|
<ng-template #subtitle>
|
|
<div class="tag-meta">
|
|
<div style="font-size: 12px">{{t('series-count', {num: item.seriesCount | compactNumber})}}</div>
|
|
<div style="font-size: 12px">{{t('issue-count', {num: item.chapterCount | compactNumber})}}</div>
|
|
</div>
|
|
</ng-template>
|
|
</app-person-card>
|
|
</ng-template>
|
|
</app-card-detail-layout>
|
|
|
|
</ng-container>
|
|
</div>
|