refactor(Queue): Replaced vue draggable with sortablejs

frontend/package-lock.json

@@ -19,6 +19,8 @@
         "lofig": "^1.3.4",
         "marked": "^4.0.16",
         "normalize.css": "^8.0.1",
+        "sortablejs": "^1.15.0",
+        "sortablejs-vue3": "^1.0.3",
         "toasters": "^2.3.1",
         "typescript": "^4.7.4",
         "vite": "^2.9.12",
@@ -751,36 +753,36 @@
       }
     },
     "node_modules/@vue/compiler-core": {
-      "version": "3.2.36",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.36.tgz",
-      "integrity": "sha512-bbyZM5hvBicv0PW3KUfVi+x3ylHnfKG7DOn5wM+f2OztTzTjLEyBb/5yrarIYpmnGitVGbjZqDbODyW4iK8hqw==",
+      "version": "3.2.37",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.37.tgz",
+      "integrity": "sha512-81KhEjo7YAOh0vQJoSmAD68wLfYqJvoiD4ulyedzF+OEk/bk6/hx3fTNVfuzugIIaTrOx4PGx6pAiBRe5e9Zmg==",
       "dependencies": {
         "@babel/parser": "^7.16.4",
-        "@vue/shared": "3.2.36",
+        "@vue/shared": "3.2.37",
         "estree-walker": "^2.0.2",
         "source-map": "^0.6.1"
       }
     },
     "node_modules/@vue/compiler-dom": {
-      "version": "3.2.36",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.36.tgz",
-      "integrity": "sha512-tcOTAOiW4s24QLnq+ON6J+GRONXJ+A/mqKCORi0LSlIh8XQlNnlm24y8xIL8la+ZDgkdbjarQ9ZqYSvEja6gVA==",
+      "version": "3.2.37",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.37.tgz",
+      "integrity": "sha512-yxJLH167fucHKxaqXpYk7x8z7mMEnXOw3G2q62FTkmsvNxu4FQSu5+3UMb+L7fjKa26DEzhrmCxAgFLLIzVfqQ==",
       "dependencies": {
-        "@vue/compiler-core": "3.2.36",
-        "@vue/shared": "3.2.36"
+        "@vue/compiler-core": "3.2.37",
+        "@vue/shared": "3.2.37"
       }
     },
     "node_modules/@vue/compiler-sfc": {
-      "version": "3.2.36",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.36.tgz",
-      "integrity": "sha512-AvGb4bTj4W8uQ4BqaSxo7UwTEqX5utdRSMyHy58OragWlt8nEACQ9mIeQh3K4di4/SX+41+pJrLIY01lHAOFOA==",
+      "version": "3.2.37",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.37.tgz",
+      "integrity": "sha512-+7i/2+9LYlpqDv+KTtWhOZH+pa8/HnX/905MdVmAcI/mPQOBwkHHIzrsEsucyOIZQYMkXUiTkmZq5am/NyXKkg==",
       "dependencies": {
         "@babel/parser": "^7.16.4",
-        "@vue/compiler-core": "3.2.36",
-        "@vue/compiler-dom": "3.2.36",
-        "@vue/compiler-ssr": "3.2.36",
-        "@vue/reactivity-transform": "3.2.36",
-        "@vue/shared": "3.2.36",
+        "@vue/compiler-core": "3.2.37",
+        "@vue/compiler-dom": "3.2.37",
+        "@vue/compiler-ssr": "3.2.37",
+        "@vue/reactivity-transform": "3.2.37",
+        "@vue/shared": "3.2.37",
         "estree-walker": "^2.0.2",
         "magic-string": "^0.25.7",
         "postcss": "^8.1.10",
@@ -788,12 +790,12 @@
       }
     },
     "node_modules/@vue/compiler-ssr": {
-      "version": "3.2.36",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.36.tgz",
-      "integrity": "sha512-+KugInUFRvOxEdLkZwE+W43BqHyhBh0jpYXhmqw1xGq2dmE6J9eZ8UUSOKNhdHtQ/iNLWWeK/wPZkVLUf3YGaw==",
+      "version": "3.2.37",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.37.tgz",
+      "integrity": "sha512-7mQJD7HdXxQjktmsWp/J67lThEIcxLemz1Vb5I6rYJHR5vI+lON3nPGOH3ubmbvYGt8xEUaAr1j7/tIFWiEOqw==",
       "dependencies": {
-        "@vue/compiler-dom": "3.2.36",
-        "@vue/shared": "3.2.36"
+        "@vue/compiler-dom": "3.2.37",
+        "@vue/shared": "3.2.37"
       }
     },
     "node_modules/@vue/devtools-api": {
@@ -802,60 +804,60 @@
       "integrity": "sha512-IiA0SvDrJEgXvVxjNkHPFfDx6SXw0b/TUkqMcDZWNg9fnCAHbTpoo59YfJ9QLFkwa3raau5vSlRVzMSLDnfdtQ=="
     },
     "node_modules/@vue/reactivity": {
-      "version": "3.2.36",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.36.tgz",
-      "integrity": "sha512-c2qvopo0crh9A4GXi2/2kfGYMxsJW4tVILrqRPydVGZHhq0fnzy6qmclWOhBFckEhmyxmpHpdJtIRYGeKcuhnA==",
+      "version": "3.2.37",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.37.tgz",
+      "integrity": "sha512-/7WRafBOshOc6m3F7plwzPeCu/RCVv9uMpOwa/5PiY1Zz+WLVRWiy0MYKwmg19KBdGtFWsmZ4cD+LOdVPcs52A==",
       "dependencies": {
-        "@vue/shared": "3.2.36"
+        "@vue/shared": "3.2.37"
       }
     },
     "node_modules/@vue/reactivity-transform": {
-      "version": "3.2.36",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.36.tgz",
-      "integrity": "sha512-Jk5o2BhpODC9XTA7o4EL8hSJ4JyrFWErLtClG3NH8wDS7ri9jBDWxI7/549T7JY9uilKsaNM+4pJASLj5dtRwA==",
+      "version": "3.2.37",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.37.tgz",
+      "integrity": "sha512-IWopkKEb+8qpu/1eMKVeXrK0NLw9HicGviJzhJDEyfxTR9e1WtpnnbYkJWurX6WwoFP0sz10xQg8yL8lgskAZg==",
       "dependencies": {
         "@babel/parser": "^7.16.4",
-        "@vue/compiler-core": "3.2.36",
-        "@vue/shared": "3.2.36",
+        "@vue/compiler-core": "3.2.37",
+        "@vue/shared": "3.2.37",
         "estree-walker": "^2.0.2",
         "magic-string": "^0.25.7"
       }
     },
     "node_modules/@vue/runtime-core": {
-      "version": "3.2.36",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.36.tgz",
-      "integrity": "sha512-PTWBD+Lub+1U3/KhbCExrfxyS14hstLX+cBboxVHaz+kXoiDLNDEYAovPtxeTutbqtClIXtft+wcGdC+FUQ9qQ==",
+      "version": "3.2.37",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.37.tgz",
+      "integrity": "sha512-JPcd9kFyEdXLl/i0ClS7lwgcs0QpUAWj+SKX2ZC3ANKi1U4DOtiEr6cRqFXsPwY5u1L9fAjkinIdB8Rz3FoYNQ==",
       "dependencies": {
-        "@vue/reactivity": "3.2.36",
-        "@vue/shared": "3.2.36"
+        "@vue/reactivity": "3.2.37",
+        "@vue/shared": "3.2.37"
       }
     },
     "node_modules/@vue/runtime-dom": {
-      "version": "3.2.36",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.36.tgz",
-      "integrity": "sha512-gYPYblm7QXHVuBohqNRRT7Wez0f2Mx2D40rb4fleehrJU9CnkjG0phhcGEZFfGwCmHZRqBCRgbFWE98bPULqkg==",
+      "version": "3.2.37",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.37.tgz",
+      "integrity": "sha512-HimKdh9BepShW6YozwRKAYjYQWg9mQn63RGEiSswMbW+ssIht1MILYlVGkAGGQbkhSh31PCdoUcfiu4apXJoPw==",
       "dependencies": {
-        "@vue/runtime-core": "3.2.36",
-        "@vue/shared": "3.2.36",
+        "@vue/runtime-core": "3.2.37",
+        "@vue/shared": "3.2.37",
         "csstype": "^2.6.8"
       }
     },
     "node_modules/@vue/server-renderer": {
-      "version": "3.2.36",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.36.tgz",
-      "integrity": "sha512-uZE0+jfye6yYXWvAQYeHZv+f50sRryvy16uiqzk3jn8hEY8zTjI+rzlmZSGoE915k+W/Ol9XSw6vxOUD8dGkUg==",
+      "version": "3.2.37",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.37.tgz",
+      "integrity": "sha512-kLITEJvaYgZQ2h47hIzPh2K3jG8c1zCVbp/o/bzQOyvzaKiCquKS7AaioPI28GNxIsE/zSx+EwWYsNxDCX95MA==",
       "dependencies": {
-        "@vue/compiler-ssr": "3.2.36",
-        "@vue/shared": "3.2.36"
+        "@vue/compiler-ssr": "3.2.37",
+        "@vue/shared": "3.2.37"
       },
       "peerDependencies": {
-        "vue": "3.2.36"
+        "vue": "3.2.37"
       }
     },
     "node_modules/@vue/shared": {
-      "version": "3.2.36",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.36.tgz",
-      "integrity": "sha512-JtB41wXl7Au3+Nl3gD16Cfpj7k/6aCroZ6BbOiCMFCMvrOpkg/qQUXTso2XowaNqBbnkuGHurLAqkLBxNGc1hQ=="
+      "version": "3.2.37",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.37.tgz",
+      "integrity": "sha512-4rSJemR2NQIo9Klm1vabqWjD8rs/ZaJSzMxkMNeJS6lHiUjjUeYFbooN19NgFjztubEKh3WlZUeOLVdbbUWHsw=="
     },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.11.1",
