user can be added to group and team from user page

templates/accounts/group_list.html

@@ -14,16 +14,22 @@
 
 <ul class="list-group">
   {% if not groups.exists %}
-  <li class="list-group-item">
+  <li class="list-group-item" style="line-height: 48px;">
     <em>There are no groups quit yet.</em>
   </li>
   {% endif %}
   {% for group in groups %}
-  <a class="list-group-item" href="{% url 'show-group' group.id %}">
-    <strong>
-      {{ group }}
-    </strong>
-    — {{ group.users.count }} user{{ group.users.count|pluralize }}
+  <a class="list-group-item" href="{% url 'show-group' group.id %}" style="line-height: 48px;">
+    <div class="row">
+      <div class="col-md-10">
+        <strong>
+          {{ group }}
+        </strong>
+      </div>
+      <div class="col-md-2 text-muted">
+        {{ group.users.count }} user{{ group.users.count|pluralize }}
+      </div>
+    </div>
   </a>
   {% endfor %}
 </ul>

templates/accounts/team_details.html

@@ -34,8 +34,8 @@
 </div>
 
 <ul class="nav nav-tabs" role="tablist">
-  <li{% if tab == 'user' %} class="active"{% endif %}><a href="#user-pane" role="tab" data-toggle="tab" data-tab="user">Users</a></li>
-  <li{% if tab == 'group' %} class="active"{% endif %}><a href="#group-pane" role="tab" data-toggle="tab" data-tab="group">Groups</a></li>
+  <li{% if tab == 'user' %} class="active"{% endif %}><a href="#user-pane" role="tab" data-toggle="tab" data-showtab="user" data-hidetab="group">Users</a></li>
+  <li{% if tab == 'group' %} class="active"{% endif %}><a href="#group-pane" role="tab" data-toggle="tab" data-showtab="group" data-hidetab="user">Groups</a></li>
   <form class="form-inline pull-right{% if tab == 'group' %} hidden{% endif %}" method="post" action="{% url 'add-user-to-team' team.id %}" role="form" id="add-user-form">
     {% csrf_token %}
     <div class="form-group">
@@ -106,6 +106,6 @@ $('input[name="group"]').autocomplete({
 });
 </script>
 <script src="{% static 'js/accounts.js' %}"></script>
-<script src="{% static 'js/team.js' %}"></script>
+<script src="{% static 'js/tabswitch.js' %}"></script>
 
 {% endblock %}

templates/accounts/team_list.html

@@ -14,17 +14,25 @@
 
 <ul class="list-group">
   {% if not teams.exists %}
-  <li class="list-group-item">
+  <li class="list-group-item" style="line-height: 48px;">
     <em>There are no teams quite yet.</em>
   </li>
   {% endif %}
   {% for team in teams %}
-  <a class="list-group-item" href="{% url 'show-team' team.id %}">
-    <strong>
-      {{ team }}
-    </strong>
-    — {{ team.users.count }} user{{ team.users.count|pluralize }}
-    — {{ team.groups.count }} group{{ team.groups.count|pluralize }}
+  <a class="list-group-item" href="{% url 'show-team' team.id %}" style="line-height: 48px;">
+    <div class="row">
+      <div class="col-md-8">
+        <strong>
+          {{ team }}
+        </strong>
+      </div>
+      <div class="col-md-2 text-muted">
+          {{ team.users.count }} user{{ team.users.count|pluralize }}
+      </div>
+      <div class="col-md-2 text-muted">
+        {{ team.groups.count }} group{{ team.groups.count|pluralize }}
+      </div>
+    </div>
   </a>
   {% endfor %}
 </ul>

templates/accounts/user_details.html

@@ -0,0 +1,119 @@
+{% extends 'base_admin.html' %}
+
+{% load staticfiles %}
+{% load humanize %}
+{% load bootstrap3 %}
+{% load accounts_tags %}
+
+{% block css %}
+<link rel="stylesheet" href="{% static 'css/jquery-ui.css' %}">
+{% endblock %}
+
+{% block usertab %} class="active"{% endblock %}
+
+{% block moretabs %}
+<a href="{% url 'add-user' %}" class="pull-right btn btn-success">Add user</a>
+{% endblock %}
+
+{% block tabcontent %}
+
+<div class="page-header">
+  <h1>
+    User {{ user }}
+    &#160;
+    <small>
+      <span id="groups-counter">{{ user.groups.count }}</span> groups
+      —
+      <span id="teams-counter">{{ user.teams.count }}</span> teams
+    </small>
+    <div class="pull-right">
+      {% if user.is_active %}
+      <a href="{% url 'disable-user' user.id %}" class="btn btn-default"><span class="glyphicon glyphicon-ban-circle"></span> disable</a>
+      {% else %}
+      <a href="{% url 'activate-user' user.id %}" class="btn btn-default"><span class="glyphicon glyphicon-check"></span> activate</a>
+      {% endif %}
+      <a href="{% url 'edit-user' user.id %}" class="btn btn-primary"><span class="glyphicon glyphicon-edit"></span> edit</a>
+      <a href="javascript:void(0);" data-item="delete" data-action="{% url 'delete-user' user.id %}" data-toggle="modal" data-target="#confirm-delete" class="btn btn-danger"><span class="glyphicon glyphicon-trash"></span> delete</a>
+    </div>
+  </h1>
+</div>
+
+<ul class="nav nav-tabs" role="tablist">
+  <li{% if tab == 'group' %} class="active"{% endif %}><a href="#group-pane" role="tab" data-toggle="tab" data-showtab="group" data-hidetab="team">Groups</a></li>
+  <li{% if tab == 'team' %} class="active"{% endif %}><a href="#team-pane" role="tab" data-toggle="tab" data-showtab="team" data-hidetab="group">Teams</a></li>
+  <form class="form-inline pull-right{% if tab == 'team' %} hidden{% endif %}" method="post" action="{% url 'add-group-to-user' user.id %}" role="form" id="add-group-form">
+    {% csrf_token %}
+    <div class="form-group">
+      <div class="input-group ui-widget">
+        <input type="text" class="form-control" name="group" placeholder="add user to groups" value="">
+        <div class="input-group-addon">
+          <a href="javascript:void(0);" onclick="$('#add-group-form').submit();"><span class="glyphicon glyphicon-plus"></span></a>
+        </div>
+      </div>
+    </div>
+  </form>
+  <form class="form-inline pull-right{% if tab == 'group' %} hidden{% endif %}" method="post" action="{% url 'add-team-to-user' user.id %}" role="form" id="add-team-form">
+    {% csrf_token %}
+    <div class="form-group">
+      <div class="input-group ui-widget">
+        <input type="text" class="form-control" name="team" placeholder="add user to teams" value="">
+        <div class="input-group-addon">
+          <a href="javascript:void(0);" onclick="$('#add-team-form').submit();"><span class="glyphicon glyphicon-plus"></span></a>
+        </div>
+      </div>
+    </div>
+  </form>
+</ul>
+
+<br />
+
+<div class="tab-content">
+  <div class="tab-pane{% if tab == 'group' %} active{% endif %}" id="group-pane">
+    <ul class="list-group">
+      <li class="list-group-item{% if user.groups.exists %} hidden{% endif %}" id="groups-empty">
+        <em>This user belong to no groups.</em>
+      </li>
+      {% for group in user.groups.all %}
+      <li class="list-group-item">
+        {{ group }}
+        <a href="javascript:void(0);" data-href="{% url 'remove-group-from-user' user.id group.id %}" data-type="groups" class="pull-right btn btn-danger btn-xs" role="remove">remove</a>
+      </li>
+      {% endfor %}
+    </ul>
+  </div>
+  <div class="tab-pane{% if tab == 'team' %} active{% endif %}" id="team-pane">
+    <ul class="list-group">
+      <li class="list-group-item{% if user.teams.exists %} hidden{% endif %}" id="teams-empty">
+        <em>This user belong to no teams.</em>
+      </li>
+      {% for team in user.teams.all %}
+      <li class="list-group-item">
+        {{ team }}
+        <span class="pull-right">
+        {% if team in directteams %}
+        <a href="javascript:void(0);" data-href="{% url 'remove-team-from-user' user.id team.id %}" data-type="teams" class="btn btn-danger btn-xs" role="remove">remove</a>
+        {% else %}
+        <em>member throught group</em>
+        {% endif %}
+        </span>
+      </li>
+      {% endfor %}
+    </ul>
+  </div>
+</div>
+
+{% delete_modal %}
+
+<script src="{% static 'js/jquery-ui.min.js' %}"></script>
+<script type="text/javascript">
+$('input[name="group"]').autocomplete({
+  source: "{% url 'add-group-to-user' user.id %}"
+});
+$('input[name="team"]').autocomplete({
+  source: "{% url 'add-team-to-user' user.id %}"
+});
+</script>
+<script src="{% static 'js/accounts.js' %}"></script>
+<script src="{% static 'js/tabswitch.js' %}"></script>
+
+{% endblock %}

templates/accounts/user_list.html

@@ -17,29 +17,25 @@
 
 <ul class="list-group">
   {% for user in users %}
-  <li class="list-group-item">
-    <div class="row">
-      <div class="col-md-4">
+  <a class="list-group-item" href="{% url 'show-user' user.id %}">
+    <div class="row" style="line-height: 48px;">
+      <div class="col-md-6">
         <h4 class="media-heading">{{ user.username }}</h4>
         {{ user.first_name }} {{ user.last_name }}
       </div>
-      <div class="col-md-2" style="vertical-align: center; line-height:48px;">
+      <div class="col-md-2">
+        {% if not user.is_active %}
+        <mark><span class="glyphicon glyphicon-warning-sign"></span> disabled</mark>
+        {% endif %}
+      </div>
+      <div class="col-md-2">
         <span class="text-muted">{{ user.groups.count }} group{{ user.groups.count|pluralize }}</span>
       </div>
-      <div class="col-md-2" style="vertical-align: center; line-height:48px;">
+      <div class="col-md-2">
         <span class="text-muted">{{ user.teams.count }} team{{ user.teams.count|pluralize }}</span>
       </div>
-      <div class="col-md-4" style="text-align: right; vertical-align: center; line-height:48px;">
-        {% if user.is_active %}
-        <a href="{% url 'disable-user' user.id %}" class="btn btn-default">disable</a>
-        {% else %}
-        <a href="{% url 'activate-user' user.id %}" class="btn btn-default">activate</a>
-        {% endif %}
-        <a href="{% url 'edit-user' user.id %}" class="btn btn-primary"><span class="glyphicon glyphicon-edit"></span> edit</a>
-        <a href="#" data-item="user" data-action="{% url 'delete-user' user.id %}" data-toggle="modal" data-target="#confirm-delete" class="btn btn-danger"><span class="glyphicon glyphicon-trash"></span> delete</a>
-      </div>
     </div>
-  </li>
+  </a>
   {% endfor %}
 </ul>