feat: separate album view into multiple components and use vuex

1 files changed, 177 insertions, 0 deletions

diff --git a/src/site/components/album/AlbumDetails.vue b/src/site/components/album/AlbumDetails.vue
new file mode 100644
index 0000000..a02fe55
--- /dev/null
+++ b/src/site/components/album/AlbumDetails.vue
@@ -0,0 +1,177 @@
+<template>
+	<div class="details">
+		<h2>Public links for this album:</h2>
+
+		<b-table
+			:data="details.links || []"
+			:mobile-cards="true">
+			<template slot-scope="props">
+				<b-table-column field="identifier"
+					label="Link"
+					centered>
+					<a :href="`${config.URL}/a/${props.row.identifier}`"
+						target="_blank">
+						{{ props.row.identifier }}
+					</a>
+				</b-table-column>
+
+				<b-table-column field="views"
+					label="Views"
+					centered>
+					{{ props.row.views }}
+				</b-table-column>
+
+				<b-table-column field="enableDownload"
+					label="Allow download"
+					centered>
+					<b-switch v-model="props.row.enableDownload"
+						@input="linkOptionsChanged(props.row)" />
+				</b-table-column>
+
+				<b-table-column field="enabled"
+					numeric>
+					<button class="button is-danger"
+						@click="promptDeleteAlbumLink(props.row.identifier)">Delete link</button>
+				</b-table-column>
+			</template>
+			<template slot="empty">
+				<div class="has-text-centered">
+					<i class="icon-misc-mood-sad" />
+				</div>
+				<div class="has-text-centered">
+					Nothing here
+				</div>
+			</template>
+			<template slot="footer">
+				<div class="level is-paddingless">
+					<div class="level-left">
+						<div class="level-item">
+							<button :class="{ 'is-loading': isCreatingLink }"
+								class="button is-primary"
+								style="float: left"
+								@click="createLink(albumId)">Create new link</button>
+						</div>
+						<div class="level-item">
+							<span class="has-text-default">{{ details.links.length }} / {{ config.maxLinksPerAlbum }} links created</span>
+						</div>
+					</div>
+
+					<div class="level-right">
+						<div class="level-item">
+							<button class="button is-danger"
+								style="float: right"
+								@click="promptDeleteAlbum(albumId)">Delete album</button>
+						</div>
+					</div>
+				</div>
+			</template>
+		</b-table>
+	</div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+
+export default {
+	props: {
+		albumId: {
+			type: Number,
+			default: 0
+		},
+		details: {
+			type: Object,
+			default: () => ({})
+		},
+	},
+	data() {
+		return {
+			isCreatingLink: false
+		}
+	},
+	computed: mapState(['config']),
+	methods: {
+		promptDeleteAlbum(id) {
+			this.$buefy.dialog.confirm({
+				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) {
+			this.$buefy.dialog.confirm({
+				message: 'Are you sure you want to delete this album link?',
+				onConfirm: () => this.deleteAlbumLink(identifier)
+			});
+		},
+		async deleteAlbumLink(identifier) {
+			const response = await this.$axios.$delete(`album/link/delete/${identifier}`);
+			return this.$buefy.toast.open(response.message);
+		},
+		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 createLink(album) {
+			album.isCreatingLink = true;
+			// Since we actually want to change the state even if the call fails, use a try catch
+			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) {
+				//
+			} finally {
+				album.isCreatingLink = false;
+			}
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+	@import '~/assets/styles/_colors.scss';
+
+	div.details {
+		flex: 0 1 100%;
+		padding-left: 2em;
+		padding-top: 1em;
+		min-height: 50px;
+
+		.b-table {
+			padding: 2em 0em;
+
+			.table-wrapper {
+				-webkit-box-shadow: $boxShadowLight;
+						box-shadow: $boxShadowLight;
+			}
+		}
+	}
+</style>
+
+
+<style lang="scss">
+	@import '~/assets/styles/_colors.scss';
+
+	.b-table {
+		.table-wrapper {
+			-webkit-box-shadow: $boxShadowLight;
+					box-shadow: $boxShadowLight;
+		}
+	}
+</style>