From 5c4691d4128d9ddf9b4ad8b41a49e62b531a5dca Mon Sep 17 00:00:00 2001
From: qtw97 <qiutianw@gmail.com>
Date: Mon, 8 Jan 2024 16:14:17 -0500
Subject: [PATCH] feat: search bar

---
 lms/envs/common.py        |   6 +
 lms/templates/course.html | 422 ++++++++++++++++++++++++++++++++++----
 2 files changed, 383 insertions(+), 45 deletions(-)

diff --git a/lms/envs/common.py b/lms/envs/common.py
index c5cbe633f387..d68430340a8f 100644
--- a/lms/envs/common.py
+++ b/lms/envs/common.py
@@ -678,6 +678,12 @@
 
     # Teams feature
     'ENABLE_TEAMS': True,
+    
+    # Filter feature of the filter bar
+    'ENABLE_FILTER': False,
+
+    # Sort by feature of the filter bar
+    'ENABLE_SORTBY': False,
 
     # Show video bumper in LMS
     'ENABLE_VIDEO_BUMPER': False,
diff --git a/lms/templates/course.html b/lms/templates/course.html
index db765a62abc2..fd1656bc44f1 100644
--- a/lms/templates/course.html
+++ b/lms/templates/course.html
@@ -1,50 +1,382 @@
-<%def name="online_help_token()"><% return "course" %></%def>
-<%namespace name='static' file='static_content.html'/>
+<%page expression_filter="h"/>
 <%!
-from django.utils.translation import gettext as _
-from django.urls import reverse
-from six import text_type
+  import json
+  from django.utils.translation import ugettext as _
+  from openedx.core.djangolib.js_utils import js_escaped_string, dump_js_escaped_json
 %>
-<%page args="course" expression_filter="h"/>
-<article class="course" id="${course.id}" role="region" aria-label="${course.display_name_with_default}">
-  <a href="${reverse('about_course', args=[text_type(course.id)])}">
-    <header class="course-image">
-      <div class="cover-image">
-        <img src="${course.course_image_url}" alt="${course.display_name_with_default} ${course.display_number_with_default}" />
-        <div class="learn-more" aria-hidden="true">${_("LEARN MORE")}</div>
+<%inherit file="../main.html" />
+<%
+  course_discovery_enabled = settings.FEATURES.get('ENABLE_COURSE_DISCOVERY')
+  filter_enabled = settings.FEATURES.get('ENABLE_FILTER')
+  sortby_enabled = settings.FEATURES.get('ENABLE_SORTBY')
+%>
+
+<%namespace name='static' file='../static_content.html'/>
+
+% if course_discovery_enabled:
+<%block name="header_extras">
+  % for template_name in ["course_card", "filter_bar", "filter", "facet", "facet_option"]:
+  <script type="text/template" id="${template_name}-tpl">
+      <%static:include path="discovery/${template_name}.underscore" />
+  </script>
+  % endfor
+  <%static:require_module module_name="js/discovery/discovery_factory" class_name="DiscoveryFactory">
+    DiscoveryFactory(
+      ${course_discovery_meanings | n, dump_js_escaped_json},
+      getParameterByName('search_query'),
+      "${user_language | n, js_escaped_string}",
+      "${user_timezone | n, js_escaped_string}"
+    );
+  </%static:require_module>
+</%block>
+% endif
+
+
+<%block name="pagetitle">${_("Courses")}</%block>
+
+<main id="main" aria-label="Content" tabindex="-1">
+  <section class="find-courses">
+    <section class="courses-container">
+      % if course_discovery_enabled:
+      <div class="container">
+        <div id="discovery-form" role="search" aria-label="course" class="wrapper-search-context">
+
+          <div class="search-bar-contents">
+            <div class="filter-search-container">
+
+              % if filter_enabled:
+              <!-- Filter Section -->
+              <div class="filter-container">
+                <!-- Filter Box with Icon and Count -->
+                <span class="mdi mdi-tune-vertical"></span>
+                <span class="filter-text">Filter</span>
+                <div style="background: #FEEBEE; padding: 4px 6px;">
+                  <span style="font-weight: 600; font-size: 12px; color: #ED4338;">3</span>
+                </div>
+              </div>
+              % endif
+
+              <!-- Search Bar -->
+              <div class="search-container">
+                <div class="search-info">
+                  <form class="wrapper-search-input">
+                    <div class="magnifier-input">
+                      <span class="mdi mdi-magnify"></span>
+                      <label for="discovery-input" class="sr">${_('Search for a course')}</label>
+                      <input id="discovery-input" class="search-input" placeholder="${_('Search for a course')}" />
+
+                      <div aria-live="polite" aria-relevant="all">
+                        <span class="sr">${_('Loading')}</span>
+                      </div>
+                    </div>
+                  </form>
+                </div>
+              </div>
+
+            </div>
+
+            % if sortby_enabled:
+            <!-- Sort By Dropdown -->
+            <div class="sort-section">
+              <span class="sort-by-label">Sort by:</span>
+              <select class="sort-dropdown">
+                <!-- add options here -->
+              </select>
+            </div>
+            % endif
+
+          </div>
+          <div id="discovery-message" class="search-status-label" style="display: none;" ></div>
+
+
+          <div id="search-results-container"></div>
+
+        </div>
+
       </div>