@@ -4072,9 +4074,26 @@
       }
     },
     "node_modules/sortablejs": {
-      "version": "1.14.0",
-      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.14.0.tgz",
-      "integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w=="
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.15.0.tgz",
+      "integrity": "sha512-bv9qgVMjUMf89wAvM6AxVvS/4MX3sPeN0+agqShejLU5z5GX4C75ow1O2e5k4L6XItUyAK3gH6AxSbXrOM5e8w=="
+    },
+    "node_modules/sortablejs-vue3": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/sortablejs-vue3/-/sortablejs-vue3-1.0.3.tgz",
+      "integrity": "sha512-nF7pW2yn7xzXB6p4WPghVdvsMJiTJOLLNnXh2Q44bp0AD25TzdBuYFI6CUjmFXEcRGOtkp1/vhzImQstLXv3AQ==",
+      "dependencies": {
+        "sortablejs": "^1.15.0",
+        "vue": "^3.2.37"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/MaxLeiter/"
+      },
+      "peerDependencies": {
+        "sortablejs": "^1.15.0",
+        "vue": "^3.2.25"
+      }
     },
     "node_modules/source-map": {
       "version": "0.6.1",
@@ -4454,15 +4473,15 @@
       }
     },
     "node_modules/vue": {
-      "version": "3.2.36",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.36.tgz",
-      "integrity": "sha512-5yTXmrE6gW8IQgttzHW5bfBiFA6mx35ZXHjGLDmKYzW6MMmYvCwuKybANRepwkMYeXw2v1buGg3/lPICY5YlZw==",
+      "version": "3.2.37",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.37.tgz",
+      "integrity": "sha512-bOKEZxrm8Eh+fveCqS1/NkG/n6aMidsI6hahas7pa0w/l7jkbssJVsRhVDs07IdDq7h9KHswZOgItnwJAgtVtQ==",
       "dependencies": {
-        "@vue/compiler-dom": "3.2.36",
-        "@vue/compiler-sfc": "3.2.36",
-        "@vue/runtime-dom": "3.2.36",
-        "@vue/server-renderer": "3.2.36",
-        "@vue/shared": "3.2.36"
+        "@vue/compiler-dom": "3.2.37",
+        "@vue/compiler-sfc": "3.2.37",
+        "@vue/runtime-dom": "3.2.37",
+        "@vue/server-renderer": "3.2.37",
+        "@vue/shared": "3.2.37"
       }
     },
     "node_modules/vue-chartjs": {
@@ -4677,6 +4696,11 @@
         "vue": "^3.0.1"
       }
     },
