fix(User Preferences): preferences can now be updated individually

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

backend/logic/actions/users.js

@@ -1064,22 +1064,17 @@ export default {
 		async.waterfall(
 			[
 				next => {
-					userModel.findByIdAndUpdate(
-						session.userId,
-						{
-							$set: {
-								preferences: {
-									nightmode: preferences.nightmode,
-									autoSkipDisliked: preferences.autoSkipDisliked,
-									activityLogPublic: preferences.activityLogPublic,
-									anonymousSongRequests: preferences.anonymousSongRequests,
-									activityWatch: preferences.activityWatch
-								}
-							}
-						},
-						{ new: false },
-						next
-					);
+					const $set = {};
+
+					Object.keys(preferences).forEach(preference => {
+						$set[`preferences.${preference}`] = preferences[preference];
+					});
+
+					return next(null, $set);
+				},
+
+				($set, next) => {
+					userModel.findByIdAndUpdate(session.userId, { $set }, { new: false, upsert: true }, next);
 				}
 			],
 			async (err, user) => {

frontend/src/App.vue

@@ -112,13 +112,7 @@ export default {
 				if (this.loggedIn) {
 					this.socket.dispatch(
 						"users.updatePreferences",
-						{
-							nightmode: !this.nightmode,
-							autoSkipDisliked: false,
-							activityLogPublic: false,
-							anonymousSongRequests: false,
-							activityWatch: false
-						},
+						{ nightmode: !this.nightmode },
 						res => {
 							if (res.status !== "success")
 								new Toast(res.message);
@@ -362,6 +356,20 @@ textarea {
 	font-family: "Inter", Helvetica, Arial, sans-serif;
 }
 
+#page-title {
+	margin-top: 0;
+	font-size: 35px;
+	text-align: center;
+}
+
+@media only screen and (min-width: 700px) {
+	#page-title {
+		margin: 0;
+		margin-bottom: 30px;
+		font-size: 40px;
+	}
+}
+
 .upper-container {
 	height: 100%;
 }

frontend/src/components/layout/MainHeader.vue

@@ -98,13 +98,7 @@ export default {
 			modals: state => state.modalVisibility.modals.header,
 			role: state => state.user.auth.role,
 			loggedIn: state => state.user.auth.loggedIn,
-			username: state => state.user.auth.username,
-			autoSkipDisliked: state => state.user.preferences.autoSkipDisliked,
-			activityLogPublic: state =>
-				state.user.preferences.activityLogPublic,
-			anonymousSongRequests: state =>
-				state.user.preferences.anonymousSongRequests,
-			activityWatch: state => state.user.preferences.activityWatch
+			username: state => state.user.auth.username
 		}),
 		...mapGetters({
 			socket: "websockets/getSocket"
@@ -119,13 +113,7 @@ export default {
 			if (this.loggedIn) {
 				this.socket.dispatch(
 					"users.updatePreferences",
-					{
-						nightmode: this.localNightmode,
-						autoSkipDisliked: this.autoSkipDisliked,
-						activityLogPublic: this.activityLogPublic,
-						anonymousSongRequests: this.anonymousSongRequests,
-						activityWatch: this.activityWatch
-					},
+					{ nightmode: this.localNightmode },
 					res => {
 						if (res.status !== "success") new Toast(res.message);
 					}
@@ -144,7 +132,8 @@ export default {
 		});
 
 		this.socket.on("keep.event:user.preferences.updated", res => {
-			this.localNightmode = res.data.preferences.nightmode;
+			if (res.data.preferences.nightmode !== undefined)
+				this.localNightmode = res.data.preferences.nightmode;
 		});
 
 		this.frontendDomain = await lofig.get("frontendDomain");

frontend/src/main.js

@@ -209,31 +209,37 @@ lofig.folder = "../config/default.json";
 	ws.socket.on("keep.event:user.preferences.updated", res => {
 		const { preferences } = res.data;
 
-		store.dispatch(
-			"user/preferences/changeAutoSkipDisliked",
-			preferences.autoSkipDisliked
-		);
-
-		localStorage.setItem("nightmode", preferences.nightmode);
-		store.dispatch(
-			"user/preferences/changeNightmode",
-			preferences.nightmode
-		);
-
-		store.dispatch(
-			"user/preferences/changeActivityLogPublic",
-			preferences.activityLogPublic
-		);
-
-		store.dispatch(
-			"user/preferences/changeAnonymousSongRequests",
-			preferences.anonymousSongRequests
-		);
-
-		store.dispatch(
-			"user/preferences/changeActivityWatch",
-			preferences.activityWatch
-		);
+		if (preferences.autoSkipDisliked !== undefined)
+			store.dispatch(
+				"user/preferences/changeAutoSkipDisliked",
+				preferences.autoSkipDisliked
+			);
+
+		if (preferences.nightmode !== undefined) {
+			localStorage.setItem("nightmode", preferences.nightmode);
+			store.dispatch(
+				"user/preferences/changeNightmode",
+				preferences.nightmode
+			);
+		}
+
+		if (preferences.activityLogPublic !== undefined)
+			store.dispatch(
+				"user/preferences/changeActivityLogPublic",
+				preferences.activityLogPublic
+			);
+
+		if (preferences.anonymousSongRequests !== undefined)
+			store.dispatch(
+				"user/preferences/changeAnonymousSongRequests",
+				preferences.anonymousSongRequests
+			);
+
+		if (preferences.activityWatch !== undefined)
+			store.dispatch(
+				"user/preferences/changeActivityWatch",
+				preferences.activityWatch
+			);
 	});
 
 	router.beforeEach((to, from, next) => {

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

@@ -89,22 +89,24 @@
 							/>
 						</td>
 						<td class="optionsColumn">
-							<button
-								class="button is-primary"
-								@click="edit(song, index)"
-								content="Edit Song"
-								v-tippy
-							>
-								<i class="material-icons">edit</i>
-							</button>
-							<button
-								class="button is-success"
-								@click="unhide(song._id)"
-								content="Unhide Song"
-								v-tippy
-							>
-								<i class="material-icons">visibility</i>
-							</button>
+							<div>
+								<button
+									class="button is-primary"
+									@click="edit(song, index)"
+									content="Edit Song"
+									v-tippy
+								>
+									<i class="material-icons">edit</i>
+								</button>
+								<button
+									class="button is-success"
+									@click="unhide(song._id)"
+									content="Unhide Song"
+									v-tippy
+								>
+									<i class="material-icons">visibility</i>
+								</button>
+							</div>
 						</td>
 					</tr>
 				</tbody>
@@ -348,8 +350,15 @@ export default {
 
 .optionsColumn {
 	width: 140px;
-	button {
-		width: 35px;
+
+	div {
+		button {
+			width: 35px;
+
+			&:not(:last-child) {
+				margin-right: 5px;
+			}
+		}
 	}
 }
 

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

@@ -89,31 +89,38 @@
 							/>
 						</td>
 						<td class="optionsColumn">
-							<button
-								class="button is-primary"
-								@click="edit(song, index)"
-								content="Edit Song"
-								v-tippy
-							>
-								<i class="material-icons">edit</i>
-							</button>
-							<button
-								class="button is-success"
-								@click="verify(song._id)"
-								content="Verify Song"
-								v-tippy
-							>
-								<i class="material-icons">check_circle</i>
-							</button>
-							<confirm placement="left" @confirm="hide(song._id)">
+							<div>
+								<button
+									class="button is-primary"
+									@click="edit(song, index)"
+									content="Edit Song"
+									v-tippy
+								>
+									<i class="material-icons">edit</i>
+								</button>
 								<button
-									class="button is-danger"
-									content="Hide Song"
+									class="button is-success"
+									@click="verify(song._id)"
+									content="Verify Song"
 									v-tippy
 								>
-									<i class="material-icons">visibility_off</i>
+									<i class="material-icons">check_circle</i>
 								</button>
-							</confirm>
+								<confirm
+									placement="left"
+									@confirm="hide(song._id)"
+								>
+									<button
+										class="button is-danger"
+										content="Hide Song"
+										v-tippy
+									>
+										<i class="material-icons"
+											>visibility_off</i
+										>
+									</button>
+								</confirm>
+							</div>
 						</td>
 					</tr>
 				</tbody>
@@ -369,8 +376,15 @@ export default {
 
 .optionsColumn {
 	width: 140px;
-	button {
-		width: 35px;
+
+	div {
+		button {
+			width: 35px;
+
+			&:not(:last-child) {
+				margin-right: 5px;
+			}
+		}
 	}
 }
 

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

@@ -34,7 +34,7 @@
 				</tbody>
 			</table>
 
-			<h2>Users</h2>
+			<h1 id="page-title">Users</h1>
 
 			<table class="table is-striped">
 				<thead>

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

@@ -130,26 +130,28 @@
 							/>
 						</td>
 						<td class="optionsColumn">
-							<button
-								class="button is-primary"
-								@click="edit(song)"
-								content="Edit Song"
-								v-tippy
-							>
-								<i class="material-icons">edit</i>
-							</button>
-							<confirm
-								placement="left"
-								@confirm="unverify(song._id)"
-							>
+							<div>
 								<button
-									class="button is-danger"
-									content="Unverify Song"
+									class="button is-primary"
+									@click="edit(song)"
+									content="Edit Song"
 									v-tippy
 								>
-									<i class="material-icons">cancel</i>
+									<i class="material-icons">edit</i>
 								</button>
-							</confirm>
+								<confirm
+									placement="left"
+									@confirm="unverify(song._id)"
+								>
+									<button
+										class="button is-danger"
+										content="Unverify Song"
+										v-tippy
+									>
+										<i class="material-icons">cancel</i>
+									</button>
+								</confirm>
+							</div>
 						</td>
 					</tr>
 				</tbody>
@@ -551,8 +553,15 @@ body {
 
 .optionsColumn {
 	width: 100px;
-	button {
-		width: 35px;
+
+	div {
+		button {
+			width: 35px;
+
+			&:not(:last-child) {
+				margin-right: 5px;
+			}
+		}
 	}
 }
 

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

@@ -135,11 +135,21 @@ export default {
 		this.socket.on("keep.event:user.preferences.updated", res => {
 			const { preferences } = res.data;
 
-			this.localNightmode = preferences.nightmode;
-			this.localAutoSkipDisliked = preferences.autoSkipDisliked;
-			this.localActivityLogPublic = preferences.activityLogPublic;
-			this.localAnonymousSongRequests = preferences.anonymousSongRequests;
-			this.localActivityWatch = preferences.activityWatch;
+			if (preferences.nightmode !== undefined)
+				this.localNightmode = preferences.nightmode;
+
+			if (preferences.autoSkipDisliked !== undefined)
+				this.localAutoSkipDisliked = preferences.autoSkipDisliked;
+
+			if (preferences.activityLogPublic !== undefined)
+				this.localActivityLogPublic = preferences.activityLogPublic;
+
+			if (preferences.anonymousSongRequests !== undefined)
+				this.localAnonymousSongRequests =
+					preferences.anonymousSongRequests;
+
+			if (preferences.activityWatch !== undefined)
+				this.localActivityWatch = preferences.activityWatch;
 		});
 	},
 	methods: {

frontend/src/pages/Settings/index.vue

@@ -164,28 +164,16 @@ export default {
 		border-radius: 3px;
 	}
 
-	#page-title {
-		margin-top: 0;
-		font-size: 35px;
-		text-align: center;
-	}
-
 	#sidebar-with-content {
 		display: flex;
 		flex-direction: column;
 	}
 
 	@media only screen and (min-width: 700px) {
-		#page-title {
-			margin: 0;
-			font-size: 40px;
-		}
-
 		#sidebar-with-content {
 			width: 962px;
 			max-width: 100%;
 			margin: 0 auto;
-			margin-top: 30px;
 			flex-direction: row;
 
 			.nav-links {