Search form in front end.

tabulate · Feb 1, 2016 · d3890b8 · d3890b8
1 parent 961a307
commit d3890b8
Show file tree

Hide file tree

Showing 11 changed files with 155 additions and 67 deletions.
diff --git a/assets/scripts.js b/assets/scripts.js
@@ -198,7 +198,7 @@ jQuery(document).ready(function ($) {
 	/**
 	 * Dynamically add new filters.
 	 */
-	var $addFilter = $("<a class='button'>Add new filter</a>");
+	var $addFilter = $("<a class='button btn btn-default'>Add new filter</a>");
 	$(".tabulate-filters td.buttons").append($addFilter);
 	$addFilter.click(function () {
 		var filterCount = $(this).parents("table").find("tr.tabulate-filter").size();
@@ -249,10 +249,11 @@ jQuery(document).ready(function ($) {
 	// Fire keyup manually.
 	$(".tabulate-filters textarea").change();
 	// Change the controller, action, and page num of the form depending on which button was clicked.
-	$(".tabulate-filters button").click(function(e){
+	$(".tabulate-filters button").click(function(e) {
 		$(this).parents("form").find("input[name='controller']").val($(this).data("controller"));
 		$(this).parents("form").find("input[name='action']").val($(this).data("action"));
 		$(this).parents("form").find("input[name='p']").val($(this).data("p"));
+		$(this).parents("form").find("input[name='tabulate_p']").val($(this).data("p"));
 	});
 
 

diff --git a/assets/style.css b/assets/style.css
@@ -61,8 +61,8 @@ form.tabulate-record .point-column .map { width:450px; height:200px; border:1px
 table.tabulate.widefat th,
 table.tabulate.widefat td { padding:0.25em }
 table.tabulate.widefat thead th .sort-icons a { visibility:hidden }
-table.tabulate.widefat thead th:hover { background-color:#deedee }
-table.tabulate.widefat thead th:hover .sort-icons a { visibility:visible }
+table.tabulate.widefat thead th.sortable:hover { background-color:#deedee }
+table.tabulate.widefat thead th.sortable:hover .sort-icons a { visibility:visible }
 table.tabulate.widefat td { line-height:1em }
 
 

diff --git a/docs/conf.py b/docs/conf.py
@@ -11,8 +11,8 @@
 master_doc = 'index'
 project = u'Tabulate for WordPress'
 copyright = u'2016, Sam Wilson'
-version = '2.5'
-release = '2.5.5'
+version = '2.6'
+release = '2.6.0'
 
 # List of patterns, relative to source directory, that match files and
 # directories to ignore when looking for source files.

diff --git a/docs/shortcode.rst b/docs/shortcode.rst
@@ -24,6 +24,9 @@ Example: ``[tabulate table=widgets search=yes]``
 
 The table format displays an HTML-table displaying all records from the Tabulate-table specified.
 
+The displayed data will be paginated if there are more than a certain number of records,
+and the user will be able to page through the data.
+
 If the additional parameter ``search`` is provided (and given any value at all; ``yes`` is just a convention)
 then a record-filtering form will be displayed.
 

diff --git a/src/Controllers/ShortcodeController.php b/src/Controllers/ShortcodeController.php
@@ -31,6 +31,7 @@ public function run( $atts ) {
 			'format' => 'table',
 			'table' => null,
 			'ident' => null,
+			'search' => null,
 		);
 		$attrs = shortcode_atts( $defaults, $atts );
 		if ( ! isset( $attrs['table'] ) ) {
@@ -46,7 +47,7 @@ public function run( $atts ) {
 		$format_method = $attrs['format'].'_format';
 		if ( is_callable( array( $this, $format_method ) ) ) {
 			wp_enqueue_script( 'tabulate-scripts' );
-			return $this->$format_method( $table, $attrs, $_GET );
+			return $this->$format_method( $table, $attrs, $_REQUEST );
 		} else {
 			return $this->error( "Format '{$attrs['format']}' not available." );
 		}
@@ -110,12 +111,45 @@ protected function list_format( Table $table, $attrs ) {
 		return '<span class="tabulate list-format">' . join( $glue, $titles ) . '</span>';
 	}
 
-	protected function table_format( Table $table, $attrs ) {
-		$template = new Template( 'data_table.html' );
+	protected function table_format( Table $table, $attrs, $query = null ) {
+		// Filters.
+		// Apply filters from the URL query parameters.
+		if ( isset( $query['table'] ) && $query['table'] == $table->get_name() ) {
+			$query_filters = (isset( $query[ 'filter' ] )) ? $query[ 'filter' ] : array();
+			$table->add_filters( $query_filters );
+		}
+		// Add a blank filter.
+		$filters = $table->get_filters();
+		$title_col = $table->get_title_column();
+		$first_filter = ( $title_col ) ? $title_col->get_name() : '';
+		$filters[] = array(
+			'column' => $first_filter,
+			'operator' => 'like',
+			'value' => ''
+		);
+
+		// Pagination.
+		$page_num = 1;
+		if (isset( $query['tabulate_p'] ) && is_numeric( $query['tabulate_p'] ) ) {
+			$page_num = abs( $query['tabulate_p'] );
+		}
+		$table->set_current_page_num( $page_num );
+		if ( isset( $query['tabulate_psize'] ) ) {
+			$table->set_records_per_page( $query['tabulate_psize'] );
+		}
+
+		// Construct the HTML.
+		$template = new Template( 'table/shortcode.html' );
+		$template->filters = $filters;
 		$template->table = $table;
-		$template->links = false;
 		$template->record = $table->get_default_record();
-		$template->records = $table->get_records( false );
+		$template->records = $table->get_records();
+
+		// Add the search form if required.
+		$template->search = ! empty( $attrs['search'] );
+		$template->form_action = get_the_permalink();
+
+		// Return completed HTML output.
 		return $template->render();
 	}
 

diff --git a/src/Controllers/TableController.php b/src/Controllers/TableController.php
@@ -4,10 +4,16 @@
 
 use \WordPress\Tabulate\DB\Grants;
 use \WordPress\Tabulate\DB\Database;
+use \WordPress\Tabulate\DB\Table;
 
 class TableController extends ControllerBase {
 
-	private function get_table( $table_name ) {
+	/**
+	 * Get a Table object for a given table, or an error message and the
+	 * Tabulate overview page.
+	 * @param string $table_name
+	 */
+	protected function get_table( $table_name ) {
 		$db = new Database( $this->wpdb );
 		$table = $db->get_table( $table_name );
 		if ( ! $table ) {
@@ -23,7 +29,7 @@ private function get_table( $table_name ) {
 
 	public function index( $args ) {
 		$table = $this->get_table( $args['table'] );
-		if ( ! $table instanceof \WordPress\Tabulate\DB\Table ) {
+		if ( ! $table instanceof Table ) {
 			return $table;
 		}
 
@@ -59,13 +65,11 @@ public function index( $args ) {
 		$template->controller = 'table';
 		$template->table = $table;
 		$template->columns = $table->get_columns();
-		$template->operators = $table->get_operators();
 		$template->filters = $filters;
 		$template->filter_count = count( $filters );
 		$template->sortable = true;
 		$template->record = $table->get_default_record();
 		$template->records = $table->get_records();
-		$template->record_count = $table->count_records();
 		return $template->render();
 	}
 

diff --git a/tabulate.php b/tabulate.php
@@ -7,9 +7,9 @@
  * License: GPL-2.0+
  * Text Domain: tabulate
  * Domain Path: /languages
- * Version: 2.5.5
+ * Version: 2.6.0
  */
-define( 'TABULATE_VERSION', '2.5.5' );
+define( 'TABULATE_VERSION', '2.6.0' );
 define( 'TABULATE_SLUG', 'tabulate' );
 
 // Load textdomain.

diff --git a/templates/data_table.html b/templates/data_table.html
@@ -7,7 +7,7 @@
 		<tr>
 			<th></th>
 			{% for column in table.get_columns %}
-			<th>
+			<th {% if sortable %}class="sortable"{% endif %}>
 				{{column.get_title}}
 
 				{% if sortable %}

diff --git a/templates/filters.html b/templates/filters.html
@@ -0,0 +1,49 @@
+<table>
+
+	{% for fid,filter in filters %}
+	<tr class="tabulate-filter">
+		<td class="label">
+			<label>
+				{% if fid==0 %}Find records where{% else %}&hellip;and{% endif %}
+			</label>
+		</td>
+		<td>
+			<select name="filter[{{fid}}][column]" class="form-control">
+				{% for column in table.get_columns %}
+				<option value="{{column.get_name}}" {% if column.get_name==filter.column %}selected{% endif %}>
+					{{column.get_title}}
+				</option>
+				{% endfor %}
+			</select>
+		</td>
+		<td>
+			<select name="filter[{{fid}}][operator]" class="form-control">
+				{% for op,name in table.get_operators %}
+				<option value="{{op}}" {% if op==filter.operator %}selected{% endif %}>
+					{{name}}
+				</option>
+				{% endfor %}
+			</select>
+		</td>
+		<td>
+			{% if filter.operator == 'in' or filter.operator == 'not in' %}
+			<textarea name="filter[{{fid}}][value]" class="form-control">{{filter.value}}</textarea>
+			{% else %}
+			<input type="text" name="filter[{{fid}}][value]" value="{{filter.value}}" class="form-control" />
+			{% endif %}
+		</td>
+	</tr>
+	{% endfor %}
+
+	<tr>
+		<td colspan="3">
+		</td>
+		<td class="buttons">
+			<button class="button btn btn-success" data-controller="table" data-action="index">Search</button>
+			{% if table.get_filters > 1 %}
+			<a href="{{clear_url}}" class="button btn btn-default">Clear filters</a>
+			{% endif %}
+		</td>
+	</tr>
+
+</table>
diff --git a/templates/table.html b/templates/table.html
@@ -7,55 +7,8 @@
 	<input type="hidden" name="controller" value="table" />
 	<input type="hidden" name="action" value="index" />
 	<input type="hidden" name="table" value="{{table.get_name}}" />
-	<table>
 
-		{% for fid,filter in filters %}
-		<tr class="tabulate-filter">
-			<td class="label">
-				<label>
-					{% if fid==0 %}Find records where{% else %}&hellip;and{% endif %}
-				</label>
-			</td>
-			<td>
-				<select name="filter[{{fid}}][column]">
-					{% for column in table.get_columns %}
-					<option value="{{column.get_name}}" {% if column.get_name==filter.column %}selected{% endif %}>
-						{{column.get_title}}
-					</option>
-					{% endfor %}
-				</select>
-			</td>
-			<td>
-				<select name="filter[{{fid}}][operator]">
-					{% for op,name in operators %}
-					<option value="{{op}}" {% if op==filter.operator %}selected{% endif %}>
-						{{name}}
-					</option>
-					{% endfor %}
-				</select>
-			</td>
-			<td>
-				{% if filter.operator == 'in' or filter.operator == 'not in' %}
-				<textarea name="filter[{{fid}}][value]">{{filter.value}}</textarea>
-				{% else %}
-				<input type="text" name="filter[{{fid}}][value]" value="{{filter.value}}" />
-				{% endif %}
-			</td>
-		</tr>
-		{% endfor %}
-
-		<tr>
-			<td colspan="3">
-			</td>
-			<td class="buttons">
-				<button class="button" data-controller="table" data-action="index">Search</button>
-				{% if filter_count > 1 %}
-				<a href="{{table.get_url}}" class="button">Clear filters</a>
-				{% endif %}
-			</td>
-		</tr>
-
-	</table>
+	{% include "filters.html" with {clear_url: table.get_url} %}
 
 	{% if records %}
 	<div class='tablenav tablenav-top'>
@@ -81,7 +34,7 @@
 		<!-- Left side -->
 		<div class='tablenav-pages'>
 			<span class="displaying-num">
-				{{record_count|number_format}} record{% if record_count != 1 %}s{% endif %}
+				{{table.count_records|number_format}} record{% if record_count != 1 %}s{% endif %}
 			</span>
 
 			{% if table.get_page_count > 1 %}

diff --git a/templates/table/shortcode.html b/templates/table/shortcode.html
@@ -0,0 +1,44 @@
+<form action="{{form_action}}" method="get" class="tabulate-filters about-description">
+	<input type="hidden" name="table" value="{{table.get_name}}" />
+
+	{% if search %}
+	{% include "filters.html" with {clear_url:form_action} %}
+	{% endif %}
+
+	<p class="tabulate paginate">
+		<span class="displaying-num">
+			{{table.count_records|number_format}} record{% if record_count != 1 %}s{% endif %}
+		</span>
+
+		{% if table.get_page_count > 1 %}
+		<span class='pagination-links'>
+			<button class='first-page {%if table.get_current_page_num == 1%}disabled{% endif %} button' title='Go to the first page'
+				data-p="1" >
+				&laquo;
+			</button>
+			<button class='prev-page {%if table.get_current_page_num == 1%}disabled{% endif %} button' title='Go to the previous page'
+				data-p="{{(table.get_current_page_num - 1)}}">
+				&lsaquo;
+			</button>
+			<span class="paging-input">
+				<input class='current-page' id='current-page-selector' title='Current page'
+					type='text' name='tabulate_p' value='{{table.get_current_page_num}}' size='1' />
+				of
+				<span class='total-pages'>{{table.get_page_count|number_format}}</span> pages
+			</span>
+			<button class='next-page {%if table.get_current_page_num == table.get_page_count%}disabled{% endif %} button'
+				data-p="{{(table.get_current_page_num + 1)}}" title='Go to the next page'>
+				&rsaquo;
+			</button>
+			<button class='last-page {%if table.get_current_page_num == table.get_page_count%}disabled{% endif %} button'
+				data-p="{{table.get_page_count}}" title='Go to the last page'>
+				&raquo;
+			</button>
+		</span>
+		{% endif %}
+
+	</p><!-- .tabulate.paginate -->
+
+</form>
+
+{% include 'data_table.html' with { links:false } %}