SearchKit - Add orderBy selector when configuring displays
authorColeman Watts <coleman@civicrm.org>
Fri, 12 Feb 2021 14:27:55 +0000 (09:27 -0500)
committerColeman Watts <coleman@civicrm.org>
Mon, 15 Feb 2021 02:22:36 +0000 (21:22 -0500)
ext/search/ang/crmSearchAdmin/crmSearchAdmin.component.js
ext/search/ang/crmSearchAdmin/crmSearchAdminDisplay.component.js
ext/search/ang/crmSearchAdmin/crmSearchAdminDisplay.html
ext/search/ang/crmSearchAdmin/crmSearchAdminDisplaySort.html [new file with mode: 0644]
ext/search/ang/crmSearchAdmin/displays/searchAdminDisplayList.html
ext/search/ang/crmSearchAdmin/displays/searchAdminDisplayTable.html

index ba560f038c311fd26407fcdc67ee729008bb1c5e..93387d5eb4694151d131d57e62f40745c9f78e19 100644 (file)
       }
 
       $scope.fieldsForGroupBy = function() {
-        return {results: getAllFields('', function(key) {
+        return {results: ctrl.getAllFields('', function(key) {
             return _.contains(ctrl.savedSearch.api_params.groupBy, key);
           })
         };
       };
 
       $scope.fieldsForSelect = function() {
-        return {results: getAllFields(':label', function(key) {
+        return {results: ctrl.getAllFields(':label', function(key) {
             return _.contains(ctrl.savedSearch.api_params.select, key);
           })
         };
       };
 
       $scope.fieldsForWhere = function() {
-        return {results: getAllFields(':name', _.noop)};
+        return {results: ctrl.getAllFields(':name')};
       };
 
       $scope.fieldsForHaving = function() {
-        return {results: _.transform(ctrl.savedSearch.api_params.select, function(fields, name) {
-          var info = searchMeta.parseExpr(name);
-          fields.push({id: info.alias + info.suffix, text: ctrl.getFieldLabel(name)});
-        })};
+        return {results: ctrl.getSelectFields()};
       };
 
       $scope.sortableColumnOptions = {
         });
       }
 
-      function getAllFields(suffix, disabledIf) {
+      this.getAllFields = function(suffix, disabledIf) {
+        disabledIf = disabledIf || _.noop;
         function formatFields(entityName, join) {
           var prefix = join ? join.alias + '.' : '',
             result = [];
           });
         });
         return result;
-      }
+      };
+
+      this.getSelectFields = function(disabledIf) {
+        disabledIf = disabledIf || _.noop;
+        return _.transform(ctrl.savedSearch.api_params.select, function(fields, name) {
+          var info = searchMeta.parseExpr(name);
+          var item = {
+            id: info.alias + info.suffix,
+            text: ctrl.getFieldLabel(name),
+            description: info.field && info.field.description
+          };
+          if (disabledIf(item.id)) {
+            item.disabled = true;
+          }
+          fields.push(item);
+        });
+      };
 
       /**
        * Fetch pseudoconstants for main entity + joined entities
index 24cd17726156e2a7283fab79b1236275ce0d83a0..1880662b4e995bb91b744395e1f8c961d3dbf050 100644 (file)
@@ -6,6 +6,9 @@
       savedSearch: '<',
       display: '<'
     },
+    require: {
+      crmSearchAdmin: '^crmSearchAdmin'
+    },
     template: function() {
       // Dynamic template generates switch condition for each display type
       var html =
@@ -33,6 +36,8 @@
       var ts = $scope.ts = CRM.ts(),
         ctrl = this;
 
+      this.preview = this.stale = false;
+
       function fieldToColumn(fieldExpr) {
         var info = searchMeta.parseExpr(fieldExpr);
         return {
@@ -65,8 +70,6 @@
         }
       };
 
-      this.preview = this.stale = false;
-
       this.previewDisplay = function() {
         ctrl.preview = !ctrl.preview;
         ctrl.stale = false;
         }
       };
 
+      this.fieldsForSort = function() {
+        function disabledIf(key) {
+          return _.findIndex(ctrl.display.settings.sort, [key]) >= 0;
+        }
+        return {
+          results: [{
+            text: ts('Columns'),
+            children: ctrl.crmSearchAdmin.getSelectFields(disabledIf)
+          }].concat(ctrl.crmSearchAdmin.getAllFields('', disabledIf))
+        };
+      };
+
+      // Generic function to add to a setting array if the item is not already there
+      this.pushSetting = function(name, value) {
+        ctrl.display.settings[name] = ctrl.display.settings[name] || [];
+        if (_.findIndex(ctrl.display.settings[name], value) < 0) {
+          ctrl.display.settings[name].push(value);
+        }
+      };
+
       $scope.$watch('$ctrl.display.settings', function() {
         ctrl.stale = true;
       }, true);
index e97e753bf786e627cff762bf5e9e2881cfea43f3..52bb428b6d4ab2b8f8c9e799bf9639d10ecb1d10 100644 (file)
@@ -2,6 +2,5 @@
   <div class="form-inline">
     <label for="crm-search-admin-display-label">{{:: ts('Name:') }} <span class="crm-marker">*</span></label>
     <input id="crm-search-admin-display-label" type="text" class="form-control" ng-model="$ctrl.display.label" required placeholder="{{ ts('Untitled') }}"/>
-    <label class="pull-right">{{:: $ctrl.displayTypes[$ctrl.display.type].label }}</label>
   </div>
 </fieldset>
diff --git a/ext/search/ang/crmSearchAdmin/crmSearchAdminDisplaySort.html b/ext/search/ang/crmSearchAdmin/crmSearchAdminDisplaySort.html
new file mode 100644 (file)
index 0000000..43b412b
--- /dev/null
@@ -0,0 +1,13 @@
+<div class="form-inline" ng-repeat="sort in $ctrl.display.settings.sort">
+  <label for="crm-search-display-sort-{{$index}}">{{ $index ? ts('Also by:') : ts('Sort by:') }}</label>
+  <input id="crm-search-display-sort-{{$index}}" class="form-control huge" ng-model="sort[0]" crm-ui-select="{data: $ctrl.crmSearchAdminDisplay.fieldsForSort}" />
+  <select class="form-control" ng-model="sort[1]">
+    <option value="ASC">{{ ts('Ascending') }}</option>
+    <option value="DESC">{{ ts('Descending') }}</option>
+  </select>
+  <a href class="crm-hover-button" title="{{:: ts('Clear') }}" ng-click="$ctrl.display.settings.sort.splice($index, 1)"><i class="crm-i fa-times" aria-hidden="true"></i></a>
+</div>
+<div class="form-inline">
+  <label for="crm-search-display-add-sort">{{ $ctrl.display.settings.sort.length ? ts('Also by:') : ts('Sort by:') }}</label>
+  <input id="crm-search-display-add-sort" class="form-control crm-action-menu fa-plus huge" ng-model="controls.sort" crm-ui-select="{placeholder: ts('Select field'), data: $ctrl.crmSearchAdminDisplay.fieldsForSort}" ng-change="$ctrl.crmSearchAdminDisplay.pushSetting('sort', [controls.sort, 'ASC']); controls.sort = '';"/>
+</div>
index e877777e81d3c977b5285b40ba36cb2700b2f317..f27f7a3617ed3158417e56311c8c50b32683aa81 100644 (file)
@@ -1,3 +1,4 @@
+<fieldset ng-include="'~/crmSearchAdmin/crmSearchAdminDisplaySort.html'"></fieldset>
 <fieldset>
   <div class="form-inline">
     <label for="crm-search-admin-display-style">{{:: ts('Style:') }}</label>
index 3589b56c03f4ea064572872021134b01f1b194f8..2068cc2b2ae9639166ea565fa3502bfb6bd9aca6 100644 (file)
@@ -1,3 +1,4 @@
+<fieldset ng-include="'~/crmSearchAdmin/crmSearchAdminDisplaySort.html'"></fieldset>
 <fieldset>
   <div class="form-inline">
     <label for="crm-search-admin-display-limit">{{:: ts('Results to display (0 for no limit):') }}</label>