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

<div class="content-zone">

	<div class="explainer-header explainer-gap">Categories</div>
	<form class="form-inline" onsubmit={{action "onAdd"}}>
		<div class="form-group mr-3">
			{{focus-input id="new-category-name" type="text" class="form-control mousetrap" placeholder="Category name" value=newCategory}}
		</div>
		<button type="button" class="btn btn-success bold-700" onclick={{action "onAdd"}}>Add</button>
	</form>

	<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
								{{#unless cat.access}}<span class="text-danger">(you have no view permission)</span>{{/unless}}
							</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" {{action "onShowAccessPicker" cat.id}}>
								{{#attach-tooltip showDelay=1000}}Category view permission{{/attach-tooltip}}
								<i class="material-icons">security</i>
							</div>
							<div class="button-icon-gap" />
							<div class="button-icon-gray align-middle" {{action "onEdit" cat.id}} >
								{{#attach-tooltip showDelay=1000}}Rename{{/attach-tooltip}}
								<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" {{action "onShowDelete" cat.id}}>
								{{#attach-tooltip showDelay=1000}}Delete{{/attach-tooltip}}
								<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}}

</div>