Added Front. A few script changes. Jupyter notebooks practice for customer analysis.

Custom_Templates/customer_templates/Talkspace_1099/_enrolled_courses_index.html.liquid

@@ -0,0 +1,40 @@
+{% if courses.enrolled.any? %}
+  {% assign in_progress_courses = courses.enrolled | map: "progress" %}
+  {% assign any_not_in_progress = false %}
+
+  {% for in_progress_course in in_progress_courses %}
+    {% if in_progress_course == 0 %}
+      {% assign any_not_in_progress = true %}
+    {% endif %}
+  {% endfor %}
+
+  <div class="row row-with-thumbnails">
+    {% for course in courses.enrolled %}
+      {% if course.started? == false %}
+
+      {%- comment -%} {% if course.progress == 0 %}
+        {% assign is_course_from_learning_path = false %}
+
+        {% for lp_courses in learning_path_courses %}
+          {% for lp_course in lp_courses %}
+            {% if lp_course.id == course.id %}
+              {% assign is_course_from_learning_path = true %}
+            {% endif %}
+          {% endfor %}
+        {% endfor %}
+
+        {% unless is_course_from_learning_path %}
+          {% assign any_course = true %}
+        {% endunless %}
+	{% endif %}
+      {%- endcomment -%}
+
+	  <div class="{{ class }} enrolled-course-filter-card" data-progress='{{ course.progress }}'>
+            {% include "cards_course" with course %}
+          </div>
+      {% endif %}
+    {% endfor %}
+  </div>
+{% else %}
+  {% include "courses_zero_state", message: "Yikes! You don’t have any Enrolled Courses." %}
+{% endif %}

Custom_Templates/customer_templates/Talkspace_1099/_my_courses_filter.html.liquid

