Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/IN-109: Staff Directory Pagination #16

Open
wants to merge 4 commits into
base: develop
Choose a base branch
from
Open

Feature/IN-109: Staff Directory Pagination #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5b1eba5
Added pagination to query results and add links in the html page
Niko2708 Aug 16, 2018
2637459
Worked on fixing paginate bugs
Niko2708 Aug 17, 2018
fd44d15
I added the paginate links, created the search file which outputs the…
Niko2708 Aug 21, 2018
0643461
Finished debugging pagination links, allowed form to be submitted in …
Niko2708 Aug 22, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 33 additions & 9 deletions app/main/views.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,21 +35,45 @@ def new_post():
@main.route('/staff-directory', methods=['GET', 'POST'])
def staff_directory():
form = Staff_Directory_Search_Form()
page = flask_request.args.get('page', 1, type=int)

if form.search.data is "":
users = Users.query.order_by(Users.last_name)
users = Users.query.order_by(Users.last_name).paginate(page=page, per_page=10)

elif form.filters.data == 'First Name':
users = Users.query.filter(Users.first_name.ilike('%' + form.search.data + '%'))
return redirect('/search/'+form.filters.data+'/'+form.search.data)
elif form.filters.data == 'Last Name':
users = Users.query.filter(Users.last_name.ilike('%' + form.search.data + '%'))
return redirect('/search/' + form.filters.data + '/' + form.search.data)
elif form.filters.data == 'Division':
users = Users.query.filter(Users.division.ilike('%' + form.search.data + '%'))
return redirect('/search/' + form.filters.data + '/' + form.search.data)
elif form.filters.data == 'Title':
users = Users.query.filter(Users.title.ilike('%' + form.search.data + '%'))
return redirect('/search/' + form.filters.data + '/' + form.search.data)
else:
users = Users.query.order_by(Users.last_name)
users = Users.query.order_by(Users.last_name).paginate(page=page, per_page=10)

return render_template('staff_directory.html', users=users, form=form, page=page)

@main.route('/search/<string:filter>/<string:input>', methods=['GET', 'POST'])
def show_result(filter,input):
form = Staff_Directory_Search_Form()
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You should put a docstring explaining what this function does and what it returns.

page = flask_request.args.get('page', 1, type=int)

if filter == 'First Name':
users = Users.query.filter(Users.first_name.ilike('%' + input + '%')).paginate(page=page, per_page=10)

elif filter == 'Last Name':
users = Users.query.filter(Users.last_name.ilike('%' + input + '%')).paginate(page=page, per_page=10)

return render_template('staff_directory.html', users=users, form=form)
elif filter == 'Division':
users = Users.query.filter(Users.division.ilike('%' + input + '%')).paginate(page=page, per_page=10)

elif filter == 'Title':
users = Users.query.filter(Users.title.ilike('%' + input + '%')).paginate(page=page, per_page=10)

elif form.filters.data == 'First Name':
return redirect('/search/' + form.filters.data + '/' + form.search.data)

return render_template('search.html', users=users, form=form, page=page, filter=filter, input=input)


@main.route('/get_filter_options_list/<string:filter_value>', methods=['GET'])
Expand All @@ -59,7 +83,7 @@ def get_filter_options_list(filter_value):
if filter_value == "First Name":
for user in users:
users_array.append(user.first_name)
users_array=list(set(users_array))
users_array = list(set(users_array))
if filter_value == "Last Name":
for user in users:
if user not in users_array:
Expand All @@ -73,4 +97,4 @@ def get_filter_options_list(filter_value):
users_array.append(user.title)
users_array = list(set(users_array))

return jsonify(users_array), 200
return jsonify(users_array), 200
5 changes: 5 additions & 0 deletions app/static/css/staff_directory.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,4 +137,9 @@
height: 16px;
width: 14px;
margin-right:10px;
}

.style-pagination-links{
text-align:center;
font-size:16px;
}
1 change: 1 addition & 0 deletions app/static/js/base.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,7 @@ $(function () {
container: "body",
content: function () {
return $(this).next('.popper-content').html();

}
});
$(document).on("click", ".popover-content .close", function () {
Expand Down
142 changes: 142 additions & 0 deletions app/templates/search.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,142 @@
{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}

{% block page_content %}
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='css/staff_directory.css') }}"/>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div>
<div class="breadcrumb-section">
<nav class="breadcrumb-nav" aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-ol">
<li class="breadcrumb-item"><a href="{{ url_for('main.index') }}">Home</a></li>
<li class="breadcrumb-item active" aria-current="page"><a href="{{ url_for('main.index') }}">Employee
Resource</a></li>
<li class="breadcrumb-item active" aria-current="page">Staff Directory</li>
</ol>
</nav>
<h1 class="breadcrumb-header">Staff Directory</h1>
</div>
</div>

<div class="panel panel-default">
<div class="panel-heading panel-header-style col-sm-12">
<form class="staff-directory-search-options" action="{{ url_for('main.staff_directory') }}" method="post">
<div class="col-sm-4 ui-widget" id="staff-directory-search">{{ form.search (id="test") }}</div>
<div class="col-sm-4 menu" id="filter-menu">{{ form.filters (id="filter-data") }}</div>
<div class="col-sm-4 "
id="staff-directory-submit">{{ form.submit (id="staff-directory-submit-test") }}</div>
</form>
</div>

