to use Vue.observable, to implmement resettable async componentlocalforage-experiments
parent
a6ca923a76
commit
7951192cd9
@ -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>
|
@ -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>
|
@ -0,0 +1,32 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
|
||||||
|
/* By default async components don't have any way to recover, if component is
|
||||||
|
* failed, it is failed forever. This helper tries to remedy that by recreating
|
||||||
|
* async component when retry is requested (by user). You need to emit the
|
||||||
|
* `resetAsyncComponent` event from child to reset the component. Generally,
|
||||||
|
* this should be done from error component but could be done from loading or
|
||||||
|
* actual target component itself if needs to be.
|
||||||
|
*/
|
||||||
|
function getResettableAsyncComponent (asyncComponent, options) {
|
||||||
|
const asyncComponentFactory = () => () => ({
|
||||||
|
component: asyncComponent(),
|
||||||
|
...options
|
||||||
|
})
|
||||||
|
|
||||||
|
const observe = Vue.observable({ c: asyncComponentFactory() })
|
||||||
|
|
||||||
|
return {
|
||||||
|
functional: true,
|
||||||
|
render (createElement, { data, children }) {
|
||||||
|
// emit event resetAsyncComponent to reloading
|
||||||
|
data.on = {}
|
||||||
|
data.on.resetAsyncComponent = () => {
|
||||||
|
observe.c = asyncComponentFactory()
|
||||||
|
// parent.$forceUpdate()
|
||||||
|
}
|
||||||
|
return createElement(observe.c, data, children)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default getResettableAsyncComponent
|
Loading…
Reference in new issue