From df5a54c7b1f862c3425d7aa30e0a8b964e7b9716 Mon Sep 17 00:00:00 2001
From: Arne Schauf <git@asw.io>
Date: Sun, 4 Mar 2018 03:12:03 +0100
Subject: lots of cool features!

---
 .quasar/entry.js                |  4 +-
 quasar.conf.js                  |  3 ++
 src/components/CommentVoter.vue | 59 +++++++++++++++++++++++++++++
 src/components/UploadVoter.vue  | 11 +++++-
 src/pages/UploadDetail.vue      | 83 +++++++++++++++++++++++++++++++++++++----
 src/pages/UploadList.vue        |  9 +----
 6 files changed, 150 insertions(+), 19 deletions(-)
 create mode 100644 src/components/CommentVoter.vue

diff --git a/.quasar/entry.js b/.quasar/entry.js
index e50aef7..4e35988 100644
--- a/.quasar/entry.js
+++ b/.quasar/entry.js
@@ -40,12 +40,12 @@ import 'src/css/app.styl'
 
 
 import Vue from 'vue'
-import Quasar, {QAlert,QLayout,QLayoutHeader,QLayoutDrawer,QPageContainer,QPage,QToolbar,QToolbarTitle,QBtn,QIcon,QList,QListHeader,QInput,QItem,QItemMain,QItemSide,QTable,QTabs,QRouteTab,QInnerLoading,QField,QStep,QStepper,QStepperNavigation,QTd,QSpinner,QCard,QCardTitle,QCardMain,QCardMedia,QCardSeparator,QCardActions,QParallax,QCheckbox,QChip,Ripple,LocalStorage,Dialog} from 'quasar'
+import Quasar, {QAlert,QLayout,QLayoutHeader,QLayoutDrawer,QPageContainer,QPage,QToolbar,QToolbarTitle,QBtn,QIcon,QList,QListHeader,QInput,QItem,QItemMain,QItemSide,QTable,QTabs,QRouteTab,QInnerLoading,QSpinnerComment,QField,QStep,QStepper,QStepperNavigation,QTd,QSpinner,QCard,QCardTitle,QCardMain,QCardMedia,QCardSeparator,QCardActions,QParallax,QCheckbox,QChip,QChatMessage,Ripple,LocalStorage,Dialog,Notify} from 'quasar'
 
 Vue.config.productionTip = false
 import App from 'src/App'
 
-Vue.use(Quasar, {components: {QAlert,QLayout,QLayoutHeader,QLayoutDrawer,QPageContainer,QPage,QToolbar,QToolbarTitle,QBtn,QIcon,QList,QListHeader,QInput,QItem,QItemMain,QItemSide,QTable,QTabs,QRouteTab,QInnerLoading,QField,QStep,QStepper,QStepperNavigation,QTd,QSpinner,QCard,QCardTitle,QCardMain,QCardMedia,QCardSeparator,QCardActions,QParallax,QCheckbox,QChip},directives: {Ripple},plugins: {LocalStorage,Dialog}})
+Vue.use(Quasar, {components: {QAlert,QLayout,QLayoutHeader,QLayoutDrawer,QPageContainer,QPage,QToolbar,QToolbarTitle,QBtn,QIcon,QList,QListHeader,QInput,QItem,QItemMain,QItemSide,QTable,QTabs,QRouteTab,QInnerLoading,QSpinnerComment,QField,QStep,QStepper,QStepperNavigation,QTd,QSpinner,QCard,QCardTitle,QCardMain,QCardMedia,QCardSeparator,QCardActions,QParallax,QCheckbox,QChip,QChatMessage},directives: {Ripple},plugins: {LocalStorage,Dialog,Notify}})
 
 
 
