zydronium/manage.get.gov
1
0
Fork 0
mirror of https://github.com/cisagov/manage.get.gov.git synced 2025-08-06 01:35:22 +02:00
Code Issues Projects Releases Packages Wiki Activity

Template logic

Browse source
This commit is contained in:
zandercymatics 2024-05-10 11:26:42 -06:00
parent a55f339168
commit ebf1328044
No known key found for this signature in database
GPG key ID: FF4636ABEC9682B7
5 changed files with 85 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/registrar/assets/sass/_theme/_base.scss
View file

@ -140,3 +140,20 @@ abbr[title] {
.cursor-pointer {
cursor: pointer;
}
.input-with-edit-button {
svg.usa-icon {
width: 1.5em !important;
height: 1.5em !important;
// TODO CHANGE
color: green;
position: absolute;
}
&.input-with-edit-button__error {
// TODO CHANGE
svg.usa-icon {
color: red;
}
}
}

10
src/registrar/forms/contact.py
View file

@ -44,15 +44,9 @@ class ContactForm(forms.Form):
},
)
email = forms.EmailField(
label="Email",
label="Organization email",
max_length=None,
error_messages={"invalid": ("Enter your email address in the required format, like name@example.com.")},
validators=[
MaxLengthValidator(
320,
message="Response must be less than 320 characters.",
)
],
required=False,
)
phone = PhoneNumberField(
label="Phone",

40
src/registrar/templates/finish_contact_setup.html
View file

@ -41,23 +41,33 @@
<legend class="usa-sr-only">
Your contact information
</legend>
{{form.first_name}}
{% input_with_errors form.first_name %}
{% input_with_errors form.middle_name %}
{% input_with_errors form.last_name %}
{% input_with_errors form.title %}
{% input_with_errors form.email %}
{% with add_class="usa-input--medium" %}
{% input_with_errors form.phone %}
{% with show_edit_button=True %}
{% input_with_errors form.first_name %}
{% endwith %}
{% with show_edit_button=True %}
{% input_with_errors form.middle_name %}
{% endwith %}
{% with show_edit_button=True %}
{% input_with_errors form.last_name %}
{% endwith %}
{% with show_edit_button=True %}
{% input_with_errors form.email %}
{% endwith %}
{% with show_edit_button=True %}
{% input_with_errors form.title %}
{% endwith %}
{% with show_edit_button=True %}
{% with add_class="usa-input--medium" %}
{% input_with_errors form.phone %}
{% endwith %}
{% endwith %}
</fieldset>
<div>
<button type="submit" name="submit_button" class="usa-button">

36
src/registrar/templates/includes/input_with_errors.html
View file

@ -2,7 +2,7 @@
Template include for form fields with classes and their corresponding
error messages, if necessary.
{% endcomment %}
{% load static field_helpers url_helpers %}
{% load custom_filters %}
{% load widget_tweaks %}
@ -27,7 +27,18 @@ error messages, if necessary.
{% endif %}
{% if not field.widget_type == "checkbox" %}
{% include "django/forms/label.html" %}
{% if show_edit_button %}
<div class="grid-row flex-align-baseline">
<div class="grid-col">
{% include "django/forms/label.html" %}
</div>
<div class="grid-col">
<button type="button" class="usa-button usa-button--unstyled">Edit</button>
</div>
</div>
{% else %}
{% include "django/forms/label.html" %}
{% endif %}
{% endif %}
{% if sublabel_text %}
@ -58,9 +69,26 @@ error messages, if necessary.
{% if append_gov %}
<div class="display-flex flex-align-center">
{% endif %}
{# this is the input field, itself #}
{% include widget.template_name %}
{% if show_edit_button %}
<div id="{{field.name}}__edit-button-value" class="input-with-edit-button {%if not field.value and field.field.required %}input-with-edit-button__error{% endif %}">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24" height="24">
{% if field.value or not field.field.required %}
<use xlink:href="{%static 'img/sprite.svg'%}#check_circle"></use>
{%elif not field.value %}
<use xlink:href="{%static 'img/sprite.svg'%}#error"></use>
{%endif %}
</svg>
<div class="display-inline padding-left-05 margin-left-3 readonly-field">
{{ field.value }}
</div>
</div>
{# this is the input field, itself #}
{% include widget.template_name %}
{% else %}
{# this is the input field, itself #}
{% include widget.template_name %}
{% endif %}
{% if append_gov %}
<span class="padding-top-05 padding-left-2px">.gov </span>
</div>

9
src/registrar/templatetags/field_helpers.py
View file

@ -26,6 +26,7 @@ def input_with_errors(context, field=None): # noqa: C901
add_group_class: append to input element's surrounding tag's `class` attribute
attr_* - adds or replaces any single html attribute for the input
add_error_attr_* - like `attr_*` but only if field.errors is not empty
show_edit_button: shows a simple edit button, and adds display-none to the input field.
Example usage:
```
@ -91,6 +92,14 @@ def input_with_errors(context, field=None): # noqa: C901
elif key == "add_group_class":
group_classes.append(value)
elif key == "show_edit_button":
# Hide the primary input field.
# Used such that we can toggle it with JS
if "display-none" not in classes and isinstance(value, bool) and value:
classes.append("display-none")
# Set this as a context value so we know what we're going to display
context["show_edit_button"] = value
attrs["id"] = field.auto_id
# do some work for various edge cases