From bae1245d47a316e2489a8dc5c68d5e95c82572d6 Mon Sep 17 00:00:00 2001 From: Harvey Kandola Date: Wed, 22 Nov 2017 13:39:46 +0000 Subject: [PATCH] delete docs moved to new UX --- .../document/document-attachments.js | 1 - gui/app/components/folder/documents-list.js | 27 +++++++- gui/app/components/folder/space-heading.js | 13 ++-- gui/app/components/folder/space-toolbar.js | 41 ------------ gui/app/components/folder/space-view.js | 6 +- gui/app/components/ui/ui-confirm-dialog.js | 62 +++++++++++++++++++ gui/app/styles/view/space.scss | 12 ++++ gui/app/styles/widget/widget-button.scss | 42 +++++++++++++ .../components/folder/documents-list.hbs | 24 ++++++- .../components/folder/space-heading.hbs | 4 +- .../components/folder/space-toolbar.hbs | 25 +------- .../components/folder/space-view.hbs | 15 ++--- .../components/ui/ui-confirm-dialog.hbs | 16 +++++ 13 files changed, 199 insertions(+), 89 deletions(-) create mode 100644 gui/app/components/ui/ui-confirm-dialog.js create mode 100644 gui/app/templates/components/ui/ui-confirm-dialog.hbs diff --git a/gui/app/components/document/document-attachments.js b/gui/app/components/document/document-attachments.js index a0e29277..be4e464f 100644 --- a/gui/app/components/document/document-attachments.js +++ b/gui/app/components/document/document-attachments.js @@ -10,7 +10,6 @@ // https://documize.com import { computed } from '@ember/object'; - import { notEmpty } from '@ember/object/computed'; import { inject as service } from '@ember/service'; import Component from '@ember/component'; diff --git a/gui/app/components/folder/documents-list.js b/gui/app/components/folder/documents-list.js index dc5b3c14..9c4a02f7 100644 --- a/gui/app/components/folder/documents-list.js +++ b/gui/app/components/folder/documents-list.js @@ -10,18 +10,43 @@ // https://documize.com import { computed } from '@ember/object'; - import Component from '@ember/component'; export default Component.extend({ + showDeleteDialog: false, + selectedDocuments: [], + showAdd: computed('permissions', 'documents', function() { return this.get('documents.length') === 0 && this.get('permissions.documentAdd'); }), showLockout: computed('permissions', 'documents', function() { return this.get('documents.length') === 0 && !this.get('permissions.documentAdd'); }), + hasDocumentActions: computed('permissions', function() { + return this.get('permissions.documentDelete') || this.get('permissions.documentMove'); + }), actions: { + onConfirmDeleteDocuments() { + this.set('showDeleteDialog', true); + }, + + onDeleteDocuments() { + this.set('showDeleteDialog', false); + let list = this.get('selectedDocuments'); + + // list.forEach(d => { + // let doc = this.get('documents').findBy('id', d); + // doc.set('selected', false); + // }); + + this.attrs.onDeleteDocument(list); + + this.set('selectedDocuments', []); + + return true; + }, + selectDocument(documentId) { let doc = this.get('documents').findBy('id', documentId); let list = this.get('selectedDocuments'); diff --git a/gui/app/components/folder/space-heading.js b/gui/app/components/folder/space-heading.js index 9e2a137a..af9f4076 100644 --- a/gui/app/components/folder/space-heading.js +++ b/gui/app/components/folder/space-heading.js @@ -19,8 +19,8 @@ import TooltipMixin from '../../mixins/tooltip'; export default Component.extend(NotifierMixin, TooltipMixin, { folderService: service('folder'), - folderName: '', - hasNameError: empty('folderName'), + spaceName: '', + hasNameError: empty('spaceName'), editMode: false, keyUp(e) { @@ -31,7 +31,7 @@ export default Component.extend(NotifierMixin, TooltipMixin, { actions: { toggleEdit() { - this.set('folderName', this.get('folder.name')); + this.set('spaceName', this.get('space.name')); this.set('editMode', true); schedule('afterRender', () => { @@ -44,11 +44,8 @@ export default Component.extend(NotifierMixin, TooltipMixin, { return; } - this.set('folder.name', this.get('folderName')); - - this.get('folderService').save(this.get('folder')); - this.showNotification('Saved'); - + this.set('space.name', this.get('spaceName')); + this.get('folderService').save(this.get('space')); this.set('editMode', false); }, diff --git a/gui/app/components/folder/space-toolbar.js b/gui/app/components/folder/space-toolbar.js index 49be3d60..6f4c5c7c 100644 --- a/gui/app/components/folder/space-toolbar.js +++ b/gui/app/components/folder/space-toolbar.js @@ -42,12 +42,6 @@ export default Component.extend(NotifierMixin, TooltipMixin, AuthMixin, { let folder = this.get('folder'); let targets = _.reject(this.get('folders'), {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.set('movedFolderOptions', targets); }, @@ -74,41 +68,6 @@ export default Component.extend(NotifierMixin, TooltipMixin, AuthMixin, { }, actions: { - onUnpin() { - this.get('pinned').unpinItem(this.get('pinState.pinId')).then(() => { - 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('folder.id') - }; - - if (is.empty(pin.pin)) { - $('#pin-space-name').addClass('error').focus(); - return false; - } - - this.get('pinned').pinItem(pin).then((pin) => { - this.set('pinState.isPinned', true); - this.set('pinState.pinId', pin.get('id')); - this.eventBus.publish('pinChange'); - this.renderTooltips(); - }); - - return true; - }, - - deleteDocuments() { - this.attrs.onDeleteDocument(); - }, - setMoveFolder(folderId) { this.set('moveFolderId', folderId); diff --git a/gui/app/components/folder/space-view.js b/gui/app/components/folder/space-view.js index 23b61cae..89f63e91 100644 --- a/gui/app/components/folder/space-view.js +++ b/gui/app/components/folder/space-view.js @@ -99,8 +99,7 @@ export default Component.extend(NotifierMixin, TooltipMixin, AuthMixin, { this.send("showNotification", "Moved"); }, - onDeleteDocument() { - let documents = this.get('selectedDocuments'); + onDeleteDocument(documents) { let self = this; let promises = []; @@ -113,10 +112,9 @@ export default Component.extend(NotifierMixin, TooltipMixin, AuthMixin, { documents.forEach(function (document) { document.set('selected', false); }); - this.set('documents', documents); + this.set('documents', documents); this.set('selectedDocuments', []); - this.send("showNotification", "Deleted"); this.attrs.onRefresh(); }); }, diff --git a/gui/app/components/ui/ui-confirm-dialog.js b/gui/app/components/ui/ui-confirm-dialog.js new file mode 100644 index 00000000..cc030951 --- /dev/null +++ b/gui/app/components/ui/ui-confirm-dialog.js @@ -0,0 +1,62 @@ +// Copyright 2016 Documize Inc. . All rights reserved. +// +// This software (Documize Community Edition) is licensed under +// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html +// +// You can operate outside the AGPL restrictions by purchasing +// Documize Enterprise Edition and obtaining a commercial license +// by contacting . +// +// https://documize.com + +import Component from '@ember/component'; +import stringUtil from '../../utils/string'; + +export default Component.extend({ + contentId: '', + cancelCaption: 'Cancel', + confirmCaption: 'OK', + title: 'Confirm', + show: false, + + didInsertElement() { + this._super(...arguments); + this.set("contentId", 'confirm-modal-' + stringUtil.makeId(10)); + }, + + didUpdateAttrs() { + this._super(...arguments); + let modalId = '#' + this.get('contentId'); + + if (this.get('show')) { + $(modalId).modal({}); + $(modalId).modal('show'); + let self = this; + $(modalId).on('hidden.bs.modal', function(e) { // eslint-disable-line no-unused-vars + self.set('show', false); + $(modalId).modal('dispose'); + }); + } else { + $(modalId).modal('hide'); + $(modalId).modal('dispose'); + } + }, + + actions: { + onCancel() { + $('#' + this.get('contentId')).modal('dispose'); + }, + + onAction(e) { + e.preventDefault(); + + if (this.get('onAction') === null) { + return; + } + + if (this.attrs.onAction()) { + this.set('show', false); + } + } + } +}); diff --git a/gui/app/styles/view/space.scss b/gui/app/styles/view/space.scss index 067b02c6..0916d244 100644 --- a/gui/app/styles/view/space.scss +++ b/gui/app/styles/view/space.scss @@ -80,6 +80,14 @@ color: $color-checkbox; } } + + > .actions { + position: absolute; + display: none; + bottom: 2px; + right: 12px; + cursor: pointer; + } } > .selected { @@ -88,6 +96,10 @@ > .checkbox { display: block; } + + > .actions { + display: block; + } } } diff --git a/gui/app/styles/widget/widget-button.scss b/gui/app/styles/widget/widget-button.scss index 3e5670c6..a82ed4d6 100644 --- a/gui/app/styles/widget/widget-button.scss +++ b/gui/app/styles/widget/widget-button.scss @@ -398,6 +398,48 @@ } } +.button-icon-blue { + display: inline-block; + cursor: default; + @include ease-in(); + + > i { + color: $color-blue; + font-size: 2rem; + @include ease-in(); + } + + &:hover { + > i { + color: darken($color-blue, 5%); + } + } +} + +.button-icon-red { + display: inline-block; + cursor: default; + @include ease-in(); + + > i { + color: $color-red; + font-size: 2rem; + @include ease-in(); + } + + &:hover { + > i { + color: darken($color-red, 5%); + } + } +} + +.button-icon-small { + > i { + font-size: 1.3rem; + } +} + .button-icon-gap { display: inline-block; margin-left: 5px; diff --git a/gui/app/templates/components/folder/documents-list.hbs b/gui/app/templates/components/folder/documents-list.hbs index 9f3f7f9a..3b132311 100644 --- a/gui/app/templates/components/folder/documents-list.hbs +++ b/gui/app/templates/components/folder/documents-list.hbs @@ -2,12 +2,12 @@
    {{#each documents key="id" as |document|}}
  • - {{#link-to 'document.index' folder.id folder.slug document.id document.slug}} + {{#link-to 'document.index' space.id space.slug document.id document.slug}}
    {{ document.name }}
    {{ document.excerpt }}
    {{folder/document-tags documentTags=document.tags}} {{/link-to}} - {{#if session.authenticated}} + {{#if hasDocumentActions}}
    {{#if document.selected}} check_box @@ -15,12 +15,32 @@ check_box_outline_blank {{/if}}
    + + {{#if document.selected}} +
    + {{#if permissions.documentMove}} +
    + compare_arrows +
    +
    + {{/if}} + {{#if permissions.documentDelete}} +
    + delete +
    + {{/if}} +
    + {{/if}} {{/if}}
    • {{/each}}
+{{#ui/ui-confirm-dialog title="Delete Documents" confirmCaption="Delete" show=showDeleteDialog onAction=(action 'onDeleteDocuments')}} +

Are you sure you want to delete the {{selectedDocuments.length}} selected documents?

+{{/ui/ui-confirm-dialog}} + {{#if showAdd}} {{empty-state icon="direct" message="You can create new documents via the green + button"}} {{/if}} diff --git a/gui/app/templates/components/folder/space-heading.hbs b/gui/app/templates/components/folder/space-heading.hbs index faf113b8..f084d7a8 100644 --- a/gui/app/templates/components/folder/space-heading.hbs +++ b/gui/app/templates/components/folder/space-heading.hbs @@ -6,7 +6,7 @@

- {{folder.name}} + {{space.name}}

@@ -15,7 +15,7 @@
- {{input id="folder-name" type="text" value=folderName class=(if hasNameError 'form-control is-invalid' 'form-control') placeholder="Space name" autocomplete="off"}} + {{input id="space-name" type="text" value=spaceName class=(if hasNameError 'form-control is-invalid' 'form-control') placeholder="Space name" autocomplete="off"}} Press Enter to save or Escape to cancel
diff --git a/gui/app/templates/components/folder/space-toolbar.hbs b/gui/app/templates/components/folder/space-toolbar.hbs index b1562b04..8f55a3f8 100644 --- a/gui/app/templates/components/folder/space-toolbar.hbs +++ b/gui/app/templates/components/folder/space-toolbar.hbs @@ -1,20 +1,7 @@ diff --git a/gui/app/templates/components/folder/space-view.hbs b/gui/app/templates/components/folder/space-view.hbs index 8af70132..801f443f 100644 --- a/gui/app/templates/components/folder/space-view.hbs +++ b/gui/app/templates/components/folder/space-view.hbs @@ -1,4 +1,4 @@ -{{folder/space-heading folder=folder permissions=permissions}} +{{folder/space-heading space=space permissions=permissions}} {{#if hasCategories}}
@@ -6,9 +6,9 @@
{{documents.length}} documents
    -
  • All ({{documents.length}})
    • +
  • All ({{documents.length}})
    • {{#if (gt rootDocCount 0)}} -
  • Uncategorized ({{rootDocCount}})
    • +
  • Uncategorized ({{rootDocCount}})
    • {{/if}}
@@ -26,8 +26,9 @@
{{/if}} -{{folder/documents-list documents=filteredDocs folders=folders folder=folder - templates=templates permissions=permissions selectedDocuments=(mut selectedDocuments)}} +{{folder/documents-list documents=filteredDocs spaces=spaces space=space + templates=templates permissions=permissions + onDeleteDocument=(action 'onDeleteDocument')}} {{#if showStartDocument}} {{folder/start-document folder=folder templates=templates permissions=permissions @@ -35,7 +36,7 @@ {{/if}} {{folder/space-toolbar folders=folders folder=folder - permissions=permissions hasSelectedDocuments=hasSelectedDocuments - onDeleteDocument=(action 'onDeleteDocument') onMoveDocument=(action 'onMoveDocument') + permissions=permissions + onMoveDocument=(action 'onMoveDocument') onStartDocument=(action 'onStartDocument')}} diff --git a/gui/app/templates/components/ui/ui-confirm-dialog.hbs b/gui/app/templates/components/ui/ui-confirm-dialog.hbs new file mode 100644 index 00000000..2cff1c1e --- /dev/null +++ b/gui/app/templates/components/ui/ui-confirm-dialog.hbs @@ -0,0 +1,16 @@ +