aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/api/routes/files/albumAddPOST.js3
-rw-r--r--src/api/routes/files/albumDelPOST.js3
-rw-r--r--src/site/components/grid/Grid.vue83
-rw-r--r--src/site/pages/dashboard/albums/_id.vue1
-rw-r--r--src/site/pages/dashboard/index.vue9
-rw-r--r--src/site/pages/index.vue9
-rw-r--r--src/site/store/album.js57
-rw-r--r--src/site/store/images.js69
8 files changed, 128 insertions, 106 deletions
diff --git a/src/api/routes/files/albumAddPOST.js b/src/api/routes/files/albumAddPOST.js
index af39caa..a88e636 100644
--- a/src/api/routes/files/albumAddPOST.js
+++ b/src/api/routes/files/albumAddPOST.js
@@ -24,7 +24,8 @@ class albumAddPOST extends Route {
}
return res.json({
- message: 'Successfully added file to album'
+ message: 'Successfully added file to album',
+ data: { fileId, album: { id: album.id, name: album.name } },
});
}
}
diff --git a/src/api/routes/files/albumDelPOST.js b/src/api/routes/files/albumDelPOST.js
index 9a4b87b..6e4d576 100644
--- a/src/api/routes/files/albumDelPOST.js
+++ b/src/api/routes/files/albumDelPOST.js
@@ -25,7 +25,8 @@ class albumDelPOST extends Route {
}
return res.json({
- message: 'Successfully removed file from album'
+ message: 'Successfully removed file from album',
+ data: { fileId, album: { id: album.id, name: album.name } },
});
}
}
diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index f98108e..42dcc6b 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -70,7 +70,7 @@
</a>
</b-tooltip>
<b-tooltip label="Tags" position="is-top">
- <a class="btn" @click="manageTags(item)">
+ <a class="btn" @click="false && manageTags(item)">
<i class="icon-ecommerce-tag-c" />
</a>
</b-tooltip>
@@ -163,7 +163,7 @@
<hr>
<div class="albums-container">
- <div v-for="(album, index) in albums" :key="index" class="album">
+ <div v-for="(album, index) in albums" :key="album.id" class="album">
<div class="field">
<b-checkbox
:value="isAlbumSelected(album.id)"
@@ -224,7 +224,6 @@ export default {
showWaterfall: true,
searchTerm: null,
showList: false,
- albums: [],
hoveredItems: [],
isAlbumsModalActive: false,
showingModalForFile: null,
@@ -236,6 +235,8 @@ export default {
computed: {
...mapState({
user: (state) => state.auth.user,
+ albums: (state) => state.albums.tinyDetails,
+ images: (state) => state.images,
}),
blank() {
// eslint-disable-next-line global-require, import/no-unresolved
@@ -245,33 +246,31 @@ export default {
return this.files;
},
},
+ created() {
+ this.getAlbums();
+ },
methods: {
async search() {
const data = await this.$search.do(this.searchTerm, ['name', 'original', 'type', 'albums:name']);
console.log('> Search result data', data);
},
deleteFile(file) {
- this.$emit('delete', file);
- /* this.$buefy.dialog.confirm({
+ // this.$emit('delete', file);
+ this.$buefy.dialog.confirm({
title: 'Deleting file',
message: 'Are you sure you want to <b>delete</b> this file?',
confirmText: 'Delete File',
type: 'is-danger',
onConfirm: async () => {
- const response = await this.$axios.$delete(`file/${file.id}`);
- if (this.showList) {
- file.hideFromList = true;
- this.$forceUpdate();
- } else {
- this.showWaterfall = false;
- this.files.splice(index, 1);
- this.$nextTick(() => {
- this.showWaterfall = true;
- });
+ try {
+ const response = await this.$store.dispatch('images/deleteFile', file.id);
+
+ this.$buefy.toast.open(response.message);
+ } catch (e) {
+ this.$store.dispatch('alert/set', { text: e.message, error: true }, { root: true });
}
- return this.$buefy.toast.open(response.message);
},
- }); */
+ });
},
isAlbumSelected(id) {
if (!this.showingModalForFile) return false;
@@ -279,38 +278,52 @@ export default {
return !!(found && found.id);
},
async openAlbumModal(file) {
+ const { id } = file;
this.showingModalForFile = file;
this.showingModalForFile.albums = [];
- this.isAlbumsModalActive = true;
- const response = await this.$axios.$get(`file/${file.id}/albums`);
- this.showingModalForFile.albums = response.albums;
+ try {
+ await this.$store.dispatch('images/getFileAlbums', id);
+ } catch (e) {
+ this.$store.dispatch('alert/set', { text: e.message, error: true }, { root: true });
+ }
+ this.showingModalForFile.albums = this.images.filesAlbums[id];
- this.getAlbums();
+ this.isAlbumsModalActive = true;
},
- async albumCheckboxClicked(value, id) {
- const response = await this.$axios.$post(`file/album/${value ? 'add' : 'del'}`, {
- albumId: id,
- fileId: this.showingModalForFile.id,
- });
- this.$buefy.toast.open(response.message);
-
- // Not the prettiest solution to refetch on each click but it'll do for now
- this.$parent.getFiles();
+ async albumCheckboxClicked(add, id) {
+ try {
+ let response;
+ if (add) {
+ response = await this.$store.dispatch('images/addToAlbum', {
+ albumId: id,
+ fileId: this.showingModalForFile.id,
+ });
+ } else {
+ response = await this.$store.dispatch('images/removeFromAlbum', {
+ albumId: id,
+ fileId: this.showingModalForFile.id,
+ });
+ }
+
+ this.$buefy.toast.open(response.message);
+ } catch (e) {
+ this.$store.dispatch('alert/set', { text: e.message, error: true }, { root: true });
+ }
},
async getAlbums() {
- const response = await this.$axios.$get('albums/dropdown');
- this.albums = response.albums;
- this.$forceUpdate();
+ try {
+ await this.$store.dispatch('albums/getTinyDetails');
+ } catch (e) {
+ this.$store.dispatch('alert/set', { text: e.message, error: true }, { root: true });
+ }
},
mouseOver(id) {
- console.log('in', id);
const foundIndex = this.hoveredItems.indexOf(id);
if (foundIndex > -1) return;
this.hoveredItems.push(id);
},
mouseOut(id) {
- console.log('out', id);
const foundIndex = this.hoveredItems.indexOf(id);
if (foundIndex > -1) this.hoveredItems.splice(foundIndex, 1);
},
diff --git a/src/site/pages/dashboard/albums/_id.vue b/src/site/pages/dashboard/albums/_id.vue
index 33b0319..b25762e 100644
--- a/src/site/pages/dashboard/albums/_id.vue
+++ b/src/site/pages/dashboard/albums/_id.vue
@@ -83,6 +83,7 @@ export default {
Grid,
},
middleware: ['auth', ({ route, store }) => {
+ store.commit('images/resetState');
store.dispatch('images/fetchByAlbumId', { id: route.params.id });
}],
data() {
diff --git a/src/site/pages/dashboard/index.vue b/src/site/pages/dashboard/index.vue
index 71df7eb..2f06c7e 100644
--- a/src/site/pages/dashboard/index.vue
+++ b/src/site/pages/dashboard/index.vue
@@ -33,14 +33,13 @@
</nav>
<hr>
- <b-loading :active="images.isLoading" />
+ <!-- <b-loading :active="images.isLoading" /> -->
<Grid
v-if="totalFiles && !isLoading"
:files="images.files"
:enableSearch="false"
- class="grid"
- @delete="handleFileDelete">
+ class="grid">
<template v-slot:pagination>
<b-pagination
v-if="shouldPaginate"
@@ -77,6 +76,7 @@ export default {
Grid,
},
middleware: ['auth', ({ store }) => {
+ store.commit('images/resetState');
store.dispatch('images/fetch');
}],
data() {
@@ -108,9 +108,6 @@ export default {
await this.fetch(this.current);
this.isLoading = false;
},
- handleFileDelete(file) {
- console.log('yep!', file.id);
- },
},
};
</script>
diff --git a/src/site/pages/index.vue b/src/site/pages/index.vue
index bb35be3..c8fb7b8 100644
--- a/src/site/pages/index.vue
+++ b/src/site/pages/index.vue
@@ -19,7 +19,8 @@
</div>
<div class="container uploader">
<Uploader v-if="config.publicMode || (!config.publicMode && loggedIn)" />
- <div v-else
+ <div
+ v-else
class="has-text-centered is-size-4 has-text-danger">
This site has disabled public uploads. You need an account.
</div>
@@ -39,15 +40,15 @@ export default {
components: {
Logo,
Uploader,
- Links
+ Links,
},
data() {
return { albums: [] };
},
computed: {
...mapGetters({ loggedIn: 'auth/isLoggedIn' }),
- ...mapState(['config'])
- }
+ ...mapState(['config']),
+ },
};
</script>
<style lang="scss" scoped>
diff --git a/src/site/store/album.js b/src/site/store/album.js
deleted file mode 100644
index d8ffacc..0000000
--- a/src/site/store/album.js
+++ /dev/null
@@ -1,57 +0,0 @@
-export const state = () => ({
- files: [],
- name: null,
- isLoading: false,
- pagination: {
- page: 1,
- limit: 30,
- totalFiles: 0,
- },
- downloadEnabled: false,
-});
-
-export const getters = {
- getTotalFiles: ({ pagination }) => pagination.totalFiles,
- getFetchedCount: ({ files }) => files.length,
- shouldPaginate: ({ pagination }) => pagination.totalFiles > pagination.limit,
- getLimit: ({ pagination }) => pagination.limit,
- getName: ({ name }) => name,
-};
-
-export const actions = {
- async fetchById({ commit, dispatch, state }, { id, page }) {
- commit('setIsLoading');
-
- page = page || 1;
-
- try {
- const response = await this.$axios.$get(`album/${id}/full`, {
- params: { limit: state.pagination.limit, page },
- });
-
- commit('setFiles', response);
- commit('updatePaginationMeta', { totalFiles: response.count, page });
- } catch (e) {
- dispatch('alert/set', { text: e.message, error: true }, { root: true });
- }
- },
- // TODO: Fix duplicate code between this store and files store
- deleteFile({ commit }, fileId) {
-
- },
-};
-
-export const mutations = {
- setIsLoading(state) {
- state.isLoading = true;
- },
- setFiles(state, { files, name }) {
- state.files = files || [];
- state.name = name;
- state.isLoading = false;
- },
- updatePaginationMeta(state, { page, totalFiles }) {
- state.pagination.page = page || 1;
- state.pagination.totalFiles = totalFiles || 0;
- },
-};
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());
+ },
};
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-23 06:59:09 +0000