diff --git a/app/assets/javascripts/admin/controllers/admin-emojis.js b/app/assets/javascripts/admin/controllers/admin-emojis.js index 6a1d295759c..1a496707032 100644 --- a/app/assets/javascripts/admin/controllers/admin-emojis.js +++ b/app/assets/javascripts/admin/controllers/admin-emojis.js @@ -1,37 +1,74 @@ import { sort } from "@ember/object/computed"; -import EmberObject from "@ember/object"; +import EmberObject, { action, computed } from "@ember/object"; import Controller from "@ember/controller"; import { ajax } from "discourse/lib/ajax"; + +const ALL_FILTER = "all"; + export default Controller.extend({ - sortedEmojis: sort("model", "emojiSorting"), + filter: null, + sorting: null, init() { this._super(...arguments); - this.emojiSorting = ["name"]; + this.setProperties({ + filter: ALL_FILTER, + sorting: ["group", "name"] + }); }, - actions: { - emojiUploaded(emoji) { - emoji.url += "?t=" + new Date().getTime(); - this.model.pushObject(EmberObject.create(emoji)); - }, + sortedEmojis: sort("filteredEmojis.[]", "sorting"), - destroy(emoji) { - return bootbox.confirm( - I18n.t("admin.emoji.delete_confirm", { name: emoji.get("name") }), - I18n.t("no_value"), - I18n.t("yes_value"), - destroy => { - if (destroy) { - return ajax("/admin/customize/emojis/" + emoji.get("name"), { - type: "DELETE" - }).then(() => { - this.model.removeObject(emoji); - }); - } - } - ); + emojiGroups: computed("model", { + get() { + return this.model.mapBy("group").uniq(); } + }), + + sortingGroups: computed("emojiGroups.[]", { + get() { + return [ALL_FILTER].concat(this.emojiGroups); + } + }), + + filteredEmojis: computed("model.[]", "filter", { + get() { + if (!this.filter || this.filter === ALL_FILTER) { + return this.model; + } else { + return this.model.filterBy("group", this.filter); + } + } + }), + + @action + filterGroups(value) { + this.set("filter", value); + }, + + @action + emojiUploaded(emoji, group) { + emoji.url += "?t=" + new Date().getTime(); + emoji.group = group; + this.model.pushObject(EmberObject.create(emoji)); + }, + + @action + destroyEmoji(emoji) { + return bootbox.confirm( + I18n.t("admin.emoji.delete_confirm", { name: emoji.get("name") }), + I18n.t("no_value"), + I18n.t("yes_value"), + destroy => { + if (destroy) { + return ajax("/admin/customize/emojis/" + emoji.get("name"), { + type: "DELETE" + }).then(() => { + this.model.removeObject(emoji); + }); + } + } + ); } }); diff --git a/app/assets/javascripts/admin/templates/emojis.hbs b/app/assets/javascripts/admin/templates/emojis.hbs index 5f9de8104ca..f2547b96780 100644 --- a/app/assets/javascripts/admin/templates/emojis.hbs +++ b/app/assets/javascripts/admin/templates/emojis.hbs @@ -1,35 +1,49 @@ -
{{i18n 'admin.emoji.help'}}
+{{i18n "admin.emoji.help"}}
-{{emoji-uploader done=(action "emojiUploaded")}}
+ {{emoji-uploader + emojiGroups=emojiGroups + done=(action "emojiUploaded") + }} + +{{i18n "admin.emoji.image"}} | +{{i18n "admin.emoji.name"}} | ++ {{combo-box + value=filter + content=sortingGroups + nameProperty=null + valueProperty=null + onChange=(action "filterGroups") + }} + | ++ | |||
---|---|---|---|---|---|---|
{{i18n "admin.emoji.image"}} | -{{i18n "admin.emoji.name"}} | -+ | :{{e.name}}: | +{{e.group}} | ++ {{d-button + action=(action "destroyEmoji" e) + class="btn-danger" + icon="far-trash-alt" + }} + | |
:{{e.name}}: | -- {{d-button - action=(action "destroy" e) - class="btn-danger pull-right" - icon="far-trash-alt"}} - | -