Merge pull request #12442 from…

Merge pull request #12442 from edx/ibrahimahmed443/WL-450-save-cancel-button-on-instructor-image-path

show Save and Cancel button when admin change Instructor image asset …

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(

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) {

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>