From e758e258a8b83004ffd19fc4584ccdbb65a9d6e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A2u=20Cao?= <raucao@kip.pe>
Date: Sun, 12 Mar 2023 13:41:36 +0700
Subject: [PATCH] Allow disabling toggles, add toggle fieldset component

---
 .../fieldset_toggle_component.html.erb        |  9 ++++++
 .../fieldset_toggle_component.rb              | 14 ++++++++
 .../form_elements/toggle_component.html.erb   |  3 +-
 .../form_elements/toggle_component.rb         |  3 +-
 .../admin/settings/services/index.html.erb    | 32 ++++++++-----------
 5 files changed, 41 insertions(+), 20 deletions(-)
 create mode 100644 app/components/form_elements/fieldset_toggle_component.html.erb
 create mode 100644 app/components/form_elements/fieldset_toggle_component.rb

diff --git a/app/components/form_elements/fieldset_toggle_component.html.erb b/app/components/form_elements/fieldset_toggle_component.html.erb
new file mode 100644
index 0000000..28549bc
--- /dev/null
+++ b/app/components/form_elements/fieldset_toggle_component.html.erb
@@ -0,0 +1,9 @@
+<%= tag.public_send(@tag, class: "flex items-center justify-between py-6") do %>
+  <div class="flex flex-col">
+    <label class="font-bold mb-1"><%= @title %></label>
+    <p class="text-gray-500"><%= @descripton %></p>
+  </div>
+  <div class="relative ml-4 inline-flex flex-shrink-0">
+    <%= render FormElements::ToggleComponent.new(enabled: @enabled, input_enabled: @input_enabled) %>
+  </div>
+<% end %>
diff --git a/app/components/form_elements/fieldset_toggle_component.rb b/app/components/form_elements/fieldset_toggle_component.rb
new file mode 100644
index 0000000..aa64535
--- /dev/null
+++ b/app/components/form_elements/fieldset_toggle_component.rb
@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module FormElements
+  class FieldsetToggleComponent < ViewComponent::Base
+    def initialize(tag: "li", enabled: false, input_enabled: true, title:, description:)
+      @tag = tag
+      @enabled = enabled
+      @input_enabled = input_enabled
+      @title = title
+      @descripton = description
+      @button_text = @enabled ? "Switch off" : "Switch on"
+    end
+  end
+end
diff --git a/app/components/form_elements/toggle_component.html.erb b/app/components/form_elements/toggle_component.html.erb
index fabb81c..9023b7f 100644
--- a/app/components/form_elements/toggle_component.html.erb
+++ b/app/components/form_elements/toggle_component.html.erb
@@ -1,10 +1,11 @@
 <button type="submit" role="switch" aria-checked="false"
+        <%= @input_enabled ? "" : "disabled=disabled"%>
         class="<%= @enabled ? 'bg-indigo-600' : 'bg-gray-200' %>
                relative inline-flex h-6 w-11 flex-shrink-0
                cursor-pointer rounded-full border-2 border-transparent
                transition-colors duration-200 ease-in-out focus:outline-none
                focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2">
-  <!-- <span class="sr&#45;only">Enable</span> -->
+  <span class="sr-only"><%= @button_text %></span>
   <span aria-hidden="true"
         class="<%= @enabled ? 'translate-x-5' : 'translate-x-0' %>
                pointer-events-none inline-block h-5 w-5 transform rounded-full
diff --git a/app/components/form_elements/toggle_component.rb b/app/components/form_elements/toggle_component.rb
index a5d0400..9702dfb 100644
--- a/app/components/form_elements/toggle_component.rb
+++ b/app/components/form_elements/toggle_component.rb
@@ -2,8 +2,9 @@
 
 module FormElements
   class ToggleComponent < ViewComponent::Base
-    def initialize(enabled:)
+    def initialize(enabled:, input_enabled: true)
       @enabled = !!enabled
+      @input_enabled = input_enabled
     end
   end
 end
diff --git a/app/views/admin/settings/services/index.html.erb b/app/views/admin/settings/services/index.html.erb
index a4a4fec..e512cce 100644
--- a/app/views/admin/settings/services/index.html.erb
+++ b/app/views/admin/settings/services/index.html.erb
@@ -15,24 +15,20 @@
       <% end %>
 
       <ul role="list" class="mt-2 divide-y divide-gray-200">
-        <li class="flex items-center justify-between py-6">
-          <div class="flex flex-col">
-            <label class="font-bold mb-1">Enable LNDHub integration</label>
-            <p class="text-gray-500">LNDHub configuration present and wallet features enabled</p>
-          </div>
-          <%= f.check_box :lndhub_enabled, checked: Setting.lndhub_enabled?,
-                          disabled: true,
-                          class: "relative ml-4 inline-flex flex-shrink-0" %>
-        </li>
-        <li class="flex items-center justify-between py-6">
-          <div class="flex flex-col">
-            <label class="font-bold mb-1">Enable LNDHub admin panel</label>
-            <p class="text-gray-500">LNDHub database configuration present and admin panel enabled</p>
-          </div>
-          <%= f.check_box :lndhub_admin_enabled, checked: Setting.lndhub_admin_enabled?,
-                          disabled: true,
-                          class: "relative ml-4 inline-flex flex-shrink-0" %>
-        </li>
+        <%= render FormElements::FieldsetToggleComponent.new(
+          tag: "li",
+          enabled: Setting.lndhub_enabled?,
+          input_enabled: false,
+          title: "Enable LNDHub integration",
+          description: "LNDHub configuration present and wallet features enabled"
+        ) %>
+        <%= render FormElements::FieldsetToggleComponent.new(
+          tag: "li",
+          enabled: Setting.lndhub_admin_enabled?,
+          input_enabled: false,
+          title: "Enable LNDHub admin panel",
+          description: "LNDHub database configuration present and admin panel enabled"
+        ) %>
       </ul>
     <% end %>
   </section>