Add Profile components

This commit is contained in:
Daniel Supernault 2023-06-11 15:32:44 -06:00
parent f5dbc8281a
commit 9817025578
No known key found for this signature in database
GPG key ID: 0DEF1C662C9033F7
3 changed files with 456 additions and 0 deletions

View 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>

View 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>

View 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>