SearchKit - Use combo button+dropdown for creating new search or segment
authorColeman Watts <coleman@civicrm.org>
Tue, 9 Aug 2022 18:42:17 +0000 (14:42 -0400)
committerColeman Watts <coleman@civicrm.org>
Tue, 9 Aug 2022 18:45:24 +0000 (14:45 -0400)
ext/search_kit/ang/crmSearchAdmin.module.js
ext/search_kit/ang/crmSearchAdmin/searchListing/searchList.html
ext/search_kit/ang/crmSearchAdmin/searchSegment/crmSearchAdminSegment.component.js
ext/search_kit/ang/crmSearchAdmin/searchSegment/crmSearchAdminSegment.html
ext/search_kit/ang/crmSearchAdmin/searchSegment/editDialog.html
ext/search_kit/ang/crmSearchAdmin/searchSegmentListing/buttons.html
ext/search_kit/css/crmSearchAdmin.css

index 729be45d6426dfe0a42170ac6ac1dd267b912f1c..55169d9edb58a70e7199f63a205d4e49d701e129 100644 (file)
@@ -45,7 +45,7 @@
     })
 
     // Controller for tabbed view of SavedSearches
-    .controller('searchList', function($scope, $timeout, searchMeta, formatForSelect2, dialogService) {
+    .controller('searchList', function($scope, $timeout, searchMeta, formatForSelect2) {
       var ts = $scope.ts = CRM.ts('org.civicrm.search_kit'),
         ctrl = $scope.$ctrl = this;
       searchEntity = 'SavedSearch';
         return {results: formatForSelect2(CRM.crmSearchAdmin.tags, 'id', 'name', ['color', 'description'])};
       };
 
+      this.getPrimaryEntities = function() {
+        this.primaryEntities = _.filter(CRM.crmSearchAdmin.schema, {searchable: 'primary'});
+      };
+
       // Tabs include a rowCount which will be updated by the search controller
       this.tabs = [
         {name: 'custom', title: ts('Custom Searches'), icon: 'fa-search-plus', rowCount: null, filters: {has_base: false}},
index 629efe7648f8ca222dc57c48e776a679958c49de..75ce4ad457abac2ca5eb4fa7dfafbb3d13a81481 100644 (file)
         </a>
       </li>
     </ul>
-    <a class="btn btn-primary" href="#/create/Contact/" ng-if="$ctrl.tab !== 'segment'">
-      <i class="crm-i fa-plus"></i>
-      {{:: ts('New Search') }}
-    </a>
-    <a class="btn btn-primary" href ng-if="$ctrl.tab === 'segment'" title="{{:: ts('New Data Segment') }}" crm-dialog-popup="searchSegmentDialog" popup-tpl="~/crmSearchAdmin/searchSegment/editDialog.html">
-      <i class="crm-i fa-plus"></i>
-      {{:: ts('New Segment') }}
-    </a>
+    <div class="btn-group" ng-if="$ctrl.tab !== 'segment'">
+      <a class="btn btn-primary" href="#/create/Contact" >
+        <i class="crm-i fa-plus"></i>
+        {{:: ts('New Search') }}
+      </a>
+      <button type="button" ng-click="$ctrl.getPrimaryEntities()" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        <span class="caret"></span>
+      </button>
+      <ul class="dropdown-menu dropdown-menu-right">
+        <li ng-repeat="entity in $ctrl.primaryEntities">
+          <a ng-href="#/create/{{ entity.name }}">
+            <i class="crm-i {{:: entity.icon }}"></i>
+            {{:: entity.title_plural }}
+          </a>
+        </li>
+        <li title="{{:: ts('Choose other entities on the search screen') }}">
+          <a href="#/create/Contact">{{:: ts('More...') }}</a>
+        </li>
+      </ul>
+    </div>
+    <div class="btn-group" ng-if="$ctrl.tab === 'segment'">
+      <a class="btn btn-primary" href title="{{:: ts('New Data Segment') }}" crm-dialog-popup="searchSegmentDialog" popup-tpl="~/crmSearchAdmin/searchSegment/editDialog.html">
+        <i class="crm-i fa-plus"></i>
+        {{:: ts('New Data Segment') }}
+      </a>
+      <button type="button" ng-click="$ctrl.getPrimaryEntities()" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        <span class="caret"></span>
+      </button>
+      <ul class="dropdown-menu dropdown-menu-right">
+        <li ng-repeat="entity in $ctrl.primaryEntities">
+          <a href title="{{:: ts('New Data Segment') }}" crm-dialog-popup="searchSegmentDialog" popup-tpl="~/crmSearchAdmin/searchSegment/editDialog.html" popup-data="{entity_name: entity.name}">
+            <i class="crm-i {{:: entity.icon }}"></i>
+            {{:: entity.title_plural }}
+          </a>
+        </li>
+        <li title="{{:: ts('Choose other entities on the search screen') }}">
+          <a href title="{{:: ts('New Data Segment') }}" crm-dialog-popup="searchSegmentDialog" popup-tpl="~/crmSearchAdmin/searchSegment/editDialog.html">{{:: ts('More...') }}</a>
+        </li>
+      </ul>
+    </div>
   </div>
 
   <div ng-repeat="tab in $ctrl.tabs" ng-show="$ctrl.tab === tab.name">
index e059acddd883254063a3dc349df247c38564c997..f79b766dce047262b35aef162fa0d8c2b3a798c8 100644 (file)
@@ -3,7 +3,7 @@
 
   angular.module('crmSearchAdmin').component('crmSearchAdminSegment', {
     bindings: {
-      segmentId: '<',
+      segment: '<',
     },
     templateUrl: '~/crmSearchAdmin/searchSegment/crmSearchAdminSegment.html',
     controller: function ($scope, searchMeta, dialogService, crmApi4, crmStatus) {
@@ -15,7 +15,6 @@
       this.entitySelect = searchMeta.getPrimaryAndSecondaryEntitySelect();
 
       ctrl.saving = false;
-      ctrl.segment = {items: []};
 
       // Drag-n-drop settings for reordering items
       this.sortableOptions = {
       };
 
       this.$onInit = function() {
-        if (ctrl.segmentId) {
+        if (ctrl.segment.id) {
           $('.ui-dialog:visible').block();
           crmApi4('SearchSegment', 'get', {
-            where: [['id', '=', ctrl.segmentId]]
+            where: [['id', '=', ctrl.segment.id]]
           }, 0).then(function(segment) {
             ctrl.segment = segment;
             originalEntity = segment.entity_name;
@@ -44,6 +43,9 @@
             searchMeta.loadFieldOptions([segment.entity_name]);
             $('.ui-dialog:visible').unblock();
           });
+        } else {
+          ctrl.segment.items = [];
+          ctrl.onChangeEntity();
         }
       };
 
index 4ab34a597b2f8d73dfb34d19530601fcec1e4afb..ae20d3b22189eb3784c99f141c2fd506642340f9 100644 (file)
@@ -9,7 +9,7 @@
     <br>
     <div class="form-inline">
       <label for="search-segment-entity_name">{{:: ts('For') }} <span class="crm-marker">*</span></label>
-      <input id="search-segment-entity_name" class="form-control collapsible-optgroups" required ng-model="$ctrl.segment.entity_name" ng-change="$ctrl.onChangeEntity()" crm-ui-select="{allowClear: false, data: $ctrl.entitySelect, placeholder: ts('Entity')}">
+      <input id="search-segment-entity_name" class="form-control huge collapsible-optgroups" required ng-model="$ctrl.segment.entity_name" ng-change="$ctrl.onChangeEntity()" crm-ui-select="{allowClear: false, data: $ctrl.entitySelect, placeholder: ts('Entity')}">
     </div>
     <br>
     <fieldset>
index 4042add700118061f5d63705f16e349ca1d9520c..c6969214e9c33cbb8892f951c673176f5f3f7589 100644 (file)
@@ -1,3 +1,3 @@
 <div crm-dialog="searchSegmentDialog">
-  <crm-search-admin-segment segment-id="model.data.id"></crm-search-admin-segment>
+  <crm-search-admin-segment segment="model"></crm-search-admin-segment>
 </div>
index 64b87c6f1ea76c61d6c9209dec549ccc5aee4392..ac2cec6f188dfa345269c6a21244cf45f2cd55c5 100644 (file)
@@ -1,6 +1,6 @@
 <div class="text-right">
   <div class="btn-group btn-group-xs">
-    <a class="btn btn-primary" href crm-dialog-popup="searchSegmentDialog" popup-tpl="~/crmSearchAdmin/searchSegment/editDialog.html" popup-data="row" title="{{:: ts('Edit Data Segment') }}">
+    <a class="btn btn-primary" href crm-dialog-popup="searchSegmentDialog" popup-tpl="~/crmSearchAdmin/searchSegment/editDialog.html" popup-data="row.data" title="{{:: ts('Edit Data Segment') }}">
       <i class="crm-i fa-pencil"></i>
       {{:: ts('Edit') }}
     </a>
index 6b9553c5d2067261ea96cec1b28776dc6a8d410d..d5417be04fa4b3f25b5eeab744553a4eb315392e 100644 (file)
@@ -5,7 +5,7 @@
 #bootstrap-theme .crm-search-nav-tabs {
   position: relative;
 }
-#bootstrap-theme .crm-search-nav-tabs > a.btn {
+#bootstrap-theme .crm-search-nav-tabs > div.btn-group {
   position: absolute;
   right: 0;
   top: 0;