From 7f0bfd44b705b4ebdd1c34d68f7f6b749f128968 Mon Sep 17 00:00:00 2001
From: Adan Amarillas <aamarill.engr@gmail.com>
Date: Wed, 23 May 2018 16:38:00 -0700
Subject: [PATCH] Split configuration settings into tabs

---
 .../admin/settings/_banner_images.html.erb    |  24 ++++
 .../admin/settings/_banner_styles.html.erb    |  24 ++++
 .../admin/settings/_configuration.html.erb    |  23 ++++
 .../admin/settings/_feature_flags.html.erb    |  28 +++++
 .../admin/settings/_filter_subnav.html.erb    |  31 +++++
 .../settings/_map_configuration.html.erb      |   8 ++
 app/views/admin/settings/index.html.erb       | 119 +++---------------
 7 files changed, 157 insertions(+), 100 deletions(-)
 create mode 100644 app/views/admin/settings/_banner_images.html.erb
 create mode 100644 app/views/admin/settings/_banner_styles.html.erb
 create mode 100644 app/views/admin/settings/_configuration.html.erb
 create mode 100644 app/views/admin/settings/_feature_flags.html.erb
 create mode 100644 app/views/admin/settings/_filter_subnav.html.erb
 create mode 100644 app/views/admin/settings/_map_configuration.html.erb

