refactor: refactor grid to use vuex for every action

src/api/routes/files/albumAddPOST.js

@@ -24,7 +24,8 @@ class albumAddPOST extends Route {
 		}
 
 		return res.json({
-			message: 'Successfully added file to album'
+			message: 'Successfully added file to album',
+			data: { fileId, album: { id: album.id, name: album.name } },
 		});
 	}
 }

src/api/routes/files/albumDelPOST.js

@@ -25,7 +25,8 @@ class albumDelPOST extends Route {
 		}
 
 		return res.json({
-			message: 'Successfully removed file from album'
+			message: 'Successfully removed file from album',
+			data: { fileId, album: { id: album.id, name: album.name } },
 		});
 	}
 }

src/site/components/grid/Grid.vue

@@ -70,7 +70,7 @@
 								</a>
 							</b-tooltip>
 							<b-tooltip label="Tags" position="is-top">
-								<a class="btn" @click="manageTags(item)">
+								<a class="btn" @click="false && manageTags(item)">
 									<i class="icon-ecommerce-tag-c" />
 								</a>
 							</b-tooltip>
@@ -163,7 +163,7 @@
 						<hr>
 
 						<div class="albums-container">
-							<div v-for="(album, index) in albums" :key="index" class="album">
+							<div v-for="(album, index) in albums" :key="album.id" class="album">
 								<div class="field">
 									<b-checkbox
 										:value="isAlbumSelected(album.id)"
