From 720ffaf0083564c85a07d66a6d303f34706add41 Mon Sep 17 00:00:00 2001 From: Zephyrrus Date: Thu, 2 Jul 2020 02:50:55 +0300 Subject: feat: start refactoring the code to actually use vuex This includes creating multiple stores as needed for components and removing all complex states from components (since all those states should be stored in vuex) --- src/site/store/images.js | 56 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 56 insertions(+) create mode 100644 src/site/store/images.js (limited to 'src/site/store/images.js') diff --git a/src/site/store/images.js b/src/site/store/images.js new file mode 100644 index 0000000..e87dac1 --- /dev/null +++ b/src/site/store/images.js @@ -0,0 +1,56 @@ +/* eslint-disable no-shadow */ +export const state = () => ({ + files: [], + isLoading: false, + pagination: { + page: 1, + limit: 30, + totalFiles: 0 + } +}); + +export const getters = { + getTotalFiles: state => state.pagination.totalFiles, + getFetchedCount: state => state.files.length, + shouldPaginate: ({ pagination }) => pagination.totalFiles > pagination.limit, + getLimit: ({ pagination }) => pagination.limit +}; + +export const actions = { + async fetch({ commit, dispatch, state }, page) { + commit('setIsLoading'); + + page = page || 1; + + try { + const response = await this.$axios.$get(`files`, { params: { limit: state.pagination.limit, page } }); + + commit('updateFiles', { files: response.files }); + commit('updatePaginationMeta', { totalFiles: response.count, page }); + } catch (e) { + dispatch('alert/set', { text: e.message, error: true }, { root: true }); + } + }, + async fetchById({ commit, dispatch }) { + try { + const response = await this.$axios.$get('verify'); + commit('loginSuccess', response); + } catch (e) { + dispatch('alert/set', { text: e.message, error: true }, { root: true }); + } + } +}; + +export const mutations = { + setIsLoading(state) { + state.isLoading = true; + }, + updateFiles(state, { files }) { + state.files = files || []; + state.isLoading = false; + }, + updatePaginationMeta(state, { page, totalFiles }) { + state.pagination.page = page || 1; + state.pagination.totalFiles = totalFiles || 0; + } +}; -- cgit v1.2.3 From c2dbbe6396540ee9d76991a00f5028b49d221d0c Mon Sep 17 00:00:00 2001 From: Zephyrrus Date: Thu, 2 Jul 2020 23:42:02 +0300 Subject: feat: refactor account to use vuex, fix small presentational components --- src/site/store/images.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/site/store/images.js') diff --git a/src/site/store/images.js b/src/site/store/images.js index e87dac1..f6dae1b 100644 --- a/src/site/store/images.js +++ b/src/site/store/images.js @@ -10,8 +10,8 @@ export const state = () => ({ }); export const getters = { - getTotalFiles: state => state.pagination.totalFiles, - getFetchedCount: state => state.files.length, + getTotalFiles: ({ pagination }) => pagination.totalFiles, + getFetchedCount: ({ files }) => files.length, shouldPaginate: ({ pagination }) => pagination.totalFiles > pagination.limit, getLimit: ({ pagination }) => pagination.limit }; -- cgit v1.2.3 From 766e74cc51138b32482f65f0f2647eb9d943103e Mon Sep 17 00:00:00 2001 From: Zephyrrus Date: Sun, 5 Jul 2020 04:18:08 +0300 Subject: feat: add video preview on hover to dashboard and apply new linter rules to some of the files --- src/site/store/images.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/site/store/images.js') diff --git a/src/site/store/images.js b/src/site/store/images.js index f6dae1b..14f475a 100644 --- a/src/site/store/images.js +++ b/src/site/store/images.js @@ -25,7 +25,7 @@ export const actions = { try { const response = await this.$axios.$get(`files`, { params: { limit: state.pagination.limit, page } }); - commit('updateFiles', { files: response.files }); + commit('setFiles', { files: response.files }); commit('updatePaginationMeta', { totalFiles: response.count, page }); } catch (e) { dispatch('alert/set', { text: e.message, error: true }, { root: true }); @@ -45,7 +45,7 @@ export const mutations = { setIsLoading(state) { state.isLoading = true; }, - updateFiles(state, { files }) { + setFiles(state, { files }) { state.files = files || []; state.isLoading = false; }, -- cgit v1.2.3 From 15f296a7805b7623f56eab67b74ab0bf93a038e1 Mon Sep 17 00:00:00 2001 From: Zephyrrus Date: Tue, 7 Jul 2020 02:02:37 +0300 Subject: chore: eslint stores feat: merge album and images --- src/site/store/images.js | 45 +++++++++++++++++++++++++-------------------- 1 file changed, 25 insertions(+), 20 deletions(-) (limited to 'src/site/store/images.js') diff --git a/src/site/store/images.js b/src/site/store/images.js index 14f475a..d02219f 100644 --- a/src/site/store/images.js +++ b/src/site/store/images.js @@ -1,19 +1,21 @@ -/* eslint-disable no-shadow */ export const state = () => ({ files: [], isLoading: false, pagination: { page: 1, limit: 30, - totalFiles: 0 - } + totalFiles: 0, + }, + name: null, + downloadEnabled: false, }); export const getters = { getTotalFiles: ({ pagination }) => pagination.totalFiles, getFetchedCount: ({ files }) => files.length, shouldPaginate: ({ pagination }) => pagination.totalFiles > pagination.limit, - getLimit: ({ pagination }) => pagination.limit + getLimit: ({ pagination }) => pagination.limit, + getName: ({ name }) => name, }; export const actions = { @@ -23,34 +25,37 @@ export const actions = { page = page || 1; try { - const response = await this.$axios.$get(`files`, { params: { limit: state.pagination.limit, page } }); + const response = await this.$axios.$get('files', { params: { limit: state.pagination.limit, page } }); - commit('setFiles', { files: response.files }); - commit('updatePaginationMeta', { totalFiles: response.count, page }); + commit('setFilesAndMeta', { ...response, page }); } catch (e) { dispatch('alert/set', { text: e.message, error: true }, { root: true }); } }, - async fetchById({ commit, dispatch }) { - try { - const response = await this.$axios.$get('verify'); - commit('loginSuccess', response); - } catch (e) { - dispatch('alert/set', { text: e.message, error: true }, { root: true }); - } - } + async fetchByAlbumId({ commit, dispatch, state }, { id, page }) { + commit('setIsLoading'); + + page = page || 1; + + const response = await this.$axios.$get(`album/${id}/full`, { + params: { limit: state.pagination.limit, page }, + }); + + commit('setFilesAndMeta', { ...response, page }); + }, }; export const mutations = { setIsLoading(state) { state.isLoading = true; }, - setFiles(state, { files }) { + setFilesAndMeta(state, { + files, name, page, count, + }) { state.files = files || []; + state.name = name ?? null; state.isLoading = false; - }, - updatePaginationMeta(state, { page, totalFiles }) { state.pagination.page = page || 1; - state.pagination.totalFiles = totalFiles || 0; - } + state.pagination.totalFiles = count || 0; + }, }; -- cgit v1.2.3 From b519b6ccb469e874c783b995ddf0ab6fabdb5a0e Mon Sep 17 00:00:00 2001 From: Zephyrrus Date: Wed, 8 Jul 2020 03:37:50 +0300 Subject: refactor: refactor grid to use vuex for every action --- src/site/store/images.js | 69 ++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 67 insertions(+), 2 deletions(-) (limited to 'src/site/store/images.js') diff --git a/src/site/store/images.js b/src/site/store/images.js index d02219f..3019d85 100644 --- a/src/site/store/images.js +++ b/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()); + }, }; -- cgit v1.2.3 From fd3f6de51a082dcd72c2ef557747e031ef7b9c4a Mon Sep 17 00:00:00 2001 From: Zephyrrus Date: Thu, 9 Jul 2020 02:24:40 +0300 Subject: refactor: refactor most of the admin pages to use the store instead of internal states --- src/site/store/images.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/site/store/images.js') diff --git a/src/site/store/images.js b/src/site/store/images.js index 3019d85..a7581e0 100644 --- a/src/site/store/images.js +++ b/src/site/store/images.js @@ -10,7 +10,7 @@ export const getDefaultState = () => ({ }, name: null, downloadEnabled: false, - filesAlbums: {}, + filesAlbums: {}, // map of file ids with a list of album objects the file is in }); export const state = getDefaultState; -- cgit v1.2.3 From 0f66d807035d3e32a66c7dc9bf55fb3be99aedac Mon Sep 17 00:00:00 2001 From: Zephyrrus Date: Fri, 10 Jul 2020 01:13:51 +0300 Subject: refactor: finish refactoring all the components to use vuex --- src/site/store/images.js | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) (limited to 'src/site/store/images.js') diff --git a/src/site/store/images.js b/src/site/store/images.js index a7581e0..acac286 100644 --- a/src/site/store/images.js +++ b/src/site/store/images.js @@ -10,7 +10,8 @@ export const getDefaultState = () => ({ }, name: null, downloadEnabled: false, - filesAlbums: {}, // map of file ids with a list of album objects the file is in + 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 }); export const state = getDefaultState; @@ -105,19 +106,19 @@ export const mutations = { } }, setFileAlbums(state, { fileId, albums }) { - Vue.set(state.filesAlbums, fileId, albums); + Vue.set(state.fileAlbumsMap, fileId, albums); }, addAlbumToFile(state, { fileId, album }) { - if (!state.filesAlbums[fileId]) return; + if (!state.fileAlbumsMap[fileId]) return; - state.filesAlbums[fileId].push(album); + state.fileAlbumsMap[fileId].push(album); }, removeAlbumFromFile(state, { fileId, albumId }) { - if (!state.filesAlbums[fileId]) return; + if (!state.fileAlbumsMap[fileId]) return; - const foundIndex = state.filesAlbums[fileId].findIndex(({ id }) => id === albumId); + const foundIndex = state.fileAlbumsMap[fileId].findIndex(({ id }) => id === albumId); if (foundIndex > -1) { - state.filesAlbums[fileId].splice(foundIndex, 1); + state.fileAlbumsMap[fileId].splice(foundIndex, 1); } }, resetState(state) { -- cgit v1.2.3 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/site/store/images.js | 27 ++++++++++++++++++++++----- 1 file changed, 22 insertions(+), 5 deletions(-) (limited to 'src/site/store/images.js') 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 From 18bb451f793677a5bbfdc2c14128bae33c66dfde Mon Sep 17 00:00:00 2001 From: Zephyrrus Date: Mon, 20 Jul 2020 23:01:45 +0300 Subject: feat: implement all-in-one file detail viewer, tag editor and album selection modal --- src/site/store/images.js | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) (limited to 'src/site/store/images.js') diff --git a/src/site/store/images.js b/src/site/store/images.js index 0d5e82a..be04c8a 100644 --- a/src/site/store/images.js +++ b/src/site/store/images.js @@ -91,6 +91,20 @@ export const actions = { commit('removeFile', fileId); + return response; + }, + async addTag({ commit }, { fileId, tagName }) { + const response = await this.$axios.$post('file/tag/add', { fileId, tagName }); + + commit('addTagToFile', response.data); + + return response; + }, + async removeTag({ commit }, { fileId, tagName }) { + const response = await this.$axios.$post('file/tag/del', { fileId, tagName }); + + commit('removeTagFromFile', response.data); + return response; }, }; @@ -138,6 +152,19 @@ export const mutations = { state.fileAlbumsMap[fileId].splice(foundIndex, 1); } }, + addTagToFile(state, { fileId, tag }) { + if (!state.fileTagsMap[fileId]) return; + + state.fileTagsMap[fileId].push(tag); + }, + removeTagFromFile(state, { fileId, tag }) { + if (!state.fileTagsMap[fileId]) return; + + const foundIndex = state.fileTagsMap[fileId].findIndex(({ id }) => id === tag.id); + if (foundIndex > -1) { + state.fileTagsMap[fileId].splice(foundIndex, 1); + } + }, resetState(state) { Object.assign(state, getDefaultState()); }, -- cgit v1.2.3 From 279234a081e5ea772978732ae5d2e45d8adcd741 Mon Sep 17 00:00:00 2001 From: Zephyrrus Date: Wed, 22 Jul 2020 02:14:06 +0300 Subject: feat: add new search input For now, it clones the autocomplete from buefy, untill a PR or resolution to the opened issue about not being able to manipulate how the suggestions are applied is found --- src/site/store/images.js | 1 + 1 file changed, 1 insertion(+) (limited to 'src/site/store/images.js') diff --git a/src/site/store/images.js b/src/site/store/images.js index be04c8a..4737c26 100644 --- a/src/site/store/images.js +++ b/src/site/store/images.js @@ -8,6 +8,7 @@ export const getDefaultState = () => ({ limit: 30, totalFiles: 0, }, + search: '', albumName: null, albumDownloadEnabled: false, fileExtraInfoMap: {}, // information about the selected file -- cgit v1.2.3 From 39e9941ded8de4e41048781daa80de0838c01c19 Mon Sep 17 00:00:00 2001 From: Zephyrrus Date: Thu, 23 Jul 2020 04:08:31 +0300 Subject: feat: Add hiding to recommendations as a prop fix: change some of the regexes to remove , and ; as separator support because the query parser doesn't understad them and I don't feel like dealing with all the edge cases introduces by it --- src/site/store/images.js | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'src/site/store/images.js') diff --git a/src/site/store/images.js b/src/site/store/images.js index 4737c26..0488573 100644 --- a/src/site/store/images.js +++ b/src/site/store/images.js @@ -106,6 +106,12 @@ export const actions = { commit('removeTagFromFile', response.data); + return response; + }, + async search({ commit }, { q, albumId }) { + const optionalAlbum = albumId ? `&albumId=${albumId}` : ''; + const response = await this.$axios.$get(`search/?q=${encodeURI(q)}${optionalAlbum}`); + return response; }, }; -- cgit v1.2.3 From 90001c2df56d58e69fd199a518ae7f3e4ed327fc Mon Sep 17 00:00:00 2001 From: Zephyrrus Date: Thu, 24 Dec 2020 10:40:50 +0200 Subject: chore: remove trailing commas --- src/site/store/images.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) (limited to 'src/site/store/images.js') diff --git a/src/site/store/images.js b/src/site/store/images.js index 0488573..7cf25ce 100644 --- a/src/site/store/images.js +++ b/src/site/store/images.js @@ -6,14 +6,14 @@ export const getDefaultState = () => ({ pagination: { page: 1, limit: 30, - totalFiles: 0, + totalFiles: 0 }, search: '', 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 - fileTagsMap: {}, // 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; @@ -23,7 +23,7 @@ export const getters = { getFetchedCount: ({ files }) => files.length, shouldPaginate: ({ pagination }) => pagination.totalFiles > pagination.limit, getLimit: ({ pagination }) => pagination.limit, - getName: ({ name }) => name, + getName: ({ name }) => name }; export const actions = { @@ -50,7 +50,7 @@ export const actions = { page = page || 1; const response = await this.$axios.$get(`album/${id}/full`, { - params: { limit: state.pagination.limit, page }, + params: { limit: state.pagination.limit, page } }); commit('setFilesAndMeta', { ...response, page }); @@ -113,7 +113,7 @@ export const actions = { const response = await this.$axios.$get(`search/?q=${encodeURI(q)}${optionalAlbum}`); return response; - }, + } }; export const mutations = { @@ -121,7 +121,7 @@ export const mutations = { state.isLoading = true; }, setFilesAndMeta(state, { - files, name, page, count, downloadEnabled, + files, name, page, count, downloadEnabled }) { state.files = files || []; state.albumName = name ?? null; @@ -174,5 +174,5 @@ export const mutations = { }, resetState(state) { Object.assign(state, getDefaultState()); - }, + } }; -- cgit v1.2.3 From 587f7d69e80cfa1d94cc4730dc26834c389f574d Mon Sep 17 00:00:00 2001 From: Zephyrrus Date: Thu, 24 Dec 2020 13:57:09 +0200 Subject: bug: fix showlist resetting itself every time the page is changed bug: fix store not commiting search results --- src/site/store/images.js | 21 ++++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) (limited to 'src/site/store/images.js') diff --git a/src/site/store/images.js b/src/site/store/images.js index 7cf25ce..69b4f5e 100644 --- a/src/site/store/images.js +++ b/src/site/store/images.js @@ -9,6 +9,7 @@ export const getDefaultState = () => ({ totalFiles: 0 }, search: '', + showList: false, albumName: null, albumDownloadEnabled: false, fileExtraInfoMap: {}, // information about the selected file @@ -108,11 +109,22 @@ export const actions = { return response; }, - async search({ commit }, { q, albumId }) { + async search({ commit, dispatch }, { q, albumId, page }) { const optionalAlbum = albumId ? `&albumId=${albumId}` : ''; - const response = await this.$axios.$get(`search/?q=${encodeURI(q)}${optionalAlbum}`); - return response; + page = page || 1; + + try { + const response = await this.$axios.$get(`search/?q=${encodeURI(q)}${optionalAlbum}`); + + commit('setFilesAndMeta', { ...response, page }); + + return response; + } catch (e) { + dispatch('alert/set', { text: e.message, error: true }, { root: true }); + } + + return null; } }; @@ -172,6 +184,9 @@ export const mutations = { state.fileTagsMap[fileId].splice(foundIndex, 1); } }, + setShowList(state, showList) { + state.showList = showList; + }, resetState(state) { Object.assign(state, getDefaultState()); } -- cgit v1.2.3