Merge branch 'dev'

2 files changed, 238 insertions, 0 deletions

diff --git a/src/site/pages/dashboard/albums/_id.vue b/src/site/pages/dashboard/albums/_id.vue
new file mode 100644
index 0000000..cf27a15
--- /dev/null
+++ b/src/site/pages/dashboard/albums/_id.vue
@@ -0,0 +1,128 @@
+<style lang="scss" scoped>
+	.albumsModal .columns .column { padding: .25rem; }
+</style>
+
+<template>
+	<section class="section is-fullheight dashboard">
+		<div class="container">
+			<div class="columns">
+				<div class="column is-narrow">
+					<Sidebar />
+				</div>
+				<div class="column">
+					<nav class="level">
+						<div class="level-left">
+							<div class="level-item">
+								<h1 class="title is-3">
+									{{ images.albumName }}
+								</h1>
+							</div>
+							<div class="level-item">
+								<h2 class="subtitle is-5">
+									({{ totalFiles }} files)
+								</h2>
+							</div>
+						</div>
+						<div class="level-right">
+							<div class="level-item">
+								<Search :hidden-hints="['album']" />
+							</div>
+						</div>
+					</nav>
+
+					<hr>
+
+					<Grid
+						v-if="
+							totalFiles"
+						:files="images.files"
+						:total="totalFiles">
+						<template v-slot:pagination>
+							<b-pagination
+								v-if="shouldPaginate"
+								:total="totalFiles"
+								:per-page="limit"
+								: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>
+	</section>
+</template>
+
+<script>
+import { mapState, mapGetters, mapActions } from 'vuex';
+
+import Sidebar from '~/components/sidebar/Sidebar.vue';
+import Grid from '~/components/grid/Grid.vue';
+import Search from '~/components/search/Search.vue';
+
+export default {
+	components: {
+		Sidebar,
+		Grid,
+		Search
+	},
+	middleware: ['auth', ({ route, store }) => {
+		store.commit('images/resetState');
+		store.dispatch('images/fetchByAlbumId', { id: route.params.id });
+	}],
+	data() {
+		return {
+			current: 1
+		};
+	},
+	computed: {
+		...mapGetters({
+			totalFiles: 'images/getTotalFiles',
+			shouldPaginate: 'images/shouldPaginate',
+			limit: 'images/getLimit'
+		}),
+		...mapState(['images']),
+		id() {
+			return this.$route.params.id;
+		}
+	},
+	metaInfo() {
+		return { title: 'Album' };
+	},
+	watch: {
+		current: 'fetchPaginate'
+	},
+	methods: {
+		...mapActions({
+			fetch: 'images/fetchByAlbumId'
+		}),
+		fetchPaginate() {
+			this.fetch({ id: this.id, page: this.current });
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+	div.grid {
+		margin-bottom: 1rem;
+	}
+
+	.pagination-slot {
+		padding: 1rem 0;
+	}
+</style>
+
+<style lang="scss">
+	.pagination-slot > .pagination-previous, .pagination-slot > .pagination-next {
+		display: none !important;
+	}
+</style>
diff --git a/src/site/pages/dashboard/albums/index.vue b/src/site/pages/dashboard/albums/index.vue
new file mode 100644
index 0000000..d2b424b
--- /dev/null
+++ b/src/site/pages/dashboard/albums/index.vue
@@ -0,0 +1,110 @@
+<template>
+	<section class="hero is-fullheight dashboard">
+		<div class="hero-body">
+			<div class="container">
+				<div class="columns">
+					<div class="column is-narrow">
+						<Sidebar />
+					</div>
+					<div class="column">
+						<h2 class="subtitle">
+							Manage your albums
+						</h2>
+						<hr>
+
+						<div class="search-container">
+							<b-field>
+								<b-input
+									v-model="newAlbumName"
+									class="chibisafe-input"
+									placeholder="Album name..."
+									type="text"
+									@keyup.enter.native="createAlbum" />
+								<p class="control">
+									<button
+										outlined
+										class="button is-black"
+										:disabled="isCreatingAlbum"
+										@click="createAlbum">
+										Create album
+									</button>
+								</p>
+							</b-field>
+						</div>
+
+						<div class="view-container">
+							<AlbumEntry
+								v-for="album in albums.list"
+								:key="album.id"
+								:album="album" />
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</section>
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex';
+import Sidebar from '~/components/sidebar/Sidebar.vue';
+import AlbumEntry from '~/components/album/AlbumEntry.vue';
+
+export default {
+	components: {
+		Sidebar,
+		AlbumEntry
+	},
+	middleware: ['auth', ({ store }) => {
+		try {
+			store.dispatch('albums/fetch');
+		} catch (e) {
+			this.alert({ text: e.message, error: true });
+		}
+	}],
+	data() {
+		return {
+			newAlbumName: null,
+			isCreatingAlbum: false
+		};
+	},
+	computed: mapState(['config', 'albums']),
+	metaInfo() {
+		return { title: 'Uploads' };
+	},
+	methods: {
+		...mapActions({
+			alert: 'alert/set'
+		}),
+		async createAlbum() {
+			if (!this.newAlbumName || this.newAlbumName === '') return;
+
+			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;
+			}
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+	@import '~/assets/styles/_colors.scss';
+	div.view-container {
+		padding: 2rem;
+	}
+
+	div.search-container {
+		padding: 1rem 2rem;
+		background-color: $base-2;
+	}
+
+	div.column > h2.subtitle { padding-top: 1px; }
+</style>