From b3411074af7e95d00d8a2568802abe58608c7012 Mon Sep 17 00:00:00 2001
From: Ibrahim <ibrahimahmed443@gmail.com>
Date: Thu, 12 May 2016 15:37:07 +0500
Subject: [PATCH] show Save and Cancel button when admin change Instructor
 image asset path from Studio schedule and details page

---
 cms/static/js/spec/views/settings/main_spec.js       |  3 ++-
 cms/static/js/views/settings/main.js                 | 12 +++++++++++-
 .../js/course-instructor-details.underscore          |  4 ++--
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/cms/static/js/spec/views/settings/main_spec.js b/cms/static/js/spec/views/settings/main_spec.js
index e87d706c9e..ff5a7ce788 100644
--- a/cms/static/js/spec/views/settings/main_spec.js
+++ b/cms/static/js/spec/views/settings/main_spec.js
@@ -333,7 +333,7 @@ define([
                             "name": "test_name",
                             "title": "test_title",
                             "organization": "test_org",
-                            "image": "",
+                            "image": "test_image",
                             "bio": "test_bio"
                         }]
                     }
@@ -344,6 +344,7 @@ define([
             this.view.$("#course-instructor-title-0").val('test_title').trigger('change');
             this.view.$("#course-instructor-organization-0").val('test_org').trigger('change');
             this.view.$("#course-instructor-bio-0").val('test_bio').trigger('change');
+            this.view.$("#course-instructor-image-0").val('test_image').trigger('change');
 
             this.view.saveView();
             AjaxHelpers.expectJsonRequest(
diff --git a/cms/static/js/views/settings/main.js b/cms/static/js/views/settings/main.js
index dcdf766c53..9e6f99ca7d 100644
--- a/cms/static/js/views/settings/main.js
+++ b/cms/static/js/views/settings/main.js
@@ -236,6 +236,13 @@ var DetailsView = ValidatingView.extend({
             this.model.set('instructor_info', {instructors: instructors});
             this.showNotificationBar();
             break;
+        case 'course-instructor-image-' + index:
+            instructors = this.model.get('instructor_info').instructors.slice(0);
+            instructors[index].image = $(event.currentTarget).val();
+            this.model.set('instructor_info', {instructors: instructors});
+            this.showNotificationBar();
+            this.updateImagePreview(event.currentTarget, '#course-instructor-image-preview-' + index);
+            break;
         case 'course-image-url':
             this.updateImageField(event, 'course_image_name', '#course-image');
             break;
@@ -308,10 +315,13 @@ var DetailsView = ValidatingView.extend({
         // If image path is entered directly, we need to strip the asset prefix
         image_name = _.last(image_name.split('block@'));
         this.model.set(image_field, image_name);
+        this.updateImagePreview(event.currentTarget, selector);
+    },
+    updateImagePreview: function(imagePathInputElement, previewSelector) {
         // Wait to set the image src until the user stops typing
         clearTimeout(this.imageTimer);
         this.imageTimer = setTimeout(function() {
-            $(selector).attr('src', $(event.currentTarget).val());
+            $(previewSelector).attr('src', $(imagePathInputElement).val());
         }, 1000);
     },
     removeVideo: function(event) {
diff --git a/cms/templates/js/course-instructor-details.underscore b/cms/templates/js/course-instructor-details.underscore
index 4d3ed4b933..f437e6963c 100644
--- a/cms/templates/js/course-instructor-details.underscore
+++ b/cms/templates/js/course-instructor-details.underscore
@@ -26,11 +26,11 @@
   <div class="field image field-course-instructor-image current-instructor-image">
   <label for="course-instructor-image-<%- index %>"><%- gettext("Photo") %></label>
     <span class="wrapper-instructor-image">
-        <img class="instructor-image" src="<%- data['image']%>" alt="<%- gettext('Instructor Photo') %>" />
+        <img id="course-instructor-image-preview-<%- index %>" class="instructor-image" src="<%- data['image']%>" alt="<%- gettext('Instructor Photo') %>" />
     </span>
     <div class="wrapper-input">
       <div class="input">
-        <input type="text" dir="ltr" class="long new-instructor-image-url" id="course-instructor-image-<%- index %>" value="<%- data['image'] %>" data-field="image" placeholder="<%- gettext('Instructor Photo URL') %>" autocomplete="off" />
+        <input type="text" dir="ltr" class="long new-instructor-image-url" id="course-instructor-image-<%- index %>" value="<%- data['image'] %>" data-index="<%- index %>"" data-field="image" placeholder="<%- gettext('Instructor Photo URL') %>" autocomplete="off" />
         <span class="tip tip-stacked"><%- gettext("Please add a photo of the instructor (Note: only JPEG or PNG format supported)")%></span>
       </div>
       <button type="button" class="action action-upload-instructor-image" data-index=<%- index %>><%- gettext("Upload Photo") %></button>