mirror of
https://github.com/discourse/discourse.git
synced 2024-11-30 11:34:43 +08:00
aa88b07640
Continued work on moderate flags UI. In this PR admins are allowed to change the order of flags. The notify user flag is always on top but all other flags can be moved.
105 lines
3.2 KiB
Plaintext
105 lines
3.2 KiB
Plaintext
import Component from "@glimmer/component";
|
|
import { tracked } from "@glimmer/tracking";
|
|
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;
|
|
|
|
return ajax(`/admin/config/flags/${flag.id}/toggle`, {
|
|
type: "PUT",
|
|
}).catch((error) => {
|
|
this.enabled = !this.enabled;
|
|
return popupAjaxError(error);
|
|
});
|
|
}
|
|
|
|
@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();
|
|
}
|
|
|
|
<template>
|
|
<tr class="admin-flag-item {{@flag.name_key}}">
|
|
<td>
|
|
<p class="admin-flag-item__name">{{@flag.name}}</p>
|
|
<p class="admin-flag-item__description">{{htmlSafe
|
|
@flag.description
|
|
}}</p>
|
|
</td>
|
|
<td>
|
|
<div class="admin-flag-item__options">
|
|
<DToggleSwitch
|
|
@state={{this.enabled}}
|
|
class="admin-flag-item__toggle {{@flag.name_key}}"
|
|
{{on "click" (fn this.toggleFlagEnabled @flag)}}
|
|
/>
|
|
{{#if this.canMove}}
|
|
<DMenu
|
|
@identifier="flag-menu"
|
|
@title={{i18n "admin.flags.more_options.title"}}
|
|
@icon="ellipsis-v"
|
|
@onRegisterApi={{this.onRegisterApi}}
|
|
>
|
|
<:content>
|
|
<DropdownMenu as |dropdown|>
|
|
{{#unless @isFirstFlag}}
|
|
<dropdown.item>
|
|
<DButton
|
|
@label="admin.flags.more_options.move_up"
|
|
@icon="arrow-up"
|
|
@class="btn-transparent move-up"
|
|
@action={{this.moveUp}}
|
|
/>
|
|
</dropdown.item>
|
|
{{/unless}}
|
|
{{#unless @isLastFlag}}
|
|
<dropdown.item>
|
|
<DButton
|
|
@label="admin.flags.more_options.move_down"
|
|
@icon="arrow-down"
|
|
@class="btn-transparent move-down"
|
|
@action={{this.moveDown}}
|
|
/>
|
|
</dropdown.item>
|
|
{{/unless}}
|
|
</DropdownMenu>
|
|
</:content>
|
|
</DMenu>
|
|
{{/if}}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
}
|