Discover: sidebarFilter - Squence design Drag & Drop UI.

src/components/Discover/Filter/ActAndSeq.vue

@@ -13,7 +13,7 @@
             <th class="font-semibold leading-10 px-2 border-b border-neutral-500 text-start" colspan="3">Occurrences</th>
           </tr>
         </thead>
-        <Draggable :list="data" group="people" itemKey="name" tag="tbody" animation="300" @end="onEnd" :fallbackTolerance="5" >
+        <Draggable :list="data" group="activity" itemKey="name" tag="tbody" animation="300" @end="onEnd" :fallbackTolerance="5" :sort="false" :forceFallback="true" :ghostClass="'ghostSelected'" :dragClass="'dragSelected'">
           <template #item="{ element, index }">
             <tr @dblclick="moveActItem(index, element)">
               <td class="px-4 py-2" :id="element.label">{{ element.label }}</td>
@@ -40,13 +40,13 @@
     <!-- 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="people" itemKey="name" animation="300" @end="onEnd">
+        <draggable class="h-full" :list="listSequence" group="activity" itemKey="name" animation="300" :forceFallback="true" :dragClass="'dragSelected'" :fallbackTolerance="5" @start="onStart" @end="onEnd" @choose="onChoose">
           <template #item="{ element, index }">
             <div>
               <div class="w-full p-2 border border-primary rounded text-primary" @dblclick="moveSeqItem(index, element)">
                 <span>{{ element.label }}</span>
               </div>
-              <span v-show="index !== listSeq.length - 1" class="pi pi-chevron-down !text-lg inline-block py-2 "></span>
+              <span v-show="index !== listSeq.length - 1 && index !== lastItemIndex - 1" class="pi pi-chevron-down !text-lg inline-block py-2"></span>
             </div>
           </template>
         </draggable>
@@ -75,6 +75,7 @@ export default {
     return {
       listSequence: this.listSeq,
       data: this.filterTaskData,
+      lastItemIndex: null,
     }
   },
   watch: {
@@ -86,18 +87,74 @@ export default {
     }
   },
   methods: {
+    /**
+     * double click Activity List
+     * @param {number} index data item index
+     * @param {object} element data item
+     */
     moveActItem(index, element){
       this.data.splice(index, 1);
-      this.listSequence.push(element)
-
+      this.listSequence.push(element);
     },
+    /**
+     * double click Sequence List
+     * @param {number} index data item index
+     * @param {object} element data item
+     */
     moveSeqItem(index, element){
       this.listSequence.splice(index, 1);
       this.data.push(element);
     },
-    onEnd() {
+    /**
+     * Element dragging started
+     */
+    onStart(evt) {
+      // 隱藏拖曳元素原位置
+      const originalElement = evt.item;
+      originalElement.style.display = 'none';
+      // 拖曳最後一個元素時，倒數第二的元素的箭頭要隱藏
+      const listIndex = this.listSequence.length - 1;
+      if(evt.oldIndex === listIndex) this.lastItemIndex  = listIndex;
+    },
+    /**
+     * Element dragging ended
+     */
+    onEnd(evt) {
+      // 顯示拖曳元素
+      const originalElement = evt.item;
+      originalElement.style.display = '';
+      // 拖曳結束要顯示箭頭，但最後一個不用
+      const lastChild = evt.item.lastChild;
+      const listIndex = this.listSequence.length - 1
+      evt.oldIndex !== listIndex ? lastChild.style.display = '' : null;
+      // reset: 拖曳最後一個元素時，倒數第二的元素的箭頭要隱藏
+      this.lastItemIndex = null;
+      // Activity List 要排序
+      this.data.sort((x, y) => y.occurrences - x.occurrences);
       this.$emit('update:listSeq', this.listSequence);
+
+    },
+    /**
+     * Element is chosen
+     */
+    onChoose(evt) {
+      // 拖曳時要隱藏箭頭
+      const lastChild = evt.item.lastChild;
+      lastChild.style.display = 'none';
     }
   }
 }
 </script>
+
+<style scoped>
+.ghostSelected {
+  /* @apply shadow-inner bg-neutral-900 shadow-neutral-500 */
+  @apply shadow-[0px_0px_100px_-10px_inset] shadow-neutral-200
+}
+.dragSelected {
+  @apply shadow-[0px_0px_4px_2px] bg-neutral-10 shadow-neutral-300 !opacity-100
+}
+.dragged-item {
+  @apply !opacity-100
+}
+</style>

src/components/Discover/Filter/Timeframes.vue

@@ -137,10 +137,6 @@ export default{
         this.resizeMask(this.chart);
       }
     },
-    selectArea(nnn,ooo){
-      console.log('n',nnn);
-      console.log('o',ooo);
-    }
   },
   methods: {
     resizeMask(chart) {

src/components/Discover/SidebarFilter.vue

@@ -476,7 +476,6 @@ export default {
       }
       // 將資料指向 Vue data 雙向綁定
       const postData = Array.isArray(data) ? data : [data];
-      console.log(postData);
 
       // 快速檢查每一 filter 規則是否為空集合
       this.postRuleData = postData;

src/views/Discover/index.vue

@@ -116,7 +116,6 @@ export default {
      * @param {string} type processMap | bpmn
      */
     switchMapType(type) {
-      // console.log(type);
       this.mapType = type;
       this.createCy(type);
     },