281 lines
8.1 KiB
Vue
281 lines
8.1 KiB
Vue
<template>
|
|
<div class="namespace-title" :class="{'has-menu': n.id > 0}">
|
|
<span
|
|
@click="$emit('toggleLists' n.id)"
|
|
class="menu-label"
|
|
v-tooltip="title"
|
|
>
|
|
<span
|
|
v-if="n.hexColor !== ''"
|
|
:style="{ backgroundColor: n.hexColor }"
|
|
class="color-bubble"
|
|
/>
|
|
<span class="name">
|
|
{{ title }}
|
|
</span>
|
|
<a
|
|
class="icon is-small toggle-lists-icon pl-2"
|
|
:class="{'active': typeof listsVisible[n.id] !== 'undefined' ? listsVisible[n.id] : true}"
|
|
@click="$emit('toggleLists' n.id)"
|
|
>
|
|
<icon icon="chevron-down"/>
|
|
</a>
|
|
<span class="count" :class="{'ml-2 mr-0': n.id > 0}">
|
|
({{ namespaceListsCount[nk] }})
|
|
</span>
|
|
</span>
|
|
<namespace-settings-dropdown :namespace="n" v-if="n.id > 0"/>
|
|
</div>
|
|
<div
|
|
v-if="listsVisible[n.id] ?? true"
|
|
:key="n.id + 'child'"
|
|
class="more-container"
|
|
>
|
|
<!--
|
|
NOTE: a v-model / computed setter is not possible, since the updateActiveLists function
|
|
triggered by the change needs to have access to the current namespace
|
|
-->
|
|
<draggable
|
|
v-bind="dragOptions"
|
|
:modelValue="activeLists[nk]"
|
|
@update:modelValue="(lists) => updateActiveLists(n, lists)"
|
|
group="namespace-lists"
|
|
@start="() => drag = true"
|
|
@end="saveListPosition"
|
|
handle=".handle"
|
|
:disabled="n.id < 0 || null"
|
|
tag="transition-group"
|
|
item-key="id"
|
|
:data-namespace-id="n.id"
|
|
:data-namespace-index="nk"
|
|
:component-data="{
|
|
type: 'transition',
|
|
tag: 'ul',
|
|
name: !drag ? 'flip-list' : null,
|
|
class: [
|
|
'menu-list can-be-hidden',
|
|
{ 'dragging-disabled': n.id < 0 }
|
|
]
|
|
}"
|
|
>
|
|
<template #item="{element: l}">
|
|
<li
|
|
class="loader-container is-loading-small"
|
|
:class="{'is-loading': listUpdating[l.id]}"
|
|
>
|
|
<router-link
|
|
:to="{ name: 'list.index', params: { listId: l.id} }"
|
|
v-slot="{ href, navigate, isActive }"
|
|
custom
|
|
>
|
|
<a
|
|
@click="navigate"
|
|
:href="href"
|
|
class="list-menu-link"
|
|
:class="{'router-link-exact-active': isActive || currentList?.id === l.id}"
|
|
>
|
|
<span class="icon handle">
|
|
<icon icon="grip-lines"/>
|
|
</span>
|
|
<span
|
|
:style="{ backgroundColor: l.hexColor }"
|
|
class="color-bubble"
|
|
v-if="l.hexColor !== ''">
|
|
</span>
|
|
<span class="list-menu-title">
|
|
{{ getListTitle(l) }}
|
|
</span>
|
|
<span
|
|
:class="{'is-favorite': l.isFavorite}"
|
|
@click.prevent.stop="toggleFavoriteList(l)"
|
|
class="favorite">
|
|
<icon :icon="l.isFavorite ? 'star' : ['far', 'star']"/>
|
|
</span>
|
|
</a>
|
|
</router-link>
|
|
<list-settings-dropdown :list="l" v-if="l.id > 0"/>
|
|
<span class="list-setting-spacer" v-else></span>
|
|
</li>
|
|
</template>
|
|
</draggable>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {ref, computed, onMounted, onBeforeMount, type PropType} from 'vue'
|
|
import {useStore} from 'vuex'
|
|
import draggable from 'vuedraggable'
|
|
import {SortableEvent} from 'sortablejs'
|
|
|
|
import ListSettingsDropdown from '@/components/list/list-settings-dropdown.vue'
|
|
import NamespaceSettingsDropdown from '@/components/namespace/namespace-settings-dropdown.vue'
|
|
|
|
import {MENU_ACTIVE} from '@/store/mutation-types'
|
|
import {calculateItemPosition} from '@/helpers/calculateItemPosition'
|
|
import {getNamespaceTitle} from '@/helpers/getNamespaceTitle'
|
|
import {useEventListener} from '@vueuse/core'
|
|
|
|
import NamespaceModel from '@/models/namespace'
|
|
import ListModel from '@/models/list'
|
|
|
|
defineProps({
|
|
title: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
namespace: {
|
|
type: Object as PropType<NamespaceModel>,
|
|
required: true,
|
|
},
|
|
})
|
|
|
|
defineEmits(['toggleLists'])
|
|
|
|
|
|
const drag = ref(false)
|
|
const dragOptions = {
|
|
animation: 100,
|
|
ghostClass: 'ghost',
|
|
}
|
|
|
|
const store = useStore()
|
|
|
|
const isActiveList = computed(() => props.namespace?.lists && !props.namespace?.lists.isArchived)
|
|
const listCount = computed()
|
|
|
|
const currentList = computed(() => store.state.currentList)
|
|
|
|
function updateActiveLists(namespace: NamespaceModel, activeLists: ListModel[]) {
|
|
// This is a bit hacky: since we do have to filter out the archived items from the list
|
|
// for vue draggable updating it is not as simple as replacing it.
|
|
// To work around this, we merge the active lists with the archived ones. Doing so breaks the order
|
|
// because now all archived lists are sorted after the active ones. This is fine because they are sorted
|
|
// later when showing them anyway, and it makes the merging happening here a lot easier.
|
|
const lists = [
|
|
...activeLists,
|
|
...namespace.lists.filter(l => l.isArchived),
|
|
]
|
|
|
|
store.commit('namespaces/setNamespaceById', {
|
|
...namespace,
|
|
lists,
|
|
})
|
|
}
|
|
|
|
const listUpdating = ref<{ [id: NamespaceModel['id']]: boolean }>({})
|
|
|
|
async function saveListPosition(e: SortableEvent) {
|
|
if (!e.newIndex) return
|
|
|
|
const namespaceId = parseInt(e.to.dataset.namespaceId as string)
|
|
const newNamespaceIndex = parseInt(e.to.dataset.namespaceIndex as string)
|
|
|
|
const listsActive = activeLists.value[newNamespaceIndex]
|
|
const list = listsActive[e.newIndex]
|
|
const listBefore = listsActive[e.newIndex - 1] ?? null
|
|
const listAfter = listsActive[e.newIndex + 1] ?? null
|
|
listUpdating.value[list.id] = true
|
|
|
|
const position = calculateItemPosition(
|
|
listBefore !== null ? listBefore.position : null,
|
|
listAfter !== null ? listAfter.position : null,
|
|
)
|
|
|
|
try {
|
|
// create a copy of the list in order to not violate vuex mutations
|
|
await store.dispatch('lists/updateList', {
|
|
...list,
|
|
position,
|
|
namespaceId,
|
|
})
|
|
} finally {
|
|
listUpdating.value[list.id] = false
|
|
}
|
|
}
|
|
|
|
function toggleFavoriteList(list: ListModel) {
|
|
// The favorites pseudo list is always favorite
|
|
// Archived lists cannot be marked favorite
|
|
if (list.id === -1 || list.isArchived) {
|
|
return
|
|
}
|
|
store.dispatch('lists/toggleListFavorite', list)
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.namespace-title {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.menu-label {
|
|
margin-bottom: 0;
|
|
flex: 1 1 auto;
|
|
|
|
.name {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.count {
|
|
color: var(--grey-500);
|
|
margin-right: .5rem;
|
|
}
|
|
}
|
|
|
|
a:not(.dropdown-item) {
|
|
color: $vikunja-nav-color;
|
|
padding: 0 .25rem;
|
|
}
|
|
|
|
:deep(.dropdown-trigger) {
|
|
padding: .5rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.toggle-lists-icon {
|
|
svg {
|
|
transition: all $transition;
|
|
transform: rotate(90deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
&.active svg {
|
|
transform: rotate(0deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
&:hover .toggle-lists-icon svg {
|
|
opacity: 1;
|
|
}
|
|
|
|
&:not(.has-menu) .toggle-lists-icon {
|
|
padding-right: 1rem;
|
|
}
|
|
}
|
|
|
|
.menu-label {
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
font-weight: bold;
|
|
font-family: $vikunja-font;
|
|
color: $vikunja-nav-color;
|
|
font-weight: 500;
|
|
min-height: 2.5rem;
|
|
padding-top: 0;
|
|
padding-left: $navbar-padding;
|
|
|
|
overflow: hidden;
|
|
}
|
|
|
|
.menu-label,
|
|
.nsettings,
|
|
.menu-list span.list-menu-link,
|
|
.menu-list a {
|
|
color: $vikunja-nav-color;
|
|
}
|
|
</style> |