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

@@ -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;
 }

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>

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" %}
+        {% include 'babybuddy/form_field_no_label.html' %}
-            {% 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 %}
     </div>
 </div>

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"

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>

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>

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 %}