diff options
Diffstat (limited to 'src/site')
| -rw-r--r-- | src/site/components/grid/Grid.vue | 2 | ||||
| -rw-r--r-- | src/site/pages/dashboard/index.vue | 72 |
2 files changed, 65 insertions, 9 deletions
diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue index 615d68f..e136f90 100644 --- a/src/site/components/grid/Grid.vue +++ b/src/site/components/grid/Grid.vue @@ -104,7 +104,7 @@ </b-tooltip> <b-tooltip label="Albums" position="is-top"> - <a @click="manageAlbums(item)"> + <a @click="$parent.openAlbumModal(item)"> <i class="icon-interface-window" /> </a> </b-tooltip> diff --git a/src/site/pages/dashboard/index.vue b/src/site/pages/dashboard/index.vue index 3834522..76c465b 100644 --- a/src/site/pages/dashboard/index.vue +++ b/src/site/pages/dashboard/index.vue @@ -4,6 +4,8 @@ section.hero div.hero-body { align-items: baseline; } + + .albumsModal .columns .column { padding: .25rem; } </style> <style lang="scss"> @import '~/assets/styles/_colors.scss'; @@ -16,22 +18,40 @@ <div class="container"> <div class="columns"> <div class="column is-narrow"> - <Sidebar/> + <Sidebar /> </div> <div class="column"> <h2 class="subtitle">Your uploaded files</h2> <hr> - <!-- - <h1 class="title">Uploads</h1> - <h2 class="subtitle">Keep track of all your uploads in here</h2> - <hr> - --> <Grid v-if="files.length" :files="files" /> </div> </div> </div> </div> + + <b-modal :active.sync="isAlbumsModalActive" + :width="640" + scroll="keep"> + <div class="card albumsModal"> + <div class="card-content"> + <div class="content"> + <h3 class="subtitle">Select the albums this file should be a part of</h3> + <hr> + <div class="columns is-multiline"> + <div v-for="(album, index) in albums" + :key="index" + class="column is-3"> + <div class="field"> + <b-checkbox :value="isAlbumSelected(album.id)" + @input="albumCheckboxClicked($event, album.id)">{{ album.name }}</b-checkbox> + </div> + </div> + </div> + </div> + </div> + </div> + </b-modal> </section> </template> @@ -45,7 +65,12 @@ export default { Grid }, data() { - return { files: [] }; + return { + files: [], + albums: [], + isAlbumsModalActive: false, + showingModalForFile: null + }; }, computed: { config() { @@ -57,6 +82,7 @@ export default { }, mounted() { this.getFiles(); + this.getAlbums(); this.$ga.page({ page: '/dashboard', title: 'Dashboard', @@ -64,14 +90,44 @@ export default { }); }, methods: { + isAlbumSelected(id) { + if (!this.showingModalForFile) return; + const found = this.showingModalForFile.albums.find(el => el.id === id); + return found ? found.id ? true : false : false; + }, + openAlbumModal(file) { + this.showingModalForFile = file; + this.isAlbumsModalActive = true; + }, + async albumCheckboxClicked(value, id) { + try { + const response = await this.axios.post(`${this.config.baseURL}/file/album/${value ? 'add' : 'del'}`, { + albumId: id, + fileId: this.showingModalForFile.id + }); + this.$toast.open(response.data.message); + + // Not the prettiest solution to refetch on each click but it'll do for now + this.getFiles(); + } catch (error) { + this.$onPromiseError(error); + } + }, async getFiles() { try { const response = await this.axios.get(`${this.config.baseURL}/files`); this.files = response.data.files; - console.log(this.files); } catch (error) { console.error(error); } + }, + async getAlbums() { + try { + const response = await this.axios.get(`${this.config.baseURL}/albums/dropdown`); + this.albums = response.data.albums; + } catch (error) { + this.$onPromiseError(error); + } } } }; |