+    "node_modules/vuedraggable/node_modules/sortablejs": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.14.0.tgz",
+      "integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w=="
+    },
     "node_modules/vuex": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.2.tgz",
@@ -5362,36 +5386,36 @@
       "requires": {}
     },
     "@vue/compiler-core": {
-      "version": "3.2.36",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.36.tgz",
-      "integrity": "sha512-bbyZM5hvBicv0PW3KUfVi+x3ylHnfKG7DOn5wM+f2OztTzTjLEyBb/5yrarIYpmnGitVGbjZqDbODyW4iK8hqw==",
+      "version": "3.2.37",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.37.tgz",
+      "integrity": "sha512-81KhEjo7YAOh0vQJoSmAD68wLfYqJvoiD4ulyedzF+OEk/bk6/hx3fTNVfuzugIIaTrOx4PGx6pAiBRe5e9Zmg==",
       "requires": {
         "@babel/parser": "^7.16.4",
-        "@vue/shared": "3.2.36",
+        "@vue/shared": "3.2.37",
         "estree-walker": "^2.0.2",
         "source-map": "^0.6.1"
       }
     },
     "@vue/compiler-dom": {
-      "version": "3.2.36",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.36.tgz",
-      "integrity": "sha512-tcOTAOiW4s24QLnq+ON6J+GRONXJ+A/mqKCORi0LSlIh8XQlNnlm24y8xIL8la+ZDgkdbjarQ9ZqYSvEja6gVA==",
+      "version": "3.2.37",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.37.tgz",
+      "integrity": "sha512-yxJLH167fucHKxaqXpYk7x8z7mMEnXOw3G2q62FTkmsvNxu4FQSu5+3UMb+L7fjKa26DEzhrmCxAgFLLIzVfqQ==",
       "requires": {
-        "@vue/compiler-core": "3.2.36",
-        "@vue/shared": "3.2.36"
+        "@vue/compiler-core": "3.2.37",
+        "@vue/shared": "3.2.37"
       }
     },
     "@vue/compiler-sfc": {
-      "version": "3.2.36",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.36.tgz",
-      "integrity": "sha512-AvGb4bTj4W8uQ4BqaSxo7UwTEqX5utdRSMyHy58OragWlt8nEACQ9mIeQh3K4di4/SX+41+pJrLIY01lHAOFOA==",
+      "version": "3.2.37",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.37.tgz",
+      "integrity": "sha512-+7i/2+9LYlpqDv+KTtWhOZH+pa8/HnX/905MdVmAcI/mPQOBwkHHIzrsEsucyOIZQYMkXUiTkmZq5am/NyXKkg==",
       "requires": {
         "@babel/parser": "^7.16.4",
-        "@vue/compiler-core": "3.2.36",
-        "@vue/compiler-dom": "3.2.36",
-        "@vue/compiler-ssr": "3.2.36",
-        "@vue/reactivity-transform": "3.2.36",
-        "@vue/shared": "3.2.36",
+        "@vue/compiler-core": "3.2.37",
+        "@vue/compiler-dom": "3.2.37",
+        "@vue/compiler-ssr": "3.2.37",
+        "@vue/reactivity-transform": "3.2.37",
+        "@vue/shared": "3.2.37",
         "estree-walker": "^2.0.2",
         "magic-string": "^0.25.7",
         "postcss": "^8.1.10",
@@ -5399,12 +5423,12 @@
       }
     },
     "@vue/compiler-ssr": {
-      "version": "3.2.36",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.36.tgz",
-      "integrity": "sha512-+KugInUFRvOxEdLkZwE+W43BqHyhBh0jpYXhmqw1xGq2dmE6J9eZ8UUSOKNhdHtQ/iNLWWeK/wPZkVLUf3YGaw==",
+      "version": "3.2.37",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.37.tgz",
+      "integrity": "sha512-7mQJD7HdXxQjktmsWp/J67lThEIcxLemz1Vb5I6rYJHR5vI+lON3nPGOH3ubmbvYGt8xEUaAr1j7/tIFWiEOqw==",
       "requires": {
-        "@vue/compiler-dom": "3.2.36",
-        "@vue/shared": "3.2.36"
+        "@vue/compiler-dom": "3.2.37",
+        "@vue/shared": "3.2.37"
       }
     },
     "@vue/devtools-api": {
@@ -5413,57 +5437,57 @@
       "integrity": "sha512-IiA0SvDrJEgXvVxjNkHPFfDx6SXw0b/TUkqMcDZWNg9fnCAHbTpoo59YfJ9QLFkwa3raau5vSlRVzMSLDnfdtQ=="
     },
     "@vue/reactivity": {
-      "version": "3.2.36",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.36.tgz",
-      "integrity": "sha512-c2qvopo0crh9A4GXi2/2kfGYMxsJW4tVILrqRPydVGZHhq0fnzy6qmclWOhBFckEhmyxmpHpdJtIRYGeKcuhnA==",
+      "version": "3.2.37",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.37.tgz",
+      "integrity": "sha512-/7WRafBOshOc6m3F7plwzPeCu/RCVv9uMpOwa/5PiY1Zz+WLVRWiy0MYKwmg19KBdGtFWsmZ4cD+LOdVPcs52A==",
       "requires": {
-        "@vue/shared": "3.2.36"
+        "@vue/shared": "3.2.37"
       }
     },
     "@vue/reactivity-transform": {
-      "version": "3.2.36",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.36.tgz",
-      "integrity": "sha512-Jk5o2BhpODC9XTA7o4EL8hSJ4JyrFWErLtClG3NH8wDS7ri9jBDWxI7/549T7JY9uilKsaNM+4pJASLj5dtRwA==",
+      "version": "3.2.37",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.37.tgz",
+      "integrity": "sha512-IWopkKEb+8qpu/1eMKVeXrK0NLw9HicGviJzhJDEyfxTR9e1WtpnnbYkJWurX6WwoFP0sz10xQg8yL8lgskAZg==",
       "requires": {
         "@babel/parser": "^7.16.4",
-        "@vue/compiler-core": "3.2.36",
-        "@vue/shared": "3.2.36",
+        "@vue/compiler-core": "3.2.37",
+        "@vue/shared": "3.2.37",
         "estree-walker": "^2.0.2",
         "magic-string": "^0.25.7"
       }
     },
     "@vue/runtime-core": {
-      "version": "3.2.36",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.36.tgz",
-      "integrity": "sha512-PTWBD+Lub+1U3/KhbCExrfxyS14hstLX+cBboxVHaz+kXoiDLNDEYAovPtxeTutbqtClIXtft+wcGdC+FUQ9qQ==",
+      "version": "3.2.37",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.37.tgz",
+      "integrity": "sha512-JPcd9kFyEdXLl/i0ClS7lwgcs0QpUAWj+SKX2ZC3ANKi1U4DOtiEr6cRqFXsPwY5u1L9fAjkinIdB8Rz3FoYNQ==",
       "requires": {
-        "@vue/reactivity": "3.2.36",
-        "@vue/shared": "3.2.36"
+        "@vue/reactivity": "3.2.37",
+        "@vue/shared": "3.2.37"
       }
     },
     "@vue/runtime-dom": {
-      "version": "3.2.36",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.36.tgz",
-      "integrity": "sha512-gYPYblm7QXHVuBohqNRRT7Wez0f2Mx2D40rb4fleehrJU9CnkjG0phhcGEZFfGwCmHZRqBCRgbFWE98bPULqkg==",
+      "version": "3.2.37",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.37.tgz",
+      "integrity": "sha512-HimKdh9BepShW6YozwRKAYjYQWg9mQn63RGEiSswMbW+ssIht1MILYlVGkAGGQbkhSh31PCdoUcfiu4apXJoPw==",
       "requires": {
-        "@vue/runtime-core": "3.2.36",
-        "@vue/shared": "3.2.36",
+        "@vue/runtime-core": "3.2.37",
+        "@vue/shared": "3.2.37",
         "csstype": "^2.6.8"
       }
     },
     "@vue/server-renderer": {
-      "version": "3.2.36",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.36.tgz",
-      "integrity": "sha512-uZE0+jfye6yYXWvAQYeHZv+f50sRryvy16uiqzk3jn8hEY8zTjI+rzlmZSGoE915k+W/Ol9XSw6vxOUD8dGkUg==",
+      "version": "3.2.37",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.37.tgz",
+      "integrity": "sha512-kLITEJvaYgZQ2h47hIzPh2K3jG8c1zCVbp/o/bzQOyvzaKiCquKS7AaioPI28GNxIsE/zSx+EwWYsNxDCX95MA==",
       "requires": {
-        "@vue/compiler-ssr": "3.2.36",
-        "@vue/shared": "3.2.36"
+        "@vue/compiler-ssr": "3.2.37",
+        "@vue/shared": "3.2.37"
       }
     },
     "@vue/shared": {
-      "version": "3.2.36",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.36.tgz",
-      "integrity": "sha512-JtB41wXl7Au3+Nl3gD16Cfpj7k/6aCroZ6BbOiCMFCMvrOpkg/qQUXTso2XowaNqBbnkuGHurLAqkLBxNGc1hQ=="
+      "version": "3.2.37",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.37.tgz",
+      "integrity": "sha512-4rSJemR2NQIo9Klm1vabqWjD8rs/ZaJSzMxkMNeJS6lHiUjjUeYFbooN19NgFjztubEKh3WlZUeOLVdbbUWHsw=="
     },
     "@webassemblyjs/ast": {
       "version": "1.11.1",
@@ -7738,9 +7762,18 @@
       }
     },
     "sortablejs": {
-      "version": "1.14.0",
-      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.14.0.tgz",
-      "integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w=="
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.15.0.tgz",
+      "integrity": "sha512-bv9qgVMjUMf89wAvM6AxVvS/4MX3sPeN0+agqShejLU5z5GX4C75ow1O2e5k4L6XItUyAK3gH6AxSbXrOM5e8w=="
+    },
+    "sortablejs-vue3": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/sortablejs-vue3/-/sortablejs-vue3-1.0.3.tgz",
+      "integrity": "sha512-nF7pW2yn7xzXB6p4WPghVdvsMJiTJOLLNnXh2Q44bp0AD25TzdBuYFI6CUjmFXEcRGOtkp1/vhzImQstLXv3AQ==",
+      "requires": {
+        "sortablejs": "^1.15.0",
+        "vue": "^3.2.37"
+      }
     },
     "source-map": {
       "version": "0.6.1",
@@ -8004,15 +8037,15 @@
       }
     },
     "vue": {
-      "version": "3.2.36",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.36.tgz",
-      "integrity": "sha512-5yTXmrE6gW8IQgttzHW5bfBiFA6mx35ZXHjGLDmKYzW6MMmYvCwuKybANRepwkMYeXw2v1buGg3/lPICY5YlZw==",
+      "version": "3.2.37",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.37.tgz",
+      "integrity": "sha512-bOKEZxrm8Eh+fveCqS1/NkG/n6aMidsI6hahas7pa0w/l7jkbssJVsRhVDs07IdDq7h9KHswZOgItnwJAgtVtQ==",
       "requires": {
-        "@vue/compiler-dom": "3.2.36",
-        "@vue/compiler-sfc": "3.2.36",
-        "@vue/runtime-dom": "3.2.36",
-        "@vue/server-renderer": "3.2.36",
-        "@vue/shared": "3.2.36"
+        "@vue/compiler-dom": "3.2.37",
+        "@vue/compiler-sfc": "3.2.37",
+        "@vue/runtime-dom": "3.2.37",
+        "@vue/server-renderer": "3.2.37",
+        "@vue/shared": "3.2.37"
       }
     },
     "vue-chartjs": {
@@ -8158,6 +8191,13 @@
       "integrity": "sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==",
       "requires": {
         "sortablejs": "1.14.0"
+      },
+      "dependencies": {
+        "sortablejs": {
+          "version": "1.14.0",
+          "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.14.0.tgz",
+          "integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w=="
+        }
       }
     },
     "vuex": {

frontend/package.json

@@ -43,6 +43,8 @@
     "lofig": "^1.3.4",
     "marked": "^4.0.16",
     "normalize.css": "^8.0.1",
+    "sortablejs": "^1.15.0",
+    "sortablejs-vue3": "^1.0.3",
     "toasters": "^2.3.1",
     "typescript": "^4.7.4",
     "vite": "^2.9.12",
@@ -56,4 +58,4 @@
     "vuedraggable": "^4.1.0",
     "vuex": "^4.0.2"
   }
