Skip to content

UX improvements to formsets #123

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
profcturner merged 8 commits into from
Jan 22, 2026
Merged

UX improvements to formsets #123

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
c046496
set up some initial fancy_formsets
profcturner Jan 15, 2026
fba52f9
Change project allocations to fancy formsets
profcturner Jan 15, 2026
d497a82
fancy formset added to Project allocations
profcturner Jan 15, 2026
5969330
* Now using django-fancy-formset
joho1968 Jan 22, 2026
ac3af68
* Added styling and overrides for django-fancy-formset CSS
joho1968 Jan 22, 2026
e806ab8
* Now using django-fancy-formset
joho1968 Jan 22, 2026
c4bae9b
* More tweaks for django-fancy-formset
joho1968 Jan 22, 2026
9e58215
Merge branch 'master' into ux_formsets
profcturner Jan 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions WAM/settings.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@
'django.contrib.staticfiles',
'django.contrib.admindocs',
'django.contrib.humanize',
'fancy_formset',
'loads'
)

Expand Down
5 changes: 3 additions & 2 deletions loads/forms.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
from django import forms
from django.forms import ModelForm
from django.forms import BaseModelFormSet
from fancy_formset import FancyModelFormSet

from django.core.validators import RegexValidator
from django.contrib.auth.models import User, Group
Expand Down Expand Up @@ -462,7 +463,7 @@ def save(self):
return user


