Merge pull request #21300 from colemanw/imageField

SearchKit - Image field handler implementation
civicrm · Aug 28, 2021 · 405a373 · 405a373
2 parents 42fdbf0 + a58b705
commit 405a373
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 3 deletions.
diff --git a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminDisplay.component.js b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminDisplay.component.js
@@ -133,6 +133,17 @@
         }
       };
 
+      this.toggleImage = function(col) {
+        if (col.image) {
+          delete col.image;
+        } else {
+          col.image = {
+            alt: this.getColLabel(col)
+          };
+          delete col.editable;
+        }
+      };
+
       this.toggleEditable = function(col) {
         if (col.editable) {
           delete col.editable;
@@ -160,7 +171,7 @@
       this.isEditable = function(col) {
         var expr = ctrl.getExprFromSelect(col.key),
           info = searchMeta.parseExpr(expr);
-        return !col.rewrite && !col.link && !info.fn && info.field && !info.field.readonly;
+        return !col.image && !col.rewrite && !col.link && !info.fn && info.field && !info.field.readonly;
       };
 
       this.toggleLink = function(column) {

diff --git a/ext/search_kit/ang/crmSearchAdmin/displays/colType/field.html b/ext/search_kit/ang/crmSearchAdmin/displays/colType/field.html
@@ -19,6 +19,21 @@
   <input class="form-control crm-flex-1" type="text" ng-model="col.title" ng-if="col.title" ng-model-options="{updateOn: 'blur'}" />
   <crm-search-admin-token-select ng-if="col.title" model="col" field="title" suffix=":label"></crm-search-admin-token-select>
 </div>
+<div class="form-inline">
+  <label>
+    <input type="checkbox" ng-checked="col.image" ng-click="$ctrl.parent.toggleImage(col)" >
+    {{:: ts('Image') }}
+  </label>
+  <div class="crm-search-admin-flex-row" ng-if="col.image">
+    <label>{{:: ts('Width') }}</label>
+    <input type="number" min="1" class="form-control crm-flex-1" placeholder="Auto" ng-model="col.image.width">
+    <label>{{:: ts('Height') }}</label>
+    <input type="number" min="1" class="form-control crm-flex-1" placeholder="Auto" ng-model="col.image.height">
+    <label>{{:: ts('Alt Text') }}</label>
+    <input type="text" class="form-control crm-flex-2" ng-model="col.image.alt">
+    <crm-search-admin-token-select api-entity="$ctrl.apiEntity" api-params="$ctrl.apiParams" model="col.image" field="alt"></crm-search-admin-token-select>
+  </div>
+</div>
 <div class="form-inline crm-search-admin-flex-row">
   <label title="{{ ts('Change the contents of this field, or combine multiple field values.') }}">
     <input type="checkbox" ng-checked="col.rewrite" ng-click="$ctrl.parent.toggleRewrite(col)" >

diff --git a/ext/search_kit/ang/crmSearchDisplay/colType/field.html b/ext/search_kit/ang/crmSearchDisplay/colType/field.html
@@ -1,11 +1,17 @@
 <crm-search-display-editable row="row" col="col" on-success="$ctrl.runSearch(row)" cancel="$ctrl.editing = null;" ng-if="col.editable && $ctrl.editing && $ctrl.editing[0] === rowIndex && $ctrl.editing[1] === col.key"></crm-search-display-editable>
-<span ng-if="::!col.link" ng-class="{'crm-editable-enabled': col.editable && !$ctrl.editing && row[col.editable.id]}" ng-click="col.editable && !$ctrl.editing && ($ctrl.editing = [rowIndex, col.key])">
+<span ng-if="::!col.link && !col.image" ng-class="{'crm-editable-enabled': col.editable && !$ctrl.editing && row[col.editable.id]}" ng-click="col.editable && !$ctrl.editing && ($ctrl.editing = [rowIndex, col.key])">
   {{:: $ctrl.formatFieldValue(row, col) }}
 </span>
 <span ng-if="::col.link">
   <span ng-repeat="link in $ctrl.getLinks(row, col)">
     <a target="{{:: col.link.target }}" href="{{:: link.url }}">
+      <span ng-if=":: col.image && $ctrl.formatFieldValue(row, col).length">
+        <img ng-src="{{:: $ctrl.formatFieldValue(row, col) }}" alt="{{:: $ctrl.replaceTokens(col.image.alt, row, $ctrl.settings.columns) }}" height="{{:: col.image.height }}" width="{{:: col.image.width }}"/>
+      </span>
       {{:: link.value }}</a><span ng-if="!$last">,
     </span>
   </span>
 </span>
+<span ng-if=":: !col.link && col.image && $ctrl.formatFieldValue(row, col).length">
+  <img ng-src="{{:: $ctrl.formatFieldValue(row, col) }}" alt="{{:: $ctrl.replaceTokens(col.image.alt, row, $ctrl.settings.columns) }}" height="{{:: col.image.height }}" width="{{:: col.image.width }}"/>
+</span>
diff --git a/ext/search_kit/ang/crmSearchDisplay/traits/searchDisplayBaseTrait.service.js b/ext/search_kit/ang/crmSearchDisplay/traits/searchDisplayBaseTrait.service.js
@@ -40,7 +40,7 @@
     // Returns value and url for a column formatted as link(s)
     function formatLinks(rowData, key, columns) {
       var column = _.findWhere(columns, {key: key}),
-        value = formatRawValue(column, rowData[key]),
+        value = column.image ? '' : formatRawValue(column, rowData[key]),
         values = angular.isArray(value) ? value : [value],
         links = [];
       _.each(values, function(value, index) {