coffee-election-ng-app-example/src/app/features/coffee-list/views/coffee-list/coffee-list.view.html at master · georgebyte/coffee-election-ng-app-example · GitHub

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
<ng-container *ngIf="{state$: store.state$ | async} as subs">
    <ce-url-sort-selector
        class="ce-url-sort-selector ce-coffee-list-view__sort-selector"
        [sort]="subs.state$.candidateList.sort"
        [fields]="[{name: 'Votes', field: 'votes'}, {name: 'Name', field: 'name'}]"
    ></ce-url-sort-selector>

    <div
        class="ce-panel ce-coffee-list-view__list-item"
        *ngIf="subs.state$.requests.listCandidates.inProgress"
    >
        <div class="ce-loader ce-loader--takeover"></div>
    </div>

    <ng-container *ngIf="!subs.state$.requests.listCandidates.inProgress">
        <div
            class="ce-panel ce-coffee-list-view__list-item"
            *ngFor="let candidate of subs.state$.candidateList.candidates"
        >
            <ce-coffee-candidate
                class="ce-coffee-candidate ce-coffee-list-view__candidate"
                [candidate]="candidate"
                (onUserAction)="store.submitUserAction(candidate, $event)"
            >
                <button
                    class="ce-button"
                    (click)="store.openDetailsModal(candidate)"
                >
                    Details
                </button>
            </ce-coffee-candidate>
        </div>
    </ng-container>

    <ce-modal
        #detailsModal
        class="ce-modal"
        (onClose)="store.setDetailsModalState(null)"
    >
        <ce-candidate-details
            class="ce-coffee-list-view__candidate-details"
            *ngIf="subs.state$.detailsModal.candidate"
            [candidate]="subs.state$.detailsModal.candidate"
        ></ce-candidate-details>
        <div class="ce-modal__actions">
            <button
                class="ce-button ce-button--outline"
                (click)="store.closeDetailsModal()"
            >
                Close
            </button>
        </div>
    </ce-modal>
</ng-container>