path: root/lib/srtgui/templates/users.html

{% extends "base.html" %}

{% load jobtags %}

{% block title %} Users - SRTool {% endblock %}

{% block pagecontent %}

<div class="row">
  <!-- Breadcrumbs -->
	<div class="col-md-12">
		<ul class="breadcrumb" id="breadcrumb">
			<li><a href="{% url 'landing' %}">Home</a></li><span class="divider">&rarr;</span>
			<li><a href="{% url 'manage' %}">Management</a></li><span class="divider">&rarr;</span>
			<li>Users</li>
		</ul>
	</div>
</div>

<!-- Begin container -->

<div class="row">
  <div class="col-md-12">
    <div class="page-header build-data">
        <h1>Users</h1>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-6">
	<div>
		<h3>Access Levels</h3>
		<div style="padding-left: 25px;">
		<p><b>Reader</b>: User that can read the content (Field, TechPubs)</p>
		<p><b>Contributor</b>: Reader that can can add notes and attachements (Engineers, Test, Managers)</p>
		<p><b>Creator</b>: Contributor that can create Investigations and defect records </p>
		<p><b>Admin</b>: Creator that can manage users, data sources</p>
		</div>
	</div>
  </div>
</div>

<div class="row" style="padding-left: 25px;">
	<h3>User List
		<a class="btn btn-default navbar-btn " href="{% url 'edit_user' 0 %}">Add user</a>
	</h3>

	<table class="table table-striped table-condensed">
		<thead>
			<tr>
				{% if user.is_admin %}
				<th>ID</th>
				{% endif %}
				<th>User</th>
				<th>First</th>
				<th>Last</th>
				<th>Email</th>
				<th>Role</th>
				<th>Time zone</th>
				<th>Group</th>
				<th>Last Login</th>
				<th>Manage</th>
			</tr>
		</thead>

		{% if object.all %}
		  {% for user_obj in object.all %}
			<tr>
				{% if user.is_admin %}
				<td>{{ user_obj.id }}</td>
				{% endif %}
				<td>{{ user_obj.username }}</td>
				<td>{{ user_obj.first_name }}</td>
				<td>{{ user_obj.last_name }}</td>
				<td>{{ user_obj.email }}</td>
				<td>{{ user_obj.role }}</td>
				<td>{{ user_obj.timezone }}</td>
				<td>{% if user_obj.is_superuser %}SuperUser{% else %}{{ user_obj.get_groups }}{%endif %}</td>
				<td>{{ user_obj.last_login|date:'Y-m-d'}}</td>
				<td>
				  {% if user_obj.is_superuser or not user_obj.is_staff %}
					<span id="user_'+{{user.id}}+'" class="js-user-name"></span>
					<a href="{% url 'edit_user' user_obj.id %}"><span class="glyphicon glyphicon-edit js-icon-pencil-config_var"></span></a>
					&nbsp;&nbsp;
					<span class="glyphicon glyphicon-trash trash-user" id="user_trash_'+{{user_obj.id}}+'" x-data="{{user_obj.username}}:{{user_obj.id}}"></span>
				  {% else %}
				  Built-in
				  {% endif %}
				</td>

			</tr>
		  {% endfor %}
		{% else %}
			<tr>
				<td>No users found</td>
			</tr>
		{% endif %}

	</table>

</div>

<!-- pass the full user list here -->
{% for user in object.all %}
<input type="hidden" class="js-checkbox-users-list" value="{{user.id}}|{{user.user_fullname}}">
{% endfor %}

<div class="row" id="group-section" style="padding-left: 25px;width:70%;">

	<h3 style="white-space: nowrap;">Group List ({{builtin_groups}})
		<a class="btn btn-default navbar-btn" id="add_group">Add group</a>
		<!--<button class="execute" id="add_group" style="display:inline-block;"> Add group: </button>-->
		<input type="text" value="" style="width:16%;display:inline-block;" class="form-control" id="add-group-name" placeholder="Name for new group">
	</h3>

	<div class="row" id="edit_group_options" style="display:none;padding-left:25px;color:DarkCyan;">
		<h3>Group Edit:
		<a class="btn btn-default navbar-btn" style="color:DarkCyan;" id="edit-save" >Save</a>
		<a class="btn btn-default navbar-btn" style="color:DarkCyan;" id="edit-cancel" >Cancel</a>
		</h3>
		<label style="width:100px;height:24px;">Group name:</label>
		<input type="text" value="" style="width:25%;" class="form-control" id="new-group-name" placeholder="Name for the group">
		<input type="text" style="display:none;" id="new-group-id" >
		<br>
		<label style="width:100px;height:24px;">User list:</label>
	    <div id="all-users" class="scrolling"></div>
		<br>
		<hr>
	</div>

	<table class="table table-striped table-condensed">
		<thead>
			<tr>
				<th>Name</th>
				<th>User</th>
				<th>Manage User</th>
				<th>Manage Group</th>
			</tr>
		</thead>

		{% if groups.all %}
		  {% for group in groups.all %}
			<tr>
				<td>{{ group.name }} </td>
				<td></td>
				<td></td>
				<td>
				{% if group.name in builtin_groups %}
				  Built-in
				{% else %}
					<span id="group_'+{{group.id}}+'" class="js-group-name"></span>
					<a id="edit_group">
						<span class="glyphicon glyphicon-edit js-icon-pencil-config_var edit_group"
						x-data="{{group.id}}|{{group.name}}|{% for user in group.user_set.all %}{{user.user_fullname}},{% endfor %}">
						</span></a>
					&nbsp;&nbsp;
					<span class="glyphicon glyphicon-trash trash-group" x-data="{{group.id}}|{{group.name}}"></span>
				{% endif %}
				</td>
			</tr>
		    {% for user in group.user_set.all %}
			<tr>
				<td></td>
				<td>{{ user.user_fullname }} </td>
				<td>
				{% if group.name in builtin_groups %}
				  (Managed above)
				{% else %}
					<span class="glyphicon glyphicon-trash trash-user-from-group"  x-data="{{group.id}}|{{group.name}}|{{user.id}}|{{user.user_fullname}}"></span>
				{% endif %}
				</td>
				<td></td>
			</tr>
		    {% endfor %}
		  {% endfor %}
		{% else %}
			<tr>
				<td>No groups found</td>
			</tr>
		{% endif %}

	</table>

