Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

DEV: Update poll components and controllers to native class syntax 

Conversion performed using the ember-native-class-codemod
This commit is contained in:
David Taylor 2023-06-16 17:49:38 +01:00
parent aebe6625d2
commit 4b9d50c98a
4 changed files with 106 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
plugins/poll/assets/javascripts/discourse/components/poll-breakdown-chart.js
View File

@ -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();
},
});
}
}

40
plugins/poll/assets/javascripts/discourse/components/poll-breakdown-option.js
View File

@ -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();
}
},
});
}
}

35
plugins/poll/assets/javascripts/discourse/controllers/poll-breakdown.js
View File

@ -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);
},
});
}
}

82
plugins/poll/assets/javascripts/discourse/controllers/poll-ui-builder.js
View File

@ -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);
},
});
}
}