documize/gui/app/templates/components/folder/settings-permissions.hbs

<div class="content-zone">
	<div class="explainer-header">Who can see this space and perform actions</div>
</div>

<div class="container-fluid my-3">
	<div class="row justify-content-center">
		<button type="button" class="btn btn-info bold-700 text-uppercase my-3" onclick={{action "onShowAddModal"}}>Add existing users</button>
		&nbsp;&nbsp;
		<button type="button" class="btn btn-info bold-700 text-uppercase my-3" onclick={{action "onShowInviteModal"}}>Invite new users</button>
	</div>
</div>

<div class="space-admin table-responsive">
	<table class="table table-hover permission-table mb-3">
		<thead>
			<tr>
				<th></th>
				<th colspan="3" class="text-warning">Spaces</th>
				<th colspan="9" class="text-info">Documents</th>
			</tr>
			<tr>
				<th></th>
				<th class="text-warning">View</th>
				<th class="text-warning">Manage</th>
				<th class="text-warning">Owner</th>
				<th class="text-info">Create</th>
				<th class="text-info">Edit</th>
				<th class="text-info">Delete</th>
				<th class="text-info">Move</th>
				<th class="text-info">Copy</th>
				<th class="text-info">Templates</th>
				<th class="text-info">Approval</th>
				<th class="text-info">Lifecycle</th>
				<th class="text-info">Versions</th>
			</tr>
		</thead>
		<tbody>
			{{#each spacePermissions as |permission|}}
				<tr>
					<td class="no-wrap no-width">
						<i class="material-icons align-top text-secondary cursor-pointer">more_vert</i>
						{{#attach-popover class="ember-attacher-popper" hideOn="clickout" showOn="click" isShown=false}}
							<div class="menu">
								<a class="item" href="#" {{action "onBulkPermission" permission true}}>Grant all</a>
								<a class="item" href="#" {{action "onBulkPermission" permission false}}>Revoke all</a>
							</div>
						{{/attach-popover}}
						{{#if (eq permission.who "role")}}
							<span class="button-icon-blue button-icon-small align-middle">
								<i class="material-icons">people</i>
							</span>
							<span class="color-gray-700">&nbsp;{{permission.name}}
								<small class="form-text text-muted d-inline-block">({{permission.members}})</small>
							</span>
						{{else}}
							{{#if (eq permission.whoId constants.EveryoneUserId)}}
								<span class="button-icon-green button-icon-small align-middle">
									<i class="material-icons">language</i>
								</span>
								<span class="color-green-700">&nbsp;{{permission.name}}</span>
							{{else}}
								<span class="button-icon-gray button-icon-small align-middle">
									<i class="material-icons">person</i>
								</span>
								<span class="">&nbsp;{{permission.name}}
									{{#if (eq permission.whoId session.user.id)}}
										<small class="form-text text-muted d-inline-block">(you)</small>
									{{/if}}
								</span>
							{{/if}}
						{{/if}}
					</td>
					<td>{{x-toggle value=permission.spaceView onToggle=(action (mut permission.spaceView))}}</td>
					<td>{{x-toggle value=permission.spaceManage onToggle=(action (mut permission.spaceManage))}}</td>
					<td>{{x-toggle value=permission.spaceOwner onToggle=(action (mut permission.spaceOwner)) disabled=isNotSpaceOwner}}</td>
					<td>{{x-toggle value=permission.documentAdd onToggle=(action (mut permission.documentAdd))}}</td>
					<td>{{x-toggle value=permission.documentEdit onToggle=(action (mut permission.documentEdit))}}</td>
					<td>{{x-toggle value=permission.documentDelete onToggle=(action (mut permission.documentDelete))}}</td>
					<td>{{x-toggle value=permission.documentMove onToggle=(action (mut permission.documentMove))}}</td>
					<td>{{x-toggle value=permission.documentCopy onToggle=(action (mut permission.documentCopy))}}</td>
					<td>{{x-toggle value=permission.documentTemplate onToggle=(action (mut permission.documentTemplate))}}</td>
					<td>{{x-toggle value=permission.documentApprove onToggle=(action (mut permission.documentApprove))}}</td>
					<td>{{x-toggle value=permission.documentLifecycle onToggle=(action (mut permission.documentLifecycle))}}</td>
					<td>{{x-toggle value=permission.documentVersion onToggle=(action (mut permission.documentVersion))}}</td>
				</tr>
			{{/each}}
		</tbody>
	</table>
</div>

<button type="button" class="btn btn-success bold-700 text-uppercase my-3" onclick={{action "onSave"}}>SAVE</button>

<div class="row my-3">
	<div class="col-12 col-md-6">
		<div class="content-zone">
			<p class="explainer-text">Space permissions:</p>
			<ul class="explainer-list">
				<li>View &mdash; see content within this space</li>
				<li>Manage &mdash; manage all aspects of space except deletion</li>
				<li>Owner &mdash; manage and delete space</li>
			</ul>
		</div>
	</div>
	<div class="col-12 col-md-6">
		<div class="content-zone">
			<p class="explainer-text">Document permissions:</p>
			<ul class="explainer-list explainer-gap">
				<li>Create &mdash; create new documents</li>
				<li>Edit &mdash; edit documents</li>
				<li>Delete &mdash; delete documents</li>
				<li>Move &mdash; move content between documents</li>
				<li>Copy &mdash; copy content between documents</li>
				<li>Templates &mdash; create, edit, delete document templates and content blocks</li>
				<li>Approval &mdash; approve or reject content changes</li>
				<li>Lifecycle &mdash; mark documents as Draft, Live or Archived</li>
				<li>Versions &mdash; create versions of documents (baselining)</li>
			</ul>
		</div>
	</div>
</div>

<div id="space-add-user-modal" class="modal" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">Add User To Space</div>
			<div class="modal-body">
				{{input id="user-search" type="text" class="form-control mousetrap" placeholder="Search for users by firstname, lastname, email" value=searchText key-up=(action "onSearch")}}
				{{#each filteredUsers as |user|}}
					<div class="row my-3">
						<div class="col-10">{{user.fullname}}</div>
						<div class="col-2 text-right">
							<button class="btn btn-success" {{action "onAdd" user}}>Add</button>
						</div>
					</div>
				{{/each}}
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
			</div>
		</div>
	</div>
</div>

<div id="space-invite-user-modal" class="modal" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">Invite Users to Space</div>
			<div class="modal-body">
				<p>Email invite leads to a smooth onboarding process</p>
				<form onsubmit={{action "onSpaceInvite"}}>
					<div class="form-group">
						<label for="space-invite-email">Email</label>
						{{input id="space-invite-email" type="email" class="form-control mousetrap" placeholder="Enter email" value=inviteEmail}}
						<small class="form-text text-muted">Comma separate multiple email addresses</small>
					</div>
					<div class="form-group">
						<label for="space-invite-msg">Message</label>
						{{textarea id="space-invite-msg" value=inviteMessage class="form-control" rows="5"}}
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Close</button>
				<button type="button" class="btn btn-success" onclick={{action "onSpaceInvite"}}>Invite</button>
			</div>
		</div>
	</div>
</div>