Merge branch '564' into 'develop'
Restore scroll position for user profile when navigate back and forward Closes #636 and #564 See merge request pleroma/pleroma-fe!914
This commit is contained in:
commit
e5fe4f420c
|
@ -13,8 +13,8 @@ const Interactions = {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
onModeSwitch (index, dataset) {
|
||||
this.filterMode = tabModeDict[dataset.filter]
|
||||
onModeSwitch (key) {
|
||||
this.filterMode = tabModeDict[key]
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
|
|
@ -10,18 +10,15 @@
|
|||
:on-switch="onModeSwitch"
|
||||
>
|
||||
<span
|
||||
data-tab-dummy
|
||||
data-filter="mentions"
|
||||
key="mentions"
|
||||
:label="$t('nav.mentions')"
|
||||
/>
|
||||
<span
|
||||
data-tab-dummy
|
||||
data-filter="likes+repeats"
|
||||
key="likes+repeats"
|
||||
:label="$t('interactions.favs_repeats')"
|
||||
/>
|
||||
<span
|
||||
data-tab-dummy
|
||||
data-filter="follows"
|
||||
key="follows"
|
||||
:label="$t('interactions.follows')"
|
||||
/>
|
||||
</tab-switcher>
|
||||
|
|
|
@ -75,8 +75,8 @@ const Search = {
|
|||
const length = this[tabName].length
|
||||
return length === 0 ? '' : ` (${length})`
|
||||
},
|
||||
onResultTabSwitch (_index, dataset) {
|
||||
this.currenResultTab = dataset.filter
|
||||
onResultTabSwitch (key) {
|
||||
this.currenResultTab = key
|
||||
},
|
||||
getActiveTab () {
|
||||
if (this.visibleStatuses.length > 0) {
|
||||
|
|
|
@ -31,21 +31,18 @@
|
|||
<tab-switcher
|
||||
ref="tabSwitcher"
|
||||
:on-switch="onResultTabSwitch"
|
||||
:custom-active="currenResultTab"
|
||||
:active-tab="currenResultTab"
|
||||
>
|
||||
<span
|
||||
data-tab-dummy
|
||||
data-filter="statuses"
|
||||
key="statuses"
|
||||
:label="$t('user_card.statuses') + resultCount('visibleStatuses')"
|
||||
/>
|
||||
<span
|
||||
data-tab-dummy
|
||||
data-filter="people"
|
||||
key="people"
|
||||
:label="$t('search.people') + resultCount('users')"
|
||||
/>
|
||||
<span
|
||||
data-tab-dummy
|
||||
data-filter="hashtags"
|
||||
key="hashtags"
|
||||
:label="$t('search.hashtags') + resultCount('hashtags')"
|
||||
/>
|
||||
</tab-switcher>
|
||||
|
|
|
@ -4,12 +4,22 @@ import './tab_switcher.scss'
|
|||
|
||||
export default Vue.component('tab-switcher', {
|
||||
name: 'TabSwitcher',
|
||||
props: ['renderOnlyFocused', 'onSwitch', 'customActive'],
|
||||
props: ['renderOnlyFocused', 'onSwitch', 'activeTab'],
|
||||
data () {
|
||||
return {
|
||||
active: this.$slots.default.findIndex(_ => _.tag)
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
activeIndex () {
|
||||
// In case of controlled component
|
||||
if (this.activeTab) {
|
||||
return this.$slots.default.findIndex(slot => this.activeTab === slot.key)
|
||||
} else {
|
||||
return this.active
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeUpdate () {
|
||||
const currentSlot = this.$slots.default[this.active]
|
||||
if (!currentSlot.tag) {
|
||||
|
@ -17,21 +27,13 @@ export default Vue.component('tab-switcher', {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
activateTab (index, dataset) {
|
||||
activateTab (index) {
|
||||
return () => {
|
||||
if (typeof this.onSwitch === 'function') {
|
||||
this.onSwitch.call(null, index, this.$slots.default[index].elm.dataset)
|
||||
this.onSwitch.call(null, this.$slots.default[index].key)
|
||||
}
|
||||
this.active = index
|
||||
}
|
||||
},
|
||||
isActiveTab (index) {
|
||||
const customActiveIndex = this.$slots.default.findIndex(slot => {
|
||||
const dataFilter = slot.data && slot.data.attrs && slot.data.attrs['data-filter']
|
||||
return this.customActive && this.customActive === dataFilter
|
||||
})
|
||||
|
||||
return customActiveIndex > -1 ? customActiveIndex === index : index === this.active
|
||||
}
|
||||
},
|
||||
render (h) {
|
||||
|
@ -41,13 +43,13 @@ export default Vue.component('tab-switcher', {
|
|||
const classesTab = ['tab']
|
||||
const classesWrapper = ['tab-wrapper']
|
||||
|
||||
if (this.isActiveTab(index)) {
|
||||
if (this.activeIndex === index) {
|
||||
classesTab.push('active')
|
||||
classesWrapper.push('active')
|
||||
}
|
||||
if (slot.data.attrs.image) {
|
||||
return (
|
||||
<div class={ classesWrapper.join(' ')}>
|
||||
<div class={classesWrapper.join(' ')}>
|
||||
<button
|
||||
disabled={slot.data.attrs.disabled}
|
||||
onClick={this.activateTab(index)}
|
||||
|
@ -59,7 +61,7 @@ export default Vue.component('tab-switcher', {
|
|||
)
|
||||
}
|
||||
return (
|
||||
<div class={ classesWrapper.join(' ')}>
|
||||
<div class={classesWrapper.join(' ')}>
|
||||
<button
|
||||
disabled={slot.data.attrs.disabled}
|
||||
onClick={this.activateTab(index)}
|
||||
|
@ -71,7 +73,7 @@ export default Vue.component('tab-switcher', {
|
|||
|
||||
const contents = this.$slots.default.map((slot, index) => {
|
||||
if (!slot.tag) return
|
||||
const active = index === this.active
|
||||
const active = this.activeIndex === index
|
||||
if (this.renderOnlyFocused) {
|
||||
return active
|
||||
? <div class="active">{slot}</div>
|
||||
|
|
|
@ -22,21 +22,23 @@ const FriendList = withLoadMore({
|
|||
additionalPropNames: ['userId']
|
||||
})(List)
|
||||
|
||||
const defaultTabKey = 'statuses'
|
||||
|
||||
const UserProfile = {
|
||||
data () {
|
||||
return {
|
||||
error: false,
|
||||
userId: null
|
||||
userId: null,
|
||||
tab: defaultTabKey
|
||||
}
|
||||
},
|
||||
created () {
|
||||
// Make sure that timelines used in this page are empty
|
||||
this.cleanUp()
|
||||
const routeParams = this.$route.params
|
||||
this.load(routeParams.name || routeParams.id)
|
||||
this.tab = get(this.$route, 'query.tab', defaultTabKey)
|
||||
},
|
||||
destroyed () {
|
||||
this.cleanUp()
|
||||
this.stopFetching()
|
||||
},
|
||||
computed: {
|
||||
timeline () {
|
||||
|
@ -67,17 +69,36 @@ const UserProfile = {
|
|||
},
|
||||
methods: {
|
||||
load (userNameOrId) {
|
||||
const startFetchingTimeline = (timeline, userId) => {
|
||||
// Clear timeline only if load another user's profile
|
||||
if (userId !== this.$store.state.statuses.timelines[timeline].userId) {
|
||||
this.$store.commit('clearTimeline', { timeline })
|
||||
}
|
||||
this.$store.dispatch('startFetchingTimeline', { timeline, userId })
|
||||
}
|
||||
|
||||
const loadById = (userId) => {
|
||||
this.userId = userId
|
||||
startFetchingTimeline('user', userId)
|
||||
startFetchingTimeline('media', userId)
|
||||
if (this.isUs) {
|
||||
startFetchingTimeline('favorites', userId)
|
||||
}
|
||||
// Fetch all pinned statuses immediately
|
||||
this.$store.dispatch('fetchPinnedStatuses', userId)
|
||||
}
|
||||
|
||||
// Reset view
|
||||
this.userId = null
|
||||
this.error = false
|
||||
|
||||
// Check if user data is already loaded in store
|
||||
const user = this.$store.getters.findUser(userNameOrId)
|
||||
if (user) {
|
||||
this.userId = user.id
|
||||
this.fetchTimelines()
|
||||
loadById(user.id)
|
||||
} else {
|
||||
this.$store.dispatch('fetchUser', userNameOrId)
|
||||
.then(({ id }) => {
|
||||
this.userId = id
|
||||
this.fetchTimelines()
|
||||
})
|
||||
.then(({ id }) => loadById(id))
|
||||
.catch((reason) => {
|
||||
const errorMessage = get(reason, 'error.error')
|
||||
if (errorMessage === 'No user with such user_id') { // Known error
|
||||
|
@ -90,40 +111,33 @@ const UserProfile = {
|
|||
})
|
||||
}
|
||||
},
|
||||
fetchTimelines () {
|
||||
const userId = this.userId
|
||||
this.$store.dispatch('startFetchingTimeline', { timeline: 'user', userId })
|
||||
this.$store.dispatch('startFetchingTimeline', { timeline: 'media', userId })
|
||||
if (this.isUs) {
|
||||
this.$store.dispatch('startFetchingTimeline', { timeline: 'favorites', userId })
|
||||
}
|
||||
// Fetch all pinned statuses immediately
|
||||
this.$store.dispatch('fetchPinnedStatuses', userId)
|
||||
},
|
||||
cleanUp () {
|
||||
stopFetching () {
|
||||
this.$store.dispatch('stopFetching', 'user')
|
||||
this.$store.dispatch('stopFetching', 'favorites')
|
||||
this.$store.dispatch('stopFetching', 'media')
|
||||
this.$store.commit('clearTimeline', { timeline: 'user' })
|
||||
this.$store.commit('clearTimeline', { timeline: 'favorites' })
|
||||
this.$store.commit('clearTimeline', { timeline: 'media' })
|
||||
},
|
||||
switchUser (userNameOrId) {
|
||||
this.stopFetching()
|
||||
this.load(userNameOrId)
|
||||
},
|
||||
onTabSwitch (tab) {
|
||||
this.tab = tab
|
||||
this.$router.replace({ query: { tab } })
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$route.params.id': function (newVal) {
|
||||
if (newVal) {
|
||||
this.cleanUp()
|
||||
this.load(newVal)
|
||||
this.switchUser(newVal)
|
||||
}
|
||||
},
|
||||
'$route.params.name': function (newVal) {
|
||||
if (newVal) {
|
||||
this.cleanUp()
|
||||
this.load(newVal)
|
||||
this.switchUser(newVal)
|
||||
}
|
||||
},
|
||||
$route () {
|
||||
this.$refs.tabSwitcher.activateTab(0)()
|
||||
'$route.query': function (newVal) {
|
||||
this.tab = newVal.tab || defaultTabKey
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
|
|
@ -12,22 +12,24 @@
|
|||
rounded="top"
|
||||
/>
|
||||
<tab-switcher
|
||||
ref="tabSwitcher"
|
||||
:active-tab="tab"
|
||||
:render-only-focused="true"
|
||||
:on-switch="onTabSwitch"
|
||||
>
|
||||
<div :label="$t('user_card.statuses')">
|
||||
<Timeline
|
||||
:count="user.statuses_count"
|
||||
:embedded="true"
|
||||
:title="$t('user_profile.timeline_title')"
|
||||
:timeline="timeline"
|
||||
timeline-name="user"
|
||||
:user-id="userId"
|
||||
:pinned-status-ids="user.pinnedStatusIds"
|
||||
/>
|
||||
</div>
|
||||
<Timeline
|
||||
key="statuses"
|
||||
:label="$t('user_card.statuses')"
|
||||
:count="user.statuses_count"
|
||||
:embedded="true"
|
||||
:title="$t('user_profile.timeline_title')"
|
||||
:timeline="timeline"
|
||||
timeline-name="user"
|
||||
:user-id="userId"
|
||||
:pinned-status-ids="user.pinnedStatusIds"
|
||||
/>
|
||||
<div
|
||||
v-if="followsTabVisible"
|
||||
key="followees"
|
||||
:label="$t('user_card.followees')"
|
||||
:disabled="!user.friends_count"
|
||||
>
|
||||
|
@ -42,6 +44,7 @@
|
|||
</div>
|
||||
<div
|
||||
v-if="followersTabVisible"
|
||||
key="followers"
|
||||
:label="$t('user_card.followers')"
|
||||
:disabled="!user.followers_count"
|
||||
>
|
||||
|
@ -58,6 +61,7 @@
|
|||
</FollowerList>
|
||||
</div>
|
||||
<Timeline
|
||||
key="media"
|
||||
:label="$t('user_card.media')"
|
||||
:disabled="!media.visibleStatuses.length"
|
||||
:embedded="true"
|
||||
|
@ -68,6 +72,7 @@
|
|||
/>
|
||||
<Timeline
|
||||
v-if="isUs"
|
||||
key="favorites"
|
||||
:label="$t('user_card.favorites')"
|
||||
:disabled="!favorites.visibleStatuses.length"
|
||||
:embedded="true"
|
||||
|
|
Loading…
Reference in New Issue