MusareFork/frontend/src/pages/Admin/index.vue

<template>
	<div class="app admin-area">
		<main-header />
		<div class="tabs is-centered">
			<ul>
				<li
					:class="{ 'is-active': currentTab == 'songs' }"
					ref="songs-tab"
					@click="showTab('songs')"
				>
					<router-link class="tab songs" to="/admin/songs">
						<i class="material-icons">music_note</i>
						<span>&nbsp;Songs</span>
					</router-link>
				</li>
				<li
					:class="{ 'is-active': currentTab == 'stations' }"
					ref="stations-tab"
					@click="showTab('stations')"
				>
					<router-link class="tab stations" to="/admin/stations">
						<i class="material-icons">radio</i>
						<span>&nbsp;Stations</span>
					</router-link>
				</li>
				<li
					:class="{ 'is-active': currentTab == 'playlists' }"
					ref="playlists-tab"
					@click="showTab('playlists')"
				>
					<router-link class="tab playlists" to="/admin/playlists">
						<i class="material-icons">library_music</i>
						<span>&nbsp;Playlists</span>
					</router-link>
				</li>
				<li
					:class="{ 'is-active': currentTab == 'reports' }"
					ref="reports-tab"
					@click="showTab('reports')"
				>
					<router-link class="tab reports" to="/admin/reports">
						<i class="material-icons">flag</i>
						<span>&nbsp;Reports</span>
					</router-link>
				</li>
				<li
					:class="{ 'is-active': currentTab == 'news' }"
					ref="news-tab"
					@click="showTab('news')"
				>
					<router-link class="tab news" to="/admin/news">
						<i class="material-icons">chrome_reader_mode</i>
						<span>&nbsp;News</span>
					</router-link>
				</li>
				<li
					:class="{ 'is-active': currentTab == 'users' }"
					ref="users-tab"
					@click="showTab('users')"
				>
					<router-link class="tab users" to="/admin/users">
						<i class="material-icons">people</i>
						<span>&nbsp;Users</span>
					</router-link>
				</li>
				<li
					:class="{ 'is-active': currentTab == 'statistics' }"
					ref="statistics-tab"
					@click="showTab('statistics')"
				>
					<router-link class="tab statistics" to="/admin/statistics">
						<i class="material-icons">show_chart</i>
						<span>&nbsp;Statistics</span>
					</router-link>
				</li>
				<li
					:class="{ 'is-active': currentTab == 'punishments' }"
					ref="punishments-tab"
					@click="showTab('punishments')"
				>
					<router-link
						class="tab punishments"
						to="/admin/punishments"
					>
						<i class="material-icons">gavel</i>
						<span>&nbsp;Punishments</span>
					</router-link>
				</li>
			</ul>
		</div>

		<div class="admin-container">
			<songs v-if="currentTab == 'songs'" />
			<stations v-if="currentTab == 'stations'" />
			<playlists v-if="currentTab == 'playlists'" />
			<reports v-if="currentTab == 'reports'" />
			<news v-if="currentTab == 'news'" />
			<users v-if="currentTab == 'users'" />
			<statistics v-if="currentTab == 'statistics'" />
			<punishments v-if="currentTab == 'punishments'" />
		</div>

		<floating-box
			id="keyboardShortcutsHelper"
			ref="keyboardShortcutsHelper"
		>
			<template #body>
				<div>
					<div>
						<span class="biggest"
							><b>Keyboard shortcuts helper</b></span
						>
						<span
							><b>Ctrl + /</b> - Toggles this keyboard shortcuts
							helper</span
						>
						<span
							><b>Ctrl + Shift + /</b> - Resets the position of
							this keyboard shortcuts helper</span
						>
						<hr />
					</div>
					<div>
						<span class="biggest"><b>Table</b></span>
						<span class="bigger"><b>Navigation</b></span>
						<span
							><b>Up / Down arrow keys</b> - Move between
							rows</span
						>
						<hr />
					</div>
					<div>
						<span class="bigger"><b>Page navigation</b></span>
						<span
							><b>Ctrl + Left/Right arrow keys</b> - Previous/next
							page</span
						>
						<span
							><b>Ctrl + Shift + Left/Right arrow keys</b> -
							First/last page</span
						>
						<hr />
					</div>
					<div>
						<span class="bigger"><b>Reset localStorage</b></span>
						<span><b>Ctrl + F5</b> - Resets localStorage</span>
						<hr />
					</div>
					<div>
						<span class="bigger"><b>Selecting</b></span>
						<span><b>Space</b> - Selects/unselects a row</span>
						<span><b>Ctrl + A</b> - Selects all rows</span>
						<span
							><b>Shift + Up/Down arrow keys</b> - Selects all
							rows in between</span
						>
						<span
							><b>Ctrl + Up/Down arrow keys</b> - Unselects all
							rows in between</span
						>
						<hr />
					</div>
					<div>
						<span class="bigger"><b>Popup actions</b></span>
						<span><b>Ctrl + 1-9</b> - Execute action 1-9</span>
						<span><b>Ctrl + 0</b> - Select action 1</span>
						<hr />
					</div>
				</div>
			</template>
		</floating-box>

		<main-footer />
	</div>
