Search for courses on A plus front pages

assets/sass/components/_frontpage-cards.scss

@@ -11,14 +11,14 @@
 			padding-left: 10px;
 			padding-right: 10px;
 			width: 100%;
-			> .action {
+			.action {
 				display: flex;
 				flex-direction: row;
 				justify-content: center;
 				align-items: center;
 				font-size: 18px;
-				margin-top: 20px;
-				margin-bottom: 10px;
+				margin-top: 24px;
+				margin-bottom: 8px;
 
 				a {
 					@include focus-with-background-and-color;

course/static/course/course_search.js

@@ -0,0 +1,14 @@
+function initCourseSearchClear() {
+    const clearButton = document.getElementById("clear-search");
+    const input = document.getElementById("search-input");
+    const form = document.getElementById("course-search-form");
+
+    if (clearButton && input && form) {
+      clearButton.addEventListener("click", function () {
+        input.value = "";
+        form.submit();
+      });
+    }
+  }
+
+  document.addEventListener("DOMContentLoaded", initCourseSearchClear);

course/templates/course/_search_courses_form.html

@@ -0,0 +1,36 @@
+{% load i18n %}
+{% load course %}
+
+{% load static %}
+{% block scripts %}
+
+<script src="{% static 'course/course_search.js' %}"></script>
+
+{% endblock %}
+
+<form method="get" class="form-inline" id="course-search-form">
+	<div class="d-flex gap-2">
+		<div class="form-group position-relative flex-grow-1">
+			<input type="text"
+				name="search"
+				id="search-input"
+				class="form-control"
+				placeholder="{% translate 'SEARCH_COURSES' %}"
+				value="{{ request.GET.search }}"
+				autocomplete="off"
+				style="{% if request.GET.search %}padding-right: 2em;{% endif %}"
+			/>
+			{% if request.GET.search %}
+				<a
+					id="clear-search"
+					class="btn btn-link position-absolute top-50 end-0 translate-middle-y px-2"
+					aria-label="{% translate 'CLEAR_SEARCH' %}"
+					href="#"
+				>
+					<i class="bi-x-lg" aria-hidden="true"></i>
+				</a>
+			{% endif %}
+		</div>
+		<button type="submit" class="aplus-button--default aplus-button--md">{% translate 'SEARCH' %}</button>
+	</div>
+</form>

course/templates/course/archive.html

@@ -7,8 +7,9 @@
 
 {% block content %}
   <div class="frontpage-panel">
-    <div class="page-header">
-        <h1>{% translate "COURSE_ARCHIVE" %}
+    <div class="page-header d-flex justify-content-between align-items-center flex-column flex-md-row">
+      <h1 class="align-self-start">{% translate "COURSE_ARCHIVE" %}</h1>
+      <div class="align-self-stretch mt-md-4">{% include "course/_search_courses_form.html" %}</div>
     </div>
     {% regroup instances by starting_time|date:"Y" as instances_by_year %}
 
@@ -20,7 +21,15 @@ <h2>{{ year }}</h2>
         <div class="cards">
           {% include "course/_course_cards.html" with instances=year_instances condensed=True %}
         </div>
-      </section> 
+      </section>
     {% endfor %}
+
+    {% if not instances and not siteadvert %}
+			<div class="panel-body">
+				<p class="panel-default-text">
+					{% translate "NO_COURSES_FOUND" %}
+				</p>
+			</div>
+		{% endif %}
   </div>
 {% endblock %}

course/templates/course/index.html

@@ -32,12 +32,15 @@ <h2>{% translate "MY_COURSES" %}</h2>
 {% endif %}
 
 	<section class="frontpage frontpage-section">
-		<div class="section-heading">
-			<h2>{% translate "ALL_ONGOING_COURSES" %}</h2>
-			<div class="action">
-				{% url 'archive' as url %}
-				<a href="{{ url }}">{% translate "SEE_ALL_COURSES" %}</a>
+		<div class="section-heading flex-column flex-md-row gap-2 gap-md-4">
+			<div class="d-flex flex-grow-1 justify-content-between gap-4">
+				<h2>{% translate "ALL_ONGOING_COURSES" %}</h2>
+				<div class="action">
+					{% url 'archive' as url %}
+					<a href="{{ url }}">{% translate "SEE_ALL_COURSES" %}</a>
+				</div>
 			</div>
+			<div class="mb-2 mt-md-4">{% include "course/_search_courses_form.html" %}</div>
 		</div>
 		<div class="cards">
 			{% site_advert as advert %}
@@ -62,12 +65,12 @@ <h3 class="card-title">{{ advert.title }}</h3>
 			{% endif %}
 			{% if all_instances %}
 				{% include "course/_course_cards.html" with instances=all_instances condensed=False %}
-			{% endif %}	
+			{% endif %}
 		</div>
 		{% if not all_instances and not siteadvert %}
 			<div class="panel-body">
 				<p class="panel-default-text">
-					{% translate "NO_ACTIVE_COURSES" %}
+					{% translate "NO_COURSES_FOUND" %}
 				</p>
 			</div>
 		{% endif %}

course/views.py

@@ -6,7 +6,7 @@
 from django.conf import settings
 from django.contrib import messages
 from django.core.exceptions import PermissionDenied
-from django.db.models import Prefetch
+from django.db.models import Prefetch, Q
 from django.http import Http404
 from django.http.response import HttpResponse, HttpResponseRedirect
 from django.shortcuts import get_object_or_404
@@ -74,7 +74,11 @@ def get_common_objects(self):
                 if instance not in my_instances:
                     my_instances.append(instance)
 
+        query = self.request.GET.get("search", "").strip()
         all_instances = CourseInstance.objects.get_visible(user).filter(ending_time__gte=end_threshold)
+        if query:
+            all_instances = all_instances.filter(Q(course__name__icontains=query) | Q(course__code__icontains=query))
+
         all_instances = [c for c in all_instances if c not in my_instances]
 
         self.all_instances = all_instances
@@ -97,7 +101,10 @@ class ArchiveView(UserProfileView):
 
     def get_common_objects(self):
         super().get_common_objects()
+        query = self.request.GET.get("search", "").strip()
         self.instances = CourseInstance.objects.get_visible(self.request.user)
+        if query:
+            self.instances = self.instances.filter(Q(course__name__icontains=query) | Q(course__code__icontains=query))
         self.show_language_toggle = True
         self.note("instances", "show_language_toggle")
 

locale/en/LC_MESSAGES/django.po

@@ -953,13 +953,18 @@ msgstr "Skip course navigation"
 msgid "COURSE"
 msgstr "Course"
 
+#: course/templates/course/_course_menu.html
+msgid "MINIMISE_SIDEBAR"
+msgstr "Minimise sidebar"
+
 #: course/templates/course/_course_menu.html
 msgid "CHANGE_LANGUAGE"
 msgstr "Change language"
 
-#: course/templates/course/_course_menu.html
-msgid "MINIMISE_SIDEBAR"
-msgstr "Minimise sidebar"
+#: course/templates/course/_course_menu.html news/models.py
+#: news/templates/news/list.html userprofile/templates/userprofile/profile.html
+msgid "LANGUAGE"
+msgstr "Language"
 
 #: course/templates/course/_course_menu.html
 #: course/templates/course/_siblings.html exercise/templates/exercise/toc.html
@@ -1035,6 +1040,7 @@ msgstr "Edit course"
 
 #: course/templates/course/_course_menu.html
 #: deviations/templates/deviations/list_dl.html
+#: exercise/templates/exercise/staff/user_results.html
 msgid "DEADLINE_DEVIATIONS"
 msgstr "Deadline deviations"
 
@@ -1129,6 +1135,19 @@ msgstr "Submit alone"
 msgid "SUBMIT_WITH -- %(collaborators)s"
 msgstr "Submit with %(collaborators)s "
 
+#: course/templates/course/_search_courses_form.html
+msgid "SEARCH_COURSES"
+msgstr "Search courses"
+
+#: course/templates/course/_search_courses_form.html
+msgid "CLEAR_SEARCH"
+msgstr "Clear selection"
+
+#: course/templates/course/_search_courses_form.html
+#: templates/ajax_search_select.html
+msgid "SEARCH"
+msgstr "Search"
+
 #: course/templates/course/_siblings.html
 msgid "PAGINATION"
 msgstr "Pagination"
@@ -1145,6 +1164,10 @@ msgstr "Early access"
 msgid "COURSE_ARCHIVE"
 msgstr "Course archive"
 
+#: course/templates/course/archive.html course/templates/course/index.html
+msgid "NO_COURSES_FOUND"
+msgstr "No courses found."
+
 #: course/templates/course/course.html
 msgid "LEFT_OFF_REMINDER"
 msgstr "Continue where you left off"
@@ -1267,10 +1290,6 @@ msgstr "All ongoing courses"
 msgid "SEE_ALL_COURSES"
 msgstr "See all courses"
 
-#: course/templates/course/index.html
-msgid "NO_ACTIVE_COURSES"
-msgstr "There are currently no ongoing courses."
-
 #: course/templates/course/module.html
 #: exercise/templates/exercise/_user_results.html
 #: lti_tool/templates/lti_tool/lti_module.html
@@ -5656,11 +5675,6 @@ msgstr "Send email to course staff"
 msgid "LABEL_PUBLISH"
 msgstr "publish"
 
-#: news/models.py news/templates/news/list.html
-#: userprofile/templates/userprofile/profile.html
-msgid "LANGUAGE"
-msgstr "Language"
-
 #: news/models.py
 msgid "LABEL_PIN"
 msgstr "pin"
@@ -5819,10 +5833,6 @@ msgstr ""
 msgid "INTERNAL_SERVER_ERROR_500"
 msgstr "Internal server error"
 
-#: templates/ajax_search_select.html
-msgid "SEARCH"
-msgstr "Search"
-
 #: templates/ajax_search_select.html
 msgid "IMPORT_LIST"
 msgstr "Import list"

locale/fi/LC_MESSAGES/django.po

@@ -959,13 +959,18 @@ msgstr "Ohita kurssivalikko"
 msgid "COURSE"
 msgstr "Kurssi"
 
+#: course/templates/course/_course_menu.html
+msgid "MINIMISE_SIDEBAR"
+msgstr "Pienennä sivupalkki"
+
 #: course/templates/course/_course_menu.html
 msgid "CHANGE_LANGUAGE"
 msgstr "Vaihda kieli"
 
-#: course/templates/course/_course_menu.html
-msgid "MINIMISE_SIDEBAR"
-msgstr "Pienennä sivupalkki"
+#: course/templates/course/_course_menu.html news/models.py
+#: news/templates/news/list.html userprofile/templates/userprofile/profile.html
+msgid "LANGUAGE"
+msgstr "Kieli"
 
 #: course/templates/course/_course_menu.html
 #: course/templates/course/_siblings.html exercise/templates/exercise/toc.html
@@ -1041,6 +1046,7 @@ msgstr "Muokkaa kurssia"
 
 #: course/templates/course/_course_menu.html
 #: deviations/templates/deviations/list_dl.html
+#: exercise/templates/exercise/staff/user_results.html
 msgid "DEADLINE_DEVIATIONS"
 msgstr "Määräaikojen poikkeamat"
 
@@ -1136,6 +1142,21 @@ msgstr "Palauta yksin"
 msgid "SUBMIT_WITH -- %(collaborators)s"
 msgstr "Palauta ryhmässä: %(collaborators)s "
 
+#: course/templates/course/_search_courses_form.html
+msgid "SEARCH_COURSES"
+msgstr "Hae kursseja"
+
+#: course/templates/course/_search_courses_form.html
+#, fuzzy
+#| msgid "CLEAR_SELECTION"
+msgid "CLEAR_SEARCH"
+msgstr "Tyhjennä valinta"
+
+#: course/templates/course/_search_courses_form.html
+#: templates/ajax_search_select.html
+msgid "SEARCH"
+msgstr "Hae"
+
 #: course/templates/course/_siblings.html
 msgid "PAGINATION"
 msgstr "Sivuilla siirtyminen"
@@ -1152,6 +1173,10 @@ msgstr "Aikainen pääsy"
 msgid "COURSE_ARCHIVE"
 msgstr "Kurssiarkisto"
 
+#: course/templates/course/archive.html course/templates/course/index.html
+msgid "NO_COURSES_FOUND"
+msgstr "Kursseja ei löytynyt."
+
 #: course/templates/course/course.html
 msgid "LEFT_OFF_REMINDER"
 msgstr ""
@@ -1275,10 +1300,6 @@ msgstr "Meneillään olevat kurssit"
 msgid "SEE_ALL_COURSES"
 msgstr "Näytä kaikki kurssit"
 
-#: course/templates/course/index.html
-msgid "NO_ACTIVE_COURSES"
-msgstr "Tällä hetkellä ei ole meneillään olevia kursseja."
-
 #: course/templates/course/module.html
 #: exercise/templates/exercise/_user_results.html
 #: lti_tool/templates/lti_tool/lti_module.html
@@ -5675,11 +5696,6 @@ msgstr "Lähetä sähköpostia kurssihenkilökunnalle"
 msgid "LABEL_PUBLISH"
 msgstr "julkaise"
 
-#: news/models.py news/templates/news/list.html
-#: userprofile/templates/userprofile/profile.html
-msgid "LANGUAGE"
-msgstr "Kieli"
-
 #: news/models.py
 msgid "LABEL_PIN"
 msgstr "kiinnitä listan kärkeen"
@@ -5838,10 +5854,6 @@ msgstr ""
 msgid "INTERNAL_SERVER_ERROR_500"
 msgstr "Palvelimen sisäinen virhe"
 
-#: templates/ajax_search_select.html
-msgid "SEARCH"
-msgstr "Hae"
-
 #: templates/ajax_search_select.html
 msgid "IMPORT_LIST"
 msgstr "Tuo lista"