From b7be6140fa3dfab1b71ffaa7e37e5b550f5edf7c Mon Sep 17 00:00:00 2001
From: Kurund Jalmi <kurundjalmi@thirdsectordesign.org>
Date: Mon, 23 Aug 2021 18:05:42 +0100
Subject: [PATCH 1/3] image field handler implementation

---
 .../crmSearchAdminDisplay.component.js            | 13 ++++++++++++-
 .../crmSearchAdmin/displays/colType/field.html    | 12 ++++++++++++
 .../ang/crmSearchDisplay/colType/field.html       |  5 ++++-
 .../traits/searchDisplayBaseTrait.service.js      | 15 +++++++++++++++
 4 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminDisplay.component.js b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminDisplay.component.js
index 7ea85b38884a..515488687fbe 100644
--- 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.imageSrc) {
+          col.imageSrc = '';
+          col.imageAlt = '';
+        } else {
+          col.imageSrc = '[' + col.key + ']';
+          col.imageAlt = '[' + col.key + ']';
+          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.imageSrc && !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
index 8b0cbff69ec8..c942dec21285 100644
--- a/ext/search_kit/ang/crmSearchAdmin/displays/colType/field.html
+++ b/ext/search_kit/ang/crmSearchAdmin/displays/colType/field.html
@@ -19,6 +19,18 @@
   <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('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)" >
diff --git a/ext/search_kit/ang/crmSearchDisplay/colType/field.html b/ext/search_kit/ang/crmSearchDisplay/colType/field.html
index 14f8a146204e..94802191e15b 100644
--- a/ext/search_kit/ang/crmSearchDisplay/colType/field.html
+++ b/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 src="{{:: $ctrl.getImageAttribute(row, col, 'imageSrc') }}" alt="{{::  $ctrl.getImageAttribute(row, col, 'imageAlt') }}" />
+</span>
diff --git a/ext/search_kit/ang/crmSearchDisplay/traits/searchDisplayBaseTrait.service.js b/ext/search_kit/ang/crmSearchDisplay/traits/searchDisplayBaseTrait.service.js
index ee7cfe1a2b7d..5beb874521a7 100644
--- a/ext/search_kit/ang/crmSearchDisplay/traits/searchDisplayBaseTrait.service.js
+++ b/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);
       }
     };
   });

From 6813209d658aba79455e4217e9012facc4f16589 Mon Sep 17 00:00:00 2001
From: Kurund Jalmi <kurundjalmi@thirdsectordesign.org>
Date: Tue, 24 Aug 2021 12:24:00 +0100
Subject: [PATCH 2/3] add image width and height attributes

---
 .../crmSearchAdmin/crmSearchAdminDisplay.component.js    | 9 ++++++++-
 .../ang/crmSearchAdmin/displays/colType/field.html       | 2 ++
 ext/search_kit/ang/crmSearchDisplay/colType/field.html   | 2 +-
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminDisplay.component.js b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminDisplay.component.js
index 515488687fbe..4bfd2369fc0d 100644
--- a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminDisplay.component.js
+++ b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminDisplay.component.js
@@ -138,7 +138,14 @@
           col.imageSrc = '';
           col.imageAlt = '';
         } else {
-          col.imageSrc = '[' + col.key + ']';
+          // 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;
         }
diff --git a/ext/search_kit/ang/crmSearchAdmin/displays/colType/field.html b/ext/search_kit/ang/crmSearchAdmin/displays/colType/field.html
index c942dec21285..b77d2b0900ad 100644
--- a/ext/search_kit/ang/crmSearchAdmin/displays/colType/field.html
+++ b/ext/search_kit/ang/crmSearchAdmin/displays/colType/field.html
@@ -25,6 +25,8 @@
     {{:: 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'}">
diff --git a/ext/search_kit/ang/crmSearchDisplay/colType/field.html b/ext/search_kit/ang/crmSearchDisplay/colType/field.html
index 94802191e15b..5586e94facef 100644
--- a/ext/search_kit/ang/crmSearchDisplay/colType/field.html
+++ b/ext/search_kit/ang/crmSearchDisplay/colType/field.html
@@ -10,5 +10,5 @@
   </span>
 </span>
 <span ng-if="::col.imageSrc">
-  <img src="{{:: $ctrl.getImageAttribute(row, col, 'imageSrc') }}" alt="{{::  $ctrl.getImageAttribute(row, col, 'imageAlt') }}" />
+  <img src="{{:: $ctrl.getImageAttribute(row, col, 'imageSrc') }}" alt="{{::  $ctrl.getImageAttribute(row, col, 'imageAlt') }}" height="{{:: col.imageHeight}}" width="{{:: col.imageWidth}}"/>
 </span>

From 7e781659e3d35bc4a8c03a07d0a5ac4e3071e346 Mon Sep 17 00:00:00 2001
From: Kurund Jalmi <kurundjalmi@thirdsectordesign.org>
Date: Tue, 24 Aug 2021 13:33:57 +0100
Subject: [PATCH 3/3] do not render image if src is missing

---
 ext/search_kit/ang/crmSearchDisplay/colType/field.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ext/search_kit/ang/crmSearchDisplay/colType/field.html b/ext/search_kit/ang/crmSearchDisplay/colType/field.html
index 5586e94facef..5d70d3e10138 100644
--- a/ext/search_kit/ang/crmSearchDisplay/colType/field.html
+++ b/ext/search_kit/ang/crmSearchDisplay/colType/field.html
@@ -10,5 +10,5 @@
   </span>
 </span>
 <span ng-if="::col.imageSrc">
-  <img src="{{:: $ctrl.getImageAttribute(row, col, 'imageSrc') }}" alt="{{::  $ctrl.getImageAttribute(row, col, 'imageAlt') }}" height="{{:: col.imageHeight}}" width="{{:: col.imageWidth}}"/>
+  <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>