documize/gui/app/templates/components/folder/category-admin.hbs

<div class="space-admin">
	<div class="categories">
		{{#each category as |cat|}}
			<div class="item row">
				{{#if cat.editMode}}
					<form onsubmit={{action 'onSave' cat.id bubbles=false}} class="col-8">
						{{focus-input id=(concat 'edit-category-' cat.id) type="text" value=cat.category class="form-control"}}
					</form>
				{{else}}
					<div class="category col-8">
						<div class="name">{{cat.category}}</div>
						<div class="info">{{cat.documents}} {{if (eq cat.documents 1) 'document' 'documents' }} &middot; {{cat.users}} users/groups</div>
					</div>
				{{/if}}
				<div class="col-4 buttons text-right">
					{{#if cat.editMode}}
						<button type="button" class="btn btn-outline-secondary" {{action 'onEditCancel' cat.id}}>Cancel</button>
						<button type="button" class="btn btn-success"  {{action 'onSave' cat.id}}>Save</button>
					{{else}}
						<div id="category-access-button-{{cat.id}}" class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Category access" {{action 'onShowAccessPicker' cat.id}}>
							<i class="material-icons">security</i>
						</div>
						<div class="button-icon-gap" />
						<div class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Rename" {{action 'onEdit' cat.id}} >
							<i class="material-icons">edit</i>
						</div>
						<div class="button-icon-gap" />
						<div id="{{concat 'delete-category-' cat.id}}" class="button-icon-danger align-middle" data-toggle="tooltip" data-placement="top" title="Delete" {{action 'onShowDelete' cat.id}}>
							<i class="material-icons">delete</i>
						</div>
					{{/if}}
				</div>
			</div>
		{{else}}
			<div class="margin-top-30"><i>No categories</i></div>
		{{/each}}
	</div>
</div>

<div id="category-delete-modal" class="modal" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">Category Deletion</div>
			<div class="modal-body">
				<p>Are you sure you want to delete this category?</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
				<button type="button" class="btn btn-danger" onclick={{action 'onDelete'}}>Delete</button>
			</div>
		</div>
	</div>
</div>

{{#ui/ui-dialog title="Set Category Access" confirmCaption="Save" buttonType="btn-success" show=showCategoryAccess onAction=(action 'onGrantAccess')}}
	<p>Select who can view documents within category</p>

	<div class="widget-list-picker">
		<ul class="options">
			{{#each categoryPermissions as |permission|}}
				<li class="option {{if permission.selected 'selected'}}" {{action 'onToggle' permission}}>
					<div class="text text-truncate">
						{{#if (eq permission.who "role")}}
							<span class="button-icon-gray button-icon-small align-middle">
								<i class="material-icons">people</i>
							</span>
						{{else}}
							{{#if (eq permission.whoId constants.EveryoneUserId)}}
								<span class="button-icon-gray button-icon-small align-middle">
									<i class="material-icons">language</i>
								</span>
							{{else}}
								<span class="button-icon-gray button-icon-small align-middle">
									<i class="material-icons">person</i>
								</span>
							{{/if}}
						{{/if}}
						&nbsp;{{permission.name}}
						{{#if (eq permission.whoId session.user.id)}}
							<small class="form-text text-muted d-inline-block">(you)</small>
						{{/if}}
					</div>
					{{#if permission.selected}}
						<i class="material-icons">check</i>
					{{/if}}
				</li>
			{{/each}}
		</ul>
	</div>
{{/ui/ui-dialog}}