@@ -224,7 +224,6 @@ export default {
 			showWaterfall: true,
 			searchTerm: null,
 			showList: false,
-			albums: [],
 			hoveredItems: [],
 			isAlbumsModalActive: false,
 			showingModalForFile: null,
@@ -236,6 +235,8 @@ export default {
 	computed: {
 		...mapState({
 			user: (state) => state.auth.user,
+			albums: (state) => state.albums.tinyDetails,
+			images: (state) => state.images,
 		}),
 		blank() {
 			// eslint-disable-next-line global-require, import/no-unresolved
@@ -245,33 +246,31 @@ export default {
 			return this.files;
 		},
 	},
+	created() {
+		this.getAlbums();
+	},
 	methods: {
 		async search() {
 			const data = await this.$search.do(this.searchTerm, ['name', 'original', 'type', 'albums:name']);
 			console.log('> Search result data', data);
 		},
 		deleteFile(file) {
-			this.$emit('delete', file);
-			/* this.$buefy.dialog.confirm({
+			// this.$emit('delete', file);
+			this.$buefy.dialog.confirm({
 				title: 'Deleting file',
 				message: 'Are you sure you want to <b>delete</b> this file?',
 				confirmText: 'Delete File',
 				type: 'is-danger',
 				onConfirm: async () => {
-					const response = await this.$axios.$delete(`file/${file.id}`);
-					if (this.showList) {
-						file.hideFromList = true;
-						this.$forceUpdate();
-					} else {
-						this.showWaterfall = false;
-						this.files.splice(index, 1);
-						this.$nextTick(() => {
-							this.showWaterfall = true;
-						});
+					try {
+						const response = await this.$store.dispatch('images/deleteFile', file.id);
+
+						this.$buefy.toast.open(response.message);
+					} catch (e) {
+						this.$store.dispatch('alert/set', { text: e.message, error: true }, { root: true });
 					}
-					return this.$buefy.toast.open(response.message);
 				},
-			}); */
+			});
 		},
 		isAlbumSelected(id) {
 			if (!this.showingModalForFile) return false;
@@ -279,38 +278,52 @@ export default {
 			return !!(found && found.id);
 		},
 		async openAlbumModal(file) {
+			const { id } = file;
 			this.showingModalForFile = file;
 			this.showingModalForFile.albums = [];
+
+			try {
+				await this.$store.dispatch('images/getFileAlbums', id);
+			} catch (e) {
+				this.$store.dispatch('alert/set', { text: e.message, error: true }, { root: true });
+			}
+			this.showingModalForFile.albums = this.images.filesAlbums[id];
+
 			this.isAlbumsModalActive = true;
-
-			const response = await this.$axios.$get(`file/${file.id}/albums`);
-			this.showingModalForFile.albums = response.albums;
-
-			this.getAlbums();
 		},
-		async albumCheckboxClicked(value, id) {
-			const response = await this.$axios.$post(`file/album/${value ? 'add' : 'del'}`, {
-				albumId: id,
-				fileId: this.showingModalForFile.id,
-			});
-			this.$buefy.toast.open(response.message);
+		async albumCheckboxClicked(add, id) {
+			try {
+				let response;
+				if (add) {
+					response = await this.$store.dispatch('images/addToAlbum', {
+						albumId: id,
+						fileId: this.showingModalForFile.id,
+					});
+				} else {
+					response = await this.$store.dispatch('images/removeFromAlbum', {
+						albumId: id,
+						fileId: this.showingModalForFile.id,
+					});
+				}
 
-			// Not the prettiest solution to refetch on each click but it'll do for now
-			this.$parent.getFiles();
+				this.$buefy.toast.open(response.message);
+			} catch (e) {
+				this.$store.dispatch('alert/set', { text: e.message, error: true }, { root: true });
+			}
 		},
 		async getAlbums() {
-			const response = await this.$axios.$get('albums/dropdown');
-			this.albums = response.albums;
-			this.$forceUpdate();
+			try {
+				await this.$store.dispatch('albums/getTinyDetails');
+			} catch (e) {
+				this.$store.dispatch('alert/set', { text: e.message, error: true }, { root: true });
+			}
 		},
 		mouseOver(id) {
-			console.log('in', id);
 			const foundIndex = this.hoveredItems.indexOf(id);
 			if (foundIndex > -1) return;
 			this.hoveredItems.push(id);
 		},
 		mouseOut(id) {
-			console.log('out', id);
 			const foundIndex = this.hoveredItems.indexOf(id);
 			if (foundIndex > -1) this.hoveredItems.splice(foundIndex, 1);
 		},

src/site/pages/dashboard/albums/_id.vue

@@ -83,6 +83,7 @@ export default {
 		Grid,
 	},
 	middleware: ['auth', ({ route, store }) => {
+		store.commit('images/resetState');
 		store.dispatch('images/fetchByAlbumId', { id: route.params.id });
 	}],
 	data() {

src/site/pages/dashboard/index.vue

@@ -33,14 +33,13 @@
 					</nav>
 					<hr>
 
-					<b-loading :active="images.isLoading" />
+					<!-- <b-loading :active="images.isLoading" /> -->
 
 					<Grid
 						v-if="totalFiles && !isLoading"
 						:files="images.files"
 						:enableSearch="false"
-						class="grid"
-						@delete="handleFileDelete">
+						class="grid">
 						<template v-slot:pagination>
 							<b-pagination
 								v-if="shouldPaginate"
@@ -77,6 +76,7 @@ export default {
 		Grid,
 	},
 	middleware: ['auth', ({ store }) => {
+		store.commit('images/resetState');
 		store.dispatch('images/fetch');
 	}],
 	data() {
@@ -108,9 +108,6 @@ export default {
 			await this.fetch(this.current);
 			this.isLoading = false;
 		},
-		handleFileDelete(file) {
-			console.log('yep!', file.id);
-		},
 	},
 };
 </script>

src/site/pages/index.vue

@@ -19,7 +19,8 @@
 		</div>
 		<div class="container uploader">
 			<Uploader v-if="config.publicMode || (!config.publicMode && loggedIn)" />
-			<div v-else
+			<div
+				v-else
 				class="has-text-centered is-size-4 has-text-danger">
 				This site has disabled public uploads. You need an account.
 			</div>
@@ -39,15 +40,15 @@ export default {
 	components: {
 		Logo,
 		Uploader,
-		Links
+		Links,
 	},
 	data() {
 		return { albums: [] };
 	},
 	computed: {
 		...mapGetters({ loggedIn: 'auth/isLoggedIn' }),
-		...mapState(['config'])
-	}
+		...mapState(['config']),
+	},
 };
 </script>
 <style lang="scss" scoped>

src/site/store/album.js

@@ -1,57 +0,0 @@
-export const state = () => ({
-	files: [],
-	name: null,
-	isLoading: false,
-	pagination: {
-		page: 1,
-		limit: 30,
-		totalFiles: 0,
-	},
-	downloadEnabled: false,
-});
-
-export const getters = {
-	getTotalFiles: ({ pagination }) => pagination.totalFiles,
-	getFetchedCount: ({ files }) => files.length,
-	shouldPaginate: ({ pagination }) => pagination.totalFiles > pagination.limit,
-	getLimit: ({ pagination }) => pagination.limit,
-	getName: ({ name }) => name,
-};
-
-export const actions = {
-	async fetchById({ commit, dispatch, state }, { id, page }) {
-		commit('setIsLoading');
-
-		page = page || 1;
-
-		try {
-			const response = await this.$axios.$get(`album/${id}/full`, {
-				params: { limit: state.pagination.limit, page },
-			});
-
-			commit('setFiles', response);
-			commit('updatePaginationMeta', { totalFiles: response.count, page });
-		} catch (e) {
-			dispatch('alert/set', { text: e.message, error: true }, { root: true });
-		}
-	},
-	// TODO: Fix duplicate code between this store and files store
-	deleteFile({ commit }, fileId) {
-
-	},
-};
-
-export const mutations = {
-	setIsLoading(state) {
-		state.isLoading = true;
-	},
-	setFiles(state, { files, name }) {
-		state.files = files || [];
-		state.name = name;
-		state.isLoading = false;
-	},
-	updatePaginationMeta(state, { page, totalFiles }) {
-		state.pagination.page = page || 1;
-		state.pagination.totalFiles = totalFiles || 0;
-	},
-};

src/site/store/images.js

@@ -1,4 +1,6 @@
-export const state = () => ({
+import Vue from 'vue';
+
+export const getDefaultState = () => ({
 	files: [],
 	isLoading: false,
 	pagination: {
@@ -8,8 +10,11 @@ export const state = () => ({
 	},
 	name: null,
 	downloadEnabled: false,
+	filesAlbums: {},
 });
 
+export const state = getDefaultState;
+
 export const getters = {
 	getTotalFiles: ({ pagination }) => pagination.totalFiles,
 	getFetchedCount: ({ files }) => files.length,
@@ -28,11 +33,15 @@ export const actions = {
 			const response = await this.$axios.$get('files', { params: { limit: state.pagination.limit, page } });
 
 			commit('setFilesAndMeta', { ...response, page });
+
+			return response;
 		} catch (e) {
 			dispatch('alert/set', { text: e.message, error: true }, { root: true });
 		}
+
+		return null;
 	},
-	async fetchByAlbumId({ commit, dispatch, state }, { id, page }) {
+	async fetchByAlbumId({ commit, state }, { id, page }) {
 		commit('setIsLoading');
 
 		page = page || 1;
@@ -42,6 +51,36 @@ export const actions = {
 		});
 
 		commit('setFilesAndMeta', { ...response, page });
+
+		return response;
+	},
+	async getFileAlbums({ commit }, fileId) {
+		const response = await this.$axios.$get(`file/${fileId}/albums`);
+
+		commit('setFileAlbums', { ...response, fileId });
+
+		return response;
+	},
+	async addToAlbum({ commit }, { fileId, albumId }) {
+		const response = await this.$axios.$post('file/album/add', { fileId, albumId });
+
+		commit('addAlbumToFile', { fileId, albumId, ...response.data });
+
+		return response;
+	},
+	async removeFromAlbum({ commit }, { fileId, albumId }) {
+		const response = await this.$axios.$post('file/album/del', { fileId, albumId });
+
+		commit('removeAlbumFromFile', { fileId, albumId });
+
+		return response;
+	},
+	async deleteFile({ commit }, fileId) {
+		const response = await this.$axios.$delete(`file/${fileId}`);
+
+		commit('removeFile', fileId);
+
+		return response;
 	},
 };
 
@@ -58,4 +97,30 @@ export const mutations = {
 		state.pagination.page = page || 1;
 		state.pagination.totalFiles = count || 0;
 	},
+	removeFile(state, fileId) {
+		const foundIndex = state.files.findIndex(({ id }) => id === fileId);
+		if (foundIndex > -1) {
+			state.files.splice(foundIndex, 1);
+			state.pagination.totalFiles -= 1;
+		}
+	},
+	setFileAlbums(state, { fileId, albums }) {
+		Vue.set(state.filesAlbums, fileId, albums);
+	},
+	addAlbumToFile(state, { fileId, album }) {
+		if (!state.filesAlbums[fileId]) return;
+
+		state.filesAlbums[fileId].push(album);
+	},
+	removeAlbumFromFile(state, { fileId, albumId }) {
+		if (!state.filesAlbums[fileId]) return;
+
+		const foundIndex = state.filesAlbums[fileId].findIndex(({ id }) => id === albumId);
+		if (foundIndex > -1) {
+			state.filesAlbums[fileId].splice(foundIndex, 1);
+		}
+	},
+	resetState(state) {
+		Object.assign(state, getDefaultState());
+	},
 };