hack4impact/flask-base

{% extends 'layouts/base.html' %}

{% block content %}
    <div class="ui stackable grid container">
        <div class="sixteen wide tablet twelve wide computer centered column">
            <a class="ui basic compact button" href="{{ url_for('admin.index') }}">
                <i class="caret left icon"></i>
                Back to dashboard
            </a>
            <h2 class="ui header">
                Registered Users
                <div class="sub header">
                    View and manage currently registered users.
                </div>
            </h2>

            <div class="ui menu">
                <div id="select-role" class="ui dropdown item">
                    <div class="text">
                        All account types
                    </div>
                    <i class="dropdown icon"></i>
                    <div class="menu">
                        <div class="item" data-value="">All account types</div>
                        {% for r in roles %}
                            <div class="item" data-value="{{ r.name }}">{{ r.name }}s</div>
                        {% endfor %}
                    </div>
                </div>
                <div class="ui right search item">
                    <div class="ui transparent icon input">
                        <input id="search-users" type="text" placeholder="Search users…">
                        <i class="search icon"></i>
                    </div>
                </div>
            </div>

            {# Use overflow-x: scroll so that mobile views don't freak out
             # when the table is too wide #}
            <div style="overflow-x: scroll;">
                <table class="ui searchable sortable unstackable selectable celled table">
                    <thead>
                        <tr>
                            <th>First name</th>
                            <th class="sorted ascending">Last name</th>
                            <th>Email address</th>
                            <th>Account type</th>
                        </tr>
                    </thead>
                    <tbody>
                    {% for u in users | sort(attribute='last_name') %}
                        <tr onclick="window.location.href = '{{ url_for('admin.user_info', user_id=u.id) }}';">

                            <td>{{ u.first_name }}</td>
                            <td>{{ u.last_name }}</td>
                            <td>{{ u.email }}</td>
                            <td class="user role">{{ u.role.name }}</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        $(document).ready(function () {
            $('#search-users').keyup(function () {
                var searchText = $(this).val();
                if (searchText.length > 0) {
                    $('tbody td:icontains(' + searchText + ')').addClass('positive');
                    $('td.positive').not(':icontains(' + searchText + ')').removeClass('positive');
                    $('tbody td').not(':icontains(' + searchText + ')').closest('tr').addClass('hidden').hide();
                    $('tr.hidden:icontains(' + searchText + ')').removeClass('hidden').show();
                } else {
                    $('td.positive').removeClass('positive');
                    $('tr.hidden').removeClass('hidden').show();
                }
            });

            $('#select-role').dropdown({
                onChange: function (value, text, $selectedItem) {
                    $('td.user.role:contains(' + value + ')').closest('tr').removeClass('hidden').show();
                    $('td.user.role').not(':contains(' + value + ')').closest('tr').addClass('hidden').hide();
                }
            });
        });
    </script>
{% endblock %}