Extract conversation and create conversation page.

This commit is contained in:
Roger Braun 2017-02-04 13:52:26 +01:00
parent ea25708bf3
commit 5ec4f1b047
5 changed files with 39 additions and 12 deletions

View 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

View file

@ -0,0 +1,5 @@
<template>
<conversation :collapsable="false" :statusoid="statusoid"></conversation>
</template>
<script src="./conversation-page.js"></script>

View file

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

View file

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

View file

@ -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 }
] ]