local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

fix: load the list tasks only after the list itself was loaded (#1251)

Browse source 
Currently, when opening a list sometimes the tasks are shown before the list itself is loaded. Because the list contains the rights, this means no edit buttons etc are available at that point which is pretty confusing.

This PR ensures the list-specific view is loaded only after the list itself is loaded.

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/1251
This commit is contained in:
konrad 2022-03-27 19:56:56 +00:00
parent a8fe2cdcbd
commit 7f56a3537c
2 changed files with 21 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/components/home/contentAuth.vue
View file

@ -236,6 +236,11 @@ store.dispatch('labels/loadAllLabels')
.app-content {
padding: $navbar-height + 1.5rem 1.5rem 1rem 1.5rem;
// Used to make sure the spinner is always in the middle while loading
> .loader-container {
min-height: calc(100vh - #{$navbar-height + 1.5rem + 1rem});
}
@media screen and (max-width: $tablet) {
margin-left: 0;
padding-top: 1.5rem;

23
src/views/list/ListWrapper.vue
View file

@ -42,12 +42,12 @@
</Message>
</transition>
<slot />
<slot v-if="loadedListId"/>
</div>
</template>
<script setup lang="ts">
import {ref, shallowRef, computed, watchEffect} from 'vue'
import {ref, computed, watchEffect} from 'vue'
import {useRoute} from 'vue-router'
import Message from '@/components/misc/message.vue'
@ -55,12 +55,12 @@ import Message from '@/components/misc/message.vue'
import ListModel from '@/models/list'
import ListService from '@/services/list'
import {store} from '@/store'
import {CURRENT_LIST} from '@/store/mutation-types'
import {BACKGROUND, CURRENT_LIST} from '@/store/mutation-types'
import {getListTitle} from '@/helpers/getListTitle'
import {saveListToHistory} from '@/modules/listHistory'
import { useTitle } from '@/composables/useTitle'
import {useTitle} from '@/composables/useTitle'
import {useStore} from 'vuex'
const props = defineProps({
listId: {
@ -74,8 +74,9 @@ const props = defineProps({
})
const route = useRoute()
const store = useStore()
const listService = shallowRef(new ListService())
const listService = ref(new ListService())
const loadedListId = ref(0)
const currentList = computed(() => {
@ -87,7 +88,7 @@ const currentList = computed(() => {
} : store.state.currentList
})
// call again the method if the listId changes
// call the method again if the listId changes
watchEffect(() => loadList(props.listId))
useTitle(() => currentList.value.id ? getListTitle(currentList.value) : '')
@ -123,6 +124,14 @@ async function loadList(listIdToLoad: number) {
console.debug(`Loading list, props.viewName = ${props.viewName}, $route.params =`, route.params, `, loadedListId = ${loadedListId.value}, currentList = `, currentList.value)
// Put 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 = store.getters['lists/getListById'](listData.id)
if (listFromStore !== null) {
store.commit(BACKGROUND, null)
store.commit(CURRENT_LIST, listFromStore)
}
// 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 {