diff --git a/app/adapters/application.js b/app/adapters/application.js index 447a4f521f52dc9e17fd3c56033426e3d649aed6..39a3f98fc304ed46c97b30d9a6de79eab79f6b24 100644 --- a/app/adapters/application.js +++ b/app/adapters/application.js @@ -16,22 +16,6 @@ export default class ApplicationAdapter extends JSONAPIAdapter { } return `${ret}/`; } - /* - pathForType(modelName) { - let ret = super.pathForType(modelName); - - // `nodes` is polymorphic endpoint - // with POST /api/nodes/ we can create a Folder - // or a Document - if (modelName == 'folder') { - return 'nodes'; - } else if (modelName == 'document') { - return 'nodes'; - } - - return ret; - } - */ @computed('session.data.authenticated.token', 'session.isAuthenticated') get headers() { diff --git a/app/components/commander/index.hbs b/app/components/commander/index.hbs index 625eaaca370bcbeeef0d0d21e4211bb36b5a8f87..39bd3543ab7e62999f7355c14975b7a23b063636 100644 --- a/app/components/commander/index.hbs +++ b/app/components/commander/index.hbs @@ -37,7 +37,7 @@ @hint={{@hint}} /> <div class="view-mode-{{this.view_mode}}"> - {{#each @children as |node|}} + {{#each this.children as |node|}} {{#let (component node.nodeType) as |NodeType|}} {{! NodeType is either <Folder /> or <Document />}} <NodeType diff --git a/app/components/commander/index.js b/app/components/commander/index.js index 06c71e3274d52e8229180b348aaeda66c8709ecf..d8b770896b8708ae819ef30bd75443c690d9fa43 100644 --- a/app/components/commander/index.js +++ b/app/components/commander/index.js @@ -27,11 +27,22 @@ export default class CommanderComponent extends Component { @tracked selected_nodes = A([]); + // new records created via New Folder or Upload Documents + @tracked new_records = A([]); + @tracked __new_record; // used as workaround for an ember bug + @action openNewFolderModal() { this.show_new_folder_modal = true; } + @action + closeNewFolderModal(new_record) { + this.new_records.push(new_record); + this.__new_record = new_record; // workaround of ember bug + this.show_new_folder_modal = false; + } + @action openRenameModal() { this.show_rename_node_modal = true; @@ -54,11 +65,6 @@ export default class CommanderComponent extends Component { this.selected_nodes = A([]); } - @action - closeNewFolderModal() { - this.show_new_folder_modal = false; - } - @action onViewModeChange(new_view_mode) { this.view_mode = new_view_mode; @@ -82,4 +88,40 @@ export default class CommanderComponent extends Component { this.selected_nodes.removeObject(node); } } + + get children() { + /** + Update children nodes (e.g. with newly added records) for better UX + + In order to provide better user experiece, when user creates new folders, + uploads documents, deletes nodes (folder or documents) etc commander will + show immediate effect of the action: newly created folder must be seen on + same page as currenly user is in; even if we fetch again children, newly + folder might not be visible to the user, as according to + sorting/pagination creteria it(newly created folder) may not reside in + current page. + + This is where current method comes handy - sticking with above example of + newly created folder - this method will add newly created folder to the + list of already existing children to make it visible to the user. + */ + let children_copy = A(this.args.children); + + if (this.new_records.length > 0) { + while(this.new_records.length > 0) { + children_copy.unshift( + this.new_records.pop() + ); + } + } + + if (this.__new_record) { // workaround ember bug + // Ember bug! Without this empty statement + // updates on tracked attributes ``this.new_records`` + // will not trigger template updates i.e. ``this.children`` + // + // pass + } + return children_copy; + } } diff --git a/app/components/modal/new_folder.js b/app/components/modal/new_folder.js index 138fa29173f501026fe28282c15304f0acb08133..3645052321ac37947c9298f12bb4a0f92816c93f 100644 --- a/app/components/modal/new_folder.js +++ b/app/components/modal/new_folder.js @@ -10,15 +10,15 @@ export default class NewFolderComponent extends Component { @service currentUser; @action - onSubmit() { - let new_folder; + async onSubmit() { + let new_folder, new_record; new_folder = this.store.createRecord('folder'); new_folder.title = this.title; new_folder.parent = this.args.node; - new_folder.save(); + new_record = await new_folder.save(); - this.args.onClose(); + this.args.onClose(new_record); this.title = ''; } diff --git a/app/components/pagination/index.js b/app/components/pagination/index.js index f818a8d1fa361d321c558a16f612b06f3953ff8e..f5d9197ed2ddee30aa46b014267972775b8b5d04 100644 --- a/app/components/pagination/index.js +++ b/app/components/pagination/index.js @@ -2,10 +2,20 @@ import Component from '@glimmer/component'; export default class PaginationComponent extends Component { + get pages() { - let result = []; + let result = [], + page, + pages; + + page = this.args.page; // number of current page + pages = this.args.pages; // total number of pages + + if (pages == page) { + return []; + } - for(let i=0; i < this.args.object.pages; i++) { + for(let i=0; i < pages; i++) { if (this.args.object.page === i + 1) { result.push({