@@ -0,0 +1,154 @@
+<div class="my-courses-filters" style="display: none;">
+  <div class="progress-filter-dropdown-container">
+    <button class="progress-filter-dropdown np-button">
+      <span style="margin-right: 10px">
+        Not Started
+      </span>
+      <i class="fas fa-angle-down"></i>
+    </button>
+    <div class="progress-filter-dropdown-content">
+      <span class="progress-filter-item" id="not-started" style="display: none">Not Started</span>
+      <span class="progress-filter-item" id="view-all">View All</span>
+      <span class="progress-filter-item" id="in-progress">In Progress</span>
+      <span class="progress-filter-item" id="completed">Completed</span>
+    </div>
+  </div>
+</div>
+
+<script>
+  window.addEventListener('DOMContentLoaded', (event) => {
+    setDefaultFilter()
+
+    document.querySelectorAll('.progress-filter-item').forEach((item) => {
+      item.addEventListener('click', (clickEvent) => {
+        changeFilterButtonName(clickEvent.target);
+        showAllOptions();
+        hideChosenOption(clickEvent.target);
+        filter(clickEvent.target);
+      })
+    })
+
+    document.querySelector('.progress-filter-dropdown').addEventListener('click', showDropdown)
+
+    window.addEventListener("click", hideDropdown);
+  });
+
+  function hideDropdown(event) {
+    if (!event.target.matches('.progress-filter-dropdown')) {
+      var dropdowns = document.getElementsByClassName("progress-filter-dropdown-content");
+      var i;
+      for (i = 0; i < dropdowns.length; i++) {
+        var openDropdown = dropdowns[i];
+        if (openDropdown.classList.contains('progress-filter-dropdown-content-show')) {
+          openDropdown.classList.remove('progress-filter-dropdown-content-show');
+        }
+      }
+    }
+  }
+
+  function showDropdown() {
+    document.querySelector('.progress-filter-dropdown-content').classList.add('progress-filter-dropdown-content-show')
+  }
+
+  function hideChosenOption(chosenOption) {
+    chosenOption.style.display = 'none';
+  }
+
+  function showAllOptions() {
+    document.querySelectorAll('.progress-filter-item').forEach((item) => {
+      item.style.removeProperty('display');
+    });
+  }
+
+  function changeFilterButtonName(newName) {
+    document.querySelector(".progress-filter-dropdown span").innerHTML = newName.innerHTML;
+  }
+
+ function filter(filterOption) {
+    let allFilterCourses = document.querySelectorAll('.enrolled-course-filter-card');
+    let currentFilter = filterOption.id;
+
+    let checker = {
+      '100': 'completed',
+      '0': 'not-started'
+    }
+
+    if(filterOption.id == 'view-all'){
+      allFilterCourses.forEach((course) => course.style.display = 'flex')
+    } else {
+      allFilterCourses.forEach((courseCard) => {
+        if(checker[courseCard.getAttribute('data-progress')] && checker[courseCard.getAttribute('data-progress')] == currentFilter){
+          courseCard.style.display = 'flex'
+        } else if(!checker[courseCard.getAttribute('data-progress')] && currentFilter == 'in-progress'){
+          courseCard.style.display = 'flex'
+        } else {
+          courseCard.style.display = 'none'
+        }
+      })
+    }
+  }
+
+  function setDefaultFilter() {
+    let allFilterCourses = document.querySelectorAll('.enrolled-course-filter-card');
+
+    allFilterCourses.forEach((course) => course.style.display = 'flex')
+  }
+</script>
+
+<style>
+  .my-courses-filters {
+    align-items: center;
+    background: #f5f2ff;
+    color: #737373;
+    display: flex;
+    flex-direction: column;
+    font-weight: 600;
+    justify-content: center;
+    letter-spacing: .56px;
+    line-height: 1.71;
+    padding: 10px 4%;
+    position: relative;
+    transition: .2s;
+    width: 100%;
+    z-index: 32;
+  }
+
+  .progress-filter-dropdown-container {
+    position: relative;
+    display: inline-block;
+  }
+
+  .progress-filter-dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+  }
+
+  .progress-filter-item {
+    color: black;
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+    cursor: pointer;
+  }
+
+  .progress-filter-dropdown * {
+    pointer-events: none;
+  }
+
+  .progress-filter-item:hover {background-color: #f1f1f1}
+
+  .progress-filter-dropdown-content-show {
+    display: block;
+  }
+
+  @media (min-width: 768px) {
+    .my-courses-filters {
+      flex-direction: row;
+      /* justify-content: right; */
+    }
+  }
+</style>

Custom_Templates/customer_templates/Talkspace_1099/dashboard.html.liquid

@@ -12,16 +12,17 @@
           {% assign persongroup = current_person.groups.last.name | split: "-" %}
         {% endif   %}
         <p class="np-resource-title" style="font-size: 1.5rem; font-weight: 600; margin-bottom: -1rem;">Hi {{current_person.first_name}}! &#128075; {% if current_person.groups.size > 0 %} {{ persongroup | slice: 1 }} {% endif %}</p>
-        <div> <p style="font-weight: 500;">Please complete all your 2023 Compliance Courses.</p></div>
+        <div> <p style="font-weight: 500;">Please complete all your 2023 Compliance Courses.</p>
+	<p style="font-weight: 300;">Click the drop down box below to view courses that are in progress or
+	  complete.</p></div>
       </div>
     </div>
   </div>
-  <div class="flex-row-button-container">
 
-  </div>
+  {% include "my_courses_filter" %}
 
   <div class="row np-flex-center">
-    <div class="col-xs-12">
+    <div class="col-xs-12 dashboard-courses">
       {% comment %}{% if features.learning_paths? %}
         <div class="np-dashboard-resources-title">
           {% t shared.learning_paths %}
@@ -31,7 +32,8 @@
       <div class="np-dashboard-resources-title">
         {% t shared.course_vocabulary.plural, key: current_school.course_vocabulary %}
       </div>{% endcomment %}
-      {% include "courses_index", class: "col-xs-12 col-sm-6 np-stretch-content" %}
+      {%- comment -%} {% include "courses_index", class: "col-xs-12 col-sm-6 np-stretch-content" %} {%- endcomment -%}
+      {% include "enrolled_courses_index", class: "col-xs-12 col-sm-6 np-stretch-content" %}
     </div>
     {% comment %}{% if features.training_events? %}
       <div class="np-grid-spacing col-xs-12 col-sm-4">
@@ -44,3 +46,9 @@
   </div>
 </main>
 {% include "footer" %}
+
+<script>
+  window.addEventListener('DOMContentLoaded', (event) => {
+    document.querySelector('.my-courses-filters').style.removeProperty('display');
+  })
+</script>