discourse/app/assets/javascripts/admin/addon/controllers/admin-site-settings.js
David Taylor e08a0b509d
DEV: Support @debounce decorator in native class syntax (#20521)
The implementation previously generated a descriptor with an `initializer()`, and bound the function to the `this` context of the initializer. In native class syntax, the initializer of a descriptor is only called once, with a `this` context of the constructor, not the instance.

This commit updates the implementation so that it generates the bound function on-demand using a getter. This is the same strategy employed by ember's built-in `@action` decorator.

Unfortunately, this use of a getter means that the `@observes` decorator does not support being directly chained to `@debounce`. It throws the error "`observer must be provided a function or an observer definition`". The workaround is to put the observer on its own function, which then calls the debounced function. Given that we're aiming to reduce our usage of `@observes`, we've accepted the need for this workaround rather than spending the time to patch the implementation of `@observes`.
2023-03-03 11:48:58 +00:00

141 lines
3.8 KiB
JavaScript

import Controller from "@ember/controller";
import I18n from "I18n";
import { INPUT_DELAY } from "discourse-common/config/environment";
import { alias } from "@ember/object/computed";
import { isEmpty } from "@ember/utils";
import { debounce, observes } from "discourse-common/utils/decorators";
import { action } from "@ember/object";
export default Controller.extend({
filter: null,
allSiteSettings: alias("model"),
visibleSiteSettings: null,
onlyOverridden: false,
filterContentNow(category) {
// If we have no content, don't bother filtering anything
if (isEmpty(this.allSiteSettings)) {
return;
}
let filter, pluginFilter;
if (this.filter) {
filter = this.filter
.toLowerCase()
.split(" ")
.filter((word) => {
if (word.length === 0) {
return false;
}
if (word.startsWith("plugin:")) {
pluginFilter = word.slice("plugin:".length).trim();
return false;
}
return true;
})
.join(" ")
.trim();
}
if (
(!filter || 0 === filter.length) &&
(!pluginFilter || 0 === pluginFilter.length) &&
!this.onlyOverridden
) {
this.set("visibleSiteSettings", this.allSiteSettings);
if (this.categoryNameKey === "all_results") {
this.transitionToRoute("adminSiteSettings");
}
return;
}
const all = {
nameKey: "all_results",
name: I18n.t("admin.site_settings.categories.all_results"),
siteSettings: [],
};
const matchesGroupedByCategory = [all];
const matches = [];
this.allSiteSettings.forEach((settingsCategory) => {
const siteSettings = settingsCategory.siteSettings.filter((item) => {
if (this.onlyOverridden && !item.get("overridden")) {
return false;
}
if (pluginFilter && item.plugin !== pluginFilter) {
return false;
}
if (filter) {
const setting = item.get("setting").toLowerCase();
return (
setting.includes(filter) ||
setting.replace(/_/g, " ").includes(filter) ||
item.get("description").toLowerCase().includes(filter) ||
(item.get("value") || "").toString().toLowerCase().includes(filter)
);
} else {
return true;
}
});
if (siteSettings.length > 0) {
matches.pushObjects(siteSettings);
matchesGroupedByCategory.pushObject({
nameKey: settingsCategory.nameKey,
name: I18n.t(
"admin.site_settings.categories." + settingsCategory.nameKey
),
siteSettings,
count: siteSettings.length,
});
}
});
all.siteSettings.pushObjects(matches.slice(0, 30));
all.hasMore = matches.length > 30;
all.count = all.hasMore ? "30+" : matches.length;
const categoryMatches = matchesGroupedByCategory.findBy(
"nameKey",
category
);
if (!categoryMatches || categoryMatches.count === 0) {
category = "all_results";
}
this.set("visibleSiteSettings", matchesGroupedByCategory);
this.transitionToRoute(
"adminSiteSettingsCategory",
category || "all_results"
);
},
@observes("filter", "onlyOverridden", "model")
optsChanged() {
this.filterContent();
},
@debounce(INPUT_DELAY)
filterContent() {
if (this._skipBounce) {
this.set("_skipBounce", false);
} else {
this.filterContentNow(this.categoryNameKey);
}
},
@action
clearFilter() {
this.setProperties({ filter: "", onlyOverridden: false });
},
@action
toggleMenu() {
const adminDetail = document.querySelector(".admin-detail");
["mobile-closed", "mobile-open"].forEach((state) => {
adminDetail.classList.toggle(state);
});
},
});