SearchKit - Image field handler (Fixes dev/core#2781)

ext/search_kit/ang/crmSearchAdmin/crmSearchAdminDisplay.component.js

@@ -133,6 +133,24 @@
         }
       };
 
+      this.toggleImage = function(col) {
+        if (col.imageSrc) {
+          col.imageSrc = '';
+          col.imageAlt = '';
+        } else {
+          // this means custom field of type file
+          if (col.dataType == 'Integer') {
+            // TODO: need to switch to civicrm generated urls with checksum
+            col.imageSrc = '[' + col.key + ']';
+          } else {
+            // contact image and everything else
+            col.imageSrc = '[' + col.key + ']';
+          }
+          col.imageAlt = '[' + col.key + ']';
+          delete col.editable;
+        }
+      };
+
       this.toggleEditable = function(col) {
         if (col.editable) {
           delete col.editable;
@@ -160,7 +178,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.imageSrc && !col.rewrite && !col.link && !info.fn && info.field && !info.field.readonly;
       };
 
       this.toggleLink = function(column) {

ext/search_kit/ang/crmSearchAdmin/displays/colType/field.html

@@ -19,6 +19,20 @@
   <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.imageSrc" ng-click="$ctrl.parent.toggleImage(col)" >
+    {{:: ts('Image') }}
+  </label>
+  <div class="crm-search-admin-flex-row" ng-if="col.imageSrc">
+    <label>{{:: ts('Width') }}</label> <input type="number" class="form-control crm-flex-1" placeholder="Auto" ng-model="col.imageWidth" ng-model-options="{updateOn: 'blur'}">
+    <label>{{:: ts('Height') }}</label> <input type="number" class="form-control crm-flex-1" placeholder="Auto" ng-model="col.imageHeight" ng-model-options="{updateOn: 'blur'}">
+    <label>{{:: ts('Path') }}</label> <input type="text" class="form-control crm-flex-1" ng-model="col.imageSrc" ng-model-options="{updateOn: 'blur'}">
+    <crm-search-admin-token-select api-entity="$ctrl.apiEntity" api-params="$ctrl.apiParams" model="col" field="imageSrc"></crm-search-admin-token-select>
+    <label>{{:: ts('Alt') }}</label> <input type="text" class="form-control crm-flex-1" ng-model="col.imageAlt" model="col" ng-model-options="{updateOn: 'blur'}">
+    <crm-search-admin-token-select api-entity="$ctrl.apiEntity" api-params="$ctrl.apiParams" model="col" field="imageAlt"></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)" >

ext/search_kit/ang/crmSearchDisplay/colType/field.html

@@ -1,5 +1,5 @@
 <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.imageSrc" 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">
@@ -9,3 +9,6 @@
     </span>
   </span>
 </span>
+<span ng-if="::col.imageSrc">
+  <img ng-if="$ctrl.getImageAttribute(row, col, 'imageSrc') != 'null'" src="{{:: $ctrl.getImageAttribute(row, col, 'imageSrc') }}" alt="{{::  $ctrl.getImageAttribute(row, col, 'imageAlt') }}" height="{{:: col.imageHeight}}" width="{{:: col.imageWidth}}"/>
+</span>

ext/search_kit/ang/crmSearchDisplay/traits/searchDisplayBaseTrait.service.js

@@ -52,6 +52,18 @@
       return links;
     }
 
+    // Returns image attributes for a image column
+    function formatImageAttribute(rowData, key, columns, attribute) {
+      var column = _.findWhere(columns, {key: key});
+
+      var attributeValue = column.imageSrc;
+      if (attribute == 'imageAlt') {
+        attributeValue = column.imageAlt;
+      }
+
+      return replaceTokens(attributeValue, rowData, columns);
+    }
+
     // Formats raw field value according to data type
     function formatRawValue(column, value) {
       var type = column && column.dataType,
@@ -192,6 +204,9 @@
       },
       formatFieldValue: function(rowData, col) {
         return formatDisplayValue(rowData, col.key, this.settings.columns);
+      },
+      getImageAttribute: function (rowData, col, attribute) {
+        return formatImageAttribute(rowData, col.key, this.settings.columns, attribute);
       }
     };
   });