matei/zeroone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ADD: Draggable categories + fixes

Browse Source
This commit is contained in:
Robert Kossessa
2024-02-09 14:45:32 +01:00
parent 48bf22208e
commit 697e5fceb7
2 changed files with 68 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
src/components/profile/ProfileManager.vue
View File

@@ -52,47 +52,60 @@
</div> </div>
</div> </div>
<div v-else> <div v-else>
<Collapsible <draggable
v-for="(category, categoryIndex) in store.profileCategories" :key="categoryIndex" key="categoriesDraggable"
v-model:open="collapse[categoryIndex]" group="profileCategories"
:default-open="true"> item-key="name"
<!-- TODO: Make profile groups computed instead defining them of using v-for --> :list="store.profileCategories"
<CollapsibleTrigger v-bind="dragOptions"
class="w-full h-12 py-2 text-left text-muted-foreground text-sm bg-zinc-900 border-0 border-b"> @start="drag = true"
<ChevronRight class="chevrot h-4 w-4 mb-0.5 ml-4 inline-block transition-transform" /> @end="drag = false"
{{ category.name }}<span class="font-heading text-sm text-zinc-600"> ({{ category.profiles?.length || 0 @change="onCategoryDrop">
}})</span> <template #item="dragCategory">
</CollapsibleTrigger> <Collapsible
<CollapsibleContent> v-model:open="collapse[dragCategory.index]"
<TransitionGroup> :default-open="true">
<draggable <!-- TODO: Make profile groups computed instead defining them of using v-for -->
key="draggable" <CollapsibleTrigger
item-key="id" class="w-full h-12 py-2 text-left text-muted-foreground text-sm bg-zinc-900 border-0 border-b">
:list="category.profiles" <ChevronRight class="chevrot h-4 w-4 mb-0.5 ml-4 inline-block transition-transform" />
v-bind="dragOptions" {{ dragCategory.element.name }}<span
@start="drag = true" class="font-heading text-sm text-zinc-600"> ({{ dragCategory.element.profiles?.length || 0
@end="drag = false" }})</span>
@change="(event)=>onProfileDrop(event, categoryIndex)"> </CollapsibleTrigger>
<template v-if="category.profiles.length === 0" #header> <CollapsibleContent>
<div class="flex h-12 justify-center items-center hideable-header"> <TransitionGroup>
<MoreHorizontal class="w-4 text-zinc-600" /> <draggable
</div> key="profilesDraggable"
</template> group="profiles"
<template #item="{ element }"> item-key="id"
<div :key="element.name"> :list="dragCategory.element.profiles"
<ProfileButton v-bind="dragOptions"
:profile="element" @start="drag = true"
:show-hover-buttons="!drag" @end="drag = false"
:selected="store.selectedProfile?.id === element.id" @change="(event)=>onProfileDrop(event, dragCategory.index)">
@select="store.selectProfile(element.id); showProfileConfig=true" <template v-if="dragCategory.element.profiles.length === 0" #header>
@duplicate="store.duplicateProfile(element.id)" <div class="flex h-12 justify-center items-center hideable-header">
@delete="store.removeProfile(element.id)" /> <MoreHorizontal class="w-4 text-zinc-600" />
</div> </div>
</template> </template>
</draggable> <template #item="dragProfile">
</TransitionGroup> <div :key="dragProfile.element.name">
</CollapsibleContent> <ProfileButton
</Collapsible> :profile="dragProfile.element"
:show-hover-buttons="!drag"
:selected="store.selectedProfile?.id === dragProfile.element.id"
@select="store.selectProfile(dragProfile.element.id); showProfileConfig=true"
@duplicate="store.duplicateProfile(dragProfile.element.id)"
@delete="store.removeProfile(dragProfile.element.id)" />
</div>
</template>
</draggable>
</TransitionGroup>
</CollapsibleContent>
</Collapsible>
</template>
</draggable>
</div> </div>
</div> </div>
<Transition name="slide"> <Transition name="slide">
@@ -123,7 +136,6 @@ defineProps({
}) })
const dragOptions = ref({ const dragOptions = ref({
group: 'profiles',
ghostClass: 'ghost', ghostClass: 'ghost',
animation: 150, animation: 150,
direction: 'vertical', direction: 'vertical',
@@ -179,6 +191,15 @@ watch(showProfileConfig, value => {
// return map // return map
// }) // })
const onCategoryDrop = (event) => {
if (event.moved) {
const category = event.moved.element
const oldIndex = event.moved.oldIndex
const newIndex = event.moved.newIndex
store.moveProfileCategory(category.name, oldIndex, newIndex)
}
}
const onProfileDrop = (event, categoryIndex) => { const onProfileDrop = (event, categoryIndex) => {
if (event.moved) { if (event.moved) {
const profile = event.moved.element const profile = event.moved.element

5
src/store.js
View File

@@ -82,6 +82,11 @@ export const useStore = defineStore('main', {
category.profiles[newIndex] = category.profiles[oldIndex] category.profiles[newIndex] = category.profiles[oldIndex]
category.profiles[newIndex] = tmpProfile category.profiles[newIndex] = tmpProfile
}, },
moveProfileCategory(categoryName, oldIndex, newIndex) {
const tmpCategory = this.profileCategories[newIndex]
this.profileCategories[newIndex] = this.profileCategories[oldIndex]
this.profileCategories[newIndex] = tmpCategory
},
changeProfileCategory(profileId, newCategoryIndex, newIndex) { changeProfileCategory(profileId, newCategoryIndex, newIndex) {
const profile = this.profiles.find(p => p.id === profileId) const profile = this.profiles.find(p => p.id === profileId)
const oldCategory = this.profileCategories.find(c => c.profiles.find(p => p.id === profileId)) const oldCategory = this.profileCategories.find(c => c.profiles.find(p => p.id === profileId))