github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-25 18:13:38 +08:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

DEV: Refactor Discourse models based field components to reduce duplication (#26452)

Browse Source 
Why this change?

The field components to select categories, groups and tags had quite a
bit of logic duplicated between them. This commit refactors the logic
to remove most of the duplication so that we can introduce changes
without having to make the changes in multiple places.
This commit is contained in:
Alan Guo Xiang Tan 2024-04-02 09:32:50 +08:00 committed by GitHub
parent 3520f4a635
commit 397a1b7366
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 55 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
app/assets/javascripts/admin/addon/components/schema-theme-setting/types/categories.gjs
View File

@ -1,45 +1,21 @@
import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";
import { hash } from "@ember/helper";
import { action } from "@ember/object";
import { and, not } from "truth-helpers";
import I18n from "discourse-i18n";
import FieldInputDescription from "admin/components/schema-theme-setting/field-input-description";
import SchemaThemeSettingTypeModels from "admin/components/schema-theme-setting/types/models";
import CategorySelector from "select-kit/components/category-selector";
export default class SchemaThemeSettingTypeCategories extends Component {
@tracked touched = false;
export default class SchemaThemeSettingTypeCategories extends SchemaThemeSettingTypeModels {
@tracked
value =
this.args.value?.map((categoryId) => {
return this.args.setting.metadata.categories[categoryId];
}) || [];
required = this.args.spec.required;
min = this.args.spec.validations?.min;
max = this.args.spec.validations?.max;
type = "categories";
@action
onInput(categories) {
this.touched = true;
this.value = categories;
this.args.onChange(categories.map((category) => category.id));
}
get validationErrorMessage() {
if (!this.touched) {
return;
}
if (
(this.min && this.value.length < this.min) ||
(this.required && (!this.value || this.value.length === 0))
) {
return I18n.t("admin.customize.theme.schema.fields.categories.at_least", {
count: this.min || 1,
});
}
onChange(categories) {
return categories.mapBy("id");
}
<template>

35
app/assets/javascripts/admin/addon/components/schema-theme-setting/types/groups.gjs
View File

@ -1,42 +1,13 @@
import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";
import { action } from "@ember/object";
import { service } from "@ember/service";
import { and, not } from "truth-helpers";
import I18n from "discourse-i18n";
import FieldInputDescription from "admin/components/schema-theme-setting/field-input-description";
import SchemaThemeSettingTypeModels from "admin/components/schema-theme-setting/types/models";
import GroupChooser from "select-kit/components/group-chooser";
export default class SchemaThemeSettingTypeGroups extends Component {
export default class SchemaThemeSettingTypeGroups extends SchemaThemeSettingTypeModels {
@service site;
@tracked touched = false;
@tracked value = this.args.value;
required = this.args.spec.required;
min = this.args.spec.validations?.min;
max = this.args.spec.validations?.max;
@action
onInput(newVal) {
this.touched = true;
this.value = newVal;
this.args.onChange(newVal);
}
get validationErrorMessage() {
if (!this.touched) {
return;
}
if (
(this.min && this.value.length < this.min) ||
(this.required && (!this.value || this.value.length === 0))
) {
return I18n.t("admin.customize.theme.schema.fields.groups.at_least", {
count: this.min || 1,
});
}
}
type = "groups";
get groupChooserOptions() {
return {

44
app/assets/javascripts/admin/addon/components/schema-theme-setting/types/models.gjs Normal file
View File

@ -0,0 +1,44 @@
import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";
import { action } from "@ember/object";
import { isBlank } from "@ember/utils";
import I18n from "discourse-i18n";
export default class SchemaThemeSettingTypeModels extends Component {
@tracked touched = false;
@tracked value = this.args.value;
required = this.args.spec.required;
min = this.args.spec.validations?.min;
max = this.args.spec.validations?.max;
type;
@action
onInput(newValue) {
this.touched = true;
this.value = newValue;
this.args.onChange(this.onChange(newValue));
}
onChange(newValue) {
return newValue;
}
get validationErrorMessage() {
if (!this.touched) {
return;
}
if (
(this.min && this.value.length < this.min) ||
(this.required && isBlank(this.value))
) {
return I18n.t(
`admin.customize.theme.schema.fields.${this.type}.at_least`,
{
count: this.min || 1,
}
);
}
}
}

35
app/assets/javascripts/admin/addon/components/schema-theme-setting/types/tags.gjs
View File

@ -1,24 +1,10 @@
import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";
import { action } from "@ember/object";
import { and, not } from "truth-helpers";
import I18n from "discourse-i18n";
import FieldInputDescription from "admin/components/schema-theme-setting/field-input-description";
import SchemaThemeSettingTypeModels from "admin/components/schema-theme-setting/types/models";
import TagChooser from "select-kit/components/tag-chooser";
export default class SchemaThemeSettingTypeTags extends Component {
@tracked touched = false;
@tracked value = this.args.value;
required = this.args.spec.required;
min = this.args.spec.validations?.min;
max = this.args.spec.validations?.max;
@action
onInput(newVal) {
this.touched = true;
this.value = newVal;
this.args.onChange(newVal);
}
export default class SchemaThemeSettingTypeTags extends SchemaThemeSettingTypeModels {
type = "tags";
get tagChooserOption() {
return {
@ -27,21 +13,6 @@ export default class SchemaThemeSettingTypeTags extends Component {
};
}
get validationErrorMessage() {
if (!this.touched) {
return;
}
if (
(this.min && this.value.length < this.min) ||
(this.required && (!this.value || this.value.length === 0))
) {
return I18n.t("admin.customize.theme.schema.fields.tags.at_least", {
count: this.min || 1,
});
}
}
<template>
<TagChooser
@tags={{this.value}}