ENHANCEMENT Added filter/search capability to AssetTableField, this is similar to MemberTableField, except you search by file name.

ENHANCEMENT Refactored CSS applied to filter boxes by using common selector

git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/cms/trunk@65173 467b73ca-7a2a-4603-9d3b-597d59a354a9

code/AssetAdmin.php

@@ -76,6 +76,7 @@ class AssetAdmin extends LeftAndMain {
 
 		// needed for MemberTableField (Requirements not determined before Ajax-Call)
 		Requirements::javascript(SAPPHIRE_DIR . "/javascript/ComplexTableField.js");
+		Requirements::javascript(CMS_DIR . '/javascript/AssetTableField.js');
 		Requirements::css(THIRDPARTY_DIR . "/greybox/greybox.css");
 		Requirements::css(SAPPHIRE_DIR . "/css/ComplexTableField.css");
 

code/AssetTableField.php

@@ -19,9 +19,22 @@ class AssetTableField extends ComplexTableField {
 	function __construct($controller, $name, $sourceClass, $fieldList, $detailFormFields, $sourceFilter = "", $sourceSort = "", $sourceJoin = "") {
 		parent::__construct($controller, $name, $sourceClass, $fieldList, $detailFormFields, $sourceFilter, $sourceSort, $sourceJoin);
 
-		$this->sourceSort = "Title";		
+		Requirements::javascript(CMS_DIR . '/javascript/AssetTableField.js');
+		
+		$SNG_file = singleton('File');
+		
+		// If search was request, filter the results here
+		$SQL_search = (!empty($_REQUEST['FileSearch'])) ? Convert::raw2sql($_REQUEST['FileSearch']) : null;
+		if($SQL_search) {
+			$searchFilters = array();
+			foreach($SNG_file->searchableFields() as $fieldName => $fieldSpec) {
+				if(strpos($fieldName, '.') === false) $searchFilters[] = "`$fieldName` LIKE '%{$SQL_search}%'";
+			}
+			$this->sourceFilter = '(' . implode(' OR ', $searchFilters) . ')';
+		}		
+		
+		$this->sourceSort = 'Title';
 		$this->Markable = true;
-
 	}
 	
 	function setFolder($folder) {
@@ -142,6 +155,34 @@ class AssetTableField extends ComplexTableField {
 		
 		return $detailFormFields;
 	}
+
+	/**
+	 * Provide some HTML for a search form, to be 
+	 * added above the AssetTable field, allowing
+	 * a user to filter the current table's files
+	 * by their filename.
+	 *
+	 * @return string HTML for search form
+	 */
+	function SearchForm() {
+		$searchFields = new FieldGroup(
+			new TextField('FileSearch', _t('MemberTableField.SEARCH', 'Search')),
+			new HiddenField("ctf[ID]", '', $this->ID),
+			new HiddenField('FileFieldName', '', $this->name)
+		);
+
+		$actionFields = new LiteralField(
+			'FileFilterButton',
+			'<input type="submit" class="action" name="FileFilterButton" value="' . _t('MemberTableField.FILTER', 'Filter') . '" id="FileFilterButton"/>'
+		);
+		
+		$fieldContainer = new FieldGroup(
+			$searchFields,
+			$actionFields
+		);
+
+		return $fieldContainer->FieldHolder();
+	}
 	
 }
 ?>

css/cms_right.css

@@ -374,24 +374,20 @@
 /**
  * TableField Subclasses
  */
-div.MemberListFilter,
+ 
-div.MemberFilter,
+/* Filter box (for search/filter box above a table on Asset/MemberTableField) */
-div.CommentFilter {
+div.filterBox {
-	width: 37em;
+	width: 33em;
 	margin: 5px 0;
 	padding: 5px;
 	background: #ebeadb;
 	border: 1px solid #aca899;
 }
-	div.MemberListFilter .middleColumn,
+	div.filterBox .middleColumn {
-	div.MemberFilter .middleColumn,
+		background: none !important;
-	div.CommentFilter .middleColumn {
-		display: inline !important;
 	}
 
-	.right form div.MemberListFilter label,
+	.right form div.filterBox label {
-	.right form div.MemberFilter label,
-	.right form div.CommentFilter label {
 		display: block;
 		width: 5em;
 		float: left;
@@ -401,20 +397,15 @@ div.CommentFilter {
 		font-size: 12px;
 	}
 	
-	div.MemberListFilter div.field,
+	div.filterBox div.field {
-	div.MemberFilter div.field,
-	div.CommentFilter div.field {
 		margin-left: 0 !important;
+		padding: 0;
 		font-size: 12px;
 		display: inline;
 	}
 	
-	div.MemberListFilter input,
+	div.filterBox input,
-	div.MemberListFilter select,
+	div.filterBox select {
-	div.MemberFilter input,
-	div.MemberFilter select,
-	div.CommentFilter input,
-	div.CommentFilter select {
 		width: auto;
 	}
 

javascript/AssetTableField.js

@@ -0,0 +1,102 @@
+AssetTableField = Class.create();
+AssetTableField.applyTo('#Form_EditForm_Files');
+AssetTableField.prototype = {
+	
+	initialize: function() {
+		Behaviour.register({
+			'#Form_EditForm div.FileFilter input' : {
+				onkeypress : this.prepareSearch.bind(this)
+			},
+
+			'#Form_EditForm' : {
+				changeDetection_fieldsToIgnore : {
+					'ctf[start]' : true,
+					'ctf[ID]' : true,
+					'FileFilterButton' : true,
+					'FileFieldName' : true,
+					'FileSearch' : true
+				}
+			}
+		});
+	},
+	
+	// prevent submission of wrong form-button (FileFilterButton)
+	prepareSearch: function(e) {
+		// IE6 doesnt send an event-object with onkeypress
+		var event = (e) ? e : window.event;
+		var keyCode = (event.keyCode) ? event.keyCode : event.which;
+		
+		if(keyCode == Event.KEY_RETURN) {
+			var el = Event.element(event);
+			$('FileFilterButton').onclick(event);
+			Event.stop(event);
+			return false;
+		}
+	}
+}
+
+FileFilterButton = Class.create();
+FileFilterButton.applyTo('#FileFilterButton');
+FileFilterButton.prototype = {
+	initialize: function() {
+		this.inputFields = new Array();
+		
+		var childNodes = this.parentNode.parentNode.getElementsByTagName('input');
+		
+		for( var index = 0; index < childNodes.length; index++ ) {
+			if( childNodes[index].tagName ) {
+				childNodes[index].resetChanged = function() { return false; }
+				childNodes[index].isChanged = function() { return false; }
+				this.inputFields.push( childNodes[index] );
+			}
+		}
+		
+		childNodes = this.parentNode.getElementsByTagName('select');
+		
+		for( var index = 0; index < childNodes.length; index++ ) {
+			if( childNodes[index].tagName ) {
+				childNodes[index].resetChanged = function() { return false; }
+				childNodes[index].field_changed = function() { return false; }
+				this.inputFields.push( childNodes[index] );
+			}
+		}
+	},
+	
+	isChanged: function() {
+		return false;
+	},
+	
+	onclick: function(e) {
+		if(!$('ctf-ID') || !$('FileFieldName')) {
+			return false;
+		}
+
+		try {
+			var form = Event.findElement(e, 'form');
+			var fieldName = $('FileFieldName').value;
+			var fieldID = form.id + '_' + fieldName;
+	    
+			var updateURL = form.action + '/field/' + fieldName + '?ajax=1';
+			for(var index = 0; index < this.inputFields.length; index++) {
+				if(this.inputFields[index].tagName) {
+					updateURL += '&' + this.inputFields[index].name + '=' + encodeURIComponent(this.inputFields[index].value);
+				}
+			}
+			
+			updateURL += ($('SecurityID') ? '&SecurityID=' + $('SecurityID').value : '');
+
+			new Ajax.Updater(fieldID, updateURL, {
+				onComplete: function() {
+					Behaviour.apply($(fieldID), true);
+				},
+				onFailure: function(response) {
+					errorMessage('Could not filter results: ' + response.responseText );
+				}
+			});
+		} catch(er) {
+			errorMessage('Error searching');
+		}
+
+		return false;	
+	}
+}

templates/Includes/AssetTableField.ss

@@ -1,4 +1,7 @@
 <div id="$id" class="$CSSClasses field">
+	<div class="FileFilter filterBox">
+		$SearchForm
+	</div>
 	<% include TableListField_PageControls %>
 	<table class="data">
 		<thead>

templates/Includes/CommentTableField.ss

@@ -1,5 +1,5 @@
 <div id="$id" class="$CSSClasses">
-	<div class="CommentFilter">
+	<div class="CommentFilter filterBox">
 		$SearchForm
 	</div>
 	<% include TableListField_PageControls %>

templates/Includes/MemberTableField.ss

@@ -1,5 +1,5 @@
 <div id="$id" class="$CSSClasses">
-	<div class="MemberFilter">
+	<div class="MemberFilter filterBox">
 		$SearchForm
 	</div>
 	<div id="MemberList">