scinote-web/app/javascript/vue/protocol/storage_usage.vue

35 lines
1 KiB
Vue
Raw Normal View History

<template>
<div class="storage-usage">
<div class="progress-container">
<div class="progress-bar" :style="`width:${storagePrecentage}%`"></div>
</div>
<span class="progress-message" v-if="this.step.attributes.storage_limit.total > 0">
2022-05-26 21:01:52 +08:00
{{ i18n.t('protocols.steps.space_used_label', {
used: this.step.attributes.storage_limit.used_human,
limit: this.step.attributes.storage_limit.total_human
}) }}
</span>
<span class="progress-message" v-else>
2022-05-26 21:01:52 +08:00
{{ i18n.t('protocols.steps.space_used_label_unlimited', {used: this.step.attributes.storage_limit.used_human}) }}
</span>
</div>
</template>
<script>
export default {
name: 'StorageUsage',
props: {
step: {
type: Object,
required: true,
},
},
computed: {
storagePrecentage() {
let used = this.step.attributes.storage_limit.used;
let total = this.step.attributes.storage_limit.total;
return ((used / total) * 100);
}
}
}
</script>