NeoAnd/netbox
1
0
Fork 0
mirror of https://github.com/netbox-community/netbox.git synced 2025-12-25 14:47:46 -06:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

Fixes #9437: Standardize form submission buttons and behavior when using enter key

Browse Source
This commit is contained in:
jeremystretch
2022-07-19 14:21:20 -04:00
parent 802d9d2b6e
commit 44586743ea
15 changed files with 57 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
netbox/project-static/dist/netbox.js vendored
View File

File diff suppressed because one or more lines are too long

2
netbox/project-static/dist/netbox.js.map vendored
View File

File diff suppressed because one or more lines are too long

40
netbox/project-static/src/forms/elements.ts
View File

@@ -1,32 +1,4 @@
import { getElements, scrollTo, isTruthy } from '../util';
/**
* When editing an object, it is sometimes desirable to customize the form action *without*
* overriding the form's `submit` event. For example, the 'Save & Continue' button. We don't want
* to use the `formaction` attribute on that element because it will be included on the form even
* if the button isn't clicked.
*
* @example
* ```html
* <button type="button" return-url="/special-url/">
* Save & Continue
* </button>
* ```
*
* @param event Click event.
*/
function handleSubmitWithReturnUrl(event: MouseEvent): void {
const element = event.target as HTMLElement;
if (element.tagName === 'BUTTON') {
const button = element as HTMLButtonElement;
const action = button.getAttribute('return-url');
const form = button.form;
if (form !== null && isTruthy(action)) {
form.action = action;
form.submit();
}
}
}
import { getElements, scrollTo } from '../util';
function handleFormSubmit(event: Event, form: HTMLFormElement): void {
// Track the names of each invalid field.
@@ -57,15 +29,6 @@ function handleFormSubmit(event: Event, form: HTMLFormElement): void {
}
}
/**
* Attach event listeners to form buttons with the `return-url` attribute present.
*/
function initReturnUrlSubmitButtons(): void {
for (const button of getElements<HTMLButtonElement>('button[return-url]')) {
button.addEventListener('click', handleSubmitWithReturnUrl);
}
}
/**
* Attach an event listener to each form's submitter (button[type=submit]). When called, the
* callback checks the validity of each form field and adds the appropriate Bootstrap CSS class
@@ -82,5 +45,4 @@ export function initFormElements(): void {
submitter.addEventListener('click', (event: Event) => handleFormSubmit(event, form));
}
}
initReturnUrlSubmitButtons();
}

14
netbox/templates/circuits/circuittermination_edit.html
View File

@@ -48,17 +48,3 @@
{% render_field form.description %}
</div>
{% endblock %}
{# Override buttons block, 'Create & Add Another'/'_addanother' is not needed on a circuit. #}
{% block buttons %}
<a class="btn btn-outline-danger" href="{{ return_url }}">Cancel</a>
{% if object.pk %}
<button type="submit" name="_update" class="btn btn-primary">
Save
</button>
{% else %}
<button type="submit" name="_create" class="btn btn-primary">
Create
</button>
{% endif %}
{% endblock buttons %}

11
netbox/templates/dcim/interface_edit.html
View File

@@ -91,14 +91,3 @@
</div>
{% endif %}
{% endblock %}
{% block buttons %}
<a href="{{ return_url }}" class="btn btn-outline-danger">Cancel</a>
{% if object.pk %}
<button type="button" return-url="?return_url={% url 'dcim:interface_edit' pk=object.pk %}" class="btn btn-outline-primary">Save & Continue Editing</button>
<button type="submit" name="_update" class="btn btn-primary">Save</button>
{% else %}
<button type="submit" name="_addanother" class="btn btn-outline-primary">Create & Add Another</button>
<button type="submit" name="_create" class="btn btn-primary">Create</button>
{% endif %}
{% endblock %}

2
netbox/templates/generic/bulk_delete.html
View File

@@ -36,8 +36,8 @@ Context:
{{ field }}
{% endfor %}
<div class="text-end">
<a href="{{ return_url }}" class="btn btn-outline-dark">Cancel</a>
<button type="submit" name="_confirm" class="btn btn-danger">Delete {{ table.rows|length }} {{ model|meta:"verbose_name_plural" }}</button>
<a href="{{ return_url }}" class="btn btn-outline-dark">Cancel</a>
</div>
</form>
</div>

2
netbox/templates/generic/bulk_edit.html
View File

@@ -118,8 +118,8 @@ Context:
</div>
<div class="text-end">
<a href="{{ return_url }}" class="btn btn-sm btn-outline-danger">Cancel</a>
<button type="submit" name="_apply" class="btn btn-sm btn-primary">Apply</button>
<a href="{{ return_url }}" class="btn btn-sm btn-outline-danger">Cancel</a>
</div>
</div>
</div>

12
netbox/templates/generic/bulk_import.html
View File

@@ -44,12 +44,12 @@ Context:
</div>
</div>
<div class="form-group">
<div class="col col-md-12 text-end">
{% if return_url %}
<a href="{{ return_url }}" class="btn btn-outline-danger">Cancel</a>
{% endif %}
<button type="submit" class="btn btn-primary">Submit</button>
</div>
<div class="col col-md-12 text-end">
<button type="submit" class="btn btn-primary">Submit</button>
{% if return_url %}
<a href="{{ return_url }}" class="btn btn-outline-danger">Cancel</a>
{% endif %}
</div>
</div>
</form>
{% if fields %}

2
netbox/templates/generic/bulk_remove.html
View File

@@ -23,8 +23,8 @@
{{ field }}
{% endfor %}
<div class="text-center">
<a href="{{ return_url }}" class="btn btn-outline-dark">Cancel</a>
<button type="submit" name="_confirm" class="btn btn-danger">Delete these {{ table.rows|length }} {{ obj_type_plural }}</button>
<a href="{{ return_url }}" class="btn btn-outline-dark">Cancel</a>
</div>
</form>
</div>

2
netbox/templates/generic/bulk_rename.html
View File

@@ -34,11 +34,11 @@
</div>
</div>
<div class="col col-md-12 my-3 text-end">
<a href="{{ return_url }}" class="btn btn-outline-danger">Cancel</a>
<button type="submit" name="_preview" class="btn btn-primary">Preview</button>
{% if '_preview' in request.POST and not form.errors %}
<button type="submit" name="_apply" class="btn btn-primary">Apply</button>
{% endif %}
<a href="{{ return_url }}" class="btn btn-outline-danger">Cancel</a>
</div>
</form>
</div>

45
netbox/templates/generic/confirmation_form.html
View File

@@ -2,33 +2,24 @@
{% load form_helpers %}
{% block content %}
<div class="row mt-5">
<div class="col col-md-6 offset-md-3">
<form action="" method="post" class="form">
{% csrf_token %}
{% for field in form.hidden_fields %}
{{ field }}
{% endfor %}
<div class="card border-danger">
<h5 class="card-header">{% block confirmation_title %}{% endblock %}</h5>
<div class="card-body">
{% block message %}<p>Are you sure?</p>{% endblock %}
</div>
<div class="card-footer text-end">
<a href="{{ return_url }}" class="btn btn-outline-dark">Cancel</a>
<button type="submit" name="_confirm" class="btn btn-{{ button_class|default:"danger" }}">Confirm</button>
</div>
</div>
</form>
<div class="row mt-5">
<div class="col col-md-6 offset-md-3">
<form action="" method="post" class="form">
{% csrf_token %}
{% for field in form.hidden_fields %}
{{ field }}
{% endfor %}
<div class="card border-danger">
<h5 class="card-header">{% block confirmation_title %}{% endblock %}</h5>
<div class="card-body">
{% block message %}<p>Are you sure?</p>{% endblock %}
</div>
<div class="card-footer text-end">
<button type="submit" name="_confirm" class="btn btn-{{ button_class|default:"danger" }}">Confirm</button>
<a href="{{ return_url }}" class="btn btn-outline-dark">Cancel</a>
</div>
</div>
</form>
</div>
</div>
{% endblock %}

8
netbox/templates/generic/object_edit.html
View File

@@ -94,19 +94,19 @@ Context:
<div class="text-end my-3">
{% block buttons %}
<a class="btn btn-outline-danger" href="{{ return_url }}">Cancel</a>
{% if object.pk %}
<button type="submit" name="_update" class="btn btn-primary">
Save
</button>
{% else %}
<button type="submit" name="_addanother" class="btn btn-outline-primary">
Create & Add Another
</button>
<button type="submit" name="_create" class="btn btn-primary">
Create
</button>
<button type="submit" name="_addanother" class="btn btn-outline-primary">
Create & Add Another
</button>
{% endif %}
<a class="btn btn-outline-danger" href="{{ return_url }}">Cancel</a>
{% endblock buttons %}
</div>
</form>

30
netbox/templates/generic/object_import.html
View File

@@ -5,19 +5,19 @@
{% block title %}{{ obj_type|bettertitle }} Import{% endblock %}
{% block content %}
<div class="row mb-3">
<div class="col col-md-12 col-xl-8 offset-xl-2">
<form action="" method="post" class="form form-horizontal">
{% csrf_token %}
{% render_form form %}
<div class="col col-md-12 text-end">
{% if return_url %}
<a href="{{ return_url }}" class="btn btn-outline-danger">Cancel</a>
{% endif %}
<button type="submit" name="_addanother" class="btn btn-outline-primary">Submit & Import Another</button>
<button type="submit" name="_create" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
<div class="row mb-3">
<div class="col col-md-12 col-xl-8 offset-xl-2">
<form action="" method="post" class="form form-horizontal">
{% csrf_token %}
{% render_form form %}
<div class="col col-md-12 text-end">
<button type="submit" name="_create" class="btn btn-primary">Submit</button>
<button type="submit" name="_addanother" class="btn btn-outline-primary">Submit & Import Another</button>
{% if return_url %}
<a href="{{ return_url }}" class="btn btn-outline-danger">Cancel</a>
{% endif %}
</div>
</form>
</div>
</div>
{% endblock content %}

11
netbox/templates/virtualization/vminterface_edit.html
View File

@@ -55,14 +55,3 @@
</div>
{% endif %}
{% endblock %}
{% block buttons %}
<a href="{{ return_url }}" class="btn btn-outline-danger">Cancel</a>
{% if object.pk %}
<button type="button" return-url="?return_url={% url 'virtualization:vminterface_edit' pk=object.pk %}" class="btn btn-outline-primary">Save & Continue Editing</button>
<button type="submit" name="_update" class="btn btn-primary">Save</button>
{% else %}
<button type="submit" name="_addanother" class="btn btn-outline-primary">Create & Add Another</button>
<button type="submit" name="_create" class="btn btn-primary">Create</button>
{% endif %}
{% endblock %}