pixelfed/resources/assets/components/groups/GroupTopicFeed.vue

171 lines
3.8 KiB
Vue
Raw Normal View History

2024-07-10 05:52:08 +00:00
<template>
<div class="group-topic-feed-component">
<div v-if="isLoaded" class="bg-white py-5 border-bottom">
<div class="container">
<div class="d-flex justify-content-between align-items-center">
<div>
<h3 class="font-weight-bold mb-1">#{{ name }}</h3>
<p class="mb-0 lead text-muted">
<span>
Posts in <a :href="group.url" class="text-muted font-weight-bold">{{ group.name }}</a>
</span>
<span>·</span>
<span><i class="fas fa-globe"></i></span>
<span>·</span>
<span>{{ group.membership != 'all' ? 'Private' : 'Public'}} Group</span>
</p>
</div>
<!-- <div>
<button class="btn btn-light border btn-lg text-muted">
<i class="fas fa-ellipsis-h"></i>
</button>
</div> -->
</div>
</div>
</div>
<div v-if="isLoaded" class="row justify-content-center mt-3">
<div v-if="feed.length" class="col-12 col-md-5">
<group-status
v-for="(status, index) in feed"
:key="'gs:' + status.id + index"
:prestatus="status"
:profile="profile"
:group="group"
:show-group-chevron="true"
:group-id="gid" />
<div v-if="feed.length > 2">
<infinite-loading @infinite="infiniteFeed">
<div slot="no-more"></div>
<div slot="no-results"></div>
</infinite-loading>
</div>
</div>
<div v-else class="col-12 col-md-5 d-flex justify-content-center">
<div class="mt-5">
<p class="text-lighter text-center">
<i class="fal fa-exclamation-circle fa-4x"></i>
</p>
<p class="font-weight-bold text-muted">Cannot load any posts containg the <span class="font-weight-normal">#{{ name }}</span> hashtag</p>
<p class="text-left">
This can happen for a few reasons:
</p>
<ul class="text-left">
<li>There is a typo in the url</li>
<li>No posts exist that contain this hashtag</li>
<li>This hashtag has been banned by group admins</li>
<li>The hashtag is new or used infrequently</li>
<li>A technical issue has occured</li>
</ul>
</div>
</div>
</div>
</div>
</template>
<script type="text/javascript">
import GroupStatus from '@/groups/partials/GroupStatus.vue';
export default {
props: {
gid: {
type: String
},
name: {
type: String
}
},
components: {
GroupStatus
},
data() {
return {
isLoaded: false,
group: false,
profile: false,
feed: [],
page: 1,
ids: []
}
},
mounted() {
this.fetchProfile();
},
methods: {
fetchProfile() {
axios.get('/api/pixelfed/v1/accounts/verify_credentials')
.then(res => {
this.profile = res.data;
this.fetchGroup();
});
},
fetchGroup() {
axios.get('/api/v0/groups/' + this.gid)
.then(res => {
this.group = res.data;
this.fetchFeed();
});
},
fetchFeed() {
axios.get('/api/v0/groups/topics/tag', {
params: {
gid: this.gid,
name: this.name
}
}).then(res => {
this.feed = res.data;
this.isLoaded = true;
let self = this;
res.data.forEach(d => {
if(self.ids.indexOf(d.id) == -1) {
self.ids.push(d.id);
}
});
this.page++;
})
},
infiniteFeed($state) {
if(this.feed.length < 2) {
$state.complete();
return;
}
axios.get('/api/v0/groups/topics/tag', {
params: {
gid: this.gid,
name: this.name,
limit: 1,
page: this.page
},
}).then(res => {
if (res.data.length) {
let data = res.data;
let self = this;
data.forEach(d => {
if(self.ids.indexOf(d.id) == -1) {
self.ids.push(d.id);
self.feed.push(d);
}
});
$state.loaded();
this.page++;
} else {
$state.complete();
}
});
}
}
}
</script>