Added comment support

src/api.js

@@ -170,6 +170,21 @@ export const api = {
       return false
     }
   },
+  async removeComment (id) {
+    const token = await localStorage.getItem('token')
+    const url = serverurl + 'comments' + '?id=' + id
+    try {
+      await fetch(url, {
+        method: 'DELETE',
+        headers: {
+          Authorization: 'Bearer ' + token
+        }
+      })
+      return true
+    } catch (error) {
+      return false
+    }
+  },
   async removeUser (id) {
     const token = await localStorage.getItem('token')
     const url = serverurl + 'user' + '?id=' + id
@@ -227,5 +242,51 @@ export const api = {
     } catch (error) {
       return null
     }
+  },
+  async getModelComments (id) {
+    const url = serverurl + 'comments' + '?id=' + id
+    const response = await fetch(url)
+    try {
+      return await response.json()
+    } catch (error) {
+      return null
+    }
+  },
+  async getCommentList (id) {
+    const token = await localStorage.getItem('token')
+    const url = serverurl + 'comments/list'
+    const response = await fetch(url, {
+      headers: {
+        Authorization: 'Bearer ' + token
+      }
+    })
+    try {
+      return await response.json()
+    } catch (error) {
+      return null
+    }
+  },
+  async addComment (id, content) {
+    const url = serverurl + 'comments'
+    const token = await localStorage.getItem('token')
+    try {
+      const response = await fetch(
+        url, {
+          method: 'POST',
+          headers: {
+            Accept: 'application/json',
+            'Content-Type': 'application/json',
+            Authorization: 'Bearer ' + token
+          },
+          body: JSON.stringify({
+            modelId: id,
+            content: content
+          })
+        }
+      )
+      return await response.json()
+    } catch (error) {
+      return null
+    }
   }
 }

src/components/Comments.vue

 <template>
-  <div class="comments" v-if="comments">
+  <div class="comments">
     <h1 class="title is-5">{{comments.length}} comments</h1>
     <article class="media" v-for="comment in comments" v-bind:key="comment.id">
       <div class="media-content">
         <div class="content">
           <p>
-            <strong>{{comment.author}}</strong> - <small>{{new Date(comment.date).toLocaleDateString()}}</small>
+            <strong>{{comment.author.username}}</strong> - <small>{{new Date(comment.added).toLocaleDateString()}}</small>
             <br>
             {{comment.content}}
           </p>
         </div>
       </div>
+      <div class="media-right details" v-if="isAdmin">
+        <b-button class="actionButton" icon-left="delete" type="is-danger" @click="removePrompt(comment.id)" outlined/>
+      </div>
     </article>
+
+    <div v-if="isLoggedIn">
+      <hr>
+      <b-field label="Add a comment">
+        <b-input maxlength="1000" type="textarea" v-model="postContent"/>
+      </b-field>
+      <b-field>
+        <b-button @click="postComment">Post</b-button>
+      </b-field>
+    </div>
   </div>
 </template>
 
 <script>
+import { api } from '@/api.js'
+
 export default {
   name: 'Comments',
-  props: ['comments']
+  props: ['modelId'],
+  data () {
+    return {
+      isLoggedIn: false,
+      isLoading: true,
+      isAdmin: false,
+      comments: [],
+      postContent: ''
+    }
+  },
+  async mounted () {
+    this.comments = await api.getModelComments(this.modelId)
+
+    const userRole = await localStorage.getItem('user_role')
+    if (userRole) this.isLoggedIn = true
+    if (userRole === 'ROLE_ADMIN') this.isAdmin = true
+  },
+  methods: {
+    async postComment () {
+      await api.addComment(this.modelId, this.postContent)
+      this.comments = await api.getModelComments(this.modelId)
+      this.postContent = null
+    },
+    removePrompt (id) {
+      this.$buefy.dialog.confirm({
+        message: 'Delete comment ?',
+        cancelText: 'Abort',
+        confirmText: 'Delete',
+        type: 'is-danger',
+        hasIcon: true,
+        onConfirm: async () => {
+          await api.removeComment(id)
+          this.comments = await api.getModelComments(this.modelId)
+          this.$buefy.toast.open('Comment deleted')
+        }
+      })
+    }
+  }
 }
 </script>
 

