mirror of https://github.com/snachodog/mybuddy.git
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.
This commit is contained in:
parent
60b113f197
commit
232cde19ee
|
@ -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;
|
||||
}
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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>
|
|
@ -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>
|
|
@ -0,0 +1,3 @@
|
|||
{% for field in fieldset.fields %}
|
||||
<div class="row">{% include "babybuddy/form_field.html" %}</div>
|
||||
{% endfor %}
|
Loading…
Reference in New Issue