vikunja-frontend/src/views/list/ListWrapper.vue

208 lines
5.9 KiB
Vue
Raw Normal View History

2018-09-08 23:33:23 +02:00
<template>
<div
:class="{ 'is-loading': listService.loading, 'is-archived': currentList.isArchived}"
class="loader-container"
>
<div class="switch-view-container">
<div class="switch-view">
<router-link
v-shortcut="'g l'"
:title="$t('keyboardShortcuts.list.switchToListView')"
2021-12-10 15:29:28 +01:00
:class="{'is-active': viewName === 'list'}"
2021-11-01 18:19:59 +01:00
:to="{ name: 'list.list', params: { listId } }">
{{ $t('list.list.title') }}
</router-link>
<router-link
v-shortcut="'g g'"
:title="$t('keyboardShortcuts.list.switchToGanttView')"
2021-12-10 15:29:28 +01:00
:class="{'is-active': viewName === 'gantt'}"
2021-11-01 18:19:59 +01:00
:to="{ name: 'list.gantt', params: { listId } }">
{{ $t('list.gantt.title') }}
</router-link>
<router-link
v-shortcut="'g t'"
:title="$t('keyboardShortcuts.list.switchToTableView')"
2021-12-10 15:29:28 +01:00
:class="{'is-active': viewName === 'table'}"
2021-11-01 18:19:59 +01:00
:to="{ name: 'list.table', params: { listId } }">
{{ $t('list.table.title') }}
</router-link>
<router-link
v-shortcut="'g k'"
:title="$t('keyboardShortcuts.list.switchToKanbanView')"
2021-12-10 15:29:28 +01:00
:class="{'is-active': viewName === 'kanban'}"
2021-11-01 18:19:59 +01:00
:to="{ name: 'list.kanban', params: { listId } }">
{{ $t('list.kanban.title') }}
</router-link>
</div>
2021-11-14 21:33:53 +01:00
<slot name="header" />
</div>
<transition name="fade">
2021-11-01 18:19:59 +01:00
<Message variant="warning" v-if="currentList.isArchived" class="mb-4">
{{ $t('list.archived') }}
2021-11-01 18:19:59 +01:00
</Message>
</transition>
2019-04-29 23:41:39 +02:00
<slot v-if="loadedListId"/>
2018-09-08 23:33:23 +02:00
</div>
</template>
2021-12-10 15:29:28 +01:00
<script setup lang="ts">
import {ref, computed, watch} from 'vue'
2021-11-14 21:33:53 +01:00
import {useRoute} from 'vue-router'
2021-11-01 18:19:59 +01:00
2021-12-10 15:29:28 +01:00
import Message from '@/components/misc/message.vue'
2021-11-01 18:19:59 +01:00
import ListModel from '@/models/list'
import ListService from '@/services/list'
import {BACKGROUND, BLUR_HASH, CURRENT_LIST} from '@/store/mutation-types'
2021-11-01 18:19:59 +01:00
import {getListTitle} from '@/helpers/getListTitle'
import {saveListToHistory} from '@/modules/listHistory'
import {useTitle} from '@/composables/useTitle'
2022-07-21 18:45:58 +02:00
import {useStore} from '@/store'
import {useListStore} from '@/stores/lists'
2021-11-01 18:19:59 +01:00
2021-12-10 15:29:28 +01:00
const props = defineProps({
listId: {
type: Number,
required: true,
},
viewName: {
type: String,
required: true,
},
})
2021-11-01 18:19:59 +01:00
const route = useRoute()
const store = useStore()
2021-11-01 18:19:59 +01:00
const listStore = useListStore()
const listService = ref(new ListService())
2021-11-01 18:19:59 +01:00
const loadedListId = ref(0)
const currentList = computed(() => {
return typeof store.state.currentList === 'undefined' ? {
id: 0,
title: '',
isArchived: false,
2022-01-30 16:47:23 +01:00
maxRight: null,
2021-11-01 18:19:59 +01:00
} : store.state.currentList
})
// watchEffect would be called every time the prop would get a value assigned, even if that value was the same as before.
// This resulted in loading and setting the list multiple times, even when navigating away from it.
// This caused wired bugs where the list background would be set on the home page but only right after setting a new
// list background and then navigating to home. It also highlighted the list in the menu and didn't allow changing any
// of it, most likely due to the rights not being properly populated.
watch(
() => props.listId,
listId => loadList(listId),
{immediate: true},
)
2021-11-01 18:19:59 +01:00
useTitle(() => currentList.value.id ? getListTitle(currentList.value) : '')
2021-12-10 15:29:28 +01:00
async function loadList(listIdToLoad: number) {
2021-11-17 18:04:53 +01:00
const listData = {id: listIdToLoad}
2021-11-01 18:19:59 +01:00
saveListToHistory(listData)
// This invalidates the loaded list at the kanban board which lets it reload its content when
// switched to it. This ensures updates done to tasks in the gantt or list views are consistently
// shown in all views while preventing reloads when closing a task popup.
// We don't do this for the table view because that does not change tasks.
// FIXME: remove this
if (
2021-12-10 15:29:28 +01:00
props.viewName === 'list.list' ||
props.viewName === 'list.gantt'
2021-11-01 18:19:59 +01:00
) {
store.commit('kanban/setListId', 0)
}
// Don't load the list if we either already loaded it or aren't dealing with a list at all currently and
// the currently loaded list has the right set.
if (
(
2021-11-17 18:04:53 +01:00
listIdToLoad === loadedListId.value ||
typeof listIdToLoad === 'undefined' ||
listIdToLoad === currentList.value.id
2021-11-01 18:19:59 +01:00
)
&& typeof currentList.value !== 'undefined' && currentList.value.maxRight !== null
) {
loadedListId.value = props.listId
2021-11-01 18:19:59 +01:00
return
}
2021-12-10 15:29:28 +01:00
console.debug(`Loading list, props.viewName = ${props.viewName}, $route.params =`, route.params, `, loadedListId = ${loadedListId.value}, currentList = `, currentList.value)
2021-11-01 18:19:59 +01:00
// Set the current list to the one we're about to load so that the title is already shown at the top
loadedListId.value = 0
const listFromStore = listStore.getListById(listData.id)
if (listFromStore !== null) {
store.commit(BACKGROUND, null)
store.commit(BLUR_HASH, null)
store.dispatch(CURRENT_LIST, {list: listFromStore})
}
2021-11-01 18:19:59 +01:00
// We create an extra list object instead of creating it in list.value because that would trigger a ui update which would result in bad ux.
const list = new ListModel(listData)
try {
const loadedList = await listService.value.get(list)
await store.dispatch(CURRENT_LIST, {list: loadedList})
2021-11-01 18:19:59 +01:00
} finally {
2021-12-10 15:29:28 +01:00
loadedListId.value = props.listId
2021-11-01 18:19:59 +01:00
}
}
</script>
<style lang="scss" scoped>
.switch-view-container {
@media screen and (max-width: $tablet) {
display: flex;
justify-content: center;
2022-02-27 16:36:20 +01:00
flex-direction: column;
}
}
.switch-view {
background: var(--white);
display: inline-flex;
border-radius: $radius;
font-size: .75rem;
box-shadow: var(--shadow-sm);
height: $switch-view-height;
2022-02-27 16:36:20 +01:00
margin: 0 auto 1rem;
padding: .5rem;
a {
padding: .25rem .5rem;
display: block;
border-radius: $radius;
transition: all 100ms;
&:not(:last-child) {
margin-right: .5rem;
}
&.is-active,
&:hover {
color: var(--switch-view-color);
}
&.is-active {
background: var(--primary);
font-weight: bold;
box-shadow: var(--shadow-xs);
}
&:hover {
background: var(--primary);
}
}
}
.is-archived .notification.is-warning {
margin-bottom: 1rem;
}
</style>