mirror of
https://github.com/documize/community.git
synced 2025-07-19 21:29:42 +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'),
|
categorySvc: service('category'),
|
||||||
appMeta: service(),
|
appMeta: service(),
|
||||||
store: service(),
|
store: service(),
|
||||||
|
editId: '',
|
||||||
|
editName: '',
|
||||||
deleteId: '',
|
deleteId: '',
|
||||||
newCategory: '',
|
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) {
|
onShowDelete(id) {
|
||||||
let cat = this.get('category').findBy('id', id);
|
let cat = this.get('category').findBy('id', id);
|
||||||
this.set('deleteId', cat.get('id'));
|
this.set('deleteId', cat.get('id'));
|
||||||
|
|
@ -137,24 +147,18 @@ export default Component.extend(ModalMixin, Notifer, {
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
onEdit(id) {
|
onSave() {
|
||||||
this.setEdit(id, true);
|
let name = this.get('editName');
|
||||||
},
|
if (name === '') {
|
||||||
|
$('#edit-category-name').addClass('is-invalid').focus();
|
||||||
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();
|
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
cat = this.setEdit(id, false);
|
let cat = this.get('category').findBy('id', this.get('editId'));
|
||||||
$('#edit-category-' + cat.get('id')).removeClass('is-invalid');
|
cat.set('category', name);
|
||||||
|
|
||||||
|
this.modalClose('#category-edit-modal');
|
||||||
|
$('#edit-category-name').removeClass('is-invalid');
|
||||||
|
|
||||||
this.get('categorySvc').save(cat).then(() => {
|
this.get('categorySvc').save(cat).then(() => {
|
||||||
this.load();
|
this.load();
|
||||||
|
|
|
||||||
|
|
@ -195,37 +195,48 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.add-users {
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
> .item {
|
||||||
|
margin: 7px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
> .categories {
|
> .categories {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
||||||
> .item {
|
> .category {
|
||||||
margin: 15px 0;
|
|
||||||
padding: 15px;
|
|
||||||
@include card();
|
@include card();
|
||||||
@include ease-in();
|
list-style-type: none;
|
||||||
|
margin: 0 0 2rem 0;
|
||||||
|
padding: 15px 20px;
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
> .category {
|
> .info {
|
||||||
display: inline-block;
|
padding: 0;
|
||||||
|
align-self: self-start;
|
||||||
|
justify-self: self-start;
|
||||||
|
|
||||||
> .name {
|
> .name {
|
||||||
font-size: 1.2rem;
|
font-size: 1.3rem;
|
||||||
color: $theme-500;
|
font-weight: 700;
|
||||||
|
color: map-get($gray-shades, 800);
|
||||||
}
|
}
|
||||||
|
|
||||||
> .info {
|
> .desc {
|
||||||
font-size: 0.9rem;
|
font-size: 1.1rem;
|
||||||
margin-top: 8px;
|
font-weight: 400;
|
||||||
color: map-get($gray-shades, 600);
|
margin-top: 0.4rem;
|
||||||
|
color: $color-black-light-3;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
> .buttons {
|
> .actions {
|
||||||
margin-top: 5px;
|
margin-top: 20px;
|
||||||
}
|
|
||||||
|
|
||||||
> .action {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -8,9 +8,9 @@
|
||||||
{{/link-to}}
|
{{/link-to}}
|
||||||
<div class="meta">
|
<div class="meta">
|
||||||
<div class="lifecycle">
|
<div class="lifecycle">
|
||||||
<div class="{{if (eq document.lifecycle constants.Lifecycle.Draft) 'draft'}}
|
<div class="{{if (eq document.lifecycle constants.Lifecycle.Draft) "draft"}}
|
||||||
{{if (eq document.lifecycle constants.Lifecycle.Live) 'live'}}
|
{{if (eq document.lifecycle constants.Lifecycle.Live) "live"}}
|
||||||
{{if (eq document.lifecycle constants.Lifecycle.Archived) 'archived'}}">
|
{{if (eq document.lifecycle constants.Lifecycle.Archived) "archived"}}">
|
||||||
{{document.lifecycleLabel}}
|
{{document.lifecycleLabel}}
|
||||||
</div>
|
</div>
|
||||||
</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>
|
<div class="space-admin">
|
||||||
<form class="form-inline" onsubmit={{action "onAdd"}}>
|
<div class="categories">
|
||||||
<div class="form-group mr-3">
|
<form class="form" onsubmit={{action "onAdd"}}>
|
||||||
{{focus-input id="new-category-name" type="text" class="form-control mousetrap" placeholder="Category name" value=newCategory}}
|
<div class="form-group">
|
||||||
</div>
|
{{focus-input id="new-category-name" type="text" class="form-control mousetrap" placeholder="Category name" value=newCategory}}
|
||||||
<button type="button" class="btn btn-success bold-700" onclick={{action "onAdd"}}>Add</button>
|
</div>
|
||||||
</form>
|
{{ui/ui-button color=constants.Color.Green light=true
|
||||||
|
label=constants.Label.Add icon=constants.Icon.Category
|
||||||
<div class="space-admin">
|
onClick=(action "onAdd")}}
|
||||||
<div class="categories">
|
</form>
|
||||||
{{#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>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="category-delete-modal" class="modal" tabindex="-1" role="dialog">
|
{{ui/ui-spacer size=400}}
|
||||||
<div class="modal-dialog" role="document">
|
|
||||||
<div class="modal-content">
|
<div class="space-admin">
|
||||||
<div class="modal-header">Category Deletion</div>
|
<div class="categories">
|
||||||
<div class="modal-body">
|
{{#each category as |cat|}}
|
||||||
<p>Are you sure you want to delete this category?</p>
|
<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>
|
||||||
<div class="modal-footer">
|
<div class="actions">
|
||||||
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
|
{{#ui/ui-toolbar dark=false light=true raised=true large=false bordered=true}}
|
||||||
<button type="button" class="btn btn-danger" onclick={{action "onDelete"}}>Delete</button>
|
{{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>
|
||||||
</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>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{{#ui/ui-dialog title="Set Category Access" confirmCaption="Save" buttonColor=constants.Color.Green show=showCategoryAccess onAction=(action "onGrantAccess")}}
|
<div id="category-delete-modal" class="modal" tabindex="-1" role="dialog">
|
||||||
<p>Select who can view documents within category</p>
|
<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">
|
{{#ui/ui-dialog title="Set Category Access" confirmCaption="Save" buttonColor=constants.Color.Green show=showCategoryAccess onAction=(action "onGrantAccess")}}
|
||||||
<ul class="options">
|
<p>Select who can view documents within category</p>
|
||||||
{{#each categoryPermissions as |permission|}}
|
<div class="widget-list-picker">
|
||||||
<li class="option {{if permission.selected "selected"}}" {{action "onToggle" permission}}>
|
<ul class="options">
|
||||||
<div class="text text-truncate">
|
{{#each categoryPermissions as |permission|}}
|
||||||
{{#if (eq permission.who "role")}}
|
<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">
|
<span class="button-icon-gray button-icon-small align-middle">
|
||||||
<i class="material-icons">people</i>
|
<i class="material-icons">language</i>
|
||||||
</span>
|
</span>
|
||||||
{{else}}
|
{{else}}
|
||||||
{{#if (eq permission.whoId constants.EveryoneUserId)}}
|
<span class="button-icon-gray button-icon-small align-middle">
|
||||||
<span class="button-icon-gray button-icon-small align-middle">
|
<i class="material-icons">person</i>
|
||||||
<i class="material-icons">language</i>
|
</span>
|
||||||
</span>
|
|
||||||
{{else}}
|
|
||||||
<span class="button-icon-gray button-icon-small align-middle">
|
|
||||||
<i class="material-icons">person</i>
|
|
||||||
</span>
|
|
||||||
{{/if}}
|
|
||||||
{{/if}}
|
{{/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}}
|
{{/if}}
|
||||||
</li>
|
{{permission.name}}
|
||||||
{{/each}}
|
{{#if (eq permission.whoId session.user.id)}}
|
||||||
</ul>
|
<small class="form-text text-muted d-inline-block">(you)</small>
|
||||||
</div>
|
{{/if}}
|
||||||
{{/ui/ui-dialog}}
|
</div>
|
||||||
|
{{#if permission.selected}}
|
||||||
</div>
|
<i class="material-icons">check</i>
|
||||||
|
{{/if}}
|
||||||
|
</li>
|
||||||
|
{{/each}}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
{{/ui/ui-dialog}}
|
||||||
|
|
@ -16,4 +16,4 @@
|
||||||
icon=constants.Icon.Delete
|
icon=constants.Icon.Delete
|
||||||
label=constants.Label.Delete
|
label=constants.Label.Delete
|
||||||
light=true
|
light=true
|
||||||
onClick=(action 'onDelete')}}
|
onClick=(action "onDelete")}}
|
||||||
|
|
|
||||||
|
|
@ -33,4 +33,4 @@
|
||||||
icon=constants.Icon.Settings
|
icon=constants.Icon.Settings
|
||||||
label=constants.Label.Save
|
label=constants.Label.Save
|
||||||
light=true
|
light=true
|
||||||
onClick=(action 'onSave')}}
|
onClick=(action "onSave")}}
|
||||||
|
|
|
||||||
|
|
@ -151,19 +151,31 @@
|
||||||
label=constants.Label.Save onClick=(action "onSave")}}
|
label=constants.Label.Save onClick=(action "onSave")}}
|
||||||
|
|
||||||
<div id="space-add-user-modal" class="modal" tabindex="-1" role="dialog">
|
<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-content">
|
||||||
<div class="modal-header">Add User To Space</div>
|
<div class="modal-header">Add users to this space</div>
|
||||||
<div class="modal-body">
|
<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")}}
|
{{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|}}
|
{{ui/ui-spacer size=200}}
|
||||||
<div class="row my-3">
|
<div class="space-admin">
|
||||||
<div class="col-10">{{user.fullname}}</div>
|
<div class="add-users">
|
||||||
<div class="col-2 text-right">
|
{{#each filteredUsers as |user|}}
|
||||||
<button class="btn btn-success" {{action "onAdd" user}}>Add</button>
|
<div class="item">
|
||||||
</div>
|
{{#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>
|
</div>
|
||||||
{{/each}}
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
{{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Close dismiss=true}}
|
{{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Close dismiss=true}}
|
||||||
|
|
@ -173,9 +185,9 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="space-invite-user-modal" class="modal" tabindex="-1" role="dialog">
|
<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-content">
|
||||||
<div class="modal-header">Invite Users to Space</div>
|
<div class="modal-header">Invite users to this space</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<p>Email invite leads to a smooth onboarding process</p>
|
<p>Email invite leads to a smooth onboarding process</p>
|
||||||
<form onsubmit={{action "onSpaceInvite"}}>
|
<form onsubmit={{action "onSpaceInvite"}}>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue