Merge pull request instructure#421 from sfu/feature-course_autocomplete

Add enrollment term to course autocomplete
ifosch · Apr 30, 2014 · b29ae78 · b29ae78
2 parents ed8d9c6 + 5f2451f
commit b29ae78
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 12 deletions.
diff --git a/app/coffeescripts/bundles/account_show.coffee b/app/coffeescripts/bundles/account_show.coffee
@@ -1,6 +1,20 @@
-require ['jquery', 'compiled/behaviors/autocomplete'], ($) ->
+require [
+  'jquery'
+  'jst/courses/autocomplete_item'
+  'compiled/behaviors/autocomplete'
+], ($, autocompleteItemTemplate) ->
   $(document).ready ->
-    # Add an on-select event to the course name autocomplete.
-    $('#course_name').on 'autocompleteselect', (e, ui) ->
-      path = $(this).data('autocomplete-options')['source'].replace(/\?.+$/, '')
-      window.location = "#{path}/#{ui.item.id}"
+    $courseSearchField = $('#course_name')
+    if $courseSearchField.length
+      autocompleteSource = $courseSearchField.data('autocomplete-source')
+      $courseSearchField.autocomplete
+        minLength: 4
+        delay: 150
+        source: autocompleteSource
+        select: (e, ui) ->
+          # When selected, go to the course page.
+          path = autocompleteSource.replace(/\?.+$/, '')
+          window.location = "#{path}/#{ui.item.id}"
+      # Customize autocomplete to show the enrollment term for each matched course.
+      $courseSearchField.data('ui-autocomplete')._renderItem = (ul, item) ->
+        $(autocompleteItemTemplate(item)).appendTo(ul)
diff --git a/app/coffeescripts/views/content_migrations/subviews/CourseFindSelectView.coffee b/app/coffeescripts/views/content_migrations/subviews/CourseFindSelectView.coffee
@@ -3,9 +3,10 @@ define [
   'Backbone'
   'underscore'
   'jst/content_migrations/subviews/CourseFindSelect'
+  'jst/courses/autocomplete_item'
   'jquery.ajaxJSON'
   'jquery.disableWhileLoading'
-], ($, Backbone, _, template) -> 
+], ($, Backbone, _, template, autocompleteItemTemplate) ->
   class CourseFindSelectView extends Backbone.View
     @optionProperty 'current_user_id'
     template: template
@@ -31,6 +32,8 @@ define [
       @$courseSearchField.autocomplete 
         source: @manageableCourseUrl()
         select: @updateSelect
+      @$courseSearchField.data('ui-autocomplete')._renderItem = (ul, item) ->
+        $(autocompleteItemTemplate(item)).appendTo(ul)
 
     toJSON: -> 
       json = super

diff --git a/app/controllers/accounts_controller.rb b/app/controllers/accounts_controller.rb
@@ -702,7 +702,7 @@ def courses
         format.json  {
           cancel_cache_buster
           expires_in 30.minutes
-          render :json => @courses.map{ |c| {:label => c.name, :id => c.id} }
+          render :json => @courses.map{ |c| {:label => c.name, :id => c.id, :term => c.enrollment_term.name} }
         }
       end
     end

diff --git a/app/views/accounts/_courses_right_side.html.erb b/app/views/accounts/_courses_right_side.html.erb
@@ -33,8 +33,7 @@
                    name="course[name]"
                    style="z-index:10"
                    value="<%= @query %>"
-                   data-behaviors="autocomplete"
-                   data-autocomplete-options="<%= { :minLength => 4, :delay => 150, :source => account_courses_path(@account) }.to_json  %>"
+                   data-autocomplete-source="<%= account_courses_path(@account) %>"
                    />
             <button class='btn'><%= t(:go_button, "Go") %></button>
           </fieldset>

diff --git a/app/views/jst/courses/autocomplete_item.handlebars b/app/views/jst/courses/autocomplete_item.handlebars
@@ -0,0 +1,6 @@
+<li aria-label="{{label}} ({{term}})">
+  <a>
+    <div>{{label}}</div>
+    <div><small><em>{{term}}</em></small></div>
+  </a>
+</li>
diff --git a/spec/selenium/accounts_spec.rb b/spec/selenium/accounts_spec.rb
@@ -313,8 +313,9 @@ def submit_input(form_element, input_field_css, input_text, expect_new_page_load
         ui_auto_complete.should be_displayed
       end
 
-      element = ff('.ui-autocomplete li a').first
-      element.text.should == @course_name
+      elements = ff('.ui-autocomplete li:first-child a div')
+      elements[0].text.should == @course_name
+      elements[1].text.should == 'Default Term'
       keep_trying_until do
         driver.execute_script("$('.ui-autocomplete li a').hover().click()")
         driver.current_url.should include("/courses/#{@course.id}")

diff --git a/spec/selenium/content_migrations_spec.rb b/spec/selenium/content_migrations_spec.rb
@@ -318,7 +318,9 @@ def test_selective_content(source_course=nil)
       end
 
       el = f('.ui-autocomplete li a')
-      el.text.should == @copy_from.name
+      divs = ff('div', el)
+      divs[0].text.should == @copy_from.name
+      divs[1].text.should == @copy_from.enrollment_term.name
       el.click
 
       ff('[name=selective_import]')[0].click