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:
Toby Zerner 2015-09-18 13:13:25 +09:30
parent 9544d7dd6a
commit 7bfc3c3d21
2 changed files with 80 additions and 0 deletions

View File

@ -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))

View 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();
}
);
}
}