fix stuff that broke on upgrade

4 files changed, 62 insertions, 25 deletions

diff --git a/src/pages/UploadDetail.vue b/src/pages/UploadDetail.vue
index d742a4a..956e324 100644
--- a/src/pages/UploadDetail.vue
+++ b/src/pages/UploadDetail.vue
@@ -9,7 +9,7 @@
             <span slot="subtitle">by {{ upload.author.username }}</span>
             <span slot="right" class="text-white" style="margin-left: 3rem">updated {{ upload.updatedAt | moment("from") }}</span>
           </q-card-title>
-          <img :src="`${$http.defaults.baseURL}/media/${upload.pic}`">
+          <img :src="`${$http.defaults.baseURL}/media/${upload.pic._id}`">
         </q-card-media>
         <q-card-title class="bg-positive text-white" v-else>
           {{ upload.title }}
@@ -38,7 +38,7 @@
           <q-card-title slot="overlay">
             Voting
           </q-card-title>
-          <q-parallax :src="`${$http.defaults.baseURL}/media/${upload.pic}`" :height="150">
+          <q-parallax :src="`${$http.defaults.baseURL}/media/${upload.pic._id}`" :height="150">
           </q-parallax>
         </q-card-media>
         <q-card-title v-else>
@@ -53,18 +53,18 @@
           <q-card-title slot="overlay">
             Dependencies
           </q-card-title>
-          <q-parallax :src="`${$http.defaults.baseURL}/media/${upload.pic}`" :height="150">
+          <q-parallax :src="`${$http.defaults.baseURL}/media/${upload.pic._id}`" :height="150">
           </q-parallax>
         </q-card-media>
         <q-card-title v-else>
           Dependencies
         </q-card-title>
         <q-card-main>
-          <q-btn disabled flat v-if="upload.dependency.length === 0">
+          <q-btn disabled flat v-if="!Array.isArray(upload.dependencies) || upload.dependencies.length === 0">
             No dependencies
           </q-btn>
           <div class="group" v-else>
-            <div v-for="d of upload.dependency"
+            <div v-for="d of upload.dependencies"
                  :key="d._id">
               <q-btn @click="$router.push({name: 'upload-detail', params: {uploadId: d._id}})" no-caps outline>
                 {{ d.title }}
@@ -76,14 +76,14 @@
           <q-card-title slot="overlay">
             File downloads
           </q-card-title>
-          <q-parallax :src="`${$http.defaults.baseURL}/media/${upload.pic}`" :height="150">
+          <q-parallax :src="`${$http.defaults.baseURL}/media/${upload.pic._id}`" :height="150">
           </q-parallax>
         </q-card-media>
         <q-card-title v-else>
           File downloads
         </q-card-title>
         <q-card-main>
-          <q-btn disabled flat v-if="upload.file.length === 0">
+          <q-btn disabled flat v-if="!Array.isArray(upload.files) || upload.files.length === 0">
             No files
           </q-btn>
           <div class="group"
@@ -112,7 +112,7 @@
           <q-card-title slot="overlay">
             Other data
           </q-card-title>
-          <q-parallax :src="`${$http.defaults.baseURL}/media/${upload.pic}`" :height="150">
+          <q-parallax :src="`${$http.defaults.baseURL}/media/${upload.pic._id}`" :height="150">
           </q-parallax>
         </q-card-media>
         <q-card-title v-else>
diff --git a/src/pages/UploadList.vue b/src/pages/UploadList.vue
index a8a731c..da297ba 100644
--- a/src/pages/UploadList.vue
+++ b/src/pages/UploadList.vue
@@ -5,28 +5,29 @@
         <h4>Available Mods</h4>
         <q-table
           no-data-label="No mods available"
+          row-key="name"
           :data="uploads"
           :config="tableConfig"
           :columns="tableColumns"
           @refresh="refresh">
-          <template slot='col-action' slot-scope='cell'>
+          <q-td slot='body-cell-action' slot-scope="props" :props='props'>
             <q-btn color="primary"
                    small
                    outline
                    icon="fa-info-circle"
