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

Issue #59: Done.

Browse Source
This commit is contained in:
chiayin
2023-09-23 17:06:47 +08:00
parent 9cb9b5cb71
commit 8f46878ade
1 changed files with 23 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,9 +5,13 @@
<p class="h2 pl-2">Activity list</p> <p class="h2 pl-2">Activity list</p>
<div class="h-[calc(100%_-_48px)]"> <div class="h-[calc(100%_-_48px)]">
<p class="h2 pl-2 border-b mb-3">Sort</p> <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 }"> <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> <span class="whitespace-nowrap break-keep text-ellipsis overflow-hidden">{{ element }}</span>
</div> </div>
</template> </template>
@@ -24,7 +28,9 @@
<!-- 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 listSequence"> <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 }"> <template #item="{ element, index }">
<div> <div>
<div class="w-full p-2 border rounded bg-neutral-10 cursor-pointer hover:bg-primary/20" @dblclick="moveSeqItem(index, element)"> <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 { return {
listSequence: [], listSequence: [],
lastItemIndex: null, lastItemIndex: null,
isSelect: true
} }
}, },
computed: { computed: {
@@ -64,6 +71,10 @@ export default {
}, },
}, },
methods: { methods: {
getIsSelect(element = 'a') {
let result = this.listSequence.includes(element);
return result
},
/** /**
* double click Activity List * double click Activity List
* @param {number} index data item index * @param {number} index data item index
@@ -89,6 +100,15 @@ export default {
task: this.listSequence, 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 * Element dragging started
*/ */