diff options
Diffstat (limited to 'src/site/components')
| -rw-r--r-- | src/site/components/album/AlbumDetails.vue | 85 | ||||
| -rw-r--r-- | src/site/components/album/AlbumEntry.vue | 11 | ||||
| -rw-r--r-- | src/site/components/grid/Grid.vue | 12 |
3 files changed, 58 insertions, 50 deletions
diff --git a/src/site/components/album/AlbumDetails.vue b/src/site/components/album/AlbumDetails.vue index a02fe55..b646cb0 100644 --- a/src/site/components/album/AlbumDetails.vue +++ b/src/site/components/album/AlbumDetails.vue @@ -25,13 +25,13 @@ label="Allow download" centered> <b-switch v-model="props.row.enableDownload" - @input="linkOptionsChanged(props.row)" /> + @input="updateLinkOptions(albumId, props.row)" /> </b-table-column> <b-table-column field="enabled" numeric> <button class="button is-danger" - @click="promptDeleteAlbumLink(props.row.identifier)">Delete link</button> + @click="promptDeleteAlbumLink(albumId, props.row.identifier)">Delete link</button> </b-table-column> </template> <template slot="empty"> @@ -42,6 +42,7 @@ Nothing here </div> </template> + <template slot="footer"> <div class="level is-paddingless"> <div class="level-left"> @@ -70,7 +71,7 @@ </template> <script> -import { mapState } from 'vuex'; +import { mapState, mapActions } from 'vuex'; export default { props: { @@ -90,55 +91,65 @@ export default { }, computed: mapState(['config']), methods: { + ...mapActions({ + deleteAlbumAction: 'albums/deleteAlbum', + deleteAlbumLinkAction: 'albums/deleteLink', + updateLinkOptionsAction: 'albums/updateLinkOptions', + createLinkAction: 'albums/createLink', + alert: 'alert/set' + }), promptDeleteAlbum(id) { this.$buefy.dialog.confirm({ + type: 'is-danger', message: 'Are you sure you want to delete this album?', onConfirm: () => this.deleteAlbum(id) }); }, - async deleteAlbum(id) { - const response = await this.$axios.$delete(`album/${id}`); - this.getAlbums(); - return this.$buefy.toast.open(response.message); - }, - promptDeleteAlbumLink(identifier) { + promptDeleteAlbumLink(albumId, identifier) { this.$buefy.dialog.confirm({ + type: 'is-danger', message: 'Are you sure you want to delete this album link?', - onConfirm: () => this.deleteAlbumLink(identifier) + onConfirm: () => this.deleteAlbumLink({ albumId, identifier }) }); }, - async deleteAlbumLink(identifier) { - const response = await this.$axios.$delete(`album/link/delete/${identifier}`); - return this.$buefy.toast.open(response.message); + async deleteAlbum(id) { + try { + const response = await this.deleteAlbumAction(id); + + this.alert({ text: response.message, error: false }); + } catch (e) { + this.alert({ text: e.message, error: true }); + } }, - async linkOptionsChanged(link) { - const response = await this.$axios.$post(`album/link/edit`, - { - identifier: link.identifier, - enableDownload: link.enableDownload, - enabled: link.enabled - }); - this.$buefy.toast.open(response.message); + async deleteAlbumLink(id) { + try { + const response = await this.deleteAlbumLinkAction(id); + + this.alert({ text: response.message, error: false }); + } catch (e) { + this.alert({ text: e.message, error: true }); + } }, - async createLink(album) { - album.isCreatingLink = true; - // Since we actually want to change the state even if the call fails, use a try catch + async createLink(albumId) { + this.isCreatingLink = true; try { - const response = await this.$axios.$post(`album/link/new`, - { albumId: album.id }); - this.$buefy.toast.open(response.message); - album.links.push({ - identifier: response.identifier, - views: 0, - enabled: true, - enableDownload: true, - expiresAt: null - }); - } catch (error) { - // + const response = await this.createLinkAction(albumId); + + this.alert({ text: response.message, error: false }); + } catch (e) { + this.alert({ text: e.message, error: true }); } finally { - album.isCreatingLink = false; + this.isCreatingLink = false; } + }, + async updateLinkOptions(albumId, linkOpts) { + try { + const response = await this.updateLinkOptionsAction({ albumId, linkOpts }); + + this.alert({ text: response.message, error: false }); + } catch (e) { + this.alert({ text: e.message, error: true }); + } } } }; diff --git a/src/site/components/album/AlbumEntry.vue b/src/site/components/album/AlbumEntry.vue index 4d23d6c..28e434a 100644 --- a/src/site/components/album/AlbumEntry.vue +++ b/src/site/components/album/AlbumEntry.vue @@ -14,7 +14,9 @@ <h4> <router-link :to="`/dashboard/albums/${album.id}`">{{ album.name }}</router-link> </h4> - <span>Updated <timeago :since="album.editedAt" /></span> + <span> + Created <span class="is-inline has-text-weight-semibold"><timeago :since="album.createdAt" /></span> + </span> <span>{{ album.fileCount || 0 }} files</span> </div> <div class="latest is-hidden-mobile"> @@ -40,7 +42,7 @@ </div> <AlbumDetails v-if="isExpanded" - :details="getDetails" + :details="getDetails(album.id)" :albumId="album.id" /> </div> </template> @@ -62,13 +64,10 @@ export default { computed: { ...mapGetters({ isExpandedGetter: 'albums/isExpanded', - getDetailsGetter: 'albums/getDetails' + getDetails: 'albums/getDetails' }), isExpanded() { return this.isExpandedGetter(this.album.id); - }, - getDetails() { - return this.getDetailsGetter(this.album.id); } }, methods: { diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue index a06eabf..956dd28 100644 --- a/src/site/components/grid/Grid.vue +++ b/src/site/components/grid/Grid.vue @@ -29,12 +29,6 @@ <Waterfall v-if="showWaterfall" :gutterWidth="10" :gutterHeight="4"> - <input v-if="enableSearch" - v-model="searchTerm" - type="text" - placeholder="Search..." - @input="search()" - @keyup.enter="search()"> <WaterfallItem v-for="(item, index) in gridFiles" :key="item.id" :width="width" @@ -167,7 +161,7 @@ </template> <template slot="footer"> <div class="has-text-right has-text-default"> - {{ files.length }} files + Showing {{ files.length }} files ({{ total }} total) </div> </template> </b-table> @@ -213,6 +207,10 @@ export default { type: Array, default: () => [] }, + total: { + type: Number, + default: 0 + }, fixed: { type: Boolean, default: false |