1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
import Vue from 'vue';
export const state = () => ({
list: [],
isListLoading: false,
albumDetails: {},
expandedAlbums: [],
tinyDetails: [],
});
export const getters = {
isExpanded: (state) => (id) => state.expandedAlbums.indexOf(id) > -1,
getDetails: (state) => (id) => state.albumDetails[id] || {},
};
export const actions = {
async fetch({ commit }) {
commit('albumsRequest');
const response = await this.$axios.$get('albums/mini');
commit('setAlbums', response.albums);
return response;
},
async fetchDetails({ commit }, albumId) {
const response = await this.$axios.$get(`album/${albumId}/links`);
commit('setDetails', {
id: albumId,
details: {
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;
},
async getTinyDetails({ commit }) {
const response = await this.$axios.$get('albums/dropdown');
commit('setTinyDetails', response);
return response;
},
};
export const mutations = {
albumsRequest(state) {
state.isLoading = true;
},
setAlbums(state, albums) {
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 }) {
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);
if (foundIndex > -1) state.albumDetails[albumId].links.splice(foundIndex, 1);
},
toggleExpandedState(state, id) {
const foundIndex = state.expandedAlbums.indexOf(id);
if (foundIndex > -1) {
state.expandedAlbums.splice(foundIndex, 1);
} else {
state.expandedAlbums.push(id);
}
},
setTinyDetails(state, { albums }) {
state.tinyDetails = albums;
},
};
|