MusareNode/frontend/components/Admin/Songs.vue

<template>
	<div>
		<div class="container">
			<input
				v-model="searchQuery"
				type="text"
				class="input"
				placeholder="Search for Songs"
			/>
			<br />
			<br />
			<table class="table is-striped">
				<thead>
					<tr>
						<td>Thumbnail</td>
						<td>Title</td>
						<td>YouTube ID</td>
						<td>Artists</td>
						<td>Genres</td>
						<td>Requested By</td>
						<td>Options</td>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(song, index) in filteredSongs" :key="index">
						<td>
							<img
								class="song-thumbnail"
								:src="song.thumbnail"
								onerror="this.src='/assets/notes-transparent.png'"
							/>
						</td>
						<td>
							<strong>{{ song.title }}</strong>
						</td>
						<td>{{ song.songId }}</td>
						<td>{{ song.artists.join(", ") }}</td>
						<td>{{ song.genres.join(", ") }}</td>
						<td>
							<user-id-to-username
								:userId="song.requestedBy"
								:link="true"
							/>
						</td>
						<td>
							<button
								class="button is-primary"
								@click="edit(song, index)"
							>
								Edit
							</button>
							<button
								class="button is-danger"
								@click="remove(song._id, index)"
							>
								Remove
							</button>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		<edit-song v-if="modals.editSong" />
	</div>
</template>

<script>
import { mapState, mapActions } from "vuex";

import { Toast } from "vue-roaster";

import EditSong from "../Modals/EditSong.vue";
import UserIdToUsername from "../UserIdToUsername.vue";

import io from "../../io";

export default {
	components: { EditSong, UserIdToUsername },
	data() {
		return {
			position: 1,
			maxPosition: 1,
			songs: [],
			searchQuery: "",
			editing: {
				index: 0,
				song: {}
			}
		};
	},
	computed: {
		filteredSongs: function() {
			return this.songs;
			// return this.songs.filter(song => song.indexOf(song.searchQuery) !== -1);
		},
		...mapState("modals", {
			modals: state => state.modals.admin
		})
	},
	watch: {
		"modals.editSong": function(value) {
			if (!value) this.stopVideo();
		}
	},
	methods: {
		edit: function(song, index) {
			this.editSong({ song, index, type: "songs" });
			this.toggleModal({ sector: "admin", modal: "editSong" });
		},
		remove: function(id) {
			this.socket.emit("songs.remove", id, res => {
				if (res.status == "success")
					Toast.methods.addToast(res.message, 4000);
				else Toast.methods.addToast(res.message, 8000);
			});
		},
		getSet: function() {
			let _this = this;
			_this.socket.emit("songs.getSet", _this.position, data => {
				data.forEach(song => {
					_this.songs.push(song);
				});
				_this.position = _this.position + 1;
				if (_this.maxPosition > _this.position - 1) _this.getSet();
			});
		},
		init: function() {
			let _this = this;
			_this.songs = [];
			_this.socket.emit("songs.length", length => {
				_this.maxPosition = Math.ceil(length / 15);
				_this.getSet();
			});
			_this.socket.emit("apis.joinAdminRoom", "songs", () => {});
		},
		...mapActions("admin/songs", ["stopVideo", "editSong"]),
		...mapActions("modals", ["toggleModal"])
	},
	mounted: function() {
		let _this = this;
		io.getSocket(socket => {
			_this.socket = socket;
			if (_this.socket.connected) {
				_this.init();
				_this.socket.on("event:admin.song.added", song => {
					_this.songs.push(song);
				});
				_this.socket.on("event:admin.song.removed", songId => {
					_this.songs = _this.songs.filter(function(song) {
						return song._id !== songId;
					});
				});
				_this.socket.on("event:admin.song.updated", updatedSong => {
					for (let i = 0; i < _this.songs.length; i++) {
						let song = _this.songs[i];
						if (song._id === updatedSong._id) {
							_this.songs.$set(i, updatedSong);
						}
					}
				});
			}
			io.onConnect(() => {
				_this.init();
			});
		});
	}
};
</script>

<style lang="scss" scoped>
body {
	font-family: "Roboto", sans-serif;
}

.song-thumbnail {
	display: block;
	max-width: 50px;
	margin: 0 auto;
}

td {
	vertical-align: middle;
}

.is-primary:focus {
	background-color: #029ce3 !important;
}
</style>