Added IssuesModal for viewing Report issues and added pub/sub for resolving reports. Reports now work on the Admin side.

backend/logic/actions/reports.js

@@ -3,25 +3,40 @@
 const async = require('async');
 
 const db = require('../db');
+const cache = require('../cache');
+const utils = require('../utils');
 const hooks = require('./hooks');
 const songs = require('../songs');
 
+cache.sub('report.resolve', reportId => {
+	utils.emitToRoom('admin.reports', 'event:admin.report.resolved', reportId);
+});
+
 module.exports = {
 
 	index: hooks.adminRequired((session, cb) => {
 		db.models.report.find({ resolved: false }).sort({ released: 'desc' }).exec((err, reports) => {
-			if (err) console.error(err);
+			if (err) {
+				console.error(err);
+				cb({ 'status': 'failure', 'message': 'Something went wrong'});
+			}
 			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);
+			if (err) {
+				console.error(err);
+				cb({ 'status': 'failure', 'message': 'Something went wrong'});
+			}
 			report.resolved = true;
 			report.save(err => {
 				if (err) console.error(err);
-				else cb({ status: 'success', message: 'Successfully resolved Report' });
+				else {
+					cache.pub('report.resolve', _id);
+					cb({ status: 'success', message: 'Successfully resolved Report' });
+				}
 			});
 		});
 	}),

frontend/components/Admin/Reports.vue

@@ -8,7 +8,6 @@
 						<td>Created By</td>
 						<td>Created At</td>
 						<td>Description</td>
-						<td>Issues</td>
 						<td>Options</td>
 					</tr>
 				</thead>
@@ -27,38 +26,64 @@
 							<span>{{ report.description }}</span>
 						</td>
 						<td>
-							<span>{{ report.issues }}</span>
-						</td>
-						<td>
-							<a class='button is-primary' @click='resolve()'>Resolve</a>
+							<a class='button is-warning' @click='toggleModal(report.issues)'>Issues</a>
+							<a class='button is-primary' @click='resolve(report._id)'>Resolve</a>
 						</td>
 					</tr>
 				</tbody>
 			</table>
 		</div>
 	</div>
+
+	<issues-modal v-if='isModalActive'></issues-modal>
 </template>
 
 <script>
 	import { Toast } from 'vue-roaster';
 	import io from '../../io';
 
+	import IssuesModal from '../Modals/IssuesModal.vue';
+
 	export default {
 		data() {
 			return {
-				reports: []
+				reports: [],
+				isModalActive: false
+			}
+		},
+		methods: {
+			init: function() {
+				this.socket.emit('apis.joinAdminRoom', 'reports', data => {});
+			},
+			toggleModal: function (issues) {
+				this.isModalActive = !this.isModalActive;
+				if (this.isModalActive) this.currentReport = issues;
+			},
+			resolve: function (reportId) {
+				this.socket.emit('reports.resolve', reportId, res => {
+					Toast.methods.addToast(res.message, 3000);
+				});
 			}
 		},
-		methods: {},
 		ready: function () {
 			let _this = this;
 			io.getSocket((socket) => {
 				_this.socket = socket;
+				if (_this.socket.connected) _this.init();
 				_this.socket.emit('reports.index', res => {
 					_this.reports = res.data;
 				});
+				_this.socket.on('event:admin.report.resolved', reportId => {
+					_this.reports = _this.reports.filter(report => {
+						return report._id !== reportId;
+					});
+				});
+				io.onConnect(() => {
+					_this.init();
+				});
 			});
-		}
+		},
+		components: { IssuesModal }
 	}
 </script>
 

frontend/components/Admin/Stations.vue

@@ -138,7 +138,7 @@
 				else Toast.methods.addToast('Genre cannot be empty', 3000);
 			},
 			removeBlacklistedGenre: function (index) { this.newStation.blacklistedGenres.splice(index, 1); },
-			init: function() {
+			init: function () {
 				let _this = this;
 				_this.socket.emit('stations.index', data => {
 					_this.stations = data.stations;
@@ -150,14 +150,12 @@
 			let _this = this;
 			io.getSocket((socket) => {
 				_this.socket = socket;
-				if (_this.socket.connected) {
-					_this.init();
-				}
+				if (_this.socket.connected) _this.init();
 				_this.socket.on('event:admin.station.added', station => {
 					_this.stations.push(station);
 				});
 				_this.socket.on('event:admin.station.removed', stationId => {
-					_this.stations = _this.stations.filter(function(station) {
+					_this.stations = _this.stations.filter(station => {
 						return station._id !== stationId;
 					});
 				});

frontend/components/Modals/IssuesModal.vue

@@ -0,0 +1,41 @@
+<template>
+	<div class='modal is-active'>
+		<div class='modal-background'></div>
+		<div class='modal-card'>
+			<header class='modal-card-head'>
+				<p class='modal-card-title'>Report Issues</p>
+				<button class='delete' @click='$parent.toggleModal()'></button>
+			</header>
+			<section class='modal-card-body'>
+
+				<table class='table is-narrow'>
+					<thead>
+						<tr>
+							<td>Issue</td>
+							<td>Reasons</td>
+						</tr>
+					</thead>
+					<tbody>
+						<tr v-for='(index, issue) in $parent.currentReport' track-by='$index'>
+							<td>
+								<span>{{ issue.name }}</span>
+							</td>
+							<td>
+								<span>{{ issue.reasons }}</span>
+							</td>
+						</tr>
+					</tbody>
+				</table>
+
+			</section>
+			<footer class='modal-card-foot'>
+				<a class='button is-primary' @click='$parent.resolve()'>
+					<span>Resolve</span>
+				</a>
+				<a class='button is-danger' @click='$parent.toggleModal()'>
+					<span>Cancel</span>
+				</a>
+			</footer>
+		</div>
+	</div>
+</template>