Merge pull request openwebwork#2390 from drgrice1/problem-sets-restru…

…cture

Restructure the problem sets page (the course home page).

htdocs/js/ProblemSets/problemsets.js

@@ -0,0 +1,120 @@
+(() => {
+	const setListContainer = document.getElementById('set-list-container');
+
+	if (!setListContainer) return;
+
+	const addSection = (type, title, contents) => {
+		if (!contents.length) return;
+
+		const isCollapsed = localStorage.getItem(`${settingStoreID}.collapsed.${type}`) === 'true';
+
+		const accordion = document.createElement('div');
+		accordion.classList.add('accordion', 'mb-3');
+
+		const item = document.createElement('div');
+		item.classList.add('accordion-item');
+
+		const header = document.createElement('h2');
+		header.classList.add('accordion-header');
+
+		const button = document.createElement('button');
+		button.classList.add('accordion-button', 'fs-5', 'fw-bold');
+		if (isCollapsed) button.classList.add('collapsed');
+		button.type = 'button';
+		button.dataset.bsToggle = 'collapse';
+		button.dataset.bsTarget = `#${type}-collapse`;
+		button.setAttribute('aria-expanded', isCollapsed ? 'false' : 'true');
+		button.setAttribute('aria-controls', `${type}-collapse`);
+		button.textContent = title;
+		header.append(button);
+
+		const collapse = document.createElement('div');
+		collapse.classList.add('accordion-collapse', 'collapse');
+		if (!isCollapsed) collapse.classList.add('show');
+		collapse.id = `${type}-collapse`;
+
+		const body = document.createElement('div');
+		body.classList.add('accordion-body', 'p-0');
+		collapse.append(body);
+
+		const list = document.createElement('ol');
+		list.classList.add('list-group', 'list-group-flush', 'rounded-bottom');
+		list.append(...contents);
+		body.append(list);
+
+		item.append(header, collapse);
+		accordion.append(item);
+
+		setListContainer.append(accordion);
+
+		collapse.addEventListener('shown.bs.collapse', () =>
+			localStorage.setItem(`${settingStoreID}.collapsed.${type}`, 'false')
+		);
+		collapse.addEventListener('hidden.bs.collapse', () =>
+			localStorage.setItem(`${settingStoreID}.collapsed.${type}`, 'true')
+		);
+	};
+
+	const setList = Array.from(setListContainer.querySelectorAll('.list-group-item'));
+	const showByDateBtn = document.getElementById('show-by-date-btn');
+	const showByTypeBtn = document.getElementById('show-by-type-btn');
+	const settingStoreID = `WW.${document.getElementsByName('courseID')[0]?.value ?? 'unknownCourse'}.${
+		document.getElementsByName('userName')[0]?.value ?? 'unknownUser'
+	}.problem_list`;
+
+	const displayByDate = () => {
+		while (setListContainer.firstChild) setListContainer.firstChild.remove();
+
+		for (const [type, fallbackTitle] of [
+			['open', 'Open Assignments'],
+			['reduced', 'Reduced Scoring Assignments'],
+			['not-open', 'Future Assignments'],
+			['past-due', 'Past Due Assignments']
+		]) {
+			const reverseSort = type === 'past-due';
+			const section = addSection(
+				type,
+				showByDateBtn?.dataset[`${type}Title`] ?? fallbackTitle,
+				setList
+					.filter((set) => set.dataset.setStatus === type)
+					.sort(
+						(a, b) =>
+							(reverseSort ? -1 : 1) *
+							(parseInt(a.dataset.urgencySortOrder) - parseInt(b.dataset.urgencySortOrder))
+					)
+			);
+		}
+
+		localStorage.setItem(`${settingStoreID}.sort_method`, 'date');
+		showByDateBtn.classList.add('active');
+		showByTypeBtn.classList.remove('active');
+	};
+
+	const displayByType = () => {
+		while (setListContainer.firstChild) setListContainer.firstChild.remove();
+
+		for (const [type, fallbackTitle] of [
+			['default', 'Regular Assignments'],
+			['test', 'Tests/Quizzes']
+		]) {
+			addSection(
+				type,
+				showByTypeBtn?.dataset[`${type}Title`] ?? fallbackTitle,
+				setList
+					.filter((set) => set.dataset.setType === type)
+					.sort((a, b) => parseInt(a.dataset.nameSortOrder) - parseInt(b.dataset.nameSortOrder))
+			);
+		}
+
+		localStorage.setItem(`${settingStoreID}.sort_method`, 'type');
+		showByTypeBtn.classList.add('active');
+		showByDateBtn.classList.remove('active');
+	};
+
+	showByDateBtn?.addEventListener('click', displayByDate);
+	showByTypeBtn?.addEventListener('click', displayByType);
+
+	const sortMethod = localStorage.getItem(`${settingStoreID}.sort_method`);
+	if (sortMethod === 'type') displayByType();
+	else displayByDate();
+})();

htdocs/js/System/system.js

@@ -120,11 +120,11 @@
 	// Accessibility
 	// Present the contents of the data-alt attribute as alternative content for screen reader users.
 	// The icon should be formatted as <i class="icon fas fa-close" data-alt="close"></i>
-	// FIXME:  Don't add these by javascript.  Make a content generator method that adds these instead.
+	// FIXME:  Don't add these by javascript.  Just add these in place instead.
 	document.querySelectorAll('i.icon').forEach((icon) => {
 		if (typeof icon.dataset.alt !== 'undefined') {
 			const glyph = document.createElement('span');
-			glyph.classList.add('sr-only-glyphicon');
+			glyph.classList.add('visually-hidden');
 			glyph.style.fontSize = icon.style.fontSize;
 			glyph.textContent = icon.dataset.alt;
 			icon.after(glyph);

htdocs/js/System/system.scss

@@ -36,19 +36,6 @@ table caption {
 	color: #dc3545;
 }
 
-/* Screen Reader */
-.sr-only-glyphicon {
-	position: absolute;
-	width: 1em;
-	height: 1em;
-	padding: 0;
-	margin: 0;
-	margin-left: -1em;
-	overflow: hidden;
-	clip: rect(0, 0, 0, 0);
-	border: 0 none;
-}
-
 .visually-hidden-focusable:active,
 .visually-hidden-focusable:focus {
 	z-index: 21;
@@ -534,7 +521,7 @@ ul.courses-list {
 	}
 }
 
-/* Assignments page */
+/* Problem list and version list pages */
 .problem_set_table {
 	td a {
 		font-weight: bold;

htdocs/themes/math4-yellow/_theme-overrides.scss

@@ -29,6 +29,11 @@
 	);
 }
 
+.btn-outline-primary {
+	--#{$prefix}btn-color: #{shade_color($primary, 60%)};
+	--#{$prefix}btn-border-color: #{shade_color($primary, 20%)};
+}
+
 .text-primary {
 	color: $link-color !important;
 }