datatable.component.html 6.45 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
        <button class="btn btn-link btn-block clearfix" accordion-heading>
            <div class="pull-left float-left">
                Datatable
                &nbsp;
Tifenn Guillas's avatar
Tifenn Guillas committed
7
8
                <span *ngIf="ag.isOpen"><span class="fas fa-chevron-up"></span></span>
                <span *ngIf="!ag.isOpen"><span class="fas fa-chevron-down"></span></span>
François Agneray's avatar
François Agneray committed
9
10
            </div>
        </button>
Tifenn Guillas's avatar
Tifenn Guillas committed
11
        <div *ngIf="!searchMeta" class="text-center">
Tifenn Guillas's avatar
Tifenn Guillas committed
12
            <span class="fas fa-circle-notch fa-spin fa-3x"></span>
Tifenn Guillas's avatar
Tifenn Guillas committed
13
14
            <span class="sr-only">Loading...</span>
        </div>
François Agneray's avatar
François Agneray committed
15
        <div *ngIf="searchMeta">
Tifenn Guillas's avatar
Tifenn Guillas committed
16
            <div *ngIf="getDataset().selectable_row" class="mb-2">
Tifenn Guillas's avatar
Tifenn Guillas committed
17
                <button [disabled]="noSelectedData() || processWip" (click)="fireProcess('csv')"
Tifenn Guillas's avatar
Tifenn Guillas committed
18
19
20
21
22
23
24
25
26
27
                    class="btn btn-sm btn-outline-primary">
                    To CSV
                </button>
                <span *ngIf="processWip" class="float-right mr-2">
                    <span class="fas fa-circle-notch fa-spin fa-2x"></span>
                </span>
                <a *ngIf="processDone" href="http://0.0.0.0:8085/{{ processId }}.csv"
                    class="btn btn-sm btn-outline-secondary float-right">
                    Download your CSV
                </a>
François Agneray's avatar
François Agneray committed
28
            </div>
François Agneray's avatar
François Agneray committed
29
            <div class="table-responsive">
François Agneray's avatar
François Agneray committed
30
                <table class="table table-bordered table-hover">
François Agneray's avatar
François Agneray committed
31
32
                    <thead>
                        <tr>
François Agneray's avatar
François Agneray committed
33
                            <th *ngIf="getDataset().selectable_row"></th>
Tifenn Guillas's avatar
Tifenn Guillas committed
34
                            <th *ngFor="let attribute of searchMeta.attributes_selected" scope="col">
Tifenn Guillas's avatar
Tifenn Guillas committed
35
36
                                {{ attribute.label }}
                            </th>
François Agneray's avatar
François Agneray committed
37
38
39
40
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let datum of searchData">
Tifenn Guillas's avatar
DONE    
Tifenn Guillas committed
41
42
                            <td *ngIf="getDataset().selectable_row" class="data-selected"
                                (click)="toggleSelection(datum)">
François Agneray's avatar
François Agneray committed
43
44
                                <button class="btn btn-block text-left p-0 m-0">
                                    <div *ngIf="!isSelected(datum)">
Tifenn Guillas's avatar
Tifenn Guillas committed
45
                                        <span class="far fa-square fa-lg text-secondary"></span>
François Agneray's avatar
François Agneray committed
46
47
                                    </div>
                                    <div *ngIf="isSelected(datum)">
Tifenn Guillas's avatar
Tifenn Guillas committed
48
                                        <span class="fas fa-check-square fa-lg theme-color"></span>
François Agneray's avatar
François Agneray committed
49
                                    </div>
Tifenn Guillas's avatar
Tifenn Guillas committed
50
51
                                </button>
                            </td>
François Agneray's avatar
François Agneray committed
52
                            <td *ngFor="let attribute of searchMeta.attributes_selected" class="align-middle">
53
                                <div *ngIf="datum[attribute.label]" [ngSwitch]="getAttributeRenderer(attribute.name)">
Tifenn Guillas's avatar
Tifenn Guillas committed
54
                                    <div *ngSwitchCase="'img'">
