feat(Report): updated design of modal, info. can be provided for each issue

Signed-off-by: Jonathan <theflametrooper@gmail.com>

frontend/src/App.vue

@@ -1176,4 +1176,63 @@ h4.section-title {
 		font-style: italic;
 	}
 }
+.checkbox-control {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+
+	p {
+		margin-left: 10px;
+	}
+
+	.switch {
+		position: relative;
+		display: inline-block;
+		flex-shrink: 0;
+		width: 40px;
+		height: 24px;
+	}
+
+	.switch input {
+		opacity: 0;
+		width: 0;
+		height: 0;
+	}
+
+	.slider {
+		position: absolute;
+		cursor: pointer;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background-color: #ccc;
+		transition: 0.2s;
+		border-radius: 34px;
+	}
+
+	.slider:before {
+		position: absolute;
+		content: "";
+		height: 16px;
+		width: 16px;
+		left: 4px;
+		bottom: 4px;
+		background-color: white;
+		transition: 0.2s;
+		border-radius: 50%;
+	}
+
+	input:checked + .slider {
+		background-color: var(--primary-color);
+	}
+
+	input:focus + .slider {
+		box-shadow: 0 0 1px var(--primary-color);
+	}
+
+	input:checked + .slider:before {
+		transform: translateX(16px);
+	}
+}
 </style>

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

@@ -938,7 +938,7 @@ export default {
 
 		*/
 	},
-	onBeforeUnmount() {
+	beforeUnmount() {
 		this.playerReady = false;
 		clearInterval(this.interval);
 		clearInterval(this.activityWatchVideoDataInterval);

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

@@ -544,7 +544,7 @@ export default {
 			);
 		}
 	},
