SearchKit - Make UI less confusing by not allowing joins to be switched

Switching a join was confusing and buggy. Best to disable that and only allow them to be deleted
civicrm · Jan 21, 2021 · 4df8a1d · 4df8a1d
1 parent 344c48b
commit 4df8a1d
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 13 deletions.
diff --git a/ext/search/ang/crmSearchAdmin/compose/criteria.html b/ext/search/ang/crmSearchAdmin/compose/criteria.html
@@ -4,8 +4,11 @@
       <fieldset ng-repeat="join in $ctrl.savedSearch.api_params.join">
         <div class="form-inline">
           <label for="crm-search-join-{{ $index }}">{{:: ts('With') }}</label>
-          <input id="crm-search-join-{{ $index }}" class="form-control huge" ng-model="join[0]" crm-ui-select="{placeholder: ' ', data: getJoinEntities}" ng-change="changeJoin($index)" />
+          <input id="crm-search-join-{{ $index }}" class="form-control huge" ng-model="join[0]" crm-ui-select="{placeholder: ' ', data: getJoinEntities}" disabled >
           <select class="form-control" ng-model="join[1]" ng-options="o.k as o.v for o in ::joinTypes" ></select>
+          <button class="btn btn-xs btn-danger-outline" ng-click="$ctrl.clearParam('join', $index)" title="{{:: ts('Remove join') }}">
+            <i class="crm-i fa-trash" aria-hidden="true"></i>
+          </button>
         </div>
         <fieldset class="api4-clause-fieldset">
           <crm-search-clause clauses="join" format="json" skip="2 + getJoin(join[0]).conditions.length" op="AND" label="{{ ts('If') }}" fields="fieldsForWhere" ></crm-search-clause>

diff --git a/ext/search/ang/crmSearchAdmin/crmSearchAdmin.component.js b/ext/search/ang/crmSearchAdmin/crmSearchAdmin.component.js
@@ -255,15 +255,6 @@
         });
       };
 
-      $scope.changeJoin = function(idx) {
-        if (ctrl.savedSearch.api_params.join[idx][0]) {
-          ctrl.savedSearch.api_params.join[idx].length = 2;
-          loadFieldOptions();
-        } else {
-          ctrl.clearParam('join', idx);
-        }
-      };
-
       $scope.changeGroupBy = function(idx) {
         if (!ctrl.savedSearch.api_params.groupBy[idx]) {
           ctrl.clearParam('groupBy', idx);

diff --git a/ext/search/css/search.css b/ext/search/css/search.css
@@ -69,9 +69,6 @@
   right: 0;
   top: 0;
 }
-#bootstrap-theme.crm-search crm-search-clause > .btn-group .btn {
-  border: 0 none;
-}
 
 #bootstrap-theme.crm-search fieldset div.api4-input {
   margin-bottom: 10px;