mirror of
https://github.com/documize/community.git
synced 2025-07-24 07:39:43 +02:00
Complete the UI migration for all space setting views
Permissions and Categories admin views have been migrated to the new UI layout system.
This commit is contained in:
Harvey Kandola
parent
60e92b63a9
commit
b4b3dbcb4c
7 changed files with 179 additions and 142 deletions
|
|
@ -8,9 +8,9 @@
|
|||
{{/link-to}}
|
||||
<div class="meta">
|
||||
<div class="lifecycle">
|
||||
<div class="{{if (eq document.lifecycle constants.Lifecycle.Draft) 'draft'}}
|
||||
{{if (eq document.lifecycle constants.Lifecycle.Live) 'live'}}
|
||||
{{if (eq document.lifecycle constants.Lifecycle.Archived) 'archived'}}">
|
||||
<div class="{{if (eq document.lifecycle constants.Lifecycle.Draft) "draft"}}
|
||||
{{if (eq document.lifecycle constants.Lifecycle.Live) "live"}}
|
||||
{{if (eq document.lifecycle constants.Lifecycle.Archived) "archived"}}">
|
||||
{{document.lifecycleLabel}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,108 +1,118 @@
|
|||
<div class="content-zone">
|
||||
{{layout/logo-heading
|
||||
title="Categories"
|
||||
desc="Assign categories to documents and decide who can view them"
|
||||
icon=constants.Icon.Category}}
|
||||
|
||||
<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" }} · {{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 class="space-admin">
|
||||
<div class="categories">
|
||||
<form class="form" onsubmit={{action "onAdd"}}>
|
||||
<div class="form-group">
|
||||
{{focus-input id="new-category-name" type="text" class="form-control mousetrap" placeholder="Category name" value=newCategory}}
|
||||
</div>
|
||||
{{ui/ui-button color=constants.Color.Green light=true
|
||||
label=constants.Label.Add icon=constants.Icon.Category
|
||||
onClick=(action "onAdd")}}
|
||||
</form>
|
||||
</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>
|
||||
{{ui/ui-spacer size=400}}
|
||||
|
||||
<div class="space-admin">
|
||||
<div class="categories">
|
||||
{{#each category as |cat|}}
|
||||
<div class="category">
|
||||
<div class="info">
|
||||
<div class="name">{{cat.category}}</div>
|
||||
<div class="desc">
|
||||
Assigned to {{cat.documents}} {{if (eq cat.documents 1) "document" "documents" }}
|
||||
and viewable by {{cat.users}} users/groups
|
||||
</div>
|
||||
{{#unless cat.access}}
|
||||
<p class="color-red-600 bold-500">You have no view permission for this category</p>
|
||||
{{/unless}}
|
||||
</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 class="actions">
|
||||
{{#ui/ui-toolbar dark=false light=true raised=true large=false bordered=true}}
|
||||
{{ui/ui-toolbar-icon icon=constants.Icon.Locked color=constants.Color.Gray
|
||||
tooltip="Set view permissions" onClick=(action "onShowAccessPicker" cat.id)}}
|
||||
{{ui/ui-toolbar-icon icon=constants.Icon.Edit color=constants.Color.Gray
|
||||
tooltip="Edit category" onClick=(action "onShowEdit" cat.id)}}
|
||||
{{ui/ui-toolbar-icon icon=constants.Icon.Delete color=constants.Color.Red
|
||||
tooltip="Delete category" onClick=(action "onShowDelete" cat.id)}}
|
||||
{{/ui/ui-toolbar}}
|
||||
</div>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="category-edit-modal" class="modal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">Edit Category</div>
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
{{focus-input id="edit-category-name" type="text" class="form-control mousetrap" placeholder="Category name" value=editName}}
|
||||
</div>
|
||||
</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.Save onClick=(action "onSave")}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{#ui/ui-dialog title="Set Category Access" confirmCaption="Save" buttonColor=constants.Color.Green show=showCategoryAccess onAction=(action "onGrantAccess")}}
|
||||
<p>Select who can view documents within category</p>
|
||||
<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">Delete Category</div>
|
||||
<div class="modal-body">
|
||||
<p>Are you sure you want to delete this category?</p>
|
||||
</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.Red light=true label=constants.Label.Delete onClick=(action "onDelete")}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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")}}
|
||||
{{#ui/ui-dialog title="Set Category Access" confirmCaption="Save" buttonColor=constants.Color.Green 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">people</i>
|
||||
<i class="material-icons">language</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}}
|
||||
<span class="button-icon-gray button-icon-small align-middle">
|
||||
<i class="material-icons">person</i>
|
||||
</span>
|
||||
{{/if}}
|
||||
{{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>
|
||||
{{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}}
|
||||
|
|
@ -16,4 +16,4 @@
|
|||
icon=constants.Icon.Delete
|
||||
label=constants.Label.Delete
|
||||
light=true
|
||||
onClick=(action 'onDelete')}}
|
||||
onClick=(action "onDelete")}}
|
||||
|
|
|
|||
|
|
@ -33,4 +33,4 @@
|
|||
icon=constants.Icon.Settings
|
||||
label=constants.Label.Save
|
||||
light=true
|
||||
onClick=(action 'onSave')}}
|
||||
onClick=(action "onSave")}}
|
||||
|
|
|
|||
|
|
@ -151,19 +151,31 @@
|
|||
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-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">Add User To Space</div>
|
||||
<div class="modal-header">Add users to this 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>
|
||||
{{ui/ui-spacer size=200}}
|
||||
<div class="space-admin">
|
||||
<div class="add-users">
|
||||
{{#each filteredUsers as |user|}}
|
||||
<div class="item">
|
||||
{{#ui/ui-toolbar dark=false light=true raised=true large=false bordered=true}}
|
||||
{{ui/ui-toolbar-icon
|
||||
icon=constants.Icon.AddUser
|
||||
color=constants.Color.Green
|
||||
tooltip="Remove member"
|
||||
onClick=(action "onAdd" user)}}
|
||||
{{ui/ui-toolbar-label
|
||||
color=constants.Color.Gray
|
||||
label=user.fullname
|
||||
onClick=(action "onAdd" user)}}
|
||||
{{/ui/ui-toolbar}}
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
{{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Close dismiss=true}}
|
||||
|
|
@ -173,9 +185,9 @@
|
|||
</div>
|
||||
|
||||
<div id="space-invite-user-modal" class="modal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">Invite Users to Space</div>
|
||||
<div class="modal-header">Invite users to this space</div>
|
||||
<div class="modal-body">
|
||||
<p>Email invite leads to a smooth onboarding process</p>
|
||||
<form onsubmit={{action "onSpaceInvite"}}>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue