user-group detail page: users op

apps/static/css/jumpserver.css

@@ -91,12 +91,108 @@ table.dataTable tbody td.selected td i.text-navy
     color: white;
 }
 
-
-div.dataTables_wrapper div.dataTables_filter,
-.dataTables_length {
-    float: right !important;
+.m-0 {
+  margin: 0px !important;
 }
-
-div.dataTables_wrapper div.dataTables_filter {
-  margin-left: 15px;
+.m-t-0 {
+  margin-top: 0px !important;
+}
+.m-b-0 {
+  margin-bottom: 0px !important;
+}
+.m-l-0 {
+  margin-left: 0px !important;
+}
+.m-r-0 {
+  margin-right: 0px !important;
+}
+.m-5 {
+  margin: 5px !important;
+}
+.m-t-5 {
+  margin-top: 5px !important;
+}
+.m-b-5 {
+  margin-bottom: 5px !important;
+}
+.m-l-5 {
+  margin-left: 5px !important;
+}
+.m-r-5 {
+  margin-right: 5px !important;
+}
+.m-10 {
+  margin: 10px !important;
+}
+.m-t-10 {
+  margin-top: 10px !important;
+}
+.m-b-10 {
+  margin-bottom: 10px !important;
+}
+.m-l-10 {
+  margin-left: 10px !important;
+}
+.m-r-10 {
+  margin-right: 10px !important;
+}
+.m-15 {
+  margin: 15px !important;
+}
+.m-t-15 {
+  margin-top: 15px !important;
+}
+.m-b-15 {
+  margin-bottom: 15px !important;
+}
+.m-l-15 {
+  margin-left: 15px !important;
+}
+.m-r-15 {
+  margin-right: 15px !important;
+}
+.m-20 {
+  margin: 20px !important;
+}
+.m-t-20 {
+  margin-top: 20px !important;
+}
+.m-b-20 {
+  margin-bottom: 20px !important;
+}
+.m-l-20 {
+  margin-left: 20px !important;
+}
+.m-r-20 {
+  margin-right: 20px !important;
+}
+.m-25 {
+  margin: 25px !important;
+}
+.m-t-25 {
+  margin-top: 25px !important;
+}
+.m-b-25 {
+  margin-bottom: 25px !important;
+}
+.m-l-25 {
+  margin-left: 25px !important;
+}
+.m-r-25 {
+  margin-right: 25px !important;
+}
+.m-30 {
+  margin: 30px !important;
+}
+.m-t-30 {
+  margin-top: 30px !important;
+}
+.m-b-30 {
+  margin-bottom: 30px !important;
+}
+.m-l-30 {
+  margin-left: 30px !important;
+}
+.m-r-30 {
+  margin-right: 30px !important;
 }

apps/static/js/jumpserver.js

@@ -257,6 +257,7 @@ $.fn.serializeObject = function()
     return o;
 };
 var jumpserver = {};
+jumpserver.checked = false;
 jumpserver.initDataTable = function (options) {
   // options = {
   //    ele *: $('#dataTable_id'),
@@ -331,5 +332,16 @@ jumpserver.initDataTable = function (options) {
         $('#op').html(options.op_html || '');
         $('#uc').html(options.uc_html || '');
     });
+    $('.ipt_check_all').on('click', function() {
+      if (!jumpserver.checked) {
+          $(this).closest('table').find('.ipt_check').prop('checked', true);
+          jumpserver.checked = true;
+          table.rows().select();
+      } else {
+          $(this).closest('table').find('.ipt_check').prop('checked', false);
+          jumpserver.checked = false;
+          table.rows().deselect();
+      }
+    })
     return table;
 }

apps/templates/_modal.html

 {% load i18n %}
 <div aria-hidden="true" role="dialog" id="{% block modal_id %}{% endblock %}" class="modal inmodal">
-    <div class="modal-dialog">
+    <div class="modal-dialog {% block modal_class %}{% endblock %}">
         <div class="modal-content animated fadeIn">
             <div class="modal-header">
                 <button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>

apps/users/api.py

@@ -9,7 +9,7 @@ from rest_framework import generics, status
 from rest_framework.response import Response
 from rest_framework_bulk import ListBulkCreateUpdateDestroyAPIView
 
-from .serializers import UserSerializer, UserGroupSerializer, UserAttributeSerializer, UserGroupEditSerializer, \
+from .serializers import UserSerializer, UserGroupSerializer, UserAttributeSerializer, GroupUserEditSerializer, \
     GroupEditSerializer, UserPKUpdateSerializer, UserBulkUpdateSerializer
 from .models import User, UserGroup
 
