chris/pixelfed
1
0
Fork 0
forked from mirror/pixelfed
Code Pull requests Activity

Update Profile.vue component

Browse source
This commit is contained in:
Daniel Supernault 2020-03-14 21:22:13 -06:00
parent 7bf9e78f8e
commit e3280c11ca
No known key found for this signature in database
GPG key ID: 0DEF1C662C9033F7
1 changed files with 68 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

78
resources/assets/js/components/Profile.vue
View file

@ -355,26 +355,47 @@
</div>
</div>
</div>
<b-modal ref="followingModal"
<b-modal
v-if="profile && following"
ref="followingModal"
id="following-modal"
hide-footer
centered
title="Following"
body-class="list-group-flush py-3 px-0"
dialog-class="follow-modal">
<div class="list-group">
<div v-if="!loading" class="list-group" style="min-height: 60vh;">
<div v-if="owner == true" class="list-group-item border-0 pt-0 px-0 mt-n2 mb-3">
<span class="d-flex px-4 pb-0 align-items-center">
<i class="fas fa-search text-lighter"></i>
<input type="text" class="form-control border-0 shadow-0 no-focus" placeholder="Search Following..." v-model="followingModalSearch" v-on:keyup="followingModalSearchHandler">
</span>
</div>
<div v-if="owner == true" class="btn-group rounded-0 mt-n3 mb-3 border-top" role="group" aria-label="Following">
<!-- <button type="button" :class="[followingModalTab == 'following' ? ' btn btn-light py-3 rounded-0 font-weight-bold modal-tab-active' : 'btn btn-light py-3 rounded-0 font-weight-bold']" style="font-size: 12px;">FOLLOWING</button> -->
<!-- <button type="button" class="btn btn-light py-3 rounded-0 text-muted font-weight-bold" style="font-size: 12px;">MUTED</button>
<button type="button" class="btn btn-light py-3 rounded-0 text-muted font-weight-bold" style="font-size: 12px;">BLOCKED</button> -->
</div>
<div v-else class="btn-group rounded-0 mt-n3 mb-3" role="group" aria-label="Following">
<!-- <button type="button" class="btn btn-light py-3 rounded-0 border-primary border-left-0 border-right-0 border-top-0 font-weight-bold" style="font-size: 12px;" @click="followingModalTab = 'following'">FOLLOWING</button>
<button type="button" class="btn btn-light py-3 rounded-0 text-muted font-weight-bold" style="font-size: 12px;" @click="followingModalTab = 'mutual'">MUTUAL</button>
<button type="button" class="btn btn-light py-3 rounded-0 text-muted font-weight-bold" style="font-size: 12px;" @click="followingModalTab = 'blocked'">BLOCKED</button> -->
</div>
<div class="list-group-item border-0 py-1" v-for="(user, index) in following" :key="'following_'+index">
<div class="media">
<a :href="user.url">
<img class="mr-3 rounded-circle box-shadow" :src="user.avatar" :alt="user.username + '’s avatar'" width="30px" loading="lazy">
</a>
<div class="media-body">
<div class="media-body text-truncate">
<p class="mb-0" style="font-size: 14px">
<a :href="user.url" class="font-weight-bold text-dark">
{{user.username}}
</a>
</p>
<p class="text-muted mb-0" style="font-size: 14px">
<p v-if="!user.local" class="text-muted mb-0 text-truncate mr-3" style="font-size: 14px" :title="user.acct" data-toggle="dropdown" data-placement="bottom">
<span class="font-weight-bold">{{user.acct.split('@')[0]}}</span><span class="text-lighter">&commat;{{user.acct.split('@')[1]}}</span>
</p>
<p v-else class="text-muted mb-0 text-truncate" style="font-size: 14px">
{{user.display_name}}
</p>
</div>
@ -383,12 +404,12 @@
</div>
</div>
</div>
<div v-if="following.length == 0" class="list-group-item border-0">
<div class="list-group-item border-0">
<p class="p-3 text-center mb-0 lead"></p>
<div v-if="followingModalSearch && following.length == 0" class="list-group-item border-0">
<div class="list-group-item border-0 pt-5">
<p class="p-3 text-center mb-0 lead">No Results Found</p>
</div>
</div>
<div v-if="followingMore" class="list-group-item text-center" v-on:click="followingLoadMore()">
<div v-if="following.length > 0 && followingMore" class="list-group-item text-center" v-on:click="followingLoadMore()">
<p class="mb-0 small text-muted font-weight-light cursor-pointer">Load more</p>
</div>
</div>
@ -565,6 +586,14 @@
padding: 6px;
background:#fff;
}
.no-focus {
border-color: none;
outline: 0;
box-shadow: none;
}
.modal-tab-active {
border-bottom: 1px solid #08d;
}
</style>
<script type="text/javascript">
import VueMasonry from 'vue-masonry-css'
@ -608,7 +637,10 @@
isMobile: false,
ctxEmbedPayload: null,
copiedEmbed: false,
hasStory: null
hasStory: null,
followingModalSearch: null,
followingModalSearchCache: null,
followingModalTab: 'following',
}
},
beforeMount() {
@ -1013,6 +1045,7 @@
})
.then(res => {
this.following = res.data;
this.followingModalSearchCache = res.data;
this.followingCursor++;
if(res.data.length < 10) {
this.followingMore = false;
@ -1059,15 +1092,18 @@
}
axios.get('/api/pixelfed/v1/accounts/'+this.profile.id+'/following', {
params: {
page: this.followingCursor
page: this.followingCursor,
fbu: this.followingModalSearch
}
})
.then(res => {
if(res.data.length > 0) {
this.following.push(...res.data);
this.followingCursor++;
this.followingModalSearchCache = this.following;
}
if(res.data.length < 10) {
this.followingModalSearchCache = this.following;
this.followingMore = false;
}
});
@ -1186,6 +1222,28 @@
storyRedirect() {
window.location.href = '/stories/' + this.profileUsername;
},
followingModalSearchHandler() {
let self = this;
let q = this.followingModalSearch;
if(q.length == 0) {
this.following = this.followingModalSearchCache;
this.followingModalSearch = null;
}
if(q.length > 0) {
let url = '/api/pixelfed/v1/accounts/' +
self.profileId + '/following?page=1&fbu=' +
q;
axios.get(url).then(res => {
this.following = res.data;
}).catch(err => {
self.following = self.followingModalSearchCache;
self.followingModalSearch = null;
});
}
}
}
}