mirror of
https://github.com/pixelfed/pixelfed.git
synced 2024-12-30 08:53:17 +00:00
239 lines
8.5 KiB
Vue
239 lines
8.5 KiB
Vue
<template>
|
|
<div class="profile-timeline-component">
|
|
<div v-if="isLoaded" class="container-fluid mt-3">
|
|
<div v-if="profile && profile.hasOwnProperty('moved') && profile.moved.hasOwnProperty('id') && !showMoved">
|
|
<div class="row justify-content-center">
|
|
<div class="col-12 col-md-6">
|
|
<div class="card shadow-none border card-body mt-5 mb-3 ft-std" style="border-radius: 20px;">
|
|
<p class="lead font-weight-bold text-center mb-0"><i class="far fa-exclamation-triangle mr-2"></i>This account has indicated their new account is:</p>
|
|
</div>
|
|
<div class="card shadow-none border" style="border-radius: 20px;">
|
|
<div class="card-body ft-std">
|
|
<div class="d-flex justify-content-between align-items-center" style="gap: 1rem;">
|
|
<div class="d-flex align-items-center flex-shrink-1" style="gap: 1rem;">
|
|
<img :src="profile.moved.avatar" width="50" height="50" class="rounded-circle">
|
|
<p class="h3 font-weight-light mb-0 text-break">@{{ profile.moved.acct }}</p>
|
|
</div>
|
|
|
|
<div class="d-flex flex-grow-1 justify-content-end" style="min-width: 200px;">
|
|
<router-link
|
|
:to="`/i/web/profile/${profile.moved.id}`"
|
|
class="btn btn-outline-primary rounded-pill font-weight-bold"
|
|
>View New Account</router-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<p class="lead text-center ft-std">
|
|
<a
|
|
href="#"
|
|
class="btn btn-primary btn-lg rounded-pill font-weight-bold px-5"
|
|
@click.prevent="showMoved = true">Proceed</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else class="row">
|
|
<div class="col-md-3 d-md-block px-md-3 px-xl-5">
|
|
<profile-sidebar
|
|
:profile="profile"
|
|
:relationship="relationship"
|
|
:user="curUser"
|
|
v-on:back="goBack"
|
|
v-on:toggletab="toggleTab"
|
|
v-on:updateRelationship="updateRelationship"
|
|
@follow="follow"
|
|
@unfollow="unfollow" />
|
|
</div>
|
|
|
|
<div class="col-md-8 px-md-5">
|
|
<component
|
|
v-bind:is="getTabComponentName()"
|
|
:key="getTabComponentName() + profile.id"
|
|
:profile="profile"
|
|
:relationship="relationship" />
|
|
</div>
|
|
</div>
|
|
|
|
<drawer />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script type="text/javascript">
|
|
import Drawer from './partials/drawer.vue';
|
|
import ProfileFeed from './partials/profile/ProfileFeed.vue';
|
|
import ProfileSidebar from './partials/profile/ProfileSidebar.vue';
|
|
import ProfileFollowers from './partials/profile/ProfileFollowers.vue';
|
|
import ProfileFollowing from './partials/profile/ProfileFollowing.vue';
|
|
|
|
export default {
|
|
props: {
|
|
id: {
|
|
type: String
|
|
},
|
|
|
|
profileId: {
|
|
type: String
|
|
},
|
|
|
|
username: {
|
|
type: String
|
|
},
|
|
|
|
cachedProfile: {
|
|
type: Object
|
|
},
|
|
|
|
cachedUser: {
|
|
type: Object
|
|
}
|
|
},
|
|
|
|
components: {
|
|
"drawer": Drawer,
|
|
"profile-feed": ProfileFeed,
|
|
"profile-sidebar": ProfileSidebar,
|
|
"profile-followers": ProfileFollowers,
|
|
"profile-following": ProfileFollowing
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
isLoaded: false,
|
|
curUser: undefined,
|
|
tab: "index",
|
|
profile: undefined,
|
|
relationship: undefined,
|
|
showMoved: false,
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
this.init();
|
|
},
|
|
|
|
watch: {
|
|
'$route': 'init'
|
|
},
|
|
|
|
methods: {
|
|
init() {
|
|
this.tab = 'index';
|
|
this.isLoaded = false;
|
|
this.relationship = undefined;
|
|
this.owner = false;
|
|
|
|
if(this.cachedProfile && this.cachedUser) {
|
|
this.curUser = this.cachedUser;
|
|
this.profile = this.cachedProfile;
|
|
// this.fetchPosts();
|
|
// this.isLoaded = true;
|
|
this.fetchRelationship();
|
|
} else {
|
|
this.curUser = window._sharedData.user;
|
|
this.fetchProfile();
|
|
}
|
|
},
|
|
|
|
getTabComponentName() {
|
|
switch(this.tab) {
|
|
case 'index':
|
|
return "profile-feed";
|
|
break;
|
|
|
|
default:
|
|
return `profile-${this.tab}`;
|
|
break;
|
|
}
|
|
},
|
|
|
|
fetchProfile() {
|
|
let id = this.profileId ? this.profileId : this.id;
|
|
axios.get('/api/pixelfed/v1/accounts/' + id)
|
|
.then(res => {
|
|
this.profile = res.data;
|
|
if(res.data.id == this.curUser.id) {
|
|
this.owner = true;
|
|
// this.isLoaded = true;
|
|
// this.loaded();
|
|
// this.fetchPosts();
|
|
this.fetchRelationship();
|
|
} else {
|
|
this.owner = false;
|
|
this.fetchRelationship();
|
|
}
|
|
})
|
|
.catch(err => {
|
|
this.$router.push('/i/web/404');
|
|
});
|
|
},
|
|
|
|
fetchRelationship() {
|
|
if(this.owner) {
|
|
this.relationship = {};
|
|
this.isLoaded = true;
|
|
return;
|
|
}
|
|
|
|
axios.get('/api/v1/accounts/relationships', {
|
|
params: {
|
|
'id[]': this.profile.id
|
|
}
|
|
}).then(res => {
|
|
this.relationship = res.data[0];
|
|
this.isLoaded = true;
|
|
})
|
|
},
|
|
|
|
toggleTab(tab) {
|
|
this.tab = tab;
|
|
},
|
|
|
|
goBack() {
|
|
this.$router.go(-1);
|
|
},
|
|
|
|
unfollow() {
|
|
axios.post('/api/v1/accounts/' + this.profile.id + '/unfollow')
|
|
.then(res => {
|
|
this.$store.commit('updateRelationship', [res.data])
|
|
this.relationship = res.data;
|
|
if(this.profile.locked) {
|
|
location.reload();
|
|
}
|
|
this.profile.followers_count--;
|
|
}).catch(err => {
|
|
swal('Oops!', 'An error occured when attempting to unfollow this account.', 'error');
|
|
this.relationship.following = true;
|
|
});
|
|
},
|
|
|
|
follow() {
|
|
axios.post('/api/v1/accounts/' + this.profile.id + '/follow')
|
|
.then(res => {
|
|
this.$store.commit('updateRelationship', [res.data])
|
|
this.relationship = res.data;
|
|
if(this.profile.locked) {
|
|
this.relationship.requested = true;
|
|
}
|
|
this.profile.followers_count++;
|
|
}).catch(err => {
|
|
swal('Oops!', 'An error occured when attempting to follow this account.', 'error');
|
|
this.relationship.following = false;
|
|
});
|
|
},
|
|
|
|
updateRelationship(val) {
|
|
this.relationship = val;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.profile-timeline-component {
|
|
margin-bottom: 10rem;
|
|
}
|
|
</style>
|