- 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:
committed by
Roberto Rosario
parent
fc8dc74de4
commit
57f03b21fc
@@ -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();
|
||||
|
||||
@@ -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');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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=""> </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=""> </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>
|
||||
|
||||
Reference in New Issue
Block a user