dm-4213 fix practice card images (#715)

* edit practice search js logic handling identifying placeholder images and calling replace function is now its own function `replaceImagePlaceholders` * add js include tag for 'shared/_signed_resource' to crh show * add call for new `replaceImagePlaceholders` function in crh show js * update `.dm-practice-card-img-container` height * edit visn show view to utilize `replaceImagePlaceholders` function with new changes to practice card images it is necessary to use the function to replace placeholder background with s3 images
department-of-veterans-affairs · Oct 12, 2023 · fbe56db · fbe56db
1 parent 262f0a3
commit fbe56db
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 16 deletions.
diff --git a/app/assets/stylesheets/dm/components/_practice_card.scss b/app/assets/stylesheets/dm/components/_practice_card.scss
@@ -83,8 +83,8 @@
   }
 
   .dm-practice-card-img-container {
+    height: 165px;
     min-width: 100%;
-    height: auto;
     display: flex;
     justify-content: center;
     align-items: center;

diff --git a/app/views/clinical_resource_hubs/_crh_show.js.erb b/app/views/clinical_resource_hubs/_crh_show.js.erb
@@ -79,6 +79,7 @@ function searchPracticesByCrh() {
             moreText: 'Load more',
             noMoreText: 'No more results'
         });
+        replaceImagePlaceholders('#search-results .dm-practice-card');
     }
     // Search practices and populate the page
     function search(query, category, radioVal) {

diff --git a/app/views/clinical_resource_hubs/show.html.erb b/app/views/clinical_resource_hubs/show.html.erb
@@ -7,6 +7,7 @@
 
 <% provide :head_tags do %>
   <%= javascript_include_tag '_practice_card_utilities', 'data-turbolinks-track': 'reload' %>
+  <%= javascript_include_tag 'shared/_signed_resource', 'data-turbolinks-track': 'false', defer: true %>
   <%= javascript_tag 'data-turbolinks-track': 'reload' do %>
 
     <%= render partial: 'crh_show', formats: [:js] %>

diff --git a/app/views/practices/_search.js.erb b/app/views/practices/_search.js.erb
@@ -127,6 +127,22 @@ function buildPracticeCard(result) {
     return cardHtml;
 }
 
+function replaceImagePlaceholders(parentSelector) {
+    $(parentSelector).each(function() {
+        // If either the 'src' or the hidden input are undefined, return an empty string
+        var imageSelector = $(this).find('.practice-card-img-placeholder');
+        var imagePracticeId = imageSelector ? imageSelector.attr('data-practice-id') : null;
+        var practiceImagePath = imageSelector ? imageSelector.attr('data-practice-image') : null;
+        var practiceName = $(this).find('.dm-practice-title').text();
+
+        if (imagePracticeId && practiceImagePath) {
+            fetchSignedResource(practiceImagePath).then(signedImgUrl => {
+                replacePlaceholderWithImage(signedImgUrl, imagePracticeId, practiceName);
+            });
+        }
+    });
+}
+
 function replacePlaceholderWithImage(imageUrl, practiceId, practiceName) {
     loadImage(imageUrl, function(loadedImageSrc) {
         var imgTag =
@@ -279,20 +295,7 @@ function searchPracticesPage() {
             // Print results to the page
             document.querySelector('#search-results').innerHTML = finalResults;
             // After the html for the card has been built and applied to the DOM, replace the image 'src' based on the signed url
-            $('#search-results .dm-practice-card').each(function() {
-                // If either the 'src' or the hidden input are undefined, return an empty string
-                var imageSelector = $(this).find('.practice-card-img-placeholder');
-                var imagePracticeId = imageSelector ? imageSelector.attr('data-practice-id') : null;
-                var practiceImagePath = imageSelector ? imageSelector.attr('data-practice-image') : null;
-                var practiceName = $(this).find('.dm-practice-title').text();
-                if (imagePracticeId && practiceImagePath) {
-                    fetchSignedResource(
-                        practiceImagePath,
-                    ).then(signedImgUrl => {
-                        replacePlaceholderWithImage(signedImgUrl, imagePracticeId, practiceName)
-                    });
-                }
-            });
+            replaceImagePlaceholders('#search-results .dm-practice-card');
 
             $(SEARCH_RESULTS).showMoreItems({
                 startNum: 12,

diff --git a/app/views/visns/_show.js.erb b/app/views/visns/_show.js.erb
@@ -64,13 +64,14 @@ function searchPracticesByVisn() {
         $(SEARCH_RESULTS).removeClass('display-none');
         // Print results to the page
         document.querySelector('#search-results').innerHTML = finalResults;
-
+        
         $(SEARCH_RESULTS).showMoreItems({
             startNum: 6,
             afterNum: 6,
             moreText: 'Load more',
             noMoreText: 'No more results'
         });
+        replaceImagePlaceholders('#search-results .dm-practice-card');
     }
     // Search practices and populate the page
     function search(query, category, radioVal) {

diff --git a/app/views/visns/show.html.erb b/app/views/visns/show.html.erb
@@ -2,6 +2,7 @@
 <% provide :footer_classes, 'bg-gray-2' %>
 <% provide :head_tags do %>
   <%= javascript_include_tag '_practice_card_utilities', 'data-turbolinks-track': 'reload' %>
+  <%= javascript_include_tag 'shared/_signed_resource', 'data-turbolinks-track': 'false', defer: true %>
   <%= javascript_tag 'data-turbolinks-track': 'reload' do %>
     <%= render partial: 'show', formats: [:js] %>
     <%# set visnNumber before loading the visns/show file %>