From c93ddb09008c45942544b13bbb03319c367f9cd8 Mon Sep 17 00:00:00 2001 From: Zephyrrus Date: Sun, 19 Jul 2020 22:27:11 +0300 Subject: feat: Start working on a new album/tags/image info modal --- src/api/routes/admin/fileGET.js | 2 +- src/api/routes/files/fileGET.js | 46 +++++++ src/site/components/grid/Grid.vue | 32 ++++- src/site/components/image-modal/ImageInfo.vue | 179 ++++++++++++++++++++++++++ src/site/components/imageInfo/ImageInfo.vue | 0 src/site/plugins/buefy.js | 1 + src/site/store/admin.js | 2 +- src/site/store/images.js | 27 +++- 8 files changed, 278 insertions(+), 11 deletions(-) create mode 100644 src/api/routes/files/fileGET.js create mode 100644 src/site/components/image-modal/ImageInfo.vue delete mode 100644 src/site/components/imageInfo/ImageInfo.vue (limited to 'src') diff --git a/src/api/routes/admin/fileGET.js b/src/api/routes/admin/fileGET.js index 239b128..7e40659 100644 --- a/src/api/routes/admin/fileGET.js +++ b/src/api/routes/admin/fileGET.js @@ -3,7 +3,7 @@ const Util = require('../../utils/Util'); class filesGET extends Route { constructor() { - super('/file/:id', 'get', { adminOnly: true }); + super('/admin/file/:id', 'get', { adminOnly: true }); } async run(req, res, db) { diff --git a/src/api/routes/files/fileGET.js b/src/api/routes/files/fileGET.js new file mode 100644 index 0000000..e9ce90e --- /dev/null +++ b/src/api/routes/files/fileGET.js @@ -0,0 +1,46 @@ +const Route = require('../../structures/Route'); +const Util = require('../../utils/Util'); + +class fileGET extends Route { + constructor() { + super('/file/:id', 'get'); + } + + async run(req, res, db, user) { + const { id } = req.params; + if (!id) return res.status(400).json({ message: 'Invalid file ID supplied' }); + + /* + Make sure the file exists + */ + let file = await db.table('files').where({ id, userId: user.id }).first(); + if (!file) return res.status(400).json({ message: 'The file doesn\'t exist or doesn\'t belong to the user' }); + + file = Util.constructFilePublicLink(file); + + /* + Fetch the albums + */ + const albums = await db.table('albumsFiles') + .where('fileId', id) + .join('albums', 'albums.id', 'albumsFiles.albumId') + .select('albums.id', 'albums.name'); + + /* + Fetch the tags + */ + const tags = await db.table('fileTags') + .where('fileId', id) + .join('tags', 'tags.id', 'fileTags.id') + .select('tags.id', 'tags.uuid', 'tags.name'); + + return res.json({ + message: 'Successfully retrieved file', + file, + albums, + tags, + }); + } +} + +module.exports = fileGET; diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue index 90c196b..1b62097 100644 --- a/src/site/components/grid/Grid.vue +++ b/src/site/components/grid/Grid.vue @@ -75,7 +75,7 @@ - + @@ -121,7 +121,7 @@ - + @@ -153,7 +153,10 @@ - + + + + @@ -184,10 +187,12 @@ import { mapState } from 'vuex'; import Waterfall from './waterfall/Waterfall.vue'; +import ImageInfo from '~/components/image-modal/ImageInfo.vue'; export default { components: { Waterfall, + ImageInfo, }, props: { files: { @@ -230,6 +235,11 @@ export default { filesOffsetWaterfall: 0, filesOffsetEndWaterfall: 50, filesPerPageWaterfall: 50, + modalData: { + file: null, + tags: null, + albums: null, + }, }; }, computed: { @@ -318,6 +328,20 @@ export default { this.$store.dispatch('alert/set', { text: e.message, error: true }, { root: true }); } }, + async handleFileModal(file) { + const { id } = file; + + try { + await this.$store.dispatch('images/fetchFileMeta', id); + this.modalData.file = this.images.fileExtraInfoMap[id]; + this.modalData.albums = this.images.fileAlbumsMap[id]; + this.modalData.tags = this.images.fileTagsMap[id]; + } catch (e) { + this.$store.dispatch('alert/set', { text: e.message, error: true }, { root: true }); + } + + this.isAlbumsModalActive = true; + }, mouseOver(id) { const foundIndex = this.hoveredItems.indexOf(id); if (foundIndex > -1) return; diff --git a/src/site/components/image-modal/ImageInfo.vue b/src/site/components/image-modal/ImageInfo.vue new file mode 100644 index 0000000..c9dba1a --- /dev/null +++ b/src/site/components/image-modal/ImageInfo.vue @@ -0,0 +1,179 @@ + + + + + diff --git a/src/site/components/imageInfo/ImageInfo.vue b/src/site/components/imageInfo/ImageInfo.vue deleted file mode 100644 index e69de29..0000000 diff --git a/src/site/plugins/buefy.js b/src/site/plugins/buefy.js index 58bf28f..f3f7552 100644 --- a/src/site/plugins/buefy.js +++ b/src/site/plugins/buefy.js @@ -1,4 +1,5 @@ import Vue from 'vue'; import Buefy from 'buefy'; +// import 'buefy/dist/buefy.css'; Vue.use(Buefy); diff --git a/src/site/store/admin.js b/src/site/store/admin.js index b31c446..04ad980 100644 --- a/src/site/store/admin.js +++ b/src/site/store/admin.js @@ -34,7 +34,7 @@ export const actions = { return response; }, async fetchFile({ commit }, id) { - const response = await this.$axios.$get(`file/${id}`); + const response = await this.$axios.$get(`admin/file/${id}`); commit('setFile', response); commit('setUserInfo', response); diff --git a/src/site/store/images.js b/src/site/store/images.js index acac286..0d5e82a 100644 --- a/src/site/store/images.js +++ b/src/site/store/images.js @@ -8,10 +8,11 @@ export const getDefaultState = () => ({ limit: 30, totalFiles: 0, }, - name: null, - downloadEnabled: false, + albumName: null, + albumDownloadEnabled: false, + fileExtraInfoMap: {}, // information about the selected file fileAlbumsMap: {}, // map of file ids with a list of album objects the file is in - filesTags: {}, // map of file ids with a list of tag objects for the file + fileTagsMap: {}, // map of file ids with a list of tag objects for the file }); export const state = getDefaultState; @@ -55,6 +56,15 @@ export const actions = { return response; }, + async fetchFileMeta({ commit }, fileId) { + const response = await this.$axios.$get(`file/${fileId}`); + + commit('setFileAlbums', { ...response, fileId }); + commit('setFileTags', { ...response, fileId }); + commit('setFileExtraInfo', { ...response, fileId }); + + return response; + }, async getFileAlbums({ commit }, fileId) { const response = await this.$axios.$get(`file/${fileId}/albums`); @@ -90,10 +100,11 @@ export const mutations = { state.isLoading = true; }, setFilesAndMeta(state, { - files, name, page, count, + files, name, page, count, downloadEnabled, }) { state.files = files || []; - state.name = name ?? null; + state.albumName = name ?? null; + state.downloadEnabled = downloadEnabled ?? false; state.isLoading = false; state.pagination.page = page || 1; state.pagination.totalFiles = count || 0; @@ -108,6 +119,12 @@ export const mutations = { setFileAlbums(state, { fileId, albums }) { Vue.set(state.fileAlbumsMap, fileId, albums); }, + setFileTags(state, { fileId, tags }) { + Vue.set(state.fileTagsMap, fileId, tags); + }, + setFileExtraInfo(state, { fileId, file }) { + Vue.set(state.fileExtraInfoMap, fileId, file); + }, addAlbumToFile(state, { fileId, album }) { if (!state.fileAlbumsMap[fileId]) return; -- cgit v1.2.3