add loading and error drawing
This commit is contained in:
@ -4,7 +4,7 @@
|
||||
<div class="w-4/6 px-4 py-2 text-gray-500 font-semibold border-r border-gray-300">Nom</div>
|
||||
<div class="w-2/6 px-4 py-2 text-gray-500 font-semibold">Taille</div>
|
||||
</div>
|
||||
<div class="overflow-y-auto">
|
||||
<div v-if="!isLoading && zipContent.length !== 0" class="overflow-y-auto">
|
||||
<div v-for="(file, index) in sortedFiles" :key="file.fullPath" class="flex flex-col">
|
||||
|
||||
<div
|
||||
@ -66,6 +66,12 @@
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="isLoading" class="flex h-full items-center justify-center">
|
||||
<component :is="Loading" class="text-white w-24 h-24 animate-spin" size="48" />
|
||||
</div>
|
||||
<div v-if="!isLoading && zipContent.length === 0" class="flex h-full items-center justify-center">
|
||||
<span class="text-gray-500">Aucun contenu à afficher</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -73,6 +79,8 @@
|
||||
import JSZip from 'jszip';
|
||||
import ChevronRightIcon from 'vue-material-design-icons/ChevronRight.vue';
|
||||
import ChevronDownIcon from 'vue-material-design-icons/ChevronDown.vue';
|
||||
import Loading from 'vue-material-design-icons/Loading.vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
name: 'WebContentViewer',
|
||||
@ -83,7 +91,9 @@ export default {
|
||||
archiveUrl: '',
|
||||
token: '',
|
||||
ChevronRightIcon,
|
||||
ChevronDownIcon
|
||||
ChevronDownIcon,
|
||||
isLoading: ref(false),
|
||||
Loading,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@ -120,6 +130,7 @@ export default {
|
||||
},
|
||||
},
|
||||
async mounted() {
|
||||
this.isLoading = true;
|
||||
await this.loadZipContent();
|
||||
const webTransferDiv = document.getElementById('archiveInfos');
|
||||
if (webTransferDiv) {
|
||||
@ -128,6 +139,7 @@ export default {
|
||||
} else {
|
||||
console.error('Pas d\'informations pour recuperer l\'archive');
|
||||
}
|
||||
this.isLoading = false;
|
||||
},
|
||||
methods: {
|
||||
async loadZipContent() {
|
||||
|
Reference in New Issue
Block a user