Frontend updates to positioning the issue in lists

app/assets/javascripts/boards/components/board_list.js.es6

@@ -56,11 +56,6 @@ require('./board_new_issue');
         });
       }
     },
-    computed: {
-      orderedIssues () {
-        return _.sortBy(this.issues, 'priority');
-      },
-    },
     methods: {
       listHeight () {
         return this.$refs.list.getBoundingClientRect().height;
@@ -86,9 +81,9 @@ require('./board_new_issue');
       const options = gl.issueBoards.getBoardSortableDefaultOptions({
         scroll: document.querySelectorAll('.boards-list')[0],
         group: 'issues',
-        sort: true,
         disabled: this.disabled,
         filter: '.board-list-count, .is-disabled',
+        dataIdAttr: 'data-issue-id',
         onStart: (e) => {
           const card = this.$refs.issue[e.oldIndex];
@@ -106,7 +101,7 @@ require('./board_new_issue');
           });
         },
         onUpdate: (e) => {
-          gl.issueBoards.BoardsStore.moveIssueInList(this.list, Store.moving.issue, e.oldIndex, e.newIndex);
+          gl.issueBoards.BoardsStore.moveIssueInList(this.list, Store.moving.issue, this.sortable.toArray(), e.newIndex);
         },
       });

app/assets/javascripts/boards/models/issue.js.es6

@@ -15,6 +15,7 @@ class ListIssue {
     this.labels = [];
     this.selected = false;
     this.assignee = false;
+    this.position = obj.relative_position || Infinity;
     if (obj.assignee) {
       this.assignee = new ListUser(obj.assignee);
@@ -27,10 +28,6 @@ class ListIssue {
     obj.labels.forEach((label) => {
       this.labels.push(new ListLabel(label));
     });
-
-    this.priority = this.labels.reduce((max, label) => {
-      return (label.priority < max) ? label.priority : max;
-    }, Infinity);
   }
   addLabel (label) {

app/assets/javascripts/boards/models/list.js.es6

@@ -110,17 +110,15 @@ class List {
   }
   addIssue (issue, listFrom, newIndex) {
-    if (!this.findIssue(issue.id)) {
-      let moveBeforeIid = null;
-      let moveAfterIid = null;
-      if (newIndex !== undefined) {
+    let moveBeforeIid;
+    let moveAfterIid;
+    if (!this.findIssue(issue.id)) {
+      if (newIndex) {
         this.issues.splice(newIndex, 0, issue);
-        const issueBefore = this.issues[newIndex - 1];
-        if (issueBefore) moveAfterIid = issueBefore.id;
-        const issueAfter = this.issues[newIndex + 1];
-        if (issueAfter) moveBeforeIid = issueAfter.id;
+        moveBeforeIid = this.issues[newIndex - 1].id || null;
+        moveAfterIid = this.issues[newIndex + 1].id || null;
       } else {
         this.issues.push(issue);
       }
@@ -139,18 +137,7 @@ class List {
     }
   }
-  moveIssue (issue, oldIndex, newIndex) {
-    let moveBeforeIid = null;
-    let moveAfterIid = null;
-
-    this.issues.splice(oldIndex, 1);
-    this.issues.splice(newIndex, 0, issue);
-
-    const issueBefore = this.issues[newIndex - 1];
-    if (issueBefore) moveAfterIid = issueBefore.id;
-    const issueAfter = this.issues[newIndex + 1];
-    if (issueAfter) moveBeforeIid = issueAfter.id;
-
+  moveIssue (issue, moveBeforeIid, moveAfterIid) {
     gl.boardService.moveIssue(issue.id, null, null, moveAfterIid, moveBeforeIid);
   }

app/assets/javascripts/boards/services/board_service.js.es6

@@ -69,7 +69,7 @@ class BoardService {
       from_list_id,
       to_list_id,
       move_before_iid,
-      move_after_iid
+      move_after_iid,
     });
   }

app/assets/javascripts/boards/stores/boards_store.js.es6

@@ -106,8 +106,11 @@
         listFrom.removeIssue(issue);
       }
     },
-    moveIssueInList (list, issue, oldIndex, newIndex) {
-      list.moveIssue(issue, oldIndex, newIndex);
+    moveIssueInList (list, issue, idArray, index) {
+      const beforeId = parseInt(idArray[index - 1], 10) || null;
+      const afterId = parseInt(idArray[index + 1], 10) || null;
+
+      list.moveIssue(issue, beforeId, afterId);
     },
     findList (key, val, type = 'label') {
       return this.state.lists.filter((list) => {

app/controllers/projects/boards/issues_controller.rb

@@ -73,7 +73,7 @@ module Projects
       def serialize_as_json(resource)
         resource.as_json(
           labels: true,
-          only: [:id, :iid, :title, :confidential, :due_date],
+          only: [:id, :iid, :title, :confidential, :due_date, :relative_position],
           include: {
             assignee: { only: [:id, :name, :username], methods: [:avatar_url] },
             milestone: { only: [:id, :title] }

app/models/concerns/relative_positioning.rb

@@ -78,7 +78,7 @@ module RelativePositioning
   def move_before(after)
     pos_after = after.relative_position
     if pos_after
-      self.relative_position = position_between(after.prev_relative_position, pos_after)
+      self.relative_position = position_between(MIN_POSITION, pos_after)
     else
       move_to_end
       after.move_after(self)
@@ -89,7 +89,7 @@ module RelativePositioning
   def move_after(before)
     pos_before = before.relative_position
     if pos_before
-      self.relative_position = position_between(pos_before, before.next_relative_position)
+      self.relative_position = position_between(pos_before, MAX_POSITION)
     else
       move_to_end
       before.move_before(self)

app/services/issues/update_service.rb

@@ -50,7 +50,7 @@ module Issues
     def handle_move_between_iids(issue)
       if move_between_iids = params.delete(:move_between_iids)
-        before_iid, after_iid = move_between_iids
+        after_iid, before_iid = move_between_iids
         issue_before = nil
         if before_iid

app/views/projects/boards/components/_board_list.html.haml

@@ -28,7 +28,7 @@
     "v-show" => "!loading",
     ":data-board" => "list.id",
     ":class" => '{ "is-smaller": showIssueForm }' }
-    %board-card{ "v-for" => "(issue, index) in orderedIssues",
+    %board-card{ "v-for" => "(issue, index) in issues",
       "ref" => "issue",
       ":index" => "index",
       ":list" => "list",