From 3edd645f534293db6829ca9f7fa9717caedb0225 Mon Sep 17 00:00:00 2001
From: billybonks <sebastienstettler@gmail.com>
Date: Tue, 6 Feb 2024 14:05:09 +0800
Subject: [PATCH] feat: Add PillRadioSelect widget

In order to promote less clicks on the mobile experience, this wideget
will splat out the drop down options similar to child select
---
 core/forms.py                              |  3 ++-
 core/templates/core/pill_radio.html        | 11 +++++++++++
 core/templates/core/pill_radio_option.html |  3 +++
 core/widgets.py                            | 13 +++++++++++++
 4 files changed, 29 insertions(+), 1 deletion(-)
 create mode 100644 core/templates/core/pill_radio.html
 create mode 100644 core/templates/core/pill_radio_option.html

diff --git a/core/forms.py b/core/forms.py
index 9c712865..dedd98ae 100644
--- a/core/forms.py
+++ b/core/forms.py
@@ -10,7 +10,7 @@ from taggit.forms import TagField
 from babybuddy.widgets import DateInput, DateTimeInput, TimeInput
 from core import models
 from core.models import Timer
-from core.widgets import TagsEditor, ChildRadioSelect
+from core.widgets import TagsEditor, ChildRadioSelect, PillRadioSelect
 
 
 def set_initial_values(kwargs, form_type):
@@ -201,6 +201,7 @@ class BottleFeedingForm(CoreModelForm, TaggableModelForm):
         widgets = {
             "child": ChildRadioSelect,
             "start": DateTimeInput(),
+            "type": PillRadioSelect(),
             "notes": forms.Textarea(attrs={"rows": 5}),
         }
 
diff --git a/core/templates/core/pill_radio.html b/core/templates/core/pill_radio.html
new file mode 100644
index 00000000..bfdd1293
--- /dev/null
+++ b/core/templates/core/pill_radio.html
@@ -0,0 +1,11 @@
+{% with id=widget.attrs.id %}
+    <div {% if id %}id="{{ id }}"{% endif %} class="radio-container">
+        {% for group, options, index in widget.optgroups %}
+            {% for option in options %}
+                {% if option.value != '' %}
+                    {% include option.template_name with widget=option %}
+                {% endif %}
+            {% endfor %}
+        {% endfor %}
+    </div>
+{% endwith %}
diff --git a/core/templates/core/pill_radio_option.html b/core/templates/core/pill_radio_option.html
new file mode 100644
index 00000000..720a7c1c
--- /dev/null
+++ b/core/templates/core/pill_radio_option.html
@@ -0,0 +1,3 @@
+{% include "django/forms/widgets/input.html" %}
+<label {% if widget.attrs.id %}for="{{ widget.attrs.id }}"{% endif %}
+       class="btn btn-outline-light btn-no-hover">{{ widget.label }}</label>
diff --git a/core/widgets.py b/core/widgets.py
index 3fe1ed67..74054189 100644
--- a/core/widgets.py
+++ b/core/widgets.py
@@ -104,3 +104,16 @@ class ChildRadioSelect(RadioSelect):
         if value != "":
             option["picture"] = value.instance.picture
         return option
+
+
+class PillRadioSelect(RadioSelect):
+    input_type = "radio"
+    template_name = "core/pill_radio.html"
+    option_template_name = "core/pill_radio_option.html"
+
+    attrs = {"class": "btn-check"}
+
+    def build_attrs(self, base_attrs, extra_attrs=None):
+        attrs = super().build_attrs(base_attrs, extra_attrs)
+        attrs["class"] += " btn-check"
+        return attrs