All files / app/features/history/pages/pictures-history pictures-history.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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
@if (service.isInitialLoading()) {
    <div class="section-loading">
        <ui-spinner />
    </div>
} @else if (service.hasItems()) {
    <ui-virtual-scroller
        data-testid="pictures-list"
        [items]="service.displayItems()"
        [totalItems]="service.displayTotalItems()"
        [isLoading]="service.isRecentLoadingMore()"
        [trackByFn]="trackByFn"
        (loadMore)="service.onLoadMore()"
    >
        <ng-template
            uiVirtualScrollerItem
            let-item
        >
            @switch (item.type) {
                @case ('pending') {
                    <app-picture-pending-card
                        class="pending-card"
                        [group]="item.data"
                        (pictureClick)="onPictureClick($event)"
                    />
                }
                @case ('header') {
                    <div class="history-date-header">{{ item.date }}</div>
                }
                @case ('picture') {
                    <div
                        class="recent-item"
                        data-testid="recent-item"
                        tabindex="0"
                        role="button"
                        (click)="onPictureClick(item.data.id)"
                        (keydown.enter)="onPictureClick(item.data.id)"
                        (keydown.space)="onPictureClick(item.data.id); $event.preventDefault()"
                        [attr.aria-label]="'Перейти к иллюстрации: ' + item.data.title"
                    >
                        <img
                            class="recent-item__thumbnail"
                            [src]="item.data.thumbnailUrl"
                            [alt]="item.data.title"
                            data-testid="recent-item-thumbnail"
                        />
                        <div class="recent-item__content">
                            <span
                                class="recent-item__title"
                                data-testid="recent-item-title"
                            >
                                {{ item.data.title }}
                            </span>
                            <div class="recent-item__meta">
                                <span class="recent-item__time">
                                    {{ item.data.date | formatTime }}
                                </span>
                                ·
                                <span class="recent-item__author">
                                    {{ item.data.user }}
                                </span>
                            </div>
                        </div>
                    </div>
                }
            }
        </ng-template>
    </ui-virtual-scroller>
    @if (service.hasPendingError() && !service.hasPendingItems()) {
        <p
            class="section-error"
            data-testid="pending-error"
        >
            Не удалось загрузить ожидающие модерации
        </p>
    }
    @if (service.hasRecentError()) {
        <p
            class="section-error"
            data-testid="recent-error"
        >
            Не удалось загрузить данные
        </p>
    }
} @else if (service.hasRecentError() || service.hasPendingError()) {
    <p
        class="section-error"
        data-testid="recent-error"
    >
        Не удалось загрузить данные
    </p>
} @else {
    <p
        class="section-empty"
        data-testid="recent-empty"
    >
        Нет иллюстраций
    </p>
}