52 lines
1.3 KiB
JavaScript
52 lines
1.3 KiB
JavaScript
import discourseComputed from "discourse-common/utils/decorators";
|
|
import Component from "@ember/component";
|
|
import { iconHTML } from "discourse-common/lib/icon-library";
|
|
|
|
export default Component.extend({
|
|
tagName: "th",
|
|
classNames: ["sortable"],
|
|
attributeBindings: ["title"],
|
|
labelKey: null,
|
|
chevronIcon: null,
|
|
columnIcon: null,
|
|
|
|
@discourseComputed("field", "labelKey")
|
|
title(field, labelKey) {
|
|
if (!labelKey) {
|
|
labelKey = `directory.${this.field}`;
|
|
}
|
|
|
|
return I18n.t(labelKey + "_long", { defaultValue: I18n.t(labelKey) });
|
|
},
|
|
|
|
toggleProperties() {
|
|
if (this.order === this.field) {
|
|
this.set("asc", this.asc ? null : true);
|
|
} else {
|
|
this.setProperties({ order: this.field, asc: null });
|
|
}
|
|
},
|
|
toggleChevron() {
|
|
if (this.order === this.field) {
|
|
let chevron = iconHTML(this.asc ? "chevron-up" : "chevron-down");
|
|
this.set("chevronIcon", `${chevron}`.htmlSafe());
|
|
} else {
|
|
this.set("chevronIcon", null);
|
|
}
|
|
},
|
|
click() {
|
|
this.toggleProperties();
|
|
},
|
|
didReceiveAttrs() {
|
|
this._super(...arguments);
|
|
this.toggleChevron();
|
|
},
|
|
init() {
|
|
this._super(...arguments);
|
|
if (this.icon) {
|
|
let columnIcon = iconHTML(this.icon);
|
|
this.set("columnIcon", `${columnIcon}`.htmlSafe());
|
|
}
|
|
}
|
|
});
|