From 232cde19eec6943922bb9d61be8c89d03e38d9ea Mon Sep 17 00:00:00 2001
From: billybonks <sebastienstettler@gmail.com>
Date: Tue, 6 Feb 2024 14:10:07 +0800
Subject: [PATCH] feat: use field set on some forms

Create choices template to have all multi choice experience be the same
as radio select choices.

Moved notes and tags into advanced template in order to reduce the
amount of fields in a form for users. Given that these two fields are
usually a catch all for anything that is not in the core data model. it
is not garunteed that users will use them.

If a user does decide to use the fields we will store that selection in
localstorage so that they dont have to open it every time.

I put the javascript into the page section, as i seem to have had issues
with javascript blocks overriding each other.
---
 babybuddy/static_src/scss/forms.scss          |  6 ++++
 babybuddy/templates/babybuddy/base.html       | 18 ++++++++++-
 babybuddy/templates/babybuddy/form_field.html | 31 +------------------
 core/forms.py                                 | 23 ++++++++++++++
 core/templates/forms/layouts/advanced.html    | 10 ++++++
 core/templates/forms/layouts/choices.html     |  9 ++++++
 core/templates/forms/layouts/required.html    |  3 ++
 7 files changed, 69 insertions(+), 31 deletions(-)
 create mode 100644 core/templates/forms/layouts/advanced.html
 create mode 100644 core/templates/forms/layouts/choices.html
 create mode 100644 core/templates/forms/layouts/required.html

diff --git a/babybuddy/static_src/scss/forms.scss b/babybuddy/static_src/scss/forms.scss
index a374a6ec..3a0d8705 100644
--- a/babybuddy/static_src/scss/forms.scss
+++ b/babybuddy/static_src/scss/forms.scss
@@ -51,4 +51,10 @@
         padding: 0.25rem 0.5rem;
         position: relative;
     }
+}
+
+form .row details {
+    // removing this causes slight mis-alignment between fields in the details and the rest of the fields 
+    //on the form at the left hand side of the box
+    padding-right: 0;
 }
\ No newline at end of file
diff --git a/babybuddy/templates/babybuddy/base.html b/babybuddy/templates/babybuddy/base.html
index bf7a029c..f785dc2e 100644
--- a/babybuddy/templates/babybuddy/base.html
+++ b/babybuddy/templates/babybuddy/base.html
@@ -44,6 +44,22 @@
         <script src="{% static "babybuddy/js/vendor.js" %}"></script>
         <script src="{% static "babybuddy/js/app.js" %}"></script>
         {% if user.is_authenticated %}<script>BabyBuddy.PullToRefresh.init()</script>{% endif %}
-        {% block javascript %}{% endblock %}
+        {% block javascript %}
+            <script type="application/javascript">
+                function rememberAdvancedToggle(event, element){
+                    localStorage.setItem("advancedForm",event.newState)
+                }
+
+                window.addEventListener('load', function () {
+                    if(localStorage.getItem("advancedForm") !== "open"){
+                        return;
+                    }
+
+                    document.querySelectorAll("form details").forEach(function(node){
+                        node.open = true
+                    });
+                })
+            </script>
+        {% endblock %}
     </body>
 </html>
diff --git a/babybuddy/templates/babybuddy/form_field.html b/babybuddy/templates/babybuddy/form_field.html
index 41509f78..c454a5e0 100644
--- a/babybuddy/templates/babybuddy/form_field.html
+++ b/babybuddy/templates/babybuddy/form_field.html
@@ -5,35 +5,6 @@
         {{ field.label }}
     </label>
     <div class="col-sm-10{% if field|widget_type == 'childradioselect' %} overflow-auto"{% endif %}">
