feat: refactor most of the album components to use store for presentation and actions

2 files changed, 64 insertions, 24 deletions

diff --git a/src/site/pages/dashboard/albums/_id.vue b/src/site/pages/dashboard/albums/_id.vue
index 47e7057..c082b63 100644
--- a/src/site/pages/dashboard/albums/_id.vue
+++ b/src/site/pages/dashboard/albums/_id.vue
@@ -10,25 +10,53 @@
 					<Sidebar />
 				</div>
 				<div class="column">
-					<h2 class="subtitle">Files</h2>
+					<nav class="level">
+						<div class="level-left">
+							<div class="level-item">
+								<h2 class="subtitle">Files</h2>
+							</div>
+						</div>
+						<div class="level-right">
+							<div class="level-item">
+								<b-field>
+									<b-input
+										placeholder="Search"
+										type="search"/>
+									<p class="control">
+										<button
+											outlined
+											class="button is-primary">
+											Search
+										</button>
+									</p>
+								</b-field>
+							</div>
+						</div>
+					</nav>
+
 					<hr>
 
 					<Grid v-if="files.length"
-						:files="files" />
-
-					<b-pagination
-						v-if="count > perPage"
-						:total="count"
-						:per-page="perPage"
-						:current.sync="current"
-						class="pagination"
-						icon-prev="icon-interface-arrow-left"
-						icon-next="icon-interface-arrow-right"
-						icon-pack="icon"
-						aria-next-label="Next page"
-						aria-previous-label="Previous page"
-						aria-page-label="Page"
-						aria-current-label="Current page" />
+						:files="files"
+						:total="count">
+						<template v-slot:pagination>
+							<b-pagination
+								v-if="count > perPage"
+								:total="count"
+								:per-page="perPage"
+								:current.sync="current"
+								range-before="2"
+								range-after="2"
+								class="pagination-slot"
+								icon-prev="icon-interface-arrow-left"
+								icon-next="icon-interface-arrow-right"
+								icon-pack="icon"
+								aria-next-label="Next page"
+								aria-previous-label="Previous page"
+								aria-page-label="Page"
+								aria-current-label="Current page" />
+						</template>
+					</Grid>
 				</div>
 			</div>
 		</div>
diff --git a/src/site/pages/dashboard/albums/index.vue b/src/site/pages/dashboard/albums/index.vue
index 2a54ab8..a010254 100644
--- a/src/site/pages/dashboard/albums/index.vue
+++ b/src/site/pages/dashboard/albums/index.vue
@@ -18,7 +18,8 @@
 									@keyup.enter.native="createAlbum" />
 								<p class="control">
 									<button outlined
-										class="button is-primary"
+										class="button is-black"
+										:disabled="isCreatingAlbum"
 										@click="createAlbum">Create album</button>
 								</p>
 							</b-field>
@@ -37,7 +38,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import { mapState, mapActions } from 'vuex';
 import Sidebar from '~/components/sidebar/Sidebar.vue';
 import AlbumEntry from '~/components/album/AlbumEntry.vue';
 
@@ -51,7 +52,8 @@ export default {
 	}],
 	data() {
 		return {
-			newAlbumName: null
+			newAlbumName: null,
+			isCreatingAlbum: false
 		};
 	},
 	computed: mapState(['config', 'albums']),
@@ -59,13 +61,23 @@ export default {
 		return { title: 'Uploads' };
 	},
 	methods: {
+		...mapActions({
+			'alert': 'alert/set'
+		}),
 		async createAlbum() {
 			if (!this.newAlbumName || this.newAlbumName === '') return;
-			const response = await this.$axios.$post(`album/new`,
-				{ name: this.newAlbumName });
-			this.newAlbumName = null;
-			this.$buefy.toast.open(response.message);
-			this.getAlbums();
+
+			this.isCreatingAlbum = true;
+			try {
+				const response = await this.$store.dispatch('albums/createAlbum', this.newAlbumName);
+
+				this.alert({ text: response.message, error: false });
+			} catch (e) {
+				this.alert({ text: e.message, error: true });
+			} finally {
+				this.isCreatingAlbum = false;
+				this.newAlbumName = null;
+			}
 		}
 	}
 };