</template>

<script>
import { mapGetters } from "vuex";
import { defineAsyncComponent } from "vue";

import keyboardShortcuts from "@/keyboardShortcuts";

import MainHeader from "@/components/layout/MainHeader.vue";
import MainFooter from "@/components/layout/MainFooter.vue";
import FloatingBox from "@/components/FloatingBox.vue";

export default {
	components: {
		MainHeader,
		MainFooter,
		FloatingBox,
		Songs: defineAsyncComponent(() => import("./tabs/Songs.vue")),
		Stations: defineAsyncComponent(() => import("./tabs/Stations.vue")),
		Playlists: defineAsyncComponent(() => import("./tabs/Playlists.vue")),
		Reports: defineAsyncComponent(() => import("./tabs/Reports.vue")),
		News: defineAsyncComponent(() => import("./tabs/News.vue")),
		Users: defineAsyncComponent(() => import("./tabs/Users.vue")),
		Statistics: defineAsyncComponent(() => import("./tabs/Statistics.vue")),
		Punishments: defineAsyncComponent(() =>
			import("./tabs/Punishments.vue")
		)
	},
	data() {
		return {
			currentTab: ""
		};
	},
	computed: mapGetters({
		socket: "websockets/getSocket"
	}),
	watch: {
		$route(route) {
			this.changeTab(route.path);
		}
	},
	mounted() {
		this.changeTab(this.$route.path);

		keyboardShortcuts.registerShortcut(
			"admin.toggleKeyboardShortcutsHelper",
			{
				keyCode: 191, // '/' key
				ctrl: true,
				preventDefault: true,
				handler: () => {
					this.toggleKeyboardShortcutsHelper();
				}
			}
		);

		keyboardShortcuts.registerShortcut(
			"admin.resetKeyboardShortcutsHelper",
			{
				keyCode: 191, // '/' key
				ctrl: true,
				shift: true,
				preventDefault: true,
				handler: () => {
					this.resetKeyboardShortcutsHelper();
				}
			}
		);
	},
	beforeUnmount() {
		this.socket.dispatch("apis.leaveRooms");

		const shortcutNames = [
			"admin.toggleKeyboardShortcutsHelper",
			"admin.resetKeyboardShortcutsHelper"
		];

		shortcutNames.forEach(shortcutName => {
			keyboardShortcuts.unregisterShortcut(shortcutName);
		});
	},
	methods: {
		changeTab(path) {
			switch (path) {
				case "/admin/songs":
					this.showTab("songs");
					break;
				case "/admin/stations":
					this.showTab("stations");
					break;
				case "/admin/playlists":
					this.showTab("playlists");
					break;
				case "/admin/reports":
					this.showTab("reports");
					break;
				case "/admin/news":
					this.showTab("news");
					break;
				case "/admin/users":
					this.showTab("users");
					break;
				case "/admin/statistics":
					this.showTab("statistics");
					break;
				case "/admin/punishments":
					this.showTab("punishments");
					break;
				default:
					if (path.startsWith("/admin")) {
						if (localStorage.getItem("lastAdminPage")) {
							this.$router.push(
								`/admin/${localStorage.getItem(
									"lastAdminPage"
								)}`
							);
						} else {
							this.$router.push(`/admin/songs`);
						}
					}
			}
		},
		showTab(tab) {
			if (this.$refs[`${tab}-tab`])
				this.$refs[`${tab}-tab`].scrollIntoView({
					inline: "center",
					block: "nearest"
				});
			this.currentTab = tab;
			localStorage.setItem("lastAdminPage", tab);
		},
		toggleKeyboardShortcutsHelper() {
			this.$refs.keyboardShortcutsHelper.toggleBox();
		},
		resetKeyboardShortcutsHelper() {
			this.$refs.keyboardShortcutsHelper.resetBox();
		}
	}
};
</script>

