From eb9d52a2b93922028addeed76cf2c88e96e7161c Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Mon, 11 Dec 2023 16:48:50 +0100
Subject: [PATCH] Fix drag and drop on mobile

---
 CHANGELOG.md                                      |  6 ++++++
 src/components/KeyResultLinkCard.vue              | 15 +++++++++++++++
 src/components/KpiWidgetGroup.vue                 |  7 ++++++-
 src/components/panes/ObjectivePane.vue            |  2 ++
 .../widgets/WidgetKpiCard/WidgetKpiCard.vue       |  1 +
 5 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index cdf899686..6636bf975 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,12 @@ All notable changes to this project will be documented in this file. The format
 - "Lifting" objectives are now also allowed during the creation flow, not only
   when edited.
 
+### Changed
+
+- Drag and drop ordering of measurements and key results are now triggered by
+  using a specific handle (the "drag icon"). This prevents accidental dragging,
+  especially on mobile devices.
+
 ### Breaking changes
 
 - The API endpoint for listing KPIs (measurements) now uses cursor-based
diff --git a/src/components/KeyResultLinkCard.vue b/src/components/KeyResultLinkCard.vue
index 697ac34e4..0c7d21756 100644
--- a/src/components/KeyResultLinkCard.vue
+++ b/src/components/KeyResultLinkCard.vue
@@ -15,6 +15,7 @@
           <span class="key-result-link-card__title pkt-txt-14">
             {{ title }}
           </span>
+          <pkt-icon v-if="draggable" class="drag-icon" name="drag" />
         </div>
 
         <div>
@@ -56,6 +57,10 @@ export default {
       required: false,
       default: null,
     },
+    draggable: {
+      type: Boolean,
+      default: false,
+    },
     active: {
       type: Boolean,
       default: false,
@@ -95,6 +100,16 @@ export default {
     justify-content: space-between;
   }
 
+  .drag-icon {
+    --fg-color: var(--color-grayscale-30);
+    cursor: move;
+
+    ::v-deep svg {
+      height: 0.875rem;
+      min-height: 0.875rem;
+    }
+  }
+
   .item-tag {
     display: flex;
     justify-content: end;
diff --git a/src/components/KpiWidgetGroup.vue b/src/components/KpiWidgetGroup.vue
index 4e9383810..bf348f619 100644
--- a/src/components/KpiWidgetGroup.vue
+++ b/src/components/KpiWidgetGroup.vue
@@ -24,7 +24,12 @@
         </pkt-button>
       </template>
     </div>
-    <draggable v-if="hasEditRights" v-model="orderedKpis" animation="300">
+    <draggable
+      v-if="hasEditRights"
+      v-model="orderedKpis"
+      animation="300"
+      handle=".drag-icon"
+    >
       <transition-group class="kpi-widget-group__kpis">
         <kpi-widget-group-link
           v-for="kpi in orderedKpis"
diff --git a/src/components/panes/ObjectivePane.vue b/src/components/panes/ObjectivePane.vue
index 617bfe2e2..e07b92671 100644
--- a/src/components/panes/ObjectivePane.vue
+++ b/src/components/panes/ObjectivePane.vue
@@ -60,6 +60,7 @@
         v-model="orderedKeyResults"
         class="objective-pane__key-results-list"
         animation="300"
+        handle=".drag-icon"
       >
         <transition-group>
           <key-result-link-card
@@ -72,6 +73,7 @@
             :title="keyResult.name"
             :progression="keyResult.progression"
             :owner="keyResult.parent?.name ? keyResult.parent : null"
+            :draggable="true"
             :active="activeKeyResult && activeKeyResult.id === keyResult.id"
           />
         </transition-group>
diff --git a/src/components/widgets/WidgetKpiCard/WidgetKpiCard.vue b/src/components/widgets/WidgetKpiCard/WidgetKpiCard.vue
index cc43a0c92..71a06c5eb 100644
--- a/src/components/widgets/WidgetKpiCard/WidgetKpiCard.vue
+++ b/src/components/widgets/WidgetKpiCard/WidgetKpiCard.vue
@@ -170,6 +170,7 @@ export default {
 
   .drag-icon {
     --fg-color: var(--color-grayscale-30);
+    cursor: move;
 
     ::v-deep svg {
       height: 0.875rem;