2019-09-15 10:51:13 +00:00
|
|
|
<template>
|
|
|
|
<div class="social__wrapper">
|
2022-10-27 13:07:12 +00:00
|
|
|
<ProfileInfo v-if="accountLoaded && accountInfo" :uid="uid" />
|
|
|
|
<Composer v-show="composerDisplayStatus" />
|
2023-03-22 17:16:40 +00:00
|
|
|
<TimelineList v-if="timeline"
|
|
|
|
:show-parents="true"
|
|
|
|
:type="$route.params.type"
|
|
|
|
:reverse-order="true" />
|
2023-01-19 16:18:11 +00:00
|
|
|
<TimelineEntry class="main-post" :item="mainPost" type="single-post" />
|
2023-03-22 17:16:40 +00:00
|
|
|
<TimelineList v-if="timeline" class="descendants" :type="$route.params.type" />
|
2019-09-15 10:51:13 +00:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2022-07-11 16:20:55 +00:00
|
|
|
import Composer from '../components/Composer/Composer.vue'
|
2019-10-07 13:57:33 +00:00
|
|
|
import ProfileInfo from '../components/ProfileInfo.vue'
|
|
|
|
import TimelineEntry from '../components/TimelineEntry.vue'
|
|
|
|
import TimelineList from '../components/TimelineList.vue'
|
2022-09-12 13:42:18 +00:00
|
|
|
import currentUserMixin from '../mixins/currentUserMixin.js'
|
|
|
|
import accountMixins from '../mixins/accountMixins.js'
|
|
|
|
import serverData from '../mixins/serverData.js'
|
2020-09-01 22:54:44 +00:00
|
|
|
import { loadState } from '@nextcloud/initial-state'
|
2019-09-15 10:51:13 +00:00
|
|
|
|
|
|
|
export default {
|
|
|
|
name: 'TimelineSinglePost',
|
|
|
|
components: {
|
2019-10-15 10:16:38 +00:00
|
|
|
Composer,
|
2019-10-07 13:57:33 +00:00
|
|
|
ProfileInfo,
|
2019-09-15 10:51:13 +00:00
|
|
|
TimelineEntry,
|
2022-10-27 13:07:12 +00:00
|
|
|
TimelineList,
|
2019-09-15 10:51:13 +00:00
|
|
|
},
|
|
|
|
mixins: [
|
2019-10-07 13:57:33 +00:00
|
|
|
accountMixins,
|
2019-10-15 10:16:38 +00:00
|
|
|
currentUserMixin,
|
2022-10-27 13:07:12 +00:00
|
|
|
serverData,
|
2019-09-15 10:51:13 +00:00
|
|
|
],
|
|
|
|
data() {
|
|
|
|
return {
|
2019-10-07 13:57:33 +00:00
|
|
|
mainPost: {},
|
2022-10-27 13:07:12 +00:00
|
|
|
uid: this.$route.params.account,
|
2019-09-15 10:51:13 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
computed: {
|
2019-10-15 10:16:38 +00:00
|
|
|
/**
|
|
|
|
* @description Tells whether Composer shall be displayed or not
|
2022-10-27 13:07:12 +00:00
|
|
|
* @return {boolean}
|
2019-10-15 10:16:38 +00:00
|
|
|
*/
|
|
|
|
composerDisplayStatus() {
|
|
|
|
return this.$store.getters.getComposerDisplayStatus
|
|
|
|
},
|
2019-10-14 13:16:00 +00:00
|
|
|
/**
|
2019-10-25 11:26:16 +00:00
|
|
|
* @description Extracts the viewed account name from the URL
|
2022-10-27 13:07:12 +00:00
|
|
|
* @return {string}
|
2019-10-14 13:16:00 +00:00
|
|
|
*/
|
2019-10-07 13:57:33 +00:00
|
|
|
account() {
|
2022-03-24 15:17:46 +00:00
|
|
|
return window.location.href.split('/')[window.location.href.split('/').length - 2].slice(1)
|
2019-10-14 13:16:00 +00:00
|
|
|
},
|
|
|
|
/**
|
2019-10-25 11:26:16 +00:00
|
|
|
* @description Returns the timeline currently loaded in the store
|
2022-10-27 13:07:12 +00:00
|
|
|
* @return {object}
|
2019-10-14 13:16:00 +00:00
|
|
|
*/
|
2022-10-27 13:07:12 +00:00
|
|
|
timeline() {
|
2019-10-14 13:16:00 +00:00
|
|
|
return this.$store.getters.getTimeline
|
2022-10-27 13:07:12 +00:00
|
|
|
},
|
2019-09-15 10:51:13 +00:00
|
|
|
},
|
2022-10-27 13:07:12 +00:00
|
|
|
beforeMount() {
|
2019-09-15 10:51:13 +00:00
|
|
|
// Get data of post clicked on
|
2023-03-22 17:16:40 +00:00
|
|
|
this.mainPost = this.$store.getters.getPostFromTimeline(this.$route.params.id) || loadState('social', 'item')
|
2019-09-16 15:10:30 +00:00
|
|
|
|
2019-10-07 13:57:33 +00:00
|
|
|
// Fetch information of the related account
|
|
|
|
this.$store.dispatch(this.serverData.public ? 'fetchPublicAccountInfo' : 'fetchAccountInfo', this.account).then((response) => {
|
|
|
|
// We need to update this.uid because we may have asked info for an account whose domain part was a host-meta,
|
|
|
|
// and the account returned by the backend always uses a non host-meta'ed domain for its ID
|
2023-01-19 16:18:11 +00:00
|
|
|
this.uid = response.username
|
2019-10-07 13:57:33 +00:00
|
|
|
})
|
|
|
|
|
|
|
|
// Fetch single post timeline
|
2022-10-27 13:07:12 +00:00
|
|
|
const params = {
|
2019-10-07 13:57:33 +00:00
|
|
|
account: this.account,
|
2023-03-22 17:16:40 +00:00
|
|
|
id: this.$route.params.id,
|
2022-10-27 13:07:12 +00:00
|
|
|
type: 'single-post',
|
2019-09-16 15:10:30 +00:00
|
|
|
}
|
2019-09-15 10:51:13 +00:00
|
|
|
this.$store.dispatch('changeTimelineType', {
|
2019-09-16 15:10:30 +00:00
|
|
|
type: 'single-post',
|
2022-10-27 13:07:12 +00:00
|
|
|
params,
|
2019-09-15 10:51:13 +00:00
|
|
|
})
|
|
|
|
},
|
|
|
|
methods: {
|
2022-10-27 13:07:12 +00:00
|
|
|
},
|
2019-09-15 10:51:13 +00:00
|
|
|
}
|
|
|
|
</script>
|
2019-10-25 12:12:24 +00:00
|
|
|
|
2022-10-27 13:07:12 +00:00
|
|
|
<style scoped>
|
2023-03-22 17:16:40 +00:00
|
|
|
.social__wrapper {
|
|
|
|
padding-bottom: 25%;
|
|
|
|
}
|
|
|
|
|
2023-01-16 10:02:05 +00:00
|
|
|
.social__timeline {
|
2023-03-22 17:16:40 +00:00
|
|
|
margin-left: 16px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.main-post {
|
|
|
|
background: var(--color-background-dark);
|
|
|
|
border-radius: 8px;
|
|
|
|
padding: 16px;
|
|
|
|
box-sizing: content-box;
|
|
|
|
margin: 16px 0;
|
2023-01-16 10:02:05 +00:00
|
|
|
}
|
2022-10-27 13:07:12 +00:00
|
|
|
|
2023-01-16 10:02:05 +00:00
|
|
|
#app-content {
|
|
|
|
position: relative;
|
|
|
|
}
|
2019-10-25 12:12:24 +00:00
|
|
|
</style>
|