<div class="panel-body panel-body-style">
<table class="table table-bordered table-styles">
<tr>
<th class="th-styles">First</th>
<th class="th-styles">Last</th>
<th class="th-styles">Division</th>
<th class="th-styles">Title</th>
<th class="th-styles">Phone</th>
<th class="th-styles">Email</th>
</tr>
<tbody id="staff-directory-table">
{% for user in users.items %}
<tr>
<td class="col-sm-2">
<a class="popover-right popper" data-toggle="popover">
{% if user.profile_picture_path %}
<img class="avatar-style"
src="{{ url_for('static', filename=user.profile_picture_path) }}" alt="avatar">
{% else %}
<img class="avatar-style"
src="{{ url_for('static', filename='img/avatar.png') }}">
{% endif %}
</a>

<div class="popper-content hide">
<div class="row">
<div class="col-sm-4">
{% if user.profile_picture_path %}
<img class="popover-img"
src="{{ url_for('static', filename=user.profile_picture_path) }}"
alt="avatar">
{% else %}
<img class="popover-img"
src="{{ url_for('static', filename='img/avatar.png') }}">
{% endif %}
</div>
<div class="col-sm-7">
<p id="popover-name-styles">{{ user.first_name }} {{ user.last_name }}</p>
<p id="popover-titles-styles">{{ user.title }}</p>
<p id="popover-division-styles">{{ user.division }}</p>
</div>
<a href="#" class="close popover-close-link" data-dismiss="alert">&times;</a>
</div>
<div class="row" id="popover-information-styles">Phone: {{ user.phone_number }}</div>
<div class="row" id="popover-information-styles">Email: {{ user.email }}</div>
<div class="row" id="popover-information-styles"> Office: {{ user.room }}</div>
</div>
<span class="td-styles">{{ user.first_name }}</span>
</td>
<td class="td-styles">{{ user.last_name }}</td>
<td class="td-styles">{{ user.division }}</td>
<td class="td-styles">{{ user.title }}</td>
<td class="td-styles">{{ user.phone_number }}</td>
<td class="td-styles">{{ user.email }}</td>
</tr>
{% endfor %}
</tbody>
</table>

<nav aria-label="Page navigation" class="style-pagination-links">
<ul class="pagination">
{% if prev_url %}
<li class="page-item">
<a class="page-link" href="{{ url_for('main.show_result',filter=filter, input=input, page=users.prev_num) }}"
aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
<span class="sr-only">Previous</span>
</a>
</li>
{% else %}
<li class="page-item">
<a class="page-link" href="{{ url_for('main.show_result',filter=filter, input=input, page=1) }}"
aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
<span class="sr-only">Previous</span>
</a>
</li>
{% endif %}

{% for page_num in users.iter_pages() %}
{% if page_num %}
<li class="page-item">
<a class="page-link"
href="{{ url_for('main.show_result',filter=filter, input=input, page=page_num) }}">{{ page_num }}</a>
</li>
{% endif %}
{% endfor %}

{% if users.next_num != none %}
<li class="page-item">
<a class="page-link" href="{{ url_for('main.show_result',filter=filter, input=input, page=users.next_num) }}"
aria-label="Next">
<span aria-hidden="true">&raquo;</span>
<span class="sr-only">Next</span>
</a>
</li>
{% else %}
<li class="page-item">
<a class="page-link" href="{{ url_for('main.show_result',filter=filter, input=input, page=users.pages) }}"
aria-label="Next">
<span aria-hidden="true">&raquo;</span>
<span class="sr-only">Next</span>
</a>
</li>
{% endif %}
</ul>
</nav>

</div>
</div>
{% endblock %}
52 changes: 49 additions & 3 deletions app/templates/staff_directory.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ <h1 class="breadcrumb-header">Staff Directory</h1>

<div class="panel panel-default">
<div class="panel-heading panel-header-style col-sm-12">
<form class="staff-directory-search-options" method="post">
<form class="staff-directory-search-options" method="post">
<div class="col-sm-4 ui-widget" id="staff-directory-search">{{ form.search (id="test") }}</div>
<div class="col-sm-4 menu" id="filter-menu">{{ form.filters (id="filter-data") }}</div>
<div class="col-sm-4 "
Expand All @@ -39,7 +39,7 @@ <h1 class="breadcrumb-header">Staff Directory</h1>
<th class="th-styles">Email</th>
</tr>
<tbody id="staff-directory-table">
{% for user in users %}
{% for user in users.items %}
<tr>
<td class="col-sm-2">
<a class="popover-right popper" data-toggle="popover">
Expand Down Expand Up @@ -86,6 +86,52 @@ <h1 class="breadcrumb-header">Staff Directory</h1>
{% endfor %}
</tbody>
</table>

<nav aria-label="Page navigation" class="style-pagination-links">
<ul class="pagination">
{% if prev_url %}
<li class="page-item">
<a class="page-link" href="{{ url_for('main.staff_directory', page=users.prev_num) }}" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
<span class="sr-only">Previous</span>
</a>
</li>
{% else %}
<li class="page-item">
<a class="page-link" href="{{ url_for('main.staff_directory', page=1) }}" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
<span class="sr-only">Previous</span>
</a>
</li>
{% endif %}

{% for page_num in users.iter_pages() %}
{% if page_num %}
<li class="page-item">
<a class="page-link"
href="{{ url_for('main.staff_directory',page=page_num) }}">{{ page_num }}</a>
</li>
{% endif %}
{% endfor %}

{% if users.next_num != none %}
<li class="page-item">
<a class="page-link" href="{{ url_for('main.staff_directory', page=users.next_num) }}" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
<span class="sr-only">Next</span>
</a>
</li>
{% else %}
<li class="page-item">
<a class="page-link" href="{{ url_for('main.staff_directory', page=users.pages) }}" aria-label="Next">
<span class="style-pagination-links" aria-hidden="true">&#x0203A;</span>
<span class="sr-only">Next</span>
</a>
</li>
{% endif %}
</ul>
</nav>

</div>
</div>
{% endblock %}
{% endblock %}