-}
+}

frontend/src/components/Queue.vue

@@ -2,7 +2,7 @@
 // TODO
 import { useStore } from "vuex";
 import { defineAsyncComponent, ref, computed, onUpdated } from "vue";
-import draggable from "vuedraggable";
+import { Sortable } from "sortablejs-vue3";
 import Toast from "toasters";
 
 const SongItem = defineAsyncComponent(
@@ -92,50 +92,44 @@ const removeFromQueue = youtubeId => {
 	);
 };
 
-const repositionSongInQueue = ({ moved }) => {
-	if (!moved) return; // we only need to update when song is moved
-
+const repositionSongInQueue = ({ oldIndex, newIndex }) => {
+	if (oldIndex === newIndex) return; // we only need to update when song is moved
+	const song = queue.value[oldIndex];
 	socket.dispatch(
 		"stations.repositionSongInQueue",
 		station.value._id,
 		{
-			...moved.element,
-			oldIndex: moved.oldIndex,
-			newIndex: moved.newIndex
+			...song,
+			oldIndex,
+			newIndex
 		},
 		res => {
 			new Toast({ content: res.message, timeout: 4000 });
 			if (res.status !== "success")
 				repositionSongInList({
-					...moved.element,
-					newIndex: moved.oldIndex,
-					oldIndex: moved.newIndex
+					...song,
+					oldIndex,
+					newIndex
 				});
 		}
 	);
 };
 
-const moveSongToTop = (song, index) => {
+const moveSongToTop = index => {
 	// this.$refs[`song-item-${index}`].$refs.songActions.tippy.hide();
 
 	repositionSongInQueue({
-		moved: {
-			element: song,
-			oldIndex: index,
-			newIndex: 0
-		}
+		oldIndex: index,
+		newIndex: 0
 	});
 };
 
-const moveSongToBottom = (song, index) => {
+const moveSongToBottom = index => {
 	// this.$refs[`song-item-${index}`].$refs.songActions.tippy.hide();
 
 	repositionSongInQueue({
-		moved: {
-			element: song,
-			oldIndex: index,
-			newIndex: queue.value.length
-		}
+		oldIndex: index,
+		newIndex: queue.value.length
 	});
 };
 
@@ -157,16 +151,16 @@ onUpdated(() => {
 				'scrollable-list': true
 			}"
 		>
-			<draggable
+			<Sortable
 				:component-data="{
 					name: !drag ? 'draggable-list-transition' : null
 				}"
-				v-model="queue"
+				:list="queue"
 				item-key="_id"
-				v-bind="dragOptions"
+				:options="dragOptions"
 				@start="drag = true"
 				@end="drag = false"
-				@change="repositionSongInQueue"
+				@update="repositionSongInQueue"
 			>
 				<template #item="{ element, index }">
 					<song-item
@@ -197,14 +191,14 @@ onUpdated(() => {
 							<i
 								class="material-icons"
 								v-if="index > 0"
-								@click="moveSongToTop(element, index)"
+								@click="moveSongToTop(index)"
 								content="Move to top of Queue"
 								v-tippy
 								>vertical_align_top</i
 							>
 							<i
 								v-if="queue.length - 1 !== index"
-								@click="moveSongToBottom(element, index)"
+								@click="moveSongToBottom(index)"
 								class="material-icons"
 								content="Move to bottom of Queue"
 								v-tippy
@@ -213,7 +207,7 @@ onUpdated(() => {
 						</template>
 					</song-item>
 				</template>
-			</draggable>
+			</Sortable>
 		</div>
 		<p class="nothing-here-text has-text-centered" v-else>
 			There are no songs currently queued