EDUCATOR-1593 Fix course run form loading.

course_discovery/apps/publisher/forms.py

@@ -29,18 +29,6 @@ class UserModelChoiceField(forms.ModelChoiceField):
         return obj.get_full_name() or obj.username
 
 
-class PersonModelMultipleChoice(forms.ModelMultipleChoiceField):
-    def label_from_instance(self, obj):
-        context = {
-            'profile_image': obj.get_profile_image_url,
-            'full_name': obj.full_name,
-            'can_edit_instructor': not obj.profile_image_url,
-            'uuid': obj.uuid,
-            'organization_id': obj.position.organization_id if hasattr(obj, 'position') else None
-        }
-        return str(render_to_string('publisher/_personFieldLabel.html', context=context))
-
-
 class ClearableImageInput(forms.ClearableFileInput):
     """
     ClearableFileInput render the saved image as link.
@@ -233,16 +221,9 @@ class CourseSearchForm(forms.Form):
 class CourseRunForm(BaseForm):
     start = forms.DateTimeField(label=_('Course Start Date'), required=True)
     end = forms.DateTimeField(label=_('Course End Date'), required=True)
-    staff = PersonModelMultipleChoice(
+    staff = forms.ModelMultipleChoiceField(
         label=_('Instructor'),
         queryset=Person.objects.all(),
-        widget=autocomplete.ModelSelect2Multiple(
-            url='admin_metadata:person-autocomplete',
-            attrs={
-                'data-minimum-input-length': 2,
-                'data-html': 'true',
-            }
-        ),
         required=False,
     )
     target_content = forms.BooleanField(

course_discovery/apps/publisher/templates/publisher/_personFieldLabel.html

-<img src="{{ profile_image }}"/><span{% if can_edit_instructor %}  data-can-edit="{{ can_edit_instructor }}" {% endif %} data-uuid="{{ uuid }}" >{{ full_name }}</span>{% if organization_id %}<span>{{ organization_id }}</span>{% endif %}
+<div class="instructor" id="instructor_{{ staff.id }}">
+    <input type="hidden" id="staff_{{ staff.id }}" name="staff" value="{{ staff.id }}">
+    <div><img src="{% if staff.profile_image_url %}{{ staff.profile_image_url }}{% else %}{{ staff.profile_image.url }}{% endif %}"></div>
+    <div><a class="delete" id="{{ staff.id }}" href="#"><i class="fa fa-trash-o fa-fw"></i></a>
+        {% if course_user_role == 'course_team' %}
+            {% if staff.position %}
+                {% if staff.position.organization_id in organizations_ids and staff.uuid %}
+                    <a class="edit" id="{{ staff.uuid }}" href="#"><i class="fa fa-pencil-square-o fa-fw"></i></a>
+                {% endif %}
+            {% endif %}
+        {% else %}
+            {% if not staff.profile_image_url %}
+                <a class="edit" id="{{ staff.uuid }}" href="#"><i class="fa fa-pencil-square-o fa-fw"></i></a>
+            {% endif %}
+        {% endif %}
+        <b>{{ staff.full_name }}</b>
+    </div>
+</div>

course_discovery/apps/publisher/templates/publisher/course_run/edit_run_form.html

@@ -212,11 +212,23 @@
                     <div id="course_user_role" class="hidden">{{ course_user_role }}</div>
                     <div class="col col-6 instructor-select">
                         <label class="field-label ">{{ run_form.staff.label_tag }} <span class="required">*</span></label>
-                        {{ run_form.staff }}
+                        <select name="staff" data-autocomplete-light-function="select2"
+                                multiple="multiple" data-minimum-input-length="2"
+                                data-autocomplete-light-url="/admin/course_metadata/person-autocomplete/"
+                                id="id_staff" data-html="true" class="field-input">
+                        </select>
+
+
                         <div class="selected-instructor">
-                          {% if publisher_add_instructor_feature %}
-                            <button type="button" id="add-new-instructor">{% trans "Add New" %}<br>{% trans "Instructor" %}</button>
-                          {% endif %}
+                            {% if publisher_add_instructor_feature %}
+                                <button type="button"
+                                        id="add-new-instructor">{% trans "Add New" %}<br>{% trans "Instructor" %}
+                                </button>
+                            {% endif %}
+                            {% for staff in run_form.instance.staff.all %}
+                                {% include "publisher/_personFieldLabel.html" %}
+                            {% endfor %}
+
                         </div>
                     </div>
                 </div>

course_discovery/apps/publisher/tests/test_forms.py

@@ -8,8 +8,7 @@ from waffle.testutils import override_switch
 
 from course_discovery.apps.core.models import User
 from course_discovery.apps.core.tests.factories import UserFactory
-from course_discovery.apps.course_metadata.models import Person
-from course_discovery.apps.course_metadata.tests.factories import OrganizationFactory, PersonFactory
+from course_discovery.apps.course_metadata.tests.factories import OrganizationFactory
 from course_discovery.apps.publisher.forms import CourseForm, CourseRunForm, PublisherUserCreationForm, SeatForm
 from course_discovery.apps.publisher.models import Seat
 from course_discovery.apps.publisher.tests.factories import CourseFactory, OrganizationExtensionFactory, SeatFactory
@@ -47,28 +46,6 @@ class UserModelChoiceFieldTests(TestCase):
             self.assertEqual(choice_label, expected_name)
 
 
-class PersonModelMultipleChoiceTests(TestCase):
-
-    def test_person_multiple_choice(self):
-        """
-        Verify that PersonModelMultipleChoice returns `full_name` and `profile_image_url` as choice label.
-        """
-        course_form = CourseRunForm()
-        course_form.fields['staff'].empty_label = None
-
-        person = PersonFactory()
-        course_form.fields['staff'].queryset = Person.objects.all()
-
-        # we need to loop through choices because it is a ModelChoiceIterator
-        for __, choice_label in course_form.fields['staff'].choices:
-            expected = '<img src="{url}"/><span data-uuid="{uuid}" >{full_name}</span>'.format(
-                full_name=person.full_name,
-                uuid=person.uuid,
-                url=person.get_profile_image_url
-            )
-            self.assertEqual(choice_label.strip(), expected)
-
-
 class PublisherUserCreationFormTests(TestCase):
     """
     Tests for the publisher `PublisherUserCreationForm`.

