From 8f46878adecf4791cf5b38298dae0e3b7471211d Mon Sep 17 00:00:00 2001
From: chiayin <chiayin.kuo@dsp.im>
Date: Sat, 23 Sep 2023 17:06:47 +0800
Subject: [PATCH] Issue #59: Done.

---
 .../ConformanceSidebar/ActSeqDrag.vue         | 26 ++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/components/Discover/Conformance/ConformanceSidebar/ActSeqDrag.vue b/src/components/Discover/Conformance/ConformanceSidebar/ActSeqDrag.vue
index c65558b..d7fda2c 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar/ActSeqDrag.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar/ActSeqDrag.vue
@@ -5,9 +5,13 @@
       <p class="h2 pl-2">Activity list</p>
       <div class="h-[calc(100%_-_48px)]">
         <p class="h2 pl-2 border-b mb-3">Sort</p>
-        <Draggable :list="datadata" group="activity" itemKey="name" animation="300" @end="onEnd" :fallbackTolerance="5" :forceFallback="true" :ghostClass="'ghostSelected'" :dragClass="'dragSelected'" class="flex flex-wrap justify-start content-start gap-4 px-2 overflow-y-auto scrollbar h-[calc(100%_-_52px)]">
+        <!-- :group="{name: 'activity', pull: 'clone' }" -->
+        <!-- group="activity" -->
+        <!-- @end="onEnd" -->
+        <Draggable ref="tableA" :list="datadata" :group="{name: 'activity', pull: 'clone' }" itemKey="name" animation="300" :fallbackTolerance="5" :forceFallback="true" :ghostClass="'ghostSelected'" :dragClass="'dragSelected'" @end="onEnd" @add="onMove" class="flex flex-wrap justify-start content-start gap-4 px-2 overflow-y-auto scrollbar h-[calc(100%_-_52px)]">
+          <!-- :class="listSequence.includes(element) ? 'border-primary text-primary' : ''" -->
           <template #item="{ element, index }">
-            <div class="flex items-center w-[166px] border rounded p-2 bg-neutral-10 cursor-pointer hover:bg-primary/20" @dblclick="moveActItem(index, element)">
+            <div :class="listSequence.includes(element) ? 'border-primary text-primary' : ''" class="flex items-center w-[166px] border rounded p-2 bg-neutral-10 cursor-pointer hover:bg-primary/20" @dblclick="moveActItem(index, element)">
               <span class="whitespace-nowrap break-keep text-ellipsis overflow-hidden">{{ element }}</span>
             </div>
           </template>
@@ -24,7 +28,9 @@
       <!-- Have Data -->
       <div class="py-4 m-auto w-full  h-[calc(100%_-_56px)]">
         <div class="w-full h-full overflow-y-auto overflow-x-auto scrollbar px-4 text-center listSequence">
-          <draggable class="h-full" :list="listSequence" group="activity" itemKey="name" animation="300" :forceFallback="true" :dragClass="'dragSelected'" :fallbackTolerance="5" @start="onStart" @end="onEnd" :component-data="getComponentData()">
+          <!-- :group="{name: 'activity', pull: true }" -->
+          <!-- group="activity" -->
+          <draggable ref="tableB" class="h-full" :group="{name: 'activity', pull: true, put: true }" :list="listSequence" itemKey="name" animation="300" :forceFallback="true" :dragClass="'dragSelected'" :fallbackTolerance="5" @start="onStart" @end="onEnd" :component-data="getComponentData()">
             <template #item="{ element, index }">
               <div>
                 <div class="w-full p-2 border rounded bg-neutral-10  cursor-pointer hover:bg-primary/20" @dblclick="moveSeqItem(index, element)">
@@ -49,6 +55,7 @@ export default {
     return {
       listSequence: [],
       lastItemIndex: null,
+      isSelect: true
     }
   },
   computed: {
@@ -64,6 +71,10 @@ export default {
     },
   },
   methods: {
+    getIsSelect(element = 'a') {
+      let result = this.listSequence.includes(element);
+      return result
+    },
     /**
      * double click Activity List
      * @param {number} index data item index
@@ -89,6 +100,15 @@ export default {
         task: this.listSequence,
       });
     },
+    /**
+     * Event when you move an item in the list or between lists
+     */
+    onMove(evt) {
+      let task = evt.item.innerText;
+      let data = this.datadata;
+      data.splice(data.indexOf(task), 1);
+      sortNumEngZhtw(data);
+    },
     /**
      * Element dragging started
      */