55
56
                                        <app-img
                                            [src]="getAttributeUriAction(attribute.name, datum[attribute.label])">
Tifenn Guillas's avatar
Tifenn Guillas committed
57
                                        </app-img>
Tifenn Guillas's avatar
Tifenn Guillas committed
58
                                    </div>
Tifenn Guillas's avatar
Tifenn Guillas committed
59
                                    <div *ngSwitchCase="'thumbnail'">
60
61
                                        <app-thumbnail
                                            [attributeName]="attribute.name"
Tifenn Guillas's avatar
Tifenn Guillas committed
62
63
                                            [src]="getAttributeUriAction(attribute.name, datum[attribute.label])">
                                        </app-thumbnail>
Tifenn Guillas's avatar
Tifenn Guillas committed
64
                                    </div>
François Agneray's avatar
François Agneray committed
65
                                    <div *ngSwitchCase="'link'">
66
67
68
                                        <app-link
                                            [href]="getAttributeUriAction(attribute.name, datum[attribute.label])">
                                        </app-link>
69
                                    </div>
François Agneray's avatar
François Agneray committed
70
                                    <div *ngSwitchCase="'btn'">
71
72
73
                                        <app-btn 
                                            [href]="getAttributeUriAction(attribute.name, datum[attribute.label])">
                                        </app-btn>
74
                                    </div>
François Agneray's avatar
François Agneray committed
75
                                    <div *ngSwitchCase="'detail-link'">
76
77
78
                                        <app-detail-link 
                                            [datasetName]="datasetName" 
                                            [data]="datum[attribute.label]">
Tifenn Guillas's avatar
Tifenn Guillas committed
79
                                        </app-detail-link>
Tifenn Guillas's avatar
Tifenn Guillas committed
80
                                    </div>
François Agneray's avatar
François Agneray committed
81
                                    <div *ngSwitchCase="'detail-btn'">
82
83
84
                                        <app-detail-btn 
                                            [datasetName]="datasetName" 
                                            [data]="datum[attribute.label]">
Tifenn Guillas's avatar
Tifenn Guillas committed
85
                                        </app-detail-btn>
Tifenn Guillas's avatar
Tifenn Guillas committed
86
                                    </div>
Tifenn Guillas's avatar
Tifenn Guillas committed
87
                                    <div *ngSwitchCase="'download'">
Tifenn Guillas's avatar
Tifenn Guillas committed
88
89
90
                                        <app-download
                                            [href]="getAttributeUriAction(attribute.name, datum[attribute.label])">
                                        </app-download>
Tifenn Guillas's avatar
Tifenn Guillas committed
91
                                    </div>
Tifenn Guillas's avatar
Tifenn Guillas committed
92
                                    <div *ngSwitchCase="'json'" class="text-center">
93
94
                                        <app-json-renderer 
                                            [attributeName]="attribute.name"
Tifenn Guillas's avatar
Tifenn Guillas committed
95
96
                                            [json]="datum[attribute.label]">
                                        </app-json-renderer>
Tifenn Guillas's avatar
Tifenn Guillas committed
97
                                    </div>
Tifenn Guillas's avatar
Tifenn Guillas committed
98
                                    <div *ngSwitchDefault>
François Agneray's avatar
François Agneray committed
99
                                        {{ datum[attribute.label] }}
Tifenn Guillas's avatar
Tifenn Guillas committed
100
101
102
                                    </div>
                                </div>
                            </td>
François Agneray's avatar
François Agneray committed
103
104
105
106
                        </tr>
                    </tbody>
                </table>
            </div>
François Agneray's avatar
François Agneray committed
107
            <div class="mt-3">
Tifenn Guillas's avatar
Tifenn Guillas committed
108
                <p>Total items {{ searchMeta.total_items }}</p>
François Agneray's avatar
François Agneray committed
109
110
            </div>
            <div class="mt-3">
Tifenn Guillas's avatar
Tifenn Guillas committed
111
112
                <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
113
            </div>
François Agneray's avatar
François Agneray committed
114
115
        </div>
    </accordion-group>
François Agneray's avatar
François Agneray committed
116
</accordion>