Extract conversation and create conversation page.
This commit is contained in:
parent
ea25708bf3
commit
5ec4f1b047
5 changed files with 39 additions and 12 deletions
19
src/components/conversation-page/conversation-page.js
Normal file
19
src/components/conversation-page/conversation-page.js
Normal file
|
@ -0,0 +1,19 @@
|
||||||
|
import Conversation from '../conversation/conversation.vue'
|
||||||
|
import { find, toInteger } from 'lodash'
|
||||||
|
|
||||||
|
const conversationPage = {
|
||||||
|
components: {
|
||||||
|
Conversation
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
statusoid () {
|
||||||
|
const id = toInteger(this.$route.params.id)
|
||||||
|
const statuses = this.$store.state.statuses.allStatuses
|
||||||
|
const status = find(statuses, {id})
|
||||||
|
|
||||||
|
return status
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default conversationPage
|
5
src/components/conversation-page/conversation-page.vue
Normal file
5
src/components/conversation-page/conversation-page.vue
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
<template>
|
||||||
|
<conversation :collapsable="false" :statusoid="statusoid"></conversation>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script src="./conversation-page.js"></script>
|
|
@ -1,4 +1,4 @@
|
||||||
import { find, filter, sortBy, toInteger } from 'lodash'
|
import { filter, sortBy } from 'lodash'
|
||||||
import { statusType } from '../../modules/statuses.js'
|
import { statusType } from '../../modules/statuses.js'
|
||||||
import Status from '../status/status.vue'
|
import Status from '../status/status.vue'
|
||||||
|
|
||||||
|
@ -8,14 +8,12 @@ const sortAndFilterConversation = (conversation) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
const conversation = {
|
const conversation = {
|
||||||
|
props: [
|
||||||
|
'statusoid',
|
||||||
|
'collapsable'
|
||||||
|
],
|
||||||
computed: {
|
computed: {
|
||||||
status () {
|
status () { return this.statusoid },
|
||||||
const id = toInteger(this.$route.params.id)
|
|
||||||
const statuses = this.$store.state.statuses.allStatuses
|
|
||||||
const status = find(statuses, {id})
|
|
||||||
|
|
||||||
return status
|
|
||||||
},
|
|
||||||
conversation () {
|
conversation () {
|
||||||
if (!this.status) {
|
if (!this.status) {
|
||||||
return false
|
return false
|
||||||
|
|
|
@ -1,9 +1,14 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="timeline panel panel-default base00-background">
|
<div class="timeline panel panel-default base00-background">
|
||||||
<div class="panel-heading base01-background base04">Status</div>
|
<div class="panel-heading base01-background base04">
|
||||||
|
Conversation
|
||||||
|
<div v-if="collapsable">
|
||||||
|
<small><a href="#" @click.prevent="$emit('toggleExpanded')">Collapse</a></small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="panel-body">
|
<div class="panel-body">
|
||||||
<div class="timeline">
|
<div class="timeline">
|
||||||
<status v-for="status in conversation" :key="status.id" v-bind:statusoid="status"></status>
|
<status v-for="status in conversation" :key="status.id" v-bind:statusoid="status":expandable='false'></status>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -5,7 +5,7 @@ import App from './App.vue'
|
||||||
import PublicTimeline from './components/public_timeline/public_timeline.vue'
|
import PublicTimeline from './components/public_timeline/public_timeline.vue'
|
||||||
import PublicAndExternalTimeline from './components/public_and_external_timeline/public_and_external_timeline.vue'
|
import PublicAndExternalTimeline from './components/public_and_external_timeline/public_and_external_timeline.vue'
|
||||||
import FriendsTimeline from './components/friends_timeline/friends_timeline.vue'
|
import FriendsTimeline from './components/friends_timeline/friends_timeline.vue'
|
||||||
import Conversation from './components/conversation/conversation.vue'
|
import ConversationPage from './components/conversation-page/conversation-page.vue'
|
||||||
import Mentions from './components/mentions/mentions.vue'
|
import Mentions from './components/mentions/mentions.vue'
|
||||||
import UserProfile from './components/user_profile/user_profile.vue'
|
import UserProfile from './components/user_profile/user_profile.vue'
|
||||||
|
|
||||||
|
@ -39,7 +39,7 @@ const routes = [
|
||||||
{ path: '/main/all', component: PublicAndExternalTimeline },
|
{ path: '/main/all', component: PublicAndExternalTimeline },
|
||||||
{ path: '/main/public', component: PublicTimeline },
|
{ path: '/main/public', component: PublicTimeline },
|
||||||
{ path: '/main/friends', component: FriendsTimeline },
|
{ path: '/main/friends', component: FriendsTimeline },
|
||||||
{ name: 'conversation', path: '/notice/:id', component: Conversation },
|
{ name: 'conversation', path: '/notice/:id', component: ConversationPage },
|
||||||
{ name: 'user-profile', path: '/users/:id', component: UserProfile },
|
{ name: 'user-profile', path: '/users/:id', component: UserProfile },
|
||||||
{ name: 'mentions', path: '/:username/mentions', component: Mentions }
|
{ name: 'mentions', path: '/:username/mentions', component: Mentions }
|
||||||
]
|
]
|
||||||
|
|
Loading…
Reference in a new issue