beans.html

{% if query|length > 0 %}
{%	set title = beantype ~ ': search results for "' ~ query ~ '"' %}
{% else %}
{%	set title = beantype %}
{% endif %}

{% extends "admin/base.html" %}

{% block content %}

	<h1 class="page-header">{{ beantype }}{% if query|length > 0 %}: search results for "{{ query }}"{% endif %}</h1>

	<div class="row">

		<div class="col-md-4">
			<p>{{ description }}<br /><br /></p>
		</div>

		<div class="col-md-4 text-center">
			<form class="form-inline" method="get" action="{{ page_url }}">
				<div class="form-group">
					<input type="text" class="form-control" name="*has" placeholder="Search">
				</div>
				<button type="submit" class="btn btn-default">Search</button>
			</form>
		</div>

		<div class="col-md-4">
			<a href="{{ path_for('addbean', { 'beantype': beantype }) }}" class="btn btn-primary pull-right">Add new {{ beantype }}</a>
		</div>

	</div>

{% if search.result|length > 0 %}
	<div class="table-responsive">
		<table class="table table-hover">
			<thead>
				<tr>
					<th>{{ properties[0].description }}</th>
					<th>{{ properties[1].description }}</th>
					<th>{{ properties[2].description }}</th>
{% if position %}
					<th>{{ position.description }}</th>
{% endif %}
					<th width="50">Remove</th>
					<th width="50">Edit</th>
				</tr>
			</thead>
			<tbody>
{% 	for bean in search.result %}
				<tr>
					<td><a href="{{ path_for('getbean', { 'beantype': beantype, 'id': bean.id }) }}">{{ bean[properties[0].name]|striptags[:75] }}</a></td>
					<td>{{ bean[properties[1].name]|striptags[:75] }}</td>
					<td>{{ bean[properties[2].name]|striptags[:75] }}</td>
{%		if position %}
					<td>
						<div class="btn-group">
							<!-- top -->
							<span class="btn btn-default btn-xs move" data-action="{{ path_for('putbean', { 'beantype': beantype, 'id': bean.id }) }}" data-{{ position.name }}="0">&uarr;&uarr;</span>
							<!-- up 1 -->
							<span class="btn btn-default btn-xs move" data-action="{{ path_for('putbean', { 'beantype': beantype, 'id': bean.id }) }}" data-{{ position.name }}="{{ bean[position.name] - 1 }}">&uarr;</span>
							<!-- down 1 -->
							<span class="btn btn-default btn-xs move" data-action="{{ path_for('putbean', { 'beantype': beantype, 'id': bean.id }) }}" data-{{ position.name }}="{{ bean[position.name] + 1 }}">&darr;</span>
							<!-- bottom-->
							<span class="btn btn-default btn-xs move" data-action="{{ path_for('putbean', { 'beantype': beantype, 'id': bean.id }) }}" data-{{ position.name }}="{{ search.total }}">&darr;&darr;</span>
						</div>
					</td>
{%		endif %}
					<td width="50">
						<form method="post" role="form" enctype="multipart/form-data" action="{{ path_for('deletebean', { 'beantype': beantype, 'id': bean.id }) }}">
							<input type="hidden" name="_METHOD" value="delete"/>
							<button type="submit" class="btn btn-default btn-xs delete" data-title="{{ bean.title }}">Delete</button>
						</form>
					</td>
					<td width="50"><a href="{{ path_for('getbean', { 'beantype': beantype, 'id': bean.id }) }}" class="btn btn-default btn-xs">Edit</a></td>
				</tr>
{% 	endfor %}
			</tbody>
		</table>
	</div>
{% else %}
	<hr>
{%	if search.query %}
	<p class="text-muted text-center">There is no {{ beantype }} matching your search. You can <a href="{{ path_for('addbean', { 'beantype': beantype }) }}">add</a> one.</p>
{%	else %}
	<p class="text-muted text-center">There is no {{ beantype }} yet. You can <a href="{{ path_for('addbean', { 'beantype': beantype }) }}">add</a> one.</p>
{%	endif %}
{% endif %}

{% if search.pages and search.pages > 1 %}
	<ul class="pagination">
{% 	for page in 1..search.pages %}
	<li {% if search.page == page-1 %}class="active"{% endif %}>
		<a href="{{ page_url }}{% if search.query %}?{{ search.query }}&{% else %}?{% endif %}limit={{ search.limit }}&offset={{ (page - 1) * search.limit }}">{{ page }}</a>
	</li>
{% 	endfor %}
	</ul>
{% endif %}

{% endblock content %}

{% block javascript %}
	{{ parent() }}

	<script type="text/javascript">

		// Create a HTML form and submit it.
		// This keeps the code more readbale
		$( '.move' ).on( 'click', function(e) {
			e.preventDefault();
			var newForm = $( '<form>', {
				'action': $(this).data('action'),
				'method': 'post',
				'enctype': 'multipart/form-data'
			}).append( $('<input>', {
				'name': '_METHOD',
				'value': 'put'
			})).append( $('<input>', {
				'name': '{{ position.name }}',
				'value': $(this).data('{{ position.name }}')
			})).append( $('<input>', {
				'name': 'submit',
				'value': 'saveandclose',
				'type': 'submit',
				'id': 'submit'
			}));
			newForm.hide().appendTo('body');
			$('#submit').click(); // Do it this way because submit button also has value.
		});

		$( '.delete' ).on( 'click', function(e) {
			e.preventDefault();
			if( confirm( 'Are you sure you want to delete "' + $(this).data('title') + '"?' ) ) {
				$(this).parent().submit();
			}
		});
	</script>
{% endblock javascript %}