datatable.component.html

<accordion>
    <accordion-group (isOpenChange)="initDatatable()" #ag [panelClass]="'custom-accordion'" class="my-2">
        <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>
        <div *ngIf="!searchMeta" class="text-center">
            <i class="fas fa-circle-notch fa-spin fa-3x"></i>
            <span class="sr-only">Loading...</span>
        </div>
        <div *ngIf="searchMeta">
            <div class="table-responsive">
                <table class="table table-striped table-bordered">
                    <thead>
                        <tr>
                            <th *ngFor="let attribute of searchMeta.attributes_selected" scope="col">
                                {{ attribute.label }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let datum of searchData">
                            <td *ngFor="let attribute of searchMeta.attributes_selected">
                                <div *ngIf="datum[attribute.label]" [ngSwitch]="getAttributeRenderer(attribute.name)">
                                    <div *ngSwitchCase="'img'">
                                        <img [src]="getAttributeUriAction(attribute.name, datum[attribute.label])">
                                    </div>
                                    <div *ngSwitchCase="'thumbnail'">
                                        <button class="btn btn-link"
                                            (click)="openModal('thumbnail', attribute.name, datum[attribute.label])">
                                            <img [src]="getAttributeUriAction(attribute.name, datum[attribute.label])"
                                                class="img-fluid">
                                        </button>
                                    </div>
                                    <div *ngSwitchCase="'ext-link'">
                                        <a [href]="getAttributeUriAction(attribute.name, datum[attribute.label])"
                                            target="_blank">
                                            {{ datum[attribute.name] }}</a>
                                    </div>
                                    <div *ngSwitchCase="'int-link'">
                                        <!-- <a [routerLink]="getAttributeUriAction(attribute.name, datum[attribute.label])">
                                            {{ datum[attribute.name] }}</a> -->
                                        <a routerLink="/search/result/{{ datasetName }}/{{ datum[attribute.label] }}"
                                            [queryParams]="queryParams">
                                            {{ datum[attribute.label] }}
                                        </a>
                                    </div>
                                    <div *ngSwitchCase="'ext-btn'">
                                        <a [href]="getAttributeUriAction(attribute.name, datum[attribute.label])"
                                            target="_blank" class="btn btn-outline-primary btn-sm">
                                            {{ datum[attribute.label] }}</a>
                                    </div>
                                    <div *ngSwitchCase="'int-btn'">
                                        <a routerLink="/search/result/{{ datasetName }}/{{ datum[attribute.label] }}"
                                            [queryParams]="queryParams" class="btn btn-outline-primary btn-sm">
                                            {{ datum[attribute.label] }}
                                        </a>
                                    </div>
                                    <div *ngSwitchCase="'fancybox'">
                                        <button class="btn btn-outline-primary btn-sm"
                                            (click)="openModal('fancybox', attribute.name, datum[attribute.label])">
                                            {{ datum[attribute.label] }}
                                        </button>
                                    </div>
                                    <div *ngSwitchCase="'download'">
                                        <a [href]="getAttributeUriAction(attribute.name, datum[attribute.label])"
                                            target="_blank" class="btn btn-outline-primary btn-sm">
                                            <i class="fa fa-download" aria-hidden="true"></i>
                                        </a>
                                    </div>
                                    <div *ngSwitchCase="'json'" class="text-center">
                                        <button class="btn btn-outline-primary btn-sm"
                                            (click)="openModal('json', attribute.name, datum[attribute.label])">
                                            JSON
                                        </button>
                                    </div>
                                    <div *ngSwitchDefault>
                                        {{ datum[attribute.label] }}
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="mt-3">
                <p>Total items {{ searchMeta.total_items }}</p>
            </div>
            <div class="mt-3">
                <pagination [totalItems]="searchMeta.total_items" [boundaryLinks]="true" [rotate]="true" [maxSize]="5"
                    (pageChanged)="getSearchData.emit($event.page)"></pagination>
            </div>
        </div>
    </accordion-group>
</accordion>

<app-modal *ngIf="modalData.isOpen" [bsModalRef]="bsModalRef" [type]="modalData.type" [data]="modalData.data"
    (closeEvent)="closeModal($event)">
</app-modal>