From c8b8fb83dc1b9a73fcdadc0eeba4dc5e1a77580a Mon Sep 17 00:00:00 2001
From: Martin Filser <github-wekan@linux-email.de>
Date: Mon, 25 Oct 2021 12:32:03 +0200
Subject: [PATCH] Labels drag/drop

---
 client/components/cards/labels.jade |  6 ++-
 client/components/cards/labels.js   | 59 +++++++++++++++++++++++++----
 client/components/cards/labels.styl |  3 ++
 models/boards.js                    | 14 +++++++
 4 files changed, 72 insertions(+), 10 deletions(-)

diff --git a/client/components/cards/labels.jade b/client/components/cards/labels.jade
index 48e28b348..b5a5c0c1d 100644
--- a/client/components/cards/labels.jade
+++ b/client/components/cards/labels.jade
@@ -27,9 +27,11 @@ template(name="deleteLabelPopup")
 template(name="cardLabelsPopup")
   ul.edit-labels-pop-over
     each board.labels
-      li
+      li.js-card-label-item
         a.card-label-edit-button.fa.fa-pencil.js-edit-label
-        span.card-label.card-label-selectable.js-select-label(class="card-label-{{color}}"
+        if isMiniScreenOrShowDesktopDragHandles
+          span.fa.label-handle(class="fa-arrows" title="{{_ 'dragLabel'}}")
+        span.card-label.card-label-selectable.js-select-label.card-label-wrapper(class="card-label-{{color}}"
           class="{{# if isLabelSelected ../_id }}active{{/if}}")
             +viewer
               = name
diff --git a/client/components/cards/labels.js b/client/components/cards/labels.js
index cf86fa105..f84960fa4 100644
--- a/client/components/cards/labels.js
+++ b/client/components/cards/labels.js
@@ -39,15 +39,58 @@ Template.createLabelPopup.helpers({
   },
 });
 
-Template.cardLabelsPopup.events({
-  'click .js-select-label'(event) {
-    const card = Utils.getCurrentCard();
-    const labelId = this._id;
-    card.toggleLabel(labelId);
-    event.preventDefault();
+BlazeComponent.extendComponent({
+  onRendered() {
+    const itemsSelector = 'li.js-card-label-item:not(.placeholder)';
+    const $labels = this.$('.edit-labels-pop-over');
+
+    $labels.sortable({
+      connectWith: '.edit-labels-pop-over',
+      tolerance: 'pointer',
+      appendTo: '.edit-labels-pop-over',
+      helper: 'clone',
+      distance: 7,
+      items: itemsSelector,
+      placeholder: 'card-label-wrapper placeholder',
+      start(evt, ui) {
+        ui.helper.css('z-index', 1000);
+        ui.placeholder.height(ui.helper.height());
+        EscapeActions.clickExecute(evt.target, 'inlinedForm');
+      },
+      stop(evt, ui) {
+        const newLabelOrderOnlyIds = ui.item.parent().children().toArray().map(_element => Blaze.getData(_element)._id)
+        const card = Blaze.getData(this);
+        card.board().setNewLabelOrder(newLabelOrderOnlyIds);
+      },
+    });
+    Utils.enableClickOnTouch(itemsSelector);
+
+    // Disable drag-dropping if the current user is not a board member or is comment only
+    this.autorun(() => {
+      if (Utils.isMiniScreen()) {
+        $labels.sortable({
+          handle: '.label-handle',
+        });
+      }
+    });
   },
-  'click .js-edit-label': Popup.open('editLabel'),
-  'click .js-add-label': Popup.open('createLabel'),
+  events() {
+    return [
+      {
+        'click .js-select-label'(event) {
+          const card = Utils.getCurrentCard();
+          const labelId = this._id;
+          card.toggleLabel(labelId);
+          event.preventDefault();
+        },
+        'click .js-edit-label': Popup.open('editLabel'),
+        'click .js-add-label': Popup.open('createLabel'),
+      }
+    ];
+  }
+}).register('cardLabelsPopup');
+
+Template.cardLabelsPopup.events({
 });
 
 Template.formLabel.events({
diff --git a/client/components/cards/labels.styl b/client/components/cards/labels.styl
index 78363e5de..38aea559d 100644
--- a/client/components/cards/labels.styl
+++ b/client/components/cards/labels.styl
@@ -222,3 +222,6 @@
   &:hover
     background: #dbdbdb
 
+ul.edit-labels-pop-over
+  span.fa.label-handle
+    padding-right: 10px;
diff --git a/models/boards.js b/models/boards.js
index 43377bfb8..ecc0d28b6 100644
--- a/models/boards.js
+++ b/models/boards.js
@@ -901,6 +901,20 @@ Boards.helpers({
     return _id;
   },
 
+  /** sets the new label order
+   * @param newLabelOrderOnlyIds new order array of _id, e.g. Array(4) [ "FvtD34", "PAEgDP", "LjRBxH", "YJ8sZz" ]
+   */
+  setNewLabelOrder(newLabelOrderOnlyIds) {
+    if (this.labels.length == newLabelOrderOnlyIds.length) {
+      if (this.labels.every(_label => newLabelOrderOnlyIds.indexOf(_label._id) >= 0)) {
+        const newLabels = _.sortBy(this.labels, _label => newLabelOrderOnlyIds.indexOf(_label._id));
+        if (this.labels.length == newLabels.length) {
+          Boards.direct.update(this._id, {$set: {labels: newLabels}});
+        }
+      }
+    }
+  },
+
   searchBoards(term) {
     check(term, Match.OneOf(String, null, undefined));