-	onBeforeUnmount() {
+	beforeUnmount() {
 		this.socket.dispatch(
 			"apis.leaveRoom",
 			`manage-station.${this.stationId}`,

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

@@ -449,7 +449,7 @@ export default {
 			{ modal: "manageStation" }
 		);
 	},
-	onBeforeUnmount() {
+	beforeUnmount() {
 		this.socket.dispatch(
 			"apis.leaveRoom",
 			`manage-station.${this.stationId}`,

frontend/src/components/modals/Report.vue

@@ -3,10 +3,11 @@
 		<template #body>
 			<div class="edit-report-wrapper">
 				<song-item
-					:song="localSong"
+					:song="song"
 					:disabled-actions="['report']"
 					header="Selected Song.."
 				/>
+
 				<div class="columns is-multiline">
 					<div
 						v-for="issue in issues"
@@ -14,22 +15,64 @@
 						:key="issue.name"
 					>
 						<label class="label">{{ issue.name }}</label>
+
 						<p
 							v-for="reason in issue.reasons"
-							class="control"
-							:key="reason"
+							class="control checkbox-control"
+							:key="reason.reason"
 						>
-							<label class="checkbox">
-								<input
-									type="checkbox"
-									@click="toggleIssue(issue.name, reason)"
-								/>
-								{{ reason }}
-							</label>
+							<span class="align-horizontally">
+								<span>
+									<label class="switch">
+										<input
+											type="checkbox"
+											:id="reason.reason"
+											v-model="reason.enabled"
+										/>
+										<span class="slider round"></span>
+									</label>
+
+									<label :for="reason.reason">
+										<span></span>
+										<p>{{ reason.reason }}</p>
+									</label>
+								</span>
+
+								<i
+									class="material-icons"
+									content="Provide More Info"
+									v-tippy
+									@click="reason.showInfo = !reason.showInfo"
+								>
+									info
+								</i>
+							</span>
+
+							<input
+								type="text"
+								class="input"
+								v-model="reason.info"
+								v-if="reason.showInfo"
+								placeholder="Provide more information..."
+								@keyup="reason.enabled = true"
+							/>
 						</p>
 					</div>
-					<div class="column">
-						<label class="label">Other</label>
+					<!-- allow for multiple custom issues with plus/add button and then a input textbox -->
+					<!-- do away with textbox -->
+
+					<!--
+						<div class="column">
+						<p class="content-box-optional-helper">
+							<a href="#" @click="changeToLoginModal()">
+								Issue isn't listed?
+							</a>
+						</p>
+
+						<br />
+
+		
+
 						<textarea
 							v-model="report.description"
 							class="textarea"
@@ -40,6 +83,7 @@
 							{{ charactersRemaining }}
 						</div>
 					</div>
+					-->
 				</div>
 			</div>
 		</template>
@@ -66,7 +110,6 @@ export default {
 	components: { Modal, SongItem },
 	data() {
 		return {
-			localSong: null,
 			report: {
 				resolved: false,
 				youtubeId: "",
@@ -83,32 +126,117 @@ export default {
 				{
 					name: "Video",
 					reasons: [
-						"Doesn't exist",
-						"It's private",
-						"It's not available in my country",
-						"Unofficial"
+						{
+							enabled: false,
+							reason: "Doesn't exist",
+							info: "",
+							showInfo: false
+						},
+						{
+							enabled: false,
+							reason: "It's private",
+							info: "",
+							showInfo: false
+						},
+						{
+							enabled: false,
+							reason: "It's not available in my country",
+							info: "United States",
+							showInfo: false
+						},
+						{
+							enabled: false,
+							reason: "Unofficial",
+							info: "",
+							showInfo: false
+						}
 					]
 				},
 				{
 					name: "Title",
-					reasons: ["Incorrect", "Inappropriate"]
+					reasons: [
+						{
+							enabled: false,
+							reason: "Incorrect",
+							info: "",
+							showInfo: false
+						},
+						{
+							enabled: false,
+							reason: "Inappropriate",
+							info: "",
+							showInfo: false
+						}
+					]
 				},
 				{
 					name: "Duration",
 					reasons: [
-						"Skips too soon",
-						"Skips too late",
-						"Starts too soon",
-						"Starts too late"
+						{
+							enabled: false,
+							reason: "Skips too soon",
+							info: "",
+							showInfo: false
+						},
+						{
+							enabled: false,
+							reason: "Skips too late",
+							info: "",
+							showInfo: false
+						},
+						{
+							enabled: false,
+							reason: "Starts too soon",
+							info: "",
+							showInfo: false
+						},
+						{
+							enabled: false,
+							reason: "Starts too late",
+							info: "",
+							showInfo: false
+						}
 					]
 				},
 				{
 					name: "Artists",
-					reasons: ["Incorrect", "Inappropriate"]
+					reasons: [
+						{
+							enabled: false,
+							reason: "Incorrect",
+							info: "",
+							showInfo: false
+						},
+						{
+							enabled: false,
+							reason: "Inappropriate",
+							info: "",
+							showInfo: false
+						}
+					]
 				},
 				{
 					name: "Thumbnail",
-					reasons: ["Incorrect", "Inappropriate", "Doesn't exist"]
+					reasons: [
+						{
+							enabled: false,
+							reason: "Incorrect",
+							info: "",
+							showInfo: false
+						},
+						{
+							enabled: false,
+							reason: "Inappropriate",
+							info: "",
+							showInfo: false
+						},
+						{
+							enabled: false,
+							reason: "Doesn't exist",
+							info: "",
+							showInfo: false
+						}
+					]
 				}
 			]
 		};
@@ -125,31 +253,17 @@ export default {
 		})
 	},
 	mounted() {
-		if (this.song !== null) {
-			this.localSong = this.song;
-			this.report.youtubeId = this.song.youtubeId;
-			this.reportSong(null);
-		}
+		if (this.song !== null) this.report.youtubeId = this.song.youtubeId;
 	},
 	methods: {
 		create() {
+			// generate report from here (filter by enabled reasons)
+
 			this.socket.dispatch("reports.create", this.report, res => {
 				new Toast(res.message);
 				if (res.status === "success") this.closeModal("report");
 			});
 		},
-		toggleIssue(name, reason) {
-			for (let z = 0; z < this.report.issues.length; z += 1) {
-				if (this.report.issues[z].name === name) {
-					if (this.report.issues[z].reasons.indexOf(reason) > -1) {
-						this.report.issues[z].reasons.splice(
-							this.report.issues[z].reasons.indexOf(reason),
-							1
-						);
-					} else this.report.issues[z].reasons.push(reason);
-				}
-			}
-		},
 		...mapActions("modals/report", ["reportSong"]),
 		...mapActions("modalVisibility", ["closeModal"])
 	}
@@ -189,5 +303,30 @@ export default {
 	margin-left: unset;
 	margin-right: unset;
 	margin-top: 20px;
+
+	.control {
+		display: flex;
+		flex-direction: column;
+
+		span.align-horizontally {
+			width: 100%;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+
+			span {
+				display: flex;
+			}
+		}
+
+		i {
+			cursor: pointer;
+		}
+
+		input[type="text"] {
+			height: initial;
+			margin: 10px 0;
+		}
+	}
 }
 </style>

frontend/src/pages/Admin/index.vue

@@ -175,7 +175,7 @@ export default {
 	mounted() {
 		this.changeTab(this.$route.path);
 	},
-	onBeforeUnmount() {
+	beforeUnmount() {
 		this.socket.dispatch("apis.leaveRooms", () => {});
 	},
 	methods: {

frontend/src/pages/Admin/tabs/VerifiedSongs.vue

@@ -409,7 +409,7 @@ export default {
 			}
 		);
 	},
-	onBeforeUnmount() {
+	beforeUnmount() {
 		const shortcutNames = [
 			"verifiedSongs.toggleKeyboardShortcutsHelper",
 			"verifiedSongs.resetKeyboardShortcutsHelper"

frontend/src/pages/Home.vue

@@ -689,7 +689,7 @@ export default {
 			this.orderOfFavoriteStations = res.data.order;
 		});
 	},
-	onBeforeUnmount() {
+	beforeUnmount() {
 		this.socket.dispatch("apis.leaveRoom", "home", () => {});
 	},
 	methods: {

frontend/src/pages/Profile/Tabs/Playlists.vue

@@ -141,7 +141,7 @@ export default {
 			this.orderOfPlaylists = this.calculatePlaylistOrder(); // order in regards to the database
 		});
 	},
-	onBeforeUnmount() {
+	beforeUnmount() {
 		this.socket.dispatch(
 			"apis.leaveRoom",
 			`profile.${this.userId}.playlists`,

frontend/src/pages/Profile/Tabs/RecentActivity.vue

@@ -123,7 +123,7 @@ export default {
 			this.offsettedFromNextSet = 0;
 		});
 	},
-	onBeforeUnmount() {
+	beforeUnmount() {
 		this.socket.dispatch(
 			"apis.leaveRoom",
 			`profile.${this.userId}.activities`,

frontend/src/pages/Settings/Tabs/Preferences.vue

@@ -191,65 +191,3 @@ export default {
 	}
 };
 </script>
-
-<style lang="scss" scoped>
-.checkbox-control {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-
-	p {
-		margin-left: 10px;
-	}
-
-	.switch {
-		position: relative;
-		display: inline-block;
-		flex-shrink: 0;
-		width: 40px;
-		height: 24px;
-	}
-
-	.switch input {
-		opacity: 0;
-		width: 0;
-		height: 0;
-	}
-
-	.slider {
-		position: absolute;
-		cursor: pointer;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		background-color: #ccc;
-		transition: 0.2s;
-		border-radius: 34px;
-	}
-
-	.slider:before {
-		position: absolute;
-		content: "";
-		height: 16px;
-		width: 16px;
-		left: 4px;
-		bottom: 4px;
-		background-color: white;
-		transition: 0.2s;
-		border-radius: 50%;
-	}
-
-	input:checked + .slider {
-		background-color: var(--primary-color);
-	}
-
-	input:focus + .slider {
-		box-shadow: 0 0 1px var(--primary-color);
-	}
-
-	input:checked + .slider:before {
-		transform: translateX(16px);
-	}
-}
-</style>

frontend/src/pages/Station/index.vue

@@ -1050,7 +1050,7 @@ export default {
 			this.volumeSliderValue = volume * 100;
 		}
 	},
-	onBeforeUnmount() {
+	beforeUnmount() {
 		document.body.style.cssText = "";
 
 		/** Reset Songslist */