eventman/angular_app/tickets-list.html

<!-- show the list of Tickets -->
<div class="container">
    <div class="panel panel-primary table-striped top5">
        <div class="panel-heading">
            <h1>
                {{'All Tickets' | translate}}
                <div class="label label-info vcenter">{{'Tickets:' | translate}} {{tickets.length || 0}}</div>
            </h1>
        </div>
        <div class="panel-body">
            <form class="form-inline">
                <div class="form-group">
                    <label for="query-tickets">{{'Search:' | translate}}</label>
                    <input eventman-focus type="text" id="query-tickets" class="form-control" placeholder="{{'Name or email' | translate}}" ng-model="query" ng-model-options="{debounce: 350}">&nbsp;<label>&nbsp;<input type="checkbox" ng-model="groupByEmail" /> {{'group by email' | translate}}</label>
                </div>
            </form>

            <uib-pagination ng-model="currentPage" total-items="filteredLength" items-per-page="itemsPerPage"
                        direction-links="false" boundary-links="true" boundary-link-numbers="true" max-size="maxPaginationSize">
            </uib-pagination>
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th class="text-right nowrap">#</th>
                        <th class="nowrap"><a ng-click="updateOrded('name')" href=""><i class="fa fa-caret-up"></i></a>{{'Name' | translate}}<a ng-click="updateOrded('-name')" href=""><i class="fa fa-caret-down"></i></a> <a ng-click="updateOrded('surname')" href=""><i class="fa fa-caret-up"></i></a>{{'Surname' | translate}}<a ng-click="updateOrded('-surname')" href=""><i class="fa fa-caret-down"></i></a> <a ng-click="updateOrded('email')" href=""><i class="fa fa-caret-up"></i></a>{{'Email' | translate}}<a ng-click="updateOrded('-email')" href=""><i class="fa fa-caret-down"></i></a></th>
                        <th class="text-center nowrap"><strong>{{'Ticket' | translate}}</strong></th>
                        <th class="text-center nowrap"><strong>{{'Attended' | translate}}</strong></th>
                    </tr>
                </thead>
                <tbody>
                <tr ng-repeat="ticket in shownItems">
                    <td class="text-right">{{$index + 1 + ((currentPage-1)*itemsPerPage)}}</td>
                    <td>
                        <span><strong><span>{{ticket.name}}</span>&nbsp;<span>{{ticket.surname}}</span></strong></span><span ng-if="ticket.email">&nbsp;&lt;{{ticket.email}}&gt;</span>
                        <p ng-if="ticket.company || ticket['job title']"><i ng-if="ticket['job title']">{{ticket['job title']}}</i><span ng-if="ticket.company && ticket['job title']">&nbsp;@&nbsp;</span><i ng-if="ticket.company">{{ticket.company}}</i></p>
                    </td>
                    <td class="text-center">
                        <a ng-if="!ticket.tickets" ui-sref="event.ticket.edit({id: ticket.event_id, ticket_id: ticket._id})">{{ticket.event_title}}</a>
                        <div ng-if="ticket.tickets" ng-repeat="t in ticket.tickets">
                            <a ui-sref="event.ticket.edit({id: t.event_id, ticket_id: t._id})">{{t.event_title}}</a>
                        </div>
                    </td>
                    <td class="text-center">
                        <span ng-if="!ticket.tickets" class="fa {{(ticket.attended) && 'fa-check-circle text-success' || 'fa-times-circle text-danger'}}"></span>
                        <div ng-if="ticket.tickets" ng-repeat="t in ticket.tickets">
                            <span class="fa {{(t.attended) && 'fa-check-circle text-success' || 'fa-times-circle text-danger'}}"></span>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
            <uib-pagination ng-model="currentPage" total-items="filteredLength" items-per-page="itemsPerPage"
                        direction-links="false" boundary-links="true" boundary-link-numbers="true" max-size="maxPaginationSize">
            </uib-pagination>
        </div>
    </div>
</div>