mirror of
https://github.com/documize/community.git
synced 2025-07-23 07:09:43 +02:00
delete space, pin space migrated to new UX
This commit is contained in:
Harvey Kandola
parent
acc947c2ed
commit
9cbee80f51
11 changed files with 212 additions and 138 deletions
|
|
@ -10,7 +10,6 @@
|
|||
// https://documize.com
|
||||
|
||||
import { computed } from '@ember/object';
|
||||
|
||||
import Component from '@ember/component';
|
||||
import { inject as service } from '@ember/service';
|
||||
import NotifierMixin from '../../mixins/notifier';
|
||||
|
|
@ -59,34 +58,6 @@ export default Component.extend(NotifierMixin, TooltipMixin, AuthMixin, {
|
|||
|
||||
renderTooltips() {
|
||||
this.destroyTooltips();
|
||||
|
||||
if (this.get('hasSelectedDocuments')) {
|
||||
if (this.get('permissions.documentMove')) {
|
||||
this.addTooltip(document.getElementById("move-documents-button"));
|
||||
}
|
||||
|
||||
if (this.get('permissions.documentDelete')) {
|
||||
this.addTooltip(document.getElementById("delete-documents-button"));
|
||||
}
|
||||
} else {
|
||||
if (this.get('permissions.spaceOwner')) {
|
||||
this.addTooltip(document.getElementById("space-delete-button"));
|
||||
}
|
||||
|
||||
if (this.get('permissions.spaceManage')) {
|
||||
this.addTooltip(document.getElementById("space-settings-button"));
|
||||
}
|
||||
|
||||
if (this.get('pinState.isPinned')) {
|
||||
this.addTooltip(document.getElementById("space-unpin-button"));
|
||||
} else {
|
||||
this.addTooltip(document.getElementById("space-pin-button"));
|
||||
}
|
||||
|
||||
if (this.get('permissions.documentAdd')) {
|
||||
this.addTooltip(document.getElementById("document-add-button"));
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
willDestroyElement() {
|
||||
|
|
@ -138,23 +109,6 @@ export default Component.extend(NotifierMixin, TooltipMixin, AuthMixin, {
|
|||
this.attrs.onDeleteDocument();
|
||||
},
|
||||
|
||||
deleteSpace() {
|
||||
let spaceName = this.get('folder').get('name');
|
||||
let spaceNameTyped = this.get('deleteSpaceName');
|
||||
|
||||
if (spaceNameTyped !== spaceName || spaceNameTyped === '' || spaceName === '') {
|
||||
$("#delete-space-name").addClass("error").focus();
|
||||
return false;
|
||||
}
|
||||
|
||||
this.set('deleteSpaceName', '');
|
||||
$("#delete-space-name").removeClass("error");
|
||||
|
||||
this.attrs.onDeleteSpace();
|
||||
|
||||
return true;
|
||||
},
|
||||
|
||||
setMoveFolder(folderId) {
|
||||
this.set('moveFolderId', folderId);
|
||||
|
||||
|
|
|
|||
|
|
@ -121,14 +121,6 @@ export default Component.extend(NotifierMixin, TooltipMixin, AuthMixin, {
|
|||
});
|
||||
},
|
||||
|
||||
onDeleteSpace() {
|
||||
this.get('folderService').delete(this.get('folder.id')).then(() => { /* jshint ignore:line */
|
||||
this.showNotification("Deleted");
|
||||
this.get('localStorage').clearSessionItem('folder');
|
||||
this.get('router').transitionTo('application');
|
||||
});
|
||||
},
|
||||
|
||||
onImport() {
|
||||
this.attrs.onRefresh();
|
||||
},
|
||||
|
|
|
|||
|
|
@ -11,17 +11,45 @@
|
|||
|
||||
import Component from '@ember/component';
|
||||
import { schedule } from '@ember/runloop';
|
||||
import { notEmpty } from '@ember/object/computed';
|
||||
import { computed } from '@ember/object';
|
||||
import { inject as service } from '@ember/service';
|
||||
import NotifierMixin from '../../mixins/notifier';
|
||||
import AuthMixin from '../../mixins/auth';
|
||||
|
||||
export default Component.extend(NotifierMixin, AuthMixin, {
|
||||
session: service(),
|
||||
appMeta: service(),
|
||||
pinned: service(),
|
||||
spaceName: '',
|
||||
copyTemplate: true,
|
||||
copyPermission: true,
|
||||
copyDocument: false,
|
||||
clonedSpace: { id: '' },
|
||||
hasClone: notEmpty('clonedSpace.id'),
|
||||
pinState : {
|
||||
isPinned: false,
|
||||
pinId: '',
|
||||
newName: ''
|
||||
},
|
||||
spaceSettings: computed('permissions', function() {
|
||||
return this.get('permissions.spaceOwner') || this.get('permissions.spaceManage');
|
||||
}),
|
||||
deleteSpaceName: '',
|
||||
|
||||
didReceiveAttrs() {
|
||||
this._super(...arguments);
|
||||
|
||||
let folder = this.get('space');
|
||||
let targets = _.reject(this.get('spaces'), {id: folder.get('id')});
|
||||
|
||||
this.get('pinned').isSpacePinned(folder.get('id')).then((pinId) => {
|
||||
this.set('pinState.pinId', pinId);
|
||||
this.set('pinState.isPinned', pinId !== '');
|
||||
this.set('pinState.newName', folder.get('name'));
|
||||
this.renderTooltips();
|
||||
});
|
||||
|
||||
this.set('movedFolderOptions', targets);
|
||||
},
|
||||
|
||||
didInsertElement() {
|
||||
this._super(...arguments);
|
||||
|
|
@ -33,9 +61,65 @@ export default Component.extend(NotifierMixin, AuthMixin, {
|
|||
});
|
||||
},
|
||||
|
||||
renderTooltips() {
|
||||
schedule('afterRender', () => {
|
||||
$('#pin-space-button').tooltip('dispose');
|
||||
$('body').tooltip({selector: '#pin-space-button'});
|
||||
});
|
||||
},
|
||||
|
||||
actions: {
|
||||
onCloneSpaceSelect(sp) {
|
||||
this.set('clonedSpace', sp)
|
||||
onUnpin() {
|
||||
this.get('pinned').unpinItem(this.get('pinState.pinId')).then(() => {
|
||||
$('#pin-space-button').tooltip('dispose');
|
||||
this.set('pinState.isPinned', false);
|
||||
this.set('pinState.pinId', '');
|
||||
this.eventBus.publish('pinChange');
|
||||
this.renderTooltips();
|
||||
});
|
||||
},
|
||||
|
||||
onPin() {
|
||||
let pin = {
|
||||
pin: this.get('pinState.newName'),
|
||||
documentId: '',
|
||||
folderId: this.get('space.id')
|
||||
};
|
||||
|
||||
if (is.empty(pin.pin)) {
|
||||
$('#pin-space-name').addClass('error').focus();
|
||||
return false;
|
||||
}
|
||||
|
||||
this.get('pinned').pinItem(pin).then((pin) => {
|
||||
$('#pin-space-button').tooltip('dispose');
|
||||
this.set('pinState.isPinned', true);
|
||||
this.set('pinState.pinId', pin.get('id'));
|
||||
this.eventBus.publish('pinChange');
|
||||
this.renderTooltips();
|
||||
});
|
||||
|
||||
return true;
|
||||
},
|
||||
|
||||
onDeleteSpace(e) {
|
||||
e.preventDefault();
|
||||
|
||||
let spaceName = this.get('space').get('name');
|
||||
let spaceNameTyped = this.get('deleteSpaceName');
|
||||
|
||||
if (spaceNameTyped !== spaceName || spaceNameTyped === '' || spaceName === '') {
|
||||
$("#delete-space-name").addClass("is-invalid").focus();
|
||||
return;
|
||||
}
|
||||
|
||||
this.set('deleteSpaceName', '');
|
||||
$("#delete-space-name").removeClass("is-invalid");
|
||||
|
||||
this.attrs.onDeleteSpace(this.get('space.id'));
|
||||
|
||||
$('#delete-space-modal').modal('hide');
|
||||
$('#delete-space-modal').modal('dispose');
|
||||
},
|
||||
|
||||
onAddSpace(e) {
|
||||
|
|
|
|||
|
|
@ -18,8 +18,6 @@ export default Controller.extend(NotifierMixin, {
|
|||
documentService: service('document'),
|
||||
folderService: service('folder'),
|
||||
localStorage: service('localStorage'),
|
||||
queryParams: ['tab'],
|
||||
tab: 'index',
|
||||
|
||||
actions: {
|
||||
onAddSpace(payload) {
|
||||
|
|
@ -32,6 +30,14 @@ export default Controller.extend(NotifierMixin, {
|
|||
});
|
||||
},
|
||||
|
||||
onDeleteSpace(id) {
|
||||
this.get('folderService').delete(id).then(() => { /* jshint ignore:line */
|
||||
this.showNotification("Deleted");
|
||||
this.get('localStorage').clearSessionItem('folder');
|
||||
this.transitionToRoute('folders');
|
||||
});
|
||||
},
|
||||
|
||||
onRefresh() {
|
||||
this.get('target._routerMicrolib').refresh();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{{layout/nav-bar}}
|
||||
|
||||
<div class="container">
|
||||
{{toolbar/for-space spaces=model.folders space=model.folder permissions=model.permissions}}
|
||||
{{toolbar/for-space spaces=model.folders space=model.folder permissions=model.permissions onDeleteSpace=(action 'onDeleteSpace')}}
|
||||
|
||||
{{folder/space-view
|
||||
folders=model.folders
|
||||
|
|
|
|||
|
|
@ -23,13 +23,14 @@ $color-off-white: #f5f5f5;
|
|||
|
||||
$color-dark: #434343;
|
||||
$color-gray: #8b9096;
|
||||
$color-gray-light: #d8d8d8;
|
||||
$color-border: #d3d3d3;
|
||||
|
||||
// colors
|
||||
$color-red: #b1251b;
|
||||
$color-green: #1b701e;
|
||||
$color-blue: #2667af;
|
||||
$color-goldy: #cc9933;
|
||||
$color-goldy: #FFD700;
|
||||
|
||||
// widgets
|
||||
$color-checkbox: #2667af;
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
margin-right: 30px;
|
||||
cursor: pointer;
|
||||
@include ease-in();
|
||||
border-bottom: 2px solid $color-gray-light;
|
||||
|
||||
&:hover {
|
||||
color: $color-link;
|
||||
|
|
|
|||
|
|
@ -344,6 +344,60 @@
|
|||
}
|
||||
}
|
||||
|
||||
.button-icon-gray {
|
||||
display: inline-block;
|
||||
cursor: default;
|
||||
@include ease-in();
|
||||
|
||||
> i {
|
||||
color: $color-gray-light;
|
||||
font-size: 2rem;
|
||||
@include ease-in();
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> i {
|
||||
color: darken($color-gray-light, 15%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-icon-gold {
|
||||
display: inline-block;
|
||||
cursor: default;
|
||||
@include ease-in();
|
||||
|
||||
> i {
|
||||
color: $color-goldy;
|
||||
font-size: 2rem;
|
||||
@include ease-in();
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> i {
|
||||
color: darken($color-goldy, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-icon-danger {
|
||||
display: inline-block;
|
||||
cursor: default;
|
||||
@include ease-in();
|
||||
|
||||
> i {
|
||||
color: $color-gray-light;
|
||||
font-size: 2rem;
|
||||
@include ease-in();
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> i {
|
||||
color: $color-red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-icon-gap {
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
|
|
|
|||
|
|
@ -48,16 +48,6 @@
|
|||
<div class="button-gap"></div>
|
||||
{{/if}}
|
||||
|
||||
{{#if pinState.isPinned}}
|
||||
<div class="round-button button-gray" id="space-unpin-button" data-tooltip="Remove favorite" data-tooltip-position="top center" {{action 'onUnpin'}}>
|
||||
<i class="material-icons">favorite</i>
|
||||
</div>
|
||||
{{else if session.authenticated}}
|
||||
<div class="round-button button-gray" id="space-pin-button" data-tooltip="Mark favorite" data-tooltip-position="top center">
|
||||
<i class="material-icons">favorite_border</i>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if spaceSettings}}
|
||||
<div class="button-gap"></div>
|
||||
{{#link-to 'folder.settings' folder.id folder.slug}}{{model.document.name}}
|
||||
|
|
@ -67,35 +57,6 @@
|
|||
{{/link-to}}
|
||||
{{/if}}
|
||||
|
||||
{{#if permissions.spaceOwner}}
|
||||
<div class="button-gap"></div>
|
||||
<div class="round-button button-gray" id="space-delete-button" data-tooltip="Delete everything" data-tooltip-position="top center">
|
||||
<i class="material-icons">delete</i>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if session.authenticated}}
|
||||
{{#unless pinState.isPinned}}
|
||||
{{#dropdown-dialog target="space-pin-button" position="bottom right" button="Pin" color="flat-green" onAction=(action 'onPin') focusOn="pin-space-name"}}
|
||||
<div class="input-control">
|
||||
<label>Favorite Space</label>
|
||||
<div class="tip">Provide short name</div>
|
||||
{{input type='text' id="pin-space-name" value=pinState.newName}}
|
||||
</div>
|
||||
{{/dropdown-dialog}}
|
||||
{{/unless}}
|
||||
{{/if}}
|
||||
|
||||
{{#if permissions.spaceOwner}}
|
||||
{{#dropdown-dialog target="space-delete-button" position="bottom right" button="Delete" color="flat-red" onAction=(action 'deleteSpace')}}
|
||||
<p>Are you sure you want to delete this space and all associated documents?</p>
|
||||
<div class="input-control">
|
||||
<div class="tip">Please type the space name to confirm</div>
|
||||
{{input type='text' id="delete-space-name" value=deleteSpaceName}}
|
||||
</div>
|
||||
{{/dropdown-dialog}}
|
||||
{{/if}}
|
||||
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -37,5 +37,5 @@
|
|||
{{folder/space-toolbar folders=folders folder=folder
|
||||
permissions=permissions hasSelectedDocuments=hasSelectedDocuments
|
||||
onDeleteDocument=(action 'onDeleteDocument') onMoveDocument=(action 'onMoveDocument')
|
||||
onDeleteSpace=(action 'onDeleteSpace') onStartDocument=(action 'onStartDocument')}}
|
||||
onStartDocument=(action 'onStartDocument')}}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,56 +3,77 @@
|
|||
{{#link-to "folders" class="link" tagName="li"}}SPACES{{/link-to}}
|
||||
{{/toolbar/t-links}}
|
||||
{{#toolbar/t-actions}}
|
||||
{{#if session.isEditor}}
|
||||
<button type="button" class="btn btn-success font-weight-bold" data-toggle="modal" data-target="#add-space-modal" data-backdrop="static">+ DOCUMENT</button>
|
||||
<div class="modal" tabindex="-1" role="dialog" id="add-space-modal">
|
||||
{{#if pinState.isPinned}}
|
||||
<div id="pin-space-button" class="button-icon-gold align-middle" data-placement="top" title="Favorite" {{action 'onUnpin'}}>
|
||||
<i class="material-icons">star</i>
|
||||
</div>
|
||||
<div class="button-icon-gap" />
|
||||
{{else if session.authenticated}}
|
||||
<div id="pin-space-button" class="button-icon-gray align-middle" data-placement="top" title="Favorite" {{action 'onPin'}}>
|
||||
<i class="material-icons">star</i>
|
||||
</div>
|
||||
<div class="button-icon-gap" />
|
||||
{{/if}}
|
||||
|
||||
{{#if spaceSettings}}
|
||||
{{#link-to 'folder.settings' space.id space.slug}}
|
||||
<div id="space-settings-button" class="button-icon-gray align-middle" data-placement="top" title="Permissions">
|
||||
<i class="material-icons">settings</i>
|
||||
</div>
|
||||
<div class="button-icon-gap" />
|
||||
{{/link-to}}
|
||||
{{/if}}
|
||||
|
||||
{{#if permissions.spaceOwner}}
|
||||
<div id="space-delete-button" class="button-icon-danger align-middle" data-placement="top" title="Delete" data-toggle="modal" data-target="#delete-space-modal" data-backdrop="static">
|
||||
<i class="material-icons">delete</i>
|
||||
</div>
|
||||
<div class="button-icon-gap" />
|
||||
<div class="modal" tabindex="-1" role="dialog" id="delete-space-modal">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">Add Space</div>
|
||||
<div class="modal-header">Confirm Delete</div>
|
||||
<div class="modal-body">
|
||||
<form onsubmit={{action 'onAddSpace'}}>
|
||||
<form onsubmit={{action 'onDeleteSpace'}}>
|
||||
<p>Are you sure you want to delete this space and all documents?</p>
|
||||
<div class="form-group">
|
||||
<label for="new-space-name">Space Name</label>
|
||||
{{input type='text' id="new-space-name" class="form-control mousetrap" placeholder="Space name" value=spaceName}}
|
||||
<small id="emailHelp" class="form-text text-muted">Characters and numbers only</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="clone-space-dropdown">Clone Space</label>
|
||||
{{ui-select id="clone-space-dropdown" content=spaces prompt="select space" action=(action 'onCloneSpaceSelect') optionValuePath="id" optionLabelPath="name" selection=cloneSpace}}
|
||||
<small id="emailHelp" class="form-text text-muted">Copy templates, permissions, documents from existing space</small>
|
||||
<div class="margin-top-10" />
|
||||
{{#if hasClone}}
|
||||
{{#ui/ui-checkbox selected=copyTemplate}}Copy templates{{/ui/ui-checkbox}}
|
||||
{{#ui/ui-checkbox selected=copyPermission}}Copy permissions{{/ui/ui-checkbox}}
|
||||
{{#ui/ui-checkbox selected=copyDocument}}Copy documents{{/ui/ui-checkbox}}
|
||||
{{/if}}
|
||||
<label for="new-space-name">Please type space name to confirm</label>
|
||||
{{input type='text' id="delete-space-name" class="form-control mousetrap" placeholder="Space name" value=deleteSpaceName}}
|
||||
<small class="form-text text-muted">This will delete all documents and templates within this space!</small>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-light" data-dismiss="modal">Cancel</button>
|
||||
<button type="button" class="btn btn-success font-weight-bold" onclick={{action 'onAddSpace'}}>Add</button>
|
||||
<button type="button" class="btn btn-danger font-weight-bold" onclick={{action 'onDeleteSpace'}}>Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/toolbar/t-actions}}
|
||||
{{/toolbar/t-toolbar}}
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="col col-sm-8">
|
||||
<div class="toolbar">
|
||||
<ul class="links">
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col col-sm-4">
|
||||
<div class="toolbar">
|
||||
<div class="buttons">
|
||||
|
||||
<div class="button-icon-gap" />
|
||||
<button type="button" class="btn btn-success font-weight-bold" data-toggle="modal" data-target="#add-space-modal" data-backdrop="static">+ DOCUMENT</button>
|
||||
<div class="modal" tabindex="-1" role="dialog" id="add-space-modal">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">Add Space</div>
|
||||
<div class="modal-body">
|
||||
<form onsubmit={{action 'onAddSpace'}}>
|
||||
<div class="form-group">
|
||||
<label for="new-space-name">Space Name</label>
|
||||
{{input type='text' id="new-space-name" class="form-control mousetrap" placeholder="Space name" value=spaceName}}
|
||||
<small id="emailHelp" class="form-text text-muted">Characters and numbers only</small>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-light" data-dismiss="modal">Cancel</button>
|
||||
<button type="button" class="btn btn-success font-weight-bold" onclick={{action 'onAddSpace'}}>Add</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{/toolbar/t-actions}}
|
||||
{{/toolbar/t-toolbar}}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue