Bring Manual Ordering on Issue List

On all the issue lists -- Group, Project and Dashboard -- this
change adds a new option for managing the lists.

"Manual Ordering" option is added which when flipped on will allow
an user to drag and drop issues around to create a relative ordering
among them.

4 files changed, 64 insertions, 0 deletions

diff --git a/app/assets/javascripts/manual_ordering.js b/app/assets/javascripts/manual_ordering.js
new file mode 100644
index 00000000000..e16ddbfef7e
--- /dev/null
+++ b/app/assets/javascripts/manual_ordering.js
@@ -0,0 +1,58 @@
+import Sortable from 'sortablejs';
+import { s__ } from '~/locale';
+import createFlash from '~/flash';
+import {
+  getBoardSortableDefaultOptions,
+  sortableStart,
+} from '~/boards/mixins/sortable_default_options';
+import axios from '~/lib/utils/axios_utils';
+
+const updateIssue = (url, issueList, { move_before_id, move_after_id }) =>
+  axios
+    .put(`${url}/reorder`, {
+      move_before_id,
+      move_after_id,
+      group_full_path: issueList.dataset.groupFullPath,
+    })
+    .catch(() => {
+      createFlash(s__("ManualOrdering|Couldn't save the order of the issues"));
+    });
+
+const initManualOrdering = () => {
+  const issueList = document.querySelector('.manual-ordering');
+
+  if (!issueList || !(gon.features && gon.features.manualSorting)) {
+    return;
+  }
+
+  Sortable.create(
+    issueList,
+    getBoardSortableDefaultOptions({
+      scroll: true,
+      dataIdAttr: 'data-id',
+      fallbackOnBody: false,
+      group: {
+        name: 'issues',
+      },
+      draggable: 'li.issue',
+      onStart: () => {
+        sortableStart();
+      },
+      onUpdate: event => {
+        const el = event.item;
+
+        const url = el.getAttribute('url');
+
+        const prev = el.previousElementSibling;
+        const next = el.nextElementSibling;
+
+        const beforeId = prev && parseInt(prev.dataset.id, 10);
+        const afterId = next && parseInt(next.dataset.id, 10);
+
+        updateIssue(url, issueList, { move_after_id: afterId, move_before_id: beforeId });
+      },
+    }),
+  );
+};
+
+export default initManualOrdering;
diff --git a/app/assets/javascripts/pages/dashboard/issues/index.js b/app/assets/javascripts/pages/dashboard/issues/index.js
index 9055738f86e..2ffeed8a584 100644
--- a/app/assets/javascripts/pages/dashboard/issues/index.js
+++ b/app/assets/javascripts/pages/dashboard/issues/index.js
@@ -2,6 +2,7 @@ import projectSelect from '~/project_select';
 import initFilteredSearch from '~/pages/search/init_filtered_search';
 import IssuableFilteredSearchTokenKeys from '~/filtered_search/issuable_filtered_search_token_keys';
 import { FILTERED_SEARCH } from '~/pages/constants';
+import initManualOrdering from '~/manual_ordering';
 
 document.addEventListener('DOMContentLoaded', () => {
   initFilteredSearch({
@@ -10,4 +11,5 @@ document.addEventListener('DOMContentLoaded', () => {
   });
 
   projectSelect();
+  initManualOrdering();
 });
diff --git a/app/assets/javascripts/pages/groups/issues/index.js b/app/assets/javascripts/pages/groups/issues/index.js
index 35d4b034654..23fb5656008 100644
--- a/app/assets/javascripts/pages/groups/issues/index.js
+++ b/app/assets/javascripts/pages/groups/issues/index.js
@@ -2,6 +2,7 @@ import projectSelect from '~/project_select';
 import initFilteredSearch from '~/pages/search/init_filtered_search';
 import { FILTERED_SEARCH } from '~/pages/constants';
 import IssuableFilteredSearchTokenKeys from 'ee_else_ce/filtered_search/issuable_filtered_search_token_keys';
+import initManualOrdering from '~/manual_ordering';
 
 document.addEventListener('DOMContentLoaded', () => {
   IssuableFilteredSearchTokenKeys.addExtraTokensForIssues();
@@ -12,4 +13,5 @@ document.addEventListener('DOMContentLoaded', () => {
     filteredSearchTokenKeys: IssuableFilteredSearchTokenKeys,
   });
   projectSelect();
+  initManualOrdering();
 });
diff --git a/app/assets/javascripts/pages/projects/issues/index/index.js b/app/assets/javascripts/pages/projects/issues/index/index.js
index c34aff02111..c73ebb31eb3 100644
--- a/app/assets/javascripts/pages/projects/issues/index/index.js
+++ b/app/assets/javascripts/pages/projects/issues/index/index.js
@@ -7,6 +7,7 @@ import initFilteredSearch from '~/pages/search/init_filtered_search';
 import { FILTERED_SEARCH } from '~/pages/constants';
 import { ISSUABLE_INDEX } from '~/pages/projects/constants';
 import IssuableFilteredSearchTokenKeys from 'ee_else_ce/filtered_search/issuable_filtered_search_token_keys';
+import initManualOrdering from '~/manual_ordering';
 
 document.addEventListener('DOMContentLoaded', () => {
   IssuableFilteredSearchTokenKeys.addExtraTokensForIssues();
@@ -19,4 +20,5 @@ document.addEventListener('DOMContentLoaded', () => {
 
   new ShortcutsNavigation();
   new UsersSelect();
+  initManualOrdering();
 });