Work on Admin Reports

backend/logic/actions/reports.js

@@ -8,9 +8,20 @@ const hooks = require('./hooks');
 module.exports = {
 
 	index: hooks.adminRequired((session, cb) => {
-		db.models.reports.find({}).sort({ released: 'desc' }).exec((err, reports) => {
+		db.models.report.find({ resolved: false }).sort({ released: 'desc' }).exec((err, reports) => {
 			if (err) console.error(err);
-			else cb({ status: 'success', data: reports });
+			cb({ status: 'success', data: reports });
+		});
+	}),
+
+	resolve: hooks.adminRequired((session, _id, cb) => {
+		db.models.report.findOne({ _id }).sort({ released: 'desc' }).exec((err, report) => {
+			if (err) console.error(err);
+			report.resolved = true;
+			report.save(err => {
+				if (err) console.error(err);
+				else cb({ status: 'success', message: 'Successfully resolved Report' });
+			});
 		});
 	}),
 

backend/logic/db/schemas/report.js

@@ -1,4 +1,5 @@
 module.exports = {
+	resolved: { type: Boolean, default: false, required: true },
 	songId: { type: String, required: true },
 	description: { type: String, required: true },
 	issues: [{

frontend/components/Admin/Reports.vue

@@ -0,0 +1,71 @@
+<template>
+	<div class='columns is-mobile'>
+		<div class='column is-8-desktop is-offset-2-desktop is-12-mobile'>
+			<table class='table is-striped'>
+				<thead>
+					<tr>
+						<td>Song ID</td>
+						<td>Created By</td>
+						<td>Created At</td>
+						<td>Description</td>
+						<td>Issues</td>
+					</tr>
+				</thead>
+				<tbody>
+					<tr v-for='(index, report) in reports' track-by='$index'>
+						<td>
+							<span>{{ report.songId }}</span>
+						</td>
+						<td>
+							<span>{{ report.createdBy }}</span>
+						</td>
+						<td>
+							<span>{{ report.createdAt }}</span>
+						</td>
+						<td>
+							<span>{{ report.issues }}</span>
+						</td>
+						<td>
+							<a class='button is-primary' @click='resolve()'>Resolve</a>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+	</div>
+</template>
+
+<script>
+	import { Toast } from 'vue-roaster';
+
+	export default {
+		data() {
+			return {
+				reports: []
+			}
+		},
+		methods: {},
+		ready: function () {
+			let _this = this;
+			let socketInterval = setInterval(() => {
+				if (!!_this.$parent.$parent.socket) {
+					_this.socket = _this.$parent.$parent.socket;
+					_this.socket.emit('reports.index', res => {
+						_this.reports = res.data;
+					});
+					clearInterval(socketInterval);
+				}
+			}, 100);
+		}
+	}
+</script>
+
+<style lang='scss' scoped>
+	.tag:not(:last-child) { margin-right: 5px; }
+
+	td {
+		word-wrap: break-word;
+		max-width: 10vw;
+		vertical-align: middle;
+	}
+</style>

frontend/components/Modals/Report.vue

@@ -106,6 +106,7 @@
 				isPreviousSongActive: false,
 				isCurrentSongActive: true,
 				report: {
+					resolved: false,
 					songId: this.$parent.currentSong._id,
 					description: '',
 					issues: [

frontend/components/pages/Admin.vue

@@ -21,11 +21,19 @@
 						<span>&nbsp;Stations</span>
 					</a>
 				</li>
+				<li :class='{ "is-active": currentTab == "reports" }' @click='showTab("reports")'>
+					<a>
+						<i class="material-icons">report_problem</i>
+						<span>&nbsp;Reports</span>
+					</a>
+				</li>
 			</ul>
 		</div>
+
 		<queue-songs v-if='currentTab == "queueSongs"'></queue-songs>
 		<songs v-if='currentTab == "songs"'></songs>
 		<stations v-if='currentTab == "stations"'></stations>
+		<reports v-if='currentTab == "reports"'></reports>
 	</div>
 </template>
 
@@ -36,9 +44,10 @@
 	import QueueSongs from '../Admin/QueueSongs.vue';
 	import Songs from '../Admin/Songs.vue';
 	import Stations from '../Admin/Stations.vue';
+	import Reports from '../Admin/Reports.vue';
 
 	export default {
-		components: { MainHeader, MainFooter, QueueSongs, Songs, Stations },
+		components: { MainHeader, MainFooter, QueueSongs, Songs, Stations, Reports },
 		data() {
 			return {
 				currentTab: 'queueSongs'