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