<style lang="less">
.christmas-mode .admin-area .christmas-lights {
	top: 102px !important;
}

.main-container .admin-tab,
.main-container .container {
	.button-row {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		margin-bottom: 5px;

		& > .button,
		& > span {
			margin: 5px 0;
			&:not(:first-child) {
				margin-left: 5px;
			}
		}
	}
}

.main-container .admin-container .admin-tab {
	max-width: 1900px;
	margin: 0 auto;
	padding: 0 10px;
}
</style>

<style lang="less" scoped>
.night-mode {
	.tabs {
		background-color: var(--dark-grey-2);
		border: 0;

		ul {
			border-bottom: 0;
		}
	}
}

/deep/ .container {
	position: relative;
}

/deep/ .box {
	box-shadow: @box-shadow;
	display: block;

	&:not(:last-child) {
		margin-bottom: 20px;
	}
}

.main-container {
	height: auto;

	.admin-container {
		flex: 1 0 auto;
		margin-bottom: 20px;
	}
}

.tabs {
	padding-top: 10px;
	margin-top: -10px;
	background-color: var(--white);
	display: flex;
	line-height: 24px;
	overflow-y: hidden;
	overflow-x: auto;
	margin-bottom: 20px;
	user-select: none;

	ul {
		display: flex;
		align-items: center;
		/* -webkit-box-flex: 1; */
		flex-grow: 1;
		flex-shrink: 0;
		justify-content: center;
		border-bottom: 1px solid var(--light-grey-2);
	}

	.songs {
		color: var(--primary-color);
		border-color: var(--primary-color);
	}
	.stations {
		color: var(--purple);
		border-color: var(--purple);
	}
	.playlists {
		color: var(--light-purple);
		border-color: var(--light-purple);
	}
	.reports {
		color: var(--yellow);
		border-color: var(--yellow);
	}
	.news {
		color: var(--light-pink);
		border-color: var(--light-pink);
	}
	.users {
		color: var(--dark-pink);
		border-color: var(--dark-pink);
	}
	.statistics {
		color: var(--orange);
		border-color: var(--orange);
	}
	.punishments {
		color: var(--dark-orange);
		border-color: var(--dark-orange);
	}
	.tab {
		transition: all 0.2s ease-in-out;
		font-weight: 500;
		border-bottom: solid 0px;
		padding: 6px 12px;
		display: flex;
		margin-bottom: -1px;
	}
	.tab:hover {
		border-width: 3px;
		transition: all 0.2s ease-in-out;
		font-weight: 600;
	}
	.is-active .tab {
		font-weight: 600;
		border-width: 3px;
	}
}

#keyboardShortcutsHelper {
	.box-body {
		.biggest {
			font-size: 18px;
		}

		.bigger {
			font-size: 16px;
		}

		span {
			display: block;
		}
	}
}

@media screen and (min-width: 980px) {
	/deep/ .container {
		margin: 0 auto;
		max-width: 960px;
	}
}

@media screen and (min-width: 1180px) {
	/deep/ .container {
		max-width: 1200px;
	}
}
</style>