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

fix: loading spinner

Browse source
This commit is contained in:
kolaente 2021-12-29 20:59:30 +01:00
parent 950fdce111
commit 75cbc73b33
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B
1 changed files with 15 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/views/tasks/ShowTasks.vue
View file

@ -16,9 +16,15 @@
<h3 class="has-text-centered mt-6">{{ $t('task.show.noTasks') }}</h3> <h3 class="has-text-centered mt-6">{{ $t('task.show.noTasks') }}</h3>
<LlamaCool class="mt-5"/> <LlamaCool class="mt-5"/>
</template> </template>
<div :class="{ 'is-loading': loading}" class="spinner"></div>
<card :padding="false" class="has-overflow" :has-content="false" v-if="tasks && tasks.length > 0"> <div v-if="!hasTasks" :class="{ 'is-loading': loading}" class="spinner"></div>
<card
v-if="hasTasks"
:padding="false"
class="has-overflow"
:has-content="false"
:loading="loading"
>
<div class="p-2"> <div class="p-2">
<single-task-in-list <single-task-in-list
v-for="t in tasksSorted" v-for="t in tasksSorted"
@ -41,10 +47,6 @@ import {LOADING, LOADING_MODULE} from '@/store/mutation-types'
import LlamaCool from '@/assets/llama-cool.svg?component' import LlamaCool from '@/assets/llama-cool.svg?component'
import DatepickerWithRange from '@/components/date/datepickerWithRange' import DatepickerWithRange from '@/components/date/datepickerWithRange'
function formatDate(date) {
return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}`
}
export default { export default {
name: 'ShowTasks', name: 'ShowTasks',
components: { components: {
@ -68,7 +70,6 @@ export default {
this.loadPendingTasks() this.loadPendingTasks()
}, },
mounted() { mounted() {
// FIXME
setTimeout(() => this.showNothingToDo = true, 100) setTimeout(() => this.showNothingToDo = true, 100)
}, },
watch: { watch: {
@ -122,6 +123,9 @@ export default {
: sortByDueDate : sortByDueDate
}) })
}, },
hasTasks() {
return this.tasks && this.tasks.length > 0
},
...mapState({ ...mapState({
userAuthenticated: state => state.auth.authenticated, userAuthenticated: state => state.auth.authenticated,
loading: state => state[LOADING] && state[LOADING_MODULE] === 'tasks', loading: state => state[LOADING] && state[LOADING_MODULE] === 'tasks',
@ -175,13 +179,14 @@ export default {
filter_include_nulls: this.showNulls, filter_include_nulls: this.showNulls,
} }
// FIXME: Add button to show / hide overdue
if (!this.showAll) { if (!this.showAll) {
params.filter_by.push('due_date') params.filter_by.push('due_date')
params.filter_value.push(this.dateTo) params.filter_value.push(this.dateTo)
params.filter_comparator.push('less') params.filter_comparator.push('less')
// NOTE: Ideally we could also show tasks with a start or end date in the specified range, but the api
// is not capable (yet) of combining multiple filters with 'and' and 'or'.
if (!this.showOverdue) { if (!this.showOverdue) {
params.filter_by.push('due_date') params.filter_by.push('due_date')
params.filter_value.push(this.dateFrom) params.filter_value.push(this.dateFrom)