yunohost-admin/app/src/components/modals/ModalWaiting.vue
2024-08-13 11:52:06 +02:00

51 lines
1.3 KiB
Vue

<script setup lang="ts">
import { computed } from 'vue'
import MessageListGroup from '@/components/MessageListGroup.vue'
import type { Obj } from '@/types/commons'
const props = defineProps<{
request: Obj
}>()
const hasMessages = computed(() => {
return props.request.messages && props.request.messages.length > 0
})
const progress = computed(() => {
const progress = props.request.progress
if (!progress) return null
return {
values: progress,
max: progress.reduce((sum, value) => sum + value, 0),
}
})
</script>
<template>
<!-- This card receives style from `ViewLockOverlay` if used inside it -->
<BCardBody>
<BCardTitle
class="text-center mt-4"
v-t="hasMessages ? 'api.processing' : 'api_waiting'"
/>
<!-- PROGRESS BAR -->
<BProgress v-if="progress" class="my-4" :max="progress.max" height=".5rem">
<BProgressBar variant="success" :value="progress.values[0]" />
<BProgressBar variant="warning" :value="progress.values[1]" animated />
<BProgressBar variant="secondary" :value="progress.values[2]" striped />
</BProgress>
<!-- OR SPINNER -->
<YSpinner v-else class="my-4" />
<MessageListGroup
v-if="hasMessages"
:messages="request.messages"
bordered
fixed-height
auto-scroll
:limit="100"
/>
</BCardBody>
</template>