github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-01-16 06:32:42 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

DEV: Round 1 converting admin site setting components to gjs (#30526)

Browse Source 
Converts the following site setting components:

* Bool
* Category
* Colors
* Category
* CompactList
* EmojiList
This commit is contained in:
Martin Brennan 2025-01-03 11:34:28 +10:00 committed by GitHub
parent 8d5c4ecc33
commit 4aa7a89371
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
14 changed files with 121 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
app/assets/javascripts/admin/addon/components/site-settings/bool.gjs Normal file
View File

@ -0,0 +1,33 @@
import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";
import { on } from "@ember/modifier";
import { action } from "@ember/object";
import { htmlSafe } from "@ember/template";
import { isEmpty } from "@ember/utils";
export default class Bool extends Component {
@tracked
enabled = isEmpty(this.args.value)
? false
: this.args.value.toString() === "true";
@action
onToggle(event) {
if (event.target.checked) {
this.args.changeValueCallback("true");
} else {
this.args.changeValueCallback("false");
}
}
<template>
<label class="checkbox-label">
<input
{{on "input" this.onToggle}}
type="checkbox"
checked={{this.enabled}}
/>
<span>{{htmlSafe @setting.description}}</span>
</label>
</template>
}

4
app/assets/javascripts/admin/addon/components/site-settings/bool.hbs
View File

@ -1,4 +0,0 @@
<label class="checkbox-label">
<Input @type="checkbox" @checked={{this.enabled}} />
<span>{{html-safe this.setting.description}}</span>
</label>

17
app/assets/javascripts/admin/addon/components/site-settings/bool.js
View File

@ -1,17 +0,0 @@
import Component from "@ember/component";
import { computed } from "@ember/object";
import { isEmpty } from "@ember/utils";
export default class Bool extends Component {
@computed("value")
get enabled() {
if (isEmpty(this.value)) {
return false;
}
return this.value.toString() === "true";
}
set enabled(value) {
this.set("value", value ? "true" : "false");
}
}

13
app/assets/javascripts/admin/addon/components/site-settings/category.gjs Normal file
View File

@ -0,0 +1,13 @@
import { hash } from "@ember/helper";
import { eq } from "truth-helpers";
import CategoryChooser from "select-kit/components/category-chooser";
const Category = <template>
<CategoryChooser
@value={{@value}}
@onChange={{@changeValueCallback}}
@options={{hash allowUncategorized=true none=(eq @setting.default "")}}
/>
</template>;
export default Category;

5
app/assets/javascripts/admin/addon/components/site-settings/category.hbs
View File

@ -1,5 +0,0 @@
<CategoryChooser
@value={{this.value}}
@onChange={{fn (mut this.value)}}
@options={{hash allowUncategorized=true none=(eq this.setting.default "")}}
/>

3
app/assets/javascripts/admin/addon/components/site-settings/category.js
View File

@ -1,3 +0,0 @@
import Component from "@ember/component";
export default class Category extends Component {}

20
app/assets/javascripts/admin/addon/components/site-settings/color.js → app/assets/javascripts/admin/addon/components/site-settings/color.gjs
View File

@ -1,5 +1,5 @@
import Component from "@ember/component";
import { action, computed } from "@ember/object";
import Component from "@glimmer/component";
import ColorInput from "admin/components/color-input";
function RGBToHex(rgb) {
// Choose correct separator
@ -25,9 +25,8 @@ function RGBToHex(rgb) {
}
export default class Color extends Component {
@computed("value")
get valid() {
let value = this.value.toLowerCase();
let value = this.args.value.toLowerCase();
let testColor = new Option().style;
testColor.color = value;
@ -46,8 +45,13 @@ export default class Color extends Component {
return testColor.color && hexifiedColor === value;
}
@action
onChangeColor(color) {
this.set("value", color);
}
<template>
<ColorInput
@hexValue={{readonly @value}}
@valid={{@valid}}
@onlyHex={{false}}
@styleSelection={{false}}
@onChangeColor={{@changeValueCallback}}
/>
</template>
}

7
app/assets/javascripts/admin/addon/components/site-settings/color.hbs
View File

@ -1,7 +0,0 @@
<ColorInput
@hexValue={{readonly this.value}}
@valid={{this.valid}}
@onlyHex={{false}}
@styleSelection={{false}}
@onChangeColor={{this.onChangeColor}}
/>

52
app/assets/javascripts/admin/addon/components/site-settings/compact-list.gjs Normal file
View File

@ -0,0 +1,52 @@
import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";
import { hash } from "@ember/helper";
import { action } from "@ember/object";
import { makeArray } from "discourse-common/lib/helpers";
import ListSetting from "select-kit/components/list-setting";
export default class CompactList extends Component {
@tracked createdChoices = null;
tokenSeparator = "|";
get settingValue() {
return this.args.value
.toString()
.split(this.tokenSeparator)
.filter(Boolean);
}
get settingChoices() {
return [
...new Set([
...makeArray(this.settingValue),
...makeArray(this.args.setting.choices),
...makeArray(this.createdChoices),
]),
];
}
@action
onChangeListSetting(value) {
this.args.changeValueCallback(value.join(this.tokenSeparator));
}
@action
onChangeChoices(choices) {
this.createdChoices = [
...new Set([...makeArray(this.createdChoices), ...makeArray(choices)]),
];
}
<template>
<ListSetting
@value={{this.settingValue}}
@settingName={{@setting.setting}}
@choices={{this.settingChoices}}
@onChange={{this.onChangeListSetting}}
@onChangeChoices={{this.onChangeChoices}}
@options={{hash allowAny=@allowAny}}
@mandatoryValues={{@setting.mandatory_values}}
/>
</template>
}

9
app/assets/javascripts/admin/addon/components/site-settings/compact-list.hbs
View File

@ -1,9 +0,0 @@
<ListSetting
@value={{this.settingValue}}
@settingName={{this.setting.setting}}
@choices={{this.settingChoices}}
@onChange={{this.onChangeListSetting}}
@onChangeChoices={{this.onChangeChoices}}
@options={{hash allowAny=this.allowAny}}
@mandatoryValues={{this.setting.mandatory_values}}
/>

36
app/assets/javascripts/admin/addon/components/site-settings/compact-list.js
View File

@ -1,36 +0,0 @@
import Component from "@ember/component";
import { action, computed } from "@ember/object";
import { makeArray } from "discourse-common/lib/helpers";
export default class CompactList extends Component {
tokenSeparator = "|";
createdChoices = null;
@computed("value")
get settingValue() {
return this.value.toString().split(this.tokenSeparator).filter(Boolean);
}
@computed("settingValue", "setting.choices.[]", "createdChoices.[]")
get settingChoices() {
return [
...new Set([
...makeArray(this.settingValue),
...makeArray(this.setting.choices),
...makeArray(this.createdChoices),
]),
];
}
@action
onChangeListSetting(value) {
this.set("value", value.join(this.tokenSeparator));
}
@action
onChangeChoices(choices) {
this.set("createdChoices", [
...new Set([...makeArray(this.createdChoices), ...makeArray(choices)]),
]);
}
}

11
app/assets/javascripts/admin/addon/components/site-settings/emoji-list.gjs Normal file
View File

@ -0,0 +1,11 @@
import EmojiValueList from "admin/components/emoji-value-list";
const EmojiList = <template>
<EmojiValueList
@setting={{@setting}}
@values={{@value}}
@setValidationMessage={{@setValidationMessage}}
/>
</template>;
export default EmojiList;

5
app/assets/javascripts/admin/addon/components/site-settings/emoji-list.hbs
View File

@ -1,5 +0,0 @@
<EmojiValueList
@setting={{this.setting}}
@values={{this.value}}
@setValidationMessage={{this.setValidationMessage}}
/>

3
app/assets/javascripts/admin/addon/components/site-settings/emoji-list.js
View File

@ -1,3 +0,0 @@
import Component from "@ember/component";
export default class EmojiList extends Component {}