-        {% if field|field_type == "booleanfield" %}
-            {% if field.errors %}
-                {{ field|add_class:"btn-check is-invalid" }}
-            {% else %}
-                {{ field|add_class:"btn-check" }}
-            {% endif %}
-            <label for="id_{{ field.name }}" class="btn btn-outline-light btn-no-hover">{{ field.label }}</label>
-        {% elif 'choice' in field|field_type %}
-            {% if field.errors %}
-                {{ field|add_class:"form-select is-invalid" }}
-            {% else %}
-                {{ field|add_class:"form-select" }}
-            {% endif %}
-        {% else %}
-            {% if field.errors %}
-                {{ field|add_class:"form-control is-invalid" }}
-            {% else %}
-                {{ field|add_class:"form-control" }}
-            {% endif %}
-        {% endif %}
-        {% if field.help_text %}
-            <div class="help-block">
-                <small>{{ field.help_text }}</small>
-            </div>
-        {% endif %}
-        {% if field.errors %}
-            <div class="invalid-feedback">
-                {% for error in  field.errors %}{{ error }}{% endfor %}
-            </div>
-        {% endif %}
+        {% include 'babybuddy/form_field_no_label.html' %}
     </div>
 </div>
diff --git a/core/forms.py b/core/forms.py
index a1f283c5..0a98fdcb 100644
--- a/core/forms.py
+++ b/core/forms.py
@@ -178,6 +178,11 @@ class TaggableModelForm(forms.ModelForm):
 
 
 class PumpingForm(CoreModelForm, TaggableModelForm):
+    fieldsets = [
+        {"fields": ["child", "start", "end", "amount"], "layout": "required"},
+        {"layout": "advanced", "fields": ["notes", "tags"]},
+    ]
+
     class Meta:
         model = models.Pumping
         fields = ["child", "start", "end", "amount", "notes", "tags"]
@@ -190,6 +195,16 @@ class PumpingForm(CoreModelForm, TaggableModelForm):
 
 
 class DiaperChangeForm(CoreModelForm, TaggableModelForm):
+    fieldsets = [
+        {
+            "fields": ["wet", "solid"],
+            "layout": "choices",
+            "layout_attrs": {"label": "Contents"},
+        },
+        {"fields": ["child", "time"], "layout": "required"},
+        {"layout": "advanced", "fields": ["notes", "tags"]},
+    ]
+
     class Meta:
         model = models.DiaperChange
         fields = ["child", "time", "wet", "solid", "color", "amount", "notes", "tags"]
@@ -213,6 +228,14 @@ class FeedingForm(CoreModelForm, TaggableModelForm):
 
 
 class BottleFeedingForm(CoreModelForm, TaggableModelForm):
+    fieldsets = [
+        {
+            "fields": ["child", "type", "start", "amount"],
+            "layout": "required",
+        },
+        {"layout": "advanced", "fields": ["notes", "tags"]},
+    ]
+
     def save(self):
         instance = super(BottleFeedingForm, self).save(commit=False)
         instance.method = "bottle"
diff --git a/core/templates/forms/layouts/advanced.html b/core/templates/forms/layouts/advanced.html
new file mode 100644
index 00000000..2513befa
--- /dev/null
+++ b/core/templates/forms/layouts/advanced.html
@@ -0,0 +1,10 @@
+<div class="row">
+    <div class="row mb-3">
+        <details ontoggle="rememberAdvancedToggle(event)">
+            <summary>Advanced</summary>
+            {% for field in fieldset.fields %}
+                <div class="row">{% include "babybuddy/form_field.html" %}</div>
+            {% endfor %}
+        </details>
+    </div>
+</div>
diff --git a/core/templates/forms/layouts/choices.html b/core/templates/forms/layouts/choices.html
new file mode 100644
index 00000000..8b74202f
--- /dev/null
+++ b/core/templates/forms/layouts/choices.html
@@ -0,0 +1,9 @@
+{% load i18n %}
+<div class="row mb-3">
+    <label for="id_child" class="col-sm-2 col-form-label">{% trans fieldset.layout_attrs.label %}</label>
+    <div class="col-sm-10 overflow-auto">
+        {% for field in fieldset.fields %}
+            {% include "babybuddy/form_field_no_label.html" %}
+        {% endfor %}
+    </div>
+</div>
diff --git a/core/templates/forms/layouts/required.html b/core/templates/forms/layouts/required.html
new file mode 100644
index 00000000..6bbcf479
--- /dev/null
+++ b/core/templates/forms/layouts/required.html
@@ -0,0 +1,3 @@
+{% for field in fieldset.fields %}
+    <div class="row">{% include "babybuddy/form_field.html" %}</div>
+{% endfor %}