Added empty reports tab to EditSong

frontend/src/components/modals/EditSong/Tabs/Reports.vue

@@ -0,0 +1,31 @@
+<template>
+	<div class="reports-tab">
+		Reports will display here
+	</div>
+</template>
+
+<script>
+import { mapState, mapGetters /* , mapActions */ } from "vuex";
+
+// import Toast from "toasters";
+
+export default {
+	data() {
+		return {};
+	},
+	computed: {
+		...mapState("modals/editSong", {
+			reports: state => state.reports
+		}),
+		...mapGetters({
+			socket: "websockets/getSocket"
+		})
+	},
+	mounted() {}
+	// methods: {
+	// 	...mapActions("modals/editSong", ["selectDiscogsInfo"])
+	// }
+};
+</script>
+
+<style lang="scss" scoped></style>

frontend/src/components/modals/EditSong/index.vue

@@ -317,8 +317,17 @@
 							>
 								Discogs
 							</button>
+							<button
+								class="button is-default"
+								:class="{ selected: tab === 'reports' }"
+								ref="reports-tab"
+								@click="showTab('reports')"
+							>
+								Reports ({{ reports.length }})
+							</button>
 						</div>
 						<discogs class="tab" v-show="tab === 'discogs'" />
+						<reports class="tab" v-show="tab === 'reports'" />
 					</div>
 				</div>
 			</div>
@@ -419,9 +428,10 @@ import FloatingBox from "../../FloatingBox.vue";
 import SaveButton from "../../SaveButton.vue";
 
 import Discogs from "./Tabs/Discogs.vue";
+import Reports from "./Tabs/Reports.vue";
 
 export default {
-	components: { Modal, FloatingBox, SaveButton, Confirm, Discogs },
+	components: { Modal, FloatingBox, SaveButton, Confirm, Discogs, Reports },
 	props: {
 		youtubeId: { type: String, default: null },
 		// songType: { type: String, default: null },
@@ -491,7 +501,8 @@ export default {
 			tab: state => state.tab,
 			video: state => state.video,
 			song: state => state.song,
-			originalSong: state => state.originalSong
+			originalSong: state => state.originalSong,
+			reports: state => state.reports
 		}),
 		...mapState("modalVisibility", {
 			modals: state => state.modals
@@ -704,7 +715,7 @@ export default {
 			"reports.getReportsForSong",
 			this.song._id,
 			res => {
-				this.reports = res.data.reports;
+				this.updateReports(res.data.reports);
 			}
 		);
 
@@ -1402,7 +1413,8 @@ export default {
 			"pauseVideo",
 			"getCurrentTime",
 			"editSong",
-			"updateSongField"
+			"updateSongField",
+			"updateReports"
 		]),
 		...mapActions("modalVisibility", ["closeModal"])
 	}

frontend/src/pages/Home.vue

@@ -808,6 +808,11 @@ html {
 		color: var(--light-grey-2);
 	}
 
+	.card-image i {
+		user-select: none;
+		-webkit-user-select: none;
+	}
+
 	.card-image.thumbnail {
 		background-color: var(--dark-grey-2);
 	}

frontend/src/store/modules/modals/editSong.js

@@ -15,6 +15,7 @@ export default {
 		},
 		song: {},
 		originalSong: {},
+		reports: [],
 		tab: "discogs"
 	},
 	getters: {},
@@ -33,7 +34,8 @@ export default {
 		},
 		updateSongField: ({ commit }, data) => commit("updateSongField", data),
 		selectDiscogsInfo: ({ commit }, discogsInfo) =>
-			commit("selectDiscogsInfo", discogsInfo)
+			commit("selectDiscogsInfo", discogsInfo),
+		updateReports: ({ commit }, reports) => commit("updateReports", reports)
 	},
 	mutations: {
 		showTab(state, tab) {
@@ -76,6 +78,9 @@ export default {
 		},
 		selectDiscogsInfo(state, discogsInfo) {
 			state.song.discogs = discogsInfo;
+		},
+		updateReports(state, reports) {
+			state.reports = reports;
 		}
 	}
 };