Troplo/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

sync profile tab state with location query

Browse source
This commit is contained in:
taehoon 2019-08-10 14:49:37 -04:00
parent e8c22fbfa3
commit 7dfcabb543
2 changed files with 28 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/components/user_profile/user_profile.js
View file

@ -22,16 +22,20 @@ const FriendList = withLoadMore({
additionalPropNames: ['userId'] additionalPropNames: ['userId']
})(List) })(List)
const defaultTabKey = 'statuses'
const UserProfile = { const UserProfile = {
data () { data () {
return { return {
error: false, error: false,
userId: null userId: null,
tab: defaultTabKey
} }
}, },
created () { created () {
const routeParams = this.$route.params const routeParams = this.$route.params
this.load(routeParams.name || routeParams.id) this.load(routeParams.name || routeParams.id)
this.tab = get(this.$route, 'query.tab', defaultTabKey)
}, },
destroyed () { destroyed () {
this.stopFetching() this.stopFetching()
@ -115,6 +119,10 @@ const UserProfile = {
switchUser (userNameOrId) { switchUser (userNameOrId) {
this.stopFetching() this.stopFetching()
this.load(userNameOrId) this.load(userNameOrId)
},
onTabSwitch (tab) {
this.tab = tab
this.$router.replace({ query: { tab } })
} }
}, },
watch: { watch: {
@ -128,8 +136,8 @@ const UserProfile = {
this.switchUser(newVal) this.switchUser(newVal)
} }
}, },
$route () { '$route.query': function (newVal) {
this.$refs.tabSwitcher.activateTab(0)() this.tab = newVal.tab || defaultTabKey
} }
}, },
components: { components: {

29
src/components/user_profile/user_profile.vue
View file

@ -12,22 +12,24 @@
rounded="top" rounded="top"
/> />
<tab-switcher <tab-switcher
ref="tabSwitcher" :active-tab="tab"
:render-only-focused="true" :render-only-focused="true"
:on-switch="onTabSwitch"
> >
<div :label="$t('user_card.statuses')"> <Timeline
<Timeline key="statuses"
:count="user.statuses_count" :label="$t('user_card.statuses')"
:embedded="true" :count="user.statuses_count"
:title="$t('user_profile.timeline_title')" :embedded="true"
:timeline="timeline" :title="$t('user_profile.timeline_title')"
timeline-name="user" :timeline="timeline"
:user-id="userId" timeline-name="user"
:pinned-status-ids="user.pinnedStatusIds" :user-id="userId"
/> :pinned-status-ids="user.pinnedStatusIds"
</div> />
<div <div
v-if="followsTabVisible" v-if="followsTabVisible"
key="followees"
:label="$t('user_card.followees')" :label="$t('user_card.followees')"
:disabled="!user.friends_count" :disabled="!user.friends_count"
> >
@ -42,6 +44,7 @@
</div> </div>
<div <div
v-if="followersTabVisible" v-if="followersTabVisible"
key="followers"
:label="$t('user_card.followers')" :label="$t('user_card.followers')"
:disabled="!user.followers_count" :disabled="!user.followers_count"
> >
@ -58,6 +61,7 @@
</FollowerList> </FollowerList>
</div> </div>
<Timeline <Timeline
key="media"
:label="$t('user_card.media')" :label="$t('user_card.media')"
:disabled="!media.visibleStatuses.length" :disabled="!media.visibleStatuses.length"
:embedded="true" :embedded="true"
@ -68,6 +72,7 @@
/> />
<Timeline <Timeline
v-if="isUs" v-if="isUs"
key="favorites"
:label="$t('user_card.favorites')" :label="$t('user_card.favorites')"
:disabled="!favorites.visibleStatuses.length" :disabled="!favorites.visibleStatuses.length"
:embedded="true" :embedded="true"