repod/src/components/Discover/TopList.vue

74 lines
1.2 KiB
Vue
Raw Normal View History

2023-07-02 22:12:40 +00:00
<template>
2023-08-24 16:22:40 +00:00
<div>
2023-12-23 21:49:23 +00:00
<Loading v-if="loading" />
2023-08-24 16:22:40 +00:00
<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') }}
2023-07-03 06:42:00 +00:00
</p>
2023-08-24 16:22:40 +00:00
</div>
2023-07-02 22:12:40 +00:00
</template>
<script>
2023-12-23 21:49:23 +00:00
import Loading from '../Atoms/Loading.vue'
2023-07-25 20:07:35 +00:00
import TopItem from './TopItem.vue'
2023-07-02 22:12:40 +00:00
import axios from '@nextcloud/axios'
import { generateUrl } from '@nextcloud/router'
import { showError } from '@nextcloud/dialogs'
export default {
2023-07-25 20:07:35 +00:00
name: 'TopList',
2023-07-02 22:12:40 +00:00
components: {
2023-12-23 21:49:23 +00:00
Loading,
2023-07-25 20:07:35 +00:00
TopItem,
2023-07-02 22:12:40 +00:00
},
data() {
return {
tops: [],
loading: true,
}
},
async mounted() {
2023-07-28 00:37:57 +00:00
try {
this.loading = true
2023-08-22 18:14:15 +00:00
const toplist = await axios.get(generateUrl('/apps/repod/toplist'))
this.tops = toplist.data
2023-07-28 00:37:57 +00:00
} catch (e) {
console.error(e)
showError(t('Could not fetch tops'))
} finally {
this.loading = false
}
2023-07-02 22:12:40 +00:00
},
}
</script>
<style scoped>
2023-08-24 16:22:40 +00:00
div {
margin: 2rem 0;
}
li {
flex-basis: 15%;
}
p {
2023-08-23 15:54:09 +00:00
font-size: small;
margin: .5rem;
2023-08-24 16:22:40 +00:00
text-align: right;
2023-08-23 15:54:09 +00:00
}
2023-08-24 16:22:40 +00:00
ul {
2023-07-02 22:12:40 +00:00
display: flex;
flex-wrap: wrap;
gap: 2rem 5%;
justify-content: center;
}
</style>