diff --git a/assets/javascripts/discourse/initializers/extend-for-assigns.js b/assets/javascripts/discourse/initializers/extend-for-assigns.js index 9d51554..4715d23 100644 --- a/assets/javascripts/discourse/initializers/extend-for-assigns.js +++ b/assets/javascripts/discourse/initializers/extend-for-assigns.js @@ -11,6 +11,7 @@ import getURL from "discourse/lib/get-url"; import { iconHTML, iconNode } from "discourse/lib/icon-library"; import { withPluginApi } from "discourse/lib/plugin-api"; import { registerTopicFooterDropdown } from "discourse/lib/register-topic-footer-dropdown"; +import { applyValueTransformer } from "discourse/lib/transformer"; import { escapeExpression } from "discourse/lib/utilities"; import RawHtml from "discourse/widgets/raw-html"; import RenderGlimmer from "discourse/widgets/render-glimmer"; @@ -467,28 +468,52 @@ function initialize(api) { .filter(({ assignee }) => assignee) .flat(); - if (assignedTo) { - return assignedTo - .map(({ assignee, note }) => { - let assignedPath; - if (assignee.assignedToPostId) { - assignedPath = `/p/${assignee.assignedToPostId}`; - } else { - assignedPath = `/t/${topic.id}`; - } - const icon = iconHTML(assignee.username ? "user-plus" : "group-plus"); - const name = assignee.username || assignee.name; - const tagName = params.tagName || "a"; - const href = - tagName === "a" - ? `href="${getURL(assignedPath)}" data-auto-route="true"` - : ""; - return `<${tagName} class="assigned-to discourse-tag simple" ${href}>${icon}${name}`; - }) - .join(""); + if (!assignedTo) { + return ""; } + + const createTagHtml = ({ assignee, note }) => { + let assignedPath; + if (assignee.assignedToPostId) { + assignedPath = `/p/${assignee.assignedToPostId}`; + } else { + assignedPath = `/t/${topic.id}`; + } + + const icon = iconHTML(assignee.username ? "user-plus" : "group-plus"); + const name = assignee.username || assignee.name; + const tagName = params.tagName || "a"; + const href = + tagName === "a" + ? `href="${getURL(assignedPath)}" data-auto-route="true"` + : ""; + + return `<${tagName} class="assigned-to discourse-tag simple" ${href}>${icon}${name}`; + }; + + // is there's one assignment just return the tag + if (assignedTo.length === 1) { + return createTagHtml(assignedTo[0]); + } + + // join multiple assignments with a separator + let result = ""; + assignedTo.forEach((assignment, index) => { + result += createTagHtml(assignment); + + // add separator if not the last tag + if (index < assignedTo.length - 1) { + const separator = applyValueTransformer("tag-separator", ",", { + topic, + index, + }); + result += `${separator}`; + } + }); + + return result; }); api.createWidget("assigned-to-post", {