class BaseModuleStaffByStaffFormSet(BaseModelFormSet):
class BaseModuleStaffByStaffFormSet(FancyModelFormSet):
def clean(self):
"""
Adds validation to check that no two links have the same anchor or URL
Expand Down Expand Up @@ -514,7 +515,7 @@ def clean(self):
)


class BaseModuleStaffByModuleFormSet(BaseModelFormSet):
class BaseModuleStaffByModuleFormSet(FancyModelFormSet):
def clean(self):
"""
Adds validation to check that no two links have the same anchor or URL
Expand Down
160 changes: 160 additions & 0 deletions loads/static/wam/wam.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,166 @@ ul.wam-menu-list li::before {
.wam-show-on-print {
display: none;
}
/* Fancy Formset */
[data-formset].formset-active > fieldset {
padding: 0 !important;
margin: 0 !important;
padding-bottom: 1rem !important;
border-top: 3px dotted var(--bs-secondary-border-subtle) !important;
border-bottom: none !important;
padding-top: 1rem !important;
}
div.formset-delete {
min-width: 0px !important;
max-width: 48px !important;
width: 48px !important;
}
[data-formset].formset-active > fieldset.deleted .formset-delete {
width: 100% !important;
max-width: 100% !important;
}
div.wam-formset-grid {
display: grid;
/*grid-template-columns: 3fr auto auto auto 1fr;*/
grid-template-columns: 250px repeat(4, minmax(0, 1fr));
box-sizing: border-box;
font-size: 0.9rem;
}
div.wam-formset-grid div {
min-width: 100px;
text-wrap: nowrap !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
div.wam-formset-grid div label {
display: none;
}
div.wam-formset-grid div:last-child label {
display: block;
font-size: 0.8rem;
}
div.wam-formset-grid div select {
font-family: inherit;
font-size: inherit;
line-height: inherit;
text-transform: none;
word-wrap: normal;
--bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
display: block;
padding: 0.1rem 2rem 0.1rem 0.5rem;
margin: 0 5.5rem 0 0;
font-size: 0.9rem;
font-weight: 400;
line-height: 1.5;
color: var(--bs-body-color);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: var(--bs-body-bg);
background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 16px 12px;
border: var(--bs-border-width) solid var(--bs-border-color);
border-radius: var(--bs-border-radius);
transition: none;
max-width: 230px !important;
}
div.wam-formset-grid div select:disabled {
opacity: 1;
}
div.wam-formset-grid div select:focus {
border-color: #86b7fe;
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
div.wam-formset-grid div select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 var(--bs-body-color);
}
[data-bs-theme=dark] div.wam-formset-grid div select {
--bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
div.wam-formset-grid div .errorlist {
display: none !important;
}
div.wam-formset-grid div input[aria-invalid="true"] {
border: 2px solid var(--bs-danger) !important;
}
div.wam-formset-grid div input[type=number] {
margin: 0;
font-family: inherit;
line-height: inherit;
text-transform: none;
word-wrap: normal;
display: block;
padding: 0.1rem 0.5rem 0.1rem 0.5rem;
margin: 0 5.5rem 0 0;
font-size: 0.9rem;
font-weight: 400;
line-height: 1.5;
max-width: 5rem;
color: var(--bs-body-color);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: var(--bs-body-bg);
background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 16px 12px;
border: var(--bs-border-width) solid var(--bs-border-color);
border-radius: var(--bs-border-radius);
transition: none;
}
div.wam-formset-grid div input[type=number]:focus {
border-color: #86b7fe;
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
div.wam-formset-grid div input[type=date] {
margin: 0;
font-family: inherit;
line-height: inherit;
text-transform: none;
word-wrap: normal;
display: block;
padding: 0.1rem 0.3rem 0.1rem 0.3rem;
margin: 0 5.5rem 0 0;
font-size: 0.9rem;
font-weight: 400;
line-height: 1.5;
max-width: 10rem;
min-width: 8rem !important;
overflow: hidden !important;
color: var(--bs-body-color);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: var(--bs-body-bg);
background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 16px 12px;
border: var(--bs-border-width) solid var(--bs-border-color);
border-radius: var(--bs-border-radius);
transition: none;
}
div.wam-formset-grid div input[type=date]:focus {
border-color: #86b7fe;
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
div.wam-formset-grid div input[type=checkbox] {
color: yellow;
padding: 50px;
}
div.wam-formset-grid div input[type=checkbox]:before {
color: yellow;
padding: 50px;
}

/* General class to hide element when printing */
@media print {
.wam-hide-on-print {
Expand Down
76 changes: 75 additions & 1 deletion loads/templates/loads/modules/allocations.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,79 @@ <h3 class="my-3">
<span class="font-monospace">{{package}}</span>
</p>

{# TODO: Needs work due to formset widget being used #}
{{ formset.media }}
<div class="border border-secondary rounded-3 p-3">
<form method="POST">
{% csrf_token %}
<div class="bg-body" data-formset="{{ formset.prefix }}">
{{ formset.management_form }}
<fieldset class="bg-body wam-fieldset" style="display: none">
<div class="wam-formset-grid">
{{ formset.empty_form.as_div }}
</div>
</fieldset>
{% for form in formset %}
{% if forloop.first %}
<div class="wam-formset-grid">
{% for field in form.visible_fields %}
{% if field.field.widget.input_type == "checkbox" %}
<div></div>
{% else %}
<div class="text-wrap small mb-2 me-1">
{{ field.label }}
</div>
{% endif %}
{% endfor %}
</div>
{% endif %}
<fieldset class="bg-body wam-fieldset">
<div class="wam-formset-grid">
{{ form.as_div }}
</div>
</fieldset>
{% endfor %}
</div>
<button class="btn btn-primary" type="submit">Save</button>
</form>
</div>

<script>{{ formset.fancy_init }}</script>

{% comment %}
<div class="border border-secondary rounded-3 p-3">
<form method="POST">
{% csrf_token %}
<div class="bg-body" data-formset="{{ formset.prefix }}">
{{ formset.management_form }}
<fieldset class="bg-body" style="display: none">
<table class="table table-borderless wam-formset">
{{ formset.empty_form.as_table }}
</table>
</fieldset>
{% for form in formset %}
<fieldset class="bg-body">
<table class="table table-borderless wam-formset">
{{ form.as_table }}
</table>
</fieldset>
{% endfor %}
</div>
<button class="btn btn-primary" type="submit">Save</button>
</form>
</div>

<script>
document.addEventListener('DOMContentLoaded',()=>{formset.init({},'[data-formset="form"]')});
</script>
{% endcomment %}





{% comment %}
<div class="border border-secondary-subtle rounded-3 p-3 mb-3 mt-4">
{{ formset.media }}
<form id="allocationForm" method="post" action="">
{% csrf_token %}
<input class="btn btn-primary mt-2 mb-4" type="submit" value="Submit" />
Expand Down Expand Up @@ -76,10 +146,12 @@ <h3 class="my-3">
<input class="btn btn-primary mt-3" type="submit" value="Submit" />
</form>
</div>
{% endcomment %}


{% load static %}

{% comment %}
<!-- Include formset plugin - including jQuery dependency -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="{% static 'loads/jquery.formset.js' %}"></script>
Expand All @@ -88,6 +160,8 @@ <h3 class="my-3">
$('#allocationForm tbody tr').formset();
})
</script>
<script>formset.init();</script>
{% endcomment %}


{% endblock content %}
43 changes: 43 additions & 0 deletions loads/templates/loads/projects/allocations.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,45 @@ <h6 class="d-none d-print-block fw-bold">Project details</h6>
{% endfor %}
</div>

{{ formset.media }}
<div class="border border-secondary rounded-3 p-3 mt-5">
<div class="bg-body" data-formset="{{ formset.prefix }}">
{{ formset.management_form }}
<fieldset class="bg-body wam-fieldset" style="display: none">
<div class="wam-formset-grid">
{{ formset.empty_form.as_div }}
</div>
</fieldset>
{% for form in formset %}
{% if forloop.first %}
<div class="wam-formset-grid">
{% for field in form.visible_fields %}
{% if field.field.widget.input_type == "checkbox" %}
<div></div>
{% else %}
<div class="text-wrap small mb-2 me-1">
{{ field.label }}
</div>
{% endif %}
{% endfor %}
</div>
{% endif %}
<fieldset class="bg-body wam-fieldset">
<div class="wam-formset-grid">
{{ form.as_div }}
</div>
</fieldset>
{% endfor %}
</div>
</div>

<script>{{ formset.fancy_init }}</script>

{# Old formset here #}

{% comment %}

{{ formset.media }}
{{ formset.management_form }}

<div class="table-responsive small mt-4">
Expand Down Expand Up @@ -134,6 +173,7 @@ <h6 class="d-none d-print-block fw-bold">Project details</h6>
</tbody>
</table>
</div>
{% endcomment %}

<input class="btn btn-primary mt-3 d-print-none" type="submit" value="Submit" />

Expand All @@ -142,6 +182,8 @@ <h6 class="d-none d-print-block fw-bold">Project details</h6>

{% load static %}

{# Old formset here #}
{% comment %}
<!-- Include formset plugin - including jQuery dependency -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="{% static 'loads/jquery.formset.js' %}"></script>
Expand All @@ -150,6 +192,7 @@ <h6 class="d-none d-print-block fw-bold">Project details</h6>
$('#allocationForm tbody tr').formset();
})
</script>
{% endcomment %}


{% endblock content %}
Loading