1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
|
<template>
<div>
<transition :enter="showList ? 'fadeInLeft' : 'fadeInRight'" :leave="showList ? 'fadeOutRight' : 'fadeOutLeft'" mode="out-in" duration="500">
<div v-if="showList">
<h4>Available Mods</h4>
<q-table
no-data-label="No mods available"
:data="uploads"
:config="tableConfig"
:columns="tableColumns"
@refresh="refresh">
<template slot='col-action' slot-scope='cell'>
<q-btn color="primary"
small
outline
icon="fa-info-circle"
@click="$router.push({name: 'upload-detail', params: {uploadId: cell.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"
@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-table>
</div>
<router-view></router-view>
</transition>
</div>
</template>
<script>
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'
}
},
watch: {
showList: {
handler (val, oldVal) {
if (val && val !== oldVal) {
this.refresh()
}
},
immediate: true,
}
},
data () {
return {
response: {},
uploads: [],
tableConfig: {
refresh: true,
leftStickyColumns: 1,
rightStickyColumns: 3,
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'},
],
}
},
methods: {
refresh (done) {
let that = this
this.$http.get('/uploads').then((response) => {
that.response = response
that.uploads = response.data.uploads
if (done) {
done()
}
})
},
deleteUpload (upload) {
let that = this
Dialog.create({
title: 'Delete mod?',
message: `Do you really want to delete the mod ${upload.title}?<br>This cannot be undone!`,
buttons: [
'Cancel',
{
label: '<i class="fa fa-trash-o"></i> Yes, delete!',
color: 'negative',
outline: true,
handler () {
that.$http.delete(`/uploads/${upload._id}`).then(response => that.refresh())
}
}
]
})
},
},
}
</script>
<style lang="styl" type="text/stylus" scoped>
.description
max-width: 400px
</style>
|
