userhandler/templates/user_list.html

   1 <!--
   2 Copyright 2019 EveryUP srl
   3
   4 Licensed under the Apache License, Version 2.0 (the "License");
   5 you may not use this file except in compliance with the License.
   6 You may obtain a copy of the License at
   7
   8     http://www.apache.org/licenses/LICENSE-2.0
   9
  10 Unless required by applicable law or agreed to in writing, software
  11 distributed under the License is distributed on an  BASIS,
  12 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13 See the License for the specific language governing permissions and
  14 limitations under the License.
  15 -->
  16 {% extends "base.html" %}
  17 {% load get %}
  18 {% load date_tag %}
  19 {% load staticfiles %}
  20
  21
  22 {% block head_block %}
  23     {{ block.super }}
  24     <link rel="stylesheet" href="/static/node_modules/select2/dist/css/select2.min.css">
  25     <link rel="stylesheet" href="/static/node_modules/datatables.net-bs/css/dataTables.bootstrap.min.css">
  26 {% endblock %}
  27 {% block title_header_big %}
  28     {{ block.super }}
  29 {% endblock %}
  30 {% block left_sidebar %}
  31     {% include 'osm/osm_project_left_sidebar.html' %}
  32 {% endblock %}
  33
  34
  35 {% block breadcrumb_body %}
  36     {{ block.super }}
  37     <li><a href="#">Users</a></li>
  38 {% endblock %}
  39
  40 {% block content_body %}
  41     {{ block.super }}
  42     {% include 'modal/user_details.html' %}
  43     {% include 'modal/user_create.html' %}
  44     {% include 'modal/user_credentials_edit.html' %}
  45     {% include 'modal/user_proj_role_edit.html' %}
  46
  47
  48     {% csrf_token %}
  49     <div class="row">
  50         <div class="col-md-12">
  51
  52             <div class="box">
  53                 <div class="box-header with-border">
  54                     <h3 class="box-title">Users</h3>
  55                     <div class="box-tools">
  56                         <button type="button" class="btn btn-default" data-container="body"
  57                                 onclick="javascript:openModalCreateUser({'projects_list_url': '{% url "projects:projects_list" %}', 'domains_list_url': '{% url "projects:domains_list" %}'})"
  58                                 data-toggle="tooltip" data-placement="top" title="New User">
  59
  60                             <i class="fa fa-plus"></i> Create User
  61                         </button>
  62
  63                     </div>
  64                 </div>
  65                 <div class="box-body">
  66                     <table id="users_table" class="table table-bordered table-striped">
  67                         <thead>
  68                         <tr>
  69                             <th>Name</th>
  70                             <th>Identifier</th>
  71                             <th>Modified</th>
  72                             <th>Created</th>
  73                             <th>Actions</th>
  74                         </tr>
  75                         </thead>
  76                         <tbody>
  77                         </tbody>
  78                     </table>
  79                 </div>
  80             </div>
  81         </div>
  82
  83     </div>
  84 {% endblock %}
  85
  86 {% block resource_block %}
  87     {{ block.super }}
  88     <script src="/static/node_modules/datatables.net/js/jquery.dataTables.min.js"></script>
  89     <script src="/static/node_modules/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
  90     <script src="/static/node_modules/select2/dist/js/select2.js"></script>
  91     <script src="/static/src/userhandler/user_list.js"></script>
  92     <script>
  93         var table;
  94         $(document).ready(function () {
  95             table = $('#users_table').DataTable({
  96                 responsive: true,
  97                 "ajax": {
  98                     "url": "/admin/users/list",
  99                     "dataSrc": function (json) {
 100                         return json['users'];
 101                     },
 102                     statusCode: {
 103                         401: function () {
 104                             console.log("no auth");
 105                             moveToLogin(window.location.pathname);
 106                         }
 107                     },
 108                     "error": function (hxr, error, thrown) {
 109                         console.log(hxr)
 110                         console.log(thrown)
 111                         console.log(error);
 112                     }
 113
 114                 },
 115                 "columns": [
 116                     {
 117                         "render": function (data, type, row) {
 118                             return row["username"];
 119                         },
 120                         "targets": 0
 121                     },
 122                     {
 123                         "render": function (data, type, row) {
 124
 125                             return row['_id'];
 126                         },
 127                         "targets": 1
 128                     },
 129                     {
 130                         "render": function (data, type, row) {
 131                             return moment.unix(row["_admin"]['modified']).format('YYYY-MM-DD hh:mm:ss a');
 132                         },
 133                         "targets": 2
 134                     },
 135                     {
 136                         "render": function (data, type, row) {
 137                             return moment.unix(row["_admin"]['created']).format('YYYY-MM-DD hh:mm:ss a');
 138                         },
 139                         "targets": 3
 140                     },
 141                     {
 142                         "render": function (data, type, row) {
 143                             return '<div class="btn-group">' +
 144                                 '<button type="button" class="btn btn-default dropdown-toggle"' +
 145                                 'data-toggle="dropdown" aria-expanded="false">Actions ' +
 146                                 '<span class="fa fa-caret-down"></span></button> ' +
 147                                 '<ul class="dropdown-menu">' +
 148                                 '<li> <a href="#" onclick="javascript:openModalEditUserCredentials({user_id:\'' + row['_id'] + '\', usernarme:\'' + row['username'] + '\'})">' +
 149                                 '<i class="fa fa-lock"></i>Edit Credentials</a></li>' +
 150                                 '<li> <a href="#" onclick="javascript:openModalEditUserRoleMap(\''+row['_id']+'\')">' +
 151                                 '<i class="fa fa-user-tag"></i>Projects-Roles</a></li>' +
 152                                 '<li> <a href="#" onclick="javascript:deleteUser(\'' + row['_id'] + '\', \'' + row['username'] + '\')"' +
 153                                 'style="color:red"><i class="fa fa-trash"></i> Delete</a></li> </ul></div>';
 154                         },
 155                         "targets": 4,
 156                         "orderable": false
 157                     }
 158                 ]
 159             });
 160
 161
 162             setInterval(function () {
 163                 table.ajax.reload();
 164             }, 10000);
 165
 166             $("#formCreateUser").submit(function (event) {
 167                 event.preventDefault(); //prevent default action
 168                 var post_url = $(this).attr("action"); //get form action url
 169                 var request_method = $(this).attr("method");
 170                 var form_data = new FormData(this); //Encode form elements for submission
 171
 172                 $.ajax({
 173                     url: post_url,
 174                     type: request_method,
 175                     data: form_data,
 176                     headers: {
 177                         "Accept": 'application/json'
 178                     },
 179                     contentType: false,
 180                     processData: false
 181                 }).done(function (response, textStatus, jqXHR) {
 182                     $('#modal_new_user').modal('hide');
 183                     table.ajax.reload();
 184                     bootbox.alert({
 185                         title: "Result",
 186                         message: "User successfully created."
 187                     });
 188
 189                 }).fail(function (result) {
 190                     var data = result.responseJSON;
 191                     var title = "Error " + (data.code ? data.code : 'unknown');
 192                     var message = data.detail ? data.detail : 'No detail available.';
 193                     bootbox.alert({
 194                         title: title,
 195                         message: message
 196                     });
 197                 });
 198             });
 199
 200             $("#formEditUser").submit(function (event) {
 201                 event.preventDefault(); //prevent default action
 202                 var post_url = $(this).attr("action"); //get form action url
 203                 var request_method = $(this).attr("method");
 204                 var form_data = new FormData(this); //Encode form elements for submission
 205
 206                 $.ajax({
 207                     url: post_url,
 208                     type: request_method,
 209                     data: form_data,
 210                     headers: {
 211                         "Accept": 'application/json'
 212                     },
 213                     contentType: false,
 214                     processData: false
 215                 }).done(function (response, textStatus, jqXHR) {
 216                     $('#modal_edit_user_credentials').modal('hide');
 217                     table.ajax.reload();
 218                     bootbox.alert({
 219                         title: "Result",
 220                         message: "User successfully modified."
 221                     });
 222
 223                 }).fail(function (result) {
 224                     var data = result.responseJSON;
 225                     var title = "Error " + (data.code ? data.code : 'unknown');
 226                     var message = data.detail ? data.detail : 'No detail available.';
 227                     bootbox.alert({
 228                         title: title,
 229                         message: message
 230                     });
 231                 });
 232             });
 233
 234             $("#password2").keyup(validatePswOnCreate);
 235             $("#edit_password2").keyup(validatePswOnEdit);
 236
 237             $(document).on('click', '.proj-role-map-group-head .btn-add', addMapGroup);
 238             $(document).on('click', '.proj-role-map-group .btn-remove', removeMapGroup);
 239         });
 240     </script>
 241
 242
 243 {% endblock %}
 244
 245 {% block footer %}
 246     {% include "footer.html"  %}
 247 {% endblock %}