feat(AdvancedTable): Select checkbox resize and updated logic

backend/logic/actions/songs.js

@@ -862,12 +862,10 @@ export default {
 							return next(null, song, user.likedSongsPlaylist);
 						})
 						.catch(err => next(err));
-
-					
 				},
 
-				(song, likedSongsPlaylist, next) => {
-					return this.module
+				(song, likedSongsPlaylist, next) =>
+					this.module
 						.runJob(
 							"RUN_ACTION2",
 							{
@@ -887,8 +885,7 @@ export default {
 
 							return next(null, song);
 						})
-						.catch(err => next(err));
-				},
+						.catch(err => next(err)),
 
 				(song, next) => {
 					SongsModule.runJob("RECALCULATE_SONG_RATINGS", { songId: song._id, youtubeId })
@@ -983,12 +980,10 @@ export default {
 							return next(null, song, user.dislikedSongsPlaylist);
 						})
 						.catch(err => next(err));
-
-					
 				},
 
-				(song, dislikedSongsPlaylist, next) => {
-					return this.module
+				(song, dislikedSongsPlaylist, next) =>
+					this.module
 						.runJob(
 							"RUN_ACTION2",
 							{
@@ -1008,8 +1003,7 @@ export default {
 
 							return next(null, song);
 						})
-						.catch(err => next(err));
-				},
+						.catch(err => next(err)),
 
 				(song, next) => {
 					SongsModule.runJob("RECALCULATE_SONG_RATINGS", { songId: song._id, youtubeId })
@@ -1259,7 +1253,7 @@ export default {
 					);
 					return cb({ status: "error", message: err });
 				}
-				
+
 				const { likes, dislikes } = ratings;
 
 				SongsModule.runJob("UPDATE_SONG", { songId: song._id });

frontend/src/App.vue

@@ -377,6 +377,16 @@ export default {
 		background-color: var(--light-grey) !important;
 		color: var(--dark-grey-2) !important;
 	}
+
+	.checkbox input[type="checkbox"] {
+		background-color: var(--dark-grey);
+		border-color: transparent;
+
+		&:checked:before,
+		&:checked:after {
+			background-color: var(--white);
+		}
+	}
 }
 
 .christmas-mode {
@@ -1222,9 +1232,12 @@ img {
 }
 
 .checkbox {
+	height: 25px;
+	width: 25px;
+
 	input[type="checkbox"] {
-		height: 36px;
-		width: 36px;
+		height: 25px;
+		width: 25px;
 		background-color: var(--white);
 		border: 1px solid var(--light-grey-2);
 		appearance: none;
@@ -1236,22 +1249,22 @@ img {
 			&:before {
 				content: "";
 				position: absolute;
-				top: 5px;
-				right: 10px;
+				top: 4px;
+				right: 7px;
 				background-color: var(--primary-color);
-				width: 5px;
-				height: 25px;
+				width: 4px;
+				height: 16px;
 				transform: rotate(45deg);
 			}
 
 			&:after {
 				content: "";
 				position: absolute;
-				top: 16px;
-				left: 4px;
+				top: 12px;
+				left: 2px;
 				background-color: var(--primary-color);
-				width: 11px;
-				height: 6px;
+				width: 10px;
+				height: 4px;
 				transform: rotate(45deg);
 			}
 		}

frontend/src/components/AdvancedTable.vue

@@ -183,7 +183,7 @@
 								:key="`filter-${index}`"
 							>
 								{{ filter.filter.displayName }}
-								{{ filter.filterType }} {{ filter.data }}
+								{{ filter.filterType }} "{{ filter.data }}"
 								{{
 									appliedFilters.length === index + 1
 										? ""
@@ -306,7 +306,20 @@
 										shownColumns.indexOf(column.name) !== -1
 									"
 								>
-									<div>
+									<p
+										v-if="column.name === 'select'"
+										class="checkbox"
+									>
+										<input
+											type="checkbox"
+											:checked="
+												data.length ===
+												selectedRows.length
+											"
+											@click="toggleAllRows()"
+										/>
+									</p>
+									<div v-else>
 										<span>
 											{{ column.displayName }}
 										</span>
@@ -390,7 +403,6 @@
 								selected: item.selected,
 								highlighted: item.highlighted
 							}"
-							@click="clickItem(itemIndex, $event)"
 						>
 							<td
 								v-for="column in sortedFilteredColumns"
@@ -414,6 +426,9 @@
 									<input
 										type="checkbox"
 										:checked="item.selected"
+										@click="
+											toggleSelectedRow(itemIndex, $event)
+										"
 									/>
 								</p>
 								<div
@@ -669,9 +684,9 @@ export default {
 				draggable: false,
 				resizable: false,
 				pinable: false,
-				minWidth: 56,
-				width: 56,
-				maxWidth: 56
+				minWidth: 47,
+				width: 47,
+				maxWidth: 47
 			},
 			...this.columns
 		];
@@ -764,8 +779,8 @@ export default {
 				this.pinnedColumns.push(column.name);
 			}
 		},
-		clickItem(itemIndex, event) {
-			const { shiftKey, ctrlKey } = event;
+		toggleSelectedRow(itemIndex, event) {
+			const { shiftKey } = event;
 			// Shift was pressed, so attempt to select all items between the clicked item and last clicked item
 			if (shiftKey) {
 				// If there is a last clicked item
@@ -791,19 +806,9 @@ export default {
 						}
 					}
 				}
-			}
-			// Ctrl was pressed, so toggle selected on the clicked item
-			else if (ctrlKey) {
+			} else {
 				this.data[itemIndex].selected = !this.data[itemIndex].selected;
 			}
-			// Neither ctrl nor shift were pressed, so unselect all items and set the clicked item to selected
-			else {
-				this.data = this.data.map(item => ({
-					...item,
-					selected: false
-				}));
-				this.data[itemIndex].selected = true;
-			}
 
 			// Set the last clicked item to no longer be highlighted, if it exists
 			if (this.lastSelectedItemIndex >= 0)
@@ -811,6 +816,13 @@ export default {
 			// Set the clicked item to be highlighted
 			this.data[itemIndex].highlighted = true;
 		},
+		toggleAllRows() {
+			if (this.data.length > this.selectedRows.length) {
+				this.data = this.data.map(row => ({ ...row, selected: true }));
+			} else {
+				this.data = this.data.map(row => ({ ...row, selected: false }));
+			}
+		},
 		addFilterItem() {
 			this.editingFilters.push({
 				data: "",

frontend/src/components/modals/EditPlaylist/Tabs/Settings.vue

@@ -5,7 +5,7 @@
 				isEditable() &&
 				!(
 					playlist.type === 'user-liked' ||
-					playlist.type === 'user-liked'
+					playlist.type === 'user-disliked'
 				)
 			"
 		>

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

@@ -103,7 +103,7 @@
 						<i
 							class="material-icons genres-songs-icon"
 							@click.prevent="setGenres(slotProps.item)"
-							content="Set Genres to Selected Songs"
+							content="Set Genres for Selected Songs"
 							v-tippy
 						>
 							theater_comedy