Extract conversation and create conversation page.

4 files changed, 37 insertions, 10 deletions

diff --git a/src/components/conversation-page/conversation-page.js b/src/components/conversation-page/conversation-page.js
new file mode 100644
index 00000000..beffa5bb
--- /dev/null
+++ b/src/components/conversation-page/conversation-page.js
@@ -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
diff --git a/src/components/conversation-page/conversation-page.vue b/src/components/conversation-page/conversation-page.vue
new file mode 100644
index 00000000..b03eea28
--- /dev/null
+++ b/src/components/conversation-page/conversation-page.vue
@@ -0,0 +1,5 @@
+<template>
+  <conversation :collapsable="false" :statusoid="statusoid"></conversation>
+</template>
+
+<script src="./conversation-page.js"></script>
diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index 5d4f5d04..ecc76e71 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -1,4 +1,4 @@
-import { find, filter, sortBy, toInteger } from 'lodash'
+import { filter, sortBy } from 'lodash'
 import { statusType } from '../../modules/statuses.js'
 import Status from '../status/status.vue'
 
@@ -8,14 +8,12 @@ const sortAndFilterConversation = (conversation) => {
 }
 
 const conversation = {
+  props: [
+    'statusoid',
+    'collapsable'
+  ],
   computed: {
-    status () {
-      const id = toInteger(this.$route.params.id)
-      const statuses = this.$store.state.statuses.allStatuses
-      const status = find(statuses, {id})
-
-      return status
-    },
+    status () { return this.statusoid },
     conversation () {
       if (!this.status) {
         return false
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 00d3e062..9675e69f 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -1,9 +1,14 @@
 <template>
   <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="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>