import I18n from "I18n"; import { PIE_CHART_TYPE } from "discourse/plugins/poll/controllers/poll-ui-builder"; import RawHtml from "discourse/widgets/raw-html"; import { ajax } from "discourse/lib/ajax"; import { avatarFor } from "discourse/widgets/post"; import { createWidget } from "discourse/widgets/widget"; import evenRound from "discourse/plugins/poll/lib/even-round"; import { getColors } from "discourse/plugins/poll/lib/chart-colors"; import { h } from "virtual-dom"; import { iconNode } from "discourse-common/lib/icon-library"; import loadScript from "discourse/lib/load-script"; import { popupAjaxError } from "discourse/lib/ajax-error"; import { relativeAge } from "discourse/lib/formatter"; import round from "discourse/lib/round"; import showModal from "discourse/lib/show-modal"; import bootbox from "bootbox"; const FETCH_VOTERS_COUNT = 25; function optionHtml(option) { const $node = $(`${option.html}`); $node.find(".discourse-local-date").each((_index, elem) => { $(elem).applyLocalDates(); }); return new RawHtml({ html: `${$node.html()}` }); } function infoTextHtml(text) { return new RawHtml({ html: `${text}`, }); } function checkUserGroups(user, poll) { const pollGroups = poll && poll.groups && poll.groups.split(",").map((g) => g.toLowerCase()); if (!pollGroups) { return true; } const userGroups = user && user.groups && user.groups.map((g) => g.name.toLowerCase()); return userGroups && pollGroups.some((g) => userGroups.includes(g)); } createWidget("discourse-poll-option", { tagName: "li", buildAttributes(attrs) { return { tabindex: 0, "data-poll-option-id": attrs.option.id }; }, html(attrs) { const contents = []; const { option, vote } = attrs; const chosen = vote.includes(option.id); if (attrs.isMultiple) { contents.push(iconNode(chosen ? "far-check-square" : "far-square")); } else { contents.push(iconNode(chosen ? "circle" : "far-circle")); } contents.push(" "); contents.push(optionHtml(option)); return contents; }, click(e) { if ($(e.target).closest("a").length === 0) { this.sendWidgetAction("toggleOption", this.attrs.option); } }, keyDown(e) { if (e.key === "Enter") { this.click(e); } }, }); createWidget("discourse-poll-load-more", { tagName: "div.poll-voters-toggle-expand", buildKey: (attrs) => `load-more-${attrs.optionId}`, defaultState() { return { loading: false }; }, html(attrs, state) { return state.loading ? h("div.spinner.small") : h("a", iconNode("chevron-down")); }, click() { const { state, attrs } = this; if (state.loading) { return; } state.loading = true; return this.sendWidgetAction("fetchVoters", attrs.optionId).finally( () => (state.loading = false) ); }, }); createWidget("discourse-poll-voters", { tagName: "ul.poll-voters-list", buildKey: (attrs) => `poll-voters-${attrs.optionId}`, html(attrs) { const contents = attrs.voters.map((user) => h("li", [ avatarFor("tiny", { username: user.username, template: user.avatar_template, }), " ", ]) ); if (attrs.voters.length < attrs.totalVotes) { contents.push(this.attach("discourse-poll-load-more", attrs)); } return h("div.poll-voters", contents); }, }); createWidget("discourse-poll-standard-results", { tagName: "ul.results", buildKey: (attrs) => `poll-standard-results-${attrs.id}`, html(attrs) { const { poll } = attrs; const options = poll.options; if (options) { const voters = poll.voters; const isPublic = poll.public; const ordered = [...options].sort((a, b) => { if (a.votes < b.votes) { return 1; } else if (a.votes === b.votes) { if (a.html < b.html) { return -1; } else { return 1; } } else { return -1; } }); const percentages = voters === 0 ? Array(ordered.length).fill(0) : ordered.map((o) => (100 * o.votes) / voters); const rounded = attrs.isMultiple ? percentages.map(Math.floor) : evenRound(percentages); return ordered.map((option, idx) => { const contents = []; const per = rounded[idx].toString(); const chosen = (attrs.vote || []).includes(option.id); contents.push( h( "div.option", h("p", [h("span.percentage", `${per}%`), optionHtml(option)]) ) ); contents.push( h( "div.bar-back", h("div.bar", { attributes: { style: `width:${per}%` } }) ) ); if (isPublic) { contents.push( this.attach("discourse-poll-voters", { postId: attrs.post.id, optionId: option.id, pollName: poll.name, totalVotes: option.votes, voters: (attrs.voters && attrs.voters[option.id]) || [], }) ); } return h("li", { className: `${chosen ? "chosen" : ""}` }, contents); }); } }, }); createWidget("discourse-poll-number-results", { buildKey: (attrs) => `poll-number-results-${attrs.id}`, html(attrs) { const { poll } = attrs; const totalScore = poll.options.reduce((total, o) => { return total + parseInt(o.html, 10) * parseInt(o.votes, 10); }, 0); const voters = poll.voters; const average = voters === 0 ? 0 : round(totalScore / voters, -2); const averageRating = I18n.t("poll.average_rating", { average }); const contents = [ h( "div.poll-results-number-rating", new RawHtml({ html: `${averageRating}` }) ), ]; if (poll.public) { contents.push( this.attach("discourse-poll-voters", { totalVotes: poll.voters, voters: attrs.voters || [], postId: attrs.post.id, pollName: poll.name, pollType: poll.type, }) ); } return contents; }, }); createWidget("discourse-poll-container", { tagName: "div.poll-container", buildKey: (attrs) => `poll-container-${attrs.id}`, defaultState() { return { voters: [] }; }, html(attrs, state) { const { poll } = attrs; const options = poll.options; if (attrs.showResults) { const contents = []; if (attrs.titleHTML) { contents.push(new RawHtml({ html: attrs.titleHTML })); } if (poll.public) { state.voters = poll.preloaded_voters; } const type = poll.type === "number" ? "number" : "standard"; const resultsWidget = type === "number" || attrs.poll.chart_type !== PIE_CHART_TYPE ? `discourse-poll-${type}-results` : "discourse-poll-pie-chart"; contents.push( this.attach( resultsWidget, Object.assign({}, attrs, { voters: state.voters }) ) ); return contents; } else if (options) { const contents = []; if (attrs.titleHTML) { contents.push(new RawHtml({ html: attrs.titleHTML })); } if (!checkUserGroups(this.currentUser, poll)) { contents.push( h( "div.alert.alert-danger", I18n.t("poll.results.groups.title", { groups: poll.groups }) ) ); } contents.push( h( "ul", options.map((option) => { return this.attach("discourse-poll-option", { option, isMultiple: attrs.isMultiple, vote: attrs.vote, }); }) ) ); return contents; } }, fetchVoters(optionId) { const { attrs, state } = this; let votersCount; if (optionId) { if (!state.voters) { state.voters = {}; } if (!state.voters[optionId]) { state.voters[optionId] = []; } votersCount = state.voters[optionId].length; } else { if (!state.voters) { state.voters = []; } votersCount = state.voters.length; } return ajax("/polls/voters.json", { data: { post_id: attrs.post.id, poll_name: attrs.poll.name, option_id: optionId, page: Math.floor(votersCount / FETCH_VOTERS_COUNT) + 1, limit: FETCH_VOTERS_COUNT, }, }) .then((result) => { const voters = optionId ? state.voters[optionId] : state.voters; const newVoters = optionId ? result.voters[optionId] : result.voters; const votersSet = new Set(voters.map((voter) => voter.username)); newVoters.forEach((voter) => { if (!votersSet.has(voter.username)) { votersSet.add(voter.username); voters.push(voter); } }); // remove users who changed their vote if (attrs.poll.type === "regular") { Object.keys(state.voters).forEach((otherOptionId) => { if (optionId !== otherOptionId) { state.voters[otherOptionId] = state.voters[otherOptionId].filter( (voter) => !votersSet.has(voter.username) ); } }); } this.scheduleRerender(); }) .catch((error) => { if (error) { popupAjaxError(error); } else { bootbox.alert(I18n.t("poll.error_while_fetching_voters")); } }); }, }); createWidget("discourse-poll-info", { tagName: "div.poll-info", multipleHelpText(min, max, options) { if (max > 0) { if (min === max) { if (min > 1) { return I18n.t("poll.multiple.help.x_options", { count: min }); } } else if (min > 1) { if (max < options) { return I18n.t("poll.multiple.help.between_min_and_max_options", { min, max, }); } else { return I18n.t("poll.multiple.help.at_least_min_options", { count: min, }); } } else if (max <= options) { return I18n.t("poll.multiple.help.up_to_max_options", { count: max }); } } }, html(attrs) { const { poll } = attrs; const count = poll.voters; const contents = [ h("p", [ h("span.info-number", count.toString()), h("span.info-label", I18n.t("poll.voters", { count })), ]), ]; if (attrs.isMultiple) { if (attrs.showResults || attrs.isClosed) { const totalVotes = poll.options.reduce((total, o) => { return total + parseInt(o.votes, 10); }, 0); contents.push( h("p", [ h("span.info-number", totalVotes.toString()), h( "span.info-label", I18n.t("poll.total_votes", { count: totalVotes }) ), ]) ); } else { const help = this.multipleHelpText( attrs.min, attrs.max, poll.options.length ); if (help) { contents.push(infoTextHtml(help)); } } } if ( !attrs.isClosed && !attrs.showResults && poll.public && poll.results !== "staff_only" ) { contents.push(infoTextHtml(I18n.t("poll.public.title"))); } return contents; }, }); function clearPieChart(id) { let el = document.querySelector(`#poll-results-chart-${id}`); el && el.parentNode.removeChild(el); } createWidget("discourse-poll-pie-canvas", { tagName: "canvas.poll-results-canvas", init(attrs) { loadScript("/javascripts/Chart.min.js").then(() => { const data = attrs.poll.options.mapBy("votes"); const labels = attrs.poll.options.mapBy("html"); const config = pieChartConfig(data, labels, { legendContainerId: `poll-results-legend-${attrs.id}`, }); const el = document.getElementById(`poll-results-chart-${attrs.id}`); // eslint-disable-next-line no-undef this._chart = new Chart(el.getContext("2d"), config); }); }, willRerenderWidget() { this._chart?.destroy(); }, buildAttributes(attrs) { return { id: `poll-results-chart-${attrs.id}`, }; }, }); createWidget("discourse-poll-pie-chart", { tagName: "div.poll-results-chart", html(attrs) { const contents = []; if (!attrs.showResults) { clearPieChart(attrs.id); return contents; } const chart = this.attach("discourse-poll-pie-canvas", attrs); contents.push(chart); contents.push(h(`ul#poll-results-legend-${attrs.id}.pie-chart-legends`)); return contents; }, }); const htmlLegendPlugin = { id: "htmlLegend", afterUpdate(chart, args, options) { const ul = document.getElementById(options.containerID); ul.innerHTML = ""; const items = chart.options.plugins.legend.labels.generateLabels(chart); items.forEach((item) => { const li = document.createElement("li"); li.classList.add("legend"); li.onclick = () => { chart.toggleDataVisibility(item.index); chart.update(); }; const boxSpan = document.createElement("span"); boxSpan.classList.add("swatch"); boxSpan.style.background = item.fillStyle; const textContainer = document.createElement("span"); textContainer.style.color = item.fontColor; textContainer.innerHTML = item.text; if (!chart.getDataVisibility(item.index)) { li.style.opacity = 0.2; } else { li.style.opacity = 1.0; } li.appendChild(boxSpan); li.appendChild(textContainer); ul.appendChild(li); }); }, }; function pieChartConfig(data, labels, opts = {}) { const aspectRatio = "aspectRatio" in opts ? opts.aspectRatio : 2.2; const strippedLabels = labels.map((l) => stripHtml(l)); return { type: PIE_CHART_TYPE, data: { datasets: [ { data, backgroundColor: getColors(data.length), }, ], labels: strippedLabels, }, plugins: [htmlLegendPlugin], options: { responsive: true, aspectRatio, animation: { duration: 0 }, plugins: { legend: { labels: { generateLabels() { return labels.map((text, index) => { return { fillStyle: getColors(data.length)[index], text, index, }; }); }, }, display: false, }, htmlLegend: { containerID: opts?.legendContainerId, }, }, }, }; } function stripHtml(html) { let doc = new DOMParser().parseFromString(html, "text/html"); return doc.body.textContent || ""; } createWidget("discourse-poll-buttons", { tagName: "div.poll-buttons", html(attrs) { const contents = []; const { poll, post } = attrs; const topicArchived = post.get("topic.archived"); const closed = attrs.isClosed; const staffOnly = poll.results === "staff_only"; const isStaff = this.currentUser && this.currentUser.staff; const isAdmin = this.currentUser && this.currentUser.admin; const isMe = this.currentUser && post.user_id === this.currentUser.id; const dataExplorerEnabled = this.siteSettings.data_explorer_enabled; const hideResultsDisabled = !staffOnly && (closed || topicArchived); const exportQueryID = this.siteSettings.poll_export_data_explorer_query_id; if (attrs.isMultiple && !hideResultsDisabled) { const castVotesDisabled = !attrs.canCastVotes; contents.push( this.attach("button", { className: `cast-votes ${ castVotesDisabled ? "btn-default" : "btn-primary" }`, label: "poll.cast-votes.label", title: "poll.cast-votes.title", disabled: castVotesDisabled, action: "castVotes", }) ); contents.push(" "); } if (attrs.showResults || hideResultsDisabled) { contents.push( this.attach("button", { className: "btn-default toggle-results", label: "poll.hide-results.label", title: "poll.hide-results.title", icon: "far-eye-slash", disabled: hideResultsDisabled, action: "toggleResults", }) ); } else { let showResultsButton; let infoText; if (poll.results === "on_vote" && !attrs.hasVoted && !isMe) { infoText = infoTextHtml(I18n.t("poll.results.vote.title")); } else if (poll.results === "on_close" && !closed) { infoText = infoTextHtml(I18n.t("poll.results.closed.title")); } else if (poll.results === "staff_only" && !isStaff) { infoText = infoTextHtml(I18n.t("poll.results.staff.title")); } else { showResultsButton = this.attach("button", { className: "btn-default toggle-results", label: "poll.show-results.label", title: "poll.show-results.title", icon: "far-eye", disabled: poll.voters === 0, action: "toggleResults", }); } if (showResultsButton) { contents.push(showResultsButton); } if (attrs.hasSavedVote) { contents.push( this.attach("button", { className: "btn-default remove-vote", label: "poll.remove-vote.label", title: "poll.remove-vote.title", icon: "trash-alt", action: "removeVote", }) ); } if (infoText) { contents.push(infoText); } } if (attrs.groupableUserFields.length && poll.voters > 0) { const button = this.attach("button", { className: "btn-default poll-show-breakdown", label: "poll.group-results.label", title: "poll.group-results.title", icon: "far-eye", action: "showBreakdown", }); contents.push(button); } if (isAdmin && dataExplorerEnabled && poll.voters > 0 && exportQueryID) { contents.push( this.attach("button", { className: "btn btn-default export-results", label: "poll.export-results.label", title: "poll.export-results.title", icon: "download", disabled: poll.voters === 0, action: "exportResults", }) ); } if (poll.close) { const closeDate = moment(poll.close); if (closeDate.isValid()) { const title = closeDate.format("LLL"); let label; if (attrs.isAutomaticallyClosed) { const age = relativeAge(closeDate.toDate(), { addAgo: true }); label = I18n.t("poll.automatic_close.age", { age }); } else { const timeLeft = moment().to(closeDate, true); label = I18n.t("poll.automatic_close.closes_in", { timeLeft }); } contents.push( new RawHtml({ html: `${label}`, }) ); } } if ( this.currentUser && (this.currentUser.id === post.user_id || isStaff) && !topicArchived ) { if (closed) { if (!attrs.isAutomaticallyClosed) { contents.push( this.attach("button", { className: "btn-default toggle-status", label: "poll.open.label", title: "poll.open.title", icon: "unlock-alt", action: "toggleStatus", }) ); } } else { contents.push( this.attach("button", { className: "toggle-status btn-danger", label: "poll.close.label", title: "poll.close.title", icon: "lock", action: "toggleStatus", }) ); } } return contents; }, }); export default createWidget("discourse-poll", { tagName: "div", buildKey: (attrs) => `poll-${attrs.id}`, buildAttributes(attrs) { let cssClasses = "poll"; if (attrs.poll.chart_type === PIE_CHART_TYPE) { cssClasses += " pie"; } return { class: cssClasses, "data-poll-name": attrs.poll.name, "data-poll-type": attrs.poll.type, }; }, defaultState(attrs) { const { poll } = attrs; const staffOnly = attrs.poll.results === "staff_only"; const showResults = poll.results !== "on_close" && this.hasVoted() && !staffOnly; return { loading: false, showResults }; }, html(attrs, state) { const staffOnly = attrs.poll.results === "staff_only"; const showResults = state.showResults || (attrs.post.get("topic.archived") && !staffOnly) || (this.isClosed() && !staffOnly); const newAttrs = Object.assign({}, attrs, { canCastVotes: this.canCastVotes(), hasVoted: this.hasVoted(), isAutomaticallyClosed: this.isAutomaticallyClosed(), isClosed: this.isClosed(), isMultiple: this.isMultiple(), max: this.max(), min: this.min(), showResults, }); return h("div", [ this.attach("discourse-poll-container", newAttrs), this.attach("discourse-poll-info", newAttrs), this.attach("discourse-poll-buttons", newAttrs), ]); }, min() { let min = parseInt(this.attrs.poll.min, 10); if (isNaN(min) || min < 0) { min = 1; } return min; }, max() { let max = parseInt(this.attrs.poll.max, 10); const numOptions = this.attrs.poll.options.length; if (isNaN(max) || max > numOptions) { max = numOptions; } return max; }, isAutomaticallyClosed() { const { poll } = this.attrs; return poll.close && moment.utc(poll.close) <= moment(); }, isClosed() { const { poll } = this.attrs; return poll.status === "closed" || this.isAutomaticallyClosed(); }, isMultiple() { const { poll } = this.attrs; return poll.type === "multiple"; }, hasVoted() { const { vote } = this.attrs; return vote && vote.length > 0; }, canCastVotes() { const { state, attrs } = this; if (this.isClosed() || state.showResults || state.loading) { return false; } const selectedOptionCount = attrs.vote.length; if (this.isMultiple()) { return ( selectedOptionCount >= this.min() && selectedOptionCount <= this.max() ); } return selectedOptionCount > 0; }, toggleStatus() { const { state, attrs } = this; const { post, poll } = attrs; if (this.isAutomaticallyClosed()) { return; } bootbox.confirm( I18n.t(this.isClosed() ? "poll.open.confirm" : "poll.close.confirm"), I18n.t("no_value"), I18n.t("yes_value"), (confirmed) => { if (confirmed) { state.loading = true; const status = this.isClosed() ? "open" : "closed"; ajax("/polls/toggle_status", { type: "PUT", data: { post_id: post.id, poll_name: poll.name, status, }, }) .then(() => { poll.set("status", status); if (poll.results === "on_close") { state.showResults = status === "closed"; } this.scheduleRerender(); }) .catch((error) => { if (error) { popupAjaxError(error); } else { bootbox.alert(I18n.t("poll.error_while_toggling_status")); } }) .finally(() => { state.loading = false; }); } } ); }, toggleResults() { this.state.showResults = !this.state.showResults; }, removeVote() { const { attrs, state } = this; state.loading = true; return ajax("/polls/vote", { type: "DELETE", data: { post_id: attrs.post.id, poll_name: attrs.poll.name, }, }) .then(({ poll }) => { attrs.poll.setProperties(poll); attrs.vote.length = 0; attrs.hasSavedVote = false; this.appEvents.trigger("poll:voted", poll, attrs.post, attrs.vote); }) .catch((error) => popupAjaxError(error)) .finally(() => { state.loading = false; }); }, exportResults() { const { attrs } = this; const queryID = this.siteSettings.poll_export_data_explorer_query_id; // This uses the Data Explorer plugin export as CSV route // There is detection to check if the plugin is enabled before showing the button ajax(`/admin/plugins/explorer/queries/${queryID}/run.csv`, { type: "POST", data: { // needed for data-explorer route compatibility params: JSON.stringify({ poll_name: attrs.poll.name, post_id: attrs.post.id.toString(), // needed for data-explorer route compatibility }), explain: false, limit: 1000000, download: 1, }, }) .then((csvContent) => { const downloadLink = document.createElement("a"); const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;", }); downloadLink.href = URL.createObjectURL(blob); downloadLink.setAttribute( "download", `poll-export-${attrs.poll.name}-${attrs.post.id}.csv` ); downloadLink.click(); downloadLink.remove(); }) .catch((error) => { if (error) { popupAjaxError(error); } else { bootbox.alert(I18n.t("poll.error_while_exporting_results")); } }); }, showLogin() { this.register.lookup("route:application").send("showLogin"); }, _toggleOption(option) { const { vote } = this.attrs; const chosenIdx = vote.indexOf(option.id); if (chosenIdx !== -1) { vote.splice(chosenIdx, 1); } else { vote.push(option.id); } }, toggleOption(option) { const { attrs } = this; if (this.isClosed()) { return; } if (!this.currentUser) { return this.showLogin(); } if (!checkUserGroups(this.currentUser, this.attrs.poll)) { return; } const { vote } = attrs; if (!this.isMultiple() && vote.length === 1 && vote[0] === option.id) { return this.removeVote(); } if (!this.isMultiple()) { vote.length = 0; } this._toggleOption(option); if (!this.isMultiple()) { return this.castVotes().catch(() => this._toggleOption(option)); } }, castVotes() { if (!this.canCastVotes()) { return; } if (!this.currentUser) { return this.showLogin(); } const { attrs, state } = this; state.loading = true; return ajax("/polls/vote", { type: "PUT", data: { post_id: attrs.post.id, poll_name: attrs.poll.name, options: attrs.vote, }, }) .then(({ poll }) => { attrs.hasSavedVote = true; attrs.poll.setProperties(poll); this.appEvents.trigger("poll:voted", poll, attrs.post, attrs.vote); if (attrs.poll.results !== "on_close") { state.showResults = true; } if (attrs.poll.results === "staff_only") { if (this.currentUser && this.currentUser.staff) { state.showResults = true; } else { state.showResults = false; } } }) .catch((error) => { if (error) { popupAjaxError(error); } else { bootbox.alert(I18n.t("poll.error_while_casting_votes")); } }) .finally(() => { state.loading = false; }); }, showBreakdown() { showModal("poll-breakdown", { model: this.attrs, panels: [ { id: "percentage", title: "poll.breakdown.percentage" }, { id: "count", title: "poll.breakdown.count" }, ], }); }, });