repod/src/components/Discover/TopList.vue
Michel Roux 893f3acaed
All checks were successful
repod / nextcloud (push) Successful in 1m17s
repod / xml (push) Successful in 25s
repod / nodejs (push) Successful in 2m19s
Loading to Atoms
2023-12-23 22:49:23 +01:00

74 lines
1.2 KiB
Vue

<template>
<div>
<Loading v-if="loading" />
<ul v-if="!loading" class="tops">
<li v-for="top in tops" :key="top.link">
<TopItem :author="top.author"
:image-url="top.imageUrl"
:link="top.link"
:title="top.title" />
</li>
</ul>
<p v-if="!loading" class="caption">
{{ t('Suggests by fyyd') }}
</p>
</div>
</template>
<script>
import Loading from '../Atoms/Loading.vue'
import TopItem from './TopItem.vue'
import axios from '@nextcloud/axios'
import { generateUrl } from '@nextcloud/router'
import { showError } from '@nextcloud/dialogs'
export default {
name: 'TopList',
components: {
Loading,
TopItem,
},
data() {
return {
tops: [],
loading: true,
}
},
async mounted() {
try {
this.loading = true
const toplist = await axios.get(generateUrl('/apps/repod/toplist'))
this.tops = toplist.data
} catch (e) {
console.error(e)
showError(t('Could not fetch tops'))
} finally {
this.loading = false
}
},
}
</script>
<style scoped>
div {
margin: 2rem 0;
}
li {
flex-basis: 15%;
}
p {
font-size: small;
margin: .5rem;
text-align: right;
}
ul {
display: flex;
flex-wrap: wrap;
gap: 2rem 5%;
justify-content: center;
}
</style>