datatable.component.html 4.6 KB
Newer Older
François Agneray's avatar
François Agneray committed
1
<accordion>
François Agneray's avatar
François Agneray committed
2
    <accordion-group (isOpenChange)="initDatatable()" #ag [panelClass]="'custom-accordion'" class="my-2">
François Agneray's avatar
François Agneray committed
3
4
5
6
7
8
9
10
        <button class="btn btn-link btn-block clearfix" accordion-heading>
            <div class="pull-left float-left">
                Datatable
                &nbsp;
                <span *ngIf="ag.isOpen"><i class="fas fa-chevron-up"></i></span>
                <span *ngIf="!ag.isOpen"><i class="fas fa-chevron-down"></i></span>
            </div>
        </button>
Tifenn Guillas's avatar
Tifenn Guillas committed
11
12
13
14
        <div *ngIf="!searchMeta" class="text-center">
            <i class="fas fa-circle-notch fa-spin fa-3x"></i>
            <span class="sr-only">Loading...</span>
        </div>
François Agneray's avatar
François Agneray committed
15
        <div *ngIf="searchMeta">
François Agneray's avatar
François Agneray committed
16
            <div class="table-responsive">
Tifenn Guillas's avatar
Tifenn Guillas committed
17
                <table class="table table-striped table-bordered">
François Agneray's avatar
François Agneray committed
18
19
                    <thead>
                        <tr>
Tifenn Guillas's avatar
Tifenn Guillas committed
20
21
                            <th *ngFor="let attribute of searchMeta.attributes_selected" scope="col">
                                {{ attribute.label }}</th>
François Agneray's avatar
François Agneray committed
22
23
24
25
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let datum of searchData">
Tifenn Guillas's avatar
Tifenn Guillas committed
26
                            <td *ngFor="let attribute of searchMeta.attributes_selected">
27
                                <div *ngIf="datum[attribute.label]" [ngSwitch]="getAttributeRenderer(attribute.name)">
Tifenn Guillas's avatar
Tifenn Guillas committed
28
                                    <div *ngSwitchCase="'img'">
Tifenn Guillas's avatar
Tifenn Guillas committed
29
30
                                        <app-img [src]="getAttributeUriAction(attribute.name, datum[attribute.label])">
                                        </app-img>
Tifenn Guillas's avatar
Tifenn Guillas committed
31
                                    </div>
Tifenn Guillas's avatar
Tifenn Guillas committed
32
                                    <div *ngSwitchCase="'thumbnail'">
Tifenn Guillas's avatar
Tifenn Guillas committed
33
34
35
                                        <app-thumbnail [attributeName]="attribute.name"
                                            [src]="getAttributeUriAction(attribute.name, datum[attribute.label])">
                                        </app-thumbnail>
Tifenn Guillas's avatar
Tifenn Guillas committed
36
                                    </div>
François Agneray's avatar
François Agneray committed
37
                                    <div *ngSwitchCase="'link'">
Tifenn Guillas's avatar
Tifenn Guillas committed
38
39
                                        <app-link [href]="getAttributeUriAction(attribute.name, datum[attribute.label])"
                                            [data]="datum[attribute.name]"></app-link>
40
                                    </div>
François Agneray's avatar
François Agneray committed
41
                                    <div *ngSwitchCase="'btn'">
Tifenn Guillas's avatar
Tifenn Guillas committed
42
43
                                        <app-btn [href]="getAttributeUriAction(attribute.name, datum[attribute.label])"
                                            [data]="datum[attribute.name]"></app-btn>
44
                                    </div>
François Agneray's avatar
François Agneray committed
45
                                    <div *ngSwitchCase="'detail-link'">
Tifenn Guillas's avatar
Tifenn Guillas committed
46
47
                                        <app-detail-link [datasetName]="datasetName" [data]="datum[attribute.label]">
                                        </app-detail-link>
Tifenn Guillas's avatar
Tifenn Guillas committed
48
                                    </div>
François Agneray's avatar
François Agneray committed
49
                                    <div *ngSwitchCase="'detail-btn'">
Tifenn Guillas's avatar
Tifenn Guillas committed
50
51
                                        <app-detail-btn [datasetName]="datasetName" [data]="datum[attribute.label]">
                                        </app-detail-btn>
Tifenn Guillas's avatar
Tifenn Guillas committed
52
                                    </div>
Tifenn Guillas's avatar
Tifenn Guillas committed
53
                                    <div *ngSwitchCase="'download'">
Tifenn Guillas's avatar
Tifenn Guillas committed
54
55
56
                                        <app-download
                                            [href]="getAttributeUriAction(attribute.name, datum[attribute.label])">
                                        </app-download>
Tifenn Guillas's avatar
Tifenn Guillas committed
57
                                    </div>
Tifenn Guillas's avatar
Tifenn Guillas committed
58
                                    <div *ngSwitchCase="'json'" class="text-center">
Tifenn Guillas's avatar
Tifenn Guillas committed
59
60
61
                                        <app-json-renderer [attributeName]="attribute.name"
                                            [json]="datum[attribute.label]">
                                        </app-json-renderer>
Tifenn Guillas's avatar
Tifenn Guillas committed
62
                                    </div>
Tifenn Guillas's avatar
Tifenn Guillas committed
63
                                    <div *ngSwitchDefault>
François Agneray's avatar
François Agneray committed
64
                                        {{ datum[attribute.label] }}
Tifenn Guillas's avatar
Tifenn Guillas committed
65
66
67
                                    </div>
                                </div>
                            </td>
François Agneray's avatar
François Agneray committed
68
69
70
71
                        </tr>
                    </tbody>
                </table>
            </div>
François Agneray's avatar
François Agneray committed
72
            <div class="mt-3">
Tifenn Guillas's avatar
Tifenn Guillas committed
73
                <p>Total items {{ searchMeta.total_items }}</p>
François Agneray's avatar
François Agneray committed
74
75
            </div>
            <div class="mt-3">
Tifenn Guillas's avatar
Tifenn Guillas committed
76
77
                <pagination [totalItems]="searchMeta.total_items" [boundaryLinks]="true" [rotate]="true" [maxSize]="5"
                    (pageChanged)="getSearchData.emit($event.page)"></pagination>
François Agneray's avatar
François Agneray committed
78
            </div>
François Agneray's avatar
François Agneray committed
79
80
        </div>
    </accordion-group>
Tifenn Guillas's avatar
Tifenn Guillas committed
81
</accordion>