connect-admin/app/pages/stats/stats.component.html

<div id="stats" class="uk-container">
    <div class="menubar ">
        <div class="page-title uk-article-title">Statistics</div>
    </div>

    <div class="content-wrapper">
        <div>
            <div class="contentPanel">
                <div *ngIf="errorMessage" class="uk-alert-danger uk-alert">{{ errorMessage }}</div>
                <div *ngIf="loadingMessage" class="whiteFilm">
                    <span>{{ loadingMessage }}</span>
                </div>

                <div class="page-controls">
                    <div class="  filters ">
                        <div class="show-options uk-float-right">
                            <button class="uk-button" type="button"> Bulk Actions</button>
                            <div uk-dropdown="mode: click">
                                <ul class="uk-nav uk-dropdown-nav">
                                    <li><a (click)="togglePages(true, getSelectedPages())"><i></i> Activate </a></li>
                                    <li><a (click)="togglePages(false, getSelectedPages())"><i></i> Deactivate </a></li>
                                    <li><a (click)="confirmDeleteSelectedPages()"><i></i> Delete </a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <div>
                    <div class="gwt-HTML">
                        <div class="row users-list">
                            <div class="col-md-12">

                                <div class="filters marginBottom20">
                                    <div class="links form-group form-inline">
                                        <span>Filter by community:</span>
                                        <select class="uk-select uk-width-medium" (change)="filterByCommunity($event)">
                                            <!--option value="">-- none selected --</option-->
                                            <option *ngFor="let community of communities" value="{{community.pid}}">{{community.name}}</option>
                                        </select>
                                    </div>
                                </div>
                                <table class="uk-table uk-table-striped">
                                    <thead>
                                    <tr>
                                        <th><input id="allPageCheckbox" type="checkbox" (change)="toggleCheckBoxes($event)"></th>
                                        <th>Name</th>
                                        <th>State</th>
                                        <th *ngIf="!pagesType">Type</th>
                                        <th>Related Entities</th>
                                        <th>Route</th>
                                        <th>Actions</th>
                                        <th>Page Help Contents</th>
                                        <th *ngIf="pageWithDivIds && pageWithDivIds.length > 0">Class Help Contents</th>
                                    </tr>
                                    </thead>
                                    <tbody >
                                    <tr *ngFor="let check of checkboxes; let i=index">
                                        <td><input id="{{check.page._id}}" class="checkBox" type="checkbox"
                                                   name="pagescb[]" value="{{check.page._id}}" [(ngModel)]="check.checked">
                                        </td>
                                        <td>
                                            <div class="name" href="#">{{check.page.name}}</div>
                                        </td>
                                        <td>
                                            <div *ngIf="check.page.isEnabled" class="activated" >
                                                <input (click)="togglePages(false,[check.page._id])" class="deactivate" src="imgs/check-icon.png" title="Disable" width="20" type="image" height="20">
                                            </div>
                                            <div *ngIf="!check.page.isEnabled" class="deactivated" >
                                                <input (click)="togglePages(true,[check.page._id])" class="deactivate" src="imgs/x-icon.png" title="Enable" width="20" type="image" height="20">
                                            </div>
                                        </td>
                                        <td *ngIf="!pagesType">
                                            <div class="type" href="#">{{check.page.type}}</div>
                                        </td>
                                        <td>
                                            <div class="entities" href="#">
                                                <span *ngFor="let entity of check.page.entities let i=index">{{entity.name}}<span *ngIf="i<(check.page.entities.length-1)">, </span></span>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="route" href="#">{{check.page.route}}</div>
                                        </td>

                                        <td>
                                            <div class="actions" href="#">
                                                <input title="Edit" src="imgs/icn_edit.png" class="edit" type="image" (click)="editPage(i)">
                                                <input title="Delete" src="imgs/icn_trash.png" class="delete" type="image" (click)="confirmDeletePage(check.page._id)">
                                            </div>
                                        </td>
                                        <td>
                                            <a class="helpContents" [queryParams]="{community: selectedCommunityPid, page: check.page._id}" routerLink="/pageContents">add page contents</a>
                                        </td>
                                        <td *ngIf="pageWithDivIds && pageWithDivIds.length > 0" class="uk-text-center">
                                            <a *ngIf="pageWithDivIds.includes(check.page._id)" class="classHelpContents" [queryParams]="{community: selectedCommunityPid, page: check.page._id}" routerLink="/classContents">add class contents</a>
                                            <span *ngIf="!pageWithDivIds.includes(check.page._id)">-</span>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>

                                <div *ngIf="checkboxes.length==0" class="col-md-12">
                                    <div class="uk-alert-warning" uk-alert>No pages found</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>