diff options
author | Jacopo <beschi.jacopo@gmail.com> | 2017-01-16 14:11:08 +0100 |
---|---|---|
committer | Jacopo <beschi.jacopo@gmail.com> | 2017-02-17 22:12:19 +0100 |
commit | 26160459b56019f445a7d29abc0b72f591e1d2a9 (patch) | |
tree | bf7150c7eda9436f001decae56407ca3b3f718f8 /app/assets/javascripts | |
parent | 63330af84fb6ecdce4611af238af4233a436e260 (diff) | |
download | gitlab-ce-26160459b56019f445a7d29abc0b72f591e1d2a9.tar.gz |
Todo done clicking is kind of unusable.
The Done button will change to an Undo button and the line item will be greyed out.
Bold links will be unbolded.
The user can undo the task by clicking the Undo button.
Diffstat (limited to 'app/assets/javascripts')
-rw-r--r-- | app/assets/javascripts/todos.js.es6 | 143 |
1 files changed, 58 insertions, 85 deletions
diff --git a/app/assets/javascripts/todos.js.es6 b/app/assets/javascripts/todos.js.es6 index ded683f2ca1..e9513725d9d 100644 --- a/app/assets/javascripts/todos.js.es6 +++ b/app/assets/javascripts/todos.js.es6 @@ -1,28 +1,34 @@ -/* eslint-disable class-methods-use-this, no-new, func-names, prefer-template, no-unneeded-ternary, object-shorthand, space-before-function-paren, comma-dangle, quote-props, consistent-return, no-else-return, no-param-reassign, max-len */ +/* eslint-disable class-methods-use-this, no-new, func-names, no-unneeded-ternary, object-shorthand, quote-props, no-param-reassign, max-len */ /* global UsersSelect */ ((global) => { class Todos { - constructor({ el } = {}) { - this.allDoneClicked = this.allDoneClicked.bind(this); - this.doneClicked = this.doneClicked.bind(this); - this.el = el || $('.js-todos-options'); - this.perPage = this.el.data('perPage'); - this.clearListeners(); - this.initBtnListeners(); + constructor() { this.initFilters(); + this.bindEvents(); + + this.cleanupWrapper = this.cleanup.bind(this); + document.addEventListener('beforeunload', this.cleanupWrapper); } - clearListeners() { - $('.done-todo').off('click'); - $('.js-todos-mark-all').off('click'); - return $('.todo').off('click'); + cleanup() { + this.unbindEvents(); + document.removeEventListener('beforeunload', this.cleanupWrapper); } - initBtnListeners() { - $('.done-todo').on('click', this.doneClicked); - $('.js-todos-mark-all').on('click', this.allDoneClicked); - return $('.todo').on('click', this.goToTodoUrl); + unbindEvents() { + $('.js-done-todo, .js-undo-todo').off('click', this.updateStateClickedWrapper); + $('.js-todos-mark-all').off('click', this.allDoneClickedWrapper); + $('.todo').off('click', this.goToTodoUrl); + } + + bindEvents() { + this.updateStateClickedWrapper = this.updateStateClicked.bind(this); + this.allDoneClickedWrapper = this.allDoneClicked.bind(this); + + $('.js-done-todo, .js-undo-todo').on('click', this.updateStateClickedWrapper); + $('.js-todos-mark-all').on('click', this.allDoneClickedWrapper); + $('.todo').on('click', this.goToTodoUrl); } initFilters() { @@ -33,7 +39,7 @@ $('form.filter-form').on('submit', function (event) { event.preventDefault(); - gl.utils.visitUrl(this.action + '&' + $(this).serialize()); + gl.utils.visitUrl(`${this.action}&${$(this).serialize()}`); }); } @@ -44,105 +50,72 @@ filterable: searchFields ? true : false, search: { fields: searchFields }, data: $dropdown.data('data'), - clicked: function() { + clicked: function () { return $dropdown.closest('form.filter-form').submit(); - } + }, }); } - doneClicked(e) { + updateStateClicked(e) { e.preventDefault(); - e.stopImmediatePropagation(); - const $target = $(e.currentTarget); - $target.disable(); - return $.ajax({ + const target = e.target; + target.setAttribute('disabled', ''); + target.classList.add('disabled'); + $.ajax({ type: 'POST', - url: $target.attr('href'), + url: target.getAttribute('href'), dataType: 'json', data: { - '_method': 'delete' + '_method': target.getAttribute('data-method'), }, success: (data) => { - this.redirectIfNeeded(data.count); - this.clearDone($target.closest('li')); - return this.updateBadges(data); - } + this.updateState(target); + this.updateBadges(data); + }, }); } allDoneClicked(e) { e.preventDefault(); - e.stopImmediatePropagation(); const $target = $(e.currentTarget); $target.disable(); - return $.ajax({ + $.ajax({ type: 'POST', url: $target.attr('href'), dataType: 'json', data: { - '_method': 'delete' + '_method': 'delete', }, success: (data) => { $target.remove(); $('.js-todos-all').html('<div class="nothing-here-block">You\'re all done!</div>'); - return this.updateBadges(data); - } + this.updateBadges(data); + }, }); } - clearDone($row) { - const $ul = $row.closest('ul'); - $row.remove(); - if (!$ul.find('li').length) { - return $ul.parents('.panel').remove(); + updateState(target) { + const row = target.closest('li'); + const restoreBtn = row.querySelector('.js-undo-todo'); + const doneBtn = row.querySelector('.js-done-todo'); + + target.removeAttribute('disabled'); + target.classList.remove('disabled'); + target.classList.add('hidden'); + + if (target === doneBtn) { + row.classList.add('done-reversible'); + restoreBtn.classList.remove('hidden'); + } else { + row.classList.remove('done-reversible'); + doneBtn.classList.remove('hidden'); } } updateBadges(data) { $(document).trigger('todo:toggle', data.count); $('.todos-pending .badge').text(data.count); - return $('.todos-done .badge').text(data.done_count); - } - - getTotalPages() { - return this.el.data('totalPages'); - } - - getCurrentPage() { - return this.el.data('currentPage'); - } - - getTodosPerPage() { - return this.el.data('perPage'); - } - - redirectIfNeeded(total) { - const currPages = this.getTotalPages(); - const currPage = this.getCurrentPage(); - - // Refresh if no remaining Todos - if (!total) { - window.location.reload(); - return; - } - // Do nothing if no pagination - if (!currPages) { - return; - } - - const newPages = Math.ceil(total / this.getTodosPerPage()); - let url = location.href; - - if (newPages !== currPages) { - // Redirect to previous page if there's one available - if (currPages > 1 && currPage === currPages) { - const pageParams = { - page: currPages - 1 - }; - url = gl.utils.mergeUrlParams(pageParams, url); - } - return gl.utils.visitUrl(url); - } + $('.todos-done .badge').text(data.done_count); } goToTodoUrl(e) { @@ -159,12 +132,12 @@ if (selected.tagName === 'IMG') { const avatarUrl = selected.parentElement.getAttribute('href'); - return window.open(avatarUrl, windowTarget); + window.open(avatarUrl, windowTarget); } else { - return window.open(todoLink, windowTarget); + window.open(todoLink, windowTarget); } } else { - return gl.utils.visitUrl(todoLink); + gl.utils.visitUrl(todoLink); } } } |