@@ -46,14 +46,14 @@ class UserAttributeApi(generics.RetrieveUpdateDestroyAPIView):
     serializer_class = UserAttributeSerializer
 
 
-class UserGroupEditApi(generics.RetrieveUpdateAPIView):
+class GroupUserEditApi(generics.RetrieveUpdateAPIView):
     queryset = User.objects.all()
-    serializer_class = UserGroupEditSerializer
+    serializer_class = GroupUserEditSerializer
 
 
 class UserResetPasswordApi(generics.UpdateAPIView):
     queryset = User.objects.all()
-    serializer_class = UserGroupEditSerializer
+    serializer_class = GroupUserEditSerializer
 
     def perform_update(self, serializer):
         # Note: we are not updating the user object here.
@@ -68,7 +68,7 @@ class UserResetPasswordApi(generics.UpdateAPIView):
 
 class UserResetPKApi(generics.UpdateAPIView):
     queryset = User.objects.all()
-    serializer_class = UserGroupEditSerializer
+    serializer_class = GroupUserEditSerializer
 
     def perform_update(self, serializer):
         user = self.get_object()
@@ -88,7 +88,7 @@ class UserUpdatePKApi(generics.UpdateAPIView):
         user.save()
 
 
-class GroupDeleteApi(generics.DestroyAPIView):
+class GroupEditApi(generics.RetrieveUpdateDestroyAPIView):
     queryset = UserGroup.objects.all()
     serializer_class = GroupEditSerializer
 

apps/users/serializers.py

@@ -31,7 +31,7 @@ class GroupEditSerializer(serializers.ModelSerializer):
 
     class Meta:
         model = UserGroup
-        fields = ['id', 'name', 'comment', 'date_created', 'created_by']
+        fields = ['id', 'name', 'comment', 'date_created', 'created_by', 'users']
 
 
 class UserAttributeSerializer(serializers.ModelSerializer):
@@ -41,7 +41,7 @@ class UserAttributeSerializer(serializers.ModelSerializer):
         fields = ['avatar', 'wechat', 'phone', 'enable_otp', 'comment', 'is_active', 'name']
 
 
-class UserGroupEditSerializer(serializers.ModelSerializer):
+class GroupUserEditSerializer(serializers.ModelSerializer):
     groups = serializers.PrimaryKeyRelatedField(many=True, queryset=UserGroup.objects.all())
 
     class Meta:

apps/users/templates/users/_select_user_modal.html

+{% extends '_modal.html' %}
+{% load i18n %}
+{% block modal_class %}modal-lg{% endblock %}
+{% block modal_id %}select_user_modal{% endblock %}
+{% block modal_title%}{% trans "Please Select User" %}{% endblock %}
+{% block modal_body %}
+<table class="table table-striped table-bordered table-hover " id="select_user_table" >
+    <thead>
+        <tr>
+            <th class="text-center">
+                <div class="checkbox checkbox-default"><input id="" type="checkbox" class="ipt_check_all"><label></label></div>
+            </th>
+            <th class="text-center">{% trans 'Name' %}</a></th>
+            <th class="text-center">{% trans 'Username' %}</a></th>
+            <th class="text-center">{% trans 'Role' %}</th>
+            <th class="text-center">{% trans 'User group' %}</th>
+            <th class="text-center">{% trans 'Asset num' %}</th>
+            <th class="text-center">{% trans 'Active' %}</a></th>
+        </tr>
+    </thead>
+</table>
+{% endblock %}
+{% block modal_confirm_id %}btn_select_user{% endblock %}

apps/users/templates/users/user_detail.html

