new assignment index for course homepage

fixes CNVS-10988 test plan: - as a teacher with draft state on - set the homepage to show assignments - the homepage should look like student view - it should look good - it should function normally - you should be able to change the homepage to another view - view it as a student - it should work normally - as a teacher with draft state off - the homepage should look like the old one - it should function as usual - you should be able to swith the homepage - the actual DS assignment index page should work normally - set multiple due dates for assignments - teacher should see multiple dates - students should see their date only - try to break this somehow - on the homepage - if you have it full screen, date available until should be there - if you shrink the screen to a size where there is overlap AND reload - date available until should go away so there is no overlap - make a several assignments with different grading types - teacher & student homepage grade column should look okay Change-Id: I4ff101c05d18592a5c92dc2650eee406116ba4c5 Reviewed-on: https://gerrit.instructure.com/31522 Tested-by: Jenkins <jenkins@instructure.com> Product-Review: Hilary Scharton <hilary@instructure.com> Reviewed-by: Liz Abinante <labinante@instructure.com> QA-Review: Amber Taniuchi <amber@instructure.com>
2014-03-06 17:15:20 -06:00 · 2014-03-06 17:15:20 -06:00 · d7b5b7f09a
parent 1c2e0e5140
commit d7b5b7f09a
10 changed files with 110 additions and 50 deletions
--- a/app/coffeescripts/bundles/assignment_index.coffee
+++ b/app/coffeescripts/bundles/assignment_index.coffee
@ -57,6 +57,10 @@ require [
  assignmentSettingsView = false
  createGroupView = false
  showByView = false
+  indexEl = if window.location.href.indexOf('assignments') == -1
+    '#course_home_content'
+  else
+    "#content"

  if ENV.PERMISSIONS.manage
    assignmentSettingsView = new AssignmentSettingsView
@ -72,7 +76,9 @@ require [
      course: course
      assignmentGroups: assignmentGroups

+
  app = new IndexView
+    el: indexEl
    assignmentGroupsView: assignmentGroupsView
    assignmentSettingsView: assignmentSettingsView
    createGroupView: createGroupView
--- a/app/coffeescripts/views/assignments/IndexView.coffee
+++ b/app/coffeescripts/views/assignments/IndexView.coffee
@ -46,6 +46,8 @@ define [

      @filterKeyBindings() if @userIsStudent()

+      @ensureContentStyle()
+
      @kbDialog = new KeyboardNavDialog().render(keyboardNavTemplate({keyBindings:@keyBindings}))
      window.onkeydown = @focusOnAssignments

@ -104,6 +106,11 @@ define [
    userIsStudent: ->
      _.include(ENV.current_user_roles, "student")

+    ensureContentStyle: ->
+      # when loaded from homepage, need to change content style
+      if window.location.href.indexOf('assignments') == -1
+        $("#content").css("padding", "0em")
+
    filterKeyBindings: =>
      @keyBindings = @keyBindings.filter (binding) ->
        ! _.contains([69,68,65], binding.keyCode)
--- a/app/controllers/courses_controller.rb
+++ b/app/controllers/courses_controller.rb
@ -1325,6 +1325,7 @@ class CoursesController < ApplicationController
        end
      when 'assignments'
        add_crumb(t('#crumbs.assignments', "Assignments"))
+        set_urls_and_permissions_for_assignment_index
        get_sorted_assignments
      when 'modules'
        add_crumb(t('#crumbs.modules', "Modules"))
@ -1928,4 +1929,16 @@ class CoursesController < ApplicationController
    changes
  end

+  def set_urls_and_permissions_for_assignment_index
+    permissions = {manage: false}
+    js_env({
+      :URLS => {
+        :new_assignment_url => new_polymorphic_url([@context, :assignment]),
+        :course_url => api_v1_course_url(@context),
+        :context_modules_url => api_v1_course_context_modules_path(@context),
+        :course_student_submissions_url => api_v1_course_student_submissions_url(@context)
+      },
+      :PERMISSIONS => permissions,
+    })
+  end
 end
--- a/app/stylesheets/new_assignments.sass
+++ b/app/stylesheets/new_assignments.sass
@ -41,6 +41,22 @@
  .default-dates .status-description
    font-weight: bold

+#course_home_content
+  .assignment
+    .ig-title
+      right: 335px
+      min-width: 90px
+      max-width: 260px
+      padding-right: 30px
+    .ig-details
+      text-align: right
+      width: 545px
+
+@media screen and (max-width : 1280px)
+  #course_home_content
+    .assignment-date-available
+      visibility: hidden
+
 .ag-weights-tr
  border-bottom: 1px solid #dae1e6

--- a/app/views/accounts/show.html.erb
+++ b/app/views/accounts/show.html.erb
@ -21,10 +21,9 @@
  <% end %>

  <ul class='courses' style="list-style-type: none;">
-    
    <%= render :partial => "course", :collection => @courses %>
    <%= render :partial => "course" %>
-  </ul>  
+  </ul>
 </div>
 <% else %>
  <h3><%= @root_account.enrollment_terms.active.count > 1 ?
--- a/app/views/assignments/_assignments_list_right_side.html.erb
+++ b/app/views/assignments/_assignments_list_right_side.html.erb
@ -1,8 +1,10 @@
 <% course_home ||= false %>
  <% if @just_viewing_one_course %>
  <div class="rs-margin-lr rs-margin-top">
-    <a href="#" class="show_groups_link btn button-sidebar-wide"><%= t 'links.group_assignments_by_type', "Group Assignments by Type" %></a>
-    <a href="#" class="hide_groups_link btn button-sidebar-wide" style="display: none;"><%= t 'links.just_show_assignment_list', "Just Show the Assignment List" %></a>
+    <% unless @context.feature_enabled?(:draft_state) %>
+      <a href="#" class="show_groups_link btn button-sidebar-wide"><%= t 'links.group_assignments_by_type', "Group Assignments by Type" %></a>
+      <a href="#" class="hide_groups_link btn button-sidebar-wide" style="display: none;"><%= t 'links.just_show_assignment_list', "Just Show the Assignment List" %></a>
+    <% end %>
    <% if @courses.length == 1 && can_do(@courses.first, @current_user, :participate_as_student) %>
      <a href="<%= context_url(@context, :context_grades_url) %>" class="btn button-sidebar-wide"><%= image_tag "grading_icon.png" %> <%= t 'links.see_current_grades', "See my grades so far" %></a>
    <% end %>
--- a/app/views/assignments/new_index.html.erb
+++ b/app/views/assignments/new_index.html.erb
@ -10,4 +10,4 @@
 %>
 <div id="hidden"></div>
 <% content_for :keyboard_navigation do %>
-<% end %>
+<% end %>
--- a/app/views/courses/show.html.erb
+++ b/app/views/courses/show.html.erb
@ -141,37 +141,39 @@
 <% end %>

 <% if @context.feature_enabled?(:draft_state) %>
-<div id="edit_course_home_content" style="display: none;">
-  <h2><%= t('draft_state.headings.set_layout', %{Set Home Page Layout}) %></h2>
-  <%= form_for :course, :url => context_url(@context, :context_url), :html => {:tabindex=>"0", :'data-turn-into-dialog'=>'{"height": 300, "width":500,"modal":true}', :title=>t('headings.edit_homepage_title', %{Edit Homepage}), :style => "display:none", :id => "edit_course_home_content_form", :method => :put} do |f| %>
-  <label for="edit_course_home_content_select"><%= t('draft_state.labels.select_content', %{Select what you'd like to display on the homepage.}) %></label>
-  <br>
-  <select name="course[default_view]" id="edit_course_home_content_select">
-    <option value="feed" <%= 'selected' if @context.default_view == 'feed' %>><%= t('draft_state.options.recent_activity_dashboard', %{Recent Activity Dashboard}) %></option>
-    <option value="wiki" <%= 'selected' if @context.default_view == 'wiki' %>><%= t('draft_state.options.custom_page', %{Pages Front Page}) %></option>
-    <option value="modules" <%= 'selected' if @context.default_view == 'modules' %>><%= t('draft_state.options.modules', %{Course Modules}) %></option>
-    <option value="assignments" <%= 'selected' if @context.default_view == 'assignments' %>><%= t('draft_state.options.assignments', %{Assignments List}) %></option>
-    <option value="syllabus" <%= 'selected' if @context.default_view == 'syllabus' %>><%= t('draft_state.options.syllabus', %{Syllabus}) %></option>
-  </select>
-  <div class="button-container">
-    <a type="button" class="btn button-secondary dialog_closer"><%= t('draft_state.buttons.cancel', %{Cancel}) %></a>
-    <button type="submit" class="btn btn-primary"><%= t('draft_state.buttons.update_layout', %{Save}) %></button>
-  </div>
-<% end %>
+  <% content_for :right_side do %>
+    <div id="edit_course_home_content" style="display: none;">
+      <h2><%= t('draft_state.headings.set_layout', %{Set Home Page Layout}) %></h2>
+      <%= form_for :course, :url => context_url(@context, :context_url), :html => {:tabindex=>"0", :'data-turn-into-dialog'=>'{"height": 300, "width":500,"modal":true}', :title=>t('headings.edit_homepage_title', %{Edit Homepage}), :style => "display:none", :id => "edit_course_home_content_form", :method => :put} do |f| %>
+        <label for="edit_course_home_content_select"><%= t('draft_state.labels.select_content', %{Select what you'd like to display on the homepage.}) %></label>
+        <br>
+        <select name="course[default_view]" id="edit_course_home_content_select">
+          <option value="feed" <%= 'selected' if @context.default_view == 'feed' %>><%= t('draft_state.options.recent_activity_dashboard', %{Recent Activity Dashboard}) %></option>
+          <option value="wiki" <%= 'selected' if @context.default_view == 'wiki' %>><%= t('draft_state.options.custom_page', %{Pages Front Page}) %></option>
+          <option value="modules" <%= 'selected' if @context.default_view == 'modules' %>><%= t('draft_state.options.modules', %{Course Modules}) %></option>
+          <option value="assignments" <%= 'selected' if @context.default_view == 'assignments' %>><%= t('draft_state.options.assignments', %{Assignments List}) %></option>
+          <option value="syllabus" <%= 'selected' if @context.default_view == 'syllabus' %>><%= t('draft_state.options.syllabus', %{Syllabus}) %></option>
+        </select>
+        <div class="button-container">
+          <a type="button" class="btn button-secondary dialog_closer"><%= t('draft_state.buttons.cancel', %{Cancel}) %></a>
+          <button type="submit" class="btn btn-primary"><%= t('draft_state.buttons.update_layout', %{Save}) %></button>
+        </div>
+      <% end %>
+    </div>
+  <% end %>
 <% else %>
  <div id="edit_course_home_content" style="display: none;">
    <%= form_for :course, :url => context_url(@context, :context_url), :html => {:id => "edit_course_home_content_form", :method => :put} do |f| %>
      <h2><%= t('headings.set_layout', %{Set Home Page Layout}) %></h2>
-
      <p>
-      <label for="edit_course_home_content_select"><strong><%= t('labels.select_content', %{When people visit the course page, show them}) %></strong></label>
-      <select name="course[default_view]" id="edit_course_home_content_select">
-        <option value="feed" <%= 'selected' if @context.default_view == 'feed' %>><%= t('options.recent_activity_dashboard', %{the Recent Activity Dashboard}) %></option>
-        <option value="wiki" <%= 'selected' if @context.default_view == 'wiki' %>><%= t('options.custom_page', %{a Page I'll Design Myself}) %></option>
-        <option value="modules" <%= 'selected' if @context.default_view == 'modules' %>><%= t('options.modules', %{the Course Modules/Sections}) %></option>
-        <option value="assignments" <%= 'selected' if @context.default_view == 'assignments' %>><%= t('options.assignments', %{the Assignment List}) %></option>
-        <option value="syllabus" <%= 'selected' if @context.default_view == 'syllabus' %>><%= t('options.syllabus', %{the Assignments with Syllabus}) %></option>
-      </select>
+        <label for="edit_course_home_content_select"><strong><%= t('labels.select_content', %{When people visit the course page, show them}) %></strong></label>
+        <select name="course[default_view]" id="edit_course_home_content_select">
+          <option value="feed" <%= 'selected' if @context.default_view == 'feed' %>><%= t('options.recent_activity_dashboard', %{the Recent Activity Dashboard}) %></option>
+          <option value="wiki" <%= 'selected' if @context.default_view == 'wiki' %>><%= t('options.custom_page', %{a Page I'll Design Myself}) %></option>
+          <option value="modules" <%= 'selected' if @context.default_view == 'modules' %>><%= t('options.modules', %{the Course Modules/Sections}) %></option>
+          <option value="assignments" <%= 'selected' if @context.default_view == 'assignments' %>><%= t('options.assignments', %{the Assignment List}) %></option>
+          <option value="syllabus" <%= 'selected' if @context.default_view == 'syllabus' %>><%= t('options.syllabus', %{the Assignments with Syllabus}) %></option>
+        </select>
      </p>
      <div class="select_details ui-state-highlight ui-corner-all" style="display: none; padding: 1em; font-size: 12px;">
        <div class="feed_details options_details">
@ -183,26 +185,23 @@
        <div class="modules_details options_details">
          <%= mt 'details.modules', "You can organize your course into **modules or sections**, where each section contains a related set of files, assignments, pages, etc.  If you want, you can also sequence modules by defining criteria and prerequisites that need to be completed before each module is unlocked.

-This layout is probably best for courses that aren't based on a specific schedule like a term or semester." %>
-</p>
+            -This layout is probably best for courses that aren't based on a specific schedule like a term or semester." %>
+        </div>
+        <div class="assignments_details options_details">
+          <%= mt 'details.assignments', "This view shows the **list of assignments** for this course, with upcoming and recent assignments at the top." %>
+        </div>
+        <div class="syllabus_details options_details">
+          <%= mt 'details.syllabus', "The **syllabus view** lets you write up a description of course expectations or introduce the course with links, images, etc. and then also shows a calendar view of all assignments and course events." %>
+        </div>
      </div>
-      <div class="assignments_details options_details">
-        <%= mt 'details.assignments', "This view shows the **list of assignments** for this course, with upcoming and recent assignments at the top." %>
+      <div class="button-container">
+        <button type="submit" class="btn"><%= t('buttons.update_layout', %{Update Layout}) %></button>
+        <button type="button" class="btn button-secondary cancel_button"><%= t('#buttons.cancel', %{Cancel}) %></button>
      </div>
-      <div class="syllabus_details options_details">
-        <%= mt 'details.syllabus', "The **syllabus view** lets you write up a description of course expectations or introduce the course with links, images, etc. and then also shows a calendar view of all assignments and course events." %>
-      </div>
-    </div>
-    <div class="button-container">
-      <button type="submit" class="btn"><%= t('buttons.update_layout', %{Update Layout}) %></button>
-      <button type="button" class="btn button-secondary cancel_button"><%= t('#buttons.cancel', %{Cancel}) %></button>
-    </div>
-  <% end %>
-<% end %>
-<% unless @context.feature_enabled?(:draft_state) %>
+    <% end %>
+  </div>
  <div class="clear"></div>
 <% end %>
-</div>

 <div id="course_home_content">
  <% unless @context.feature_enabled?(:draft_state) %>
@ -237,7 +236,16 @@
      <%= render :partial => 'context_modules/content', :locals => {:course_home => true} %>
    <% end %>
  <% elsif @course_home_view == 'assignments' %>
-    <%= render :partial => 'assignments/assignments_list_content', :locals => {:course_home => true} %>
+    <% if @context.feature_enabled?(:draft_state) %>
+      <%
+        @body_classes << 'hide-content-while-scripts-not-loaded'
+        @body_classes << 'with_item_groups'
+        js_bundle :assignment_index
+        jammit_css :new_assignments
+      %>
+    <% else %>
+      <%= render :partial => 'assignments/assignments_list_content', :locals => {:course_home => true} %>
+    <% end %>
  <% elsif @course_home_view == 'syllabus' %>
    <%= render :partial => 'assignments/syllabus_content', :locals => {:course_home => true} %>
  <% else %>
--- a/app/views/jst/assignments/AssignmentListItem.handlebars
+++ b/app/views/jst/assignments/AssignmentListItem.handlebars
@ -35,8 +35,8 @@
      </div>
    {{/if}}

-    <div class="{{spanWidth}} ellipses" data-view="date-available"></div>
-    <div class="{{spanWidth}} ellipses" data-view="date-due"></div>
+    <div class="{{spanWidth}} assignment-date-available ellipses" data-view="date-available"></div>
+    <div class="{{spanWidth}} assignment-date-due ellipses" data-view="date-due"></div>

    <div class="{{spanWidth}} ellipses js-score {{alignTextClass}}">
      <span class="screenreader-only">
--- a/spec/controllers/courses_controller_spec.rb
+++ b/spec/controllers/courses_controller_spec.rb
@ -363,6 +363,15 @@ describe CoursesController do
        assigns(:recent_feedback).first.assignment_id.should == @a1.id
      end

+      it "should disable management and set env urls on assignment homepage" do
+        @course1.default_view = "assignments"
+        @course1.save!
+        @course1.account.enable_feature!(:draft_state)
+        get 'show', :id => @course1.id
+        controller.js_env[:URLS][:new_assignment_url].should_not be_nil
+        controller.js_env[:PERMISSIONS][:manage].should be_false
+      end
+
      it "should not show unpublished assignments to students" do
        @course1.default_view = "assignments"
        @course1.save!