seitime-frappe/frappe/templates/pages/list.html
2014-10-17 15:24:25 +05:30

84 lines
2.1 KiB
HTML

{% block title %}{{ doctype }} {{ _("List") }}{% endblock %}
{% block header %}
<h2>{{ doctype }} {{ _("List") }}</h2>
{% endblock %}
{% block content %}
<div class="row">
<div class=" col-sm-offset-8 col-sm-4">
<form class="form-inline form-search" action="/list">
<div class="input-group">
<input class="form-control" doctype="text" name="txt"
placeholder="Search..." value="{{ txt or '' }}">
<input type="hidden" name="doctype" value="{{ doctype }}">
<span class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="icon-search"></i></button>
</span>
</div>
</form>
</div>
</div>
<br>
{% if txt %}
<div class="alert alert-warning">Results filtered by <b>{{ txt }}</b>. <a href="/list?doctype={{ doctype }}" class="close">&times;</a></div>
{% endif %}
<div data-doctype="{{ doctype }}" data-txt="{{ txt or '[notxt]' }}">
{% for item in items %}
<div>
{{ item }}
</div>
</div>
{% endfor %}
</div>
<div class="more-block text-center hide">
<button class="btn btn-default btn-more">More</button>
</div>
{% endblock %}
{% block script %}
<script>
frappe.ready(function() {
// show more button if len is 20
$list_group = $(".list-group[data-doctype='{{ doctype }}'][data-txt='{{ txt or "[notxt]" }}']");
// more ajax
frappe.start = 20;
$(".btn-more").on("click", function() {
$.ajax({
url:"/api/method/frappe.templates.pages.list.get_items",
data: {
doctype: "{{ doctype }}",
txt: "{{ txt or '' }}",
limit_start: frappe.start
},
statusCode: {
200: function(data) {
frappe.start += 20;
$.each(data.message.items, function(i, d) {
$('<div class="list-group-item">')
.html(d)
.appendTo($list_group);
});
show_more();
}
}
})
})
var show_more = function() {
var $items = $list_group.find(".list-group-item")
if($items.length && ($items.length % 20 === 0)) {
if($(".more-block").hasClass("hide"))
$(".more-block").removeClass("hide");
} else {
if(!$(".more-block").hasClass("hide"))
$(".more-block").addClass("hide");
}
};
show_more();
})
</script>
{% endblock %}