From fdb5ff9ec070250ed02b0be910901961fc01abb4 Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Thu, 24 Oct 2024 11:24:42 -0500
Subject: [PATCH] fix: Add Touch Delay to Draggable on Touch Pads (#4440)

---
 frontend/components/Domain/QueryFilterBuilder.vue      |  2 ++
 .../RecipePageParts/RecipePageIngredientEditor.vue     |  2 ++
 .../RecipePageParts/RecipePageInstructions.vue         |  2 ++
 frontend/pages/g/_groupSlug/cookbooks/index.vue        |  9 ++++++++-
 .../pages/g/_groupSlug/r/_slug/ingredient-parser.vue   |  2 ++
 frontend/pages/household/mealplan/planner/edit.vue     |  2 ++
 frontend/pages/shopping-lists/_id.vue                  | 10 +++++++++-
 7 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/frontend/components/Domain/QueryFilterBuilder.vue b/frontend/components/Domain/QueryFilterBuilder.vue
index d5e4fc11bed..9f4e3198e93 100644
--- a/frontend/components/Domain/QueryFilterBuilder.vue
+++ b/frontend/components/Domain/QueryFilterBuilder.vue
@@ -5,6 +5,8 @@
         <draggable
           :value="fields"
           handle=".handle"
+          delay="250"
+          delay-on-touch-only
           v-bind="{
             animation: 200,
             group: 'recipe-instructions',
diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageIngredientEditor.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageIngredientEditor.vue
index 03b785ca3ea..e9f43af7d6c 100644
--- a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageIngredientEditor.vue
+++ b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageIngredientEditor.vue
@@ -5,6 +5,8 @@
       v-if="recipe.recipeIngredient.length > 0"
       v-model="recipe.recipeIngredient"
       handle=".handle"
+      delay="250"
+      delay-on-touch-only
       v-bind="{
         animation: 200,
         group: 'recipe-ingredients',
diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue
index 79d5fa5fed2..11d579e9d3c 100644
--- a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue
+++ b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue
@@ -77,6 +77,8 @@
       :disabled="!isEditForm"
       :value="value"
       handle=".handle"
+      delay="250"
+      delay-on-touch-only
       v-bind="{
         animation: 200,
         group: 'recipe-instructions',
diff --git a/frontend/pages/g/_groupSlug/cookbooks/index.vue b/frontend/pages/g/_groupSlug/cookbooks/index.vue
index 01117c7b52c..2f8df2e6464 100644
--- a/frontend/pages/g/_groupSlug/cookbooks/index.vue
+++ b/frontend/pages/g/_groupSlug/cookbooks/index.vue
@@ -53,7 +53,14 @@
 
       <!-- Cookbook List -->
       <v-expansion-panels class="mt-2">
-        <draggable v-model="cookbooks" handle=".handle" style="width: 100%" @change="actions.updateOrder()">
+        <draggable
+          v-model="cookbooks"
+          handle=".handle"
+          delay="250"
+          delay-on-touch-only
+          style="width: 100%"
+          @change="actions.updateOrder()"
+        >
           <v-expansion-panel v-for="cookbook in cookbooks" :key="cookbook.id" class="my-2 left-border rounded">
             <v-expansion-panel-header disable-icon-rotate class="headline">
               <div class="d-flex align-center">
diff --git a/frontend/pages/g/_groupSlug/r/_slug/ingredient-parser.vue b/frontend/pages/g/_groupSlug/r/_slug/ingredient-parser.vue
index 9aa4518e821..f188b72d74c 100644
--- a/frontend/pages/g/_groupSlug/r/_slug/ingredient-parser.vue
+++ b/frontend/pages/g/_groupSlug/r/_slug/ingredient-parser.vue
@@ -46,6 +46,8 @@
             v-if="parsedIng.length > 0"
             v-model="parsedIng"
             handle=".handle"
+            delay="250"
+            delay-on-touch-only
             :style="{ width: '100%' }"
             ghost-class="ghost"
           >
diff --git a/frontend/pages/household/mealplan/planner/edit.vue b/frontend/pages/household/mealplan/planner/edit.vue
index a630015501b..2a5912baf3d 100644
--- a/frontend/pages/household/mealplan/planner/edit.vue
+++ b/frontend/pages/household/mealplan/planner/edit.vue
@@ -100,6 +100,8 @@
         <draggable
           tag="div"
           handle=".handle"
+          delay="250"
+          delay-on-touch-only
           :value="plan.meals"
           group="meals"
           :data-index="index"
diff --git a/frontend/pages/shopping-lists/_id.vue b/frontend/pages/shopping-lists/_id.vue
index 8b5d0656133..a86e4e71957 100644
--- a/frontend/pages/shopping-lists/_id.vue
+++ b/frontend/pages/shopping-lists/_id.vue
@@ -97,7 +97,15 @@
         @submit="saveLabelOrder"
         @close="cancelLabelOrder">
         <v-card height="fit-content" max-height="70vh" style="overflow-y: auto;">
-          <draggable v-if="localLabels" :value="localLabels" handle=".handle" class="my-2" @input="updateLabelOrder">
+          <draggable
+            v-if="localLabels"
+            :value="localLabels"
+            handle=".handle"
+            delay="250"
+            delay-on-touch-only
+            class="my-2"
+            @input="updateLabelOrder"
+          >
             <div v-for="(labelSetting, index) in localLabels" :key="labelSetting.id">
               <MultiPurposeLabelSection v-model="localLabels[index]" use-color />
             </div>