fixes #149: export tickets in CSV format

angular_app/event-tickets.html

@@ -23,13 +23,23 @@
                 </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}">
-                            </div>&nbsp;<label>&nbsp;<input type="checkbox" ng-model="registeredFilterOptions.all" /> {{'Show cancelled tickets' | translate}}</label>
-                        </form>
-						<uib-pagination ng-model="currentPage" total-items="filteredLength" items-per-page="itemsPerPage"
+                        <div>
+                            <div style="float:left;">
+                                <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}">
+                                    </div>&nbsp;<label>&nbsp;<input type="checkbox" ng-model="registeredFilterOptions.all" /> {{'Show cancelled tickets' | translate}}</label>
+                                </form>
+                            </div>
+                            <div style="float:right;">
+                                <span style="color:#9e9e9e;">({{filteredLength}} {{'filtered item/s' | translate}})</span>&nbsp;
+                                <a download="eventman.csv" ng-href="{{downloadURL}}" class="btn btn-primary" ng-class="{disabled: !filteredLength}"><span class="fa fa-download"></span> {{'export CSV' | translate}}</a>
+                            </div>
+                        </div>
+
+                        <div class="clearfix"></div>
+                        <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">
@@ -73,7 +83,7 @@
                                 </tr>
                             </tbody>
                         </table>
-						<uib-pagination ng-model="currentPage" total-items="filteredLength" items-per-page="itemsPerPage"
+                        <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>

angular_app/index.html

@@ -29,6 +29,7 @@
         <script type="text/javascript" src="/static/js/api-check.min.js"></script>
         <script type="text/javascript" src="/static/js/formly.min.js"></script>
         <script type="text/javascript" src="/static/js/angular-formly-templates-bootstrap.min.js"></script>
+        <script type="text/javascript" src="/static/js/json2csv.min.js"></script>
 
         <script type="text/javascript" src="/static/js/eventman.js"></script>
         <script type="text/javascript" src="/js/app.js"></script>

angular_app/js/app.js

@@ -105,8 +105,9 @@ eventManApp.run(['$rootScope', '$state', '$stateParams', '$log', 'Info',
 
 
 /* Configure the states. */
-eventManApp.config(['$stateProvider', '$urlRouterProvider',
-    function($stateProvider, $urlRouterProvider) {
+eventManApp.config(['$stateProvider', '$urlRouterProvider', '$compileProvider',
+    function($stateProvider, $urlRouterProvider, $compileProvider) {
+        $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|tel|file|blob):/);
         $urlRouterProvider.otherwise('/events');
         $stateProvider
             .state('events', {

angular_app/js/controllers.js

@@ -202,6 +202,7 @@ eventManControllers.controller('EventTicketsCtrl', ['$scope', '$state', 'Event',
         $scope.shownItems = [];
         $scope.ticket = {}; // current ticket, for the event.ticket.* states
         $scope.tickets = []; // list of all tickets, for the 'tickets' state
+        $scope.filteredTickets = [];
         $scope.formSchema = {};
         $scope.formData = {};
         $scope.guiOptions = {dangerousActionsEnabled: false};
@@ -221,9 +222,11 @@ eventManControllers.controller('EventTicketsCtrl', ['$scope', '$state', 'Event',
             tickets = $filter('splittedFilter')(tickets, $scope.query);
             tickets = $filter('registeredFilter')(tickets, $scope.registeredFilterOptions);
             tickets = $filter('orderBy')(tickets, $scope.ticketsOrder);
-            $scope.filteredLength = tickets.length;
+            $scope.filteredTickets = angular.copy(tickets);
+            $scope.filteredLength = $scope.filteredTickets.length;
             tickets = $filter('pagination')(tickets, $scope.currentPage, $scope.itemsPerPage);
             $scope.shownItems = tickets;
+            $scope.updateCSV();
         };
 
         $scope.$watch('query', function() {
@@ -663,6 +666,17 @@ eventManControllers.controller('EventTicketsCtrl', ['$scope', '$state', 'Event',
             $scope.filterTickets();
         };
 
+        $scope.updateCSV = function() {
+            if (!$scope.filteredTickets.length) {
+                return;
+            }
+            try {
+                var csv = json2csv({data: $scope.filteredTickets});
+                var blob = new Blob([csv], {type: 'text/csv'});
+                $scope.downloadURL = (window.URL || window.webkitURL).createObjectURL(blob);
+            } catch(err) {}
+        };
+
         $scope.$on('$destroy', function() {
             $scope.EventUpdates && $scope.EventUpdates.close();
         });