lms/community/community/widgets/DiscussionMessage.html

{% set topics = frappe.get_all("Discussion Topic",
{"reference_doctype": doctype, "reference_docname": docname}, ["name", "title", "owner", "creation"]) %}

<div class="discussions-parent">
  <div class="mt-10 mb-5">
    <span class="course-home-headings">{{_('Discussions')}}</span>
    <span class="review-link button is-secondary pull-right">
      New Topic
      <img src="/assets/community/icons/small-add-black.svg">
    </span>
  </div>
  {{ widgets.DiscussionComment(doctype=doctype, docname=docname) }}

  <div class="common-card-style thread-card course-content-parent" data-doctype="{{ doctype }}"
    data-docname="{{ docname }}">

    <div>
      {% for topic in topics %}
      {% set replies = frappe.get_all("Discussion Reply", {"topic": topic.name})%}
      <div class="pl-3 pr-3" data-target="#t{{ topic.name }}" data-toggle="collapse" aria-expanded="false">
        <div class="discussion-topic-title">{{ topic.title }}</div>
        <div class="mt-2 mb-3">
          {% set creator = frappe.get_doc("User", topic.owner) %}
          {{ widgets.Avatar(member=creator, avatar_class="avatar-small") }}
          <a class="button-links" href="/users/{{ creator.username }}">
            <span class="course-instructor">
              {{ creator.full_name }}
            </span>
          </a>
          <span class="muted-text">
            <img src="/assets/community/icons/message.svg"> {{ replies | length }}
          </span>
        </div>
      </div>
      {% if loop.index != topics | length %}
      <div class="card-divider"></div>
      {% endif %}
      {% endfor %}

    </div>

    <div id="discussion-group">
      {% for topic in topics %}
      {% set replies = frappe.get_all("Discussion Reply", {"topic": topic.name},
      ["reply", "owner", "creation"], order_by="creation")%}
      <div class="collapse" id="t{{ topic.name }}" class="topic-parent" data-topic="{{ topic.name }}"
        data-parent="#discussion-group">
        <div class="course-home-headings p-0">{{ topic.title }}</div>
        {% for reply in replies %}
        {% include "community/templates/reply_card.html" %}
        {% endfor %}
      </div>
      {% endfor %}
    </div>

    {% if not topics %}
    <span id="no-discussions" class="text-center">
      No discussions yet. <img src="/assets/community/icons/slash.svg">
    </span>
    {% endif %}

  </div>
</div>
<script>
  frappe.ready(() => {
    setup_socket_io();

    set_docname_if_missing();

    expand_first_discussion();

    $(document).on("click", ".reply", (e) => {
      show_new_topic_modal(e);
    })
  })

  var show_new_topic_modal = (e) => {
    e.preventDefault();
    if (frappe.session.user == "Guest") {
      window.location.href = `/login?redirect-to=/discussions/`;
      return;
    }
    $("#discussion-modal").modal("show");
    var topic = $(e.currentTarget).attr("data-topic");
    $(".modal-headings").text(topic ? "Reply" : "Start a Discussion");
    topic ? $(".topic-title").addClass("hide") : $(".topic-title").removeClass("hide");
    $("#submit-discussion").attr("data-topic", topic ? topic : "");
  }

  var setup_socket_io = () => {
    const assets = [
      "/assets/frappe/js/lib/socket.io.min.js",
      "/assets/frappe/js/frappe/socketio_client.js",
    ]

    frappe.require(assets, () => {
      if (window.dev_server) {
        frappe.boot.socketio_port = "9000";
      }
      frappe.socketio.init(9000);
      frappe.socketio.socket.on("publish_message", (data) => {
        publish_message(data);
      })
    })
  }

  var publish_message = (data) => {
    if ($(`.topic-parent[data-topic=${data.topic_info.name}]`).length) {
      post_message_cleanup();
      $(`.topic-parent[data-topic=${data.topic_info.name}]`).append(data.template);
    }

    else if ((decodeURIComponent($(".discussions-section").attr("data-doctype")) == data.topic_info.reference_doctype
      && decodeURIComponent($(".discussions-section").attr("data-docname")) == data.topic_info.reference_docname)) {
      post_message_cleanup();
      var html = `<div class="topic-parent" data-topic="${data.topic_info.name}">
                        <div class="font-weight-bold mb-5">${data.topic_info.title}</div>
                        ${data.template}
                      </div>`;
      $(".discussions-section").prepend(html);
    }
  }

  var post_message_cleanup = () => {
    $(".comment-field").val("");
    $("#discussion-modal").modal("hide");
    $("#no-discussions").addClass("hide");
  }

  var set_docname_if_missing = () => {
    if ($("[data-docname='None']").length) {
      frappe.call({
        method: "community.community.doctype.discussion_topic.discussion_topic.get_docname",
        args: {
          "route": window.location.href.split("/").slice(-1)[0]
        },
        callback: (data) => {
          $("[data-docname='None']").attr("data-docname", data.message);
        }
      })
    }
  }

  var expand_first_discussion = () => {
    var elements = $(".discussions-parent .collapse");
    elements.each((i, element) => {
      if (i < 1) {
        $(element).addClass("show");
        return false;
      }
    });
  }
</script>