fix: errors tab displaying

src/components/TheDownloadTab.vue

@@ -50,10 +50,12 @@
 	height: 100vh;
 }
 </style>
+
 <script>
 import $ from 'jquery'
 import { socket } from '@/utils/socket'
 import { toast } from '@/utils/toasts'
+import { mapActions } from 'vuex'
 
 const tabMinWidth = 250
 const tabMaxWidth = 500
@@ -99,6 +101,7 @@ export default {
 		})
 	},
 	methods: {
+		...mapActions(['setErrors']),
 		setTabWidth(newWidth) {
 			if (undefined === newWidth) {
 				this.$refs.container.style.width = ''
@@ -411,8 +414,10 @@ export default {
 				.addClass('determinate')
 				.css('width', '100%')
 		},
-		showErrorsTab(clickEvent) {
+		async showErrorsTab(clickEvent) {
-			this.$root.$emit('showTabErrors', clickEvent.data.item, clickEvent.target)
+			await this.setErrors(clickEvent.data.item)
+
+			this.$router.push({ name: 'Errors' })
 		}
 	}
 }

src/components/TheErrorsTab.vue

@@ -1,6 +1,7 @@
 <template>
 	<div id="errors_tab" class="main_tabcontent">
 		<h1>{{ $t('errors.title', { name: title }) }}</h1>
+
 		<table class="table table--tracklist">
 			<tr>
 				<th>ID</th>
@@ -19,37 +20,17 @@
 </template>
 
 <script>
-import { changeTab } from '@js/tabs.js'
+import { mapGetters } from 'vuex'
-
-import EventBus from '@/utils/EventBus'
 
 export default {
-	name: 'the-errors-tab',
+	computed: {
-	data: () => ({
+		...mapGetters(['getErrors']),
-		title: '',
+		title() {
-		errors: []
+			return `${this.getErrors.artist} - ${this.getErrors.title}`
-	}),
-	methods: {
-		reset() {
-			this.title = ''
-			this.errors = []
 		},
-		showErrors(data, eventTarget) {
+		errors() {
-			this.title = data.artist + ' - ' + data.title
+			return this.getErrors.errors
-			this.errors = data.errors
-
-			changeTab(eventTarget, 'main', 'errors_tab')
 		}
-	},
-	mounted() {
-		console.log('errors mounted')
-		// this.$refs.root.style.display = 'block'
-		EventBus.$on('showTabErrors', this.showErrors)
-		this.$root.$on('showTabErrors', this.showErrors)
-	},
-	beforeDestroy() {
-		console.log('errors bef dest')
-		// this.$refs.root.style.display = 'none'
 	}
 }
 </script>

src/js/tabs.js

@@ -7,6 +7,7 @@ window.main_selected = ''
 window.windows_stack = []
 window.currentStack = {}
 
+// Used only in errors tab
 export function changeTab(sidebarEl, section, tabName) {
 	window.windows_stack = []
 	window.currentStack = {}

src/store/index.js

@@ -9,6 +9,7 @@ import charts from '@/store/modules/charts'
 import favorites from '@/store/modules/favorites'
 import about from '@/store/modules/about'
 import login from '@/store/modules/login'
+import errors from '@/store/modules/errors'
 
 // Load Vuex
 Vue.use(Vuex)
@@ -23,7 +24,8 @@ export default new Vuex.Store({
 		charts,
 		favorites,
 		about,
-		login
+		login,
+		errors
 	},
 	strict: process.env.NODE_ENV !== 'production'
 })

src/store/modules/errors.js

@@ -0,0 +1,45 @@
+const state = {
+	artist: '',
+	bitrate: '',
+	cover: '',
+	downloaded: 0,
+	errors: [],
+	failed: 0,
+	id: '',
+	progress: 0,
+	silent: true,
+	size: 0,
+	title: '',
+	type: '',
+	uuid: ''
+}
+
+const actions = {
+	setErrors({ commit }, payload) {
+		commit('SET_ERRORS', payload)
+	}
+}
+
+const getters = {
+	getErrors: state => state
+}
+
+const mutations = {
+	SET_ERRORS(state, payload) {
+		// The payload has useless data for the GUI, so only the needed data is saved in the store
+		for (const errorName in state) {
+			if (state.hasOwnProperty(errorName)) {
+				const error = payload[errorName]
+
+				state[errorName] = error
+			}
+		}
+	}
+}
+
+export default {
+	state,
+	getters,
+	actions,
+	mutations
+}

src/store/modules/favorites.js

@@ -4,7 +4,8 @@ const state = {
 	albums: [],
 	artists: [],
 	playlists: [],
-	tracks: []
+	tracks: [],
+	test: ''
 }
 
 const actions = {
@@ -21,7 +22,7 @@ const actions = {
 			commit('SET_FAVORITES_ARTISTS', { index, data: artist })
 		})
 
-		dispatch('setFavoritesTracks', payload.tracks)
+		// dispatch('setFavoritesTracks', payload.tracks)
 	},
 	setFavoritesTracks({ commit }, payload) {
 		payload.forEach((track, index) => {

src/utils/socket.js

@@ -11,7 +11,8 @@ socket.on('init_charts', charts => {
 })
 
 socket.on('init_favorites', favorites => {
-	// store.dispatch('setFavorites', favorites)
+	store.dispatch('setFavorites', favorites)
+	// store.dispatch('setFavorites', JSON.parse(JSON.stringify(favorites)))
 })
 
 socket.on('init_settings', (settings, credentials, defaults) => {