palette/views/sections/show.mustache

<%
# Copyright (C) 2011 - present Instructure, Inc.
#
# This file is part of Canvas.
#
# Canvas is free software: you can redistribute it and/or modify it under
# the terms of the GNU Affero General Public License as published by the Free
# Software Foundation, version 3 of the License.
#
# Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
# WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
# A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
# details.
#
# You should have received a copy of the GNU Affero General Public License along
# with this program. If not, see <http://www.gnu.org/licenses/>.
%>

<% content_for :page_title do %><%= @section.name %><% end %>

<% content_for :right_side do %>
  <% if can_do(@section, @current_user, :update) %>
    <a href="#" class="btn button-sidebar-wide edit_section_link"><i class="icon-edit"></i> {{#t}}Edit Section{{/t}}</a>
    <% if @section.nonxlist_course_id %>
      <% if can_do(@section.nonxlist_course, @current_user, :manage_sections) %>
        <a href="#" class="btn button-sidebar-wide uncrosslist_link"><i class="icon-off"></i> {{#t}}De-Cross-List this Section{{/t}}</a>
      <% end %>
      <a href="#" class="btn button-sidebar-wide crosslist_link"><i class="icon-off"></i> {{#t}}Re-Cross-List this Section{{/t}}</a>
    <% else %>
      <a href="#" class="btn button-sidebar-wide crosslist_link"><i class="icon-off"></i> {{#t}}Cross-List this Section{{/t}}</a>
    <% end %>
  <% end %>
  <a href="<%= context_url(@context, :context_settings_url) %>" class="btn button-sidebar-wide"><i class="icon-settings"></i> {{#t}}Back to Course Settings{{/t}}</a>
<% end %>

<% content_for :stylesheets do %>
<style>
#course_form .course_form {
  display: none;
}
#course_form.editing .course_form {
  display: inline;
}
#course_form.editing .course_info {
  display: none;
}
#course_form .date_entry {
  width: 100px;
}
.user-list-wrapper {
  margin-bottom: 32px;
  min-height: 32px;
  position: relative;
}
ul.user_list {
  list-style: none;
  padding-left: 0px;
  margin-top: 0px;
  max-width: 400px;
}
ul.user_list li.user {
  padding-left: 10px;
  color: #444;
  line-height: 1.5em;
  -moz-border-radius: 5px;
}
ul.user_list li.user:hover {
  background-color: #eee;
}
ul.user_list li.user .email {
  font-size: 0.8em;
  margin: -5px 10px 5px;
}
ul.user_list li.user .section {
  font-size: 0.8em;
  margin: -5px 10px 5px;
}
ul.user_list li.user .short_name {
  font-size: 0.8em;
  margin: -2px 10px 0px;
}
ul.user_list li.user .enrollment_type {
  font-size: 0.8em;
  margin: -2px 10px 0px;
}
ul.user_list li.user .links {
  float: right;
  padding-right: 20px;
  padding-top: 5px;
  visibility: hidden;
}
ul.user_list li.user .links a {
  text-decoration: none;
}
ul.user_list li.user:hover .links {
  float: right;
  padding-right: 20px;
  visibility: visible;
}
ul.user_list li.user.pending {
  color: #888;
  font-style: italic;
}
h3 .tally {
  font-family: arial,sans-serif;
  font-size: 12px;
  padding-left: 5px;
}
.associated_user {
  display: none;
}
#edit_section_form {
  margin-bottom: 20px;
}

#edit_section_form .form-actions {
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
}
</style>
<% end %>
<%= form_for @section, :url => context_url(@context, :context_section_url, @section), :html => {:id => "edit_section_form", :style => "display: none;"} do |f| %>
<table class="formtable">
  <tr>
    <td><%= f.blabel :name, :en => "Section Name" %></td>
    <td><%= f.text_field :name %></td>
  </tr>
  <% if @section.sis_source_id && can_do(@context, @current_user, :read_sis) || can_do(@context, @current_user, :manage_sis) %>
    <tr>
      <td><%= f.blabel :sis_source_id, :en => "SIS ID" %></td>
      <td>
        <span class="course_form">
          <% if can_do(@context, @current_user, :manage_sis) %>
            <%= f.text_field :sis_source_id, :style => "width: 50px;", :title => "SIS ID", :value => @section.sis_source_id %>
          <% else %>
            <%= @section.sis_source_id %>
          <% end %>
        </span>
      </td>
    </tr>
  <% end %>
  <tr>
    <td>
      <%= f.blabel :start_at, en: "Starts" %>
      <label class="screenreader-only" id="section_starts_at_label">
        {{#t}}Section starts at{{/t}}
        <%= datepicker_screenreader_prompt %>
      </label>
    </td>
    <td>
      <%= f.text_field :start_at,
                       class: "datetime_field",
                       value: datetime_string(@section.start_at),
                       style: 'width: 120px;',
                       "aria-labelledby" => "section_starts_at_label",
                       "data-tooltip" => "",
                       title: accessible_date_format %>
    </td>
  </tr>
  <tr>
    <td>
      <%= f.blabel :end_at, en: "Ends" %>
      <label class="screenreader-only" id="section_ends_at_label">
        {{#t}}Section ends at{{/t}}
        <%= datepicker_screenreader_prompt %>
      </label>
    </td>
    <td>
      <%= f.text_field :end_at,
                       class: "datetime_field",
                       value: datetime_string(@section.end_at),
                       style: 'width: 120px;',
                       "aria-labelledby" => "section_ends_at_label",
                       "data-tooltip" => "",
                       title: accessible_date_format %>
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <%= f.check_box :restrict_enrollments_to_section_dates %>
      <%= f.label :restrict_enrollments_to_section_dates, t('access_limit', "Users can only participate in the course between these dates") %>
      <div style="font-size: 0.8em; padding-left: 25px;">
        {{#t}}This will override any term or course date settings.{{/t}}
      </div>
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <div class="form-actions">
        <button type="button" class="btn cancel_button button-secondary">{{#t}}Cancel{{/t}}</button>
        <button type="submit" class="btn btn-primary submit_button">{{#t}}Update Section{{/t}}</button>
      </div>
    </td>
  </tr>
</table>
<% end %>
<h2 id="section_name"><%= @section.name %></h2>
<div style="margin-bottom: 20px;">
  <div id="enrollments_div">
    <table id="enrollment_table">
    <% if @pending_enrollments_count > 0 %>
          <tr>
            <td class="pending_enrollments"><%= t('pending_enrollment', {:one => '1 Pending Enrollment', :other => '%{count} Pending Enrollments'}, :count => @pending_enrollments_count) %></td>
          </tr>
    <% end %>
    <% if @enrollments_count > 0 %>
      <tr>
        <td class="active_enrollments"><%= t('active_enrollment', {:one => '1 Active Enrollment', :other => '%{count} Active Enrollments'}, :count => @enrollments_count) %></td>
      </tr>
    <% end %>
    <% if @completed_enrollments_count > 0 %>
          <tr>
            <td class="completed_enrollments"><%= t('completed_enrollment', {:one => '1 Completed Enrollment', :other => '%{count} Completed Enrollments'}, :count => @completed_enrollments_count) %></td>
          </tr>
    <% end %>
    </table>
  </div>
  <% if @section && ( @section.sis_source_id && can_do(@context, @current_user, :read_sis) || can_do(@context, @current_user, :manage_sis))%>
    <div><%= before_label('sis_id', "SIS ID") %> <span class="sis_source_id"><%= @section.sis_source_id %></span></div>
  <% end %>
  <% if @section.start_at || @section.end_at %>
    <div>
      <% if @section.start_at && @section.end_at %>
        <%= t('run_dates', 'Runs from %{start_date} to %{end_date}', :start_date => friendly_datetime(@section.start_at, context: @context).html_safe, :end_date => friendly_datetime(@section.end_at, context: @context).html_safe) %>
      <% elsif @section.end_at %>
        <%= t('runs_until', 'Runs until %{end_date}', :end_date => friendly_datetime(@section.end_at, context: @context).html_safe) %>
      <% elsif @section.start_at %>
        <%= t('run_from', 'Runs from %{start_date} with no end date', :start_date => friendly_datetime(@section.start_at, context: @context).html_safe) %>
      <% end %>
    </div>
    <div style="margin-left: 10px; font-size: 0.8em;">
      <%= t('Students can only participate in the course between these dates') if @section.restrict_enrollments_to_section_dates %>
    </div>
  <% end %>
</div>
<% if can_do @context, @current_user, :read_roster, :manage_students, :manage_admin_users %>
  <div class="enrollments-lists">
    <h3>{{#t}}Current Enrollments{{/t}}</h3>
    <div class="user-list-wrapper" id="current-enrollment-list">
      <ul class="user_list"></ul>
    </div>
    <h3>{{#t}}Completed Enrollments{{/t}}</h3>
    <div class="user-list-wrapper" id="completed-enrollment-list">
      <ul class="user_list"></ul>
    </div>
  </div>
<% end %>
<% js_bundle :section %>

<div style="display: none;">
  <%= form_tag context_url(@context, :context_section_crosslist_url, @section.id), :id => "crosslist_course_form", :class => "form-dialog no-margin-bottom", :title => t('titles.crosslist_this_section', 'Cross-List this Section'), :method => :post do %>
    <h2>{{#t}}Cross-List Section{{/t}}</h2>
    <p>
      <%= t('crosslist_description', %{
      Cross-listing allows you to create a section in one account and
      then move it to a course on a different account.
      To cross-list this course, you'll need to find the course you
      want to move it to, either using the search tool or by
      entering the course's ID. }) %>
    </p>
    <table class="formtable">
      <tr>
        <td><label for="course_autocomplete_id_lookup"><%= before_label('search_for_course', "Search for Course") %> </label></td>
        <td>
          <a href="<%= context_url(@current_user, :context_manageable_courses_url, :format => :json) %>" id="course_autocomplete_url" style="display: none;">&nbsp;</a>
          <a href="<%= context_url(@context, :context_section_confirm_crosslist_url, @section.id, "{{ id }}") %>" id="course_confirm_crosslist_url" style="display: none;">&nbsp;</a>
          <input type="hidden" name="new_course_id" id="course_autocomplete_id"/>
          <input type="text" id="course_autocomplete_id_lookup" style="width: 250px;"/>
        </td>
      </tr><tr>
        <td><label for="course_id"><%= before_label('enter_course_id', "Or Enter the Course's ID") %></label></td>
        <td>
          <input type="text" id="course_id" style="width: 75px;"/>
        </td>
      </tr><tr>
        <td colspan="2">
          <div id="course_autocomplete_name_holder" style="margin-top: 20px;">
            <%= before_label('labels.selected_course', 'Selected Course') %>
            <div style="margin-left: 20px;">
              <div id="course_autocomplete_name" style="font-weight: bold;"></div>
              <div id="sis_id_holder" style="display: none;"><%= before_label('labels.sis_id', 'SIS ID') %> <span class="sis_id">&nbsp;</span></div>
              <div id="account_name_holder" style="display: none;"><%= before_label('labels.account', 'Account') %> <span class="account_name"></span></div>
            </div>
          </div>
        </td>
      </tr>
    </table>
    <div class="form-controls">
      <button type="submit" class="btn btn-primary submit_button">{{#t}}Cross-List This Section{{/t}}</button>
      <button type="button" class="btn button-secondary cancel_button">{{#t}}Cancel{{/t}}</button>
    </div>
  <% end %>

  <%= form_tag context_url(@context, :context_section_uncrosslist_url, @section.id), :id => "uncrosslist_form", :title => t('titles.decrosslist_section', 'De-Cross-List this Section'), :method => :delete do %>
    <h2>{{#t}}De-Cross-List this Section{{/t}}</h2>
    <p>
      {{#t}}Are you sure you want to de-cross-list this section?{{/t}}
      <% if @section.nonxlist_course %>
        <%= mt('decrosslist_description', 'This will move the section back to its original course, **%{course_name}**.', :course_name => @section.nonxlist_course.name) %>
      <% end %>
    </p>
    <% if @student_enrollments_count > 0 %>
      <p>
        <%= t('decrosslist_long_description', %{
        All grades for students in this course will no longer be visible.
        You can retrieve the grades later by re-cross-listing the course,
        but in the mean time the grades for these students will come from the original course.
        }) %>
      </p>
    <% end %>
    <div class="button-container">
      <button type="submit" class="btn submit_button">{{#t}}De-Cross-List This Section{{/t}}</button>
      <button type="button" class="btn btn button-secondary cancel_button">{{#t}}Cancel{{/t}}</button>
    </div>
  <% end %>
</div>