- Update the markup of the multiple object action form into a valid markup. The checkboxes are now outside the form's tags.

- Add beforeSerialization callback support to ajaxForm.
- Add a callback to add the external checkboxes to the multiple object action form being submitted.

Signed-off-by: Eric Riggs <ericriggs42@gmail.com>
This commit is contained in:
Eric Riggs
2018-03-07 02:13:38 -04:00
committed by Roberto Rosario
parent fc8dc74de4
commit 57f03b21fc
5 changed files with 193 additions and 153 deletions

View File

@@ -1,19 +1,19 @@
'use strict';
var app = new App();
var partialNavigation = new PartialNavigation({
initialURL: initialURL,
excludeAnchorClasses: ['fancybox', 'new_window'],
formBeforeSerializeCallbacks: [App.MultiObjectFormProcess],
});
jQuery(document).ready(function() {
app.setupFullHeightResizing();
var partialNavigation = new PartialNavigation({
initialURL: initialURL,
excludeAnchorClasses: ['fancybox', 'new_window'],
});
partialNavigation.initialize();
});
var afterBaseLoad = function () {
MayanImage.intialize();
app.doToastrMessages();
app.setupAutoSubmit();
app.setupItemsSelector();

View File

@@ -10,6 +10,30 @@ var App = function (parameters) {
// Class methods and variables
App.MultiObjectFormProcess = function ($form, options) {
/*
* ajaxForm callback to add the external item checkboxes to the
* submitted form
*/
if ($form.hasClass('form-multi-object-action')) {
// Turn form data into an object
var formArray = $form.serializeArray().reduce(function (obj, item) {
obj[item.name] = item.value;
return obj;
}, {});
// Add all checked checkboxes to the form data
$('.form-multi-object-action-checkbox:checked').each(function() {
var $this = $(this);
formArray[$this.attr('name')] = $this.attr('value');
});
// Set the form data as the data to send
options.data = formArray;
}
}
App.tagSelectionTemplate = function (tag, container) {
var $tag = $(
'<span class="label label-tag" style="background: ' + tag.element.style.color + ';"> ' + tag.text + '</span>'
@@ -97,7 +121,7 @@ App.prototype.doToastrMessages = function () {
App.prototype.setupAutoSubmit = function () {
$('.select-auto-submit').change(function () {
if ($(this).val()) {
this.form.submit();
$(this.form).trigger('submit');
}
});
}

View File

@@ -12,14 +12,24 @@ $.fn.hasAnyClass = function() {
var PartialNavigation = function (parameters) {
parameters = parameters || {};
this.initialURL = parameters.initialURL || null;
this.excludeAnchorClasses = parameters.excludeAnchorClasses || [];
// lastLocation - used as the AJAX referer
this.lastLocation = null;
// initialURL - the URL to send users when trying to access the / URL
this.initialURL = parameters.initialURL || null;
// excludeAnchorClasses - Anchors with any of these classes will not be processes as AJAX anchors
this.excludeAnchorClasses = parameters.excludeAnchorClasses || [];
// formBeforeSerializeCallbacks - Callbacks to execute before submitting an ajaxForm
this.formBeforeSerializeCallbacks = parameters.formBeforeSerializeCallbacks || [];
if (!this.initialURL) {
alert('Need to setup initialURL');
}
}
PartialNavigation.prototype.initialize = function () {
this.setupAjaxAnchors();
this.setupAjaxNavigation();
this.setupAjaxForm();
@@ -137,6 +147,11 @@ PartialNavigation.prototype.setupAjaxForm = function () {
$('form').ajaxForm({
async: false,
beforeSerialize: function($form, options) {
$.each(app.formBeforeSerializeCallbacks, function (index, value) {
value($form, options);
});
},
beforeSubmit: function(arr, $form, options) {
console.log('>> ajaxForm.beforeSubmit.$form.target: ' + $form.attr('action'));
var uri = new URI(location);

View File

@@ -33,7 +33,7 @@
<div class="well center-block">
<div class="clearfix">
<div class="pull-right">
<form action="{% url 'common:multi_object_action_view' %}" class="pure-form" method="get">
<form action="{% url 'common:multi_object_action_view' %}" class="form-multi-object-action" method="get">
{% if object_list %}
{% if not hide_multi_item_actions %}
{% get_multi_item_links_form object_list %}
@@ -45,87 +45,88 @@
</fieldset>
{% endif %}
{% endif %}
</form>
</div>
</div>
{% if object_list %}
<hr style="border-bottom: 1px solid lightgrey;">
{% endif %}
{% if scrollable_content %}
<div style="border: 1px solid; height: {{ scrollable_content_height }}; overflow: auto;">
{% endif %}
<div class="row">
{% for object in object_list %}
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
<div class="panel panel-primary panel-item">
<div class="panel-heading">
{% if object_list %}
<hr style="border-bottom: 1px solid lightgrey;">
{% endif %}
{% if scrollable_content %}
<div style="border: 1px solid; height: {{ scrollable_content_height }}; overflow: auto;">
{% endif %}
<div class="form-group">
<div class="checkbox">
<label for="id_indexes_0">
{% if multi_item_actions %}
{% if multi_select_item_properties %}
<input class="checkbox" type="checkbox" name="properties_{{ object|get_encoded_parameter:multi_select_item_properties }}" value="" />
<div class="row">
{% for object in object_list %}
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
<div class="panel panel-primary panel-item">
<div class="panel-heading">
<div class="form-group">
<div class="checkbox">
<label for="id_indexes_0">
{% if multi_item_actions %}
{% if multi_select_item_properties %}
<input class="form-multi-object-action-checkbox checkbox" type="checkbox" name="properties_{{ object|get_encoded_parameter:multi_select_item_properties }}" />
{% else %}
<input class="form-multi-object-action-checkbox checkbox" type="checkbox" name="pk_{{ object.pk }}" />
{% endif %}
{% endif %}
<span style="color: white; word-break: break-all; overflow-wrap: break-word;">
{% if not hide_object %}
{% if main_object %}
{% with object|object_property:main_object as object %}
{% if not hide_link %}<a href="{{ object.get_absolute_url }}">{{ object }}</a>{% else %}{{ object }}{% endif %}
{% endwith %}
{% else %}
<input class="checkbox" type="checkbox" name="pk_{{ object.pk }}" value="" />
{% if not hide_link %}<a href="{{ object.get_absolute_url }}">{{ object }}</a>{% else %}{{ object }}{% endif %}
{% endif %}
{% endif %}
<span style="color: white; word-break: break-all; overflow-wrap: break-word;">
{% if not hide_object %}
{% if main_object %}
{% with object|object_property:main_object as object %}
{% if not hide_link %}<a href="{{ object.get_absolute_url }}">{{ object }}</a>{% else %}{{ object }}{% endif %}
{% endwith %}
{% else %}
{% if not hide_link %}<a href="{{ object.get_absolute_url }}">{{ object }}</a>{% else %}{{ object }}{% endif %}
{% endif %}
{% endif %}
</span>
</label>
</div>
</span>
</label>
</div>
</div>
<div class="panel-body">
{% if not hide_columns %}
{% for column in object|get_source_columns %}
<div class="text-center" style="">{% source_column_resolve column=column %}{{ column_result }}</div>
{% endfor %}
{% endif %}
</div>
<div class="panel-body">
{% for column in extra_columns %}
<div class="text-center"><span class="list-extra-column-label">{{ column.name }}</span>: {{ object|object_property:column.attribute }}</div>
{% if not hide_columns %}
{% for column in object|get_source_columns %}
<div class="text-center" style="">{% source_column_resolve column=column %}{{ column_result }}</div>
{% endfor %}
{% endif %}
{% if not hide_links %}
<p class="text-center">
{% get_menu_links 'object menu' source=object as resolved_links %}
{% for object_navigation_links in resolved_links %}
{% with 'true' as as_dropdown %}
{% include 'navigation/generic_navigation.html' %}
{% endwith %}
{% endfor %}
</p>
{% endif %}
{% for column in extra_columns %}
<div class="text-center"><span class="list-extra-column-label">{{ column.name }}</span>: {{ object|object_property:column.attribute }}</div>
{% endfor %}
{% if not hide_links %}
<p class="text-center">
{% get_menu_links 'object menu' source=object as resolved_links %}
{% for object_navigation_links in resolved_links %}
{% with 'true' as as_dropdown %}
{% include 'navigation/generic_navigation.html' %}
{% endwith %}
{% endfor %}
</p>
{% endif %}
</div>
</div>
</div>
{% empty %}
<div class="col-xs-12">
<p class="text-center">{% trans 'No results' %}</p>
</div>
{% endfor %}
</div>
{% if scrollable_content %}
</div>
{% endif %}
</form>
{% empty %}
<div class="col-xs-12">
<p class="text-center">{% trans 'No results' %}</p>
</div>
{% endfor %}
</div>
{% if scrollable_content %}
</div>
{% endif %}
{% include 'pagination/pagination.html' %}
</div>
</div>

View File

@@ -22,7 +22,7 @@
<div class="well center-block">
<div class="clearfix">
<div class="pull-right">
<form action="{% url 'common:multi_object_action_view' %}" class="pure-form" method="get">
<form action="{% url 'common:multi_object_action_view' %}" class="form-multi-object-action" method="get">
{% if object_list %}
{% if not hide_multi_item_actions %}
{% get_multi_item_links_form object_list %}
@@ -33,92 +33,92 @@
</fieldset>
{% endif %}
{% endif %}
</form>
</div>
</div>
{% if scrollable_content %}
<div style="border: 1px solid; height: {{ scrollable_content_height }}; overflow: auto;">
{% endif %}
{% if scrollable_content %}
<div style="border: 1px solid; height: {{ scrollable_content_height }}; overflow: auto;">
{% endif %}
<div class="table-responsive">
<table class="table table-condensed table-striped">
<tbody>
{% if not hide_header %}
<tr>
{% if multi_item_actions %}
<th class="first"><input type="checkbox" class="checkbox toggle" /></th>
{% endif %}
{% if not hide_object %}
<th>{% trans 'Identifier' %}</th>
{% endif %}
{% if not hide_columns %}
{% for column in object_list|get_source_columns %}
<th>{{ column.label }}</th>
{% endfor %}
{% endif %}
{% for column in extra_columns %}
<th>{{ column.name }}</th>
{% endfor %}
{% if not hide_links %}
<th class="">&nbsp;</th>
{% endif %}
</tr>
<div class="table-responsive">
<table class="table table-condensed table-striped">
<tbody>
{% if not hide_header %}
<tr>
{% if multi_item_actions %}
<th class="first"><input class="form-multi-object-action-checkbox checkbox" type="checkbox" /></th>
{% endif %}
{% for object in object_list %}
<tr>
{% if multi_item_actions %}
<td>
{% if multi_select_item_properties %}
<input type="checkbox" class="checkbox" name="properties_{{ object|get_encoded_parameter:multi_select_item_properties }}" value="" />
{% else %}
<input type="checkbox" class="checkbox" name="pk_{{ object.pk }}" value="" />
{% endif %}
</td>
{% endif %}
{% if not hide_object %}
{% if main_object %}
{% with object|object_property:main_object as object %}
<td>{% if not hide_link %}<a href="{{ object.get_absolute_url }}">{{ object }}</a>{% else %}{{ object }}{% endif %}</td>
{% endwith %}
{% else %}
<td>{% if not hide_link %}<a href="{{ object.get_absolute_url }}">{{ object }}</a>{% else %}{{ object }}{% endif %}</td>
{% endif %}
{% endif %}
{% if not hide_columns %}
{% for column in object|get_source_columns %}
<td>{% source_column_resolve column=column %}{{ column_result }}</td>
{% endfor %}
{% endif %}
{% for column in extra_columns %}
<td>{{ object|object_property:column.attribute }}</td>
{% if not hide_object %}
<th>{% trans 'Identifier' %}</th>
{% endif %}
{% if not hide_columns %}
{% for column in object_list|get_source_columns %}
<th>{{ column.label }}</th>
{% endfor %}
{% if not hide_links %}
<td class="last">
{% get_menu_links 'object menu' source=object as resolved_links %}
{% for object_navigation_links in resolved_links %}
{% with 'true' as horizontal %}
{% include 'navigation/generic_navigation.html' %}
{% endwith %}
{% endfor %}
</td>
{% endif %}
</tr>
{% empty %}
<tr><td class="text-center" colspan=99>{% trans 'No results' %}</td></tr>
{% endfor %}
</tbody>
</table>
</div>
{% endif %}
{% for column in extra_columns %}
<th>{{ column.name }}</th>
{% endfor %}
{% if not hide_links %}
<th class="">&nbsp;</th>
{% endif %}
</tr>
{% endif %}
{% for object in object_list %}
<tr>
{% if multi_item_actions %}
<td>
{% if multi_select_item_properties %}
<input type="checkbox" class="checkbox" name="properties_{{ object|get_encoded_parameter:multi_select_item_properties }}" value="" />
{% else %}
<input type="checkbox" class="checkbox" name="pk_{{ object.pk }}" value="" />
{% endif %}
</td>
{% endif %}
{% if not hide_object %}
{% if main_object %}
{% with object|object_property:main_object as object %}
<td>{% if not hide_link %}<a href="{{ object.get_absolute_url }}">{{ object }}</a>{% else %}{{ object }}{% endif %}</td>
{% endwith %}
{% else %}
<td>{% if not hide_link %}<a href="{{ object.get_absolute_url }}">{{ object }}</a>{% else %}{{ object }}{% endif %}</td>
{% endif %}
{% endif %}
{% if not hide_columns %}
{% for column in object|get_source_columns %}
<td>{% source_column_resolve column=column %}{{ column_result }}</td>
{% endfor %}
{% endif %}
{% for column in extra_columns %}
<td>{{ object|object_property:column.attribute }}</td>
{% endfor %}
{% if not hide_links %}
<td class="last">
{% get_menu_links 'object menu' source=object as resolved_links %}
{% for object_navigation_links in resolved_links %}
{% with 'true' as horizontal %}
{% include 'navigation/generic_navigation.html' %}
{% endwith %}
{% endfor %}
</td>
{% endif %}
</tr>
{% empty %}
<tr><td class="text-center" colspan=99>{% trans 'No results' %}</td></tr>
{% endfor %}
</tbody>
</table>
</div>
{% if scrollable_content %}
</div>
{% endif %}
{% if scrollable_content %}
</div>
{% endif %}
</form>
{% include 'pagination/pagination.html' %}
</div>
</div>