From 151c360740aac5733759888220d91a1d3713b6e1 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Fri, 2 Oct 2020 22:16:34 +0300
Subject: feat: allow administrators to create custom links for albums

---
 src/site/components/album/AlbumDetails.vue | 58 +++++++++++++++++++++++++++++-
 src/site/components/sidebar/Sidebar.vue    |  2 +-
 src/site/store/albums.js                   |  7 ++++
 3 files changed, 65 insertions(+), 2 deletions(-)

(limited to 'src/site')

diff --git a/src/site/components/album/AlbumDetails.vue b/src/site/components/album/AlbumDetails.vue
index b411f13..ac6eba5 100644
--- a/src/site/components/album/AlbumDetails.vue
+++ b/src/site/components/album/AlbumDetails.vue
@@ -58,7 +58,30 @@
 				<div class="level is-paddingless">
 					<div class="level-left">
 						<div class="level-item">
+							<b-field v-if="auth.user.isAdmin">
+								<p class="control">
+									<button
+										:class="{ 'is-loading': isCreatingLink }"
+										class="button is-primary reset-font-size-button"
+										style="float: left"
+										@click="createLink(albumId)">
+										Create new link
+									</button>
+								</p>
+								<p class="control">
+									<b-dropdown>
+										<button slot="trigger" class="button is-primary reset-font-size-button">
+											<b-icon icon="menu-down" />
+										</button>
+
+										<b-dropdown-item @click="createCustomLink(albumId)">
+											Custom link
+										</b-dropdown-item>
+									</b-dropdown>
+								</p>
+							</b-field>
 							<button
+								v-else
 								:class="{ 'is-loading': isCreatingLink }"
 								class="button is-primary"
 								style="float: left"
@@ -107,13 +130,14 @@ export default {
 			isDeletingLinks: [],
 		};
 	},
-	computed: mapState(['config']),
+	computed: mapState(['config', 'auth']),
 	methods: {
 		...mapActions({
 			deleteAlbumAction: 'albums/deleteAlbum',
 			deleteAlbumLinkAction: 'albums/deleteLink',
 			updateLinkOptionsAction: 'albums/updateLinkOptions',
 			createLinkAction: 'albums/createLink',
+			createCustomLinkAction: 'albums/createCustomLink',
 			alert: 'alert/set',
 		}),
 		promptDeleteAlbum(id) {
@@ -172,6 +196,17 @@ export default {
 				this.alert({ text: e.message, error: true });
 			}
 		},
+		async createCustomLink(albumId) {
+			this.$buefy.dialog.prompt({
+				message: 'Custom link identifier',
+				inputAttrs: {
+					placeholder: '',
+					maxlength: 10,
+				},
+				trapFocus: true,
+				onConfirm: (value) => this.$handler.executeAction('albums/createCustomLink', { albumId, value }),
+			});
+		},
 		isDeleting(identifier) {
 			return this.isDeletingLinks.indexOf(identifier) > -1;
 		},
@@ -182,6 +217,11 @@ export default {
 <style lang="scss" scoped>
 	@import '~/assets/styles/_colors.scss';
 
+	.reset-font-size-button {
+		font-size: 1rem;
+		height: 2.25em;
+	}
+
 	div.details {
 		flex: 0 1 100%;
 		padding-left: 2em;
@@ -208,4 +248,20 @@ export default {
 					box-shadow: $boxShadowLight;
 		}
 	}
+
+	.dialog.modal .modal-card-body input {
+		border: 2px solid #21252d;
+		border-radius: 0.3em !important;
+		background: rgba(0, 0, 0, 0.15);
+		padding: 1rem;
+		color: $textColor;
+		height: 3rem;
+		&:focus,
+		&:hover {
+			border: 2px solid #21252d;
+		}
+		&::placeholder {
+			color: $textColor;
+		}
+	}
 </style>
diff --git a/src/site/components/sidebar/Sidebar.vue b/src/site/components/sidebar/Sidebar.vue
index d586122..2e8ca9e 100644
--- a/src/site/components/sidebar/Sidebar.vue
+++ b/src/site/components/sidebar/Sidebar.vue
@@ -22,7 +22,7 @@
 				tag="nuxt-link"
 				to="/dashboard/tags"
 				exact />
-			<b-menu-item icon="settings" expanded>
+			<b-menu-item icon="menu" expanded>
 				<template slot="label" slot-scope="props">
 					Administration
 					<b-icon class="is-pulled-right" :icon="props.expanded ? 'menu-down' : 'menu-up'" />
diff --git a/src/site/store/albums.js b/src/site/store/albums.js
index 8441182..c1ff696 100644
--- a/src/site/store/albums.js
+++ b/src/site/store/albums.js
@@ -55,6 +55,13 @@ export const actions = {
 
 		return response;
 	},
+	async createCustomLink({ commit }, { albumId, value }) {
+		const response = await this.$axios.$post('album/link/new', { albumId, identifier: value });
+
+		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,
-- 
cgit v1.2.3