diff options
| -rw-r--r-- | src/api/routes/albums/albumsGET.js | 15 | ||||
| -rw-r--r-- | src/site/components/uploader/Uploader.vue | 74 | ||||
| -rw-r--r-- | src/site/store/albums.js | 19 |
3 files changed, 61 insertions, 47 deletions
diff --git a/src/api/routes/albums/albumsGET.js b/src/api/routes/albums/albumsGET.js index 569128c..c9ab025 100644 --- a/src/api/routes/albums/albumsGET.js +++ b/src/api/routes/albums/albumsGET.js @@ -1,3 +1,4 @@ +/* eslint-disable max-classes-per-file */ const Route = require('../../structures/Route'); const Util = require('../../utils/Util'); @@ -19,17 +20,15 @@ class albumsGET extends Route { .orderBy('createdAt', 'desc'); for (const album of albums) { - // TODO: Optimize the shit out of this. Ideally a JOIN that grabs all the needed stuff in 1 query instead of 3 - // Fetch the total amount of files each album has. - const fileCount = await db - .table('albumsFiles') // eslint-disable-line no-await-in-loop + const fileCount = await db // eslint-disable-line no-await-in-loop + .table('albumsFiles') .where('albumId', album.id) .count({ count: 'id' }); // Fetch the file list from each album but limit it to 5 per album - const files = await db - .table('albumsFiles') // eslint-disable-line no-await-in-loop + const files = await db // eslint-disable-line no-await-in-loop + .table('albumsFiles') .join('files', { 'files.id': 'albumsFiles.fileId' }) .where('albumId', album.id) .select('files.id', 'files.name') @@ -47,7 +46,7 @@ class albumsGET extends Route { return res.json({ message: 'Successfully retrieved albums', - albums + albums, }); } } @@ -64,7 +63,7 @@ class albumsDropdownGET extends Route { .select('id', 'name'); return res.json({ message: 'Successfully retrieved albums', - albums + albums, }); } } diff --git a/src/site/components/uploader/Uploader.vue b/src/site/components/uploader/Uploader.vue index 1b03ff8..c7be372 100644 --- a/src/site/components/uploader/Uploader.vue +++ b/src/site/components/uploader/Uploader.vue @@ -1,7 +1,9 @@ <template> - <div :class="{ 'has-files': alreadyAddedFiles }" + <div + :class="{ 'has-files': alreadyAddedFiles }" class="uploader-wrapper"> - <b-select v-if="loggedIn" + <b-select + v-if="loggedIn" v-model="selectedAlbum" placeholder="Upload to album" size="is-medium" @@ -13,7 +15,8 @@ {{ album.name }} </option> </b-select> - <dropzone v-if="showDropzone" + <dropzone + v-if="showDropzone" id="dropzone" ref="el" :options="dropzoneOptions" @@ -25,16 +28,22 @@ Add or drop more files </label> - <div id="template" + <div + id="template" ref="template"> <div class="dz-preview dz-file-preview"> <div class="dz-details"> - <div class="dz-filename"><span data-dz-name /></div> - <div class="dz-size"><span data-dz-size /></div> + <div class="dz-filename"> + <span data-dz-name /> + </div> + <div class="dz-size"> + <span data-dz-size /> + </div> </div> <div class="result"> <div class="openLink"> - <a class="link" + <a + class="link" target="_blank"> Link </a> @@ -43,14 +52,16 @@ <div class="error"> <div> <span> - <span class="error-message" + <span + class="error-message" data-dz-errormessage /> <i class="icon-web-warning" /> </span> </div> </div> <div class="dz-progress"> - <span class="dz-upload" + <span + class="dz-upload" data-dz-uploadprogress /> </div> <!-- @@ -64,6 +75,8 @@ </template> <script> +import { mapState, mapGetters } from 'vuex'; + import Dropzone from 'nuxt-dropzone'; import '~/assets/styles/dropzone.scss'; @@ -75,20 +88,15 @@ export default { files: [], dropzoneOptions: {}, showDropzone: false, - albums: [], - selectedAlbum: null + selectedAlbum: null, }; }, computed: { - config() { - return this.$store.state.config; - }, - token() { - return this.$store.state.token; - }, - loggedIn() { - return this.$store.state.loggedIn; - } + ...mapState({ + config: (state) => state.config, + albums: (state) => state.albums.tinyDetails, + }), + ...mapGetters({ loggedIn: 'auth/isLoggedIn', token: 'auth/getToken' }), }, watch: { loggedIn() { @@ -96,7 +104,7 @@ export default { }, selectedAlbum() { this.updateDropzoneConfig(); - } + }, }, mounted() { this.dropzoneOptions = { @@ -119,7 +127,7 @@ export default { maxFilesize: this.config.maxFileSize, previewTemplate: this.$refs.template.innerHTML, dictDefaultMessage: 'Drag & Drop your files or click to browse', - headers: { Accept: 'application/vnd.lolisafe.json' } + headers: { Accept: 'application/vnd.lolisafe.json' }, }; this.showDropzone = true; if (this.loggedIn) this.getAlbums(); @@ -129,8 +137,11 @@ export default { Get all available albums so the user can upload directly to one (or several soon™) of them. */ async getAlbums() { - const response = await this.$axios.$get(`albums/dropdown`); - this.albums = response.albums; + try { + await this.$store.dispatch('albums/getTinyDetails'); + } catch (e) { + this.$store.dispatch('alert/set', { text: e.message, error: true }, { root: true }); + } this.updateDropzoneConfig(); }, @@ -143,14 +154,14 @@ export default { this.$refs.el.setOption('headers', { Accept: 'application/vnd.lolisafe.json', Authorization: this.token ? `Bearer ${this.token}` : '', - albumId: this.selectedAlbum ? this.selectedAlbum : null + albumId: this.selectedAlbum ? this.selectedAlbum : null, }); }, /* Dropzone stuff */ - dropzoneFilesAdded(files) { + dropzoneFilesAdded() { this.alreadyAddedFiles = true; }, dropzoneSuccess(file, response) { @@ -159,7 +170,7 @@ export default { dropzoneError(file, message, xhr) { this.$store.dispatch('alert', { text: 'There was an error uploading this file. Check the console.', - error: true + error: true, }); console.error(file, message, xhr); }, @@ -170,12 +181,11 @@ export default { original: file.name, size: file.size, type: file.type, - count: file.upload.totalChunkCount - }] + count: file.upload.totalChunkCount, + }], }); this.processResult(file, data); - this.$forceUpdate(); return done(); }, @@ -194,8 +204,8 @@ export default { this.$clipboard(response.url); }); */ - } - } + }, + }, }; </script> <style lang="scss" scoped> diff --git a/src/site/store/albums.js b/src/site/store/albums.js index 2b4ac60..8441182 100644 --- a/src/site/store/albums.js +++ b/src/site/store/albums.js @@ -5,6 +5,7 @@ export const state = () => ({ isListLoading: false, albumDetails: {}, expandedAlbums: [], + tinyDetails: [], }); export const getters = { @@ -21,7 +22,6 @@ export const actions = { return response; }, - async fetchDetails({ commit }, albumId) { const response = await this.$axios.$get(`album/${albumId}/links`); @@ -34,7 +34,6 @@ export const actions = { return response; }, - async createAlbum({ commit }, name) { const response = await this.$axios.$post('album/new', { name }); @@ -42,7 +41,6 @@ export const actions = { return response; }, - async deleteAlbum({ commit }, albumId) { const response = await this.$axios.$delete(`album/${albumId}`); @@ -50,7 +48,6 @@ export const actions = { return response; }, - async createLink({ commit }, albumId) { const response = await this.$axios.$post('album/link/new', { albumId }); @@ -58,7 +55,6 @@ export const actions = { return response; }, - async updateLinkOptions({ commit }, { albumId, linkOpts }) { const response = await this.$axios.$post('album/link/edit', { identifier: linkOpts.identifier, @@ -70,7 +66,6 @@ export const actions = { return response; }, - async deleteLink({ commit }, { albumId, identifier }) { const response = await this.$axios.$delete(`album/link/delete/${identifier}`); @@ -78,6 +73,13 @@ export const actions = { return response; }, + async getTinyDetails({ commit }) { + const response = await this.$axios.$get('albums/dropdown'); + + commit('setTinyDetails', response); + + return response; + }, }; export const mutations = { @@ -111,7 +113,7 @@ export const mutations = { }, removeAlbumLink(state, { albumId, identifier }) { const foundIndex = state.albumDetails[albumId].links.findIndex(({ identifier: id }) => id === identifier); - state.albumDetails[albumId].links.splice(foundIndex, 1); + if (foundIndex > -1) state.albumDetails[albumId].links.splice(foundIndex, 1); }, toggleExpandedState(state, id) { const foundIndex = state.expandedAlbums.indexOf(id); @@ -121,4 +123,7 @@ export const mutations = { state.expandedAlbums.push(id); } }, + setTinyDetails(state, { albums }) { + state.tinyDetails = albums; + }, }; |