pillar/src/templates/projects/sharing.jade

| {% extends 'layout.html' %}

| {% set title = 'sharing' %}

| {% block page_title %}Sharing: {{ project.name }}{% endblock %}

| {% block body %}
#project-container
	#project-side-container
		#project_sidebar
			ul.project-tabs
				li.tabs-thumbnail(
					title="About",
					data-toggle="tooltip",
					data-placement="left",
					class="{% if title == 'about' %}active {% endif %}{% if project.picture_square %}image{% endif %}")
					a(href="{{url_for('projects.about', project_url=project.url, _external=True)}}")
						#project-loading
							i.pi-spin
						| {% if project.picture_square %}
						img(src="{{ project.picture_square.thumbnail('b', api=api) }}")
						| {% else %}
						i.pi-home
						| {% endif %}
				li.tabs-browse(
					title="Browse",
					data-toggle="tooltip",
					data-placement="left")
					a(href="{{url_for('projects.view', project_url=project.url, _external=True)}}")
						i.pi-tree-flow
				| {% if not project.is_private %}
				li.tabs-search(
					title="Search",
					data-toggle="tooltip",
					data-placement="left")
					a(href="{{url_for('projects.search', project_url=project.url, _external=True)}}")
						i.pi-search
				| {% endif %}

				.project_nav-toggle-btn(
					title="Expand Navigation [T]",
					data-toggle="tooltip",
					data-placement="right")
					i.pi-angle-double-left

		#project_nav
			#project_nav-container
				#project_nav-header
					.project-title
						a(href="{{url_for('projects.view', project_url=project.url, _external=True)}}")
							| {{ project.name }}

				// TODO - make list a macro
				#project_tree
					ul.project_nav-edit-list
						li(class="{% if title == 'edit' %}active{% endif %}")
							a(href="{{ url_for('projects.edit', project_url=project.url) }}")
								i.pi-list
								| Overview
						li(class="{% if title == 'sharing' %}active{% endif %}")
							a(href="{{ url_for('projects.sharing', project_url=project.url) }}")
								i.pi-share
								| Sharing
						li(class="{% if title == 'edit_node_types' %}active{% endif %}")
							a(href="{{ url_for('projects.edit_node_types', project_url=project.url) }}")
								i.pi-puzzle
								| Node Types

				.project_split(title="Toggle Navigation [T]")

	#project_context-container
		#project_context-header
			span#project-statusbar

			span#project-edit-title
				| Manage users for this project

		#project_context
			#node-edit-container
				#node-edit-form
					.col-md-6
						| {% if (project.user == current_user.objectid or current_user.has_role('admin')) %}
						.sharing-users-search
							.form-group
								input#user-select.form-control(
									name='contacts',
									type='text',
									placeholder='Add users by name')
						| {% else %}
						.sharing-users-search
							.disabled Only project owners can manage users
						| {% endif %}


						ul.sharing-users-list
							| {% for user in users %}
							li.sharing-users-item(
								user-id="{{ user['_id'] }}",
								class="{% if current_user.objectid == user['_id'] %}self{% endif %}")
								.sharing-users-avatar
									img(src="{{ user['avatar'] }}")
								.sharing-users-details
									span.sharing-users-name
										| {{user['full_name']}}
										| {% if project.user == user['_id'] and current_user.objectid == user['_id'] %}
										small (You, owner)
										| {% elif project.user == user['_id'] %}
										small (Owner)
										| {% elif current_user.objectid == user['_id'] %}
										small (You)
										| {% endif %}
									span.sharing-users-extra {{user['username']}}
								.sharing-users-action
									| {# Only allow deletion if we are: admin, project owners, or current_user in the team #}
									| {% if current_user.has_role('admin') or (project.user == current_user.objectid) or (current_user.objectid == user['_id']) %}

									| {% if project.user == user['_id'] %}
									span
										i.pi-happy(title="Hi boss!")
									| {% elif current_user.objectid == user['_id'] %}
									button.user-remove(title="Leave this project") Leave
									| {% else %}
									button.user-remove(title="Remove this user from your project")
										i.pi-trash
									| {% endif %}

									| {% endif %}
							| {% endfor %}

					.col-md-6
						.sharing-users-info
							h4 What can team members do?
							p.
								Team members are able to upload new content to the
								project; as well as view, edit, and comment on the content previously created.

| {% endblock %}

| {% block footer_navigation %}
| {% endblock %}

| {% block footer_scripts %}
script(type="text/javascript").
	$(window).on("load resize",function(){
		containerResizeY($(window).height());
	});
| {% if (project.user == current_user.objectid or current_user.has_role('admin')) %}
script(src='//cdn.jsdelivr.net/autocomplete.js/0/autocomplete.jquery.min.js')
script.
	$(document).ready(function() {
		var APPLICATION_ID = '{{config.ALGOLIA_USER}}'
		var SEARCH_ONLY_API_KEY = '{{config.ALGOLIA_PUBLIC_KEY}}';
		var INDEX_NAME = '{{config.ALGOLIA_INDEX_USERS}}';
		var client = algoliasearch(APPLICATION_ID, SEARCH_ONLY_API_KEY);
		var index = client.initIndex(INDEX_NAME);

		$('#user-select').autocomplete({hint: false}, [
			{
				source: function (q, cb) {
					index.search(q, {hitsPerPage: 5}, function (error, content) {
						if (error) {
							cb([]);
							return;
						}
						cb(content.hits, content);
					});
				},
				displayKey: 'full_name',
				minLength: 2,
				limit: 10,
				templates: {
					suggestion: function (hit) {
						return hit._highlightResult.full_name.value + ' (' + hit._highlightResult.username.value + ')';
					}
				}
			}
		]).on('autocomplete:selected', function (event, hit, dataset) {

			var lis = document.getElementsByClassName('sharing-users-item');
			var has_match = false;

			for (var i = 0; i < lis.length; ++i) {

				// Check if the user already is in the list
				if ($(lis[i]).attr('user-id') == hit.objectID){

					$(lis[i]).addClass('active');
					setTimeout(function(){ $('.sharing-users-item').removeClass('active');}, 350);
					statusBarSet('info', 'User is already part of the project', 'pi-info');

					has_match = false;
					break;
				} else {
					has_match = true;
					continue;
				}
			};

			if (has_match){
				addUser(hit.objectID);
			}

		});


		function addUser(userId){
			if (userId && userId.length > 0) {
				$.post("{{url_for('projects.sharing', project_url=project.url)}}",
								{user_id: userId, action: 'add'})
					.done(function (data) {

						$("ul.sharing-users-list").prepend('' +
							'<li class="sharing-users-item" user-id="' + data._id + '">' +
								'<div class="sharing-users-avatar">' +
									'<img src="' + data.avatar  + '">'+
								'</div>' +
								'<div class="sharing-users-details">' +
									'<span class="sharing-users-name">' + data.full_name + '</span>' +
									'<span class="sharing-users-extra">' + data.username + '</span>' +
								'</div>' +
								'<div class="sharing-users-action">' +
									'<button title="Remove this user from your project" class="user-remove">'+
										'<i class="pi-trash"></i>'+
									'</button>'+
								'</div>'+
							'</li>');

						$("ul.sharing-users-list").find("[user-id='" + userId + "']").addClass('added');
						setTimeout(function(){ $('.sharing-users-item').removeClass('added');}, 350);
						statusBarSet('success', 'User added to this project!', 'pi-grin');
					})
					.fail(function (jsxhr){
						data = jsxhr.responseJSON;
						statusBarSet('error', 'Could not add user (' + data.message + ')', 'pi-warning');
					});
			} else {
				statusBarSet('error', 'Please select a user from the list', 'pi-warning');
			}
		};



	});

| {% endif %}
script.
	$(document).ready(function() {
		$('body').on('click', '.user-remove', function(e) {
			var userId = $(this).parent().parent().attr('user-id');
			removeUser(userId);
		});

		function removeUser(userId){
			$.post("{{url_for('projects.sharing', project_url=project.url)}}",
							{user_id: userId, action: 'remove'})
				.done(function (data) {
					$("ul.sharing-users-list").find("[user-id='" + userId + "']").remove();
					statusBarSet('success', 'User removed from this project', 'pi-trash');
				})
				.fail(function (data){
					statusBarSet('error', 'Could not remove user (' + data._status + ')', 'pi-warning');
				});
		}
	});

| {% endblock %}