Skip to content

Commit

Permalink
LMSA-9483 - more changes, mainly separating into two lists and adding…
Browse files Browse the repository at this point in the history
… buttons instead of a select all checkbox
  • Loading branch information
gjthomas committed Nov 13, 2024
1 parent eaaa3a3 commit 8ab01dc
Show file tree
Hide file tree
Showing 3 changed files with 98 additions and 48 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@
import uk.ac.ox.ctl.lti13.security.oauth2.client.lti.authentication.OidcAuthenticationToken;

import javax.servlet.http.HttpSession;
import java.util.ArrayList;
import java.util.List;
import java.util.Locale;

Expand Down Expand Up @@ -102,7 +103,25 @@ public String lookupSearchBySisId(@ModelAttribute FindParentModel findParentMode
String sisIdSearch = findParentModel.getSisIdSearch().trim();
findParentResult = crosslistService.processSisLookup(sisIdSearch);

List<Section> unavailableToDecrosslistSectionsList = new ArrayList<>();
List<Section> availableToDecrosslistSectionsList = new ArrayList<>();

if (findParentResult != null) {
List<Section> fullSectionList = findParentResult.getSectionList();

if (fullSectionList != null) {
for (Section section : fullSectionList) {
if (section.getSis_section_id() == null || section.getNonxlist_course_id() == null) {
unavailableToDecrosslistSectionsList.add(section);
} else {
availableToDecrosslistSectionsList.add(section);
}
}
}

model.addAttribute("unavailableToDecrosslistSectionsList", unavailableToDecrosslistSectionsList);
model.addAttribute("availableToDecrosslistSectionsList", availableToDecrosslistSectionsList);

model.addAttribute("findParentResult", findParentResult);
// add canvasCourseId to be used in audit log purposes later
model.addAttribute("canvasCourseId", findParentResult.getCanvasCourseId());
Expand Down
33 changes: 28 additions & 5 deletions src/main/resources/static/js/decrosslisting.js
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,14 @@ jQuery(document).ready(function() {
resultsMessage.focus();
}

$("#checkbox-select-all").click(function() {
$('input:checkbox').not(this).prop('checked', this.checked);
$("#select-all-button").click(function() {
$('input:checkbox').prop('checked', true);
updateCounter();
});

$("#deselect-all-button").click(function() {
$('input:checkbox').prop('checked', false);
updateCounter();
});

checkboxCounter();
Expand All @@ -53,14 +59,31 @@ function checkboxCounter() {

// update the count
$checkboxes.change(function() {
var countCheckedCheckboxes = $checkboxes.not("#checkbox-select-all").filter(':checked').length;
var countCheckedCheckboxes = $checkboxes.filter(':checked').length;
$('#sections-selected').text(countCheckedCheckboxes + ' selected');
});
}

function updateCounter() {
var $checkboxes = $('#decrosslist-form input[type="checkbox"]');
var countCheckedCheckboxes = $checkboxes.filter(':checked').length;
$('#sections-selected').text(countCheckedCheckboxes + ' selected');
}

function submitSisIdForm(button) {
buttonLoading(button);
document.getElementById('sisIdForm').submit();
var inputFieldToSearch = 'sisid-search';

if (document.getElementById(inputFieldToSearch).value.trim() === '') {
var validationMessage = document.getElementById('sisid-validation-message');

validationMessage.classList.remove('rvt-display-none');
validationMessage.setAttribute('aria-invalid', true);
validationMessage.setAttribute('aria-describedby', inputFieldToSearch);
return false;
} else {
buttonLoading(button);
document.getElementById('sisIdForm').submit();
}
}

function validateCheckboxForm(button) {
Expand Down
94 changes: 51 additions & 43 deletions src/main/resources/templates/findParentCourse.html
Original file line number Diff line number Diff line change
Expand Up @@ -77,14 +77,24 @@ <h1 id="tool-title" class="rvt-p-top-sm rvt-ts-36">De-cross-listing sections</h1

<div id="sisid-search-description" class="rvt-m-top-xxs rvt-ts-14">Example: SP22-BL-FOLK-E295-4441</div>

<div th:if="${errorMsg}" id="sisid-validation-message" class="rvt-inline-alert rvt-inline-alert--standalone rvt-inline-alert--danger">
<div id="sisid-validation-message" class="rvt-inline-alert rvt-inline-alert--standalone rvt-inline-alert--danger rvt-display-none">
<span class="rvt-inline-alert__icon">
<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16">
<path d="m8 6.586-2-2L4.586 6l2 2-2 2L6 11.414l2-2 2 2L11.414 10l-2-2 2-2L10 4.586l-2 2Z"></path>
<path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0ZM2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8Z"></path>
</svg>
</span>
<span id="sisid-validation-text" class="rvt-inline-alert__message" th:text="${errorMsg}"></span>
<span id="sisid-validation-text" class="rvt-inline-alert__message">SIS Section ID is required.</span>
</div>

<div th:if="${errorMsg}" id="sisid-error-message" class="rvt-inline-alert rvt-inline-alert--standalone rvt-inline-alert--danger">
<span class="rvt-inline-alert__icon">
<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16">
<path d="m8 6.586-2-2L4.586 6l2 2-2 2L6 11.414l2-2 2 2L11.414 10l-2-2 2-2L10 4.586l-2 2Z"></path>
<path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0ZM2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8Z"></path>
</svg>
</span>
<span id="sisid-error-text" class="rvt-inline-alert__message" th:text="${errorMsg}"></span>
</div>
</div>
</form>
Expand All @@ -106,51 +116,49 @@ <h2 id="results-message" tabindex="-1" th:text="|Parent course found: ${findPare
</div>
<div class="rvt-m-top-sm">
<span>
Sections listed without a checkbox are not available to de-cross-list because they either do not
have a SIS ID or it is the course's original section.
Select sections to remove, then activate De-cross-list selected sections to de-cross-list
them from the course. Unavailable sections are due to either not having a SIS ID or it is
the course's original section.
</span>
</div>
</div>
<div class="rvt-width-xl">
<table class="rvt-table-stripes rvt-table-cells rvt-m-top-sm">
<caption class="rvt-sr-only">Table of sections in the course. Select sections to remove, then activate De-cross-list selected sections to de-cross-list them from the course.</caption>
<thead>
<tr>
<td class="checkboxColumn">
<div class="rvt-checkbox rvt-checkbox--sr-only-label">
<input type="checkbox" name="checkbox-sis-section-select-all" id="checkbox-select-all" />
<label for="checkbox-select-all">Select all sections</label>
</div>
</td>
<th scope="col">Section Name</th>
</tr>
</thead>
<tr th:if="${!findParentResult.sectionList.isEmpty()}" th:each="section : ${findParentResult.sectionList}">
<th scope="row">
<div th:if="${section.sis_section_id != null && section.nonxlist_course_id != null}" class="rvt-checkbox rvt-checkbox--sr-only-label">
<input type="checkbox" name="section-checkboxes" th:id="|checkbox-${section.id}|" th:value="${section.id}" />
<label th:for="|checkbox-${section.id}|" th:text="|De-crosslist ${section.name}|">Checkbox for 1234</label>
</div>
<div th:if="${section.sis_section_id == null || section.nonxlist_course_id == null}">
<span class="rvt-sr-only">De-crosslisting unavailable</span>
</div>
</th>
<td>
<span th:text="${section.name}"></span>
</td>
</tr>
</table>

<div id="checkbox-validation-message" class="rvt-m-top-md rvt-inline-alert rvt-inline-alert--standalone rvt-inline-alert--danger rvt-display-none">
<span class="rvt-inline-alert__icon">
<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16">
<path d="m8 6.586-2-2L4.586 6l2 2-2 2L6 11.414l2-2 2 2L11.414 10l-2-2 2-2L10 4.586l-2 2Z"></path>
<path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0ZM2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8Z"></path>
</svg>
</span>
<span class="rvt-inline-alert__message">Select at least one section to de-cross-list.</span>
<div class="rvt-m-top-sm">
<span>Unavailable sections</span>
<div class="rvt-m-tb-sm">
<p th:if="${unavailableToDecrosslistSectionsList.isEmpty()}">None listed</p>
<ul th:if="${!unavailableToDecrosslistSectionsList.isEmpty()}" class="rvt-list-plain">
<li th:id="'row_' + ${section.Id}" th:each="section : ${unavailableToDecrosslistSectionsList}">
<span th:text="${section.name}">Section Name</span>
</li>
</ul>
</div>

</div>
<div class="rvt-m-top-sm">
<p th:if="${availableToDecrosslistSectionsList.isEmpty()}">None listed</p>
<fieldset class="rvt-fieldset">
<legend class="rvt-m-tb-sm">Available sections</legend>
<button type="button" id="select-all-button" class="rvt-button rvt-button--small rvt-button--secondary rvt-m-bottom-sm">Select all</button>
<button type="button" id="deselect-all-button" class="rvt-button rvt-button--small rvt-button--secondary rvt-m-bottom-sm">Deselect all</button>
<ul th:if="${!availableToDecrosslistSectionsList.isEmpty()}" class="rvt-list-plain">
<li th:id="'row_' + ${section.id}" th:each="section : ${availableToDecrosslistSectionsList}">
<div class="rvt-checkbox">
<input type="checkbox" th:id="|checkbox-${section.id}|" name="section-checkboxes" th:value="${section.id}" />
<label th:for="|checkbox-${section.id}|" class="rvt-m-right-sm">
<span th:text="${section.name}">Section Name</span>
</label>
</div>
</li>
</ul>
</fieldset>
</div>
<div id="checkbox-validation-message" class="rvt-m-top-md rvt-inline-alert rvt-inline-alert--standalone rvt-inline-alert--danger rvt-display-none">
<span class="rvt-inline-alert__icon">
<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16">
<path d="m8 6.586-2-2L4.586 6l2 2-2 2L6 11.414l2-2 2 2L11.414 10l-2-2 2-2L10 4.586l-2 2Z"></path>
<path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0ZM2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8Z"></path>
</svg>
</span>
<span class="rvt-inline-alert__message">Select at least one section to de-cross-list.</span>
</div>
<div class="rvt-m-top-md">
<input type="hidden" id="hidden-sisid-search" name="hidden-sisid-search" th:field="*{sisIdSearch}" />
Expand Down

0 comments on commit 8ab01dc

Please sign in to comment.