Displaying posts from an analysis

frontend/src/components/AnalysisView/DiscussionPost.vue

@@ -1,11 +1,69 @@
 <template>
-    <div>
-        Post
+    <div class="discussion-post">
+        <div class="discussion-header">
+            <b>{{ author_name }}</b>
+            {{  timestamp  }}
+        </div>
+        <div class="discussion-content">
+            {{ content }}
+        </div>
     </div>
 </template>
 
 <script>
 export default {
     name: "discussion-post",
+    props: {
+        id: {
+            type: String
+        },
+        author_id: {
+            type: String
+        },
+        author_name: {
+            type: String
+        },
+        publish_timestamp: {
+            type: String
+        },
+        content: {
+            type: String
+        },
+        attachments: {
+            type: Array,
+            default: () => {
+                return [];
+            },
+        },
+        thread: {
+            type: Array,
+            default: () => {
+                return [];
+            },
+        },
+    },
+    computed: {
+        timestamp: function() {
+            return new Date(this.publish_timestamp).toUTCString()
+        }
+    }
 }
-</script>
+</script>
+
+<style scoped>
+
+.discussion-post {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.discussion-header {
+    margin-top: var(--p-10);
+    margin-bottom: var(--p-10);
+}
+
+.discussion-content {
+    margin-bottom: var(--p-10);
+}
+
+</style>

frontend/src/components/AnalysisView/DiscussionSection.vue

@@ -12,8 +12,11 @@
         <div class="rosalution-section-seperator"></div>
         <div class="section-content">
             <div class="discussion-new-post">
-                <div contenteditable="plaintext-only" class="discussion-new-post-text-area">
-                </div>
+                <textarea 
+                    contenteditable="plaintext-only" 
+                    class="discussion-new-post-text-area"
+                    v-model="newPostContent"
+                />
                 <div class="discussion-actions">
                     <button class="secondary-button" @click="cancelNewDiscussionPost">
                         Cancel
@@ -23,25 +26,51 @@
                     </button>
                 </div>
             </div>
+            <DiscussionPost v-for="discussion in discussions"
+                :id="discussion.post_id"
+                :author_id="discussion.author_id"
+                :author_name="discussion.author_fullname"
+                :publish_timestamp="discussion.publish_timestamp"
+                :content="discussion.content"
+                :attachments="discussion.attachments"
+                :thread="discussion.thread"
+            />
         </div>
     </div>
 </template>
 
 <script>
+import DiscussionPost from './DiscussionPost.vue';
+
 export default {
   name: 'discussion-section',
+  emits: ['discussion:new-post'],
+  components: {
+    DiscussionPost
+  },
   props: {
     header: {
       type: String,
     },
+    discussions: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data: function() {
+    return {
+        newPostContent: '',
+    }
   },
   methods: {
     newDiscussionPost() {
-        console.log("Publishing Post!")
+        this.$emit('discussion:new-post', this.newPostContent)
     },
     cancelNewDiscussionPost() {
         console.log("Cancelled post");
-    }
+    },
   }
 };
 

frontend/src/stores/authStore.js

@@ -33,6 +33,9 @@ const authStore = {
   getUsername() {
     return this.state.username;
   },
+  getClientId() {
+    return this.state.clientId;
+  },
   hasWritePermissions() {
     return this.hasRole('write');
   },

frontend/src/views/AnalysisView.vue

@@ -41,6 +41,8 @@
       />
       <DiscussionSection
         id="Discussion"
+        :discussions="this.discussions"
+        @discussion:new-post="this.addDiscussionPost"
       />
       <SupplementalFormList
         id="Supporting_Evidence"
@@ -205,6 +207,9 @@ export default {
     attachments() {
       return this.analysis.supporting_evidence_files;
     },
+    discussions() {
+      return this.analysis.discussions;
+    },
     genomicUnitsList() {
       return this.analysis.genomic_units;
     },
@@ -605,7 +610,16 @@ export default {
         await notificationDialog.title('Failure').confirmText('Ok').alert(error);
       }
     },
+    addDiscussionPost(newPostContent) {
+      const newPostObject = {
+        author_id: this.auth.getClientId(),
+        author_name: this.auth.getUsername(),
+        publish_timestamp: new Date().toISOString(),
+        content: newPostContent,
+      }
 
+      console.log(newPostObject)
+    },
     copyToClipboard(copiedText) {
       toast.success(`Copied ${copiedText} to clipboard!`);
     },