mirror of
https://github.com/pixelfed/pixelfed.git
synced 2024-12-26 06:53:17 +00:00
Add Profile components
This commit is contained in:
Daniel Supernault
parent
f5dbc8281a
commit
9817025578
3 changed files with 456 additions and 0 deletions
205
resources/assets/components/Profile.vue
Normal file
205
resources/assets/components/Profile.vue
Normal file
|
|
@ -0,0 +1,205 @@
|
|||
<template>
|
||||
<div class="profile-timeline-component">
|
||||
<div v-if="isLoaded" class="container-fluid mt-3">
|
||||
<div 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
|
||||
}
|
||||
},
|
||||
|
||||
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>
|
||||
127
resources/assets/components/ProfileFollowers.vue
Normal file
127
resources/assets/components/ProfileFollowers.vue
Normal file
|
|
@ -0,0 +1,127 @@
|
|||
<template>
|
||||
<div class="profile-timeline-component">
|
||||
<div v-if="isLoaded" class="container-fluid mt-3">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-8 offset-md-2 px-md-5">
|
||||
<profile-followers
|
||||
:profile="profile"
|
||||
:relationship="relationship"
|
||||
@back="goBack()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<drawer />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script type="text/javascript">
|
||||
import Drawer from './partials/drawer.vue';
|
||||
import ProfileFollowers from './partials/profile/ProfileFollowers.vue';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
id: {
|
||||
type: String
|
||||
},
|
||||
|
||||
profileId: {
|
||||
type: String
|
||||
},
|
||||
|
||||
username: {
|
||||
type: String
|
||||
},
|
||||
|
||||
cachedProfile: {
|
||||
type: Object
|
||||
},
|
||||
|
||||
cachedUser: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
"drawer": Drawer,
|
||||
"profile-followers": ProfileFollowers
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
isLoaded: false,
|
||||
curUser: undefined,
|
||||
profile: undefined,
|
||||
relationship: undefined
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
|
||||
watch: {
|
||||
'$route': 'init'
|
||||
},
|
||||
|
||||
methods: {
|
||||
init() {
|
||||
this.isLoaded = false;
|
||||
this.relationship = undefined;
|
||||
this.owner = false;
|
||||
|
||||
if(this.cachedProfile && this.cachedUser) {
|
||||
this.curUser = this.cachedUser;
|
||||
this.profile = this.cachedProfile;
|
||||
this.fetchRelationship();
|
||||
} else {
|
||||
this.curUser = window._sharedData.user;
|
||||
this.fetchProfile();
|
||||
}
|
||||
},
|
||||
|
||||
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;
|
||||
})
|
||||
},
|
||||
|
||||
goBack() {
|
||||
this.$router.push('/i/web/profile/' + this.profile.id);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
124
resources/assets/components/ProfileFollowing.vue
Normal file
124
resources/assets/components/ProfileFollowing.vue
Normal file
|
|
@ -0,0 +1,124 @@
|
|||
<template>
|
||||
<div class="profile-timeline-component">
|
||||
<div v-if="isLoaded" class="container-fluid mt-3">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-8 offset-md-2 px-md-5">
|
||||
<profile-following
|
||||
:profile="profile"
|
||||
:relationship="relationship"
|
||||
@back="goBack()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<drawer />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script type="text/javascript">
|
||||
import Drawer from './partials/drawer.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-following": ProfileFollowing
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
isLoaded: false,
|
||||
curUser: undefined,
|
||||
profile: undefined,
|
||||
relationship: undefined
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
|
||||
watch: {
|
||||
'$route': 'init'
|
||||
},
|
||||
|
||||
methods: {
|
||||
init() {
|
||||
this.isLoaded = false;
|
||||
this.relationship = undefined;
|
||||
this.owner = false;
|
||||
|
||||
if(this.cachedProfile && this.cachedUser) {
|
||||
this.curUser = this.cachedUser;
|
||||
this.profile = this.cachedProfile;
|
||||
this.fetchRelationship();
|
||||
} else {
|
||||
this.curUser = window._sharedData.user;
|
||||
this.fetchProfile();
|
||||
}
|
||||
},
|
||||
|
||||
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.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;
|
||||
})
|
||||
},
|
||||
|
||||
goBack() {
|
||||
this.$router.push('/i/web/profile/' + this.profile.id);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in a new issue