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
*/