</div>

<!-- Javascript support -->
<script>
	$(document).ready(function() {

	  function onCommitAjaxSuccess(data, textstatus) {
	    if (window.console && window.console.log) {
	      console.log("XHR returned:", data, "(" + textstatus + ")");
	    } else {
	      alert("NO CONSOLE:\n");
	      return;
	    }
	    if (data.error != "ok") {
	      alert("error on request:\n" + data.error);
	      return;
	    }
	    // reload the page with the updated tables
	    location.reload(true);
	  }

	  function onCommitAjaxError(jqXHR, textstatus, error) {
	    console.log("ERROR:"+error+"|"+textstatus);
	    alert("XHR errored1:\n" + error + "\n(" + textstatus + ")");
	  }

	  /* ensure cookie exists {% csrf_token %} */
	  function postCommitAjaxRequest(reqdata) {
		var ajax = $.ajax({
	      type:"POST",
	      data: reqdata,
	      url:"{% url 'xhr_user_commit' %}",
	      headers: { 'X-CSRFToken': $.cookie("csrftoken")},
	      success: onCommitAjaxSuccess,
	      error: onCommitAjaxError,
	    })
	  }

	  $('.trash-user').click(function() {
		var result = confirm("Are you sure you want to remove user '" + $(this).attr('x-data').split(':')[0] + "'?");
		if (result){
			postCommitAjaxRequest({
				"action" : 'submit-trashuser',
				"record_id" : $(this).attr('x-data').split(':')[1],
				});
		}
	  });

	  $('.edit_group').click(function() {
			document.getElementById("new-group-name").value= $(this).attr('x-data').split('|')[1];
			document.getElementById("new-group-id").value= $(this).attr('x-data').split('|')[0];
			$("#edit_group_options").slideDown();
			// build the user list: avoid false substring matches by including comma separators
			var html         = "";
			var group_user_set = "," + $(this).attr('x-data').split('|')[2] + ",";
			var users_list = document.getElementsByClassName('js-checkbox-users-list');
			// Add the checked boxes first
			for (var i = 0, length = users_list.length; i < length; i++) {
				var status = '" >';
				var user_id = users_list[i].value.split("|")[0];
				var user_name = users_list[i].value.split("|")[1];
				if (0 <= group_user_set.indexOf(","+user_name+",")) {
					status = '" checked="checked">';
				};
				html += '<div class="checkbox"><label><input type="checkbox" class="checkbox-users" x-data="'+user_id+'" value="'+users_list[i].value+status+user_name+'</label></div>';
			}
			document.getElementById("all-users").innerHTML = html;
			//document.getElementById("edit_group_options").focus();
			document.getElementById("group-section").scrollIntoView();
	  });

	  $('#edit-save').click(function() {
		$("#edit_group_options").slideUp();
		var user_id_list = "";
		$("input[type='checkbox']").each(function(){
		  var user_id = $(this).attr('x-data');
		  var ischecked = $(this).is(":checked");
		  if (ischecked) {
			user_id_list = user_id_list + user_id + ',';
		  }
		});
		postCommitAjaxRequest({
			"action" : 'submit-group-users',
			"group_id" : document.getElementById("new-group-id").value,
			"user_id_list" : user_id_list,
		});
	  });

	  $('#edit-cancel').click(function() {
		$("#edit_group_options").slideUp();
	  });

	  $('#add_group').click(function() {
		var new_group_name = document.getElementById("add-group-name").value;
		var result = confirm("Create new group '"+new_group_name+"'?");
		if (result){
			postCommitAjaxRequest({
				"action" : 'submit-group-create',
				"group_name" : new_group_name,
			});
		};
	  });

	  $('.trash-group').click(function() {
		var result = confirm("Are you sure you want to remove group '" + $(this).attr('x-data').split('|')[1] + "'?");
		if (result){
			postCommitAjaxRequest({
				"action" : 'submit-trashgroup',
				"record_id" : $(this).attr('x-data').split('|')[0],
				});
		}
	  });

	  $('.trash-user-from-group').click(function() {
	    var group_id = $(this).attr('x-data').split('|')[0];
	    var group_name = $(this).attr('x-data').split('|')[1];
	    var user_id = $(this).attr('x-data').split('|')[2];
	    var user_name = $(this).attr('x-data').split('|')[3];
		var result = confirm("Are you sure you want to remove user '" + user_name + "' from group '" + group_name + "'?");
		if (result){
			postCommitAjaxRequest({
				"action" : 'submit-trashusergroup',
				"group_id" : group_id,
				"record_id" : user_id,
				});
		}
	  });
	});
</script>


{% endblock %}