Datatable redesigned

flaskbb/management/views.py

@@ -179,6 +179,10 @@ def delete_user(user_id=None):
         )
 
     user = User.query.filter_by(id=user_id).first_or_404()
+    if current_user.id == user.id:
+        flash(_("You cannot delete yourself.", "danger"))
+        return redirect(url_for("management.users"))
+
     user.delete()
     flash(_("User successfully deleted."), "success")
     return redirect(url_for("management.users"))
@@ -236,7 +240,7 @@ def ban_user(user_id=None):
         for user in users:
             # don't let a user ban himself and do not allow a moderator to ban
             # a admin user
-            if current_user.id == user.id and \
+            if current_user.id == user.id or \
                     user.get_permissions()['admin'] and \
                     (current_user.permissions['mod'] or
                      current_user.permissions['super_mod']):
@@ -269,7 +273,7 @@ def ban_user(user_id=None):
         flash(_("A moderator cannot ban an admin user."), "danger")
         return redirect(url_for("management.overview"))
 
-    if user.ban():
+    if not current_user.id == user.id and user.ban():
         flash(_("User is now banned."), "success")
     else:
         flash(_("Could not ban user."), "danger")

flaskbb/static/css/flaskbb.css

@@ -33,6 +33,35 @@ body {
   border-color: #ddd;
 }
 
+.text-success {
+    color: #5cb85c;
+}
+
+.text-info {
+    color: #5bc0de;
+}
+
+.text-danger {
+    color: #d9534f;
+}
+
+.text-primary {
+    color: #337ab7;
+}
+
+.text-warning {
+    color: #f0ad4e;
+}
+
+.search-form {
+    display: none;
+    padding: 15px;
+}
+
+.management-body {
+    padding: 0px;
+}
+
 /*
  * Option to remove the borders from the table
  */

flaskbb/static/js/flaskbb.js

@@ -8,6 +8,21 @@
  // get the csrf token from the header
 var csrftoken = $('meta[name=csrf-token]').attr('content');
 