-    </header>
-    <div class="course-info" aria-hidden="true">
-      <h2 class="course-name">
-        <span class="course-organization">${course.display_org_with_default}</span>
-        <span class="course-code">${course.display_number_with_default}</span>
-        <span class="course-title">${course.display_name_with_default}</span>
-      </h2>
-      <%
-      if course.start is not None:
-          course_date_string = course.start.strftime('%Y-%m-%dT%H:%M:%S%z')
-      else:
-          course_date_string = ''
-      %>
-      % if course.advertised_start is not None:
-          <div class="course-date" aria-hidden="true">${_("Starts")}: ${course.advertised_start}</div>
-      % else:
-          <div class="course-date localized_datetime" aria-hidden="true" data-format="shortDate" data-datetime="${course_date_string}" data-language="${LANGUAGE_CODE}" data-string="${_("Starts: {date}")}"></div>
+      <div id="filter-bar" class="filters hide-phone is-collapsed" style="display: none;"></div>
+
+
       % endif
-    </div>
-    <div class="sr">
-      <ul>
-        <li>${course.display_org_with_default}</li>
-        <li>${course.display_number_with_default}</li>
-        % if course.advertised_start is not None:
-            <li>${_("Starts")}: <time itemprop="startDate">${course.advertised_start}</time></li>
-        % else:
-            <li>${_("Starts")}: <time class="localized_datetime" itemprop="startDate" data-format="shortDate" data-datetime="${course_date_string}" data-language="${LANGUAGE_CODE}"></time></li>
+
+      <!-- Including the 'Inter' font -->
+      <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
+      <link href="https://cdn.jsdelivr.net/npm/@mdi/font@7.3.67/css/materialdesignicons.min.css" rel="stylesheet">
+
+      <style>
+        body {
+          font-family: 'Inter', sans-serif;
+        }
+
+        .mdi {
+          font-size: 1.5em;
+          /* Set the size of the icon */
+          color: black;
+          /* Set the color of the icon */
+          display: flex;
+          align-items: center;
+
+        }
+
+        .find-courses .wrapper-search-context {
+          max-width: 100%;
+          margin-left: 10%;
+        }
+
+        .search-results-container {
+          height: 22px;
+          font-family: 'Inter', sans-serif;
+          /* Fallback to sans-serif */
+          font-style: normal;
+          font-weight: 400;
+          font-size: 14px;
+          line-height: 22px;
+          letter-spacing: -0.01em;
+          color: #4E5566;
+          flex: none;
+          order: 1;
+          flex-grow: 0;
+          padding: 24px 20px 16px 0px;
+        }
+
+        #results-count {
+          font-weight: bold;
+          /* Make the number of results bold */
+          color: #1D2026;
+        }
+
+        .magnifier-input {
+          display: flex;
+          flex-direction: row;
+          align-items: stretch;
+
+        }
+
+        .wrapper-search-context {
+          display: flex;
+          flex-direction: column;
+          align-items: left;
+          /* To ensure children elements take full width */
+
+        }
+
+        .search-bar-contents {
+          display: flex;
+          flex-direction: row;
+          align-items: stretch;
+          /* To ensure children elements take full width */
+          width: 100%;
+          height: 48px;
+          justify-content: space-between;
+        }
+
+        .container {
+          display: flex;
+          justify-content: space-between;
+          align-items: left;
+          width: 100%;
+          padding-bottom:0px;
+        }
+
+        .filter-search-container {
+          display: flex;
+          gap: 24px;
+          /* Gap between filter and search bar */
+        }
+
+        /* Filter Box CSS */
+        .filter-container {
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: row;
+          justify-content: center;
+          align-items: center;
+          padding: 0px 24px;
+          gap: 24px;
+          width: 167px;
+          height: 48px;
+          background: #FFFFFF;
+          border: 1px solid #FEEBEE;
+        }
+
+        .contents {
+          display: flex;
+          flex-direction: row;
+          justify-content: center;
+          align-items: center;
+          padding: 0px;
+          gap: 12px;
+          width: 75px;
+          height: 48px;
+        }
+
+        .filter-text {
+          width: 39px;
+          height: 48px;
+          font-weight: 600;
+          font-size: 16px;
+          line-height: 48px;
+          color: #1D2026;
+        }
+
+        /* Search Bar CSS */
+        .search-container {
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: row;
+          align-items: flex-start;
+          padding: 12px 18px;
+          gap: 10px;
+          width: 389px;
+          height: 48px;
+          background: #FFFFFF;
+          border: 1px solid #E9EAF0;
+        }
+
+        .search-results-count {     
+          padding-top: 5%;
+        }
+
+        .search-info {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          padding: 0px;
+          gap: 12px;
+          width: 105px;
+          height: 24px;
+        }
+
+        .search-input {
+          width: auto;
+          height: 30px;
+          font-weight: 400;
+          font-size: 16px;
+          line-height: 24px;
+          color: #1D2026;
+          border: none;
+          padding-left: 10px;
+          background: #FFFFFF;
+        }
+
+        .search-input:focus {
+          outline: none;
+        }
+
+        .sort-by-label {
+          margin-right: 8px;
+          font-weight: 400;
+          font-size: 16px;
+          line-height: 24px;
+          color: #1D2026;
+        }
+
+        .sort-dropdown {
+
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: row;
+          justify-content: center;
+          align-items: center;
+          padding: 12px 16px;
+          gap: 83px;
+
+          width: 198px;
+          height: 48px;
+
+          /* Gray/White */
+          background: #FFFFFF;
+          /* Gray/100 */
+          border: 1px solid #E9EAF0;
+
+          /* Inside auto layout */
+          flex: none;
+          order: 1;
+          flex-grow: 0;
+        }
+
+        .sort-section {
+          display: flex;
+          /* Add flex display to horizontally align Sort By text and dropdown */
+          align-items: center;
+          /* Vertically align the items in center */
+        }
+
+
+      </style>
+
+      <div class="courses${'' if course_discovery_enabled else ' no-course-discovery'}" role="region" aria-label="${_('List of Courses')}">
+        <ul class="courses-listing courses-list">
+          %for course in courses:
+          <li class="courses-listing-item">
+            <%include file="../course.html" args="course=course" />
+          </li>
+          %endfor
+        </ul>
+      </div>
+
+      % if course_discovery_enabled:
+        <aside aria-label="${_('Refine Your Search')}" class="search-facets phone-menu" style="
+        margin-right: 0px;">
+          <h2 class="header-search-facets">${_('Refine Your Search')}</h2>
+          <section class="search-facets-lists">
+          </section>
+        </aside>
         % endif
