Fixed path40447-convert-sortable-js-library-to-be-a-yarn-managed-library

1 files changed, 30 insertions, 22 deletions

diff --git a/app/assets/javascripts/boards/components/board.js b/app/assets/javascripts/boards/components/board.js
index d56cbe10036..fae048f064c 100644
--- a/app/assets/javascripts/boards/components/board.js
+++ b/app/assets/javascripts/boards/components/board.js
@@ -1,7 +1,6 @@
 /* eslint-disable comma-dangle, space-before-function-paren, one-var */
 
 import $ from 'jquery';
-import Sortable from 'vendor/Sortable';
 import Vue from 'vue';
 import Sortable from 'sortablejs';
 import AccessorUtilities from '../../lib/utils/accessor';
@@ -31,7 +30,7 @@ gl.issueBoards.Board = Vue.extend({
       required: true,
     },
   },
-  data () {
+  data() {
     return {
       detailIssue: Store.detail,
       filter: Store.filter,
@@ -41,15 +40,14 @@ gl.issueBoards.Board = Vue.extend({
     filter: {
       handler() {
         this.list.page = 1;
-        this.list.getIssues(true)
-          .catch(() => {
-            // TODO: handle request error
-          });
+        this.list.getIssues(true).catch(() => {
+          // TODO: handle request error
+        });
       },
       deep: true,
     },
     detailIssue: {
-      handler () {
+      handler() {
         if (!Object.keys(this.detailIssue.issue).length) return;
 
         const issue = this.list.findIssue(this.detailIssue.issue.id);
@@ -58,30 +56,36 @@ gl.issueBoards.Board = Vue.extend({
           const offsetLeft = this.$el.offsetLeft;
           const boardsList = document.querySelectorAll('.boards-list')[0];
           const left = boardsList.scrollLeft - offsetLeft;
-          let right = (offsetLeft + this.$el.offsetWidth);
+          let right = offsetLeft + this.$el.offsetWidth;
 
           if (window.innerWidth > 768 && boardsList.classList.contains('is-compact')) {
             // -290 here because width of boardsList is animating so therefore
             // getting the width here is incorrect
             // 290 is the width of the sidebar
-            right -= (boardsList.offsetWidth - 290);
+            right -= boardsList.offsetWidth - 290;
           } else {
             right -= boardsList.offsetWidth;
           }
 
           if (right - boardsList.scrollLeft > 0) {
-            $(boardsList).animate({
-              scrollLeft: right
-            }, this.sortableOptions.animation);
+            $(boardsList).animate(
+              {
+                scrollLeft: right,
+              },
+              this.sortableOptions.animation,
+            );
           } else if (left > 0) {
-            $(boardsList).animate({
-              scrollLeft: offsetLeft
-            }, this.sortableOptions.animation);
+            $(boardsList).animate(
+              {
+                scrollLeft: offsetLeft,
+              },
+              this.sortableOptions.animation,
+            );
           }
         }
       },
-      deep: true
-    }
+      deep: true,
+    },
   },
   methods: {
     showNewIssueForm() {
@@ -92,18 +96,21 @@ gl.issueBoards.Board = Vue.extend({
         this.list.isExpanded = !this.list.isExpanded;
 
         if (AccessorUtilities.isLocalStorageAccessSafe()) {
-          localStorage.setItem(`boards.${this.boardId}.${this.list.type}.expanded`, this.list.isExpanded);
+          localStorage.setItem(
+            `boards.${this.boardId}.${this.list.type}.expanded`,
+            this.list.isExpanded,
+          );
         }
       }
     },
   },
-  mounted () {
+  mounted() {
     this.sortableOptions = gl.issueBoards.getBoardSortableDefaultOptions({
       disabled: this.disabled,
       group: 'boards',
       draggable: '.is-draggable',
       handle: '.js-board-handle',
-      onEnd: (e) => {
+      onEnd: e => {
         gl.issueBoards.onEnd();
 
         if (e.newIndex !== undefined && e.oldIndex !== e.newIndex) {
@@ -114,14 +121,15 @@ gl.issueBoards.Board = Vue.extend({
             Store.moveList(list, order);
           });
         }
-      }
+      },
     });
 
     this.sortable = Sortable.create(this.$el.parentNode, this.sortableOptions);
   },
   created() {
     if (this.list.isExpandable && AccessorUtilities.isLocalStorageAccessSafe()) {
-      const isCollapsed = localStorage.getItem(`boards.${this.boardId}.${this.list.type}.expanded`) === 'false';
+      const isCollapsed =
+        localStorage.getItem(`boards.${this.boardId}.${this.list.type}.expanded`) === 'false';
 
       this.list.isExpanded = !isCollapsed;
     }