Improve settings-modal async loading, update vue to 2.6.11 to be able
to use Vue.observable, to implmement resettable async component
This commit is contained in:
parent
a6ca923a76
commit
7951192cd9
7 changed files with 110 additions and 9 deletions
13
src/components/big_spinner/big_spinner.vue
Normal file
13
src/components/big_spinner/big_spinner.vue
Normal file
|
@ -0,0 +1,13 @@
|
|||
<template>
|
||||
<div class="big-spinner">
|
||||
<i class="icon-spin4 animate-spin" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.big-spinner {
|
||||
font-size: 15em;
|
||||
line-height: 0;
|
||||
opacity: .6;
|
||||
}
|
||||
</style>
|
41
src/components/error_window/error_window.vue
Normal file
41
src/components/error_window/error_window.vue
Normal file
|
@ -0,0 +1,41 @@
|
|||
<template>
|
||||
<div class="error-window panel">
|
||||
<div class="panel-heading">
|
||||
<span class="title">
|
||||
{{ $t('general.generic_error') }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<p>
|
||||
{{ $t('general.error_retry') }}
|
||||
</p>
|
||||
<button
|
||||
class="btn"
|
||||
@click="closeAllModals"
|
||||
>
|
||||
{{ $t('general.close') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
closeAllModals () {
|
||||
// TODO make a global hook to close all modals?
|
||||
this.$store.dispatch('closeSettingsModal')
|
||||
this.$emit('resetAsyncComponent')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.error-window {
|
||||
.btn {
|
||||
margin: .5em;
|
||||
padding: .5em 2em;
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -1,9 +1,20 @@
|
|||
import Modal from 'src/components/modal/modal.vue'
|
||||
import BigSpinner from 'src/components/big_spinner/big_spinner.vue'
|
||||
import ErrorWindow from 'src/components/error_window/error_window.vue'
|
||||
import getResettableAsyncComponent from 'src/services/resettable_async_component.js'
|
||||
|
||||
const SettingsModal = {
|
||||
components: {
|
||||
Modal,
|
||||
SettingsModalContent: () => import('./settings_modal_content.vue')
|
||||
SettingsModalContent: getResettableAsyncComponent(
|
||||
() => import('./settings_modal_content.vue'),
|
||||
{
|
||||
loading: BigSpinner,
|
||||
error: ErrorWindow,
|
||||
delay: 0,
|
||||
timeout: 3000
|
||||
}
|
||||
)
|
||||
},
|
||||
computed: {
|
||||
modalActivated () {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue