From 19a6399f0147b40208c9cb65a0cf6fd8920d5f29 Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Tue, 18 May 2021 19:22:34 -0400
Subject: [PATCH] Afform - Click-sort column headers on list page

---
 ext/afform/admin/ang/afAdmin.js               |  3 +--
 .../ang/afAdmin/afAdminList.controller.js     |  8 ++++++
 ext/afform/admin/ang/afAdmin/afAdminList.html | 26 +++++++++++++++----
 3 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/ext/afform/admin/ang/afAdmin.js b/ext/afform/admin/ang/afAdmin.js
index 50f1715be4..f50e46ddca 100644
--- 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 d0b123bcef..df46006d1b 100644
--- 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 b8a1cca650..02361445aa 100644
--- 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>
-- 
2.25.1