imacat/lucia-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
chiayin
2023-06-12 09:30:52 +08:00
parent 6b3251e9eb
commit d9b43b9f4e
3 changed files with 63 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
cypress/e2e/filterFunnel.cy.js
View File

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

19
src/components/Discover/Filter/ActAndSeq.vue
View File

@@ -13,10 +13,10 @@
<th class="font-semibold leading-10 px-2 border-b border-neutral-500 text-start" colspan="3">Occurrences</th> <th class="font-semibold leading-10 px-2 border-b border-neutral-500 text-start" colspan="3">Occurrences</th>
</tr> </tr>
</thead> </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 }"> <template #item="{ element, index }">
<tr> <tr @dblclick="moveActItem(index, element)">
<td class="px-4 py-2">{{ element.label }}</td> <td class="px-4 py-2" :id="element.label">{{ element.label }}</td>
<td class="px-4 py-2 w-24"> <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-4 min-w-[96px] bg-neutral-300 rounded-sm overflow-hidden">
<div class="h-full bg-primary" :style="progressWidth(element.occ_value)"></div> <div class="h-full bg-primary" :style="progressWidth(element.occ_value)"></div>
@@ -39,11 +39,11 @@
</div> </div>
<!-- Have Data --> <!-- Have Data -->
<div class="py-4 m-auto w-full h-[calc(100%_-_56px)]"> <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"> <draggable class="h-full" :list="listSequence" group="people" itemKey="name" animation="300" @end="onEnd">
<template #item="{ element, index }"> <template #item="{ element, index }">
<div> <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> <span>{{ element.label }}</span>
</div> </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" class="pi pi-chevron-down !text-lg inline-block py-2 "></span>
@@ -86,6 +86,15 @@ export default {
} }
}, },
methods: { 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() { onEnd() {
this.$emit('update:listSeq', this.listSequence); this.$emit('update:listSeq', this.listSequence);
} }

1
src/components/Discover/Filter/Timeframes.vue
View File

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