diff --git a/app/views/admin/settings/_banner_images.html.erb b/app/views/admin/settings/_banner_images.html.erb
new file mode 100644
index 000000000..dad208e0d
--- /dev/null
+++ b/app/views/admin/settings/_banner_images.html.erb
@@ -0,0 +1,24 @@
+<% if @banner_imgs.present?%>
+  <h2><%= t("admin.settings.index.banner_imgs") %></h2>
+
+  <table>
+    <tbody>
+      <% @banner_imgs.each do |setting| %>
+        <tr>
+          <td>
+            <strong><%= t("settings.#{setting.key}") %></strong>
+          </td>
+
+          <td>
+            <%= form_for(setting, url: admin_setting_path(setting), html: { id: "edit_#{dom_id(setting)}"}) do |f| %>
+              <%= f.text_area :value, label: false, id: dom_id(setting), lines: 1 %>
+              <%= f.submit(t('admin.settings.index.update_setting'), class: "button small success") %>
+            <% end %>
+          </td>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+<% else %>
+  <h3>No banner images to show.</h3>
+<% end %>
diff --git a/app/views/admin/settings/_banner_styles.html.erb b/app/views/admin/settings/_banner_styles.html.erb
new file mode 100644
index 000000000..90d303e45
--- /dev/null
+++ b/app/views/admin/settings/_banner_styles.html.erb
@@ -0,0 +1,24 @@
+<% if @banner_styles.present? %>
+  <h2><%= t("admin.settings.index.banners") %></h2>
+
+  <table>
+    <tbody>
+      <% @banner_styles.each do |setting| %>
+        <tr>
+          <td>
+            <strong><%= t("settings.#{setting.key}") %></strong>
+          </td>
+
+          <td>
+            <%= form_for(setting, url: admin_setting_path(setting), html: { id: "edit_#{dom_id(setting)}"}) do |f| %>
+              <%= f.text_area :value, label: false, id: dom_id(setting), lines: 1 %>
+              <%= f.submit(t('admin.settings.index.update_setting'), class: "button hollow") %>
+            <% end %>
+          </td>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+<% else %>
+  <h3>No banner styles to show.</h3>
+<% end %>
diff --git a/app/views/admin/settings/_configuration.html.erb b/app/views/admin/settings/_configuration.html.erb
new file mode 100644
index 000000000..edadbb604
--- /dev/null
+++ b/app/views/admin/settings/_configuration.html.erb
@@ -0,0 +1,23 @@
+<h2><%= t("admin.settings.index.title") %></h2>
+
+<table>
+  <tbody>
+    <% @settings.each do |setting| %>
+      <tr>
+        <td class="small-12 medium-4">
+          <strong><%= t("settings.#{setting.key}") %></strong>
+        </td>
+        <td class="small-12 medium-8">
+          <%= form_for(setting, url: admin_setting_path(setting), html: { id: "edit_#{dom_id(setting)}"}) do |f| %>
+            <div class="small-12 medium-6 large-9 column">
+              <%= f.text_area :value, label: false, id: dom_id(setting), lines: 1 %>
+            </div>
+            <div class="small-12 medium-6 large-3 column">
+              <%= f.submit(t('admin.settings.index.update_setting'), class: "button hollow expanded") %>
+            </div>
+          <% end %>
+        </td>
+      </tr>
+    <% end %>
+  </tbody>
+</table>
diff --git a/app/views/admin/settings/_feature_flags.html.erb b/app/views/admin/settings/_feature_flags.html.erb
new file mode 100644
index 000000000..89f57e1f7
--- /dev/null
+++ b/app/views/admin/settings/_feature_flags.html.erb
@@ -0,0 +1,28 @@
+
+<h2><%= t("admin.settings.index.feature_flags") %></h2>
+
+<table>
+  <tbody>
+    <% @feature_flags.each do |feature_flag| %>
+      <tr>
+        <td>
+          <strong><%= t("settings.#{feature_flag.key}") %></strong>
+        </td>
+
+        <td>
+          <%= feature_flag.enabled? ? t("admin.settings.index.features.enabled") : t("admin.settings.index.features.disabled") %>
+        </td>
+
+        <td class="text-right">
+          <%= form_for(feature_flag, url: admin_setting_path(feature_flag), html: { id: "edit_#{dom_id(feature_flag)}"}) do |f| %>
+
+            <%= f.hidden_field :value, id: dom_id(feature_flag), value: (feature_flag.enabled? ? "" : "active") %>
+            <%= f.submit(t("admin.settings.index.features.#{feature_flag.enabled? ? 'disable' : 'enable'}"),
+                        class: "button expanded #{feature_flag.enabled? ? 'hollow alert' : 'success'}",
+                        data: {confirm: t("admin.actions.confirm")}) %>
+          <% end %>
+        </td>
+      </tr>
+    <% end %>
+  </tbody>
+</table>
diff --git a/app/views/admin/settings/_filter_subnav.html.erb b/app/views/admin/settings/_filter_subnav.html.erb
new file mode 100644
index 000000000..a7f2ae48f
--- /dev/null
+++ b/app/views/admin/settings/_filter_subnav.html.erb
@@ -0,0 +1,31 @@
+<ul class="tabs" data-tabs id="settings-tabs">
+  <li class="tabs-title is-active">
+    <%= link_to "#tab-configuration" do %>
+      <%= t("admin.settings.index.title") %>
+    <% end %>
+  </li>
+
+  <li class="tabs-title">
+    <%= link_to "#tab-feature-flags" do %>
+      <%= t("admin.settings.index.feature_flags") %>
+    <% end %>
+  </li>
+
+  <li class="tabs-title">
+    <%= link_to "#tab-banner-styles" do %>
+      <%= t("admin.settings.index.banners") %>
+    <% end %>
+  </li>
+
+  <li class="tabs-title">
+    <%= link_to "#tab-banner-images" do %>
+      <%= t("admin.settings.index.banner_imgs") %>
+    <% end %>
+  </li>
+
+  <li class="tabs-title">
+    <%= link_to "#tab-map-configuration" do %>
+      <%= t("admin.settings.index.map.title") %>
+    <% end %>
+  </li>
+</ul>
diff --git a/app/views/admin/settings/_map_configuration.html.erb b/app/views/admin/settings/_map_configuration.html.erb
new file mode 100644
index 000000000..342e05f32
--- /dev/null
+++ b/app/views/admin/settings/_map_configuration.html.erb
@@ -0,0 +1,8 @@
+<% if feature?(:map) %>
+  <h2><%= t("admin.settings.index.map.title") %></h2>
+  <p><%= t("admin.settings.index.map.help") %></p>
+
+  <%= render "map_form" %>
+<% else %>
+  <h3>No map to show.</h3>
+<% end %>
diff --git a/app/views/admin/settings/index.html.erb b/app/views/admin/settings/index.html.erb
index e49174fca..7c03d77a5 100644
--- a/app/views/admin/settings/index.html.erb
+++ b/app/views/admin/settings/index.html.erb
@@ -1,105 +1,24 @@
-<h2><%= t("admin.settings.index.title") %></h2>
+<h1>Settings</h1>
+<div class="tabs-content" data-tabs-content="settings-tabs">
+  <%= render "filter_subnav" %>
 
