mirror of
https://github.com/discourse/discourse.git
synced 2024-12-06 00:04:17 +08:00
8632ea5a63
This commit changes the custom flags admin config area to use the AdminPageHeader component and conforms to the new admin UI guidelines. Also makes some slight modifications to the reusable components to handle using a @route for an action button.
196 lines
5.7 KiB
Plaintext
196 lines
5.7 KiB
Plaintext
import Component from "@glimmer/component";
|
|
import { cached } from "@glimmer/tracking";
|
|
import { hash } from "@ember/helper";
|
|
import { action } from "@ember/object";
|
|
import { service } from "@ember/service";
|
|
import BackButton from "discourse/components/back-button";
|
|
import Form from "discourse/components/form";
|
|
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 I18n from "discourse-i18n";
|
|
import AdminConfigAreaCard from "admin/components/admin-config-area-card";
|
|
import MultiSelect from "select-kit/components/multi-select";
|
|
|
|
export default class AdminFlagsForm extends Component {
|
|
@service router;
|
|
@service site;
|
|
|
|
get isUpdate() {
|
|
return this.args.flag;
|
|
}
|
|
|
|
@cached
|
|
get formData() {
|
|
if (this.isUpdate) {
|
|
return {
|
|
name: this.args.flag.name,
|
|
description: this.args.flag.description,
|
|
appliesTo: this.args.flag.applies_to,
|
|
requireMessage: this.args.flag.require_message,
|
|
enabled: this.args.flag.enabled,
|
|
};
|
|
} else {
|
|
return {
|
|
enabled: true,
|
|
requireMessage: false,
|
|
};
|
|
}
|
|
}
|
|
|
|
get header() {
|
|
return this.isUpdate
|
|
? "admin.config_areas.flags.form.edit_header"
|
|
: "admin.config_areas.flags.form.add_header";
|
|
}
|
|
|
|
get appliesToValues() {
|
|
return this.site.valid_flag_applies_to_types.map((type) => {
|
|
return {
|
|
name: I18n.t(
|
|
`admin.config_areas.flags.form.${type
|
|
.toLowerCase()
|
|
.replace("::", "_")}`
|
|
),
|
|
id: type,
|
|
};
|
|
});
|
|
}
|
|
|
|
validateAppliesTo(name, value, { addError }) {
|
|
if (value && value.length === 0) {
|
|
addError("appliesTo", {
|
|
title: i18n("admin.config_areas.flags.form.applies_to"),
|
|
message: i18n("admin.config_areas.flags.form.invalid_applies_to"),
|
|
});
|
|
}
|
|
}
|
|
|
|
@action
|
|
save({ name, description, appliesTo, requireMessage, enabled }) {
|
|
const createOrUpdate = this.isUpdate ? this.update : this.create;
|
|
const data = {
|
|
name,
|
|
description,
|
|
enabled,
|
|
applies_to: appliesTo,
|
|
require_message: requireMessage,
|
|
};
|
|
createOrUpdate(data);
|
|
}
|
|
|
|
@bind
|
|
async create(data) {
|
|
try {
|
|
const response = await ajax("/admin/config/flags", {
|
|
type: "POST",
|
|
data,
|
|
});
|
|
this.site.flagTypes.push(response.flag);
|
|
this.router.transitionTo("adminConfig.flags");
|
|
} catch (error) {
|
|
popupAjaxError(error);
|
|
}
|
|
}
|
|
|
|
@bind
|
|
async update(data) {
|
|
try {
|
|
const response = await ajax(`/admin/config/flags/${this.args.flag.id}`, {
|
|
type: "PUT",
|
|
data,
|
|
});
|
|
|
|
this.args.flag.name = response.flag.name;
|
|
this.args.flag.description = response.flag.description;
|
|
this.args.flag.applies_to = response.flag.applies_to;
|
|
this.args.flag.require_message = response.flag.require_message;
|
|
this.args.flag.enabled = response.flag.enabled;
|
|
this.router.transitionTo("adminConfig.flags");
|
|
} catch (error) {
|
|
popupAjaxError(error);
|
|
}
|
|
}
|
|
|
|
<template>
|
|
<div class="admin-config-area">
|
|
<BackButton
|
|
@route="adminConfig.flags"
|
|
@label="admin.config_areas.flags.back"
|
|
/>
|
|
<div class="admin-config-area__primary-content admin-flag-form">
|
|
<AdminConfigAreaCard @heading={{this.header}}>
|
|
<Form @onSubmit={{this.save}} @data={{this.formData}} as |form|>
|
|
<form.Field
|
|
@name="name"
|
|
@title={{i18n "admin.config_areas.flags.form.name"}}
|
|
@validation="required|length:3,200"
|
|
@format="large"
|
|
as |field|
|
|
>
|
|
<field.Input />
|
|
</form.Field>
|
|
|
|
<form.Field
|
|
@name="description"
|
|
@title={{i18n "admin.config_areas.flags.form.description"}}
|
|
@validation="length:0,1000"
|
|
as |field|
|
|
>
|
|
<field.Textarea @height={{60}} />
|
|
</form.Field>
|
|
|
|
<form.Field
|
|
@name="appliesTo"
|
|
@title={{i18n "admin.config_areas.flags.form.applies_to"}}
|
|
@validation="required"
|
|
@validate={{this.validateAppliesTo}}
|
|
as |field|
|
|
>
|
|
<field.Custom>
|
|
<MultiSelect
|
|
@id={{field.id}}
|
|
@value={{field.value}}
|
|
@onChange={{field.set}}
|
|
@content={{this.appliesToValues}}
|
|
@options={{hash allowAny=false}}
|
|
class="admin-flag-form__applies-to"
|
|
/>
|
|
</field.Custom>
|
|
</form.Field>
|
|
|
|
<form.CheckboxGroup as |checkboxGroup|>
|
|
<checkboxGroup.Field
|
|
@name="requireMessage"
|
|
@title={{i18n "admin.config_areas.flags.form.require_message"}}
|
|
as |field|
|
|
>
|
|
<field.Checkbox>
|
|
{{i18n
|
|
"admin.config_areas.flags.form.require_message_description"
|
|
}}
|
|
</field.Checkbox>
|
|
</checkboxGroup.Field>
|
|
|
|
<checkboxGroup.Field
|
|
@name="enabled"
|
|
@title={{i18n "admin.config_areas.flags.form.enabled"}}
|
|
as |field|
|
|
>
|
|
<field.Checkbox />
|
|
</checkboxGroup.Field>
|
|
</form.CheckboxGroup>
|
|
|
|
<form.Alert @icon="info-circle">
|
|
{{i18n "admin.config_areas.flags.form.alert"}}
|
|
</form.Alert>
|
|
|
|
<form.Submit @label="admin.config_areas.flags.form.save" />
|
|
</Form>
|
|
</AdminConfigAreaCard>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
}
|