All files / app/features/search search.component.html

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
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<div
    class="search-container"
    data-testid="search-container"
>
    <ui-text-input
        data-testid="search-input"
        label="Поиск"
        placeholder="Введите запрос..."
        (valueChanged)="onSearchChange($event)"
    />
 
    @if (isLoading()) {
        <ui-spinner data-testid="search-loading" />
    }
 
    @if (hasResults()) {
        <div
            class="search-results"
            data-testid="search-results"
        >
            <div class="search-results-header">Найдено: {{ totalResults() }}</div>
            <ui-virtual-scroller
                class="search-results-scroller"
                [items]="searchResults()"
                [totalItems]="totalResults()"
                [isLoading]="isLoadingMore()"
                [trackByFn]="trackByFn"
                (loadMore)="onLoadMore()"
            >
                <ng-template
                    uiVirtualScrollerItem
                    let-result
                >
                    <a
                        class="search-result-item"
                        data-testid="search-result-item"
                        [routerLink]="['/articles', result.id]"
                        (click)="closeModal()"
                    >
                        @if (result.highlightedTitle) {
                            <span [innerHTML]="result.highlightedTitle"></span>
                        } @else {
                            {{ result.title }}
                        }
                    </a>
                </ng-template>
            </ui-virtual-scroller>
        </div>
    } @else if (showNoResults()) {
        <div
            class="search-no-results"
            data-testid="search-no-results"
        >
            Ничего не найдено
        </div>
    }
</div>