SearchKit - Improve UX for adding links to a search display

When adding links to a column, it will now only show relevant links to the entity in the column.
When adding a column of links/buttons, it will make all links available as before,
but by default will only show the ones relevant to the main entity.

diff --git a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminDisplay.component.js b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminDisplay.component.js
index b19d59e4472f191458eb7af1a011589fa7235b6c..83272f795da32338d98b19ef9fda71e5eba3260e 100644 (file)
--- a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminDisplay.component.js
+++ b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminDisplay.component.js
@@ -179,7 +179,7 @@
         if (column.link) {
           ctrl.onChangeLink(column, column.link.path, '');
         } else {
-          var defaultLink = ctrl.getLinks()[0];
+          var defaultLink = ctrl.getLinks(column.key)[0];
           column.link = {path: defaultLink ? defaultLink.path : 'civicrm/'};
           ctrl.onChangeLink(column, null, column.link.path);
         }
@@ -200,11 +200,27 @@
         }
       };
 
-      this.getLinks = function() {
+      this.getLinks = function(columnKey) {
         if (!ctrl.links) {
-          ctrl.links = buildLinks();
+          ctrl.links = {'*': buildLinks()};
         }
-        return ctrl.links;
+        if (!columnKey) {
+          return ctrl.links['*'];
+        }
+        var expr = ctrl.getExprFromSelect(columnKey),
+          info = searchMeta.parseExpr(expr),
+          joinEntity = '';
+        if (info.field.fk_entity || info.field.name !== info.field.fieldName) {
+          joinEntity = info.prefix + (info.field.fk_entity ? info.field.name : info.field.name.substr(0, info.field.name.lastIndexOf('.')));
+        } else if (info.prefix) {
+          joinEntity = info.prefix.replace('.', '');
+        }
+        if (!ctrl.links[joinEntity]) {
+          ctrl.links[joinEntity] = _.filter(ctrl.links['*'], function(link) {
+            return joinEntity === (link.join || '');
+          });
+        }
+        return ctrl.links[joinEntity];
       };
 
       // Build a list of all possible links to main entity or join entities
@@ -224,6 +240,7 @@
             if (entityCount[joinEntity.name] > 1) {
               link.title += ' ' + entityCount[joinEntity.name];
             }
+            link.join = joinName[1];
             links.push(link);
           });
         });
@@ -238,6 +255,7 @@
                 _.each((joinEntity || {}).paths, function(path) {
                   var link = _.cloneDeep(path);
                   link.path = link.path.replace(/\[id/g, '[' + idField);
+                  link.join = idField;
                   links.push(link);
                 });
               }

diff --git a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminLinkGroup.component.js b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminLinkGroup.component.js
index d9145431a684e87e0df50a1fa3fa999720ca2f20..2768a4bcfce3cedf6613e7b0100dd2c2588cb621 100644 (file)
--- a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminLinkGroup.component.js
+++ b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminLinkGroup.component.js
@@ -60,9 +60,12 @@
       };
 
       this.$onInit = function() {
+        var defaultLinks = _.filter(ctrl.links, function(link) {
+          return !link.join;
+        });
         if (!ctrl.group.length) {
-          if (ctrl.links.length) {
-            _.each(_.pluck(ctrl.links, 'path'), ctrl.addItem);
+          if (defaultLinks.length) {
+            _.each(_.pluck(defaultLinks, 'path'), ctrl.addItem);
           } else {
             ctrl.addItem('civicrm/');
           }

diff --git a/ext/search_kit/ang/crmSearchAdmin/displays/colType/field.html b/ext/search_kit/ang/crmSearchAdmin/displays/colType/field.html
index 7b0969cbd27e8620c4d4c6f6c955b0579912d758..21737f80ea96e609d37725181eccaa9d73dc8009 100644 (file)
--- a/ext/search_kit/ang/crmSearchAdmin/displays/colType/field.html
+++ b/ext/search_kit/ang/crmSearchAdmin/displays/colType/field.html
@@ -8,7 +8,7 @@
     <option value="_blank">{{:: ts('New tab') }}</option>
     <option value="crm-popup">{{:: ts('Popup dialog') }}</option>
   </select>
-  <crm-search-admin-link-select ng-if="col.link" link="col.link" on-change="$ctrl.parent.onChangeLink(col, before, after)" api-entity="$ctrl.apiEntity" api-params="$ctrl.apiParams" links=":: $ctrl.parent.getLinks()">
+  <crm-search-admin-link-select ng-if="col.link" link="col.link" on-change="$ctrl.parent.onChangeLink(col, before, after)" api-entity="$ctrl.apiEntity" api-params="$ctrl.apiParams" links=":: $ctrl.parent.getLinks(col.key)">
   </crm-search-admin-link-select>
 </div>
 <div class="form-inline crm-search-admin-flex-row">