vikunja
/
frontend
Archived
6
39
Fork 49
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

feat: defer everything until the api config is loaded #926

Merged
konrad merged 27 commits from feature/ready-state into main 2021-11-13 19:49:03 +00:00
Conversation 3 Commits 27 Files Changed 10 +36 -33
2 changed files with 36 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit f0b2d7c59d - Show all commits

32
src/App.vue
View File

@ -10,12 +10,6 @@
<content-no-auth v-else/>
<notification/>
</div>
<div class="app offline" v-if="!online">
<div class="offline-message">
<h1>You are offline.</h1>
<p>Please check your network connection and try again.</p>
</div>
</div>
konrad marked this conversation as resolved Outdated
dpschen commented 2021-11-04 15:59:15 +00:00
Outdated
Review
Copy Link

Didn't test, but just from reading:
might it be that the not offline check needs to be outside of <ready>?

Else the api might not be reached because we are offline. => slot is never exposed.

Didn't test, but just from reading: might it be that the not offline check needs to be outside of `<ready>`? Else the api might not be reached because we are offline. => slot is never exposed.
konrad commented 2021-11-10 18:51:25 +00:00
Outdated
Review
Copy Link

I think that's pretty much the case. Moved the offline overlay to the ready component.

I think that's pretty much the case. Moved the offline overlay to the ready component.
<transition name="fade">
<keyboard-shortcuts v-if="keyboardShortcutsActive"/>
@ -118,29 +112,3 @@ export default defineComponent({
<style lang="scss">
@import '@/styles/global.scss';
</style>
<style lang="scss" scoped>
.offline {
background: url('@/assets/llama-nightscape.jpg') no-repeat center;
background-size: cover;
height: 100vh;
.offline-message {
text-align: center;
position: absolute;
width: 100vw;
bottom: 5vh;
color: $white;
padding: 0 1rem;
h1 {
font-weight: bold;
font-size: 1.5rem;
text-align: center;
color: $white;
font-weight: 700 !important;
font-size: 1.5rem;
}
}
}
</style>

37
src/components/misc/ready.vue
View File

@ -1,5 +1,11 @@
<template>
<template v-if="ready">
<div class="app offline" v-if="!online">
<div class="offline-message">
<h1>You are offline.</h1>
<p>Please check your network connection and try again.</p>
</div>
</div>
<template v-else-if="ready">
<slot/>
</template>
<section v-else-if="error !== ''">
@ -36,6 +42,8 @@
import logoUrl from '@/assets/logo.svg'
import ApiConfig from '@/components/misc/api-config'
import NoAuthWrapper from '@/components/misc/no-auth-wrapper'
import {mapState} from 'vuex'
import {ONLINE} from '@/store/mutation-types'
const ERROR_NO_API_URL = 'noApiUrlProvided'
@ -62,6 +70,9 @@ export default {
showLoading() {
return !this.ready && this.error === ''
},
...mapState({
online: ONLINE,
}),
konrad marked this conversation as resolved Outdated
dpschen commented 2021-11-10 19:28:47 +00:00
Outdated
Review
Copy Link

ONLINE is no mutation type. It's a state.

`ONLINE` is no mutation type. It's a state.
konrad commented 2021-11-10 19:53:07 +00:00
Outdated
Review
Copy Link

Right, fixed.

Right, fixed.
},
methods: {
load() {
@ -108,4 +119,28 @@ export default {
}
}
}
.offline {
background: url('@/assets/llama-nightscape.jpg') no-repeat center;
background-size: cover;
height: 100vh;
.offline-message {
text-align: center;
position: absolute;
width: 100vw;
bottom: 5vh;
color: $white;
padding: 0 1rem;
h1 {
font-weight: bold;
font-size: 1.5rem;
text-align: center;
color: $white;
font-weight: 700 !important;
font-size: 1.5rem;
}
}
}
</style>