Add skill searching in the self assessment form.

main/forms.py

@@ -98,15 +98,17 @@ def __init__(self, *args: Any, user: "UserType", **kwargs: Any) -> None:
             parent_heading = (
                 f'<h2 class="card-title text-primary mt-5">{competency_domain}</h2>'
             )
-            parent_div = Div(HTML(parent_heading), css_class="mb-5")
+            parent_div = Div(
+                HTML(parent_heading), css_class="mb-5 competency-domain-container"
+            )
 
             competency_elements = []
             for competency, skills_list in competencies.items():
                 # Add competency heading
                 competency_heading = f"<h4>{competency}</h4>"
 
                 # Outer card div
-                competency_div = Div(css_class="mt-5 card rounded-1")
+                competency_div = Div(css_class="mt-5 card rounded-1 competency-card")
 
                 # Card body div with heading and table
                 card_body_div = Div(css_class="card-body")
@@ -128,7 +130,7 @@ def __init__(self, *args: Any, user: "UserType", **kwargs: Any) -> None:
                 """
                 for skill in skills_list:
                     table_html += f"""
-                        <tr>
+                        <tr class="skill-item">
                             <td class="fw-semibold">{skill.name}</td>
                             <td>{skill.description}</td>
                             <td>{{{{ form.skill_{skill.id} }}}}</td>

main/templates/main/snippets/skill-search-filter.html

@@ -0,0 +1,44 @@
+<!-- This template implements a search filter for the skills and competencies lists
+
+It works on the skill Self Assessment and Framework pages.
+
+To use ensure that the skill and competency elements have the following classes:
+- competency domain headings: "competency-domain-container"
+- competency headings: "competency-card"
+- skill rows: "skill-item"
+
+Then add a text input with name "skill_filter" and include the following script at the end of the page.
+{% include "main/snippets/skill-search-filter.html" %}
+
+-->
+<script>
+    const skillFilterInput = document.querySelector('input[name="skill_filter"]');
+    skillFilterInput.addEventListener('input', function () {
+        const filterValue = this.value.toLowerCase();
+        const skillRows = document.querySelectorAll('.skill-item');
+        const competencyDomainContainers = document.querySelectorAll('.competency-domain-container');
+        const competencyContainers = document.querySelectorAll('.competency-card');
+        competencyDomainContainers.forEach(heading => {
+            if (heading.textContent.toLowerCase().includes(filterValue)) {
+                heading.style.display = '';
+            } else {
+                heading.style.display = 'none';
+            }
+        });
+        competencyContainers.forEach(heading => {
+            if (heading.textContent.toLowerCase().includes(filterValue)) {
+                heading.style.display = '';
+            } else {
+                heading.style.display = 'none';
+            }
+        });
+        skillRows.forEach(row => {
+            const skillName = row.textContent.toLowerCase();
+            if (skillName.includes(filterValue)) {
+                row.style.display = '';
+            } else {
+                row.style.display = 'none';
+            }
+        })
+    });
+</script>

main/templates/main/user_self_assess.html

@@ -56,6 +56,14 @@ <h1>Self Assessment Questionnaire</h1>
                             Please assess your skill level for each competency below.
                             You can leave skills blank if they are not applicable to you.
                         </p>
+                        <!-- Skill Search Filter -->
+                        <p>
+                            <label for="skill_filter">Search skills:</label>
+                            <input type="text"
+                                   name="skill_filter"
+                                   value=""
+                                   placeholder="Enter search term...">
+                        </p>
                         {% if messages %}
                             {% for message in messages %}
                                 <div class="alert alert-success alert-dismissible fade show" role="alert">