From 7581d13d1cdbd190009dea11549669cfa5cc00ad Mon Sep 17 00:00:00 2001 From: Zephyrrus Date: Fri, 3 Jul 2020 00:35:09 +0300 Subject: feat: separate album view into multiple components and use vuex --- src/site/store/albums.js | 56 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 56 insertions(+) create mode 100644 src/site/store/albums.js (limited to 'src/site/store/albums.js') diff --git a/src/site/store/albums.js b/src/site/store/albums.js new file mode 100644 index 0000000..a33181c --- /dev/null +++ b/src/site/store/albums.js @@ -0,0 +1,56 @@ +/* eslint-disable no-shadow */ +export const state = () => ({ + list: [], + isListLoading: false, + albumDetails: {}, + expandedAlbums: [] +}); + +export const getters = { + isExpanded: state => id => state.expandedAlbums.indexOf(id) > -1, + getDetails: state => id => state.albumDetails[id] || {} +}; + +export const actions = { + async fetch({ commit, dispatch }) { + try { + commit('albumsRequest'); + const response = await this.$axios.$get(`albums/mini`); + + commit('setAlbums', response.albums); + } catch (e) { + dispatch('alert/set', { text: e.message, error: true }, { root: true }); + } + }, + async fetchDetails({ commit }, albumId) { + const response = await this.$axios.$get(`album/${albumId}/links`); + + commit('setDetails', { + id: albumId, + details: { + links: response.links + } + }); + } +}; + +export const mutations = { + albumsRequest(state) { + state.isLoading = true; + }, + setAlbums(state, albums) { + state.list = albums; + state.isLoading = false; + }, + setDetails(state, { id, details }) { + state.albumDetails[id] = details; + }, + toggleExpandedState(state, id) { + const foundIndex = state.expandedAlbums.indexOf(id); + if (foundIndex > -1) { + state.expandedAlbums.splice(foundIndex, 1); + } else { + state.expandedAlbums.push(id); + } + } +}; -- cgit v1.2.3 From 92be4504ccb8f6d918013e5c33870858cd22376a Mon Sep 17 00:00:00 2001 From: Zephyrrus Date: Sat, 4 Jul 2020 03:26:35 +0300 Subject: feat: refactor most of the album components to use store for presentation and actions --- src/site/store/albums.js | 75 +++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 74 insertions(+), 1 deletion(-) (limited to 'src/site/store/albums.js') diff --git a/src/site/store/albums.js b/src/site/store/albums.js index a33181c..d5d45ce 100644 --- a/src/site/store/albums.js +++ b/src/site/store/albums.js @@ -1,4 +1,6 @@ /* eslint-disable no-shadow */ +import Vue from 'vue'; + export const state = () => ({ list: [], isListLoading: false, @@ -18,10 +20,13 @@ export const actions = { const response = await this.$axios.$get(`albums/mini`); commit('setAlbums', response.albums); + + return response; } catch (e) { dispatch('alert/set', { text: e.message, error: true }, { root: true }); } }, + async fetchDetails({ commit }, albumId) { const response = await this.$axios.$get(`album/${albumId}/links`); @@ -31,6 +36,52 @@ export const actions = { links: response.links } }); + + return response; + }, + + async createAlbum({ commit }, name) { + const response = await this.$axios.$post(`album/new`, { name }); + + commit('addAlbum', response.data); + + return response; + }, + + async deleteAlbum({ commit }, albumId) { + const response = await this.$axios.$delete(`album/${albumId}`); + + commit('removeAlbum', albumId); + + return response; + }, + + async createLink({ commit }, albumId) { + const response = await this.$axios.$post(`album/link/new`, { albumId }); + + commit('addAlbumLink', { albumId, data: response.data }); + + return response; + }, + + async updateLinkOptions({ commit }, { albumId, linkOpts }) { + const response = await this.$axios.$post(`album/link/edit`, { + identifier: linkOpts.identifier, + enableDownload: linkOpts.enableDownload, + enabled: linkOpts.enabled + }); + + commit('updateAlbumLinkOpts', { albumId, linkOpts: response.data }); + + return response; + }, + + async deleteLink({ commit }, { albumId, identifier }) { + const response = await this.$axios.$delete(`album/link/delete/${identifier}`); + + commit('removeAlbumLink', { albumId, identifier }); + + return response; } }; @@ -42,8 +93,30 @@ export const mutations = { state.list = albums; state.isLoading = false; }, + addAlbum(state, album) { + state.list.unshift(album); + }, + removeAlbum(state, albumId) { + // state.list = state.list.filter(({ id }) => id !== albumId); + const foundIndex = state.list.findIndex(({ id }) => id === albumId); + state.list.splice(foundIndex, 1); + }, setDetails(state, { id, details }) { - state.albumDetails[id] = details; + Vue.set(state.albumDetails, id, details); + }, + addAlbumLink(state, { albumId, data }) { + state.albumDetails[albumId].links.push(data); + }, + updateAlbumLinkOpts(state, { albumId, linkOpts }) { + const foundIndex = state.albumDetails[albumId].links.findIndex( + ({ identifier }) => identifier === linkOpts.identifier + ); + const link = state.albumDetails[albumId].links[foundIndex]; + state.albumDetails[albumId].links[foundIndex] = { ...link, ...linkOpts }; + }, + removeAlbumLink(state, { albumId, identifier }) { + const foundIndex = state.albumDetails[albumId].links.findIndex(({ identifier: id }) => id === identifier); + state.albumDetails[albumId].links.splice(foundIndex, 1); }, toggleExpandedState(state, id) { const foundIndex = state.expandedAlbums.indexOf(id); -- cgit v1.2.3 From 04fdd63cee5327f49e5e11d5837a9031027c34ef Mon Sep 17 00:00:00 2001 From: Zephyrrus Date: Sun, 5 Jul 2020 04:17:09 +0300 Subject: feat: refactor single album page to use vuex --- src/site/store/albums.js | 38 +++++++++++++++++--------------------- 1 file changed, 17 insertions(+), 21 deletions(-) (limited to 'src/site/store/albums.js') diff --git a/src/site/store/albums.js b/src/site/store/albums.js index d5d45ce..f3d7bcf 100644 --- a/src/site/store/albums.js +++ b/src/site/store/albums.js @@ -5,26 +5,22 @@ export const state = () => ({ list: [], isListLoading: false, albumDetails: {}, - expandedAlbums: [] + expandedAlbums: [], }); export const getters = { - isExpanded: state => id => state.expandedAlbums.indexOf(id) > -1, - getDetails: state => id => state.albumDetails[id] || {} + isExpanded: (state) => (id) => state.expandedAlbums.indexOf(id) > -1, + getDetails: (state) => (id) => state.albumDetails[id] || {}, }; export const actions = { - async fetch({ commit, dispatch }) { - try { - commit('albumsRequest'); - const response = await this.$axios.$get(`albums/mini`); + async fetch({ commit }) { + commit('albumsRequest'); + const response = await this.$axios.$get('albums/mini'); - commit('setAlbums', response.albums); + commit('setAlbums', response.albums); - return response; - } catch (e) { - dispatch('alert/set', { text: e.message, error: true }, { root: true }); - } + return response; }, async fetchDetails({ commit }, albumId) { @@ -33,15 +29,15 @@ export const actions = { commit('setDetails', { id: albumId, details: { - links: response.links - } + links: response.links, + }, }); return response; }, async createAlbum({ commit }, name) { - const response = await this.$axios.$post(`album/new`, { name }); + const response = await this.$axios.$post('album/new', { name }); commit('addAlbum', response.data); @@ -57,7 +53,7 @@ export const actions = { }, async createLink({ commit }, albumId) { - const response = await this.$axios.$post(`album/link/new`, { albumId }); + const response = await this.$axios.$post('album/link/new', { albumId }); commit('addAlbumLink', { albumId, data: response.data }); @@ -65,10 +61,10 @@ export const actions = { }, async updateLinkOptions({ commit }, { albumId, linkOpts }) { - const response = await this.$axios.$post(`album/link/edit`, { + const response = await this.$axios.$post('album/link/edit', { identifier: linkOpts.identifier, enableDownload: linkOpts.enableDownload, - enabled: linkOpts.enabled + enabled: linkOpts.enabled, }); commit('updateAlbumLinkOpts', { albumId, linkOpts: response.data }); @@ -82,7 +78,7 @@ export const actions = { commit('removeAlbumLink', { albumId, identifier }); return response; - } + }, }; export const mutations = { @@ -109,7 +105,7 @@ export const mutations = { }, updateAlbumLinkOpts(state, { albumId, linkOpts }) { const foundIndex = state.albumDetails[albumId].links.findIndex( - ({ identifier }) => identifier === linkOpts.identifier + ({ identifier }) => identifier === linkOpts.identifier, ); const link = state.albumDetails[albumId].links[foundIndex]; state.albumDetails[albumId].links[foundIndex] = { ...link, ...linkOpts }; @@ -125,5 +121,5 @@ export const mutations = { } else { state.expandedAlbums.push(id); } - } + }, }; -- 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/albums.js | 1 - 1 file changed, 1 deletion(-) (limited to 'src/site/store/albums.js') diff --git a/src/site/store/albums.js b/src/site/store/albums.js index f3d7bcf..2b4ac60 100644 --- a/src/site/store/albums.js +++ b/src/site/store/albums.js @@ -1,4 +1,3 @@ -/* eslint-disable no-shadow */ import Vue from 'vue'; export const state = () => ({ -- cgit v1.2.3 From 1a8b6602e094289a4f477c33e432e0f5e1587b45 Mon Sep 17 00:00:00 2001 From: Zephyrrus Date: Wed, 8 Jul 2020 03:13:51 +0300 Subject: refactor: change uploader component to use vuex --- src/site/store/albums.js | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) (limited to 'src/site/store/albums.js') 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,12 +66,18 @@ export const actions = { return response; }, - async deleteLink({ commit }, { albumId, identifier }) { const response = await this.$axios.$delete(`album/link/delete/${identifier}`); commit('removeAlbumLink', { albumId, identifier }); + return response; + }, + async getTinyDetails({ commit }) { + const response = await this.$axios.$get('albums/dropdown'); + + commit('setTinyDetails', response); + return response; }, }; @@ -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; + }, }; -- cgit v1.2.3