Permalink
Browse files

ENHANCEMENT Generic search form uses loadPanel() rather than being ti…

…ed to GridField (requires backend changes, see AssetAdmin), and uses jquery.form to do resets
  • Loading branch information...
1 parent 6d89994 commit 9f5e26d12b45c66a80b0317254809f02a3b2dbd3 @chillu chillu committed Mar 2, 2012
Showing with 20 additions and 113 deletions.
  1. +20 −113 admin/javascript/LeftAndMain.js
@@ -390,128 +390,35 @@ jQuery.noConflict();
$('.cms-container').entwine('ss').loadPanel(url);
}
});
-
- $('.cms-filter-form').entwine({
-
- GridField: null,
-
- /**
- * Function onmatch
- *
- * Try to find the related gridfield by looking up the data-gridfield attribute on this
- * filter form
- */
- onmatch: function() {
- var gridfieldName = this.attr('data-gridfield');
- this.setGridField($('.grid[data-name='+gridfieldName+']'));
- var self = this;
- this.getGridField().bind('reload', function(e, gridfield){
- self.setFilterValues($(gridfield).getState());
- });
- },
- /**
- * Function: onsubmit
- *
- * Parameters:
- * (Event) e
- */
- onsubmit: function(e) {
- this.changeState(jQuery(this).find(':submit:first'));
- return false;
- },
-
- /**
- * Function: setFilterValues
- *
- * Parameters:
- * (JSON) state
- *
- */
- setFilterValues: function(state){
- var filterValues = state.GridFieldFilter.Columns;
- if(jQuery.isEmptyObject(filterValues)){
- this.resetFilterForm();
- return;
- }
- this.filterFields().each(function(idx, element) {
- if(typeof filterValues[element.name] !== "undefined") {
- $(element).val(filterValues[element.name]);
- }
+ /**
+ * Generic search form in the CMS, often hooked up to a GridField results display.
@sminnee

sminnee Mar 5, 2012

Owner

So, you can define the URL by the search form's action, but the panel that you're loading into seems implicit. Perhaps it would be better to have a data-targetpanel="<panel-id>" attribute on the form, rather than using this.closest('.cms-container'), which seems quite brittle?

@chillu

chillu Mar 5, 2012

Owner

$('.cms-container') is more or less a "controller global", rather than the actual panel it loads into.
The panel defaults to ".cms-content", but can be overwritten via loadPanel(url, {selector: '.cms-edit-form'}).
That's mainly architected this way to keep the loading state reproducible in HTML5 history.
We could put a loadPanel() entwine method on all panels instead, and infer the selector from the DOM,
although I haven't had a chance to think this through ... would like Hamish's input on the whole architecture at some point anyway :)

+ */
+ $('.cms-search-form').entwine({
+
+ onsubmit: function() {
+ // Remove empty elements and make the URL prettier
+ var nonEmptyInputs = this.find(':input:not(:submit)').filter(function() {
+ // Use fieldValue() from jQuery.form plugin rather than jQuery.val(),
+ // as it handles checkbox values more consistently
+ var vals = $.grep($(this).fieldValue(), function(val) { return (val);});
+ return (vals.length);
});
- },
-
- /**
- * Function: onreset
- *
- * Parameters:
- * (Event) e
- */
- onreset: function(e) {
- if(this.resetFilterForm()) {
- this.changeState(jQuery(this));
- }
+ var url = this.attr('action');
+ if(nonEmptyInputs.length) url += '?' + nonEmptyInputs.serialize();
+ this.closest('.cms-container').entwine('ss').loadPanel(url);
return false;
},
/**
- * Function resetFilterForm
- *
- **/
- resetFilterForm: function() {
- var needUpdate = false;
- this.filterFields().each(function(idx, element) {
- if($(element).val()) {
- needUpdate = true;
- $(element).val('');
- }
- if($(element).hasClass('chzn-done')){
- $(element).trigger("liszt:updated");
- }
- });
- return needUpdate;
- },
-
- /**
- * Function: changeState
- *
- * Change the state of the gridfield, reloads it's and set loading classes on elements
- *
- * Parameters:
- * (Element) element - the element that will get a loading class added / removed
- *
+ * Resets are processed on the serverside, so need to trigger a submit.
*/
- changeState: function(element) {
- element.addClass('loading');
- this.getGridField().setState('GridFieldFilter', {'Columns': this.filterValues()});
- this.getGridField().reload(null, function(){
- element.removeClass('loading');
- });
- },
-
- /**
- * Function filterFields
- * Get all fields that contains filter values
- *
- */
- filterFields: function() {
- return this.find(':input').not(".action, .hidden");
- },
-
- /**
- * Function: filterValues
- *
- * Returns an key-value array for the filter values set in the filter form
- *
- */
- filterValues: function() {
- var filterColumns = {};
- this.filterFields().each(function(idx,elm){
- filterColumns[$(elm).attr('name')] = $(elm).val();
- });
- return filterColumns;
+ onreset: function(e) {
+ this.clearForm();
+ this.submit();
}
+
});
}(jQuery));

1 comment on commit 9f5e26d

Owner

sminnee commented on 9f5e26d Mar 5, 2012

Great to see so much custom JS being rendered unnecessary, but I just had one comment above.

Please sign in to comment.