osr-discourse-src/app/assets/javascripts/discourse/widgets/actions-summary.js.es6

import { createWidget } from "discourse/widgets/widget";
import { avatarFor } from "discourse/widgets/post";
import { h } from "virtual-dom";
import { userPath } from "discourse/lib/url";
import hbs from "discourse/widgets/hbs-compiler";

export function avatarAtts(user) {
  return {
    template: user.avatar_template,
    username: user.username,
    post_url: user.post_url,
    url: userPath(user.username_lower)
  };
}

createWidget("small-user-list", {
  tagName: "div.clearfix",

  buildClasses(atts) {
    return atts.listClassName;
  },

  html(atts) {
    let users = atts.users;
    if (users) {
      const currentUser = this.currentUser;
      if (
        atts.addSelf &&
        !users.some(u => u.username === currentUser.username)
      ) {
        users = users.concat(avatarAtts(currentUser));
      }

      let description = null;

      if (atts.description) {
        description = I18n.t(atts.description, { count: atts.count });
      }

      // oddly post_url is on the user
      let postUrl;
      const icons = users.map(u => {
        postUrl = postUrl || u.post_url;
        return avatarFor.call(this, "small", u);
      });

      if (postUrl) {
        description = h(
          "a",
          { attributes: { href: Discourse.getURL(postUrl) } },
          description
        );
      }

      let buffer = [icons];
      if (description) {
        buffer.push(description);
      }
      return buffer;
    }
  }
});

createWidget("action-link", {
  tagName: "span.action-link",
  template: hbs`<a>{{attrs.text}}. </a>`,

  buildClasses(attrs) {
    return attrs.className;
  },

  click() {
    this.sendWidgetAction(this.attrs.action);
  }
});

createWidget("actions-summary-item", {
  tagName: "div.post-action",
  buildKey: attrs => `actions-summary-item-${attrs.id}`,

  defaultState() {
    return { users: null };
  },

  template: hbs`
    {{#if state.users}}
      {{small-user-list users=state.users description=(concat "post.actions.people." attrs.action)}}
    {{else}}
      {{action-link action="whoActed" text=attrs.description}}
    {{/if}}

    {{#if attrs.canUndo}}
      {{action-link action="undo" className="undo" text=(i18n (concat "post.actions.undo." attrs.action))}}
    {{/if}}

    {{#if attrs.canIgnoreFlags}}
      {{action-link action="deferFlags" className="defer-flags" text=(i18n "post.actions.defer_flags" count=attrs.count)}}
    {{/if}}
  `,

  whoActed() {
    const attrs = this.attrs;
    const state = this.state;
    return this.store
      .find("post-action-user", {
        id: attrs.postId,
        post_action_type_id: attrs.id
      })
      .then(users => {
        state.users = users.map(avatarAtts);
      });
  },

  undo() {
    this.sendWidgetAction("undoPostAction", this.attrs.id);
  },

  deferFlags() {
    this.sendWidgetAction("deferPostActionFlags", this.attrs.id);
  }
});

export default createWidget("actions-summary", {
  tagName: "section.post-actions",
  template: hbs`
    {{#each attrs.actionsSummary as |as|}}
      {{actions-summary-item attrs=as}}
      <div class='clearfix'></div>
    {{/each}}
    {{#if attrs.deleted_at}}
      <div class='post-action deleted-post'>
        {{d-icon "far-trash-alt"}}
        {{avatar size="small" template=attrs.deletedByAvatarTemplate username=attrs.deletedByUsername}}
        {{date attrs.deleted_at}}
      </div>
    {{/if}}
  `
});