From 5e07fd071625e9ae32cce29f8941b9e11a416c84 Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Tue, 9 Aug 2022 14:42:17 -0400
Subject: [PATCH] SearchKit - Use combo button+dropdown for creating new search
 or segment

---
 ext/search_kit/ang/crmSearchAdmin.module.js   |  6 ++-
 .../searchListing/searchList.html             | 48 +++++++++++++++----
 .../crmSearchAdminSegment.component.js        | 10 ++--
 .../searchSegment/crmSearchAdminSegment.html  |  2 +-
 .../searchSegment/editDialog.html             |  2 +-
 .../searchSegmentListing/buttons.html         |  2 +-
 ext/search_kit/css/crmSearchAdmin.css         |  2 +-
 7 files changed, 55 insertions(+), 17 deletions(-)

diff --git a/ext/search_kit/ang/crmSearchAdmin.module.js b/ext/search_kit/ang/crmSearchAdmin.module.js
index 729be45d64..55169d9edb 100644
--- a/ext/search_kit/ang/crmSearchAdmin.module.js
+++ b/ext/search_kit/ang/crmSearchAdmin.module.js
@@ -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';
@@ -59,6 +59,10 @@
         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}},
diff --git a/ext/search_kit/ang/crmSearchAdmin/searchListing/searchList.html b/ext/search_kit/ang/crmSearchAdmin/searchListing/searchList.html
index 629efe7648..75ce4ad457 100644
--- a/ext/search_kit/ang/crmSearchAdmin/searchListing/searchList.html
+++ b/ext/search_kit/ang/crmSearchAdmin/searchListing/searchList.html
@@ -17,14 +17,46 @@
         </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">
diff --git a/ext/search_kit/ang/crmSearchAdmin/searchSegment/crmSearchAdminSegment.component.js b/ext/search_kit/ang/crmSearchAdmin/searchSegment/crmSearchAdminSegment.component.js
index e059acddd8..f79b766dce 100644
--- a/ext/search_kit/ang/crmSearchAdmin/searchSegment/crmSearchAdminSegment.component.js
+++ b/ext/search_kit/ang/crmSearchAdmin/searchSegment/crmSearchAdminSegment.component.js
@@ -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 = {
@@ -33,10 +32,10 @@
       };
 
       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();
         }
       };
 
diff --git a/ext/search_kit/ang/crmSearchAdmin/searchSegment/crmSearchAdminSegment.html b/ext/search_kit/ang/crmSearchAdmin/searchSegment/crmSearchAdminSegment.html
index 4ab34a597b..ae20d3b221 100644
--- a/ext/search_kit/ang/crmSearchAdmin/searchSegment/crmSearchAdminSegment.html
+++ b/ext/search_kit/ang/crmSearchAdmin/searchSegment/crmSearchAdminSegment.html
@@ -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>
diff --git a/ext/search_kit/ang/crmSearchAdmin/searchSegment/editDialog.html b/ext/search_kit/ang/crmSearchAdmin/searchSegment/editDialog.html
index 4042add700..c6969214e9 100644
--- a/ext/search_kit/ang/crmSearchAdmin/searchSegment/editDialog.html
+++ b/ext/search_kit/ang/crmSearchAdmin/searchSegment/editDialog.html
@@ -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>
diff --git a/ext/search_kit/ang/crmSearchAdmin/searchSegmentListing/buttons.html b/ext/search_kit/ang/crmSearchAdmin/searchSegmentListing/buttons.html
index 64b87c6f1e..ac2cec6f18 100644
--- a/ext/search_kit/ang/crmSearchAdmin/searchSegmentListing/buttons.html
+++ b/ext/search_kit/ang/crmSearchAdmin/searchSegmentListing/buttons.html
@@ -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>
diff --git a/ext/search_kit/css/crmSearchAdmin.css b/ext/search_kit/css/crmSearchAdmin.css
index 6b9553c5d2..d5417be04f 100644
--- a/ext/search_kit/css/crmSearchAdmin.css
+++ b/ext/search_kit/css/crmSearchAdmin.css
@@ -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;
-- 
2.25.1