From 8effdec5fbf8aba32b4bf4399e766f3ec9edadec Mon Sep 17 00:00:00 2001
From: Boubaker Khanfir <boubaker.khanfir@exoplatform.com>
Date: Wed, 5 Feb 2025 16:15:25 +0100
Subject: [PATCH] fix: Avoid Drag Effect on Tasks in Mobile - MEED-9348 -
 Meeds-io/MIPs#175 (#458)

Prior to this change, the Draggable component is enabled on mobile. This
change will delete this effect to enhance UX.
---
 .../components/ProjectTasks/TasksViewBoard.vue               | 5 +++--
 .../components/ProjectTasks/TasksViewBoardColumn.vue         | 5 +++--
 .../components/ProjectTasks/TasksViewListColumn.vue          | 5 +++--
 webapps/src/main/webapp/vue-app/tasks-management/main.js     | 5 +++++
 4 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/webapps/src/main/webapp/vue-app/tasks-management/components/ProjectTasks/TasksViewBoard.vue b/webapps/src/main/webapp/vue-app/tasks-management/components/ProjectTasks/TasksViewBoard.vue
index 485a1ee41..9bbdc46e8 100644
--- a/webapps/src/main/webapp/vue-app/tasks-management/components/ProjectTasks/TasksViewBoard.vue
+++ b/webapps/src/main/webapp/vue-app/tasks-management/components/ProjectTasks/TasksViewBoard.vue
@@ -21,7 +21,8 @@
     <v-item-group class="pb-0 pt-5 px-0">
       <v-row class="ma-0 border-box-sizing tasksViewBoardRowContainer">
         <div v-if="project.canManage">
-          <draggable
+          <component
+            :is="$root.isMobile && 'div' || 'draggable'"
             :move="checkMoveStatus"
             :list="statusList"
             :animation="200"
@@ -53,7 +54,7 @@
                 @cancel-add-column="cancelAddColumn"
                 @create-status="createStatus" />
             </v-col>
-          </draggable>
+          </component>
         </div>
         <div v-else class="d-flex">
           <v-col
diff --git a/webapps/src/main/webapp/vue-app/tasks-management/components/ProjectTasks/TasksViewBoardColumn.vue b/webapps/src/main/webapp/vue-app/tasks-management/components/ProjectTasks/TasksViewBoardColumn.vue
index cbbd9897b..c0d0d281a 100644
--- a/webapps/src/main/webapp/vue-app/tasks-management/components/ProjectTasks/TasksViewBoardColumn.vue
+++ b/webapps/src/main/webapp/vue-app/tasks-management/components/ProjectTasks/TasksViewBoardColumn.vue
@@ -38,7 +38,8 @@
       :task-title="taskTitle1"
       class="status-add-task" 
       @close-quick-form="quickAddTask1=false" />
-    <draggable 
+    <component
+      :is="$root.isMobile && 'div' || 'draggable'"
       v-model="tasksList" 
       :move="checkMove"
       :animation="200"
@@ -70,7 +71,7 @@
           + {{ $t('label.addTask') }}
         </span>
       </v-btn>
-    </draggable>
+    </component>
   </div>     
 </template>
 <script>
diff --git a/webapps/src/main/webapp/vue-app/tasks-management/components/ProjectTasks/TasksViewListColumn.vue b/webapps/src/main/webapp/vue-app/tasks-management/components/ProjectTasks/TasksViewListColumn.vue
index 38f200dc2..a9a0a7dae 100644
--- a/webapps/src/main/webapp/vue-app/tasks-management/components/ProjectTasks/TasksViewListColumn.vue
+++ b/webapps/src/main/webapp/vue-app/tasks-management/components/ProjectTasks/TasksViewListColumn.vue
@@ -26,7 +26,8 @@
     </div>
     <div :id="'taskView'+status.id" :class="filterByStatus===true ? 'pt-5 ms-7 me-2' : ''">
       <div :id="status.id">
-        <draggable
+        <component
+          :is="$root.isMobile && 'div' || 'draggable'"
           v-model="tasksList"
           :move="checkMove"
           :animation="200"
@@ -42,7 +43,7 @@
             :task="taskListItem"
             :show-completed-tasks="showCompletedTasks"
             @update-task-completed="updateTaskCompleted" />
-        </draggable>
+        </component>
       </div>
     </div>
   </div>
diff --git a/webapps/src/main/webapp/vue-app/tasks-management/main.js b/webapps/src/main/webapp/vue-app/tasks-management/main.js
index 40aa7cab8..20aee1448 100644
--- a/webapps/src/main/webapp/vue-app/tasks-management/main.js
+++ b/webapps/src/main/webapp/vue-app/tasks-management/main.js
@@ -66,6 +66,11 @@ export function init() {
         autoReply,
         autoReplyCommentId,
       },
+      computed: {
+        isMobile() {
+          return this.$vuetify.breakpoint.smAndDown;
+        },
+      },
       template: '<tasks-management></tasks-management>',
       i18n,
       vuetify,