yunohost-admin/app/src/views/backup/BackupList.vue
2020-10-14 16:59:39 +02:00

77 lines
1.8 KiB
Vue

<template>
<div class="backup-list">
<div class="actions">
<div class="buttons ml-auto">
<b-button variant="success" :to="{ name: 'backup-create' }">
<icon iname="plus" /> {{ $t('backup_new') }}
</b-button>
</div>
</div>
<b-alert v-if="!archives" variant="warning" show>
<icon iname="exclamation-triangle" /> {{ $t('backups_no') }}
</b-alert>
<b-list-group v-else>
<b-list-group-item
v-for="{ name, created_at, path, size } in archives" :key="name"
:to="{ name: 'backup-info', params: { name, id }}"
:title="created_at | readableDate"
class="d-flex justify-content-between align-items-center pr-0"
>
<div>
<h5>
{{ created_at | distanceToNow }}
<small>{{ name }} ({{ size | humanSize }})</small>
</h5>
<p class="mb-0">{{ path }}</p>
</div>
<icon iname="chevron-right" class="lg fs-sm ml-auto" />
</b-list-group-item>
</b-list-group>
</div>
</template>
<script>
import api from '@/api'
import { distanceToNow, readableDate } from '@/filters/date'
import { humanSize } from '@/filters/size'
export default {
name: 'BackupList',
props: {
id: {
type: String,
required: true
}
},
data () {
return {
archives: undefined
}
},
filters: {
distanceToNow,
readableDate,
humanSize
},
methods: {
fetchData () {
api.get('backup/archives?with_info').then(({ archives }) => {
// FIXME use archives = null if no archives
this.archives = Object.entries(archives).map(([name, data]) => {
data.name = name
return data
}).reverse()
})
}
},
created () {
this.fetchData()
}
}
</script>