refactor(AdvancedTable): Renamed edit column to options and added more row actions

frontend/src/components/AdvancedTable.vue

@@ -1885,7 +1885,7 @@ export default {
 
 						/deep/ .row-options {
 							display: flex;
-							justify-content: space-between;
+							justify-content: space-evenly;
 
 							.icon-with-button {
 								height: 30px;

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

@@ -116,7 +116,7 @@ export default {
 			columns: [
 				{
 					name: "options",
-					displayName: "Edit",
+					displayName: "Options",
 					properties: ["_id"],
 					sortable: false,
 					hidable: false,

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

@@ -130,13 +130,13 @@ export default {
 			columns: [
 				{
 					name: "options",
-					displayName: "Edit",
+					displayName: "Options",
 					properties: ["_id"],
 					sortable: false,
 					hidable: false,
 					resizable: false,
-					minWidth: 51,
-					defaultWidth: 51
+					minWidth: 76,
+					defaultWidth: 76
 				},
 				{
 					name: "displayName",

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

@@ -162,13 +162,13 @@ export default {
 			columns: [
 				{
 					name: "options",
-					displayName: "Edit",
+					displayName: "Options",
 					properties: ["_id"],
 					sortable: false,
 					hidable: false,
 					resizable: false,
-					minWidth: 51,
-					defaultWidth: 51
+					minWidth: 76,
+					defaultWidth: 76
 				},
 				{
 					name: "status",

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

@@ -139,7 +139,7 @@ export default {
 			columns: [
 				{
 					name: "options",
-					displayName: "Edit",
+					displayName: "Options",
 					properties: ["_id"],
 					sortable: false,
 					hidable: false,

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

@@ -48,6 +48,53 @@
 						>
 							edit
 						</button>
+						<quick-confirm
+							v-if="slotProps.item.status === 'verified'"
+							@confirm="unverifyOne(slotProps.item._id)"
+						>
+							<button
+								class="
+									button
+									is-danger
+									icon-with-button
+									material-icons
+								"
+								:disabled="slotProps.item.removed"
+								content="Unverify Song"
+								v-tippy
+							>
+								cancel
+							</button>
+						</quick-confirm>
+						<button
+							v-else
+							class="
+								button
+								is-success
+								icon-with-button
+								material-icons
+							"
+							@click="verifyOne(slotProps.item._id)"
+							:disabled="slotProps.item.removed"
+							content="Verify Song"
+							v-tippy
+						>
+							check_circle
+						</button>
+						<quick-confirm @confirm="deleteOne(slotProps.item._id)">
+							<button
+								class="
+									button
+									is-danger
+									icon-with-button
+									material-icons
+								"
+								content="Delete Song"
+								v-tippy
+							>
+								delete_forever
+							</button>
+						</quick-confirm>
 					</div>
 				</template>
 				<template #column-thumbnailImage="slotProps">
@@ -340,13 +387,13 @@ export default {
 			columns: [
 				{
 					name: "options",
-					displayName: "Edit",
-					properties: [],
+					displayName: "Options",
+					properties: ["_id", "status", "removed"],
 					sortable: false,
 					hidable: false,
 					resizable: false,
-					minWidth: 51,
-					defaultWidth: 51
+					minWidth: 129,
+					defaultWidth: 129
 				},
 				{
 					name: "thumbnailImage",
@@ -715,6 +762,11 @@ export default {
 				new Toast("Bulk editing not yet implemented.");
 			}
 		},
+		verifyOne(songId) {
+			this.socket.dispatch("songs.verify", songId, res => {
+				new Toast(res.message);
+			});
+		},
 		verifyMany(selectedRows) {
 			this.socket.dispatch(
 				"songs.verifyMany",
@@ -724,6 +776,11 @@ export default {
 				}
 			);
 		},
+		unverifyOne(songId) {
+			this.socket.dispatch("songs.unverify", songId, res => {
+				new Toast(res.message);
+			});
+		},
 		unverifyMany(selectedRows) {
 			this.socket.dispatch(
 				"songs.unverifyMany",
@@ -742,6 +799,11 @@ export default {
 		setGenres() {
 			new Toast("Bulk setting genres not yet implemented.");
 		},
+		deleteOne(songId) {
+			this.socket.dispatch("songs.remove", songId, res => {
+				new Toast(res.message);
+			});
+		},
 		deleteMany(selectedRows) {
 			this.socket.dispatch(
 				"songs.removeMany",

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

@@ -35,6 +35,23 @@
 						>
 							settings
 						</button>
+						<quick-confirm
+							@confirm="remove(slotProps.item._id)"
+							:disabled="slotProps.item.removed"
+						>
+							<button
+								class="
+									button
+									is-danger
+									icon-with-button
+									material-icons
+								"
+								content="Remove Station"
+								v-tippy
+							>
+								delete_forever
+							</button>
+						</quick-confirm>
 					</div>
 				</template>
 				<template #column-_id="slotProps">
@@ -116,7 +133,10 @@
 import { mapState, mapActions, mapGetters } from "vuex";
 import { defineAsyncComponent } from "vue";
 
+import Toast from "toasters";
+
 import AdvancedTable from "@/components/AdvancedTable.vue";
+import QuickConfirm from "@/components/QuickConfirm.vue";
 import UserIdToUsername from "@/components/UserIdToUsername.vue";
 import RunJobDropdown from "@/components/RunJobDropdown.vue";
 
@@ -144,6 +164,7 @@ export default {
 			import("@/components/modals/CreateStation.vue")
 		),
 		AdvancedTable,
+		QuickConfirm,
 		UserIdToUsername,
 		RunJobDropdown
 	},
@@ -162,13 +183,13 @@ export default {
 			columns: [
 				{
 					name: "options",
-					displayName: "Edit",
+					displayName: "Options",
 					properties: ["_id"],
 					sortable: false,
 					hidable: false,
 					resizable: false,
-					minWidth: 51,
-					defaultWidth: 51
+					minWidth: 85,
+					defaultWidth: 85
 				},
 				{
 					name: "_id",
@@ -329,20 +350,18 @@ export default {
 			socket: "websockets/getSocket"
 		})
 	},
-	mounted() {
-		// TODO
-		// this.socket.on("event:admin.station.created", res =>
-		// 	this.stationAdded(res.data.station)
-		// );
-		// this.socket.on("event:admin.station.deleted", res =>
-		// 	this.stationRemoved(res.data.stationId)
-		// );
-	},
 	methods: {
 		edit(stationId) {
 			this.editingStationId = stationId;
 			this.openModal("manageStation");
 		},
+		remove(stationId) {
+			this.socket.dispatch(
+				"stations.remove",
+				stationId,
+				res => new Toast(res.message)
+			);
+		},
 		...mapActions("modalVisibility", ["openModal"])
 	}
 };

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

@@ -193,13 +193,13 @@ export default {
 				columns: [
 					{
 						name: "options",
-						displayName: "Edit",
+						displayName: "Options",
 						properties: ["_id"],
 						sortable: false,
 						hidable: false,
 						resizable: false,
-						minWidth: 51,
-						defaultWidth: 51
+						minWidth: 76,
+						defaultWidth: 76
 					},
 					{
 						name: "type",
@@ -264,13 +264,13 @@ export default {
 				columns: [
 					{
 						name: "options",
-						displayName: "Edit",
+						displayName: "Options",
 						properties: ["_id"],
 						sortable: false,
 						hidable: false,
 						resizable: false,
-						minWidth: 51,
-						defaultWidth: 51
+						minWidth: 76,
+						defaultWidth: 76
 					},
 					{
 						name: "profilePicture",