pixelfed/resources/assets/components/groups/partials/SelfGroups.vue

172 lines
5.3 KiB
Vue

<template>
<div class="my-groups-component">
<div class="list-container">
<div v-if="isLoaded">
<div class="list-group">
<a
v-for="(group, index) in groups" :key="'rec:'+group.id+':'+index"
class="list-group-item text-decoration-none"
:href="group.url">
<group-list-card
:group="group"
:truncateDescriptionLength="140"
:showStats="true" />
<!-- <div class="media align-items-center">
<img v-if="group.metadata && group.metadata.hasOwnProperty('header')" :src="group.metadata.header.url" class="mr-3 border rounded" style="width: 100px; height: 60px;object-fit: cover;padding:5px;">
<div v-else class="mr-3 border rounded" style="width: 100px; height: 60px;padding: 5px;">
<div class="bg-primary d-flex align-items-center justify-content-center" style="width: 100%; height:100%;">
<i class="fal fa-users text-white fa-lg"></i>
</div>
</div>
<div class="media-body">
<p class="h5 font-weight-bold mb-1 text-dark">
{{ group.name || 'Untitled Group' }}
</p>
<p class="text-muted small mb-1 read-more">
{{ truncate(group.description) }}
</p>
<p class="mb-0">
<span class="text-muted mr-2">
<i class="far fa-users"></i>
<strong class="small">{{ prettyCount(group.member_count) }}</strong>
</span>
<span class="member-label">
{{ group.self.role }}
</span>
<span v-if="!group.local" class="remote-label ml-2">
<i class="fal fa-globe"></i> Remote
</span>
</p>
</div>
</div> -->
</a>
</div>
<p v-if="canLoadMore">
<button
class="btn btn-primary btn-block font-weight-bold mt-3"
@click.prevent="loadMore"
:disabled="loadingMore">
Load more
</button>
</p>
</div>
<div v-else class="d-flex justify-content-center">
<b-spinner/>
</div>
</div>
</div>
</template>
<script type="text/javascript">
import GroupListCard from './GroupListCard.vue';
export default {
props: {
profile: {
type: Object
}
},
components: {
"group-list-card": GroupListCard
},
data() {
return {
isLoaded: false,
groups: [],
canLoadMore: false,
loadingMore: false,
page: 1
}
},
mounted() {
this.fetchSelf();
},
methods: {
fetchSelf() {
axios.get('/api/v0/groups/self/list')
.then(res => {
let data = res.data.filter(g => {
return g.hasOwnProperty('id') && g.hasOwnProperty('url');
})
this.groups = data;
this.canLoadMore = res.data.length == 4;
this.page++;
this.isLoaded = true;
});
},
loadMore() {
this.loadingMore = true;
axios.get('/api/v0/groups/self/list', {
params: {
page: this.page
}
})
.then(res => {
let data = res.data.filter(g => {
return g.hasOwnProperty('id') && g.hasOwnProperty('url');
})
this.groups.push(...data);
this.canLoadMore = res.data.length == 4;
this.page++;
this.loadingMore = false;
});
},
prettyCount(val) {
return App.util.format.count(val);
},
truncate(str) {
if(str.length <= 140) {
return str;
}
return str.substr(0, 140) + ' ...';
}
}
}
</script>
<style lang="scss" scoped>
.my-groups-component {
.list-container {
margin-bottom: 30vh;
}
.member-label {
padding: 2px 5px;
font-size: 12px;
color: rgba(75, 119, 190, 1);
background:rgba(137, 196, 244, 0.2);
border:1px solid rgba(137, 196, 244, 0.3);
font-weight:400;
text-transform: capitalize;
border-radius: 3px;
}
.remote-label {
padding: 2px 5px;
font-size: 12px;
color: #4B5563;
background: #F3F4F6;
border:1px solid #E5E7EB;
font-weight:400;
text-transform: capitalize;
border-radius: 3px;
}
}
</style>