diff --git a/app/assets/javascripts/admin/addon/components/admin-flag-item.gjs b/app/assets/javascripts/admin/addon/components/admin-flag-item.gjs index 09a1f639b8e..1db3093d63e 100644 --- a/app/assets/javascripts/admin/addon/components/admin-flag-item.gjs +++ b/app/assets/javascripts/admin/addon/components/admin-flag-item.gjs @@ -4,13 +4,22 @@ import { fn } from "@ember/helper"; import { on } from "@ember/modifier"; import { action } from "@ember/object"; import { htmlSafe } from "@ember/template"; +import DButton from "discourse/components/d-button"; import DToggleSwitch from "discourse/components/d-toggle-switch"; +import DropdownMenu from "discourse/components/dropdown-menu"; import { ajax } from "discourse/lib/ajax"; import { popupAjaxError } from "discourse/lib/ajax-error"; +import { SYSTEM_FLAG_IDS } from "discourse/lib/constants"; +import i18n from "discourse-common/helpers/i18n"; +import DMenu from "float-kit/components/d-menu"; export default class AdminFlagItem extends Component { @tracked enabled = this.args.flag.enabled; + get canMove() { + return this.args.flag.id !== SYSTEM_FLAG_IDS.notify_user; + } + @action toggleFlagEnabled(flag) { this.enabled = !this.enabled; @@ -23,8 +32,25 @@ export default class AdminFlagItem extends Component { }); } + @action + onRegisterApi(api) { + this.dMenu = api; + } + + @action + moveUp() { + this.args.moveFlagCallback(this.args.flag, "up"); + this.dMenu.close(); + } + + @action + moveDown() { + this.args.moveFlagCallback(this.args.flag, "down"); + this.dMenu.close(); + } + diff --git a/app/assets/javascripts/admin/addon/components/admin-flags.gjs b/app/assets/javascripts/admin/addon/components/admin-flags.gjs index 226eaf9aae9..b6f5c130d93 100644 --- a/app/assets/javascripts/admin/addon/components/admin-flags.gjs +++ b/app/assets/javascripts/admin/addon/components/admin-flags.gjs @@ -1,11 +1,50 @@ import Component from "@glimmer/component"; +import { tracked } from "@glimmer/tracking"; +import { action } from "@ember/object"; import { inject as service } from "@ember/service"; +import { ajax } from "discourse/lib/ajax"; +import { popupAjaxError } from "discourse/lib/ajax-error"; import i18n from "discourse-common/helpers/i18n"; +import { bind } from "discourse-common/utils/decorators"; import AdminFlagItem from "admin/components/admin-flag-item"; export default class AdminFlags extends Component { @service site; - flags = this.site.flagTypes; + @tracked flags = this.site.flagTypes; + + @bind + isFirstFlag(flag) { + return this.flags.indexOf(flag) === 1; + } + + @bind + isLastFlag(flag) { + return this.flags.indexOf(flag) === this.flags.length - 1; + } + + @action + moveFlagCallback(flag, direction) { + const fallbackFlags = [...this.flags]; + + const flags = this.flags; + + const flagIndex = flags.indexOf(flag); + const targetFlagIndex = direction === "up" ? flagIndex - 1 : flagIndex + 1; + + const targetFlag = flags[targetFlagIndex]; + + flags[flagIndex] = targetFlag; + flags[targetFlagIndex] = flag; + + this.flags = flags; + + return ajax(`/admin/config/flags/${flag.id}/reorder/${direction}`, { + type: "PUT", + }).catch((error) => { + this.flags = fallbackFlags; + return popupAjaxError(error); + }); + }