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

Fix loading states for unrelated components (#370)

Browse source 
Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/370
Co-authored-by: konrad <konrad@kola-entertainments.de>
Co-committed-by: konrad <konrad@kola-entertainments.de>
This commit is contained in:
konrad 2021-01-09 14:24:06 +00:00
parent 7d40b29ae8
commit e44be61d2a
8 changed files with 30 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/home/navigation.vue
View file

@ -133,7 +133,7 @@
<script>
import {mapState} from 'vuex'
import {CURRENT_LIST, IS_FULLPAGE, MENU_ACTIVE} from '@/store/mutation-types'
import {CURRENT_LIST, IS_FULLPAGE, MENU_ACTIVE, LOADING, LOADING_MODULE} from '@/store/mutation-types'
export default {
name: 'navigation',
@ -145,7 +145,7 @@ export default {
currentList: CURRENT_LIST,
background: 'background',
menuActive: MENU_ACTIVE,
loading: state => state.namespaces.loading,
loading: state => state[LOADING] && state[LOADING_MODULE] === 'namespaces',
}),
beforeCreate() {
this.$store.dispatch('namespaces/loadNamespaces')

13
src/store/helper.js
View file

@ -1,9 +1,17 @@
import {LOADING} from './mutation-types'
import {LOADING, LOADING_MODULE} from './mutation-types'
export const setLoading = (context, loadFunc = null) => {
/**
* This helper sets the loading state with a 100ms delay to avoid flickering.
*
* @param {*} context The vuex module context.
* @param {null|String} module The module that is loading. This parameter allows components to listen for specific parts of the application loading.
* @param {null|function} loadFunc If not null, this function will be executed instead of the default setting loading.
*/
export const setLoading = (context, module = null, loadFunc = null) => {
const timeout = setTimeout(() => {
if (loadFunc === null) {
context.commit(LOADING, true, {root: true})
context.commit(LOADING_MODULE, module, {root: true})
} else {
loadFunc(true)
}
@ -12,6 +20,7 @@ export const setLoading = (context, loadFunc = null) => {
clearTimeout(timeout)
if (loadFunc === null) {
context.commit(LOADING, false, {root: true})
context.commit(LOADING_MODULE, null, {root: true})
} else {
loadFunc(false)
}

5
src/store/index.js
View file

@ -7,6 +7,7 @@ import {
IS_FULLPAGE,
KEYBOARD_SHORTCUTS_ACTIVE,
LOADING,
LOADING_MODULE,
MENU_ACTIVE,
ONLINE,
} from './mutation-types'
@ -35,6 +36,7 @@ export const store = new Vuex.Store({
},
state: {
loading: false,
loadingModule: null,
errorMessage: '',
online: true,
isFullpage: false,
@ -49,6 +51,9 @@ export const store = new Vuex.Store({
[LOADING](state, loading) {
state.loading = loading
},
[LOADING_MODULE](state, module) {
state.loadingModule = module
},
[ERROR_MESSAGE](state, error) {
state.errorMessage = error
},

8
src/store/modules/kanban.js
View file

@ -114,7 +114,7 @@ export default {
},
actions: {
loadBucketsForList(ctx, {listId, params}) {
const cancel = setLoading(ctx)
const cancel = setLoading(ctx, 'kanban')
// Clear everything to prevent having old buckets in the list if loading the buckets from this list takes a few moments
ctx.commit('setBuckets', [])
@ -134,7 +134,7 @@ export default {
})
},
createBucket(ctx, bucket) {
const cancel = setLoading(ctx)
const cancel = setLoading(ctx, 'kanban')
const bucketService = new BucketService()
return bucketService.create(bucket)
@ -150,7 +150,7 @@ export default {
})
},
deleteBucket(ctx, bucket) {
const cancel = setLoading(ctx)
const cancel = setLoading(ctx, 'kanban')
const bucketService = new BucketService()
return bucketService.delete(bucket)
@ -168,7 +168,7 @@ export default {
})
},
updateBucket(ctx, bucket) {
const cancel = setLoading(ctx)
const cancel = setLoading(ctx, 'kanban')
const bucketService = new BucketService()
return bucketService.update(bucket)

5
src/store/modules/namespaces.js
View file

@ -7,7 +7,6 @@ export default {
namespaced: true,
state: () => ({
namespaces: [],
loading: false,
}),
mutations: {
namespaces(state, namespaces) {
@ -97,9 +96,7 @@ export default {
},
actions: {
loadNamespaces(ctx) {
const cancel = setLoading(ctx, status => {
ctx.commit('loading', status, {root: true})
})
const cancel = setLoading(ctx, 'namespaces')
const namespaceService = new NamespaceService()
// We always load all namespaces and filter them on the frontend

2
src/store/modules/tasks.js
View file

@ -10,7 +10,7 @@ export default {
state: () => ({}),
actions: {
update(ctx, task) {
const cancel = setLoading(ctx)
const cancel = setLoading(ctx, 'tasks')
const taskService = new TaskService()
return taskService.update(task)

1
src/store/mutation-types.js
View file

@ -1,4 +1,5 @@
export const LOADING = 'loading'
export const LOADING_MODULE = 'loadingModule'
export const ERROR_MESSAGE = 'errorMessage'
export const ONLINE = 'online'
export const IS_FULLPAGE = 'isFullpage'

9
src/views/list/views/Kanban.vue
View file

@ -107,8 +107,8 @@
>
<div
:class="{
'is-loading': (taskService.loading || loading) && taskUpdating[task.id],
'draggable': !(taskService.loading || loading) || !taskUpdating[task.id],
'is-loading': (taskService.loading || taskLoading) && taskUpdating[task.id],
'draggable': !(taskService.loading || taskLoading) || !taskUpdating[task.id],
'has-light-text': !colorIsDark(task.hexColor) && task.hexColor !== `#${task.defaultColor}` && task.hexColor !== task.defaultColor,
}"
:style="{'background-color': task.hexColor !== '#' && task.hexColor !== `#${task.defaultColor}` ? task.hexColor : false}"
@ -268,9 +268,9 @@ import Filters from '../../../components/list/partials/filters'
import {filterObject} from '@/helpers/filterObject'
import {applyDrag} from '@/helpers/applyDrag'
import {mapState} from 'vuex'
import {LOADING} from '@/store/mutation-types'
import {saveListView} from '@/helpers/saveListView'
import Rights from '../../../models/rights.json'
import { LOADING, LOADING_MODULE } from '../../../store/mutation-types'
export default {
name: 'Kanban',
@ -333,7 +333,8 @@ export default {
computed: mapState({
buckets: state => state.kanban.buckets,
loadedListId: state => state.kanban.listId,
loading: LOADING,
loading: state => state[LOADING] && state[LOADING_MODULE] === 'kanban',
taskLoading: state => state[LOADING] && state[LOADING_MODULE] === 'tasks',
canWrite: state => state.currentList.maxRight > Rights.READ,
list: state => state.currentList,
}),