+var show_management_search = function() {
+    var body = $('.management-body');
+    var form = body.find('.search-form');
+    console.log(body);
+    console.log(form);
+
+    // toggle
+    form.slideToggle(function() {
+        if(form.css('display') != 'none') {
+            //body.css('padding', '15px');
+            form.find('input').focus();
+        }
+    });
+};
+
 var change_link = function(data, link, text) {
     $.each(data, function(k, v) {
     });
@@ -83,8 +98,14 @@ var send_data = function(endpoint_url, data) {
 
             // check if there is something to reverse it, otherwise remove the DOM.
             if(v.reverse) {
+                console.log(v);
                 form.attr('action', v.reverse_url);
-                form.find('button').html(v.reverse_name);
+                if(v.type == 'ban') {
+                    reverse_html = '<span class="fa fa-flag text-success" data-toggle="tooltip" data-placement="top" title="'+ v.reverse_name +'"></span>'
+                } else if (v.type == 'unban') {
+                    reverse_html = '<span class="fa fa-flag text-warning" data-toggle="tooltip" data-placement="top" title="'+ v.reverse_name +'"></span>'
+                }
+                form.find('button').html(reverse_html);
             } else {
                 form.parents('.action-row').remove();
             }

flaskbb/templates/macros.html

@@ -166,21 +166,21 @@
 {%- endmacro -%}
 
 
-{%- macro group_field(field, label_text='', label_class='') -%}
+{%- macro group_field(field, label_text='', label_class='', css_class='form-control form-grouped') -%}
     <div class="form-group {%- if field.errors %} has-error{%- endif %}" style="margin-bottom: 0px;">
         {{field.label(class="sr-only")}}
 
         {%- if kwargs['required'] or field.flags.required -%}
             {% if label_text %}
-                {{field(class='form-control form-grouped', placeholder=label_text, required="required", **kwargs)}}
+                {{field(class=css_class, placeholder=label_text, required="required", **kwargs)}}
             {% else %}
-                {{field(class='form-control form-grouped', placeholder=field.label.text, required="required", **kwargs)}}
+                {{field(class=css_class, placeholder=field.label.text, required="required", **kwargs)}}
             {% endif %}
         {%- else -%}
             {% if label_text %}
-                {{field(class='form-control form-grouped', placeholder=label_text, **kwargs)}}
+                {{field(class=css_class, placeholder=label_text, **kwargs)}}
             {% else %}
-                {{field(class='form-control form-grouped', placeholder=field.label.text, **kwargs)}}
+                {{field(class=css_class, placeholder=field.label.text, **kwargs)}}
             {% endif %}
         {%- endif -%}
         {{ field_description(field) }}

flaskbb/templates/management/users.html

@@ -17,98 +17,168 @@
 </div><!--/.col-md-3 -->
 
 <div class="col-md-9">
-    <legend>{% trans %}Manage Users{% endtrans %}</legend>
-
-    <div class="col-md-6">
-        {{ render_pagination(users, url_for('management.users')) }}
-    </div><!-- /.col-pull-left -->
-    <div class="col-md-6">
-        <form role="form" method="post">
-            <div class="input-group">
-                {{ search_form.hidden_tag() }}
-                {{ group_field(search_form.search_query) }}
-                <span class="input-group-btn">
-                    <button class="btn btn-primary" type="submit">{% trans %}Search{% endtrans %}</button>
-                </span>
-            </div>
-        </form>
-    </div>
+    <div class="row">
+        <div class="col-md-12">
+            <div class="panel panel-primary">
+                <div class="panel-heading">
+
+                    <span class="fa fa-list"></span> Users
+
+                    <div class="pull-right action-buttons">
+                        <div class="btn-group pull-right">
+                            <button type="button" class="btn btn-default btn-xs" onclick="return show_management_search()">
+                                <span class="fa fa-search" style="margin-right: 0px;"></span> Search
+                            </button>
+                            <ul class="dropdown-menu">
+                                <li>
+                                    <a href="javascript:void(0)" onclick="return bulk_actions.execute('/users/ban', '{% trans %}Are you sure you want to ban these Users?{% endtrans %}')">
+                                        <span class="fa fa-flag text-warning"></span> Ban selected Users
+                                    </a>
+                                </li>
+
+                                <li>
+                                    <a href="javascript:void(0)" onclick="return bulk_actions.execute('/users/unban', '{% trans %}Are you sure you want to unban these Users?{% endtrans %}')">
+                                        <span class="fa fa-flag text-success"></span> Unban selected Users
+                                    </a>
+                                </li>
+
+                                <li>
+                                    <a href="javascript:void(0)" onclick="return bulk_actions.execute('/users/delete', '{% trans %}Are you sure you want to delete these Users?{% endtrans %}')">
+                                        <span class="fa fa-trash text-danger"></span> Delete selected Users
+                                    </a>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+
+                </div>
+                <div class="panel-body management-body">
+
+
+                    <form class="search-form" role="form" method="post">
+                        {{ search_form.hidden_tag() }}
+                        <div class="input-group">
+                            {{ group_field(search_form.search_query, css_class="form-control") }}
+                            <span class="input-group-btn">
+                                <button class="btn btn-default" type="button"><span class="fa fa-search"></span></button>
+                            </span>
+                        </div>
+                    </form>
+                </div>
+
+                    <table class="table table-hover">
+                        <thead>
+                            <tr>
+                                <th><input type="checkbox" name="rowtoggle" class="action-checkall" title="Select All"/></th>
+                                <th>#</th>
+                                <th>{% trans %}Username{% endtrans %}</th>
+                                <th>{% trans %}Posts{% endtrans %}</th>
+                                <th>{% trans %}Date registered{% endtrans %}</th>
+                                <th>{% trans %}Group{% endtrans %}</th>
+                                <th>
+                                    <div class="btn-group">
+                                        <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
+                                            <span class="fa fa-cog" style="margin-right: 0px;"></span> Actions
+                                        </button>
+                                        <ul class="dropdown-menu slidedown">
+                                            <li>
+                                                <a href="javascript:void(0)" onclick="return bulk_actions.execute('/users/ban', '{% trans %}Are you sure you want to ban these Users?{% endtrans %}')">
+                                                    <span class="fa fa-flag text-warning"></span> Ban selected Users
+                                                </a>
+                                            </li>
 
-    <table class="table table-bordered">
-        <thead>
-            <tr>
-                <th><input type="checkbox" name="rowtoggle" class="action-checkall" title="Select All"/></th>
-                <th>#</th>
-                <th>{% trans %}Username{% endtrans %}</th>
-                <th>{% trans %}Posts{% endtrans %}</th>
-                <th>{% trans %}Date registered{% endtrans %}</th>
-                <th>{% trans %}Group{% endtrans %}</th>
-                <th>
-                    <div class="btn-group">
-                      <button data-toggle="dropdown" class="btn btn-xs dropdown-toggle" data-original-title="" title="">
-                        Action
-                        <span class="caret">
-                        </span>
-                      </button>
-                      <ul class="dropdown-menu pull-right">
-                          <li><a href="javascript:void(0)" onclick="return bulk_actions.execute('/users/ban', '{% trans %}Are you sure you want to ban these Users?{% endtrans %}')">Ban selected Users</a></li>
-                          <li><a href="javascript:void(0)" onclick="return bulk_actions.execute('/users/unban', '{% trans %}Are you sure you want to unban these Users?{% endtrans %}')">Unban selected Users</a></li>
-                          <li><a href="javascript:void(0)" onclick="return bulk_actions.execute('/users/delete', '{% trans %}Are you sure you want to delete these Users?{% endtrans %}')">Delete selected Users</a></li>
-                      </ul>
+                                            <li>
+                                                <a href="javascript:void(0)" onclick="return bulk_actions.execute('/users/unban', '{% trans %}Are you sure you want to unban these Users?{% endtrans %}')">
+                                                    <span class="fa fa-flag text-success"></span> Unban selected Users
+                                                </a>
+                                            </li>
+
+                                            <li>
+                                                <a href="javascript:void(0)" onclick="return bulk_actions.execute('/users/delete', '{% trans %}Are you sure you want to delete these Users?{% endtrans %}')">
+                                                    <span class="fa fa-trash text-danger"></span> Delete selected Users
+                                                </a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                </th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                        {% for user in users.items %}
+                            <tr class="action-row">
+                                <td><input type="checkbox" name="rowid" class="action-checkbox" value="{{ user.id }}" title="Select User"/></td>
+                                <td>{{ user.id }}</td>
+                                <td><a href="{{ url_for('user.profile', username=user.username) }}">{{ user.username }}</a></td>
+                                <td>{{ user.post_count }}</td>
+                                <td>{{ user.date_joined|format_date('%b %d %Y') }}</td>
+                                <td>{{ user.primary_group.name }}</td>
+                                <td>
+                                    {% if current_user|can_edit_user and not user|is_admin or current_user|is_admin %}
+                                        <a href="{{ url_for('management.edit_user', user_id = user.id) }}">
+                                            <span class="fa fa-pencil text-primary" data-toggle="tooltip" data-placement="top" title="{% trans %}Edit{% endtrans %}"></span>
+                                        </a>
+                                    {% endif %}
+
+                                    {% if current_user|can_ban_user and not user.permissions['banned'] %}
+                                        <form class="inline-form" id="ban-{{user.id}}" method="post" action="{{ url_for('management.ban_user', user_id = user.id) }}">
+                                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
+
+                                            <button class="btn btn-link">
+                                                <span class="fa fa-flag text-warning" data-toggle="tooltip" data-placement="top" title="{% trans %}Ban{% endtrans %}"></span>
+                                            </button>
+                                        </form>
+                                    {% endif %}
+
+                                    {% if current_user|can_ban_user and user.permissions['banned'] %}
+                                        <form class="inline-form" id="unban-{{user.id}}" method="post" action="{{ url_for('management.unban_user', user_id = user.id) }}">
+                                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
+
+                                            <button class="btn btn-link">
+                                                <span class="fa fa-flag text-success" data-toggle="tooltip" data-placement="top" title="{% trans %}Unban{% endtrans %}"></span>
+                                            </button>
+                                        </form>
+                                    {% endif %}
+
+                                    {% if current_user|is_admin %}
+                                    <form class="inline-form" id="delete-{{user.id}}" method="post" action="{{ url_for('management.delete_user', user_id = user.id) }}">
+                                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
+
+                                        <button class="btn btn-link">
+                                            <span class="fa fa-trash text-danger" data-toggle="tooltip" data-placement="top" title="{% trans %}Delete{% endtrans %}"></span>
+                                        </button>
+                                    </form>
+                                    {% endif %}
+                                </td>
+                            </tr>
+                        {% else %}
+                            <tr>
+                                <td colspan="6">
+                                    {% trans %}No users found matching your search criteria.{% endtrans %}
+                                </td>
+                            </tr>
+                        {% endfor %}
+                    </tbody>
+                </table>
+
+                <div class="panel-footer">
+                    <div class="row">
+                        <div class="col-md-12">
+                            {{ render_pagination(users, url_for('management.users')) }}
+                        </div>
                     </div>
-                </th>
-            </tr>
-        </thead>
-        <tbody>
-            {% for user in users.items %}
-                <tr class="action-row">
-                    <td><input type="checkbox" name="rowid" class="action-checkbox" value="{{ user.id }}" title="Select User"/></td>
-                    <td>{{ user.id }}</td>
-                    <td><a href="{{ url_for('user.profile', username=user.username) }}">{{ user.username }}</a></td>
-                    <td>{{ user.post_count }}</td>
-                    <td>{{ user.date_joined|format_date('%b %d %Y') }}</td>
-                    <td>{{ user.primary_group.name }}</td>
-                    <td>
-                        {% if current_user|can_edit_user and not user|is_admin or current_user|is_admin %}
-                            <a href="{{ url_for('management.edit_user', user_id = user.id) }}">{% trans %}Edit{% endtrans %}</a> |
-                        {% endif %}
-
-                        {% if current_user|can_ban_user and not user.permissions['banned'] %}
-                            <form class="inline-form" id="ban-{{user.id}}" method="post" action="{{ url_for('management.ban_user', user_id = user.id) }}">
-                                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-                                <button class="btn btn-link">{% trans %}Ban{% endtrans %}</button> |
-                            </form>
-                        {% endif %}
-
-                        {% if current_user|can_ban_user and user.permissions['banned'] %}
-                            <form class="inline-form" id="unban-{{user.id}}" method="post" action="{{ url_for('management.unban_user', user_id = user.id) }}">
-                                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-                                <button class="btn btn-link">{% trans %}Unban{% endtrans %}</button> |
-                            </form>
-                        {% endif %}
-
-                        {% if current_user|is_admin %}
-                        <form class="inline-form" id="delete-{{user.id}}" method="post" action="{{ url_for('management.delete_user', user_id = user.id) }}">
-                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-                            <button class="btn btn-link">{% trans %}Delete{% endtrans %}</button>
-                        </form>
-                        {% endif %}
-                    </td>
-                </tr>
-            {% else %}
-                <tr>
-                    <td colspan="6">
-                        {% trans %}No users found matching your search criteria.{% endtrans %}
-                    </td>
-                </tr>
-            {% endfor %}
-        </tbody>
-    </table>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>
 {% endblock %}
 
 {% block scripts %}
     <script>
-    var bulk_actions = new BulkActions()
+    var bulk_actions = new BulkActions();
+
+    $(function () {
+        $('[data-toggle="tooltip"]').tooltip()
+    })
     </script>
 {% endblock %}