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.
Meeds-io · Feb 6, 2025 · 8effdec · 8effdec
1 parent ff01286
commit 8effdec
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 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
@@ -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/...src/main/webapp/vue-app/tasks-management/components/ProjectTasks/TasksViewBoardColumn.vue b/...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/.../src/main/webapp/vue-app/tasks-management/components/ProjectTasks/TasksViewListColumn.vue b/.../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
@@ -66,6 +66,11 @@ export function init() {
         autoReply,
         autoReplyCommentId,
       },
+      computed: {
+        isMobile() {
+          return this.$vuetify.breakpoint.smAndDown;
+        },
+      },
       template: '<tasks-management></tasks-management>',
       i18n,
       vuetify,