mirror of
https://github.com/documize/community.git
synced 2025-07-19 13:19: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
|
|
@ -22,6 +22,8 @@ export default Component.extend(ModalMixin, Notifer, {
|
|||
categorySvc: service('category'),
|
||||
appMeta: service(),
|
||||
store: service(),
|
||||
editId: '',
|
||||
editName: '',
|
||||
deleteId: '',
|
||||
newCategory: '',
|
||||
|
||||
|
|
@ -122,6 +124,14 @@ export default Component.extend(ModalMixin, Notifer, {
|
|||
});
|
||||
},
|
||||
|
||||
onShowEdit(id) {
|
||||
let cat = this.get('category').findBy('id', id);
|
||||
this.set('editId', cat.get('id'));
|
||||
this.set('editName', cat.get('category'));
|
||||
|
||||
this.modalOpen('#category-edit-modal', {show: true}, "#edit-category-id");
|
||||
},
|
||||
|
||||
onShowDelete(id) {
|
||||
let cat = this.get('category').findBy('id', id);
|
||||
this.set('deleteId', cat.get('id'));
|
||||
|
|
@ -137,24 +147,18 @@ export default Component.extend(ModalMixin, Notifer, {
|
|||
});
|
||||
},
|
||||
|
||||
onEdit(id) {
|
||||
this.setEdit(id, true);
|
||||
},
|
||||
|
||||
onEditCancel(id) {
|
||||
this.setEdit(id, false);
|
||||
this.load();
|
||||
},
|
||||
|
||||
onSave(id) {
|
||||
let cat = this.setEdit(id, true);
|
||||
if (cat.get('category') === '') {
|
||||
$('#edit-category-' + cat.get('id')).addClass('is-invalid').focus();
|
||||
onSave() {
|
||||
let name = this.get('editName');
|
||||
if (name === '') {
|
||||
$('#edit-category-name').addClass('is-invalid').focus();
|
||||
return false;
|
||||
}
|
||||
|
||||
cat = this.setEdit(id, false);
|
||||
$('#edit-category-' + cat.get('id')).removeClass('is-invalid');
|
||||
let cat = this.get('category').findBy('id', this.get('editId'));
|
||||
cat.set('category', name);
|
||||
|
||||
this.modalClose('#category-edit-modal');
|
||||
$('#edit-category-name').removeClass('is-invalid');
|
||||
|
||||
this.get('categorySvc').save(cat).then(() => {
|
||||
this.load();
|
||||
|
|
|
|||
|
|
@ -195,37 +195,48 @@
|
|||
}
|
||||
}
|
||||
|
||||
.add-users {
|
||||
text-align: center;
|
||||
|
||||
> .item {
|
||||
margin: 7px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
> .categories {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
> .item {
|
||||
margin: 15px 0;
|
||||
padding: 15px;
|
||||
> .category {
|
||||
@include card();
|
||||
@include ease-in();
|
||||
list-style-type: none;
|
||||
margin: 0 0 2rem 0;
|
||||
padding: 15px 20px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
> .category {
|
||||
display: inline-block;
|
||||
> .info {
|
||||
padding: 0;
|
||||
align-self: self-start;
|
||||
justify-self: self-start;
|
||||
|
||||
> .name {
|
||||
font-size: 1.2rem;
|
||||
color: $theme-500;
|
||||
font-size: 1.3rem;
|
||||
font-weight: 700;
|
||||
color: map-get($gray-shades, 800);
|
||||
}
|
||||
|
||||
> .info {
|
||||
font-size: 0.9rem;
|
||||
margin-top: 8px;
|
||||
color: map-get($gray-shades, 600);
|
||||
> .desc {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 400;
|
||||
margin-top: 0.4rem;
|
||||
color: $color-black-light-3;
|
||||
}
|
||||
}
|
||||
|
||||
> .buttons {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
> .action {
|
||||
display: inline-block;
|
||||
> .actions {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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