@@ -222,7 +222,7 @@
 jumpserver.selected_groups = {};
 
 function updateUserGroups(user_groups) {
-    var the_url = "{% url 'users:user-group-edit-api' pk=user_object.id %}";
+    var the_url = "{% url 'users:group-user-edit-api' pk=user_object.id %}";
     var body = {
         id: {{ user_object.id }},
         groups: Object.assign([], user_groups)
@@ -237,7 +237,7 @@ function updateUserGroups(user_groups) {
             $('.group_edit tbody').append(
                 '<tr>' +
                 '<td><b class="bdg_user_group" data-gid="' + index + '">' + group_name + '</b></td>' +
-                '<td><button class="btn btn-danger btn-sm pull-right btn_delete_user_group" type="button"><i class="fa fa-minus"></i></button></td>' +
+                '<td><button class="btn btn-danger btn-xs pull-right btn_delete_user_group" type="button"><i class="fa fa-minus"></i></button></td>' +
                 '</tr>'
             )
         });

apps/users/templates/users/user_group_detail.html

@@ -5,8 +5,11 @@
 {% block custom_head_css_js %}
     <link href="{% static "css/plugins/select2/select2.min.css" %}" rel="stylesheet">
     <link href="{% static "css/plugins/sweetalert/sweetalert.css" %}" rel="stylesheet">
+    <link href="{% static "css/plugins/dataTables/dataTables.min.css" %}" rel="stylesheet">
+    <link href="{% static "css/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" %}" rel="stylesheet">
     <script src="{% static "js/plugins/select2/select2.full.min.js" %}"></script>
     <script src="{% static "js/plugins/sweetalert/sweetalert.min.js" %}"></script>
+    <script src="{% static "js/plugins/dataTables/dataTables.min.js" %}"></script>
     <style>
 .label {
     font-size: 14px;
@@ -81,40 +84,19 @@
                                 <div class="panel-body">
                                     <table class="table">
                                         <tbody>
-                                        <tr class="no-borders-tr">
-                                          <td width="50%">{% trans 'Active' %}:</td>
-                                            <td><span class="pull-right">
-                                                <div class="switch">
-                                                    <div class="onoffswitch">
-                                                        <input type="checkbox" {% if user_object.is_active %} checked {% endif %}  class="onoffswitch-checkbox" id="is_active">
-                                                        <label class="onoffswitch-label" for="is_active">
-                                                            <span class="onoffswitch-inner"></span>
-                                                            <span class="onoffswitch-switch"></span>
-                                                        </label>
-                                                    </div>
-                                                </div>
-                                            </span></td>
-                                        </tr>
                                             <tr>
-                                          <td>{% trans 'Enable OTP' %}:</td>
-                                            <td><span class="pull-right">
-                                                <div class="switch">
-                                                    <div class="onoffswitch">
-                                                        <input type="checkbox" class="onoffswitch-checkbox" {% if user_object.enable_otp %} checked {% endif %}
-                                                               id="enable_otp">
-                                                        <label class="onoffswitch-label" for="enable_otp">
-                                                            <span class="onoffswitch-inner"></span>
-                                                            <span class="onoffswitch-switch"></span>
-                                                        </label>
-                                                    </div>
-                                                </div>
-                                            </span></td>
+                                                <td>{% trans 'Add User' %}:</td>
+                                                <td>
+                                                    <span class="pull-right">
+                                                        <button type="button" class="btn btn-primary btn-xs" id="btn_group_add_user" style="width: 54px" data-toggle="modal" data-target="#select_user_modal">{% trans 'Add' %}</button>
+                                                    </span>
+                                                </td>
                                             </tr>
                                             <tr>
-                                            <td>{% trans 'Reset password' %}:</td>
+                                                <td>{% trans 'Delete' %}:</td>
                                                 <td>
                                                     <span class="pull-right">
-                                                    <button type="button" class="btn btn-primary btn-xs" id="btn_reset_password" style="width: 54px">{% trans 'Reset' %}</button>
+                                                        <button type="button" class="btn btn-danger btn-xs" id="btn_group_delete" style="width: 54px">{% trans 'Delete' %}</button>
                                                     </span>
                                                 </td>
                                             </tr>
@@ -128,6 +110,7 @@
             </div>
         </div>
     </div>
+    {% include "users/_select_user_modal.html" %}
 {% endblock %}
 {% block custom_foot_js %}
 <script>
@@ -141,6 +124,66 @@ $(document).on('click', '.btn_remove', function(){
     var error = function(){};
     APIUpdateAttr({url: the_url, body: "{}", method: "DELETE", success: success, error: error});
     return false;
+}).on('click', '#btn_group_delete', function() {
+    function doDelete() {
+        var the_url = '{% url "users:user-group-detail-api" pk=object.id %}';
+        var success = function() {
+            window.location.href = '{% url "users:user-group-list" %}';
+        };
+        APIUpdateAttr({url: the_url, body: "{}", method: "DELETE", success: success});
+    }
+    swal({
+        title: "{% trans 'Are you sure?' %}",
+        text: "{% trans 'This will delete the current group, but will not delete any user of it.' %}",
+        type: "warning",
+        showCancelButton: true,
+        confirmButtonColor: "#DD6B55",
+        confirmButtonText: "{% trans 'Confirm' %}",
+        closeOnConfirm: false
+    }, function() {
+        doDelete();
+    });
+}).on('shown.bs.modal', '#select_user_modal', function() {
+    if ($.fn.dataTable.isDataTable('#select_user_table')) {
+        return true;
+    }
+    var options = {
+        ele: $('#select_user_table'),
+        pageLength: 10,
+        buttons: [],
+        columnDefs: [
+            {targets: 6, createdCell: function (td, cellData) {
+                if (!cellData) {
+                    $(td).html('<i class="fa fa-times text-danger"></i>')
+                } else {
+                    $(td).html('<i class="fa fa-check text-navy"></i>')
+                }
+             }},
+        ],
+        ajax_url: '{% url "users:user-bulk-update-api" %}',
+        columns: [{data: function(){return ""}}, {data: "username" }, {data: "name" }, {data: "get_role_display" }, {data: "group_display" },
+                  {data: function(){return 999}}, {data: "active_display" }],
+    };
+    jumpserver.initDataTable(options);
+}).on('click', '#btn_select_user', function() {
+    var $data_table = $('#select_user_table').DataTable();
+    var id_list = [];
+    var plain_id_list = [];
+    $data_table.rows({selected: true}).every(function(){
+        id_list.push({id: this.data().id});
+        plain_id_list.push(this.data().id);
+    });
+    if (id_list === []) {
+        return false;
+    };
+    console.log(id_list);
+    console.log(plain_id_list);
+    var body = {
+        id: {{ object.id }},
+        users: plain_id_list.map(Number)
+    };
+    console.log(body);
+    $('#select_user_modal').modal('hide');
 })
 </script>
 {% endblock %}

apps/users/templates/users/user_group_list.html

@@ -65,7 +65,7 @@ $(document).on('click', '.btn_delete_user_group', function(){
     var $this = $(this);
     function doDelete() {
         var group_id = $this.data('gid');
-        var the_url = "{% url 'users:user-group-delete-api' 99991937 %}".replace('99991937', group_id);
+        var the_url = "{% url 'users:user-group-edit-api' 99991937 %}".replace('99991937', group_id);
         var body = {};
         var success = function() {
             var msg = "{% trans 'Group Deleted.' %}";

apps/users/templates/users/user_list.html

@@ -2,6 +2,19 @@
 {% load i18n static %}
 {% get_current_language as LANGUAGE_CODE %}
 {% load common_tags %}
+{% block custom_head_css_js %}
+{{ block.super }}
+<style>
+div.dataTables_wrapper div.dataTables_filter,
+.dataTables_length {
+    float: right !important;
+}
+
+div.dataTables_wrapper div.dataTables_filter {
+  margin-left: 15px;
+}
+</style>
+{% endblock %}
 {% block table_search %}{% endblock %}
 {% block table_container %}
 <div class="uc pull-left"><a href="{% url "users:user-create" %}" class="btn btn-sm btn-primary"> {% trans "Create user" %} </a></div>
@@ -43,7 +56,6 @@
 {% endblock %}
 {% block custom_foot_js %}
 <script>
-jumpserver.checked = false;
 $(document).ready(function(){
     var options = {
         ele: $('#user_list_table'),
@@ -169,16 +181,6 @@ $(document).ready(function(){
     }, function() {
         doDelete();
     });
-}).on('click', '.ipt_check_all', function(){
-    if (!jumpserver.checked) {
-        $(this).closest('table').find('.ipt_check').prop('checked', true);
-        jumpserver.checked = true;
-        $('#user_list_table').DataTable().rows().select();
-    } else {
-        $(this).closest('table').find('.ipt_check').prop('checked', false);
-        jumpserver.checked = false;
-        $('#user_list_table').DataTable().rows().deselect();
-    }
 }).on('click', '#btn_user_bulk_update', function(){
     var json_data = $('#fm_user_bulk_update').serializeObject();
     var body = {};

apps/users/urls.py

@@ -46,10 +46,10 @@ urlpatterns += [
     url(r'^v1/user-groups$', api.UserGroupListAddApi.as_view(), name='user-group-list-api'),
     url(r'^v1/user-groups/(?P<pk>[0-9]+)$',
         api.UserGroupDetailDeleteUpdateApi.as_view(), name='user-group-detail-api'),
-    url(r'^v1/user-groups/group/(?P<pk>\d+)/user/(?P<uid>\d+)/$',
+    url(r'^v1/user-groups/(?P<pk>\d+)/user/(?P<uid>\d+)/$',
         api.DeleteUserFromGroupApi.as_view(), name='delete-user-from-group-api'),
-    url(r'^v1/user-groups/(?P<pk>[0-9]+)/edit$',
-        api.UserGroupEditApi.as_view(), name='user-group-edit-api'),
-    url(r'^v1/user-groups/(?P<pk>[0-9]+)/delete/$', api.GroupDeleteApi.as_view(),
-        name='user-group-delete-api'),
+    url(r'^v1/user-groups/(?P<pk>[0-9]+)/users/$',
+        api.GroupUserEditApi.as_view(), name='group-user-edit-api'),
+    url(r'^v1/user-groups/(?P<pk>[0-9]+)/edit/$', api.GroupEditApi.as_view(),
+        name='user-group-edit-api'),
 ]