-      </ul>
-    </div>
-  </a>
-</article>
-<%static:require_module_async module_name="js/dateutil_factory" class_name="DateUtilFactory">
-    DateUtilFactory.transform(iterationKey=".localized_datetime");
-</%static:require_module_async>
+
+      <script>
+        document.addEventListener('DOMContentLoaded', function () {
+          var searchForm = document.getElementById('discovery-form');
+      
+          function updateSearchResultsCount(currentMessage, searchTerm) {
+            var resultsContainer = document.getElementById('search-results-container');
+            var existingElement = resultsContainer.querySelector('.search-results-count');
+        
+            // Create a new element or clear the existing one
+            var messageElement = existingElement || document.createElement('div');
+            messageElement.className = 'search-results-count';
+            messageElement.textContent = ''; // Clear any existing content
+        
+            if (searchTerm === '') {
+                messageElement.textContent = currentMessage;
+            } else {
+                var numberOfCourses = currentMessage.includes("any") ? 0 : parseInt(currentMessage.match(/\d+/)[0]);
+                var courseWord = numberOfCourses === 1 ? "course" : "courses";
+        
+                // Create and append the bold element for the number
+                var boldElement = document.createElement('b');
+                boldElement.textContent = numberOfCourses;
+                messageElement.appendChild(boldElement);
+        
+                // Append the rest of the message
+                messageElement.appendChild(document.createTextNode(" " + courseWord + " found for \"" + encodeHTML(searchTerm) + "\""));
+            }
+        
+            // Append the new element if it wasn't already in the DOM
+            if (!existingElement) {
+                resultsContainer.appendChild(messageElement);
+            }
+        }
+
+          searchForm.addEventListener('submit', function (event) {
+              event.preventDefault();
+      
+              var searchTerm = document.getElementById('discovery-input').value.trim();
+      
+              setTimeout(function() {
+                  var currentMessage = document.getElementById('discovery-message').textContent;
+                  updateSearchResultsCount(currentMessage, searchTerm);
+              }, 500);
+          });
+      });
+      
+      // Function to escape HTML in user input
+      function encodeHTML(str){
+          return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#039;');
+      }
+      
+      </script>
+
+    </section>
+  </section>
+</main>
\ No newline at end of file