feat: search in community page

school/www/cohorts/subgroup.html

@@ -54,7 +54,7 @@
     <h5>Mentors</h5>
     {% set mentors = subgroup.get_mentors() %}
     {% if mentors %}
-      <div class="mentors-section">
+      <div class="member-parent">
       {% for m in mentors %}
         {{ widgets.MemberCard(member=m, show_course_count=False, dimension_class="") }}
       {% endfor %}
@@ -68,7 +68,7 @@
 {% macro render_students() %}
   {% set students = subgroup.get_students() %}
   {% if students %}
-  <div class="mentors-section">
+  <div class="member-parent">
     {% for student in students %}
       {{ widgets.MemberCard(member=student, show_course_count=False, dimension_class="") }}
     {% endfor %}

school/www/community/index.html

@@ -0,0 +1,32 @@
+{% extends "templates/base.html" %}
+{% from "www/hackathons/macros/card.html" import null_card %}
+{% block title %}{{ _('Community') }}{% endblock %}
+
+{% block content %}
+<div class="common-page-style">
+  <div class="container">
+
+    <input class="search" id="search-user" placeholder="{{ _('Try a Name, Company, or Industry') }}">
+
+    <div class="course-home-headings">Community</div>
+
+    <div class="alert alert-dismissible empty-state text-center hide" id="search-empty-state">
+      <a href="#" class="close-search-empty-state" aria-label="close">&times;</a>
+      <img class="icon icon-xl" src="/assets/frappe/images/ui-states/search-empty-state.svg">
+      <div class="course-home-headings mt-4 mb-0" style="color: inherit;"> {{ _("No results found") }} </div>
+      <div class="small mb-6"> {{ _("Try some other keyword or explore our community") }} </div>
+    </div>
+
+    <div class="member-parent">
+      {% for user in user_details %}
+      {{ widgets.MemberCard(member=user, show_course_count=False) }}
+      {% endfor %}
+    </div>
+    {% if user_count > user_details | length %}
+    <div class="mt-10 d-flex justify-content-center">
+      <div class="button is-secondary" id="load-more" data-start="30" data-count="{{ user_count }}">Load More</div>
+    </div>
+    {% endif %}
+  </div>
+</div>
+{% endblock %}

school/www/community/index.js

@@ -0,0 +1,58 @@
+frappe.ready(() => {
+
+  $("#load-more").click((e) => {
+    search(e);
+  });
+
+  $(".close-search-empty-state").click((e) => {
+    close_search_empty_state(e);
+  });
+
+  $("#search-user").keyup(function() {
+    let timer;
+    clearTimeout(timer);
+    timer = setTimeout(() => { search.apply(this, arguments); }, 300);
+  });
+
+});
+
+const search = (e) => {
+  $("#search-empty-state").addClass("hide");
+  let start = $(e.currentTarget).data("start")
+  let input = $("#search-user").val();
+  if ($(e.currentTarget).prop("nodeName") == "INPUT")
+    start = 0;
+
+  frappe.call({
+    method: "school.overrides.user.search_users",
+    args: {
+      "start":  start,
+      "text": input
+    },
+    callback: (data) => {
+      if ($(e.currentTarget).prop("nodeName") == "INPUT")
+        $(".member-parent").empty();
+
+      if (data.message.user_details.length)
+        $("#load-more").removeClass("hide");
+      else
+        $("#search-empty-state").removeClass("hide");
+
+      $(".member-parent").append(data.message.user_details);
+      update_load_more_state(data);
+    }
+  });
+}
+
+const close_search_empty_state = (e) => {
+  $("#search-empty-state").addClass("hide");
+  $("#search-user").val("").keyup();
+}
+
+const update_load_more_state = (data) => {
+  $("#load-more").data("start", data.message.start);
+  $("#load-more").data("count", data.message.count);
+  if ($(".member-card").length == $("#load-more").data("count")) {
+    $("#load-more").addClass("hide");
+  }
+}

school/www/community/index.py

@@ -0,0 +1,17 @@
+import frappe
+
+def get_context(context):
+    context.user_count = frappe.db.count("User", {"enabled": True})
+    users = frappe.get_all("User",
+        {"enabled": True},
+        pluck="name",
+        start=0,
+        page_length=30,
+        order_by="creation desc")
+
+    user_details = []
+    for user in users:
+        details = frappe.get_doc("User", user)
+        user_details.append(details)
+
+    context.user_details = user_details

school/www/courses/course.html

@@ -216,7 +216,7 @@
   <div class="course-home-headings">
     Mentors
   </div>
-  <div class="mentors-section">
+  <div class="member-parent">
     {% for mentor in course.get_mentors() %}
     {{ widgets.MemberCard(member=mentor, show_course_count=False, dimension_class="") }}
     {% endfor %}

school/www/courses/course.js

@@ -61,7 +61,7 @@ var check_mentor_request = () => {
 var hide_wrapped_mentor_cards = () => {
   var offset_top_prev;
 
-  $(".mentors-section .member-card").each(function () {
+  $(".member-parent .member-card").each(function () {
     var offset_top = $(this).offset().top;
     if (offset_top > offset_top_prev) {
       $(this).addClass('wrapped').slideUp("fast");

school/www/profiles/profile.html

@@ -254,8 +254,9 @@
     {% endif %}
 
     {% if member.linkedin %}
+      {% set linkedin = member.linkedin[:-1] if member.linkedin[-1] == "/" else member.linkedin %}
       <a class="button-links" href="{{ member.linkedin }}">
-        <img src="/assets/school/icons/linkedin.svg"> {{ member.linkedin.split("/")[-1] }}
+        <img src="/assets/school/icons/linkedin.svg"> {{ linkedin.split("/")[-1] }}
       </a>
     {% endif %}
     {% if member.medium %}