course_discovery/static/js/publisher/instructors.js

-$(document).ready(function(){
+$(document).ready(function () {
 
-    $("#id_staff").find('option:selected').each(function(){
-        var id = this.value,
-            label = $.parseHTML(this.label),
-            image_source = $(label[0]).attr('src'),
-            name = $(label[1]).text(),
-            uuid = $(label[1]).data('uuid'),
-            organization_id = $(label[2]).text(),
-            edit_instructor = $(label[1]).data('can-edit');
-        renderSelectedInstructor(id, name, image_source, uuid, organization_id, edit_instructor);
-    });
-
-    $("#id_staff").on("select2:select", function(e) {
+    $("#id_staff").on("select2:select", function (e) {
         var $instructorSelector = e.params.data,
-            id = $instructorSelector.id,

+            id = $instructorSelector.id,
             selectedInstructorData = $.parseHTML($instructorSelector.text)[0],
-            image_source = $(selectedInstructorData).find('img').attr('src'),

+            image_source = $(selectedInstructorData).find('img').attr('src'),
             name = $(selectedInstructorData).find('b').text(),
             uuid = $(selectedInstructorData)[0].id,
             organization_id = $(selectedInstructorData).find('span').text(),
@@ -24,7 +13,7 @@ $(document).ready(function(){
 
     });
 
-    $('#add-new-instructor').click(function(e){
+    $('#add-new-instructor').click(function (e) {
         clearModalError();
         var btnInstructor = $('#add-instructor-btn');
         $('#addInstructorModal').show();
@@ -41,7 +30,7 @@ $(document).ready(function(){
             url = $(this).data('url'),
             uuid = $('#addInstructorModal').data('uuid');
 
-        if (!editMode && $('#staffImageSelect').get(0).files.length === 0){
+        if (!editMode && $('#staffImageSelect').get(0).files.length === 0) {
             addModalError(gettext("Please upload a instructor image. File must be smaller than 1 megabyte in size."));
             return false;
         }
@@ -137,6 +126,7 @@ $(document).on('click', '.selected-instructor a.delete', function (e) {
         option = $staff.find('option:contains("' + id + '")');
     }
     option.remove();
+    $('#staff_' + id).remove();
     this.closest('.selected-instructor, .instructor').remove();
     $('.instructor-select').find('.select2-selection__choice').remove();
 });
@@ -144,22 +134,23 @@ $(document).on('click', '.selected-instructor a.delete', function (e) {
 function renderSelectedInstructor(id, name, image, uuid, organization_id, edit_instructor) {
     var user_organizations_ids = $('#user_organizations_ids').text(),
         course_user_role = $('#course_user_role').text(),
-        instructorHtmlStart = '<div class="instructor" id= "instructor_'+ id +'"><div><img src="' + image + '"></div><div>',
+        staff = '<input type="hidden" id="staff_' + id +  '"name="staff" value="' + id + '">',
+        instructorHtmlStart = '<div class="instructor" id= "instructor_' + id + '"><div><img src="' + image + '"></div><div>',
         instructorHtmlEnd = '<b>' + name + '</b></div></div>',
         controlOptions = '<a class="delete" id="' + id + '"href="#"><i class="fa fa-trash-o fa-fw"></i></a>';
 
 
     if (course_user_role == "course_team") {
-            if ($.inArray(parseInt(organization_id), JSON.parse(user_organizations_ids)) > -1 && uuid) {
-                controlOptions += '<a class="edit" id="' + uuid + '"href="#"><i class="fa fa-pencil-square-o fa-fw"></i></a>';
-            }
+        if ($.inArray(parseInt(organization_id), JSON.parse(user_organizations_ids)) > -1 && uuid) {
+            controlOptions += '<a class="edit" id="' + uuid + '"href="#"><i class="fa fa-pencil-square-o fa-fw"></i></a>';
+        }
     }
     else {
-        if (edit_instructor){
+        if (edit_instructor) {
             controlOptions += '<a class="edit" id="' + uuid + '"href="#"><i class="fa fa-pencil-square-o fa-fw"></i></a>';
         }
     }
-    $('.selected-instructor').append(instructorHtmlStart + controlOptions + instructorHtmlEnd);
+    $('.selected-instructor').append(staff + instructorHtmlStart + controlOptions + instructorHtmlEnd);
 }
 
 $(document).on('click', '.btn-save-preview-url', function (e) {