Nutmeg release bug fixes

keyterms/keyterms.py

@@ -141,11 +141,16 @@ def update_keyterm_html(self, list, course_id):
         """
         This handler updates the html to be displayed to the user.
         """
+        # make sure keyterms are in alphabetical order
+        list.sort()
+
         self.keytermhtml = ""
         for keyterm in list:
             div_parent_id = "#allKeytermsList"
-            keyterm_card_header_id = pydash.camel_case("heading" + keyterm)
-            keyterm_data_target = pydash.camel_case("collapse" + keyterm)
+            # remove all non alphanumeric characters and capitalize each word in keyterm. This matches what is being done in keyterms.js 
+            clean_keyterm = ''.join(char for char in keyterm.title() if char.isalnum())
+            keyterm_card_header_id = "heading" + clean_keyterm
+            keyterm_data_target = "collapse" + clean_keyterm
             keyterm_data_target_hashed = f'#{keyterm_data_target}'
             keyterm_show = ("show" if list[0] == keyterm else "")
             cardItem = '<div class="card">\n'
@@ -158,8 +163,8 @@ def update_keyterm_html(self, list, course_id):
             cardItem += '      </h5>\n'
             cardItem += '   </div>\n'
             cardItem += '   <div id="{keyterm_data_target}" class="collapse {keyterm_show}" aria-labelledby="{keyterm_card_header_id}" data-parent="{div_parent_id}">\n'
-            cardItem += '      <div class="card-body">\n'
-            cardItem += '         Example Content.\n'
+            cardItem += '      <div class="{keyterm_data_target} card-body">\n'
+            cardItem += '         Error loading content.\n'
             cardItem += '      </div>\n'
             cardItem += '   </div>\n'
             cardItem += '</div>\n'

keyterms/static/css/collapse.css

@@ -195,7 +195,7 @@ tbody.collapse.in {
 .collapse-btn {
     display: block;
     font-weight: 400;
-    text-align: center;
+    text-align: left;
     white-space: nowrap;
     -webkit-user-select: none;
     -moz-user-select: none;

keyterms/static/js/src/keyterms.js

@@ -6,9 +6,11 @@
 function camelize(str) {
     return str.toLowerCase()
         // Replaces any - or _ characters with a space 
-        .replace(/[-_]+/g, ' ')
+        .replace(/[-_/]+/g, ' ')
         // Removes any non alphanumeric characters 
         .replace(/[^\w\s]/g, '')
+        // Ensure there are no double spaces after removing characters
+        .replace(/  /g, ' ')
         // Uppercases the first character in each group immediately following a space 
         // (delimited by spaces) 
         .replace(/ (.)/g, function($1) { return $1.toUpperCase(); })
@@ -238,6 +240,17 @@ function KeytermsXBlock(runtime, element, initData) {
             function(data, err) {
                 // Store list of all keyterms
                 keytermsJson = data;
+                // Sorts the keyterms into alphabetical order
+                keytermsJson.sort((a, b) => {
+                    if (a.key_name < b.key_name) {
+                      return -1;
+                    }
+                    if (a.key_name > b.key_name) {
+                      return 1;
+                    }
+                    return 0;
+                  });
+                allKeytermsSet.clear();
                 keytermsJson.forEach(keyterm => allKeytermsSet.add(keyterm["key_name"]));
             }).then(data => {
             // Was adding code to style the accordian card header when clicked.
@@ -252,7 +265,14 @@ function KeytermsXBlock(runtime, element, initData) {
 
                 // Definitions
                 if (keytermInformation["definitions"].length > 0) {
-                    formattedContent += `<div class="flex-col"><b>Definitions</b><ul class="bullets">`;
+                    formattedContent += `<div class="flex-col">`
+                    if (keytermInformation["definitions"].length > 1) {
+                        formattedContent += `<b>Definitions</b>`
+                    }
+                    else {
+                        formattedContent += `<b>Definition</b>`
+                    }
+                    formattedContent += `<ul class="bullets">`;
                     keytermInformation["definitions"].forEach(definition => {
                         formattedContent += `<li>${definition["description"]}</li>`
                     })
@@ -310,7 +330,7 @@ function KeytermsXBlock(runtime, element, initData) {
                 */
             });
 
-            var data = { course_id: courseid };
+            var data = { keyterms: allKeytermsSet, course_id: courseid };
             $.ajax({
                 type: "POST",
                 url: getincludedkeytermshandlerUrl,