From 6fff3cc0dca5371ce66466076da41f4bd71030d0 Mon Sep 17 00:00:00 2001
From: Toby Zerner <toby.zerner@gmail.com>
Date: Fri, 18 Sep 2015 13:13:25 +0930
Subject: [PATCH] Add abstract SettingsModal component in admin app

Makes building settings modals (that update basic config values) a
whole lot quicker/easier.
---
 CHANGELOG.md                             |  2 +
 js/admin/src/components/SettingsModal.js | 78 ++++++++++++++++++++++++
 2 files changed, 80 insertions(+)
 create mode 100644 js/admin/src/components/SettingsModal.js

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b1cad4bd0..156a6e0a4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -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))
diff --git a/js/admin/src/components/SettingsModal.js b/js/admin/src/components/SettingsModal.js
new file mode 100644
index 000000000..06c6a6151
--- /dev/null
+++ b/js/admin/src/components/SettingsModal.js
@@ -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();
+      }
+    );
+  }
+}