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

Issue #122: Done.

Browse Source
This commit is contained in:
chiayin
2023-10-02 15:18:48 +08:00
parent 20c7e4316b
commit f9738bbed9
6 changed files with 57 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Discover/Conformance/ConformanceSidebar/ActList.vue
View File

@@ -12,7 +12,7 @@
</div>
</template>
<script>
import sortNumEngZhtw from '@/module/sortNumEngZhtw.js';
import { sortNumEngZhtw } from '@/module/sortNumEngZhtw.js';
export default {
props: ['data', 'select'],

2
src/components/Discover/Conformance/ConformanceSidebar/ActRadio.vue
View File

@@ -12,7 +12,7 @@
</div>
</template>
<script>
import sortNumEngZhtw from '@/module/sortNumEngZhtw.js';
import { sortNumEngZhtw } from '@/module/sortNumEngZhtw.js';
export default {
props: ['title', 'select', 'data', 'category', 'task', 'isSubmit'],

24
src/components/Discover/Conformance/ConformanceSidebar/ActSeqDrag.vue
View File

@@ -4,7 +4,7 @@
<div class="h-full w-full bg-neutral-10 border border-neutral-300 rounded-xl ml-4 p-2 space-y-2">
<p class="h2 pl-2 border-b mb-3">Activity list</p>
<div class="h-[calc(100%_-_56px)]">
<Draggable :list="datadata" :group="{name: 'activity', pull: 'clone' }" itemKey="name" animation="300" :fallbackTolerance="5" :forceFallback="true" :ghostClass="'ghostSelected'" :dragClass="'dragSelected'" @end="onEnd" @add="onMove" class="h-full flex flex-wrap justify-start content-start gap-4 px-2 overflow-y-auto scrollbar">
<Draggable :list="datadata" :group="{name: 'activity', pull: 'clone' }" itemKey="name" animation="300" :fallbackTolerance="5" :forceFallback="true" :ghostClass="'ghostSelected'" :dragClass="'dragSelected'" :sort="false" @end="onEnd" class="h-full flex flex-wrap justify-start content-start gap-4 px-2 overflow-y-auto scrollbar">
<template #item="{ element, index }">
<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>
@@ -23,13 +23,16 @@
<!-- Have Data -->
<div class="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">
<draggable 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()">
<draggable class="h-full" :group="{name: 'activity'}" :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)">
<span>{{ element }}</span>
<div class="flex justify-center items-center">
<div class="w-full p-2 border rounded bg-neutral-10 cursor-pointer hover:bg-primary/20" @dblclick="moveSeqItem(index, element)">
<span>{{ element }}</span>
</div>
<span class="material-symbols-outlined pl-1 cursor-pointer duration-300 hover:text-danger" @click.stop.native="moveSeqItem(index, element)">close</span>
</div>
<span v-show="index !== listSequence.length - 1 && index !== lastItemIndex - 1" class="pi pi-chevron-down !text-lg inline-block py-2"></span>
<span v-show="index !== listSequence.length - 1 && index !== lastItemIndex - 1" class="pi pi-chevron-down !text-lg inline-block py-2 pr-7"></span>
</div>
</template>
</draggable>
@@ -40,7 +43,7 @@
</template>
<script>
import sortNumEngZhtw from '@/module/sortNumEngZhtw.js';
import { sortNumEngZhtw } from '@/module/sortNumEngZhtw.js';
export default {
props: ['data', 'listSeq', 'isSubmit', 'category'],
@@ -89,15 +92,6 @@ 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
*/

55
src/components/Discover/Map/Filter/ActAndSeq.vue
View File

@@ -13,9 +13,9 @@
<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="activity" itemKey="name" tag="tbody" animation="300" @end="onEnd" :fallbackTolerance="5" :sort="false" :forceFallback="true" :ghostClass="'ghostSelected'" :dragClass="'dragSelected'">
<Draggable :list="data" :group="{ name: 'activity', pull: 'clone', put: false }" itemKey="name" tag="tbody" animation="300" @end="onEnd" :fallbackTolerance="5" :forceFallback="true" :ghostClass="'ghostSelected'" :dragClass="'dragSelected'" :sort="false">
<template #item="{ element, index }">
<tr @dblclick="moveActItem(index, element)">
<tr @dblclick="moveActItem(index, element)" :class="listSequence.includes(element) ? 'text-primary' : ''">
<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">
@@ -40,13 +40,15 @@
<!-- 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" @choose="onChoose">
<draggable class="h-full" :list="listSequence" :group="{name: 'activity'}" itemKey="name" animation="300" :forceFallback="true" :fallbackTolerance="5" :dragClass="'!opacity-100'" @start="onStart" @end="onEnd" :component-data="getComponentData()" >
<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 class="flex justify-center items-center">
<div class="w-full p-2 border border-primary rounded text-primary bg-neutral-10" @dblclick="moveSeqItem(index, element)"><span>{{ element.label }}</span>
</div>
<span class="material-symbols-outlined pl-1 cursor-pointer duration-300 hover:text-danger" @click.stop.native="moveSeqItem(index, element)">close</span>
</div>
<span v-show="index !== listSeq.length - 1 && index !== lastItemIndex - 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 pr-7"></span>
</div>
</template>
</draggable>
@@ -54,8 +56,9 @@
</div>
</div>
</template>
<script>
import { sortNumEngZhtwForFilter } from '@/module/sortNumEngZhtw.js';
export default {
props: {
filterTaskData: {
@@ -76,14 +79,16 @@ export default {
listSequence: this.listSeq,
filteredData: this.filterTaskData,
lastItemIndex: null,
isDragging: false,
}
},
computed: {
data: function() {
// TODO Activity List 的 dblclick, drag & drop 要改假刪除
// Activity List 要排序
return this.filteredData.sort((x, y) => y.occurrences - x.occurrences);
this.filteredData = this.filteredData.sort((x, y) => {
y.occurrences - x.occurrences
if(y.occurrences === x.occurrences) sortNumEngZhtwForFilter(x.label, y.label);
});
return this.filteredData;
}
},
watch: {
@@ -91,7 +96,7 @@ export default {
this.listSequence = newval;
},
filterTaskData(newval){
this.data = newval;
this.filteredData = newval;
}
},
methods: {
@@ -101,7 +106,6 @@ export default {
* @param {object} element data item
*/
moveActItem(index, element){
this.data.splice(index, 1);
this.listSequence.push(element);
},
/**
@@ -111,13 +115,19 @@ export default {
*/
moveSeqItem(index, element){
this.listSequence.splice(index, 1);
this.data.push(element);
},
/**
* get listSequence
*/
getComponentData(){
this.$emit('update:listSeq', this.listSequence);
},
/**
* Element dragging started
*/
onStart(evt) {
this.isDragging = true;
const lastChild = evt.to.lastChild.lastChild;
lastChild.style.display = 'none';
// 隱藏拖曳元素原位置
const originalElement = evt.item;
originalElement.style.display = 'none';
@@ -129,7 +139,6 @@ export default {
* Element dragging ended
*/
onEnd(evt) {
this.isDragging = false;
// 顯示拖曳元素
const originalElement = evt.item;
originalElement.style.display = '';
@@ -139,31 +148,15 @@ export default {
evt.oldIndex !== listIndex ? lastChild.style.display = '' : null;
// reset: 拖曳最後一個元素時，倒數第二的元素的箭頭要隱藏
this.lastItemIndex = null;
this.$emit('update:listSeq', this.listSequence);
},
/**
* Element is chosen
*/
onChoose(evt) {
// 拖曳時要隱藏箭頭
// isDragging: 只有拖曳才要隱藏，dblclick 不用
const lastChild = evt.item.lastChild;
if (this.isDragging) 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>

1
src/components/Discover/Map/SidebarFilter.vue
View File

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