feat: search in community page

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