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

{{layout/logo-heading
	title="Space Permissions"
	desc="Assign permissions to users or groups and invite new users to this space"
	icon=constants.Icon.Locked}}

<div class="view-customize">
	<div class="explain-user-perms">
		<div class="title" {{action "toggleSpacePerms"}}>
			Space Permissions Explained
			{{#if showSpacePermExplain}}
				<i class="dicon {{constants.Icon.ArrowSmallUp}}" />
			{{else}}
				<i class="dicon {{constants.Icon.ArrowSmallDown}}" />
			{{/if}}
		</div>
		<div class="perms space-perms">
			<div class="perm-name">View</div>
			<div class="perm-desc">See content within this space</div>
			<div class="perm-name">Manage</div>
			<div class="perm-desc">Manage all aspects of space except deletion</div>
			<div class="perm-name">Owner</div>
			<div class="perm-desc">Manage and delete space</div>
		</div>

		{{ui/ui-spacer size=200}}

		<div class="title" {{action "toggleDocumentPerms"}}>
			Document Permissions Explained
			{{#if showDocumentPermExplain}}
				<i class="dicon {{constants.Icon.ArrowSmallUp}}" />
			{{else}}
				<i class="dicon {{constants.Icon.ArrowSmallDown}}" />
			{{/if}}
		</div>
		<div class="perms document-perms">
			<div class="perm-name">Create</div>
			<div class="perm-desc">Can create new documents in space</div>
			<div class="perm-name">Edit</div>
			<div class="perm-desc">Can change document contents</div>
			<div class="perm-name">Delete</div>
			<div class="perm-desc">Can remove documents from space</div>
			<div class="perm-name">Move</div>
			<div class="perm-desc">Can move documents from this space to another space</div>
			<div class="perm-name">Copy</div>
			<div class="perm-desc">Can duplicate documents</div>
			<div class="perm-name">Templates</div>
			<div class="perm-desc">Can create and publish document templates</div>
			<div class="perm-name">Approval</div>
			<div class="perm-desc">Can approve or reject document content changes</div>
			<div class="perm-name">Lifecycle</div>
			<div class="perm-desc">Can mark documents as Draft, Live and Archived</div>
			<div class="perm-name">Versions</div>
			<div class="perm-desc">Can create document version and link them together</div>
		</div>
	</div>
</div>

{{ui/ui-spacer size=300}}

<div class="text-center">
	{{ui/ui-button color=constants.Color.Gray light=true icon=constants.Icon.Person
		label="Add Existing User"
		onClick=(action "onShowAddModal")}}
	{{ui/ui-button-gap}}
	{{ui/ui-button color=constants.Color.Gray light=true icon=constants.Icon.Plus
		label="Invite New User"
		onClick=(action "onShowInviteModal")}}
</div>

{{ui/ui-spacer size=300}}

<div class="space-admin table-responsive">
	<table class="table table-hover permission-table">
		<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>

{{ui/ui-button color=constants.Color.Green light=true icon=constants.Icon.Locked
	label=constants.Label.Save onClick=(action "onSave")}}

<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">
	 			{{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Close dismiss=true}}
			</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">
				{{ui/ui-button color=constants.Color.Gray light=true
					label=constants.Label.Close dismiss=true}}
				{{ui/ui-button-gap}}
				{{ui/ui-button color=constants.Color.Green light=true
					label=constants.Label.Invite onClick=(action "onSpaceInvite")}}
			</div>
		</div>
	</div>
</div>