diff --git a/quasar.conf.js b/quasar.conf.js
index 8705458..610ef26 100644
--- a/quasar.conf.js
+++ b/quasar.conf.js
@@ -76,6 +76,7 @@ module.exports = function (ctx) {
         'QTabs',
         'QRouteTab',
         'QInnerLoading',
+        'QSpinnerComment',
         'QField',
         'QStep',
         'QStepper',
@@ -91,6 +92,7 @@ module.exports = function (ctx) {
         'QParallax',
         'QCheckbox',
         'QChip',
+        'QChatMessage',
       ],
       directives: [
         'Ripple'
@@ -98,6 +100,7 @@ module.exports = function (ctx) {
       plugins: [
         'LocalStorage',
         'Dialog',
+        'Notify',
       ]
     },
     // animations: 'all' --- includes all animations
diff --git a/src/components/CommentVoter.vue b/src/components/CommentVoter.vue
new file mode 100644
index 0000000..6f2ce0d
--- /dev/null
+++ b/src/components/CommentVoter.vue
@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <div class="flex row items-center group" v-if="$store.getters['user/loggedIn']">
+      <span style="margin: 0 1rem">
+        <i class="fa"
+           :class="{'fa-caret-up text-positive': comment.voting.sum > 0, 'fa-caret-down text-negative': comment.voting.sum < 0, 'fa-sort text-dark': comment.voting.sum === 0}">
+        </i>
+        {{ comment.voting.sum }}
+      </span>
+      <span v-if="comment.author.username !== $store.state.user.decodedToken.username && !myVote">
+        <q-btn color="negative" round small icon="fa-thumbs-down" @click="vote(-1)"></q-btn>
+        <q-btn color="positive" round small icon="fa-thumbs-up" @click="vote(1)"></q-btn>
+      </span>
+      <span v-if="myVote">You voted <i :class="`fas fa-thumbs-${myVote.impact === 1 ? 'up text-positive' : 'down text-negative'}`"></i></span>
+    </div>
+    <div class="group" v-else>
+      <i class="fa"
+         :class="{'fa-caret-up text-positive': comment.voting.sum > 0, 'fa-caret-down text-negative': comment.voting.sum < 0, 'fa-sort text-dark': comment.voting.sum === 0}">
+      </i>
+      {{ comment.voting.sum }} votes
+      <em>Please log in to vote</em>
+    </div>
+  </div>
+</template>
+
+<script>
+  import {
+    QBtn,
+  } from 'quasar'
+
+  export default {
+    props: {
+      comment: Object,
+    },
+    components: {
+      QBtn,
+    },
+    data () {
+      return {}
+    },
+    computed: {
+      myVote () {
+        if (!this.comment || !this.comment.voting || !Array.isArray(this.comment.voting.votes) || this.comment.voting.votes.length === 0) {
+          return undefined
+        }
+        return this.comment.voting.votes[0]
+      },
+    },
+    methods: {
+      vote (impact) {
+        let that = this
+        this.$http.post(`/comments/${this.comment.upload}/comments/${this.comment._id}/vote`, {impact: impact}).then(response => that.$emit('voted'))
+      },
+    },
+  }
+</script>
+
+<style lang="styl" type="text/stylus" scoped>
+</style>
diff --git a/src/components/UploadVoter.vue b/src/components/UploadVoter.vue
index 65a5453..563bc79 100644
--- a/src/components/UploadVoter.vue
+++ b/src/components/UploadVoter.vue
@@ -7,10 +7,11 @@
         </i>
         {{ upload.voting.sum }}
       </h5>
-      <span v-if="upload.author.username !== $store.state.user.decodedToken.username">
+      <span v-if="upload.author.username !== $store.state.user.decodedToken.username && !myVote">
         <q-btn color="negative" round small icon="fa-thumbs-down" @click="vote(-1)"></q-btn>
         <q-btn color="positive" round small icon="fa-thumbs-up" @click="vote(1)"></q-btn>
       </span>
+      <span v-if="myVote">You voted <i :class="`fas fa-thumbs-${myVote.impact === 1 ? 'up text-positive' : 'down text-negative'}`"></i></span>
     </div>
     <div class="group" v-else>
       <i class="fa"
@@ -37,6 +38,14 @@
     data () {
       return {}
     },
+    computed: {
+      myVote () {
+        if (!this.upload || !this.upload.voting || !Array.isArray(this.upload.voting.votes) || this.upload.voting.votes.length === 0) {
+          return undefined
+        }
+        return this.upload.voting.votes[0]
+      },
+    },
     methods: {
       vote (impact) {
         let that = this
diff --git a/src/pages/UploadDetail.vue b/src/pages/UploadDetail.vue
index b2042b6..9b6f73a 100644
--- a/src/pages/UploadDetail.vue
+++ b/src/pages/UploadDetail.vue
@@ -21,14 +21,6 @@
           <span slot="right" class="text-light" style="margin-left: 3rem">updated {{ upload.updatedAt | moment("from") }}</span>
         </q-card-title>
         <q-card-separator />
-        <q-card-main>
-          <p class="text-faded">
-            {{ upload.description }}
-          </p>
-          <div class="group">
-            <q-chip v-for="tag of upload.tags" :key="tag">{{ tag }}</q-chip>
-          </div>
-        </q-card-main>
         <q-card-actions>
           <q-btn @click="openInOpenclonk" color="positive" outline>
             Install mod with OpenClonk
@@ -41,6 +33,46 @@
             Delete mod
           </q-btn>
         </q-card-actions>
+        <q-card-main>
+          <p class="text-faded">
+            {{ upload.description }}
+          </p>
+          <div class="group">
+            <q-chip v-for="tag of upload.tags" :key="tag">{{ tag }}</q-chip>
+          </div>
+        </q-card-main>
+        <q-card-title>Comments</q-card-title>
+        <q-card-main>
+          <div class="flex row no-wrap items-center"
+               v-for="comment of comments.comments"
+               :key="comment._id">
+            <q-chat-message
+              style="max-width: 90%"
+              :name="(comment.author || {}).username"
+              :text="comment.body.split('\n').filter(el => el.trim() !== '')"
+              :stamp="$moment(comment.createdAt).format('LLLL')" />
+            <comment-voter :comment="comment"></comment-voter>
+          </div>
+          <div>
+            <q-input
+              v-model="comment"
+              type="textarea"
+              placeholder="Write a comment"
+              :max-height="100"
+              @keyup.enter="sendComment"
+              :after="[
+                        {
+                          icon: 'fa-paper-plane',
+                          content: true,
+                          handler () {
+                            sendComment()
+                          }
+                        }
+                      ]"
+            />
+            <q-inner-loading :visible="commentSaving"><q-spinner-comment></q-spinner-comment></q-inner-loading>
+          </div>
+        </q-card-main>
         <q-card-media v-if="upload.pic" overlay-position="bottom">
           <q-card-title slot="overlay">
             Voting
@@ -139,10 +171,12 @@
 <script>
   import { openURL } from 'quasar'
   import UploadVoter from 'components/UploadVoter'
+  import CommentVoter from 'components/CommentVoter'
   import FileSaver from 'file-saver'
 
   export default {
     components: {
+      CommentVoter,
       UploadVoter,
     },
     computed: {
@@ -164,6 +198,9 @@
       return {
         upload: null,
         downloadProgresses: {},
+        comments: [],
+        comment: '',
+        commentSaving: false,
       }
     },
     methods: {
@@ -171,10 +208,23 @@
         let that = this
         this.$http.get(`/uploads/${this.routeId}`).then(response => {
           that.upload = response.data
+          that.loadComments()
         }).catch((error) => {
           if (error.response.status === 404) {
             that.$router.push({name: 'upload-list'})
           }
+          else {
+            console.error(error)
+          }
+        })
+      },
+      loadComments () {
+        let that = this
+        this.$http.get(`/uploads/${this.routeId}/comments`).then(response => {
+          that.comments = response.data
+        }).catch((error) => {
+          that.$q.notify('Failed loading comments')
+          console.error(error)
         })
       },
       deleteUpload (upload) {
@@ -218,6 +268,23 @@
       },
       openInOpenclonk () {
         openURL(`openclonk://installmod/${this.upload._id}`)
+      },
+      sendComment () {
+        let that = this
+        this.commentSaving = true
+        if (this.comment.length > 0) {
+          this.$http.post(`/uploads/${this.upload._id}/comments`, {body: this.comment}).then(() => {
+            that.comment = ''
+            that.$q.notify({color: 'positive', icon: 'fa-check', message: 'Comment sent'})
+            that.loadComments()
+            this.commentSaving = false
+          }).catch((error) => {
+            that.$q.notify('Error sending your comment')
+            that.loadComments()
+            this.commentSaving = false
+            console.error(error)
+          })
+        }
       }
     }
   }
diff --git a/src/pages/UploadList.vue b/src/pages/UploadList.vue
index a37d8a1..b90fce1 100644
--- a/src/pages/UploadList.vue
+++ b/src/pages/UploadList.vue
@@ -20,15 +20,8 @@
                  small
                  outline
                  icon="fa-info-circle"
-                 label="Details"
+                 label="Show"
                  @click="$router.push({name: 'upload-detail', params: {uploadId: props.row._id}})" />
-          <q-btn color="negative"
-                 outline
-                 small
-                 icon="fa-trash"
-                 label="Delete"
-                 v-if="$route.params.uploadId !== props.row._id && props.row.author.username === $store.state.user.decodedToken.username"
-                 @click="deleteUpload(props.row)" />
         </q-td>
         <q-td slot='body-cell-voting' slot-scope="props" :props='props'>
           {{ props.value.sum }} <i class="fa" :class="{'fa-caret-up text-positive': props.value.sum > 0, 'fa-caret-down text-negative': props.value.sum < 0, 'fa-sort text-dark': props.value.sum === 0}"></i>
-- 
cgit v1.2.3-54-g00ecf