Discover: sidebarFilter - Sequence -> Sequnce add dblclick teature done.

cypress/e2e/filterFunnel.cy.js

@@ -191,61 +191,63 @@ describe('Save Log and Filter', ()=>{
   //   });
   // });
 
-  it('Sequence, Start & End', () => {
+  it('Sequence, Sequence', () => {
     // select radio
     cy.get('input#Sequence0').should('be.checked'); // 選取 Radio 'Sequence'
-    cy.contains('label', 'Start activity / End activity') // 選取 Radio 'Have activity(s)'
-      .prev(2)
-      .find('input')
-      .should('have.attr', 'type', 'radio') // select the previous element
-      .check({ force: true })
-      .should('be.checked'); // confirm it's type radio (optional)
-    cy.get('input[id="Start & End2"]').check({ force: true });
+    cy.contains('p', 'Activity Sequence') // 選取包含指定文字的元素
+    .nextAll() // 選取所有後續相鄰元素
+    .eq(2) // 選取索引為 2 , 下 3 個相鄰元素
+    .find('input#Sequence2') // 在下一個相鄰元素中尋找指定的 <input> 元素
+    .check({ force: true }); // 對該 <input> 元素進行勾選操作
 
     // No selected.
-    cy.contains('button', 'Apply').click();
-    cy.get('.v-toast__text').should('contain', 'Both Start and End must be selected');
-    cy.wait(3000);
+    // cy.contains('button', 'Apply').click();
+    // cy.get('.v-toast__text').should('contain', 'Select two or more');
+    // cy.wait(3000);
 
-    // 選取 "start" 的 <table>
-    cy.contains('p', 'Start activity')
-      .parents('div') // 回到 p 的父層 div
-      .eq(1) // 同階層的第二個 div
-      .find('table') // 向下找 table
-      .as('startTable'); // 將選取的元素命名，使用 @startTable 來操作
-    // 選取 "end" 的 <table>
-    cy.contains('p', 'End activity')
-      .parents('div')
-      .eq(1)
-      .find('table')
-      .as('endTable'); // 使用 @endTable 來操作
+    // 選擇要拖曳的元素
+    // cy.get('tbody tr[data-draggable="true"]')
 
-    // Clear selected item.
-    cy.get('@startTable').find('tr:nth-child(1) input[type="radio"]').check({ force: true });
-    cy.get('@endTable').find('tr:nth-child(1) input[type="radio"]').check({ force: true });
-    cy.contains('button', 'Clear').click();
-    cy.get('@startTable').find('tr:nth-child(1) input[type="radio"]').should('not.be.checked');
-    cy.get('@endTable').find('tr:nth-child(1) input[type="radio"]').should('not.be.checked');
-    cy.wait(3000);
 
-    // selected item
-    cy.get('@startTable').find('tr:nth-child(1) input[type="radio"]').check({ force: true });
-    cy.get('@endTable').find('tr:nth-child(1) input[type="radio"]').check({ force: true });
-    cy.contains('button', 'Apply').click();
-    cy.get('#tabFunnel').click();
-    cy.contains('p', 'Sequence');
-    cy.contains('span', 'Start')
-      .parent()
-      .contains('span', 'End'); // 斷言 text 是否包含 Start 和 End.
-    cy.contains('button', 'Apply All').click();
+    // 選取 "Activity List" 的 <table>
+    // cy.contains('p', 'Start activity')
+    //   .parents('div') // 回到 p 的父層 div
+    //   .eq(1) // 同階層的第二個 div
+    //   .find('table') // 向下找 table
+    //   .as('startTable'); // 將選取的元素命名，使用 @startTable 來操作
+    // // 選取 "end" 的 <table>
+    // cy.contains('p', 'End activity')
+    //   .parents('div')
+    //   .eq(1)
+    //   .find('table')
+    //   .as('endTable'); // 使用 @endTable 來操作
 
-    // make sure create map again.
-    cy.get('header').click();
-    cy.get('#iconState').click();
-    cy.get('li').first().then($li => { // then() 獲取 <li> 元素的內容
-      const percentage = $li.find('span').eq(1).text(); // li 底下找到第二個 span
-      expect(percentage).not.to.equal('100%'); // text !== 100% 來判斷數據是否有變化
-    });
+    // // Clear selected item.
+    // cy.get('@startTable').find('tr:nth-child(1) input[type="radio"]').check({ force: true });
+    // cy.get('@endTable').find('tr:nth-child(1) input[type="radio"]').check({ force: true });
+    // cy.contains('button', 'Clear').click();
+    // cy.get('@startTable').find('tr:nth-child(1) input[type="radio"]').should('not.be.checked');
+    // cy.get('@endTable').find('tr:nth-child(1) input[type="radio"]').should('not.be.checked');
+    // cy.wait(3000);
+
+    // // selected item
+    // cy.get('@startTable').find('tr:nth-child(1) input[type="radio"]').check({ force: true });
+    // cy.get('@endTable').find('tr:nth-child(1) input[type="radio"]').check({ force: true });
+    // cy.contains('button', 'Apply').click();
+    // cy.get('#tabFunnel').click();
+    // cy.contains('p', 'Sequence');
+    // cy.contains('span', 'Start')
+    //   .parent()
+    //   .contains('span', 'End'); // 斷言 text 是否包含 Start 和 End.
+    // cy.contains('button', 'Apply All').click();
+
+    // // make sure create map again.
+    // cy.get('header').click();
+    // cy.get('#iconState').click();
+    // cy.get('li').first().then($li => { // then() 獲取 <li> 元素的內容
+    //   const percentage = $li.find('span').eq(1).text(); // li 底下找到第二個 span
+    //   expect(percentage).not.to.equal('100%'); // text !== 100% 來判斷數據是否有變化
+    // });
   });
 
   // it('Trace', () => {

src/components/Discover/Filter/ActAndSeq.vue

@@ -13,10 +13,10 @@
             <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">
+        <Draggable :list="data" group="people" itemKey="name" tag="tbody" animation="300" @end="onEnd" :fallbackTolerance="5" >
           <template #item="{ element, index }">
-            <tr>
-              <td class="px-4 py-2">{{ element.label }}</td>
+            <tr @dblclick="moveActItem(index, element)">
+              <td class="px-4 py-2" :id="element.label">{{ element.label }}</td>
               <td class="px-4 py-2 w-24">
                 <div class="h-4 min-w-[96px] bg-neutral-300 rounded-sm overflow-hidden">
                   <div class="h-full bg-primary" :style="progressWidth(element.occ_value)"></div>
@@ -39,11 +39,11 @@
     </div>
     <!-- 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">
+      <div class="w-full h-full overflow-y-auto overflow-x-auto scrollbar px-4 text-center ">
         <draggable class="h-full" :list="listSequence" group="people" itemKey="name" animation="300" @end="onEnd">
           <template #item="{ element, index }">
             <div>
-              <div class="w-full p-2 border border-primary rounded text-primary">
+              <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>
@@ -86,6 +86,15 @@ export default {
     }
   },
   methods: {
+    moveActItem(index, element){
+      this.data.splice(index, 1);
+      this.listSequence.push(element)
+
+    },
+    moveSeqItem(index, element){
+      this.listSequence.splice(index, 1);
+      this.data.push(element);
+    },
     onEnd() {
       this.$emit('update:listSeq', this.listSequence);
     }

src/components/Discover/Filter/Timeframes.vue

@@ -131,7 +131,6 @@ export default{
   },
   watch:{
     selectTimeFrame(newValue, oldValue) {
-      console.log(newValue); // []
       if(newValue.length === 0) {
         this.startTime = new Date(getMoment(this.filterTimeframe.x_axis.min).format());
         this.endTime = new Date(getMoment(this.filterTimeframe.x_axis.max).format());