From f4c12932cc75e8300e8e6ebc7e8df65369567763 Mon Sep 17 00:00:00 2001 From: Andrew Leung Date: Tue, 18 Mar 2014 11:48:02 -0700 Subject: [PATCH 1/5] Add enrollment term to course autocomplete Test Plan: * Search under Find a Course on any Managed Accounts page * Search for a course in Import Content (Copy a Canvas Course) The autocomplete drop-down should show course name and its term. --- app/coffeescripts/bundles/account_show.coffee | 9 ++++++++- .../subviews/CourseFindSelectView.coffee | 5 ++++- app/controllers/accounts_controller.rb | 2 +- app/views/jst/courses/autocomplete_item.handlebars | 6 ++++++ 4 files changed, 19 insertions(+), 3 deletions(-) create mode 100644 app/views/jst/courses/autocomplete_item.handlebars diff --git a/app/coffeescripts/bundles/account_show.coffee b/app/coffeescripts/bundles/account_show.coffee index 3a6790841d4eb..9f1221d77df11 100644 --- a/app/coffeescripts/bundles/account_show.coffee +++ b/app/coffeescripts/bundles/account_show.coffee @@ -1,6 +1,13 @@ -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}" + # Customize autocomplete to show the term for each matched course. + $('#course_name').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 index e392db45f39ea..537d8f59d7ca5 100644 --- 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 index c55a59d39412b..a9f07b2de6492 100644 --- a/app/controllers/accounts_controller.rb +++ b/app/controllers/accounts_controller.rb @@ -696,7 +696,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/jst/courses/autocomplete_item.handlebars b/app/views/jst/courses/autocomplete_item.handlebars new file mode 100644 index 0000000000000..1eaffa1ae67d4 --- /dev/null +++ b/app/views/jst/courses/autocomplete_item.handlebars @@ -0,0 +1,6 @@ +
  • + +
    {{ label }}
    +
    {{ term }}
    +     +
    • From 0200278d7d365239ab948e227c278cb68580e2b8 Mon Sep 17 00:00:00 2001 From: Andrew Leung Date: Thu, 20 Mar 2014 13:20:06 -0700 Subject: [PATCH 2/5] Improve course autocomplete customization * Update spec to test for enrollment term subtitle in autocomplete * Detect presense of autocomplete before customizing _renderItem --- app/coffeescripts/bundles/account_show.coffee | 5 +++-- spec/selenium/accounts_spec.rb | 5 +++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/app/coffeescripts/bundles/account_show.coffee b/app/coffeescripts/bundles/account_show.coffee index 9f1221d77df11..4026bfe8036d1 100644 --- a/app/coffeescripts/bundles/account_show.coffee +++ b/app/coffeescripts/bundles/account_show.coffee @@ -8,6 +8,7 @@ require [ $('#course_name').on 'autocompleteselect', (e, ui) -> path = $(this).data('autocomplete-options')['source'].replace(/\?.+$/, '') window.location = "#{path}/#{ui.item.id}" - # Customize autocomplete to show the term for each matched course. - $('#course_name').data('ui-autocomplete')._renderItem = (ul, item) -> + # Customize autocomplete (if any) to show the term for each matched course. + autocompleteData = $('#course_name').data('ui-autocomplete') + autocompleteData && autocompleteData._renderItem = (ul, item) -> $(autocompleteItemTemplate(item)).appendTo(ul) diff --git a/spec/selenium/accounts_spec.rb b/spec/selenium/accounts_spec.rb index 28509304ea6e8..d01a92ba3b399 100644 --- 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}") From ee2787127f88d5041cddc0bb6cd88a0587a55a19 Mon Sep 17 00:00:00 2001 From: Andrew Leung Date: Thu, 20 Mar 2014 15:10:38 -0700 Subject: [PATCH 3/5] Improve course autocomplete customization (Part 2) Update content migrations Selenium spec to test for enrollment term subtitle in autocomplete. --- spec/selenium/content_migrations_spec.rb | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/spec/selenium/content_migrations_spec.rb b/spec/selenium/content_migrations_spec.rb index 23998a6623ae9..15b26047acbb2 100644 --- 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 From 55f88139af87708f88ba7cac0630b68ed910a492 Mon Sep 17 00:00:00 2001 From: Andrew Leung Date: Fri, 21 Mar 2014 14:52:40 -0700 Subject: [PATCH 4/5] Initialize course autocomplete within the bundle Remove the original autocomplete behavior, in favor of this more robust approach of initializing everything in one place. --- app/coffeescripts/bundles/account_show.coffee | 22 ++++++++++++------- .../accounts/_courses_right_side.html.erb | 3 +-- 2 files changed, 15 insertions(+), 10 deletions(-) diff --git a/app/coffeescripts/bundles/account_show.coffee b/app/coffeescripts/bundles/account_show.coffee index 4026bfe8036d1..440f54dd3f889 100644 --- a/app/coffeescripts/bundles/account_show.coffee +++ b/app/coffeescripts/bundles/account_show.coffee @@ -4,11 +4,17 @@ require [ '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}" - # Customize autocomplete (if any) to show the term for each matched course. - autocompleteData = $('#course_name').data('ui-autocomplete') - autocompleteData && autocompleteData._renderItem = (ul, item) -> - $(autocompleteItemTemplate(item)).appendTo(ul) + $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/views/accounts/_courses_right_side.html.erb b/app/views/accounts/_courses_right_side.html.erb index ed4cb87a634b5..58625021a8dd2 100644 --- 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) %>" /> From 5f2451f9dc0cd9c391854aec7aadd2e14ac461aa Mon Sep 17 00:00:00 2001 From: Andrew Leung Date: Fri, 4 Apr 2014 10:09:32 -0700 Subject: [PATCH 5/5] Add aria-label to course autocomplete --- app/views/jst/courses/autocomplete_item.handlebars | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/views/jst/courses/autocomplete_item.handlebars b/app/views/jst/courses/autocomplete_item.handlebars index 1eaffa1ae67d4..6d6c75e97761e 100644 --- a/app/views/jst/courses/autocomplete_item.handlebars +++ b/app/views/jst/courses/autocomplete_item.handlebars @@ -1,6 +1,6 @@ -
  • +
  • -
    {{ label }}
    -
    {{ term }}
    +
    {{label}}
    +
    {{term}}