-                   @click="$router.push({name: 'upload-detail', params: {uploadId: cell.row._id}})">
+                   @click="$router.push({name: 'upload-detail', params: {uploadId: props.row._id}})">
               Details</q-btn>
             <q-btn color="negative"
                    outline
                    small
                    icon="fa-trash-o"
-                   v-if="cell.row.author.username === $store.state.user.decodedToken.username"
+                   v-if="props.row.author.username === $store.state.user.decodedToken.username"
                    @click="deleteUpload(cell.row)">
               Delete</q-btn>
-          </template>
-          <template slot='col-voting' slot-scope='cell'>
-            {{ cell.data.sum }} <i class="fa" :class="{'fa-caret-up text-positive': cell.data.sum > 0, 'fa-caret-down text-negative': cell.data.sum < 0, 'fa-sort text-dark': cell.data.sum === 0}"></i>
-          </template>
+          </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>
+          </q-td>
         </q-table>
       </div>
       <router-view></router-view>
@@ -38,13 +39,9 @@
   import {
     Dialog,
   } from 'quasar'
-  import Truncate from 'vue-truncate-collapsed'
   import moment from 'moment'
 
   export default {
-    components: {
-      Truncate,
-    },
     computed: {
       showList () {
         return this.$route.name === 'upload-list'
@@ -71,12 +68,22 @@
           rowHeight: '60px',
         },
         tableColumns: [
-          {label: 'Title', field: 'title', width: '100px'},
-          {label: 'Description', field: 'description', width: '500px'},
-          {label: 'Author', field: 'author', width: '100px', format: el => el.username},
-          {label: 'Voting', field: 'voting', width: '100px'},
-          {label: 'Last update', field: 'updatedAt', width: '100px', format: el => moment(el).from()},
-          {label: 'Actions', field: 'action', width: '200px'},
+          {name: 'title', label: 'Title', field: 'title'},
+          {
+            name: 'description',
+            label: 'Description',
+            field: 'description',
+            format: el => typeof el === 'string' && el.length > 150 ? el.slice(0, 150) + '...' : el,
+          },
+          {name: 'author', label: 'Author', field: row => row.author.username},
+          {name: 'voting', label: 'Voting', field: 'voting'},
+          {
+            name: 'updatedAt',
+            label: 'Last update',
+            field: 'updatedAt',
+            format: el => moment(el).from(),
+          },
+          {name: 'action', label: 'Actions', field: 'action'},
         ],
       }
     },
diff --git a/src/plugins/prettyBytes.js b/src/plugins/prettyBytes.js
new file mode 100644
index 0000000..ebfb72d
--- /dev/null
+++ b/src/plugins/prettyBytes.js
@@ -0,0 +1,25 @@
+export default ({ Vue }) => {
+  Vue.filter('prettyBytes', function (value) {
+    const UNITS = ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+
+    if (!Number.isFinite(value)) {
+      throw new TypeError(`Expected a finite number, got ${typeof value}: ${value}`)
+    }
+
+    const neg = value < 0
+
+    if (neg) {
+      value = -value
+    }
+
+    if (value < 1) {
+      return (neg ? '-' : '') + value + ' B'
+    }
+
+    const exponent = Math.min(Math.floor(Math.log10(value) / 3), UNITS.length - 1)
+    const numStr = Number((value / Math.pow(1000, exponent)).toPrecision(3))
+    const unit = UNITS[exponent]
+
+    return (neg ? '-' : '') + numStr + ' ' + unit
+  })
+}
diff --git a/src/plugins/vueMoment.js b/src/plugins/vueMoment.js
new file mode 100644
index 0000000..dd8ebfb
--- /dev/null
+++ b/src/plugins/vueMoment.js
@@ -0,0 +1,5 @@
+import VueMoment from 'vue-moment'
+
+export default ({ Vue }) => {
+  Vue.use(VueMoment)
+}