mirror of
https://github.com/flarum/framework.git
synced 2024-12-05 09:03:36 +08:00
Add abstract SettingsModal component in admin app
Makes building settings modals (that update basic config values) a whole lot quicker/easier.
This commit is contained in:
parent
9544d7dd6a
commit
7bfc3c3d21
|
@ -8,6 +8,8 @@ This project adheres to [Semantic Versioning](http://semver.org/).
|
|||
- API to set asset compiler filename.
|
||||
- Migration generator, available via generate:migration console command.
|
||||
- Tags: Ability to set the tags page as the home page.
|
||||
- `bidi` attribute for Mithril elements as a shortcut to set up bidirectional bindings.
|
||||
- Abstract SettingsModal component for quickly building admin config modals.
|
||||
|
||||
### Changed
|
||||
- Migrations must be namespaced under `Flarum\Migrations\{Core|ExtensionName}`. ([#422](https://github.com/flarum/core/issues/422))
|
||||
|
|
78
framework/core/js/admin/src/components/SettingsModal.js
Normal file
78
framework/core/js/admin/src/components/SettingsModal.js
Normal file
|
@ -0,0 +1,78 @@
|
|||
import Modal from 'flarum/components/Modal';
|
||||
import Button from 'flarum/components/Button';
|
||||
import saveConfig from 'flarum/utils/saveConfig';
|
||||
|
||||
export default class SettingsModal extends Modal {
|
||||
init() {
|
||||
this.settings = {};
|
||||
this.loading = false;
|
||||
}
|
||||
|
||||
form() {
|
||||
return '';
|
||||
}
|
||||
|
||||
content() {
|
||||
return (
|
||||
<div className="Modal-body">
|
||||
<div className="Form">
|
||||
{this.form()}
|
||||
|
||||
<div className="Form-group">
|
||||
{this.submitButton()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
submitButton() {
|
||||
return (
|
||||
<Button
|
||||
type="submit"
|
||||
className="Button Button--primary"
|
||||
loading={this.loading}
|
||||
disabled={!this.changed()}>
|
||||
Save Changes
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
setting(key, fallback = '') {
|
||||
this.settings[key] = this.settings[key] || m.prop(app.config[key] || fallback);
|
||||
|
||||
return this.settings[key];
|
||||
}
|
||||
|
||||
dirty() {
|
||||
const dirty = {};
|
||||
|
||||
Object.keys(this.settings).forEach(key => {
|
||||
const value = this.settings[key]();
|
||||
|
||||
if (value !== app.config[key]) {
|
||||
dirty[key] = value;
|
||||
}
|
||||
});
|
||||
|
||||
return dirty;
|
||||
}
|
||||
|
||||
changed() {
|
||||
return Object.keys(this.dirty()).length;
|
||||
}
|
||||
|
||||
onsubmit(e) {
|
||||
e.preventDefault();
|
||||
|
||||
this.loading = true;
|
||||
|
||||
saveConfig(this.dirty()).then(
|
||||
() => this.hide(),
|
||||
() => {
|
||||
this.loading = false;
|
||||
m.redraw();
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user