Sortable organizations in admin program form

ECOM-5680

course_discovery/apps/course_metadata/admin.py

@@ -111,6 +111,8 @@ class ProgramAdmin(admin.ModelAdmin):
         try:
             # courses are ordered by django id, but form.cleaned_data is ordered correctly
             obj.courses = form.cleaned_data.get('courses')
+            obj.authoring_organizations = form.cleaned_data.get('authoring_organizations')
+            obj.credit_backing_organizations = form.cleaned_data.get('credit_backing_organizations')
             obj.save()
             self.save_error = False
         except ProgramPublisherException as ex:

course_discovery/apps/course_metadata/forms.py

@@ -39,18 +39,21 @@ class ProgramAdminForm(HackDjangoAutocompleteMixin, forms.ModelForm):
                 url='admin_metadata:course-autocomplete',
                 attrs={
                     'data-minimum-input-length': 3,
+                    'class': 'sortable-select',
                 },
             ),
             'authoring_organizations': autocomplete.ModelSelect2Multiple(
                 url='admin_metadata:organisation-autocomplete',
                 attrs={
                     'data-minimum-input-length': 3,
+                    'class': 'sortable-select',
                 }
             ),
             'credit_backing_organizations': autocomplete.ModelSelect2Multiple(
                 url='admin_metadata:organisation-autocomplete',
                 attrs={
                     'data-minimum-input-length': 3,
+                    'class': 'sortable-select',
                 }
             ),
             'video': autocomplete.ModelSelect2(

course_discovery/static/js/sortable_select.js

-function updateSelect2Data(visibleCourseTitles){
+function updateSelect2Data(el){
     var i, j,
-        visibleCourseTitlesLength,
+        visibleTitlesLength,
         selectOptionsLength,
-        visibleCourseTitles = [],
+        visibleTitles = [],
         selectOptions = [],
         items = [],
-        selectOptionsSelector = '.field-courses .select2-hidden-accessible';
+        selectOptionsElement = $(el).find('.select2-hidden-accessible'),
+        selectChoicesElement = $(el).find('.select2-selection__choice'),
+        selectOptionElement = $(selectOptionsElement).find('option');
 
-    $('.field-courses .select2-selection__choice').each(function(index, value){
+    selectChoicesElement.each(function(index, value){
         if (value.title){
-            visibleCourseTitles.push(value.title);
+            visibleTitles.push(value.title);
         }
     });
 
-    $('.field-courses .select2-hidden-accessible option').each(function(index, value){
+    selectOptionElement.each(function(index, value){
         selectOptions.push({id: value.value, text: value.text});
     });
 
     // Update select2 options with new data
-    visibleCourseTitlesLength = visibleCourseTitles.length;
+    visibleTitlesLength = visibleTitles.length;
     selectOptionsLength = selectOptions.length;
-    for (i = 0; i < visibleCourseTitlesLength; i++) {
+    for (i = 0; i < visibleTitlesLength; i++) {
         for (j = 0; j < selectOptionsLength; j++) {
-            if (selectOptions[j].text === visibleCourseTitles[i]){
+            if (selectOptions[j].text === visibleTitles[i]){
                 items.push('<option selected="selected" value="' + selectOptions[j].id + '">' +
                            selectOptions[j].text + '</option>'
                 );
             }
         }
     }
+
     if (items){
-        $(selectOptionsSelector).html(items.join('\n'));
+        selectOptionsElement.html(items.join('\n'));
     }
 }
+
 $(window).load(function(){
     $(function() {
-        var domSelector = '.field-courses .select2-selection--multiple';
-        $('.field-courses ul.select2-selection__rendered').sortable({
-            containment: 'parent',
-            update: updateSelect2Data
+        $('.sortable-select').parents('.form-row').each(function(index, el){
+            $(el).find('ul.select2-selection__rendered').sortable({
+                containment: 'parent',
+                update: function(){updateSelect2Data(el);}
+            })
         })
     })
 });