Afform - Click-sort column headers on list page

diff --git a/ext/afform/admin/ang/afAdmin.js b/ext/afform/admin/ang/afAdmin.js
index 50f1715be4e11ef5030b309c6e6769412b937b66..f50e46ddca11388d15cd16bb1835effcd19cd6d5 100644 (file)
--- a/ext/afform/admin/ang/afAdmin.js
+++ b/ext/afform/admin/ang/afAdmin.js
@@ -11,8 +11,7 @@
           // Load data for lists
           afforms: function(crmApi4) {
             return crmApi4('Afform', 'get', {
-              select: ['name', 'title', 'type', 'server_route', 'has_local', 'has_base', 'is_dashlet', 'contact_summary:label'],
-              orderBy: {title: 'ASC'}
+              select: ['name', 'title', 'type', 'server_route', 'has_local', 'has_base', 'is_dashlet', 'contact_summary:label']
             });
           }
         }

diff --git a/ext/afform/admin/ang/afAdmin/afAdminList.controller.js b/ext/afform/admin/ang/afAdmin/afAdminList.controller.js
index d0b123bcef41d9e7ce927835c3dcdc0802512a62..df46006d1ba083d37536d4eb87fa318371608025 100644 (file)
--- a/ext/afform/admin/ang/afAdmin/afAdminList.controller.js
+++ b/ext/afform/admin/ang/afAdmin/afAdminList.controller.js
@@ -4,6 +4,8 @@
   angular.module('afAdmin').controller('afAdminList', function($scope, afforms, crmApi4, crmStatus) {
     var ts = $scope.ts = CRM.ts('org.civicrm.afform_admin'),
       ctrl = $scope.$ctrl = this;
+    this.sortField = 'title';
+    this.sortDir = false;
 
     $scope.crmUrl = CRM.url;
 
@@ -34,6 +36,12 @@
       afforms[afform.type].push(afform);
     }, {});
 
+    // Change sort field/direction when clicking a column header
+    this.sortBy = function(col) {
+      ctrl.sortDir = ctrl.sortField === col ? !ctrl.sortDir : false;
+      ctrl.sortField = col;
+    };
+
     $scope.$bindToRoute({
       expr: '$ctrl.tab',
       param: 'tab',

diff --git a/ext/afform/admin/ang/afAdmin/afAdminList.html b/ext/afform/admin/ang/afAdmin/afAdminList.html
index b8a1cca650c63809e47eedc48936359a827ac26e..02361445aa6248686a85be73803205ff0bf6a6a7 100644 (file)
--- a/ext/afform/admin/ang/afAdmin/afAdminList.html
+++ b/ext/afform/admin/ang/afAdmin/afAdminList.html
@@ -37,15 +37,31 @@
   <table>
     <thead>
     <tr>
-      <th>{{:: ts('Title') }}</th>
-      <th>{{:: ts('Name') }}</th>
-      <th>{{:: ts('Page') }}</th>
-      <th>{{:: ts('Placement') }}</th>
+      <th ng-click="$ctrl.sortBy('title')">
+        <i class="crm-i fa-sort disabled" ng-if="$ctrl.sortField !== 'title'"></i>
+        <i class="crm-i fa-sort-{{ $ctrl.sortDir ? 'asc' : 'desc' }}" ng-if="$ctrl.sortField === 'title'"></i>
+        {{:: ts('Title') }}
+      </th>
+      <th ng-click="$ctrl.sortBy('name')">
+        <i class="crm-i fa-sort disabled" ng-if="$ctrl.sortField !== 'name'"></i>
+        <i class="crm-i fa-sort-{{ $ctrl.sortDir ? 'asc' : 'desc' }}" ng-if="$ctrl.sortField === 'name'"></i>
+        {{:: ts('Name') }}
+      </th>
+      <th ng-click="$ctrl.sortBy('server_route')">
+        <i class="crm-i fa-sort disabled" ng-if="$ctrl.sortField !== 'server_route'"></i>
+        <i class="crm-i fa-sort-{{ $ctrl.sortDir ? 'asc' : 'desc' }}" ng-if="$ctrl.sortField === 'server_route'"></i>
+        {{:: ts('Page') }}
+      </th>
+      <th ng-click="$ctrl.sortBy('placement.length')">
+        <i class="crm-i fa-sort disabled" ng-if="$ctrl.sortField !== 'placement.length'"></i>
+        <i class="crm-i fa-sort-{{ $ctrl.sortDir ? 'asc' : 'desc' }}" ng-if="$ctrl.sortField === 'placement.length'"></i>
+        {{:: ts('Placement') }}
+      </th>
       <th></th>
     </tr>
     </thead>
     <tbody>
-    <tr ng-repeat="afform in $ctrl.afforms[$ctrl.tab] | filter:$ctrl.searchAfformList">
+    <tr ng-repeat="afform in $ctrl.afforms[$ctrl.tab] | filter:$ctrl.searchAfformList | orderBy:$ctrl.sortField:$ctrl.sortDir">
       <td>{{ afform.title }}</td>
       <td>
         <code>{{ afform.name }}</code>