src/components/ModelTable.vue

@@ -38,7 +38,7 @@ export default {
     }
   },
   async mounted () {
-    this.models = await api.getModels()
+    this.models = await api.getUserModels()
     this.isLoading = false
   },
   methods: {
@@ -49,24 +49,12 @@ export default {
         confirmText: 'Delete',
         type: 'is-danger',
         hasIcon: true,
-        onConfirm: () => this.remove(id, name)
-      })
-    },
-    async remove (id, name) {
-      const token = await localStorage.getItem('token')
-      const url = this.$serverurl + 'models' + '?id=' + id
-      try {
-        await fetch(url, {
-          method: 'DELETE',
-          headers: {
-            Authorization: 'Bearer ' + token
-          }
-        })
+        onConfirm: async () => {
+          await api.removeModel(id)
           this.$buefy.toast.open(name + ' deleted')
-        this.getModels()
-      } catch (error) {
-        this.$buefy.toast.open('Delete error ' + error)
+          this.models = await api.getUserModels()
         }
+      })
     }
   }
 }

src/components/ModelUpload.vue

@@ -116,6 +116,8 @@ export default {
             shortDescription: this.model.shortDescription,
             longDescription: this.model.longDescription,
             performance: this.model.performance,
+            performanceUnit: this.model.performanceUnit,
+            parameterCount: this.model.parameterCount,
             tags: this.model.tags
           })
         })

src/views/Account.vue

@@ -59,7 +59,7 @@ export default {
   },
   async mounted () {
     this.account = await api.getUser()
-    this.models = await api.getModels()
+    this.models = await api.getUserModels()
     await localStorage.setItem('user_role', this.account.role)
     await localStorage.setItem('user_id', this.account.id)
   },

src/views/Admin.vue

@@ -80,6 +80,25 @@
         </b-tab-item>
 
         <b-tab-item label="Comments">
+          <b-table :data="commentList" :loading="isLoading" striped hoverable>
+            <template slot-scope="props">
+              <b-table-column field="content" label="Content">
+                {{ props.row.content }}
+              </b-table-column>
+
+              <b-table-column field="username" label="Username" searchable sortable>
+                {{ props.row.author.username }}
+              </b-table-column>
+
+              <b-table-column field="added" label="Added" sortable>
+                {{ props.row.added }}
+              </b-table-column>
+
+              <b-table-column label="" centered>
+                <b-button class="actionButton" icon-left="delete" type="is-danger" @click="removePrompt(props.row.id, props.row.content, 'comment')" outlined/>
+              </b-table-column>
+            </template>
+          </b-table>
         </b-tab-item>
       </b-tabs>
     </div>
@@ -96,13 +115,15 @@ export default {
       isLoading: true,
       userList: [],
       modelList: [],
-      tagList: []
+      tagList: [],
+      commentList: []
     }
   },
   async mounted () {
     this.modelList = await api.getModelList()
     this.userList = await api.getUserList()
     this.tagList = await api.getTags()
+    this.commentList = await api.getCommentList()
     this.isLoading = false
   },
   methods: {
@@ -119,11 +140,13 @@ export default {
             case 'model' : api.removeModel(id); break
             case 'tag' : api.removeTag(id); break
             case 'category' : api.removeCategory(id); break
+            case 'comment' : api.removeComment(id); break
           }
           this.$buefy.toast.open(name + ' deleted')
           this.modelList = await api.getModelList()
           this.userList = await api.getUserList()
           this.tagList = await api.getTags()
+          this.commentList = await api.getCommentList()
         }
       })
     },

src/views/Model.vue

@@ -56,7 +56,7 @@
 
           <b-tab-item label="Comments">
             <div class="box">
-              <Comments v-bind:comments="model.comments"/>
+              <Comments v-if="!isLoading" v-bind:modelId="model.id"/>
             </div>
           </b-tab-item>
         </b-tabs>