-<table>
-  <tbody>
-    <% @settings.each do |setting| %>
-      <tr>
-        <td class="small-12 medium-4">
-          <strong><%= t("settings.#{setting.key}") %></strong>
-        </td>
-        <td class="small-12 medium-8">
-          <%= form_for(setting, url: admin_setting_path(setting), html: { id: "edit_#{dom_id(setting)}"}) do |f| %>
-            <div class="small-12 medium-6 large-9 column">
-              <%= f.text_area :value, label: false, id: dom_id(setting), lines: 1 %>
-            </div>
-            <div class="small-12 medium-6 large-3 column">
-              <%= f.submit(t('admin.settings.index.update_setting'), class: "button hollow expanded") %>
-            </div>
-          <% end %>
-        </td>
-      </tr>
-    <% end %>
-  </tbody>
-</table>
+  <div class="tabs-panel is-active" id="tab-configuration">
+    <%= render "configuration" %>
+  </div>
 
-<h2><%= t("admin.settings.index.feature_flags") %></h2>
+  <div class="tabs-panel" id="tab-feature-flags">
+    <%= render "feature_flags" %>
+  </div>
 
-<table>
-  <tbody>
-    <% @feature_flags.each do |feature_flag| %>
-      <tr>
-        <td>
-          <strong><%= t("settings.#{feature_flag.key}") %></strong>
-        </td>
+  <div class="tabs-panel" id="tab-banner-styles">
+    <%= render "banner_styles" %>
+  </div>
 
-        <td>
-          <%= feature_flag.enabled? ? t("admin.settings.index.features.enabled") : t("admin.settings.index.features.disabled") %>
-        </td>
+  <div class="tabs-panel" id="tab-banner-images">
+    <%= render "banner_images" %>
+  </div>
 
-        <td class="text-right">
-          <%= form_for(feature_flag, url: admin_setting_path(feature_flag), html: { id: "edit_#{dom_id(feature_flag)}"}) do |f| %>
-
-            <%= f.hidden_field :value, id: dom_id(feature_flag), value: (feature_flag.enabled? ? "" : "active") %>
-            <%= f.submit(t("admin.settings.index.features.#{feature_flag.enabled? ? 'disable' : 'enable'}"),
-                        class: "button expanded #{feature_flag.enabled? ? 'hollow alert' : 'success'}",
-                        data: {confirm: t("admin.actions.confirm")}) %>
-          <% end %>
-        </td>
-      </tr>
-    <% end %>
-  </tbody>
-</table>
-
-<% if @banner_styles.present? %>
-  <h2><%= t("admin.settings.index.banners") %></h2>
-
-  <table>
-    <tbody>
-      <% @banner_styles.each do |setting| %>
-        <tr>
-          <td>
-            <strong><%= t("settings.#{setting.key}") %></strong>
-          </td>
-
-          <td>
-            <%= form_for(setting, url: admin_setting_path(setting), html: { id: "edit_#{dom_id(setting)}"}) do |f| %>
-              <%= f.text_area :value, label: false, id: dom_id(setting), lines: 1 %>
-              <%= f.submit(t('admin.settings.index.update_setting'), class: "button hollow") %>
-            <% end %>
-          </td>
-        </tr>
-      <% end %>
-    </tbody>
-  </table>
-<% end %>
-
-<% if @banner_imgs.present?%>
-  <h2><%= t("admin.settings.index.banner_imgs") %></h2>
-
-  <table>
-    <tbody>
-      <% @banner_imgs.each do |setting| %>
-        <tr>
-          <td>
-            <strong><%= t("settings.#{setting.key}") %></strong>
-          </td>
-
-          <td>
-            <%= form_for(setting, url: admin_setting_path(setting), html: { id: "edit_#{dom_id(setting)}"}) do |f| %>
-              <%= f.text_area :value, label: false, id: dom_id(setting), lines: 1 %>
-              <%= f.submit(t('admin.settings.index.update_setting'), class: "button small success") %>
-            <% end %>
-          </td>
-        </tr>
-      <% end %>
-    </tbody>
-  </table>
-<% end %>
-
-<% if feature?(:map) %>
-  <h2><%= t("admin.settings.index.map.title") %></h2>
-  <p><%= t("admin.settings.index.map.help") %></p>
-
-  <%= render "map_form" %>
-
-<% end %>
+  <div class="tabs-panel" id="tab-map-configuration">
+    <%= render "map_configuration" %>
+  </div>
+</div>