From 4b9d50c98aedd4c30f86e10835d49122d37da2ec Mon Sep 17 00:00:00 2001 From: David Taylor Date: Fri, 16 Jun 2023 17:49:38 +0100 Subject: [PATCH] DEV: Update poll components and controllers to native class syntax Conversion performed using the ember-native-class-codemod --- .../components/poll-breakdown-chart.js | 52 ++++++------ .../components/poll-breakdown-option.js | 40 ++++----- .../discourse/controllers/poll-breakdown.js | 35 ++++---- .../discourse/controllers/poll-ui-builder.js | 82 +++++++++---------- 4 files changed, 106 insertions(+), 103 deletions(-) diff --git a/plugins/poll/assets/javascripts/discourse/components/poll-breakdown-chart.js b/plugins/poll/assets/javascripts/discourse/components/poll-breakdown-chart.js index fb9a9a2d3b0..72d5c0ab824 100644 --- a/plugins/poll/assets/javascripts/discourse/components/poll-breakdown-chart.js +++ b/plugins/poll/assets/javascripts/discourse/components/poll-breakdown-chart.js @@ -1,61 +1,61 @@ +import { classNames } from "@ember-decorators/component"; +import { mapBy } from "@ember/object/computed"; import Component from "@ember/component"; import I18n from "I18n"; import { PIE_CHART_TYPE } from "../controllers/poll-ui-builder"; import discourseComputed from "discourse-common/utils/decorators"; import { getColors } from "discourse/plugins/poll/lib/chart-colors"; import { htmlSafe } from "@ember/template"; -import { mapBy } from "@ember/object/computed"; import { next } from "@ember/runloop"; -export default Component.extend({ +@classNames("poll-breakdown-chart-container") +export default class PollBreakdownChart extends Component { // Arguments: - group: null, - options: null, - displayMode: null, - highlightedOption: null, - setHighlightedOption: null, + group = null; + options = null; + displayMode = null; + highlightedOption = null; + setHighlightedOption = null; - classNames: "poll-breakdown-chart-container", + @mapBy("options", "votes") data; - _optionToSlice: null, - _previousHighlightedSliceIndex: null, - _previousDisplayMode: null, - - data: mapBy("options", "votes"), + _optionToSlice = null; + _previousHighlightedSliceIndex = null; + _previousDisplayMode = null; init() { - this._super(...arguments); + super.init(...arguments); this._optionToSlice = {}; - }, + } didInsertElement() { - this._super(...arguments); + super.didInsertElement(...arguments); const canvas = this.element.querySelector("canvas"); this._chart = new window.Chart(canvas.getContext("2d"), this.chartConfig); - }, + } didReceiveAttrs() { - this._super(...arguments); + super.didReceiveAttrs(...arguments); if (this._chart) { this._updateDisplayMode(); this._updateHighlight(); } - }, + } willDestroy() { - this._super(...arguments); + super.willDestroy(...arguments); if (this._chart) { this._chart.destroy(); } - }, + } @discourseComputed("optionColors", "index") colorStyle(optionColors, index) { return htmlSafe(`background: ${optionColors[index]};`); - }, + } @discourseComputed("data", "displayMode") chartConfig(data, displayMode) { @@ -149,7 +149,7 @@ export default Component.extend({ }, }, }; - }, + } _updateDisplayMode() { if (this.displayMode !== this._previousDisplayMode) { @@ -160,7 +160,7 @@ export default Component.extend({ this._chart.update(); this._previousDisplayMode = this.displayMode; } - }, + } _updateHighlight() { const meta = this._chart.getDatasetMeta(0); @@ -186,5 +186,5 @@ export default Component.extend({ this._previousHighlightedSliceIndex = sliceIndex; meta.controller.setHoverStyle(slice); this._chart.draw(); - }, -}); + } +} diff --git a/plugins/poll/assets/javascripts/discourse/components/poll-breakdown-option.js b/plugins/poll/assets/javascripts/discourse/components/poll-breakdown-option.js index c63d9f45c14..354e9c37327 100644 --- a/plugins/poll/assets/javascripts/discourse/components/poll-breakdown-option.js +++ b/plugins/poll/assets/javascripts/discourse/components/poll-breakdown-option.js @@ -1,37 +1,37 @@ +import { tagName } from "@ember-decorators/component"; +import { equal } from "@ember/object/computed"; import Component from "@ember/component"; import I18n from "I18n"; import { action } from "@ember/object"; import discourseComputed from "discourse-common/utils/decorators"; -import { equal } from "@ember/object/computed"; import { getColors } from "discourse/plugins/poll/lib/chart-colors"; import { htmlSafe } from "@ember/template"; import { propertyEqual } from "discourse/lib/computed"; -export default Component.extend({ +@tagName("") +export default class PollBreakdownOption extends Component { // Arguments: - option: null, - index: null, - totalVotes: null, - optionsCount: null, - displayMode: null, - highlightedOption: null, - onMouseOver: null, - onMouseOut: null, + option = null; + index = null; + totalVotes = null; + optionsCount = null; + displayMode = null; + highlightedOption = null; + onMouseOver = null; + onMouseOut = null; - tagName: "", - - highlighted: propertyEqual("highlightedOption", "index"), - showPercentage: equal("displayMode", "percentage"), + @propertyEqual("highlightedOption", "index") highlighted; + @equal("displayMode", "percentage") showPercentage; @discourseComputed("option.votes", "totalVotes") percent(votes, total) { return I18n.toNumber((votes / total) * 100.0, { precision: 1 }); - }, + } @discourseComputed("optionsCount") optionColors(optionsCount) { return getColors(optionsCount); - }, + } @discourseComputed("highlighted") colorBackgroundStyle(highlighted) { @@ -39,7 +39,7 @@ export default Component.extend({ // TODO: Use CSS variables (#10341) return htmlSafe("background: rgba(0, 0, 0, 0.1);"); } - }, + } @discourseComputed("highlighted", "optionColors", "index") colorPreviewStyle(highlighted, optionColors, index) { @@ -48,7 +48,7 @@ export default Component.extend({ : optionColors[index]; return htmlSafe(`background: ${color};`); - }, + } @action onHover(active) { @@ -57,5 +57,5 @@ export default Component.extend({ } else { this.onMouseOut(); } - }, -}); + } +} diff --git a/plugins/poll/assets/javascripts/discourse/controllers/poll-breakdown.js b/plugins/poll/assets/javascripts/discourse/controllers/poll-breakdown.js index 1361dbd5673..ba2e2514e8c 100644 --- a/plugins/poll/assets/javascripts/discourse/controllers/poll-breakdown.js +++ b/plugins/poll/assets/javascripts/discourse/controllers/poll-breakdown.js @@ -1,3 +1,4 @@ +import { inject as service } from "@ember/service"; import Controller from "@ember/controller"; import I18n from "I18n"; import ModalFunctionality from "discourse/mixins/modal-functionality"; @@ -8,20 +9,22 @@ import discourseComputed from "discourse-common/utils/decorators"; import { htmlSafe } from "@ember/template"; import loadScript from "discourse/lib/load-script"; import { popupAjaxError } from "discourse/lib/ajax-error"; -import { inject as service } from "@ember/service"; -export default Controller.extend(ModalFunctionality, { - dialog: service(), - model: null, - charts: null, - groupedBy: null, - highlightedOption: null, - displayMode: "percentage", +export default class PollBreakdownController extends Controller.extend( + ModalFunctionality +) { + @service dialog; + + model = null; + charts = null; + groupedBy = null; + highlightedOption = null; + displayMode = "percentage"; @discourseComputed("model.poll.title", "model.post.topic.title") title(pollTitle, topicTitle) { return pollTitle ? htmlSafe(pollTitle) : topicTitle; - }, + } @discourseComputed("model.groupableUserFields") groupableUserFields(fields) { @@ -34,12 +37,12 @@ export default Controller.extend(ModalFunctionality, { return { id: field, label: transformed.join(" ") }; }); - }, + } @discourseComputed("model.poll.options") totalVotes(options) { return options.reduce((sum, option) => sum + option.votes, 0); - }, + } onShow() { this.set("charts", null); @@ -51,7 +54,7 @@ export default Controller.extend(ModalFunctionality, { .then(() => { this.fetchGroupedPollData(); }); - }, + } fetchGroupedPollData() { return ajax("/polls/grouped_poll_results.json", { @@ -75,16 +78,16 @@ export default Controller.extend(ModalFunctionality, { this.set("charts", result.grouped_results); }); - }, + } @action setGrouping(value) { this.set("groupedBy", value); this.fetchGroupedPollData(); - }, + } @action onSelectPanel(panel) { this.set("displayMode", panel.id); - }, -}); + } +} diff --git a/plugins/poll/assets/javascripts/discourse/controllers/poll-ui-builder.js b/plugins/poll/assets/javascripts/discourse/controllers/poll-ui-builder.js index ad199be1a3f..d6e5ad0079b 100644 --- a/plugins/poll/assets/javascripts/discourse/controllers/poll-ui-builder.js +++ b/plugins/poll/assets/javascripts/discourse/controllers/poll-ui-builder.js @@ -1,6 +1,6 @@ +import { gt, or } from "@ember/object/computed"; import Controller from "@ember/controller"; import EmberObject, { action } from "@ember/object"; -import { gt, or } from "@ember/object/computed"; import { next } from "@ember/runloop"; import discourseComputed, { observes } from "discourse-common/utils/decorators"; import ModalFunctionality from "discourse/mixins/modal-functionality"; @@ -18,21 +18,25 @@ const VOTE_POLL_RESULT = "on_vote"; const CLOSED_POLL_RESULT = "on_close"; const STAFF_POLL_RESULT = "staff_only"; -export default Controller.extend(ModalFunctionality, { - showAdvanced: false, +export default class PollUiBuilderController extends Controller.extend( + ModalFunctionality +) { + showAdvanced = false; + pollType = REGULAR_POLL_TYPE; + pollTitle = ""; + pollOptions = null; + pollOptionsText = null; + pollMin = 1; + pollMax = 2; + pollStep = 1; + pollGroups = null; + pollAutoClose = null; + pollResult = ALWAYS_POLL_RESULT; + chartType = BAR_CHART_TYPE; + publicPoll = null; - pollType: REGULAR_POLL_TYPE, - pollTitle: "", - pollOptions: null, - pollOptionsText: null, - pollMin: 1, - pollMax: 2, - pollStep: 1, - pollGroups: null, - pollAutoClose: null, - pollResult: ALWAYS_POLL_RESULT, - chartType: BAR_CHART_TYPE, - publicPoll: null, + @or("showAdvanced", "isNumber") showNumber; + @gt("pollOptions.length", 1) canRemoveOption; onShow() { this.setProperties({ @@ -50,7 +54,7 @@ export default Controller.extend(ModalFunctionality, { chartType: BAR_CHART_TYPE, publicPoll: false, }); - }, + } @discourseComputed pollResults() { @@ -77,43 +81,39 @@ export default Controller.extend(ModalFunctionality, { } return options; - }, + } @discourseComputed("pollType") isRegular(pollType) { return pollType === REGULAR_POLL_TYPE; - }, + } @discourseComputed("pollType") isNumber(pollType) { return pollType === NUMBER_POLL_TYPE; - }, + } @discourseComputed("pollType") isMultiple(pollType) { return pollType === MULTIPLE_POLL_TYPE; - }, - - showNumber: or("showAdvanced", "isNumber"), + } @discourseComputed("pollOptions.@each.value") pollOptionsCount(pollOptions) { return (pollOptions || []).filter((option) => option.value.length > 0) .length; - }, + } @discourseComputed("site.groups") siteGroups(groups) { // prevents group "everyone" to be listed return groups.filter((g) => g.id !== 0); - }, + } @discourseComputed("chartType", "pollType") isPie(chartType, pollType) { return pollType !== NUMBER_POLL_TYPE && chartType === PIE_CHART_TYPE; - }, - - canRemoveOption: gt("pollOptions.length", 1), + } @observes("pollType", "pollOptionsCount") _setPollMinMax() { @@ -136,7 +136,7 @@ export default Controller.extend(ModalFunctionality, { } else if (this.isNumber) { this.set("pollMax", this.siteSettings.poll_maximum_options); } - }, + } @discourseComputed( "pollType", @@ -225,7 +225,7 @@ export default Controller.extend(ModalFunctionality, { output += "[/poll]\n"; return output; - }, + } @discourseComputed("isNumber", "pollOptionsCount") minNumOfOptionsValidation(isNumber, pollOptionsCount) { @@ -250,12 +250,12 @@ export default Controller.extend(ModalFunctionality, { } return EmberObject.create(options); - }, + } @discourseComputed("pollOptions.@each.value") showMinNumOfOptionsValidation(pollOptions) { return pollOptions.length !== 1 || pollOptions[0].value !== ""; - }, + } @discourseComputed( "isMultiple", @@ -326,19 +326,19 @@ export default Controller.extend(ModalFunctionality, { } return EmberObject.create({ ok: true }); - }, + } @discourseComputed("minMaxValueValidation", "minNumOfOptionsValidation") disableInsert(minMaxValueValidation, minNumOfOptionsValidation) { return !minMaxValueValidation.ok || !minNumOfOptionsValidation.ok; - }, + } _comboboxOptions(startIndex, endIndex) { return [...Array(endIndex - startIndex).keys()].map((number) => ({ value: number + startIndex, name: number + startIndex, })); - }, + } @action onOptionsTextChange(e) { @@ -349,13 +349,13 @@ export default Controller.extend(ModalFunctionality, { .split("\n") .map((value) => EmberObject.create({ idx: idx++, value })) ); - }, + } @action insertPoll() { this.toolbarEvent.addText(this.pollOutput); this.send("closeModal"); - }, + } @action toggleAdvanced() { @@ -366,7 +366,7 @@ export default Controller.extend(ModalFunctionality, { this.pollOptions.map((x) => x.value).join("\n") ); } - }, + } @action addOption(beforeOption, value, e) { @@ -392,16 +392,16 @@ export default Controller.extend(ModalFunctionality, { if (e) { e.preventDefault(); } - }, + } @action removeOption(option) { this.pollOptions.removeObject(option); - }, + } @action updatePollType(pollType, event) { event?.preventDefault(); this.set("pollType", pollType); - }, -}); + } +}