From 048e5d9325536e04cb99bd8690d94b32516fd8dd Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Mon, 29 Jun 2020 16:03:08 +0300
Subject: feat: add logout link if logged in

---
 src/site/components/navbar/Navbar.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

(limited to 'src/site/components')

diff --git a/src/site/components/navbar/Navbar.vue b/src/site/components/navbar/Navbar.vue
index 0b98af0..5499120 100644
--- a/src/site/components/navbar/Navbar.vue
+++ b/src/site/components/navbar/Navbar.vue
@@ -45,6 +45,11 @@
 						exact>
 						Account
 					</router-link>
+					<a
+						class="navbar-item"
+						@click="logOut">
+						Logout
+					</a>
 				</template>
 				<template v-else>
 					<router-link
@@ -79,7 +84,8 @@ export default {
 	},
 	methods: {
 		logOut() {
-			this.$emit('logout');
+			this.$store.dispatch('logout');
+			this.$router.replace('/login');
 		}
 	}
 };
-- 
cgit v1.2.3


From 0a50ef771eb870f18b0cd08f579dba1017d73858 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Mon, 29 Jun 2020 17:01:38 +0300
Subject: fix: change navbar to buefy navbar for mobile support

---
 src/site/components/navbar/Navbar.vue | 45 ++++++++++++++++++-----------------
 1 file changed, 23 insertions(+), 22 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/navbar/Navbar.vue b/src/site/components/navbar/Navbar.vue
index 5499120..528ed93 100644
--- a/src/site/components/navbar/Navbar.vue
+++ b/src/site/components/navbar/Navbar.vue
@@ -1,66 +1,67 @@
 <template>
-	<nav :class="{ isWhite }"
-		class="navbar is-transparent">
-		<div class="navbar-brand">
-			<a role="button"
-				class="navbar-burger burger"
-				aria-label="menu"
-				aria-expanded="false"
-				data-target="navbarBasicExample">
-				<span aria-hidden="true" />
-				<span aria-hidden="true" />
-				<span aria-hidden="true" />
-			</a>
-		</div>
-		<div class="navbar-menu">
-			<div class="navbar-end">
+	<b-navbar :class="{ isWhite }" 
+		transparent>
+		<template slot="end">
+			<b-navbar-item tag="div">
 				<router-link
 					to="/"
 					class="navbar-item no-active"
 					exact>
 					Home
 				</router-link>
+			</b-navbar-item>
+			<b-navbar-item tag="div">
 				<router-link
 					to="/"
 					class="navbar-item no-active"
 					exact>
 					Docs
 				</router-link>
-				<template v-if="loggedIn">
+			</b-navbar-item>
+			<template v-if="loggedIn">
+				<b-navbar-item tag="div">
 					<router-link
 						to="/dashboard"
 						class="navbar-item no-active"
 						exact>
 						Uploads
 					</router-link>
+				</b-navbar-item>
+				<b-navbar-item tag="div">
 					<router-link
 						to="/dashboard/albums"
 						class="navbar-item no-active"
 						exact>
 						Albums
 					</router-link>
+				</b-navbar-item>
+				<b-navbar-item tag="div">
 					<router-link
 						to="/dashboard/account"
 						class="navbar-item no-active"
 						exact>
 						Account
 					</router-link>
+				</b-navbar-item>
+				<b-navbar-item tag="div">
 					<a
 						class="navbar-item"
 						@click="logOut">
 						Logout
 					</a>
-				</template>
-				<template v-else>
+				</b-navbar-item>
+			</template>
+			<template v-else>
+				<b-navbar-item tag="div">
 					<router-link
 						class="navbar-item"
 						to="/login">
 						Login
 					</router-link>
-				</template>
-			</div>
-		</div>
-	</nav>
+				</b-navbar-item>
+			</template>
+		</template>
+	</b-navbar>
 </template>
 
 <script>
-- 
cgit v1.2.3


From 27b0fdafb2785c4cb1b9c8f62beb8c68ff2aff56 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Mon, 29 Jun 2020 20:00:49 +0300
Subject: misc: remove patreon. sorry.

---
 src/site/components/footer/Footer.vue | 2 --
 1 file changed, 2 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/footer/Footer.vue b/src/site/components/footer/Footer.vue
index 9f51fee..49f622c 100644
--- a/src/site/components/footer/Footer.vue
+++ b/src/site/components/footer/Footer.vue
@@ -35,8 +35,6 @@
 							</div>
 							<div class="column">
 								<a href="https://github.com/weebdev/lolisafe">GitHub</a>
-								<a href="https://patreon.com/pitu">Patreon</a>
-								<a href="https://discord.gg/5g6vgwn">Discord</a>
 							</div>
 							<div class="column">
 								<a v-if="loggedIn"
-- 
cgit v1.2.3


From ac037c773ef5f15372c6999445a2efe00034c0c0 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Mon, 29 Jun 2020 20:02:47 +0300
Subject: fix: Remove hero and hero body and use sections and containers
 instead

Hero is meant to be used as a full-width banner to showcare or present somethign, not to contain the entire content of the webpage
---
 src/site/components/grid/Grid.vue     | 4 +++-
 src/site/components/navbar/Navbar.vue | 4 ++--
 2 files changed, 5 insertions(+), 3 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index da9b26c..4c4bdf4 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -167,7 +167,7 @@
 					</div>
 				</template>
 				<template slot="footer">
-					<div class="has-text-right">
+					<div class="has-text-right has-text-default">
 						{{ files.length }} files
 					</div>
 				</template>
@@ -197,6 +197,7 @@
 		</b-modal>
 	</div>
 </template>
+
 <script>
 import Waterfall from './waterfall/Waterfall.vue';
 import WaterfallItem from './waterfall/WaterfallItem.vue';
@@ -328,6 +329,7 @@ export default {
 	}
 };
 </script>
+
 <style lang="scss" scoped>
 	@import '~/assets/styles/_colors.scss';
 	.item-move {
diff --git a/src/site/components/navbar/Navbar.vue b/src/site/components/navbar/Navbar.vue
index 528ed93..47f90cb 100644
--- a/src/site/components/navbar/Navbar.vue
+++ b/src/site/components/navbar/Navbar.vue
@@ -1,5 +1,5 @@
 <template>
-	<b-navbar :class="{ isWhite }" 
+	<b-navbar :class="{ isWhite }"
 		transparent>
 		<template slot="end">
 			<b-navbar-item tag="div">
@@ -12,7 +12,7 @@
 			</b-navbar-item>
 			<b-navbar-item tag="div">
 				<router-link
-					to="/"
+					to="/faq"
 					class="navbar-item no-active"
 					exact>
 					Docs
-- 
cgit v1.2.3


From 520062508ccad88d49229e603fc4d2c0c0a118d3 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Mon, 29 Jun 2020 22:18:42 +0300
Subject: feat: backend pagination

serverLoad++;
userRamUsage--;
---
 src/site/components/grid/Grid.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 4c4bdf4..15ff5fd 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -17,7 +17,8 @@
 		</div>
 
 		<template v-if="!showList">
-			<Waterfall :gutterWidth="10"
+			<Waterfall v-if="showWaterfall"
+				:gutterWidth="10"
 				:gutterHeight="4">
 				<!--
 					TODO: Implement search based on originalName, albumName and tags
@@ -32,7 +33,6 @@
 				<!-- TODO: Implement pagination -->
 
 				<WaterfallItem v-for="(item, index) in gridFiles"
-					v-if="showWaterfall"
 					:key="index"
 					:width="width"
 					move-class="item-move">
-- 
cgit v1.2.3


From 8416dc81a34b80de0ac9a4d0be923466bcffdec4 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Wed, 1 Jul 2020 20:15:08 +0300
Subject: fix: use file id instead of index and remove load more button

---
 src/site/components/grid/Grid.vue | 14 ++------------
 1 file changed, 2 insertions(+), 12 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 15ff5fd..b6615be 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -33,7 +33,7 @@
 				<!-- TODO: Implement pagination -->
 
 				<WaterfallItem v-for="(item, index) in gridFiles"
-					:key="index"
+					:key="item.id"
 					:width="width"
 					move-class="item-move">
 					<template v-if="isPublic">
@@ -93,10 +93,6 @@
 					</template>
 				</WaterfallItem>
 			</Waterfall>
-			<button
-				v-if="moreFiles"
-				class="button is-primary"
-				@click="loadMoreFilesWaterfall">Load more</button>
 		</template>
 		<div v-else>
 			<b-table
@@ -254,16 +250,10 @@ export default {
 			return require('@/assets/images/blank.png');
 		},
 		gridFiles() {
-			return this.files.slice(this.filesOffsetWaterfall, this.filesOffsetEndWaterfall);
+			return this.files;
 		},
-		moreFiles() {
-			return this.files.length > this.filesOffsetEndWaterfall;
-		}
 	},
 	methods: {
-		loadMoreFilesWaterfall() {
-			this.filesOffsetEndWaterfall = this.filesOffsetEndWaterfall + this.filesPerPageWaterfall;
-		},
 		async search() {
 			const data = await this.$search.do(this.searchTerm, [
 				'name',
-- 
cgit v1.2.3


From 6688587eb6bdf118687c630378d40e36a3700a52 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Thu, 2 Jul 2020 02:48:21 +0300
Subject: feat: move toolbar into a level and add slot for pagination on grid

---
 src/site/components/grid/Grid.vue | 57 ++++++++++++++++++++-------------------
 1 file changed, 30 insertions(+), 27 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index b6615be..279472c 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -1,37 +1,40 @@
 <template>
 	<div>
-		<div v-if="enableToolbar"
-			class="toolbar">
-			<div class="block">
-				<b-radio v-model="showList"
-					name="name"
-					:native-value="true">
-					List
-				</b-radio>
-				<b-radio v-model="showList"
-					name="name"
-					:native-value="false">
-					Grid
-				</b-radio>
+		<nav class="level">
+			<div class="level-left">
+				<div class="level-item">
+					<slot name="pagination" />
+				</div>
 			</div>
-		</div>
+			<div v-if="enableToolbar"
+				class="level-right toolbar">
+				<div class="level-item">
+					<div class="block">
+						<b-radio v-model="showList"
+							name="name"
+							:native-value="true">
+							List
+						</b-radio>
+						<b-radio v-model="showList"
+							name="name"
+							:native-value="false">
+							Grid
+						</b-radio>
+					</div>
+				</div>
+			</div>
+		</nav>
 
 		<template v-if="!showList">
 			<Waterfall v-if="showWaterfall"
 				:gutterWidth="10"
 				:gutterHeight="4">
-				<!--
-					TODO: Implement search based on originalName, albumName and tags
-					<input v-if="enableSearch"
-						v-model="searchTerm"
-						type="text"
-						placeholder="Search..."
-						@input="search()"
-						@keyup.enter="search()">
-				-->
-
-				<!-- TODO: Implement pagination -->
-
+				<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"
@@ -289,7 +292,7 @@ export default {
 		isAlbumSelected(id) {
 			if (!this.showingModalForFile) return;
 			const found = this.showingModalForFile.albums.find(el => el.id === id);
-			return found ? found.id ? true : false : false;
+			return found && found.id ? true : false;
 		},
 		async openAlbumModal(file) {
 			this.showingModalForFile = file;
-- 
cgit v1.2.3


From 720ffaf0083564c85a07d66a6d303f34706add41 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Thu, 2 Jul 2020 02:50:55 +0300
Subject: feat: start refactoring the code to actually use vuex

This includes creating multiple stores as needed for components and removing all complex states from components (since all those states should be stored in vuex)
---
 src/site/components/navbar/Navbar.vue | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/navbar/Navbar.vue b/src/site/components/navbar/Navbar.vue
index 47f90cb..aa4a672 100644
--- a/src/site/components/navbar/Navbar.vue
+++ b/src/site/components/navbar/Navbar.vue
@@ -65,6 +65,8 @@
 </template>
 
 <script>
+import { mapState, mapGetters } from 'vuex';
+
 export default {
 	props: {
 		isWhite: {
@@ -76,12 +78,8 @@ export default {
 		return { hamburger: false };
 	},
 	computed: {
-		loggedIn() {
-			return this.$store.state.loggedIn;
-		},
-		config() {
-			return this.$store.state.config;
-		}
+		...mapGetters({ loggedIn: 'auth/isLoggedIn' }),
+		...mapState(['config'])
 	},
 	methods: {
 		logOut() {
-- 
cgit v1.2.3


From c2dbbe6396540ee9d76991a00f5028b49d221d0c Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Thu, 2 Jul 2020 23:42:02 +0300
Subject: feat: refactor account to use vuex, fix small presentational
 components

---
 src/site/components/footer/Footer.vue        | 12 +++++-----
 src/site/components/grid/Grid.vue            |  8 ++++---
 src/site/components/loading/BulmaLoading.vue | 33 ++++++++++++++++++++++++++++
 src/site/components/navbar/Navbar.vue        |  4 ++--
 src/site/components/sidebar/Sidebar.vue      | 15 ++++++-------
 5 files changed, 53 insertions(+), 19 deletions(-)
 create mode 100644 src/site/components/loading/BulmaLoading.vue

(limited to 'src/site/components')

diff --git a/src/site/components/footer/Footer.vue b/src/site/components/footer/Footer.vue
index 49f622c..44e34f4 100644
--- a/src/site/components/footer/Footer.vue
+++ b/src/site/components/footer/Footer.vue
@@ -49,15 +49,15 @@
 	</footer>
 </template>
 <script>
+import { mapState, mapGetters } from 'vuex';
 import { saveAs } from 'file-saver';
+
 export default {
 	computed: {
-		loggedIn() {
-			return this.$store.state.loggedIn;
-		},
-		version() {
-			return this.$store.state.config.version;
-		}
+		...mapGetters({ loggedIn: 'auth/isLoggedIn' }),
+		...mapState({
+			version: state => state.config.version
+		})
 	},
 	methods: {
 		createShareXThing() {
diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 279472c..a06eabf 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -198,6 +198,8 @@
 </template>
 
 <script>
+import { mapState } from 'vuex';
+
 import Waterfall from './waterfall/Waterfall.vue';
 import WaterfallItem from './waterfall/WaterfallItem.vue';
 
@@ -246,9 +248,9 @@ export default {
 		};
 	},
 	computed: {
-		user() {
-			return this.$store.state.user;
-		},
+		...mapState({
+			user: state => state.auth.user
+		}),
 		blank() {
 			return require('@/assets/images/blank.png');
 		},
diff --git a/src/site/components/loading/BulmaLoading.vue b/src/site/components/loading/BulmaLoading.vue
new file mode 100644
index 0000000..37cc5a5
--- /dev/null
+++ b/src/site/components/loading/BulmaLoading.vue
@@ -0,0 +1,33 @@
+<template>
+	<div class="loader-wrapper">
+		<div class="loader is-loading" />
+	</div>
+</template>
+
+<style lang="scss" scoped>
+	.loader-wrapper {
+		position: absolute;
+		top: 0;
+		left: 0;
+		height: 100%;
+		width: 100%;
+		background: #fff;
+		opacity: 0;
+		z-index: -1;
+		transition: opacity .3s;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		border-radius: 6px;
+
+			.loader {
+				height: 80px;
+				width: 80px;
+			}
+
+		&.is-active {
+			opacity: 1;
+			z-index: 1;
+		}
+	}
+</style>
diff --git a/src/site/components/navbar/Navbar.vue b/src/site/components/navbar/Navbar.vue
index aa4a672..7fb2f22 100644
--- a/src/site/components/navbar/Navbar.vue
+++ b/src/site/components/navbar/Navbar.vue
@@ -82,8 +82,8 @@ export default {
 		...mapState(['config'])
 	},
 	methods: {
-		logOut() {
-			this.$store.dispatch('logout');
+		async logOut() {
+			await this.$store.dispatch('auth/logout');
 			this.$router.replace('/login');
 		}
 	}
diff --git a/src/site/components/sidebar/Sidebar.vue b/src/site/components/sidebar/Sidebar.vue
index a2ad3f4..3cb8b43 100644
--- a/src/site/components/sidebar/Sidebar.vue
+++ b/src/site/components/sidebar/Sidebar.vue
@@ -6,13 +6,11 @@
 		<router-link to="/dashboard/albums">
 			<i class="icon-interface-window" />Albums
 		</router-link>
-		<!--
 		<router-link to="/dashboard/tags">
 			<i class="icon-ecommerce-tag-c" />Tags
 		</router-link>
-		-->
 		<router-link to="/dashboard/account">
-			<i class="icon-ecommerce-tag-c" />Account
+			<i class="icon-user-alt" />Account
 		</router-link>
 		<template v-if="user && user.isAdmin">
 			<router-link to="/dashboard/admin/users">
@@ -28,13 +26,14 @@
 	</div>
 </template>
 <script>
+import { mapState } from 'vuex';
+
 export default {
-	computed: {
-		user() {
-			return this.$store.state.user;
-		}
-	}
+	computed: mapState({
+		user: state => state.auth.user
+	})
 };
+
 </script>
 <style lang="scss" scoped>
 	@import '~/assets/styles/_colors.scss';
-- 
cgit v1.2.3


From 7581d13d1cdbd190009dea11549669cfa5cc00ad Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Fri, 3 Jul 2020 00:35:09 +0300
Subject: feat: separate album view into multiple components and use vuex

---
 src/site/components/album/AlbumDetails.vue | 177 ++++++++++++++++++++++++++++
 src/site/components/album/AlbumEntry.vue   | 179 +++++++++++++++++++++++++++++
 2 files changed, 356 insertions(+)
 create mode 100644 src/site/components/album/AlbumDetails.vue
 create mode 100644 src/site/components/album/AlbumEntry.vue

(limited to 'src/site/components')

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>
diff --git a/src/site/components/album/AlbumEntry.vue b/src/site/components/album/AlbumEntry.vue
new file mode 100644
index 0000000..4d23d6c
--- /dev/null
+++ b/src/site/components/album/AlbumEntry.vue
@@ -0,0 +1,179 @@
+<template>
+	<div class="album">
+		<div class="arrow-container"
+			@click="toggleDetails(album)">
+			<i :class="{ active: isExpanded }"
+				class="icon-arrow" />
+		</div>
+		<div class="thumb">
+			<figure class="image is-64x64 thumb">
+				<img src="~/assets/images/blank_darker.png">
+			</figure>
+		</div>
+		<div class="info">
+			<h4>
+				<router-link :to="`/dashboard/albums/${album.id}`">{{ album.name }}</router-link>
+			</h4>
+			<span>Updated <timeago :since="album.editedAt" /></span>
+			<span>{{ album.fileCount || 0 }} files</span>
+		</div>
+		<div class="latest is-hidden-mobile">
+			<template v-if="album.fileCount > 0">
+				<div v-for="file of album.files"
+					:key="file.id"
+					class="thumb">
+					<figure class="image is-64x64">
+						<a :href="file.url"
+							target="_blank">
+							<img :src="file.thumbSquare">
+						</a>
+					</figure>
+				</div>
+				<div v-if="album.fileCount > 5"
+					class="thumb more no-background">
+					<router-link :to="`/dashboard/albums/${album.id}`">{{ album.fileCount - 5 }}+ more</router-link>
+				</div>
+			</template>
+			<template v-else>
+				<span class="no-files">Nothing to show here</span>
+			</template>
+		</div>
+
+		<AlbumDetails v-if="isExpanded"
+			:details="getDetails"
+			:albumId="album.id" />
+	</div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import AlbumDetails from '~/components/album/AlbumDetails.vue';
+
+export default {
+	components: {
+		AlbumDetails
+	},
+	props: {
+		album: {
+			type: Object,
+			default: () => ({})
+		}
+	},
+	computed: {
+		...mapGetters({
+			isExpandedGetter: 'albums/isExpanded',
+			getDetailsGetter: 'albums/getDetails'
+		}),
+		isExpanded() {
+			return this.isExpandedGetter(this.album.id);
+		},
+		getDetails() {
+			return this.getDetailsGetter(this.album.id);
+		}
+	},
+	methods: {
+		async toggleDetails(album) {
+			if (!this.isExpanded) {
+				await this.$store.dispatch('albums/fetchDetails', album.id);
+			}
+			this.$store.commit('albums/toggleExpandedState', album.id);
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+	@import '~/assets/styles/_colors.scss';
+
+	div.album {
+		display: flex;
+		flex-wrap: wrap;
+		margin-bottom: 10px;
+
+		div.arrow-container {
+			width: 2em;
+			height: 64px;
+			position: relative;
+			cursor: pointer;
+
+			i {
+				border: 2px solid $defaultTextColor;
+				border-right: 0;
+				border-top: 0;
+				display: block;
+				height: 1em;
+				position: absolute;
+				transform: rotate(-135deg);
+				transform-origin: center;
+				width: 1em;
+				z-index: 4;
+				top: 22px;
+
+				-webkit-transition: transform 0.1s linear;
+				-moz-transition: transform 0.1s linear;
+				-ms-transition: transform 0.1s linear;
+				-o-transition: transform 0.1s linear;
+				transition: transform 0.1s linear;
+
+				&.active {
+					transform: rotate(-45deg);
+				}
+			}
+		}
+
+		div.thumb {
+			width: 64px;
+			height: 64px;
+			-webkit-box-shadow: $boxShadowLight;
+					box-shadow: $boxShadowLight;
+		}
+
+		div.info {
+			margin-left: 15px;
+			text-align: left;
+			h4 {
+				font-size: 1.5rem;
+				a {
+					color: $defaultTextColor;
+					font-weight: 400;
+					&:hover { text-decoration: underline; }
+				}
+			}
+			span { display: block; }
+			span:nth-child(3) {
+				font-size: 0.9rem;
+			}
+		}
+
+		div.latest {
+			flex-grow: 1;
+			justify-content: flex-end;
+			display: flex;
+			margin-left: 15px;
+
+			span.no-files {
+				font-size: 1.5em;
+				color: #b1b1b1;
+				padding-top: 17px;
+			}
+
+			div.more {
+				width: 64px;
+				height: 64px;
+				background: white;
+				display: flex;
+				align-items: center;
+				padding: 10px;
+				text-align: center;
+				a {
+					line-height: 1rem;
+					color: $defaultTextColor;
+					&:hover { text-decoration: underline; }
+				}
+			}
+		}
+	}
+
+	div.no-background { background: none !important; }
+</style>
+
-- 
cgit v1.2.3


From 92be4504ccb8f6d918013e5c33870858cd22376a Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Sat, 4 Jul 2020 03:26:35 +0300
Subject: feat: refactor most of the album components to use store for
 presentation and actions

---
 src/site/components/album/AlbumDetails.vue | 85 +++++++++++++++++-------------
 src/site/components/album/AlbumEntry.vue   | 11 ++--
 src/site/components/grid/Grid.vue          | 12 ++---
 3 files changed, 58 insertions(+), 50 deletions(-)

(limited to 'src/site/components')

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
-- 
cgit v1.2.3


From 39ed9d336edb350bca5c2a7f35a60ff9edc527bd Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Sat, 4 Jul 2020 03:52:40 +0300
Subject: feat: make the delete link button more reactive (loading state if
 deletion pending)

---
 src/site/components/album/AlbumDetails.vue | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/album/AlbumDetails.vue b/src/site/components/album/AlbumDetails.vue
index b646cb0..f117f2f 100644
--- a/src/site/components/album/AlbumDetails.vue
+++ b/src/site/components/album/AlbumDetails.vue
@@ -30,7 +30,9 @@
 
 				<b-table-column field="enabled"
 					numeric>
-					<button class="button is-danger"
+					<button :class="{ 'is-loading': isDeleting(props.row.identifier) }"
+						class="button is-danger"
+						:disabled="isDeleting(props.row.identifier)"
 						@click="promptDeleteAlbumLink(albumId, props.row.identifier)">Delete link</button>
 				</b-table-column>
 			</template>
@@ -86,7 +88,8 @@ export default {
 	},
 	data() {
 		return {
-			isCreatingLink: false
+			isCreatingLink: false,
+			isDeletingLinks: [],
 		}
 	},
 	computed: mapState(['config']),
@@ -109,7 +112,7 @@ export default {
 			this.$buefy.dialog.confirm({
 				type: 'is-danger',
 				message: 'Are you sure you want to delete this album link?',
-				onConfirm: () => this.deleteAlbumLink({ albumId, identifier })
+				onConfirm: () => this.deleteAlbumLink(albumId, identifier)
 			});
 		},
 		async deleteAlbum(id) {
@@ -121,14 +124,17 @@ export default {
 				this.alert({ text: e.message, error: true });
 			} 
 		},
-		async deleteAlbumLink(id) {
+		async deleteAlbumLink(albumId, identifier) {
+			this.isDeletingLinks.push(identifier);
 			try {
-				const response = await this.deleteAlbumLinkAction(id);
+				const response = await this.deleteAlbumLinkAction({ albumId, identifier });
 
 				this.alert({ text: response.message, error: false });
 			} catch (e) {
 				this.alert({ text: e.message, error: true });
-			} 
+			} finally {
+				this.isDeletingLinks = this.isDeletingLinks.filter(e => e !== identifier);
+			}
 		},
 		async createLink(albumId) {
 			this.isCreatingLink = true;
@@ -150,6 +156,9 @@ export default {
 			} catch (e) {
 				this.alert({ text: e.message, error: true });
 			} 
+		},
+		isDeleting(identifier) {
+			return this.isDeletingLinks.indexOf(identifier) > -1;
 		}
 	}
 };
-- 
cgit v1.2.3


From 1e1f3fbb27976a34f53a4e8d250da34dad4e6c20 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Sat, 4 Jul 2020 23:18:51 +0300
Subject: feat: experimental videos in grid

---
 src/site/components/grid/Grid.vue                  | 32 +++++++++++++------
 src/site/components/grid/waterfall/Waterfall.vue   |  2 +-
 .../components/grid/waterfall/WaterfallItem.vue    | 37 +++++++++++++++++-----
 3 files changed, 52 insertions(+), 19 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 956dd28..0fff307 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -32,6 +32,7 @@
 				<WaterfallItem v-for="(item, index) in gridFiles"
 					:key="item.id"
 					:width="width"
+					:video="!!item.preview"
 					move-class="item-move">
 					<template v-if="isPublic">
 						<a :href="`${item.url}`"
@@ -42,7 +43,11 @@
 						</a>
 					</template>
 					<template v-else>
-						<img :src="item.thumb ? item.thumb : blank">
+						<img v-if="!item.preview" :class="{'hidden': item.preview}" 
+							:src="item.thumb ? item.thumb : blank">
+						<video v-if="item.preview" autoplay loop>
+  							<source :src="item.preview" type="video/mp4" />
+						</video>
 						<span v-if="!item.thumb && item.name"
 							class="extension">{{ item.name.split('.').pop() }}</span>
 						<div v-if="!isPublic"
@@ -56,21 +61,20 @@
 									<i class="icon-web-code" />
 								</a>
 							</b-tooltip>
-							<b-tooltip label="Albums"
+							<b-tooltip label="Tags"
 								position="is-top">
 								<a class="btn"
-									@click="openAlbumModal(item)">
-									<i class="icon-interface-window" />
+									@click="manageTags(item)">
+									<i class="icon-ecommerce-tag-c" />
 								</a>
 							</b-tooltip>
-							<!--
-							<b-tooltip label="Tags"
+							<b-tooltip label="Albums"
 								position="is-top">
-								<a @click="manageTags(item)">
-									<i class="icon-ecommerce-tag-c" />
+								<a class="btn"
+									@click="openAlbumModal(item)">
+									<i class="icon-interface-window" />
 								</a>
-							</b-tooltip>
-							-->
+							</b-tooltip>							
 							<b-tooltip label="Delete"
 								position="is-top">
 								<a class="btn"
@@ -318,6 +322,9 @@ export default {
 			const response = await this.$axios.$get(`albums/dropdown`);
 			this.albums = response.albums;
 			this.$forceUpdate();
+		},
+		mouseOverTest() {
+			console.log('aaaaaa');
 		}
 	}
 };
@@ -385,6 +392,7 @@ export default {
 			&:nth-child(1), &:nth-child(3) {
 				justify-content: flex-end;
 			}
+
 			a {
 				width: 30px;
 				height: 30px;
@@ -429,6 +437,10 @@ export default {
 			text-align: left;
 		}
 	}
+
+	img.hidden {
+		display: none;
+	}
 </style>
 
 <style lang="scss">
diff --git a/src/site/components/grid/waterfall/Waterfall.vue b/src/site/components/grid/waterfall/Waterfall.vue
index 8631ea5..af1bd72 100644
--- a/src/site/components/grid/waterfall/Waterfall.vue
+++ b/src/site/components/grid/waterfall/Waterfall.vue
@@ -170,7 +170,7 @@ export default {
 					return;
 				}
 				child.el.style.top = `${offsetArr[position]}px`;
-				offsetArr[position] += (child.height + this.gutterHeight);
+				offsetArr[position] += child.height + this.gutterHeight;
 				this.$el.style.height = `${Math.max.apply(Math, offsetArr)}px`;
 			});
 			this.$emit('rendered', this);
diff --git a/src/site/components/grid/waterfall/WaterfallItem.vue b/src/site/components/grid/waterfall/WaterfallItem.vue
index a02ea1f..7c4d814 100644
--- a/src/site/components/grid/waterfall/WaterfallItem.vue
+++ b/src/site/components/grid/waterfall/WaterfallItem.vue
@@ -1,13 +1,15 @@
-<style>
+<style scoped>
 	.waterfall-item {
 		position: absolute;
 	}
 </style>
+
 <template>
 	<div class="waterfall-item">
 		<slot />
 	</div>
 </template>
+
 <script>
 import imagesLoaded from 'imagesloaded';
 export default {
@@ -20,6 +22,10 @@ export default {
 		width: {
 			type: Number,
 			default: 150
+		},
+		video: {
+			type: Boolean,
+			default: false
 		}
 	},
 	data() {
@@ -35,13 +41,28 @@ export default {
 		this.$el.style.display = 'none';
 		this.$el.style.width = `${this.width}px`;
 		this.emit();
-		imagesLoaded(this.$el, () => {
-			this.$el.style.left = '-9999px';
-			this.$el.style.top = '-9999px';
-			this.$el.style.display = 'block';
-			this.height = this.$el.offsetHeight;
-			this.itemWidth = this.$el.offsetWidth;
-		});
+		if (this.video) {
+			const videoEl = this.$slots.default.find(e => e.tag?.toLowerCase() === 'video');
+			const el = videoEl.elm;
+			console.log(videoEl);
+			console.log(el);
+			el.onloadeddata = () => {
+				console.log('loaded');
+				this.$el.style.left = '-9999px';
+				this.$el.style.top = '-9999px';
+				this.$el.style.display = 'block';
+				this.height = el.offsetHeight + 5;
+				this.itemWidth = el.offsetWidth;
+			}
+		} else {
+			imagesLoaded(this.$el, () => {
+				this.$el.style.left = '-9999px';
+				this.$el.style.top = '-9999px';
+				this.$el.style.display = 'block';
+				this.height = this.$el.offsetHeight;
+				this.itemWidth = this.$el.offsetWidth;
+			});
+		}
 	},
 	methods: {
 		emit() {
-- 
cgit v1.2.3


From 766e74cc51138b32482f65f0f2647eb9d943103e Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Sun, 5 Jul 2020 04:18:08 +0300
Subject: feat: add video preview on hover to dashboard and apply new linter
 rules to some of the files

---
 src/site/components/footer/Footer.vue              |  62 ++-
 src/site/components/grid/Grid.vue                  | 435 +++++++++++----------
 src/site/components/grid/waterfall/Waterfall.vue   |  56 +--
 .../components/grid/waterfall/WaterfallItem.vue    |  29 +-
 4 files changed, 313 insertions(+), 269 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/footer/Footer.vue b/src/site/components/footer/Footer.vue
index 44e34f4..19d18f2 100644
--- a/src/site/components/footer/Footer.vue
+++ b/src/site/components/footer/Footer.vue
@@ -1,12 +1,18 @@
 <template>
+	<!-- eslint-disable max-len -->
 	<footer>
-		<svg viewBox="0 0 1920 250"
+		<svg
+			viewBox="0 0 1920 250"
 			class="waves">
-			<path d="M1920 250H0V0s126.707 78.536 349.975 80.05c177.852 1.203 362.805-63.874 553.803-63.874 290.517 0 383.458 57.712 603.992 61.408 220.527 3.696 278.059-61.408 412.23-17.239"
+
+			<path
+				d="M1920 250H0V0s126.707 78.536 349.975 80.05c177.852 1.203 362.805-63.874 553.803-63.874 290.517 0 383.458 57.712 603.992 61.408 220.527 3.696 278.059-61.408 412.23-17.239"
 				class="wave-1" />
-			<path d="M1920 144s-467.917 116.857-1027.243-17.294C369.986 1.322 0 45.578 0 45.578V250h1920V144z"
+			<path
+				d="M1920 144s-467.917 116.857-1027.243-17.294C369.986 1.322 0 45.578 0 45.578V250h1920V144z"
 				class="wave-2" />
-			<path d="M0 195.553s208.547-75.581 701.325-20.768c376.707 41.908 520.834-67.962 722.545-67.962 222.926 0 311.553 83.523 496.129 86.394V250H0v-54.447z"
+			<path
+				d="M0 195.553s208.547-75.581 701.325-20.768c376.707 41.908 520.834-67.962 722.545-67.962 222.926 0 311.553 83.523 496.129 86.394V250H0v-54.447z"
 				class="wave-3" />
 		</svg>
 		<div>
@@ -15,7 +21,8 @@
 					<div class="column is-narrow">
 						<h4>lolisafe</h4>
 						<span>© 2017-2020
-							<a href="https://github.com/pitu"
+							<a
+								href="https://github.com/pitu"
 								class="no-block">Pitu</a>
 						</span><br>
 						<span>v{{ version }}</span>
@@ -24,20 +31,33 @@
 						<div class="columns is-gapless">
 							<div class="column" />
 							<div class="column">
-								<nuxt-link to="/">Home</nuxt-link>
-								<nuxt-link to="/faq">FAQ</nuxt-link>
+								<nuxt-link to="/">
+									Home
+								</nuxt-link>
+								<nuxt-link to="/faq">
+									FAQ
+								</nuxt-link>
 							</div>
 							<div class="column">
-								<nuxt-link to="/dashboard">Dashboard</nuxt-link>
-								<nuxt-link to="/dashboard">Files</nuxt-link>
-								<nuxt-link to="/dashboard/albums">Albums</nuxt-link>
-								<nuxt-link to="/dashboard/account">Account</nuxt-link>
+								<nuxt-link to="/dashboard">
+									Dashboard
+								</nuxt-link>
+								<nuxt-link to="/dashboard">
+									Files
+								</nuxt-link>
+								<nuxt-link to="/dashboard/albums">
+									Albums
+								</nuxt-link>
+								<nuxt-link to="/dashboard/account">
+									Account
+								</nuxt-link>
 							</div>
 							<div class="column">
 								<a href="https://github.com/weebdev/lolisafe">GitHub</a>
 							</div>
 							<div class="column">
-								<a v-if="loggedIn"
+								<a
+									v-if="loggedIn"
 									@click="createShareXThing">ShareX Config</a>
 								<a href="https://chrome.google.com/webstore/detail/lolisafe-uploader/enkkmplljfjppcdaancckgilmgoiofnj">Chrome Extension</a>
 							</div>
@@ -48,7 +68,10 @@
 		</div>
 	</footer>
 </template>
+
 <script>
+/* eslint-disable no-restricted-globals */
+
 import { mapState, mapGetters } from 'vuex';
 import { saveAs } from 'file-saver';
 
@@ -56,19 +79,21 @@ export default {
 	computed: {
 		...mapGetters({ loggedIn: 'auth/isLoggedIn' }),
 		...mapState({
-			version: state => state.config.version
-		})
+			version: (state) => state.config.version,
+			serviceName: (state) => state.config.serviceName,
+			token: (state) => state.auth.token,
+		}),
 	},
 	methods: {
 		createShareXThing() {
 			const sharexFile = `{
-				"Name": "${this.$store.state.config.serviceName}",
+				"Name": "${this.serviceName}",
 				"DestinationType": "ImageUploader, FileUploader",
 				"RequestType": "POST",
 				"RequestURL": "${location.origin}/api/upload",
 				"FileFormName": "files[]",
 				"Headers": {
-					"authorization": "Bearer ${this.$store.state.token}",
+					"authorization": "Bearer ${this.token}",
 					"accept": "application/vnd.lolisafe.json"
 				},
 				"ResponseType": "Text",
@@ -77,10 +102,11 @@ export default {
 			}`;
 			const sharexBlob = new Blob([sharexFile], { type: 'application/octet-binary' });
 			saveAs(sharexBlob, `${location.hostname}.sxcu`);
-		}
-	}
+		},
+	},
 };
 </script>
+
 <style lang="scss" scoped>
 	@import '~/assets/styles/_colors.scss';
 	footer {
diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 0fff307..d4fe067 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -6,18 +6,13 @@
 					<slot name="pagination" />
 				</div>
 			</div>
-			<div v-if="enableToolbar"
-				class="level-right toolbar">
+			<div v-if="enableToolbar" class="level-right toolbar">
 				<div class="level-item">
 					<div class="block">
-						<b-radio v-model="showList"
-							name="name"
-							:native-value="true">
+						<b-radio v-model="showList" name="name" :native-value="true">
 							List
 						</b-radio>
-						<b-radio v-model="showList"
-							name="name"
-							:native-value="false">
+						<b-radio v-model="showList" name="name" :native-value="false">
 							Grid
 						</b-radio>
 					</div>
@@ -26,66 +21,71 @@
 		</nav>
 
 		<template v-if="!showList">
-			<Waterfall v-if="showWaterfall"
+			<Waterfall
+				v-if="showWaterfall"
 				:gutterWidth="10"
 				:gutterHeight="4">
-				<WaterfallItem v-for="(item, index) in gridFiles"
+				<WaterfallItem
+					v-for="(item, index) in gridFiles"
 					:key="item.id"
 					:width="width"
-					:video="!!item.preview"
 					move-class="item-move">
 					<template v-if="isPublic">
-						<a :href="`${item.url}`"
-							target="_blank">
+						<a
+							:href="`${item.url}`"
+							class="preview-container"
+							target="_blank"
+							@mouseenter.self.stop.prevent="item.preview && mouseOver(item.id)"
+							@mouseleave.self.stop.prevent="item.preview && mouseOut(item.id)">
+
 							<img :src="item.thumb ? item.thumb : blank">
-							<span v-if="!item.thumb && item.name"
-								class="extension">{{ item.name.split('.').pop() }}</span>
+							<div v-if="item.preview && isHovered(item.id)" class="preview">
+								<video ref="video" class="preview" autoplay loop muted>
+									<source :src="item.preview" type="video/mp4">
+								</video>
+							</div>
+
+							<span v-if="!item.thumb && item.name" class="extension">{{
+								item.name.split('.').pop()
+							}}</span>
 						</a>
 					</template>
 					<template v-else>
-						<img v-if="!item.preview" :class="{'hidden': item.preview}" 
-							:src="item.thumb ? item.thumb : blank">
-						<video v-if="item.preview" autoplay loop>
-  							<source :src="item.preview" type="video/mp4" />
-						</video>
-						<span v-if="!item.thumb && item.name"
-							class="extension">{{ item.name.split('.').pop() }}</span>
-						<div v-if="!isPublic"
+						<img :src="item.thumb ? item.thumb : blank">
+						<div v-if="item.preview && isHovered(item.id)" class="preview">
+							<video ref="video" class="preview" autoplay loop muted>
+								<source :src="item.preview" type="video/mp4">
+							</video>
+						</div>
+
+						<span v-if="!item.thumb && item.name" class="extension">{{ item.name.split('.').pop() }}</span>
+						<div
+							v-if="!isPublic"
 							:class="{ fixed }"
-							class="actions">
-							<b-tooltip label="Link"
-								position="is-top">
-								<a :href="`${item.url}`"
-									target="_blank"
-									class="btn">
+							class="actions"
+							@mouseenter.self.stop.prevent="item.preview && mouseOver(item.id)"
+							@mouseleave.self.stop.prevent="item.preview && mouseOut(item.id)">
+							<b-tooltip label="Link" position="is-top">
+								<a :href="`${item.url}`" target="_blank" class="btn">
 									<i class="icon-web-code" />
 								</a>
 							</b-tooltip>
-							<b-tooltip label="Tags"
-								position="is-top">
-								<a class="btn"
-									@click="manageTags(item)">
+							<b-tooltip label="Tags" position="is-top">
+								<a class="btn" @click="manageTags(item)">
 									<i class="icon-ecommerce-tag-c" />
 								</a>
 							</b-tooltip>
-							<b-tooltip label="Albums"
-								position="is-top">
-								<a class="btn"
-									@click="openAlbumModal(item)">
+							<b-tooltip label="Albums" position="is-top">
+								<a class="btn" @click="openAlbumModal(item)">
 									<i class="icon-interface-window" />
 								</a>
-							</b-tooltip>							
-							<b-tooltip label="Delete"
-								position="is-top">
-								<a class="btn"
-									@click="deleteFile(item, index)">
+							</b-tooltip>
+							<b-tooltip label="Delete" position="is-top">
+								<a class="btn" @click="deleteFile(item, index)">
 									<i class="icon-editorial-trash-a-l" />
 								</a>
 							</b-tooltip>
-							<b-tooltip v-if="user && user.isAdmin"
-								label="More info"
-								position="is-top"
-								class="more">
+							<b-tooltip v-if="user && user.isAdmin" label="More info" position="is-top" class="more">
 								<nuxt-link :to="`/dashboard/admin/file/${item.id}`">
 									<i class="icon-interface-more" />
 								</nuxt-link>
@@ -96,58 +96,42 @@
 			</Waterfall>
 		</template>
 		<div v-else>
-			<b-table
-				:data="gridFiles || []"
-				:mobile-cards="true">
+			<b-table :data="gridFiles || []" :mobile-cards="true">
 				<template slot-scope="props">
 					<template v-if="!props.row.hideFromList">
-						<b-table-column field="url"
-							label="URL">
-							<a :href="props.row.url"
-								target="_blank">{{ props.row.url }}</a>
+						<b-table-column field="url" label="URL">
+							<a :href="props.row.url" target="_blank">{{ props.row.url }}</a>
 						</b-table-column>
 
-						<b-table-column field="albums"
-							label="Albums"
-							centered>
+						<b-table-column field="albums" label="Albums" centered>
 							<template v-for="(album, index) in props.row.albums">
-								<nuxt-link :key="index"
-									:to="`/dashboard/albums/${album.id}`">
+								<nuxt-link :key="index" :to="`/dashboard/albums/${album.id}`">
 									{{ album.name }}
 								</nuxt-link>
-								<template v-if="index < props.row.albums.length - 1">, </template>
+								<template v-if="index < props.row.albums.length - 1">
+									,
+								</template>
 							</template>
 
 							{{ props.row.username }}
 						</b-table-column>
 
-						<b-table-column field="uploaded"
-							label="Uploaded"
-							centered>
+						<b-table-column field="uploaded" label="Uploaded" centered>
 							<span><timeago :since="props.row.createdAt" /></span>
 						</b-table-column>
 
-						<b-table-column field="purge"
-							centered>
-							<b-tooltip label="Albums"
-								position="is-top">
-								<a class="btn"
-									@click="openAlbumModal(props.row)">
+						<b-table-column field="purge" centered>
+							<b-tooltip label="Albums" position="is-top">
+								<a class="btn" @click="openAlbumModal(props.row)">
 									<i class="icon-interface-window" />
 								</a>
 							</b-tooltip>
-							<b-tooltip label="Delete"
-								position="is-top"
-								class="is-danger">
-								<a class="is-danger"
-									@click="deleteFile(props.row)">
+							<b-tooltip label="Delete" position="is-top" class="is-danger">
+								<a class="is-danger" @click="deleteFile(props.row)">
 									<i class="icon-editorial-trash-a-l" />
 								</a>
 							</b-tooltip>
-							<b-tooltip v-if="user && user.isAdmin"
-								label="More info"
-								position="is-top"
-								class="more">
+							<b-tooltip v-if="user && user.isAdmin" label="More info" position="is-top" class="more">
 								<nuxt-link :to="`/dashboard/admin/file/${props.row.id}`">
 									<i class="icon-interface-more" />
 								</nuxt-link>
@@ -170,21 +154,23 @@
 				</template>
 			</b-table>
 		</div>
-		<b-modal :active.sync="isAlbumsModalActive"
-			:width="640"
-			scroll="keep">
+		<b-modal :active.sync="isAlbumsModalActive" :width="640" scroll="keep">
 			<div class="card albumsModal">
 				<div class="card-content">
 					<div class="content">
-						<h3 class="subtitle">Select the albums this file should be a part of</h3>
+						<h3 class="subtitle">
+							Select the albums this file should be a part of
+						</h3>
 						<hr>
+
 						<div class="albums-container">
-							<div v-for="(album, index) in albums"
-								:key="index"
-								class="album">
+							<div v-for="(album, index) in albums" :key="index" class="album">
 								<div class="field">
-									<b-checkbox :value="isAlbumSelected(album.id)"
-										@input="albumCheckboxClicked($event, album.id)">{{ album.name }}</b-checkbox>
+									<b-checkbox
+										:value="isAlbumSelected(album.id)"
+										@input="albumCheckboxClicked($event, album.id)">
+										{{ album.name }}
+									</b-checkbox>
 								</div>
 							</div>
 						</div>
@@ -204,37 +190,37 @@ import WaterfallItem from './waterfall/WaterfallItem.vue';
 export default {
 	components: {
 		Waterfall,
-		WaterfallItem
+		WaterfallItem,
 	},
 	props: {
 		files: {
 			type: Array,
-			default: () => []
+			default: () => [],
 		},
 		total: {
 			type: Number,
-			default: 0
+			default: 0,
 		},
 		fixed: {
 			type: Boolean,
-			default: false
+			default: false,
 		},
 		isPublic: {
 			type: Boolean,
-			default: false
+			default: false,
 		},
 		width: {
 			type: Number,
-			default: 150
+			default: 150,
 		},
 		enableSearch: {
 			type: Boolean,
-			default: true
+			default: true,
 		},
 		enableToolbar: {
 			type: Boolean,
-			default: true
-		}
+			default: true,
+		},
 	},
 	data() {
 		return {
@@ -242,18 +228,20 @@ export default {
 			searchTerm: null,
 			showList: false,
 			albums: [],
+			hoveredItems: [],
 			isAlbumsModalActive: false,
 			showingModalForFile: null,
 			filesOffsetWaterfall: 0,
 			filesOffsetEndWaterfall: 50,
-			filesPerPageWaterfall: 50
+			filesPerPageWaterfall: 50,
 		};
 	},
 	computed: {
 		...mapState({
-			user: state => state.auth.user
+			user: (state) => state.auth.user,
 		}),
 		blank() {
+			// eslint-disable-next-line global-require, import/no-unresolved
 			return require('@/assets/images/blank.png');
 		},
 		gridFiles() {
@@ -262,12 +250,7 @@ export default {
 	},
 	methods: {
 		async search() {
-			const data = await this.$search.do(this.searchTerm, [
-				'name',
-				'original',
-				'type',
-				'albums:name'
-			]);
+			const data = await this.$search.do(this.searchTerm, ['name', 'original', 'type', 'albums:name']);
 			console.log('> Search result data', data);
 		},
 		deleteFile(file, index) {
@@ -290,13 +273,13 @@ export default {
 						});
 					}
 					return this.$buefy.toast.open(response.message);
-				}
+				},
 			});
 		},
 		isAlbumSelected(id) {
-			if (!this.showingModalForFile) return;
-			const found = this.showingModalForFile.albums.find(el => el.id === id);
-			return found && found.id ? true : false;
+			if (!this.showingModalForFile) return false;
+			const found = this.showingModalForFile.albums.find((el) => el.id === id);
+			return !!(found && found.id);
 		},
 		async openAlbumModal(file) {
 			this.showingModalForFile = file;
@@ -311,7 +294,7 @@ export default {
 		async albumCheckboxClicked(value, id) {
 			const response = await this.$axios.$post(`file/album/${value ? 'add' : 'del'}`, {
 				albumId: id,
-				fileId: this.showingModalForFile.id
+				fileId: this.showingModalForFile.id,
 			});
 			this.$buefy.toast.open(response.message);
 
@@ -319,134 +302,166 @@ export default {
 			this.$parent.getFiles();
 		},
 		async getAlbums() {
-			const response = await this.$axios.$get(`albums/dropdown`);
+			const response = await this.$axios.$get('albums/dropdown');
 			this.albums = response.albums;
 			this.$forceUpdate();
 		},
-		mouseOverTest() {
-			console.log('aaaaaa');
-		}
-	}
+		mouseOver(id) {
+			console.log('in', id);
+			const foundIndex = this.hoveredItems.indexOf(id);
+			if (foundIndex > -1) return;
+			this.hoveredItems.push(id);
+			/// XXX: THIS IS NOT OK!
+			this.$nextTick(() => {
+				this.$refs.video.forEach((e) => e.play().catch(() => {}));
+			});
+		},
+		mouseOut(id) {
+			console.log('out', id);
+			const foundIndex = this.hoveredItems.indexOf(id);
+			if (foundIndex > -1) this.hoveredItems.splice(foundIndex, 1);
+		},
+		isHovered(id) {
+			return this.hoveredItems.includes(id);
+		},
+	},
 };
 </script>
 
 <style lang="scss" scoped>
-	@import '~/assets/styles/_colors.scss';
-	.item-move {
-		transition: all .25s cubic-bezier(.55,0,.1,1);
-	}
+@import '~/assets/styles/_colors.scss';
+.item-move {
+	transition: all 0.25s cubic-bezier(0.55, 0, 0.1, 1);
+}
 
-	div.toolbar {
-		padding: 1rem;
+div.toolbar {
+	padding: 1rem;
 
-		.block {
-			text-align: right;
-		}
+	.block {
+		text-align: right;
 	}
+}
 
-	span.extension {
-		position: absolute;
-		width: 100%;
-		height: 100%;
-		z-index: 0;
-		top: 0;
-		left: 0;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		font-size: 2rem;
-		pointer-events: none;
-		opacity: .75;
-		max-width: 150px;
-	}
+span.extension {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	z-index: 0;
+	top: 0;
+	left: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 2rem;
+	pointer-events: none;
+	opacity: 0.75;
+	max-width: 150px;
+}
 
-	div.actions {
-		opacity: 0;
-		-webkit-transition: opacity 0.1s linear;
-		-moz-transition: opacity 0.1s linear;
-		-ms-transition: opacity 0.1s linear;
-		-o-transition: opacity 0.1s linear;
-		transition: opacity 0.1s linear;
-		position: absolute;
-		top: 0px;
-		left: 0px;
-		width: 100%;
-		height: calc(100% - 6px);
-		background: rgba(0, 0, 0, 0.5);
-		display: flex;
-		justify-content: center;
-		align-items: center;
-
-		span {
-			padding: 3px;
-			&.more {
-				position: absolute;
-				top: 0;
-				right: 0;
-			}
+div.preview {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	width: 100%;
+	height: calc(100% - 6px);
+	overflow: hidden;
+}
 
-			&:nth-child(1), &:nth-child(2) {
-				align-items: flex-end;
-			}
+.preview-container {
+	display: inline-block;
+}
 
-			&:nth-child(1), &:nth-child(3) {
-				justify-content: flex-end;
-			}
+div.actions {
+	opacity: 0;
+	-webkit-transition: opacity 0.1s linear;
+	-moz-transition: opacity 0.1s linear;
+	-ms-transition: opacity 0.1s linear;
+	-o-transition: opacity 0.1s linear;
+	transition: opacity 0.1s linear;
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	width: 100%;
+	height: calc(100% - 6px);
+	// background: rgba(0, 0, 0, 0.5);
+	background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0px, rgba(0, 0, 0, 0) 60px),
+		linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0px, rgba(0, 0, 0, 0) 45px);
+	display: flex;
+	justify-content: center;
+	align-items: flex-end;
+
+	span {
+		padding: 3px;
+
+		&.more {
+			position: absolute;
+			top: 0;
+			right: 0;
+		}
+
+		&:nth-child(1),
+		&:nth-child(2) {
+			align-items: flex-end;
+			padding-bottom: 10px;
+		}
+
+		&:nth-child(3),
+		&:nth-child(4) {
+			justify-content: flex-end;
+			padding-bottom: 10px;
+		}
 
-			a {
+		a {
+			width: 30px;
+			height: 30px;
+			color: white;
+			justify-content: center;
+			align-items: center;
+			display: flex;
+			&.btn:before {
+				content: '';
 				width: 30px;
 				height: 30px;
-				color: white;
-				justify-content: center;
-				align-items: center;
-				display: flex;
-				&.btn:before {
-					content: '';
-					width: 30px;
-					height: 30px;
-					border: 1px solid white;
-					border-radius: 50%;
-					position: absolute;
-				}
+				border: 1px solid white;
+				border-radius: 50%;
+				position: absolute;
 			}
 		}
+	}
 
-		&.fixed {
-			position: relative;
-			opacity: 1;
-			background: none;
-
-			a {
-				width: auto;
-				height: auto;
-				color: $defaultTextColor;
-				&:before {
-					display: none;
-				}
-			}
+	&.fixed {
+		position: relative;
+		opacity: 1;
+		background: none;
 
+		a {
+			width: auto;
+			height: auto;
+			color: $defaultTextColor;
+			&:before {
+				display: none;
+			}
 		}
 	}
+}
 
-	.albums-container {
-		display: flex;
-		flex-direction: row;
-		flex-wrap: wrap;
-		.album {
-			flex-basis: 33%;
-			text-align: left;
-		}
+.albums-container {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	.album {
+		flex-basis: 33%;
+		text-align: left;
 	}
+}
 
-	img.hidden {
-		display: none;
-	}
-</style>
+.hidden {
+	display: none;
+}
 
-<style lang="scss">
-	.waterfall-item:hover {
-		div.actions {
-			opacity: 1
-		}
+.waterfall-item:hover {
+	div.actions {
+		opacity: 1;
 	}
+}
 </style>
diff --git a/src/site/components/grid/waterfall/Waterfall.vue b/src/site/components/grid/waterfall/Waterfall.vue
index af1bd72..cccc3ac 100644
--- a/src/site/components/grid/waterfall/Waterfall.vue
+++ b/src/site/components/grid/waterfall/Waterfall.vue
@@ -9,8 +9,6 @@
 	</div>
 </template>
 <script>
-// import {quickSort, getMinIndex, _, sum} from './util'
-
 const quickSort = (arr, type) => {
 	const left = [];
 	const right = [];
@@ -25,10 +23,10 @@ const quickSort = (arr, type) => {
 			right.push(arr[i]);
 		}
 	}
-	return quickSort(left, type).concat(povis, quickSort(right, type))
+	return quickSort(left, type).concat(povis, quickSort(right, type));
 };
 
-const getMinIndex = arr => {
+const getMinIndex = (arr) => {
 	let pos = 0;
 	for (let i = 0; i < arr.length; i++) {
 		if (arr[pos] > arr[i]) {
@@ -44,49 +42,53 @@ const _ = {
 	},
 	off(el, type, func, capture = false) {
 		el.removeEventListener(type, func, capture);
-	}
+	},
 };
 
-const sum = arr => arr.reduce((sum, val) => sum + val);
+const sum = (arr) => arr.reduce((acc, val) => acc + val, 0);
+
 export default {
 	name: 'Waterfall',
 	props: {
 		gutterWidth: {
 			type: Number,
-			default: 0
+			default: 0,
 		},
 		gutterHeight: {
 			type: Number,
-			default: 0
+			default: 0,
 		},
 		resizable: {
 			type: Boolean,
-			default: true
+			default: true,
 		},
 		align: {
 			type: String,
-			default: 'center'
+			default: 'center',
 		},
 		fixWidth: {
-			type: Number
+			type: Number,
+			default: 0,
 		},
 		minCol: {
 			type: Number,
-			default: 1
+			default: 1,
 		},
 		maxCol: {
-			type: Number
+			type: Number,
+			default: 0,
 		},
 		percent: {
-			type: Array
-		}
+			type: Array,
+			default: null,
+		},
 	},
 	data() {
 		return {
 			timer: null,
 			colNum: 0,
 			lastWidth: 0,
-			percentWidthArr: []
+			percentWidthArr: [],
 		};
 	},
 	created() {
@@ -105,16 +107,16 @@ export default {
 	},
 	methods: {
 		calulate(arr) {
-			let pageWidth = this.fixWidth ? this.fixWidth : this.$el.offsetWidth;
+			const pageWidth = this.fixWidth ? this.fixWidth : this.$el.offsetWidth;
 			// 百分比布局计算
 			if (this.percent) {
 				this.colNum = this.percent.length;
 				const total = sum(this.percent);
-				this.percentWidthArr = this.percent.map(value => (value / total) * pageWidth);
+				this.percentWidthArr = this.percent.map((value) => (value / total) * pageWidth);
 				this.lastWidth = 0;
 			// 正常布局计算
 			} else {
-				this.colNum = parseInt(pageWidth / (arr.width + this.gutterWidth));
+				this.colNum = parseInt(pageWidth / (arr.width + this.gutterWidth), 10);
 				if (this.minCol && this.colNum < this.minCol) {
 					this.colNum = this.minCol;
 					this.lastWidth = 0;
@@ -136,14 +138,14 @@ export default {
 		render() {
 			// 重新排序
 			let childArr = [];
-			childArr = this.$children.map(child => child.getMeta());
+			childArr = this.$children.map((child) => child.getMeta());
 			childArr = quickSort(childArr, 'order');
 			// 计算列数
-			this.calulate(childArr[0])
-			let offsetArr = Array(this.colNum).fill(0);
+			this.calulate(childArr[0]);
+			const offsetArr = Array(this.colNum).fill(0);
 			// 渲染
-			childArr.forEach(child => {
-				let position = getMinIndex(offsetArr);
+			childArr.forEach((child) => {
+				const position = getMinIndex(offsetArr);
 				// 百分比布局渲染
 				if (this.percent) {
 					let left = 0;
@@ -171,10 +173,10 @@ export default {
 				}
 				child.el.style.top = `${offsetArr[position]}px`;
 				offsetArr[position] += child.height + this.gutterHeight;
-				this.$el.style.height = `${Math.max.apply(Math, offsetArr)}px`;
+				this.$el.style.height = `${Math.max(...offsetArr)}px`;
 			});
 			this.$emit('rendered', this);
-		}
-	}
+		},
+	},
 };
 </script>
diff --git a/src/site/components/grid/waterfall/WaterfallItem.vue b/src/site/components/grid/waterfall/WaterfallItem.vue
index 7c4d814..2a5c69a 100644
--- a/src/site/components/grid/waterfall/WaterfallItem.vue
+++ b/src/site/components/grid/waterfall/WaterfallItem.vue
@@ -12,26 +12,27 @@
 
 <script>
 import imagesLoaded from 'imagesloaded';
+
 export default {
 	name: 'WaterfallItem',
 	props: {
 		order: {
 			type: Number,
-			default: 0
+			default: 0,
 		},
 		width: {
 			type: Number,
-			default: 150
+			default: 150,
 		},
 		video: {
 			type: Boolean,
-			default: false
-		}
+			default: false,
+		},
 	},
 	data() {
 		return {
 			itemWidth: 0,
-			height: 0
+			height: 0,
 		};
 	},
 	created() {
@@ -42,18 +43,18 @@ export default {
 		this.$el.style.width = `${this.width}px`;
 		this.emit();
 		if (this.video) {
-			const videoEl = this.$slots.default.find(e => e.tag?.toLowerCase() === 'video');
+			// find first video object
+			const videoEl = this.$slots.default.find((e) => e.tag?.toLowerCase() === 'video');
 			const el = videoEl.elm;
-			console.log(videoEl);
-			console.log(el);
+
+			// add event listener for video loaded
 			el.onloadeddata = () => {
-				console.log('loaded');
 				this.$el.style.left = '-9999px';
 				this.$el.style.top = '-9999px';
 				this.$el.style.display = 'block';
 				this.height = el.offsetHeight + 5;
 				this.itemWidth = el.offsetWidth;
-			}
+			};
 		} else {
 			imagesLoaded(this.$el, () => {
 				this.$el.style.left = '-9999px';
@@ -73,9 +74,9 @@ export default {
 				el: this.$el,
 				height: this.height,
 				width: this.itemWidth,
-				order: this.order
+				order: this.order,
 			};
-		}
-	}
-}
+		},
+	},
+};
 </script>
-- 
cgit v1.2.3


From fb0bc57542a44dcc94149f393d8a4ff0c2e7902b Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Tue, 7 Jul 2020 02:02:59 +0300
Subject: feat: try fixing THE SHITTY WATERFALL

---
 src/site/components/grid/Grid.vue                  | 28 +++++--------
 src/site/components/grid/waterfall/Waterfall.vue   | 47 +++++++++++++++++-----
 .../components/grid/waterfall/WaterfallItem.vue    | 12 +++---
 src/site/components/imageInfo/ImageInfo.vue        |  0
 4 files changed, 54 insertions(+), 33 deletions(-)
 create mode 100644 src/site/components/imageInfo/ImageInfo.vue

(limited to 'src/site/components')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index d4fe067..e6a8c64 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -24,12 +24,10 @@
 			<Waterfall
 				v-if="showWaterfall"
 				:gutterWidth="10"
-				:gutterHeight="4">
-				<WaterfallItem
-					v-for="(item, index) in gridFiles"
-					:key="item.id"
-					:width="width"
-					move-class="item-move">
+				:gutterHeight="4"
+				:itemWidth="width"
+				:items="gridFiles">
+				<template v-slot="{item}">
 					<template v-if="isPublic">
 						<a
 							:href="`${item.url}`"
@@ -81,7 +79,7 @@
 								</a>
 							</b-tooltip>
 							<b-tooltip label="Delete" position="is-top">
-								<a class="btn" @click="deleteFile(item, index)">
+								<a class="btn" @click="deleteFile(item)">
 									<i class="icon-editorial-trash-a-l" />
 								</a>
 							</b-tooltip>
@@ -92,7 +90,7 @@
 							</b-tooltip>
 						</div>
 					</template>
-				</WaterfallItem>
+				</template>
 			</Waterfall>
 		</template>
 		<div v-else>
@@ -185,12 +183,10 @@
 import { mapState } from 'vuex';
 
 import Waterfall from './waterfall/Waterfall.vue';
-import WaterfallItem from './waterfall/WaterfallItem.vue';
 
 export default {
 	components: {
 		Waterfall,
-		WaterfallItem,
 	},
 	props: {
 		files: {
@@ -253,13 +249,13 @@ export default {
 			const data = await this.$search.do(this.searchTerm, ['name', 'original', 'type', 'albums:name']);
 			console.log('> Search result data', data);
 		},
-		deleteFile(file, index) {
-			this.$buefy.dialog.confirm({
+		deleteFile(file) {
+			this.$emit('delete', file);
+			/* this.$buefy.dialog.confirm({
 				title: 'Deleting file',
 				message: 'Are you sure you want to <b>delete</b> this file?',
 				confirmText: 'Delete File',
 				type: 'is-danger',
-				hasIcon: true,
 				onConfirm: async () => {
 					const response = await this.$axios.$delete(`file/${file.id}`);
 					if (this.showList) {
@@ -274,7 +270,7 @@ export default {
 					}
 					return this.$buefy.toast.open(response.message);
 				},
-			});
+			}); */
 		},
 		isAlbumSelected(id) {
 			if (!this.showingModalForFile) return false;
@@ -311,10 +307,6 @@ export default {
 			const foundIndex = this.hoveredItems.indexOf(id);
 			if (foundIndex > -1) return;
 			this.hoveredItems.push(id);
-			/// XXX: THIS IS NOT OK!
-			this.$nextTick(() => {
-				this.$refs.video.forEach((e) => e.play().catch(() => {}));
-			});
 		},
 		mouseOut(id) {
 			console.log('out', id);
diff --git a/src/site/components/grid/waterfall/Waterfall.vue b/src/site/components/grid/waterfall/Waterfall.vue
index cccc3ac..a83a275 100644
--- a/src/site/components/grid/waterfall/Waterfall.vue
+++ b/src/site/components/grid/waterfall/Waterfall.vue
@@ -1,14 +1,14 @@
-<style>
-	.waterfall {
-		position: relative;
-	}
-</style>
 <template>
 	<div class="waterfall">
-		<slot />
+		<WaterfallItem v-for="(item, index) in items" :key="item.id" :ref="`item-${item.id}`" :width="itemWidth">
+			<slot :item="item" />
+		</WaterfallItem>
 	</div>
 </template>
+
 <script>
+import WaterfallItem from './WaterfallItem.vue';
+
 const quickSort = (arr, type) => {
 	const left = [];
 	const right = [];
@@ -49,6 +49,9 @@ const sum = (arr) => arr.reduce((acc, val) => acc + val, 0);
 
 export default {
 	name: 'Waterfall',
+	components: {
+		WaterfallItem,
+	},
 	props: {
 		gutterWidth: {
 			type: Number,
@@ -82,6 +85,14 @@ export default {
 			type: Array,
 			default: null,
 		},
+		itemWidth: {
+			type: Number,
+			default: 150,
+		},
+		items: {
+			type: Array,
+			default: () => [],
+		},
 	},
 	data() {
 		return {
@@ -89,15 +100,21 @@ export default {
 			colNum: 0,
 			lastWidth: 0,
 			percentWidthArr: [],
+			readyChildCount: 0,
 		};
 	},
+	watch: {
+		items() {
+			this.$nextTick(() => this.render('watch'));
+		},
+	},
 	created() {
 		this.$on('itemRender', () => {
 			if (this.timer) {
 				clearTimeout(this.timer);
 			}
 			this.timer = setTimeout(() => {
-				this.render();
+				this.render('created');
 			}, 0);
 		});
 	},
@@ -105,6 +122,10 @@ export default {
 		this.resizeHandle();
 		this.$watch('resizable', this.resizeHandle);
 	},
+	beforeDestroy() {
+		this.$off('itemRender');
+		_.off(window, 'resize', this.render);
+	},
 	methods: {
 		calulate(arr) {
 			const pageWidth = this.fixWidth ? this.fixWidth : this.$el.offsetWidth;
@@ -135,10 +156,12 @@ export default {
 				_.off(window, 'resize', this.render, false);
 			}
 		},
-		render() {
+		render(context) {
+			console.log(context);
+			if (!this.items) return;
 			// 重新排序
 			let childArr = [];
-			childArr = this.$children.map((child) => child.getMeta());
+			childArr = this.items.map(({ id }) => this.$refs[`item-${id}`][0].getMeta());
 			childArr = quickSort(childArr, 'order');
 			// 计算列数
 			this.calulate(childArr[0]);
@@ -180,3 +203,9 @@ export default {
 	},
 };
 </script>
+
+<style>
+	.waterfall {
+		position: relative;
+	}
+</style>
diff --git a/src/site/components/grid/waterfall/WaterfallItem.vue b/src/site/components/grid/waterfall/WaterfallItem.vue
index 2a5c69a..a49c58c 100644
--- a/src/site/components/grid/waterfall/WaterfallItem.vue
+++ b/src/site/components/grid/waterfall/WaterfallItem.vue
@@ -1,9 +1,3 @@
-<style scoped>
-	.waterfall-item {
-		position: absolute;
-	}
-</style>
-
 <template>
 	<div class="waterfall-item">
 		<slot />
@@ -80,3 +74,9 @@ export default {
 	},
 };
 </script>
+
+<style scoped>
+	.waterfall-item {
+		position: absolute;
+	}
+</style>
diff --git a/src/site/components/imageInfo/ImageInfo.vue b/src/site/components/imageInfo/ImageInfo.vue
new file mode 100644
index 0000000..e69de29
-- 
cgit v1.2.3


From 5d61b4d000a114857e4519be25c5834f510d450f Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Tue, 7 Jul 2020 02:50:03 +0300
Subject: feat: refactor waterfall to be more efficient

---
 src/site/components/grid/Grid.vue                  |   5 +
 src/site/components/grid/waterfall/Waterfall.vue   | 266 ++++++++-------------
 .../components/grid/waterfall/WaterfallItem.vue    |  72 ------
 3 files changed, 99 insertions(+), 244 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index e6a8c64..f98108e 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -25,6 +25,7 @@
 				v-if="showWaterfall"
 				:gutterWidth="10"
 				:gutterHeight="4"
+				:options="{fitWidth: true}"
 				:itemWidth="width"
 				:items="gridFiles">
 				<template v-slot="{item}">
@@ -451,6 +452,10 @@ div.actions {
 	display: none;
 }
 
+.waterfall {
+	margin: 0 auto;
+}
+
 .waterfall-item:hover {
 	div.actions {
 		opacity: 1;
diff --git a/src/site/components/grid/waterfall/Waterfall.vue b/src/site/components/grid/waterfall/Waterfall.vue
index a83a275..79a330a 100644
--- a/src/site/components/grid/waterfall/Waterfall.vue
+++ b/src/site/components/grid/waterfall/Waterfall.vue
@@ -1,51 +1,20 @@
 <template>
-	<div class="waterfall">
-		<WaterfallItem v-for="(item, index) in items" :key="item.id" :ref="`item-${item.id}`" :width="itemWidth">
+	<div ref="waterfall" class="waterfall">
+		<WaterfallItem
+			v-for="(item, index) in items"
+			:key="item.id"
+			:style="{ width: `${itemWidth}px`, marginBottom: `${gutterHeight}px` }"
+			:width="itemWidth">
 			<slot :item="item" />
 		</WaterfallItem>
 	</div>
 </template>
-
 <script>
 import WaterfallItem from './WaterfallItem.vue';
 
-const quickSort = (arr, type) => {
-	const left = [];
-	const right = [];
-	if (arr.length <= 1) {
-		return arr;
-	}
-	const povis = arr[0];
-	for (let i = 1; i < arr.length; i++) {
-		if (arr[i][type] < povis[type]) {
-			left.push(arr[i]);
-		} else {
-			right.push(arr[i]);
-		}
-	}
-	return quickSort(left, type).concat(povis, quickSort(right, type));
-};
-
-const getMinIndex = (arr) => {
-	let pos = 0;
-	for (let i = 0; i < arr.length; i++) {
-		if (arr[pos] > arr[i]) {
-			pos = i;
-		}
-	}
-	return pos;
-};
-
-const _ = {
-	on(el, type, func, capture = false) {
-		el.addEventListener(type, func, capture);
-	},
-	off(el, type, func, capture = false) {
-		el.removeEventListener(type, func, capture);
-	},
-};
-
-const sum = (arr) => arr.reduce((acc, val) => acc + val, 0);
+const isBrowser = typeof window !== 'undefined';
+const Masonry = isBrowser ? window.Masonry || require('masonry-layout') : null;
+const imagesloaded = isBrowser ? require('imagesloaded') : null;
 
 export default {
 	name: 'Waterfall',
@@ -53,159 +22,112 @@ export default {
 		WaterfallItem,
 	},
 	props: {
-		gutterWidth: {
-			type: Number,
-			default: 0,
-		},
-		gutterHeight: {
-			type: Number,
-			default: 0,
-		},
-		resizable: {
-			type: Boolean,
-			default: true,
-		},
-		align: {
-			type: String,
-			default: 'center',
-		},
-		fixWidth: {
-			type: Number,
-			default: 0,
-		},
-		minCol: {
-			type: Number,
-			default: 1,
-		},
-		maxCol: {
-			type: Number,
-			default: 0,
+		options: {
+			type: Object,
+			default: () => {},
 		},
-		percent: {
+		items: {
 			type: Array,
-			default: null,
+			default: () => [],
 		},
 		itemWidth: {
 			type: Number,
 			default: 150,
 		},
-		items: {
-			type: Array,
-			default: () => [],
+		gutterWidth: {
+			type: Number,
+			default: 10,
 		},
-	},
-	data() {
-		return {
-			timer: null,
-			colNum: 0,
-			lastWidth: 0,
-			percentWidthArr: [],
-			readyChildCount: 0,
-		};
-	},
-	watch: {
-		items() {
-			this.$nextTick(() => this.render('watch'));
+		gutterHeight: {
+			type: Number,
+			default: 4,
 		},
 	},
-	created() {
-		this.$on('itemRender', () => {
-			if (this.timer) {
-				clearTimeout(this.timer);
-			}
-			this.timer = setTimeout(() => {
-				this.render('created');
-			}, 0);
-		});
-	},
 	mounted() {
-		this.resizeHandle();
-		this.$watch('resizable', this.resizeHandle);
+		this.initializeMasonry();
+		this.imagesLoaded();
+	},
+	updated() {
+		this.performLayout();
+		this.imagesLoaded();
 	},
-	beforeDestroy() {
-		this.$off('itemRender');
-		_.off(window, 'resize', this.render);
+	unmounted() {
+		this.masonry.destroy();
 	},
 	methods: {
-		calulate(arr) {
-			const pageWidth = this.fixWidth ? this.fixWidth : this.$el.offsetWidth;
-			// 百分比布局计算
-			if (this.percent) {
-				this.colNum = this.percent.length;
-				const total = sum(this.percent);
-				this.percentWidthArr = this.percent.map((value) => (value / total) * pageWidth);
-				this.lastWidth = 0;
-			// 正常布局计算
-			} else {
-				this.colNum = parseInt(pageWidth / (arr.width + this.gutterWidth), 10);
-				if (this.minCol && this.colNum < this.minCol) {
-					this.colNum = this.minCol;
-					this.lastWidth = 0;
-				} else if (this.maxCol && this.colNum > this.maxCol) {
-					this.colNum = this.maxCol;
-					this.lastWidth = pageWidth - (arr.width + this.gutterWidth) * this.colNum + this.gutterWidth;
-				} else {
-					this.lastWidth = pageWidth - (arr.width + this.gutterWidth) * this.colNum + this.gutterWidth;
-				}
+		imagesLoaded() {
+			const node = this.$refs.waterfall;
+			imagesloaded(
+				node,
+				() => {
+					this.masonry.layout();
+				},
+			);
+		},
+		performLayout() {
+			const diff = this.diffDomChildren();
+			if (diff.removed.length > 0) {
+				this.masonry.remove(diff.removed);
+				this.masonry.reloadItems();
+			}
+			if (diff.appended.length > 0) {
+				this.masonry.appended(diff.appended);
+				this.masonry.reloadItems();
 			}
+			if (diff.prepended.length > 0) {
+				this.masonry.prepended(diff.prepended);
+			}
+			if (diff.moved.length > 0) {
+				this.masonry.reloadItems();
+			}
+			this.masonry.layout();
 		},
-		resizeHandle() {
-			if (this.resizable) {
-				_.on(window, 'resize', this.render, false);
-			} else {
-				_.off(window, 'resize', this.render, false);
+		diffDomChildren() {
+			const oldChildren = this.domChildren.filter((element) => !!element.parentNode);
+			const newChildren = this.getNewDomChildren();
+			const removed = oldChildren.filter((oldChild) => !newChildren.includes(oldChild));
+			const domDiff = newChildren.filter((newChild) => !oldChildren.includes(newChild));
+			const prepended = domDiff.filter((newChild, index) => newChildren[index] === newChild);
+			const appended = domDiff.filter((el) => !prepended.includes(el));
+			let moved = [];
+			if (removed.length === 0) {
+				moved = oldChildren.filter((child, index) => index !== newChildren.indexOf(child));
 			}
+			this.domChildren = newChildren;
+			return {
+				old: oldChildren,
+				new: newChildren,
+				removed,
+				appended,
+				prepended,
+				moved,
+			};
 		},
-		render(context) {
-			console.log(context);
-			if (!this.items) return;
-			// 重新排序
-			let childArr = [];
-			childArr = this.items.map(({ id }) => this.$refs[`item-${id}`][0].getMeta());
-			childArr = quickSort(childArr, 'order');
-			// 计算列数
-			this.calulate(childArr[0]);
-			const offsetArr = Array(this.colNum).fill(0);
-			// 渲染
-			childArr.forEach((child) => {
-				const position = getMinIndex(offsetArr);
-				// 百分比布局渲染
-				if (this.percent) {
-					let left = 0;
-					child.el.style.width = `${this.percentWidthArr[position]}px`;
-					if (position === 0) {
-						left = 0;
-					} else {
-						for (let i = 0; i < position; i++) {
-							left += this.percentWidthArr[i];
-						}
-					}
-					child.el.style.left = `${left}px`;
-				// 正常布局渲染
-				} else {
-					if (this.align === 'left') { // eslint-disable-line no-lonely-if
-						child.el.style.left = `${position * (child.width + this.gutterWidth)}px`;
-					} else if (this.align === 'right') {
-						child.el.style.left = `${position * (child.width + this.gutterWidth) + this.lastWidth}px`;
-					} else {
-						child.el.style.left = `${position * (child.width + this.gutterWidth) + this.lastWidth / 2}px`;
-					}
-				}
-				if (child.height === 0) {
-					return;
-				}
-				child.el.style.top = `${offsetArr[position]}px`;
-				offsetArr[position] += child.height + this.gutterHeight;
-				this.$el.style.height = `${Math.max(...offsetArr)}px`;
-			});
-			this.$emit('rendered', this);
+		initializeMasonry() {
+			if (!this.masonry) {
+				this.masonry = new Masonry(
+					this.$refs.waterfall,
+					{
+						columnWidth: this.itemWidth,
+						gutter: this.gutterWidth,
+						...this.options,
+					},
+				);
+				this.domChildren = this.getNewDomChildren();
+			}
+		},
+		getNewDomChildren() {
+			const node = this.$refs.waterfall;
+			const children = this.options && this.options.itemSelector
+				? node.querySelectorAll(this.options.itemSelector) : node.children;
+			return Array.prototype.slice.call(children);
 		},
 	},
 };
 </script>
 
-<style>
-	.waterfall {
-		position: relative;
-	}
+<style lang="scss" scoped>
+.wfi {
+
+}
 </style>
diff --git a/src/site/components/grid/waterfall/WaterfallItem.vue b/src/site/components/grid/waterfall/WaterfallItem.vue
index a49c58c..c5cade1 100644
--- a/src/site/components/grid/waterfall/WaterfallItem.vue
+++ b/src/site/components/grid/waterfall/WaterfallItem.vue
@@ -3,80 +3,8 @@
 		<slot />
 	</div>
 </template>
-
 <script>
-import imagesLoaded from 'imagesloaded';
-
 export default {
 	name: 'WaterfallItem',
-	props: {
-		order: {
-			type: Number,
-			default: 0,
-		},
-		width: {
-			type: Number,
-			default: 150,
-		},
-		video: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	data() {
-		return {
-			itemWidth: 0,
-			height: 0,
-		};
-	},
-	created() {
-		this.$watch(() => this.height, this.emit);
-	},
-	mounted() {
-		this.$el.style.display = 'none';
-		this.$el.style.width = `${this.width}px`;
-		this.emit();
-		if (this.video) {
-			// find first video object
-			const videoEl = this.$slots.default.find((e) => e.tag?.toLowerCase() === 'video');
-			const el = videoEl.elm;
-
-			// add event listener for video loaded
-			el.onloadeddata = () => {
-				this.$el.style.left = '-9999px';
-				this.$el.style.top = '-9999px';
-				this.$el.style.display = 'block';
-				this.height = el.offsetHeight + 5;
-				this.itemWidth = el.offsetWidth;
-			};
-		} else {
-			imagesLoaded(this.$el, () => {
-				this.$el.style.left = '-9999px';
-				this.$el.style.top = '-9999px';
-				this.$el.style.display = 'block';
-				this.height = this.$el.offsetHeight;
-				this.itemWidth = this.$el.offsetWidth;
-			});
-		}
-	},
-	methods: {
-		emit() {
-			this.$parent.$emit('itemRender');
-		},
-		getMeta() {
-			return {
-				el: this.$el,
-				height: this.height,
-				width: this.itemWidth,
-				order: this.order,
-			};
-		},
-	},
 };
 </script>
-
-<style scoped>
-	.waterfall-item {
-		position: absolute;
-	}
-</style>
-- 
cgit v1.2.3


From 1a8b6602e094289a4f477c33e432e0f5e1587b45 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Wed, 8 Jul 2020 03:13:51 +0300
Subject: refactor: change uploader component to use vuex

---
 src/site/components/uploader/Uploader.vue | 74 ++++++++++++++++++-------------
 1 file changed, 42 insertions(+), 32 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/uploader/Uploader.vue b/src/site/components/uploader/Uploader.vue
index 1b03ff8..c7be372 100644
--- a/src/site/components/uploader/Uploader.vue
+++ b/src/site/components/uploader/Uploader.vue
@@ -1,7 +1,9 @@
 <template>
-	<div :class="{ 'has-files': alreadyAddedFiles }"
+	<div
+		:class="{ 'has-files': alreadyAddedFiles }"
 		class="uploader-wrapper">
-		<b-select v-if="loggedIn"
+		<b-select
+			v-if="loggedIn"
 			v-model="selectedAlbum"
 			placeholder="Upload to album"
 			size="is-medium"
@@ -13,7 +15,8 @@
 				{{ album.name }}
 			</option>
 		</b-select>
-		<dropzone v-if="showDropzone"
+		<dropzone
+			v-if="showDropzone"
 			id="dropzone"
 			ref="el"
 			:options="dropzoneOptions"
@@ -25,16 +28,22 @@
 			Add or drop more files
 		</label>
 
-		<div id="template"
+		<div
+			id="template"
 			ref="template">
 			<div class="dz-preview dz-file-preview">
 				<div class="dz-details">
-					<div class="dz-filename"><span data-dz-name /></div>
-					<div class="dz-size"><span data-dz-size /></div>
+					<div class="dz-filename">
+						<span data-dz-name />
+					</div>
+					<div class="dz-size">
+						<span data-dz-size />
+					</div>
 				</div>
 				<div class="result">
 					<div class="openLink">
-						<a class="link"
+						<a
+							class="link"
 							target="_blank">
 							Link
 						</a>
@@ -43,14 +52,16 @@
 				<div class="error">
 					<div>
 						<span>
-							<span class="error-message"
+							<span
+								class="error-message"
 								data-dz-errormessage />
 							<i class="icon-web-warning" />
 						</span>
 					</div>
 				</div>
 				<div class="dz-progress">
-					<span class="dz-upload"
+					<span
+						class="dz-upload"
 						data-dz-uploadprogress />
 				</div>
 				<!--
@@ -64,6 +75,8 @@
 </template>
 
 <script>
+import { mapState, mapGetters } from 'vuex';
+
 import Dropzone from 'nuxt-dropzone';
 import '~/assets/styles/dropzone.scss';
 
@@ -75,20 +88,15 @@ export default {
 			files: [],
 			dropzoneOptions: {},
 			showDropzone: false,
-			albums: [],
-			selectedAlbum: null
+			selectedAlbum: null,
 		};
 	},
 	computed: {
-		config() {
-			return this.$store.state.config;
-		},
-		token() {
-			return this.$store.state.token;
-		},
-		loggedIn() {
-			return this.$store.state.loggedIn;
-		}
+		...mapState({
+			config: (state) => state.config,
+			albums: (state) => state.albums.tinyDetails,
+		}),
+		...mapGetters({ loggedIn: 'auth/isLoggedIn', token: 'auth/getToken' }),
 	},
 	watch: {
 		loggedIn() {
@@ -96,7 +104,7 @@ export default {
 		},
 		selectedAlbum() {
 			this.updateDropzoneConfig();
-		}
+		},
 	},
 	mounted() {
 		this.dropzoneOptions = {
@@ -119,7 +127,7 @@ export default {
 			maxFilesize: this.config.maxFileSize,
 			previewTemplate: this.$refs.template.innerHTML,
 			dictDefaultMessage: 'Drag & Drop your files or click to browse',
-			headers: { Accept: 'application/vnd.lolisafe.json' }
+			headers: { Accept: 'application/vnd.lolisafe.json' },
 		};
 		this.showDropzone = true;
 		if (this.loggedIn) this.getAlbums();
@@ -129,8 +137,11 @@ export default {
 			Get all available albums so the user can upload directly to one (or several soon™) of them.
 		*/
 		async getAlbums() {
-			const response = await this.$axios.$get(`albums/dropdown`);
-			this.albums = response.albums;
+			try {
+				await this.$store.dispatch('albums/getTinyDetails');
+			} catch (e) {
+				this.$store.dispatch('alert/set', { text: e.message, error: true }, { root: true });
+			}
 			this.updateDropzoneConfig();
 		},
 
@@ -143,14 +154,14 @@ export default {
 			this.$refs.el.setOption('headers', {
 				Accept: 'application/vnd.lolisafe.json',
 				Authorization: this.token ? `Bearer ${this.token}` : '',
-				albumId: this.selectedAlbum ? this.selectedAlbum : null
+				albumId: this.selectedAlbum ? this.selectedAlbum : null,
 			});
 		},
 
 		/*
 			Dropzone stuff
 		*/
-		dropzoneFilesAdded(files) {
+		dropzoneFilesAdded() {
 			this.alreadyAddedFiles = true;
 		},
 		dropzoneSuccess(file, response) {
@@ -159,7 +170,7 @@ export default {
 		dropzoneError(file, message, xhr) {
 			this.$store.dispatch('alert', {
 				text: 'There was an error uploading this file. Check the console.',
-				error: true
+				error: true,
 			});
 			console.error(file, message, xhr);
 		},
@@ -170,12 +181,11 @@ export default {
 					original: file.name,
 					size: file.size,
 					type: file.type,
-					count: file.upload.totalChunkCount
-				}]
+					count: file.upload.totalChunkCount,
+				}],
 			});
 
 			this.processResult(file, data);
-			this.$forceUpdate();
 			return done();
 		},
 
@@ -194,8 +204,8 @@ export default {
 				this.$clipboard(response.url);
 			});
 			*/
-		}
-	}
+		},
+	},
 };
 </script>
 <style lang="scss" scoped>
-- 
cgit v1.2.3


From 15266378810d81704f8c9ece6ecf919526efacae Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Wed, 8 Jul 2020 03:15:07 +0300
Subject: feat: add new sidebar with mdi icons and active reactivity

---
 src/site/components/navbar/Navbar.vue   |  14 +++--
 src/site/components/sidebar/Sidebar.vue | 107 ++++++++++++++++++--------------
 2 files changed, 70 insertions(+), 51 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/navbar/Navbar.vue b/src/site/components/navbar/Navbar.vue
index 7fb2f22..fb78631 100644
--- a/src/site/components/navbar/Navbar.vue
+++ b/src/site/components/navbar/Navbar.vue
@@ -1,5 +1,6 @@
 <template>
-	<b-navbar :class="{ isWhite }"
+	<b-navbar
+		:class="{ isWhite }"
 		transparent>
 		<template slot="end">
 			<b-navbar-item tag="div">
@@ -71,24 +72,25 @@ export default {
 	props: {
 		isWhite: {
 			type: Boolean,
-			default: false
-		}
+			default: false,
+		},
 	},
 	data() {
 		return { hamburger: false };
 	},
 	computed: {
 		...mapGetters({ loggedIn: 'auth/isLoggedIn' }),
-		...mapState(['config'])
+		...mapState(['config']),
 	},
 	methods: {
 		async logOut() {
 			await this.$store.dispatch('auth/logout');
 			this.$router.replace('/login');
-		}
-	}
+		},
+	},
 };
 </script>
+
 <style lang="scss" scoped>
 	@import '~/assets/styles/_colors.scss';
 	nav.navbar {
diff --git a/src/site/components/sidebar/Sidebar.vue b/src/site/components/sidebar/Sidebar.vue
index 3cb8b43..5394fc6 100644
--- a/src/site/components/sidebar/Sidebar.vue
+++ b/src/site/components/sidebar/Sidebar.vue
@@ -1,63 +1,80 @@
 <template>
-	<div class="dashboard-menu">
-		<router-link to="/dashboard">
-			<i class="icon-com-pictures" />Files
-		</router-link>
-		<router-link to="/dashboard/albums">
-			<i class="icon-interface-window" />Albums
-		</router-link>
-		<router-link to="/dashboard/tags">
-			<i class="icon-ecommerce-tag-c" />Tags
-		</router-link>
-		<router-link to="/dashboard/account">
-			<i class="icon-user-alt" />Account
-		</router-link>
-		<template v-if="user && user.isAdmin">
-			<router-link to="/dashboard/admin/users">
-				<i class="icon-setting-gear-a" />Users
-			</router-link>
-			<!--
-			TODO: Dont wanna deal with this now
-			<router-link to="/dashboard/admin/settings">
-				<i class="icon-setting-gear-a" />Settings
-			</router-link>
-			-->
-		</template>
-	</div>
+	<b-menu class="dashboard-menu">
+		<b-menu-list label="Menu">
+			<b-menu-item
+				class="item"
+				icon="information-outline"
+				label="Dashboard"
+				tag="nuxt-link"
+				to="/dashboard"
+				exact />
+			<b-menu-item
+				class="item"
+				icon="image-multiple-outline"
+				label="Albums"
+				tag="nuxt-link"
+				to="/dashboard/albums"
+				exact />
+			<b-menu-item
+				class="item"
+				icon="tag-outline"
+				label="Tags"
+				tag="nuxt-link"
+				to="/dashboard/tags"
+				exact />
+			<b-menu-item icon="settings" expanded>
+				<template slot="label" slot-scope="props">
+					Administration
+					<b-icon class="is-pulled-right" :icon="props.expanded ? 'menu-down' : 'menu-up'" />
+				</template>
+				<b-menu-item icon="account" label="Users" tag="nuxt-link" to="/dashboard/admin/users" exact />
+				<b-menu-item icon="cog-outline" label="Settings" disabled />
+			</b-menu-item>
+			<b-menu-item
+				class="item"
+				icon="account-cog-outline"
+				label="My account"
+				tag="nuxt-link"
+				to="/dashboard/account"
+				exact />
+		</b-menu-list>
+		<b-menu-list label="Actions">
+			<b-menu-item icon="exit-to-app" label="Logout" tag="nuxt-link" to="/logout" exact />
+		</b-menu-list>
+	</b-menu>
 </template>
 <script>
 import { mapState } from 'vuex';
 
 export default {
 	computed: mapState({
-		user: state => state.auth.user
-	})
+		user: (state) => state.auth.user,
+	}),
+	methods: {
+		isRouteActive(id) {
+			if (this.$route.path.includes(id)) {
+				return true;
+			}
+			return false;
+		},
+	},
 };
 
 </script>
 <style lang="scss" scoped>
 	@import '~/assets/styles/_colors.scss';
 	.dashboard-menu {
-		padding: 2rem;
-		border-radius: 8px;
+		::v-deep a:hover {
+			cursor: pointer;
+			text-decoration: none;
+		}
 
-		a {
-			display: block;
-			font-weight: 700;
-			color: $textColor;
-			position: relative;
-			padding-left: 40px;
-			height: 35px;
-			&:hover{
-				color: white;
-			}
+		::v-deep .icon {
+			margin-right: 0.5rem;
+		}
 
-			i {
-				position: absolute;
-				font-size: 1.5em;
-				top: -4px;
-				left: 5px;
-			}
+		::v-deep .icon.is-pulled-right {
+			margin-right: 0;
 		}
 
 		hr { margin-top: 0.6em; }
-- 
cgit v1.2.3


From b519b6ccb469e874c783b995ddf0ab6fabdb5a0e Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Wed, 8 Jul 2020 03:37:50 +0300
Subject: refactor: refactor grid to use vuex for every action

---
 src/site/components/grid/Grid.vue | 83 ++++++++++++++++++++++-----------------
 1 file changed, 48 insertions(+), 35 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index f98108e..42dcc6b 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -70,7 +70,7 @@
 								</a>
 							</b-tooltip>
 							<b-tooltip label="Tags" position="is-top">
-								<a class="btn" @click="manageTags(item)">
+								<a class="btn" @click="false && manageTags(item)">
 									<i class="icon-ecommerce-tag-c" />
 								</a>
 							</b-tooltip>
@@ -163,7 +163,7 @@
 						<hr>
 
 						<div class="albums-container">
-							<div v-for="(album, index) in albums" :key="index" class="album">
+							<div v-for="(album, index) in albums" :key="album.id" class="album">
 								<div class="field">
 									<b-checkbox
 										:value="isAlbumSelected(album.id)"
@@ -224,7 +224,6 @@ export default {
 			showWaterfall: true,
 			searchTerm: null,
 			showList: false,
-			albums: [],
 			hoveredItems: [],
 			isAlbumsModalActive: false,
 			showingModalForFile: null,
@@ -236,6 +235,8 @@ export default {
 	computed: {
 		...mapState({
 			user: (state) => state.auth.user,
+			albums: (state) => state.albums.tinyDetails,
+			images: (state) => state.images,
 		}),
 		blank() {
 			// eslint-disable-next-line global-require, import/no-unresolved
@@ -245,33 +246,31 @@ export default {
 			return this.files;
 		},
 	},
+	created() {
+		this.getAlbums();
+	},
 	methods: {
 		async search() {
 			const data = await this.$search.do(this.searchTerm, ['name', 'original', 'type', 'albums:name']);
 			console.log('> Search result data', data);
 		},
 		deleteFile(file) {
-			this.$emit('delete', file);
-			/* this.$buefy.dialog.confirm({
+			// this.$emit('delete', file);
+			this.$buefy.dialog.confirm({
 				title: 'Deleting file',
 				message: 'Are you sure you want to <b>delete</b> this file?',
 				confirmText: 'Delete File',
 				type: 'is-danger',
 				onConfirm: async () => {
-					const response = await this.$axios.$delete(`file/${file.id}`);
-					if (this.showList) {
-						file.hideFromList = true;
-						this.$forceUpdate();
-					} else {
-						this.showWaterfall = false;
-						this.files.splice(index, 1);
-						this.$nextTick(() => {
-							this.showWaterfall = true;
-						});
+					try {
+						const response = await this.$store.dispatch('images/deleteFile', file.id);
+
+						this.$buefy.toast.open(response.message);
+					} catch (e) {
+						this.$store.dispatch('alert/set', { text: e.message, error: true }, { root: true });
 					}
-					return this.$buefy.toast.open(response.message);
 				},
-			}); */
+			});
 		},
 		isAlbumSelected(id) {
 			if (!this.showingModalForFile) return false;
@@ -279,38 +278,52 @@ export default {
 			return !!(found && found.id);
 		},
 		async openAlbumModal(file) {
+			const { id } = file;
 			this.showingModalForFile = file;
 			this.showingModalForFile.albums = [];
-			this.isAlbumsModalActive = true;
 
-			const response = await this.$axios.$get(`file/${file.id}/albums`);
-			this.showingModalForFile.albums = response.albums;
+			try {
+				await this.$store.dispatch('images/getFileAlbums', id);
+			} catch (e) {
+				this.$store.dispatch('alert/set', { text: e.message, error: true }, { root: true });
+			}
+			this.showingModalForFile.albums = this.images.filesAlbums[id];
 
-			this.getAlbums();
+			this.isAlbumsModalActive = true;
 		},
-		async albumCheckboxClicked(value, id) {
-			const response = await this.$axios.$post(`file/album/${value ? 'add' : 'del'}`, {
-				albumId: id,
-				fileId: this.showingModalForFile.id,
-			});
-			this.$buefy.toast.open(response.message);
-
-			// Not the prettiest solution to refetch on each click but it'll do for now
-			this.$parent.getFiles();
+		async albumCheckboxClicked(add, id) {
+			try {
+				let response;
+				if (add) {
+					response = await this.$store.dispatch('images/addToAlbum', {
+						albumId: id,
+						fileId: this.showingModalForFile.id,
+					});
+				} else {
+					response = await this.$store.dispatch('images/removeFromAlbum', {
+						albumId: id,
+						fileId: this.showingModalForFile.id,
+					});
+				}
+
+				this.$buefy.toast.open(response.message);
+			} catch (e) {
+				this.$store.dispatch('alert/set', { text: e.message, error: true }, { root: true });
+			}
 		},
 		async getAlbums() {
-			const response = await this.$axios.$get('albums/dropdown');
-			this.albums = response.albums;
-			this.$forceUpdate();
+			try {
+				await this.$store.dispatch('albums/getTinyDetails');
+			} catch (e) {
+				this.$store.dispatch('alert/set', { text: e.message, error: true }, { root: true });
+			}
 		},
 		mouseOver(id) {
-			console.log('in', id);
 			const foundIndex = this.hoveredItems.indexOf(id);
 			if (foundIndex > -1) return;
 			this.hoveredItems.push(id);
 		},
 		mouseOut(id) {
-			console.log('out', id);
 			const foundIndex = this.hoveredItems.indexOf(id);
 			if (foundIndex > -1) this.hoveredItems.splice(foundIndex, 1);
 		},
-- 
cgit v1.2.3


From ad852de51a0d2dd5d29c08838d5a430c58849e74 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Wed, 8 Jul 2020 04:00:12 +0300
Subject: chore: linter the entire project using the new rules

---
 src/site/components/album/AlbumDetails.vue   | 62 +++++++++++++++++-----------
 src/site/components/album/AlbumEntry.vue     | 41 +++++++++++-------
 src/site/components/grid/Grid.vue            |  4 +-
 src/site/components/loading/CubeShadow.vue   | 17 ++++----
 src/site/components/loading/Origami.vue      | 18 ++++----
 src/site/components/loading/PingPong.vue     | 26 ++++++------
 src/site/components/loading/RotateSquare.vue | 13 +++---
 src/site/components/uploader/Uploader.vue    |  1 +
 8 files changed, 106 insertions(+), 76 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/album/AlbumDetails.vue b/src/site/components/album/AlbumDetails.vue
index f117f2f..b411f13 100644
--- a/src/site/components/album/AlbumDetails.vue
+++ b/src/site/components/album/AlbumDetails.vue
@@ -6,34 +6,43 @@
 			:data="details.links || []"
 			:mobile-cards="true">
 			<template slot-scope="props">
-				<b-table-column field="identifier"
+				<b-table-column
+					field="identifier"
 					label="Link"
 					centered>
-					<a :href="`${config.URL}/a/${props.row.identifier}`"
+					<a
+						:href="`${config.URL}/a/${props.row.identifier}`"
 						target="_blank">
 						{{ props.row.identifier }}
 					</a>
 				</b-table-column>
 
-				<b-table-column field="views"
+				<b-table-column
+					field="views"
 					label="Views"
 					centered>
 					{{ props.row.views }}
 				</b-table-column>
 
-				<b-table-column field="enableDownload"
+				<b-table-column
+					field="enableDownload"
 					label="Allow download"
 					centered>
-					<b-switch v-model="props.row.enableDownload"
+					<b-switch
+						v-model="props.row.enableDownload"
 						@input="updateLinkOptions(albumId, props.row)" />
 				</b-table-column>
 
-				<b-table-column field="enabled"
+				<b-table-column
+					field="enabled"
 					numeric>
-					<button :class="{ 'is-loading': isDeleting(props.row.identifier) }"
+					<button
+						:class="{ 'is-loading': isDeleting(props.row.identifier) }"
 						class="button is-danger"
 						:disabled="isDeleting(props.row.identifier)"
-						@click="promptDeleteAlbumLink(albumId, props.row.identifier)">Delete link</button>
+						@click="promptDeleteAlbumLink(albumId, props.row.identifier)">
+						Delete link
+					</button>
 				</b-table-column>
 			</template>
 			<template slot="empty">
@@ -49,10 +58,13 @@
 				<div class="level is-paddingless">
 					<div class="level-left">
 						<div class="level-item">
-							<button :class="{ 'is-loading': isCreatingLink }"
+							<button
+								:class="{ 'is-loading': isCreatingLink }"
 								class="button is-primary"
 								style="float: left"
-								@click="createLink(albumId)">Create new link</button>
+								@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>
@@ -61,9 +73,12 @@
 
 					<div class="level-right">
 						<div class="level-item">
-							<button class="button is-danger"
+							<button
+								class="button is-danger"
 								style="float: right"
-								@click="promptDeleteAlbum(albumId)">Delete album</button>
+								@click="promptDeleteAlbum(albumId)">
+								Delete album
+							</button>
 						</div>
 					</div>
 				</div>
@@ -79,18 +94,18 @@ export default {
 	props: {
 		albumId: {
 			type: Number,
-			default: 0
+			default: 0,
 		},
 		details: {
 			type: Object,
-			default: () => ({})
+			default: () => ({}),
 		},
 	},
 	data() {
 		return {
 			isCreatingLink: false,
 			isDeletingLinks: [],
-		}
+		};
 	},
 	computed: mapState(['config']),
 	methods: {
@@ -99,20 +114,20 @@ export default {
 			deleteAlbumLinkAction: 'albums/deleteLink',
 			updateLinkOptionsAction: 'albums/updateLinkOptions',
 			createLinkAction: 'albums/createLink',
-			alert: 'alert/set'
+			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)
+				onConfirm: () => this.deleteAlbum(id),
 			});
 		},
 		promptDeleteAlbumLink(albumId, identifier) {
 			this.$buefy.dialog.confirm({
 				type: 'is-danger',
 				message: 'Are you sure you want to delete this album link?',
-				onConfirm: () => this.deleteAlbumLink(albumId, identifier)
+				onConfirm: () => this.deleteAlbumLink(albumId, identifier),
 			});
 		},
 		async deleteAlbum(id) {
@@ -122,7 +137,7 @@ export default {
 				this.alert({ text: response.message, error: false });
 			} catch (e) {
 				this.alert({ text: e.message, error: true });
-			} 
+			}
 		},
 		async deleteAlbumLink(albumId, identifier) {
 			this.isDeletingLinks.push(identifier);
@@ -133,7 +148,7 @@ export default {
 			} catch (e) {
 				this.alert({ text: e.message, error: true });
 			} finally {
-				this.isDeletingLinks = this.isDeletingLinks.filter(e => e !== identifier);
+				this.isDeletingLinks = this.isDeletingLinks.filter((e) => e !== identifier);
 			}
 		},
 		async createLink(albumId) {
@@ -155,12 +170,12 @@ export default {
 				this.alert({ text: response.message, error: false });
 			} catch (e) {
 				this.alert({ text: e.message, error: true });
-			} 
+			}
 		},
 		isDeleting(identifier) {
 			return this.isDeletingLinks.indexOf(identifier) > -1;
-		}
-	}
+		},
+	},
 };
 </script>
 
@@ -184,7 +199,6 @@ export default {
 	}
 </style>
 
-
 <style lang="scss">
 	@import '~/assets/styles/_colors.scss';
 
diff --git a/src/site/components/album/AlbumEntry.vue b/src/site/components/album/AlbumEntry.vue
index 28e434a..2723b49 100644
--- a/src/site/components/album/AlbumEntry.vue
+++ b/src/site/components/album/AlbumEntry.vue
@@ -1,8 +1,10 @@
 <template>
 	<div class="album">
-		<div class="arrow-container"
+		<div
+			class="arrow-container"
 			@click="toggleDetails(album)">
-			<i :class="{ active: isExpanded }"
+			<i
+				:class="{ active: isExpanded }"
 				class="icon-arrow" />
 		</div>
 		<div class="thumb">
@@ -12,7 +14,9 @@
 		</div>
 		<div class="info">
 			<h4>
-				<router-link :to="`/dashboard/albums/${album.id}`">{{ album.name }}</router-link>
+				<router-link :to="`/dashboard/albums/${album.id}`">
+					{{ album.name }}
+				</router-link>
 			</h4>
 			<span>
 				Created <span class="is-inline has-text-weight-semibold"><timeago :since="album.createdAt" /></span>
@@ -21,19 +25,24 @@
 		</div>
 		<div class="latest is-hidden-mobile">
 			<template v-if="album.fileCount > 0">
-				<div v-for="file of album.files"
+				<div
+					v-for="file of album.files"
 					:key="file.id"
 					class="thumb">
 					<figure class="image is-64x64">
-						<a :href="file.url"
+						<a
+							:href="file.url"
 							target="_blank">
 							<img :src="file.thumbSquare">
 						</a>
 					</figure>
 				</div>
-				<div v-if="album.fileCount > 5"
+				<div
+					v-if="album.fileCount > 5"
 					class="thumb more no-background">
-					<router-link :to="`/dashboard/albums/${album.id}`">{{ album.fileCount - 5 }}+ more</router-link>
+					<router-link :to="`/dashboard/albums/${album.id}`">
+						{{ album.fileCount - 5 }}+ more
+					</router-link>
 				</div>
 			</template>
 			<template v-else>
@@ -41,7 +50,8 @@
 			</template>
 		</div>
 
-		<AlbumDetails v-if="isExpanded"
+		<AlbumDetails
+			v-if="isExpanded"
 			:details="getDetails(album.id)"
 			:albumId="album.id" />
 	</div>
@@ -53,22 +63,22 @@ import AlbumDetails from '~/components/album/AlbumDetails.vue';
 
 export default {
 	components: {
-		AlbumDetails
+		AlbumDetails,
 	},
 	props: {
 		album: {
 			type: Object,
-			default: () => ({})
-		}
+			default: () => ({}),
+		},
 	},
 	computed: {
 		...mapGetters({
 			isExpandedGetter: 'albums/isExpanded',
-			getDetails: 'albums/getDetails'
+			getDetails: 'albums/getDetails',
 		}),
 		isExpanded() {
 			return this.isExpandedGetter(this.album.id);
-		}
+		},
 	},
 	methods: {
 		async toggleDetails(album) {
@@ -76,8 +86,8 @@ export default {
 				await this.$store.dispatch('albums/fetchDetails', album.id);
 			}
 			this.$store.commit('albums/toggleExpandedState', album.id);
-		}
-	}
+		},
+	},
 };
 </script>
 
@@ -175,4 +185,3 @@ export default {
 
 	div.no-background { background: none !important; }
 </style>
-
diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 42dcc6b..84c0b11 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -163,7 +163,7 @@
 						<hr>
 
 						<div class="albums-container">
-							<div v-for="(album, index) in albums" :key="album.id" class="album">
+							<div v-for="album in albums" :key="album.id" class="album">
 								<div class="field">
 									<b-checkbox
 										:value="isAlbumSelected(album.id)"
@@ -252,7 +252,7 @@ export default {
 	methods: {
 		async search() {
 			const data = await this.$search.do(this.searchTerm, ['name', 'original', 'type', 'albums:name']);
-			console.log('> Search result data', data);
+			console.log('> Search result data', data); // eslint-disable-line no-console
 		},
 		deleteFile(file) {
 			// this.$emit('delete', file);
diff --git a/src/site/components/loading/CubeShadow.vue b/src/site/components/loading/CubeShadow.vue
index af31dac..bbfdb52 100644
--- a/src/site/components/loading/CubeShadow.vue
+++ b/src/site/components/loading/CubeShadow.vue
@@ -1,5 +1,6 @@
 <template>
-	<div :style="styles"
+	<div
+		:style="styles"
 		class="spinner spinner--cube-shadow" />
 </template>
 
@@ -8,16 +9,16 @@ export default {
 	props: {
 		size: {
 			type: String,
-			default: '60px'
+			default: '60px',
 		},
 		background: {
 			type: String,
-			default: '#9C27B0'
+			default: '#9C27B0',
 		},
 		duration: {
 			type: String,
-			default: '1.8s'
-		}
+			default: '1.8s',
+		},
 	},
 	computed: {
 		styles() {
@@ -25,10 +26,10 @@ export default {
 				width: this.size,
 				height: this.size,
 				backgroundColor: this.background,
-				animationDuration: this.duration
+				animationDuration: this.duration,
 			};
-		}
-	}
+		},
+	},
 };
 </script>
 
diff --git a/src/site/components/loading/Origami.vue b/src/site/components/loading/Origami.vue
index d1b523d..cd1c087 100644
--- a/src/site/components/loading/Origami.vue
+++ b/src/site/components/loading/Origami.vue
@@ -1,7 +1,9 @@
 <template>
-	<div :style="styles"
+	<div
+		:style="styles"
 		class="spinner spinner-origami">
-		<div :style="innerStyles"
+		<div
+			:style="innerStyles"
 			class="spinner-inner loading">
 			<span class="slice" />
 			<span class="slice" />
@@ -18,21 +20,21 @@ export default {
 	props: {
 		size: {
 			type: String,
-			default: '40px'
-		}
+			default: '40px',
+		},
 	},
 	computed: {
 		innerStyles() {
-			let size = parseInt(this.size);
+			const size = parseInt(this.size, 10);
 			return { transform: `scale(${(size / 60)})` };
 		},
 		styles() {
 			return {
 				width: this.size,
-				height: this.size
+				height: this.size,
 			};
-		}
-	}
+		},
+	},
 };
 </script>
 
diff --git a/src/site/components/loading/PingPong.vue b/src/site/components/loading/PingPong.vue
index ac33e28..d562e9f 100644
--- a/src/site/components/loading/PingPong.vue
+++ b/src/site/components/loading/PingPong.vue
@@ -1,12 +1,14 @@
 <template>
-	<div :style="styles"
+	<div
+		:style="styles"
 		class="spinner spinner--ping-pong">
-		<div :style="innerStyles"
+		<div
+			:style="innerStyles"
 			class="spinner-inner">
 			<div class="board">
-				<div class="left"/>
-				<div class="right"/>
-				<div class="ball"/>
+				<div class="left" />
+				<div class="right" />
+				<div class="ball" />
 			</div>
 		</div>
 	</div>
@@ -17,22 +19,22 @@ export default {
 	props: {
 		size: {
 			type: String,
-			default: '60px'
-		}
+			default: '60px',
+		},
 	},
 	computed: {
 		innerStyles() {
-			let size = parseInt(this.size);
+			const size = parseInt(this.size, 10);
 			return { transform: `scale(${size / 250})` };
 		},
 		styles() {
 			return {
 				width: this.size,
-				height: this.size
+				height: this.size,
 			};
-		}
-	}
-}
+		},
+	},
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/site/components/loading/RotateSquare.vue b/src/site/components/loading/RotateSquare.vue
index 4da8300..089e01a 100644
--- a/src/site/components/loading/RotateSquare.vue
+++ b/src/site/components/loading/RotateSquare.vue
@@ -1,5 +1,6 @@
 <template>
-	<div :style="styles"
+	<div
+		:style="styles"
 		class="spinner spinner--rotate-square-2" />
 </template>
 
@@ -8,18 +9,18 @@ export default {
 	props: {
 		size: {
 			type: String,
-			default: '40px'
-		}
+			default: '40px',
+		},
 	},
 	computed: {
 		styles() {
 			return {
 				width: this.size,
 				height: this.size,
-				display: 'inline-block'
+				display: 'inline-block',
 			};
-		}
-	}
+		},
+	},
 };
 </script>
 
diff --git a/src/site/components/uploader/Uploader.vue b/src/site/components/uploader/Uploader.vue
index c7be372..7e2d446 100644
--- a/src/site/components/uploader/Uploader.vue
+++ b/src/site/components/uploader/Uploader.vue
@@ -172,6 +172,7 @@ export default {
 				text: 'There was an error uploading this file. Check the console.',
 				error: true,
 			});
+			// eslint-disable-next-line no-console
 			console.error(file, message, xhr);
 		},
 		async dropzoneChunksUploaded(file, done) {
-- 
cgit v1.2.3


From 0f66d807035d3e32a66c7dc9bf55fb3be99aedac Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Fri, 10 Jul 2020 01:13:51 +0300
Subject: refactor: finish refactoring all the components to use vuex

---
 src/site/components/grid/Grid.vue       | 2 +-
 src/site/components/sidebar/Sidebar.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 84c0b11..90c196b 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -287,7 +287,7 @@ export default {
 			} catch (e) {
 				this.$store.dispatch('alert/set', { text: e.message, error: true }, { root: true });
 			}
-			this.showingModalForFile.albums = this.images.filesAlbums[id];
+			this.showingModalForFile.albums = this.images.fileAlbumsMap[id];
 
 			this.isAlbumsModalActive = true;
 		},
diff --git a/src/site/components/sidebar/Sidebar.vue b/src/site/components/sidebar/Sidebar.vue
index 5394fc6..d586122 100644
--- a/src/site/components/sidebar/Sidebar.vue
+++ b/src/site/components/sidebar/Sidebar.vue
@@ -28,7 +28,7 @@
 					<b-icon class="is-pulled-right" :icon="props.expanded ? 'menu-down' : 'menu-up'" />
 				</template>
 				<b-menu-item icon="account" label="Users" tag="nuxt-link" to="/dashboard/admin/users" exact />
-				<b-menu-item icon="cog-outline" label="Settings" disabled />
+				<b-menu-item icon="cog-outline" label="Settings" tag="nuxt-link" to="/dashboard/admin/settings" exact />
 			</b-menu-item>
 			<b-menu-item
 				class="item"
-- 
cgit v1.2.3


From c93ddb09008c45942544b13bbb03319c367f9cd8 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Sun, 19 Jul 2020 22:27:11 +0300
Subject: feat: Start working on a new album/tags/image info modal

---
 src/site/components/grid/Grid.vue             |  32 ++++-
 src/site/components/image-modal/ImageInfo.vue | 179 ++++++++++++++++++++++++++
 src/site/components/imageInfo/ImageInfo.vue   |   0
 3 files changed, 207 insertions(+), 4 deletions(-)
 create mode 100644 src/site/components/image-modal/ImageInfo.vue
 delete mode 100644 src/site/components/imageInfo/ImageInfo.vue

(limited to 'src/site/components')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 90c196b..1b62097 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -75,7 +75,7 @@
 								</a>
 							</b-tooltip>
 							<b-tooltip label="Albums" position="is-top">
-								<a class="btn" @click="openAlbumModal(item)">
+								<a class="btn" @click="handleFileModal(item)">
 									<i class="icon-interface-window" />
 								</a>
 							</b-tooltip>
@@ -121,7 +121,7 @@
 
 						<b-table-column field="purge" centered>
 							<b-tooltip label="Albums" position="is-top">
-								<a class="btn" @click="openAlbumModal(props.row)">
+								<a class="btn" @click="handleFileModal(props.row)">
 									<i class="icon-interface-window" />
 								</a>
 							</b-tooltip>
@@ -153,7 +153,10 @@
 				</template>
 			</b-table>
 		</div>
-		<b-modal :active.sync="isAlbumsModalActive" :width="640" scroll="keep">
+		<b-modal :active.sync="isAlbumsModalActive" scroll="keep">
+			<ImageInfo :file="modalData.file" />
+		</b-modal>
+		<!-- <b-modal :active.sync="isAlbumsModalActive" :width="640" scroll="keep">
 			<div class="card albumsModal">
 				<div class="card-content">
 					<div class="content">
@@ -176,7 +179,7 @@
 					</div>
 				</div>
 			</div>
-		</b-modal>
+		</b-modal> -->
 	</div>
 </template>
 
@@ -184,10 +187,12 @@
 import { mapState } from 'vuex';
 
 import Waterfall from './waterfall/Waterfall.vue';
+import ImageInfo from '~/components/image-modal/ImageInfo.vue';
 
 export default {
 	components: {
 		Waterfall,
+		ImageInfo,
 	},
 	props: {
 		files: {
@@ -230,6 +235,11 @@ export default {
 			filesOffsetWaterfall: 0,
 			filesOffsetEndWaterfall: 50,
 			filesPerPageWaterfall: 50,
+			modalData: {
+				file: null,
+				tags: null,
+				albums: null,
+			},
 		};
 	},
 	computed: {
@@ -318,6 +328,20 @@ export default {
 				this.$store.dispatch('alert/set', { text: e.message, error: true }, { root: true });
 			}
 		},
+		async handleFileModal(file) {
+			const { id } = file;
+
+			try {
+				await this.$store.dispatch('images/fetchFileMeta', id);
+				this.modalData.file = this.images.fileExtraInfoMap[id];
+				this.modalData.albums = this.images.fileAlbumsMap[id];
+				this.modalData.tags = this.images.fileTagsMap[id];
+			} catch (e) {
+				this.$store.dispatch('alert/set', { text: e.message, error: true }, { root: true });
+			}
+
+			this.isAlbumsModalActive = true;
+		},
 		mouseOver(id) {
 			const foundIndex = this.hoveredItems.indexOf(id);
 			if (foundIndex > -1) return;
diff --git a/src/site/components/image-modal/ImageInfo.vue b/src/site/components/image-modal/ImageInfo.vue
new file mode 100644
index 0000000..c9dba1a
--- /dev/null
+++ b/src/site/components/image-modal/ImageInfo.vue
@@ -0,0 +1,179 @@
+<template>
+	<div class="container has-background-lolisafe">
+		<div class="columns is-marginless">
+			<div class="column fucking-opl-shut-up">
+				<img src="https://placehold.it/1024x10024">
+			</div>
+			<div class="column is-one-third">
+				<div class="sticky">
+					<div class="divider is-lolisafe has-text-light">
+						File information
+					</div>
+					<b-field
+						label="ID"
+						label-position="on-border"
+						type="is-lolisafe"
+						class="lolisafe-on-border">
+						<div class="control">
+							<span class="fake-input">{{ file.id }}</span>
+						</div>
+					</b-field>
+					<b-field
+						label="Name"
+						label-position="on-border"
+						type="is-lolisafe"
+						class="lolisafe-on-border">
+						<div class="control">
+							<span class="fake-input">{{ file.name }}</span>
+						</div>
+					</b-field>
+
+					<b-field
+						label="Original Name"
+						label-position="on-border"
+						type="is-lolisafe"
+						class="lolisafe-on-border">
+						<div class="control">
+							<span class="fake-input">{{ file.original }}</span>
+						</div>
+					</b-field>
+
+					<b-field
+						label="IP"
+						label-position="on-border"
+						type="is-lolisafe"
+						class="lolisafe-on-border">
+						<div class="control">
+							<span class="fake-input">{{ file.ip }}</span>
+						</div>
+					</b-field>
+
+					<b-field
+						label="Link"
+						label-position="on-border"
+						type="is-lolisafe"
+						class="lolisafe-on-border">
+						<div class="control">
+							<a
+								class="fake-input"
+								:href="file.url"
+								target="_blank">{{ file.url }}</a>
+						</div>
+					</b-field>
+
+					<b-field
+						label="Size"
+						label-position="on-border"
+						type="is-lolisafe"
+						class="lolisafe-on-border">
+						<div class="control">
+							<span class="fake-input">{{ formatBytes(file.size) }}</span>
+						</div>
+					</b-field>
+
+					<b-field
+						label="Hash"
+						label-position="on-border"
+						type="is-lolisafe"
+						class="lolisafe-on-border">
+						<div class="control">
+							<span class="fake-input">{{ file.hash }}</span>
+						</div>
+					</b-field>
+
+					<b-field
+						label="Uploaded"
+						label-position="on-border"
+						type="is-lolisafe"
+						class="lolisafe-on-border">
+						<div class="control">
+							<span class="fake-input"><timeago :since="file.createdAt" /></span>
+						</div>
+					</b-field>
+					<div class="divider is-lolisafe has-text-light">
+						Albums
+					</div>
+
+					<div class="divider is-lolisafe has-text-light">
+						Tags
+					</div>
+					<b-field label="Add some tags">
+						<b-taginput
+							v-model="tags"
+							class="lolisafe"
+							ellipsis
+							icon="label"
+							placeholder="Add a tag" />
+					</b-field>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+
+export default {
+	props: {
+		file: {
+			type: Object,
+			default: () => ({}),
+		},
+	},
+	data() {
+		return {
+			tags: [],
+		};
+	},
+	computed: mapState(['images']),
+	methods: {
+		formatBytes(bytes, decimals = 2) {
+			if (bytes === 0) return '0 Bytes';
+
+			const k = 1024;
+			const dm = decimals < 0 ? 0 : decimals;
+			const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+
+			const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+			return `${parseFloat((bytes / k ** i).toFixed(dm))} ${sizes[i]}`;
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+@import '~/assets/styles/_colors.scss';
+.modal-content, .modal-card {
+	max-height: 100%;
+}
+
+.fake-input {
+	font-size: 1rem !important;
+	height: 2.5rem;
+	border-color: #323846; /* $lolisafe */
+	max-width: 100%;
+	width: 100%;
+    border-radius: 4px;
+    display: inline-block;
+    font-size: 1rem;
+    justify-content: flex-start;
+    line-height: 1.5;
+    padding-bottom: calc(0.375em - 1px);
+    padding-left: calc(0.625em - 1px);
+    padding-right: calc(0.625em - 1px);
+    padding-top: calc(0.375em - 1px);
+	background-color: #21252d;
+	border: 2px solid #21252d;
+	border-radius: 0.3em !important;
+
+	text-overflow: ellipsis;
+	overflow: hidden;
+	white-space: nowrap;
+}
+
+.divider:first-child {
+    margin: 10px 0 25px;
+}
+</style>
diff --git a/src/site/components/imageInfo/ImageInfo.vue b/src/site/components/imageInfo/ImageInfo.vue
deleted file mode 100644
index e69de29..0000000
-- 
cgit v1.2.3


From 18bb451f793677a5bbfdc2c14128bae33c66dfde Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Mon, 20 Jul 2020 23:01:45 +0300
Subject: feat: implement all-in-one file detail viewer, tag editor and album
 selection modal

---
 src/site/components/grid/Grid.vue                |  71 +++++++---------
 src/site/components/grid/waterfall/Waterfall.vue |   3 +-
 src/site/components/image-modal/AlbumInfo.vue    |  73 ++++++++++++++++
 src/site/components/image-modal/ImageInfo.vue    |  61 ++++++++++----
 src/site/components/image-modal/TagInfo.vue      | 103 +++++++++++++++++++++++
 5 files changed, 252 insertions(+), 59 deletions(-)
 create mode 100644 src/site/components/image-modal/AlbumInfo.vue
 create mode 100644 src/site/components/image-modal/TagInfo.vue

(limited to 'src/site/components')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 1e427fc..d29160f 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -6,6 +6,7 @@
 					<slot name="pagination" />
 				</div>
 			</div>
+			<!-- TODO: Externalize this so it can be saved as an user config (and between re-renders) -->
 			<div v-if="enableToolbar" class="level-right toolbar">
 				<div class="level-item">
 					<div class="block">
@@ -66,27 +67,22 @@
 							@mouseleave.self.stop.prevent="item.preview && mouseOut(item.id)">
 							<b-tooltip label="Link" position="is-top">
 								<a :href="`${item.url}`" target="_blank" class="btn">
-									<i class="icon-web-code" />
+									<i class="mdi mdi-open-in-new" />
 								</a>
 							</b-tooltip>
-							<b-tooltip label="Tags" position="is-top">
-								<a class="btn" @click="false && manageTags(item)">
-									<i class="icon-ecommerce-tag-c" />
-								</a>
-							</b-tooltip>
-							<b-tooltip label="Albums" position="is-top">
+							<b-tooltip label="Edit" position="is-top">
 								<a class="btn" @click="handleFileModal(item)">
-									<i class="icon-interface-window" />
+									<i class="mdi mdi-pencil" />
 								</a>
 							</b-tooltip>
 							<b-tooltip label="Delete" position="is-top">
 								<a class="btn" @click="deleteFile(item)">
-									<i class="icon-editorial-trash-a-l" />
+									<i class="mdi mdi-delete" />
 								</a>
 							</b-tooltip>
 							<b-tooltip v-if="user && user.isAdmin" label="More info" position="is-top" class="more">
 								<nuxt-link :to="`/dashboard/admin/file/${item.id}`">
-									<i class="icon-interface-more" />
+									<i class="mdi mdi-dots-horizontal" />
 								</nuxt-link>
 							</b-tooltip>
 						</div>
@@ -120,19 +116,19 @@
 						</b-table-column>
 
 						<b-table-column field="purge" centered>
-							<b-tooltip label="Albums" position="is-top">
+							<b-tooltip label="Edit" position="is-top">
 								<a class="btn" @click="handleFileModal(props.row)">
-									<i class="icon-interface-window" />
+									<i class="mdi mdi-pencil" />
 								</a>
 							</b-tooltip>
 							<b-tooltip label="Delete" position="is-top" class="is-danger">
 								<a class="is-danger" @click="deleteFile(props.row)">
-									<i class="icon-editorial-trash-a-l" />
+									<i class="mdi mdi-delete" />
 								</a>
 							</b-tooltip>
 							<b-tooltip v-if="user && user.isAdmin" label="More info" position="is-top" class="more">
 								<nuxt-link :to="`/dashboard/admin/file/${props.row.id}`">
-									<i class="icon-interface-more" />
+									<i class="mdi mdi-dots-horizontal" />
 								</nuxt-link>
 							</b-tooltip>
 						</b-table-column>
@@ -159,33 +155,10 @@
 				Load more
 			</button>
 		</div>
-		<b-modal :active.sync="isAlbumsModalActive" scroll="keep">
-			<ImageInfo :file="modalData.file" />
+
+		<b-modal class="imageinfo-modal" :active.sync="isAlbumsModalActive">
+			<ImageInfo :file="modalData.file" :albums="modalData.albums" :tags="modalData.tags" />
 		</b-modal>
-		<!-- <b-modal :active.sync="isAlbumsModalActive" :width="640" scroll="keep">
-			<div class="card albumsModal">
-				<div class="card-content">
-					<div class="content">
-						<h3 class="subtitle">
-							Select the albums this file should be a part of
-						</h3>
-						<hr>
-
-						<div class="albums-container">
-							<div v-for="album in albums" :key="album.id" class="album">
-								<div class="field">
-									<b-checkbox
-										:value="isAlbumSelected(album.id)"
-										@input="albumCheckboxClicked($event, album.id)">
-										{{ album.name }}
-									</b-checkbox>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</b-modal> -->
 	</div>
 </template>
 
@@ -263,7 +236,9 @@ export default {
 		},
 	},
 	created() {
+		// TODO: Create a middleware for this
 		this.getAlbums();
+		this.getTags();
 	},
 	methods: {
 		async search() {
@@ -348,6 +323,13 @@ export default {
 
 			this.isAlbumsModalActive = true;
 		},
+		async getTags() {
+			try {
+				await this.$store.dispatch('tags/fetch');
+			} catch (e) {
+				this.$store.dispatch('alert/set', { text: e.message, error: true }, { root: true });
+			}
+		},
 		mouseOver(id) {
 			const foundIndex = this.hoveredItems.indexOf(id);
 			if (foundIndex > -1) return;
@@ -504,4 +486,13 @@ div.actions {
 		opacity: 1;
 	}
 }
+
+.imageinfo-modal::-webkit-scrollbar {
+    width: 0px;  /* Remove scrollbar space */
+    background: transparent;  /* Optional: just make scrollbar invisible */
+}
+
+i.mdi {
+	font-size: 16px;
+}
 </style>
diff --git a/src/site/components/grid/waterfall/Waterfall.vue b/src/site/components/grid/waterfall/Waterfall.vue
index 79a330a..762cbbd 100644
--- a/src/site/components/grid/waterfall/Waterfall.vue
+++ b/src/site/components/grid/waterfall/Waterfall.vue
@@ -1,7 +1,7 @@
 <template>
 	<div ref="waterfall" class="waterfall">
 		<WaterfallItem
-			v-for="(item, index) in items"
+			v-for="item in items"
 			:key="item.id"
 			:style="{ width: `${itemWidth}px`, marginBottom: `${gutterHeight}px` }"
 			:width="itemWidth">
@@ -13,6 +13,7 @@
 import WaterfallItem from './WaterfallItem.vue';
 
 const isBrowser = typeof window !== 'undefined';
+// eslint-disable-next-line global-require
 const Masonry = isBrowser ? window.Masonry || require('masonry-layout') : null;
 const imagesloaded = isBrowser ? require('imagesloaded') : null;
 
diff --git a/src/site/components/image-modal/AlbumInfo.vue b/src/site/components/image-modal/AlbumInfo.vue
new file mode 100644
index 0000000..9d57e55
--- /dev/null
+++ b/src/site/components/image-modal/AlbumInfo.vue
@@ -0,0 +1,73 @@
+<template>
+	<b-dropdown
+		v-model="selectedOptions"
+		multiple
+		expanded
+		scrollable
+		inline
+		aria-role="list"
+		max-height="500px">
+		<button slot="trigger" class="button is-primary" type="button">
+			<span>Albums ({{ selectedOptions.length }})</span>
+			<b-icon icon="menu-down" />
+		</button>
+
+		<b-dropdown-item
+			v-for="album in albums"
+			:key="album.id"
+			:value="album.id"
+			aria-role="listitem"
+			@click="handleClick(album.id)">
+			<span>{{ album. name }}</span>
+		</b-dropdown-item>
+	</b-dropdown>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+
+export default {
+	name: 'Albuminfo',
+	props: {
+		imageId: {
+			type: Number,
+			default: 0,
+		},
+		imageAlbums: {
+			type: Array,
+			default: () => [],
+		},
+	},
+	data() {
+		return {
+			selectedOptions: this.imageAlbums.map((e) => e.id),
+		};
+	},
+	computed: {
+		...mapState({
+			albums: (state) => state.albums.tinyDetails,
+		}),
+	},
+	methods: {
+		isAlbumSelected(id) {
+			if (!this.showingModalForFile) return false;
+			const found = this.showingModalForFile.albums.find((el) => el.id === id);
+			return !!(found && found.id);
+		},
+		async handleClick(id) {
+			// here the album should be already removed from the selected list
+			if (this.selectedOptions.indexOf(id) > -1) {
+				this.$handler.executeAction('images/addToAlbum', {
+					albumId: id,
+					fileId: this.imageId,
+				});
+			} else {
+				this.$handler.executeAction('images/removeFromAlbum', {
+					albumId: id,
+					fileId: this.imageId,
+				});
+			}
+		},
+	},
+};
+</script>
diff --git a/src/site/components/image-modal/ImageInfo.vue b/src/site/components/image-modal/ImageInfo.vue
index c9dba1a..c3f0041 100644
--- a/src/site/components/image-modal/ImageInfo.vue
+++ b/src/site/components/image-modal/ImageInfo.vue
@@ -1,10 +1,13 @@
 <template>
 	<div class="container has-background-lolisafe">
 		<div class="columns is-marginless">
-			<div class="column fucking-opl-shut-up">
-				<img src="https://placehold.it/1024x10024">
+			<div class="column image-col has-centered-items">
+				<img v-if="!isVideo(file.type)" class="col-img" :src="file.url">
+				<video v-else class="col-vid" controls>
+					<source :src="file.url" :type="file.type">
+				</video>
 			</div>
-			<div class="column is-one-third">
+			<div class="column data-col is-one-third">
 				<div class="sticky">
 					<div class="divider is-lolisafe has-text-light">
 						File information
@@ -90,21 +93,16 @@
 							<span class="fake-input"><timeago :since="file.createdAt" /></span>
 						</div>
 					</b-field>
+
 					<div class="divider is-lolisafe has-text-light">
-						Albums
+						Tags
 					</div>
+					<Taginfo :imageId="file.id" :imageTags="tags" />
 
 					<div class="divider is-lolisafe has-text-light">
-						Tags
+						Albums
 					</div>
-					<b-field label="Add some tags">
-						<b-taginput
-							v-model="tags"
-							class="lolisafe"
-							ellipsis
-							icon="label"
-							placeholder="Add a tag" />
-					</b-field>
+					<Albuminfo :imageId="file.id" :imageAlbums="albums" />
 				</div>
 			</div>
 		</div>
@@ -114,17 +112,27 @@
 <script>
 import { mapState } from 'vuex';
 
+import Albuminfo from './AlbumInfo.vue';
+import Taginfo from './TagInfo.vue';
+
 export default {
+	components: {
+		Taginfo,
+		Albuminfo,
+	},
 	props: {
 		file: {
 			type: Object,
 			default: () => ({}),
 		},
-	},
-	data() {
-		return {
-			tags: [],
-		};
+		albums: {
+			type: Array,
+			default: () => ([]),
+		},
+		tags: {
+			type: Array,
+			default: () => ([]),
+		},
 	},
 	computed: mapState(['images']),
 	methods: {
@@ -139,6 +147,9 @@ export default {
 
 			return `${parseFloat((bytes / k ** i).toFixed(dm))} ${sizes[i]}`;
 		},
+		isVideo(type) {
+			return type.startsWith('video');
+		},
 	},
 };
 </script>
@@ -176,4 +187,18 @@ export default {
 .divider:first-child {
     margin: 10px 0 25px;
 }
+
+.col-vid {
+	width: 100%;
+}
+
+.image-col {
+	align-items: start;
+}
+
+.data-col  {
+	@media screen and (min-width: 769px) {
+		padding-right: 1.5rem;
+	}
+}
 </style>
diff --git a/src/site/components/image-modal/TagInfo.vue b/src/site/components/image-modal/TagInfo.vue
new file mode 100644
index 0000000..2054e6a
--- /dev/null
+++ b/src/site/components/image-modal/TagInfo.vue
@@ -0,0 +1,103 @@
+<template>
+	<b-field label="Add some tags">
+		<b-taginput
+			:value="selectedTags"
+			:data="filteredTags"
+			class="lolisafe taginp"
+			ellipsis
+			icon="label"
+			placeholder="Add a tag"
+			autocomplete
+			allow-new
+			@typing="getFilteredTags"
+			@add="tagAdded"
+			@remove="tagRemoved" />
+	</b-field>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+
+export default {
+	name: 'Taginfo',
+	props: {
+		imageId: {
+			type: Number,
+			default: 0,
+		},
+		imageTags: {
+			type: Array,
+			default: () => [],
+		},
+	},
+	data() {
+		return {
+			filteredTags: [],
+		};
+	},
+	computed: {
+		...mapState({
+			tags: (state) => state.tags.tagsList,
+		}),
+		selectedTags() { return this.imageTags.map((e) => e.name); },
+		lowercaseTags() { return this.imageTags.map((e) => e.name.toLowerCase()); },
+	},
+	methods: {
+		getFilteredTags(str) {
+			this.filteredTags = this.tags.map((e) => e.name).filter((e) => {
+				// check if the search string matches any of the tags
+				const sanitezedTag = e.toString().toLowerCase();
+				const matches = sanitezedTag.indexOf(str.toLowerCase()) >= 0;
+
+				// check if this tag is already added to our image, to avoid duplicates
+				if (matches) {
+					const foundIndex = this.lowercaseTags.indexOf(sanitezedTag);
+					if (foundIndex === -1) {
+						return true;
+					}
+				}
+
+				return false;
+			});
+		},
+		async tagAdded(tag) {
+			if (!tag) return;
+
+			// normalize into NFC form (diactirics and moonrunes)
+			// replace all whitespace with _
+			// replace multiple __ with a single one
+			tag = tag.normalize('NFC').replace(/\s/g, '_').replace(/_+/g, '_');
+
+			const foundIndex = this.tags.findIndex(({ name }) => name === tag);
+
+			if (foundIndex === -1) {
+				await this.$handler.executeAction('tags/createTag', tag);
+			}
+
+			await this.$handler.executeAction('images/addTag', { fileId: this.imageId, tagName: tag });
+		},
+		tagRemoved(tag) {
+			this.$handler.executeAction('images/removeTag', { fileId: this.imageId, tagName: tag });
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+@import '~/assets/styles/_colors.scss';
+
+.taginp {
+	::v-deep .dropdown-content {
+		background-color: hsl(0, 0%, 100%);
+
+		.dropdown-item {
+			color: hsl(0, 0%, 29%);
+
+			&:hover {
+				color: hsl(0, 0%, 4%);
+				background-color: hsl(0, 0%, 90%);
+			}
+		}
+	}
+}
+</style>
-- 
cgit v1.2.3


From 93478a334b526703797cd3d759a70c18e6c6bb5a Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Tue, 21 Jul 2020 15:45:28 +0300
Subject: fix: make modal use full height on mobile

---
 src/site/components/grid/Grid.vue             | 14 ++++++++------
 src/site/components/image-modal/ImageInfo.vue |  3 +++
 2 files changed, 11 insertions(+), 6 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index d29160f..7170709 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -148,12 +148,6 @@
 					</div>
 				</template>
 			</b-table>
-			<button
-				v-if="moreFiles"
-				class="button is-primary mt2"
-				@click="loadMoreFiles">
-				Load more
-			</button>
 		</div>
 
 		<b-modal class="imageinfo-modal" :active.sync="isAlbumsModalActive">
@@ -495,4 +489,12 @@ div.actions {
 i.mdi {
 	font-size: 16px;
 }
+
+.imageinfo-modal{
+	::v-deep .modal-content {
+		@media screen and (max-width: 768px) {
+			min-height: 100vh;
+		}
+	}
+}
 </style>
diff --git a/src/site/components/image-modal/ImageInfo.vue b/src/site/components/image-modal/ImageInfo.vue
index c3f0041..485a8aa 100644
--- a/src/site/components/image-modal/ImageInfo.vue
+++ b/src/site/components/image-modal/ImageInfo.vue
@@ -200,5 +200,8 @@ export default {
 	@media screen and (min-width: 769px) {
 		padding-right: 1.5rem;
 	}
+	@media screen and (max-width: 769px) {
+		padding-bottom: 3rem;
+	}
 }
 </style>
-- 
cgit v1.2.3


From 1a4744de3cfe74524cd0415416fa9da0a322e86c Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Wed, 22 Jul 2020 02:12:24 +0300
Subject: feat: show selected albums first when modal is first opened

fix: change the color of the dropdown for tags to match the base theme
chore: pass props into some of the components instead of fetching from store inside of components
---
 src/site/components/image-modal/AlbumInfo.vue | 33 +++++++++++++++++++++------
 src/site/components/image-modal/ImageInfo.vue |  7 ++++--
 src/site/components/image-modal/TagInfo.vue   | 12 ++--------
 3 files changed, 33 insertions(+), 19 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/image-modal/AlbumInfo.vue b/src/site/components/image-modal/AlbumInfo.vue
index 9d57e55..8974a11 100644
--- a/src/site/components/image-modal/AlbumInfo.vue
+++ b/src/site/components/image-modal/AlbumInfo.vue
@@ -13,12 +13,12 @@
 		</button>
 
 		<b-dropdown-item
-			v-for="album in albums"
+			v-for="album in orderedAlbums"
 			:key="album.id"
 			:value="album.id"
 			aria-role="listitem"
 			@click="handleClick(album.id)">
-			<span>{{ album. name }}</span>
+			<span>{{ album.name }}</span>
 		</b-dropdown-item>
 	</b-dropdown>
 </template>
@@ -37,18 +37,37 @@ export default {
 			type: Array,
 			default: () => [],
 		},
+		albums: {
+			type: Array,
+			default: () => [],
+		},
 	},
 	data() {
 		return {
-			selectedOptions: this.imageAlbums.map((e) => e.id),
+			selectedOptions: [],
+			orderedAlbums: [],
 		};
 	},
-	computed: {
-		...mapState({
-			albums: (state) => state.albums.tinyDetails,
-		}),
+	created() {
+		this.orderedAlbums = this.getOrderedAlbums();
+		// we're sorting here instead of computed because we want sort on creation
+		// then the array's values should be frozen
+		this.selectedOptions = this.imageAlbums.map((e) => e.id);
 	},
 	methods: {
+		getOrderedAlbums() {
+			return [...this.albums].sort(
+				(a, b) => {
+					const selectedA = this.imageAlbums.findIndex(({ name }) => name === a.name) !== -1;
+					const selectedB = this.imageAlbums.findIndex(({ name }) => name === b.name) !== -1;
+
+					if (selectedA !== selectedB) {
+						return selectedA ? -1 : 1;
+					}
+					return a.name.localeCompare(b.name);
+				},
+			);
+		},
 		isAlbumSelected(id) {
 			if (!this.showingModalForFile) return false;
 			const found = this.showingModalForFile.albums.find((el) => el.id === id);
diff --git a/src/site/components/image-modal/ImageInfo.vue b/src/site/components/image-modal/ImageInfo.vue
index 485a8aa..0562e1f 100644
--- a/src/site/components/image-modal/ImageInfo.vue
+++ b/src/site/components/image-modal/ImageInfo.vue
@@ -102,7 +102,7 @@
 					<div class="divider is-lolisafe has-text-light">
 						Albums
 					</div>
-					<Albuminfo :imageId="file.id" :imageAlbums="albums" />
+					<Albuminfo :imageId="file.id" :imageAlbums="albums" :albums="tinyDetails" />
 				</div>
 			</div>
 		</div>
@@ -134,7 +134,10 @@ export default {
 			default: () => ([]),
 		},
 	},
-	computed: mapState(['images']),
+	computed: mapState({
+		images: (state) => state.images,
+		tinyDetails: (state) => state.albums.tinyDetails,
+	}),
 	methods: {
 		formatBytes(bytes, decimals = 2) {
 			if (bytes === 0) return '0 Bytes';
diff --git a/src/site/components/image-modal/TagInfo.vue b/src/site/components/image-modal/TagInfo.vue
index 2054e6a..a337148 100644
--- a/src/site/components/image-modal/TagInfo.vue
+++ b/src/site/components/image-modal/TagInfo.vue
@@ -88,16 +88,8 @@ export default {
 
 .taginp {
 	::v-deep .dropdown-content {
-		background-color: hsl(0, 0%, 100%);
-
-		.dropdown-item {
-			color: hsl(0, 0%, 29%);
-
-			&:hover {
-				color: hsl(0, 0%, 4%);
-				background-color: hsl(0, 0%, 90%);
-			}
-		}
+		background-color: #323846;
+		box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
 	}
 }
 </style>
-- 
cgit v1.2.3


From 01c04298b0fdcd7165f5532de57e407a853c748b Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Wed, 22 Jul 2020 02:12:40 +0300
Subject: fix: add no-active class

---
 src/site/components/navbar/Navbar.vue | 4 ++++
 1 file changed, 4 insertions(+)

(limited to 'src/site/components')

diff --git a/src/site/components/navbar/Navbar.vue b/src/site/components/navbar/Navbar.vue
index 0f82200..1b1f10e 100644
--- a/src/site/components/navbar/Navbar.vue
+++ b/src/site/components/navbar/Navbar.vue
@@ -137,4 +137,8 @@ export default {
 			}
 		}
 	}
+
+	.no-active {
+		text-decoration: none !important;
+	}
 </style>
-- 
cgit v1.2.3


From 279234a081e5ea772978732ae5d2e45d8adcd741 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Wed, 22 Jul 2020 02:14:06 +0300
Subject: feat: add new search input

For now, it clones the autocomplete from buefy, untill a PR or resolution to the opened issue about not being able to manipulate how the suggestions are applied is found
---
 src/site/components/search-input/SearchInput.vue | 516 +++++++++++++++++++++++
 src/site/components/search/Search.vue            | 119 ++++++
 2 files changed, 635 insertions(+)
 create mode 100644 src/site/components/search-input/SearchInput.vue
 create mode 100644 src/site/components/search/Search.vue

(limited to 'src/site/components')

diff --git a/src/site/components/search-input/SearchInput.vue b/src/site/components/search-input/SearchInput.vue
new file mode 100644
index 0000000..abc433a
--- /dev/null
+++ b/src/site/components/search-input/SearchInput.vue
@@ -0,0 +1,516 @@
+<template>
+	<div
+		class="autocomplete control"
+		:class="{'is-expanded': expanded}">
+		<b-input
+			ref="input"
+			v-model="newValue"
+			type="text"
+			:size="size"
+			:loading="loading"
+			:rounded="rounded"
+			:icon="icon"
+			:icon-right="newIconRight"
+			:icon-right-clickable="newIconRightClickable"
+			:icon-pack="iconPack"
+			:maxlength="maxlength"
+			:autocomplete="newAutocomplete"
+			:use-html5-validation="false"
+			v-bind="$attrs"
+			@input="onInput"
+			@focus="focused"
+			@blur="onBlur"
+			@keyup.native.esc.prevent="isActive = false"
+			@keydown.native.tab="tabPressed"
+			@keydown.native.enter.prevent="enterPressed"
+			@keydown.native.up.prevent="keyArrows('up')"
+			@keydown.native.down.prevent="keyArrows('down')"
+			@icon-right-click="rightIconClick"
+			@icon-click="(event) => $emit('icon-click', event)" />
+
+		<transition name="fade">
+			<div
+				v-show="isActive && (data.length > 0 || hasEmptySlot || hasHeaderSlot)"
+				ref="dropdown"
+				class="dropdown-menu"
+				:class="{ 'is-opened-top': isOpenedTop && !appendToBody }"
+				:style="style">
+				<div
+					v-show="isActive"
+					class="dropdown-content"
+					:style="contentStyle">
+					<div
+						v-if="hasHeaderSlot"
+						class="dropdown-item">
+						<slot name="header" />
+					</div>
+					<a
+						v-for="(option, index) in data"
+						:key="index"
+						class="dropdown-item"
+						:class="{ 'is-hovered': option === hovered }"
+						@click="setSelected(option, undefined, $event)">
+
+						<slot
+							v-if="hasDefaultSlot"
+							:option="option"
+							:index="index" />
+						<span v-else>
+							{{ getValue(option, true) }}
+						</span>
+					</a>
+					<div
+						v-if="data.length === 0 && hasEmptySlot"
+						class="dropdown-item is-disabled">
+						<slot name="empty" />
+					</div>
+					<div
+						v-if="hasFooterSlot"
+						class="dropdown-item">
+						<slot name="footer" />
+					</div>
+				</div>
+			</div>
+		</transition>
+	</div>
+</template>
+
+<script>
+/* eslint-disable no-underscore-dangle */
+/* eslint-disable vue/require-default-prop */
+/* eslint-disable vue/no-reserved-keys */
+import { getValueByPath, removeElement, createAbsoluteElement } from '../../../../node_modules/buefy/src/utils/helpers';
+import FormElementMixin from '../../../../node_modules/buefy/src/utils/FormElementMixin';
+
+export default {
+	name: 'SearchInput',
+	mixins: [FormElementMixin],
+	inheritAttrs: false,
+	props: {
+		value: [Number, String],
+		data: {
+			type: Array,
+			default: () => [],
+		},
+		field: {
+			type: String,
+			default: 'value',
+		},
+		keepFirst: Boolean,
+		clearOnSelect: Boolean,
+		openOnFocus: Boolean,
+		customFormatter: Function,
+		checkInfiniteScroll: Boolean,
+		keepOpen: Boolean,
+		clearable: Boolean,
+		maxHeight: [String, Number],
+		dropdownPosition: {
+			type: String,
+			default: 'auto',
+		},
+		iconRight: String,
+		iconRightClickable: Boolean,
+		appendToBody: Boolean,
+		customSelector: Function,
+	},
+	data() {
+		return {
+			selected: null,
+			hovered: null,
+			isActive: false,
+			newValue: this.value,
+			newAutocomplete: this.autocomplete || 'off',
+			isListInViewportVertically: true,
+			hasFocus: false,
+			style: {},
+			_isAutocomplete: true,
+			_elementRef: 'input',
+			_bodyEl: undefined, // Used to append to body
+		};
+	},
+	computed: {
+		/**
+         * White-listed items to not close when clicked.
+         * Add input, dropdown and all children.
+         */
+		whiteList() {
+			const whiteList = [];
+			whiteList.push(this.$refs.input.$el.querySelector('input'));
+			whiteList.push(this.$refs.dropdown);
+			// Add all chidren from dropdown
+			if (this.$refs.dropdown !== undefined) {
+				const children = this.$refs.dropdown.querySelectorAll('*');
+				for (const child of children) {
+					whiteList.push(child);
+				}
+			}
+			if (this.$parent.$data._isTaginput) {
+				// Add taginput container
+				whiteList.push(this.$parent.$el);
+				// Add .tag and .delete
+				const tagInputChildren = this.$parent.$el.querySelectorAll('*');
+				for (const tagInputChild of tagInputChildren) {
+					whiteList.push(tagInputChild);
+				}
+			}
+			return whiteList;
+		},
+		/**
+         * Check if exists default slot
+         */
+		hasDefaultSlot() {
+			return !!this.$scopedSlots.default;
+		},
+		/**
+         * Check if exists "empty" slot
+         */
+		hasEmptySlot() {
+			return !!this.$slots.empty;
+		},
+		/**
+         * Check if exists "header" slot
+         */
+		hasHeaderSlot() {
+			return !!this.$slots.header;
+		},
+		/**
+         * Check if exists "footer" slot
+         */
+		hasFooterSlot() {
+			return !!this.$slots.footer;
+		},
+		/**
+         * Apply dropdownPosition property
+         */
+		isOpenedTop() {
+			return this.dropdownPosition === 'top' || (this.dropdownPosition === 'auto' && !this.isListInViewportVertically);
+		},
+		newIconRight() {
+			if (this.clearable && this.newValue) {
+				return 'close-circle';
+			}
+			return this.iconRight;
+		},
+		newIconRightClickable() {
+			if (this.clearable) {
+				return true;
+			}
+			return this.iconRightClickable;
+		},
+		contentStyle() {
+			return {
+				// eslint-disable-next-line no-nested-ternary
+				maxHeight: this.maxHeight === undefined
+					// eslint-disable-next-line no-restricted-globals
+					? null : (isNaN(this.maxHeight) ? this.maxHeight : `${this.maxHeight}px`),
+			};
+		},
+	},
+	watch: {
+		/**
+         * When dropdown is toggled, check the visibility to know when
+         * to open upwards.
+         */
+		isActive(active) {
+			if (this.dropdownPosition === 'auto') {
+				if (active) {
+					this.calcDropdownInViewportVertical();
+				} else {
+					// Timeout to wait for the animation to finish before recalculating
+					setTimeout(() => {
+						this.calcDropdownInViewportVertical();
+					}, 100);
+				}
+			}
+			if (active) this.$nextTick(() => this.setHovered(null));
+		},
+		/**
+         * When updating input's value
+         *   1. Emit changes
+         *   2. If value isn't the same as selected, set null
+         *   3. Close dropdown if value is clear or else open it
+         */
+		newValue(value) {
+			this.$emit('input', value);
+			// Check if selected is invalid
+			const currentValue = this.getValue(this.selected);
+			if (currentValue && currentValue !== value) {
+				this.setSelected(null, false);
+			}
+			// Close dropdown if input is clear or else open it
+			if (this.hasFocus && (!this.openOnFocus || value)) {
+				this.isActive = !!value;
+			}
+		},
+		/**
+         * When v-model is changed:
+         *   1. Update internal value.
+         *   2. If it's invalid, validate again.
+         */
+		value(value) {
+			this.newValue = value;
+		},
+		/**
+         * Select first option if "keep-first
+         */
+		data(value) {
+			// Keep first option always pre-selected
+			if (this.keepFirst) {
+				this.selectFirstOption(value);
+			}
+		},
+	},
+	created() {
+		if (typeof window !== 'undefined') {
+			document.addEventListener('click', this.clickedOutside);
+			if (this.dropdownPosition === 'auto') window.addEventListener('resize', this.calcDropdownInViewportVertical);
+		}
+	},
+	mounted() {
+		if (this.checkInfiniteScroll && this.$refs.dropdown && this.$refs.dropdown.querySelector('.dropdown-content')) {
+			const list = this.$refs.dropdown.querySelector('.dropdown-content');
+			list.addEventListener('scroll', () => this.checkIfReachedTheEndOfScroll(list));
+		}
+		if (this.appendToBody) {
+			this.$data._bodyEl = createAbsoluteElement(this.$refs.dropdown);
+			this.updateAppendToBody();
+		}
+	},
+	beforeDestroy() {
+		if (typeof window !== 'undefined') {
+			document.removeEventListener('click', this.clickedOutside);
+			if (this.dropdownPosition === 'auto') window.removeEventListener('resize', this.calcDropdownInViewportVertical);
+		}
+		if (this.checkInfiniteScroll && this.$refs.dropdown && this.$refs.dropdown.querySelector('.dropdown-content')) {
+			const list = this.$refs.dropdown.querySelector('.dropdown-content');
+			list.removeEventListener('scroll', this.checkIfReachedTheEndOfScroll);
+		}
+		if (this.appendToBody) {
+			removeElement(this.$data._bodyEl);
+		}
+	},
+	methods: {
+		/**
+         * Set which option is currently hovered.
+         */
+		setHovered(option) {
+			if (option === undefined) return;
+			this.hovered = option;
+		},
+		/**
+         * Set which option is currently selected, update v-model,
+         * update input value and close dropdown.
+         */
+		setSelected(option, closeDropdown = true, event = undefined) {
+			if (option === undefined) return;
+			this.selected = option;
+			this.$emit('select', this.selected, event);
+			if (this.selected !== null) {
+				if (this.customSelector) {
+					this.newValue = this.clearOnSelect ? '' : this.customSelector(this.selected, this.newValue);
+				} else {
+					this.newValue = this.clearOnSelect ? '' : this.getValue(this.selected);
+				}
+				this.setHovered(null);
+			}
+			// eslint-disable-next-line no-unused-expressions
+			closeDropdown && this.$nextTick(() => { this.isActive = false; });
+			this.checkValidity();
+		},
+		/**
+         * Select first option
+         */
+		selectFirstOption(options) {
+			this.$nextTick(() => {
+				if (options.length) {
+					// If has visible data or open on focus, keep updating the hovered
+					if (this.openOnFocus || (this.newValue !== '' && this.hovered !== options[0])) {
+						this.setHovered(options[0]);
+					}
+				} else {
+					this.setHovered(null);
+				}
+			});
+		},
+		/**
+         * Enter key listener.
+         * Select the hovered option.
+         */
+		enterPressed(event) {
+			if (this.hovered === null) return;
+			this.setSelected(this.hovered, !this.keepOpen, event);
+		},
+		/**
+         * Tab key listener.
+         * Select hovered option if it exists, close dropdown, then allow
+         * native handling to move to next tabbable element.
+         */
+		tabPressed(event) {
+			if (this.hovered === null) {
+				this.isActive = false;
+				return;
+			}
+			this.setSelected(this.hovered, !this.keepOpen, event);
+		},
+		/**
+         * Close dropdown if clicked outside.
+         */
+		clickedOutside(event) {
+			if (this.whiteList.indexOf(event.target) < 0) this.isActive = false;
+		},
+		/**
+         * Return display text for the input.
+         * If object, get value from path, or else just the value.
+         */
+		getValue(option) {
+			if (option === null) return;
+			if (typeof this.customFormatter !== 'undefined') {
+				// eslint-disable-next-line consistent-return
+				return this.customFormatter(option);
+			}
+			// eslint-disable-next-line consistent-return
+			return typeof option === 'object'
+				? getValueByPath(option, this.field)
+				: option;
+		},
+		/**
+         * Check if the scroll list inside the dropdown
+         * reached it's end.
+         */
+		checkIfReachedTheEndOfScroll(list) {
+			if (list.clientHeight !== list.scrollHeight
+                && list.scrollTop + list.clientHeight >= list.scrollHeight) {
+				this.$emit('infinite-scroll');
+			}
+		},
+		/**
+         * Calculate if the dropdown is vertically visible when activated,
+         * otherwise it is openened upwards.
+         */
+		calcDropdownInViewportVertical() {
+			this.$nextTick(() => {
+				/**
+                * this.$refs.dropdown may be undefined
+                * when Autocomplete is conditional rendered
+                */
+				if (this.$refs.dropdown === undefined) return;
+				const rect = this.$refs.dropdown.getBoundingClientRect();
+				this.isListInViewportVertically = (
+					rect.top >= 0
+                    && rect.bottom <= (window.innerHeight
+                        || document.documentElement.clientHeight)
+				);
+				if (this.appendToBody) {
+					this.updateAppendToBody();
+				}
+			});
+		},
+		/**
+         * Arrows keys listener.
+         * If dropdown is active, set hovered option, or else just open.
+         */
+		keyArrows(direction) {
+			const sum = direction === 'down' ? 1 : -1;
+			if (this.isActive) {
+				let index = this.data.indexOf(this.hovered) + sum;
+				index = index > this.data.length - 1 ? this.data.length : index;
+				index = index < 0 ? 0 : index;
+				this.setHovered(this.data[index]);
+				const list = this.$refs.dropdown.querySelector('.dropdown-content');
+				const element = list.querySelectorAll('a.dropdown-item:not(.is-disabled)')[index];
+				if (!element) return;
+				const visMin = list.scrollTop;
+				const visMax = list.scrollTop + list.clientHeight - element.clientHeight;
+				if (element.offsetTop < visMin) {
+					list.scrollTop = element.offsetTop;
+				} else if (element.offsetTop >= visMax) {
+					list.scrollTop = (
+						element.offsetTop
+                        - list.clientHeight
+                        + element.clientHeight
+					);
+				}
+			} else {
+				this.isActive = true;
+			}
+		},
+		/**
+         * Focus listener.
+         * If value is the same as selected, select all text.
+         */
+		focused(event) {
+			if (this.getValue(this.selected) === this.newValue) {
+				this.$el.querySelector('input').select();
+			}
+			if (this.openOnFocus) {
+				this.isActive = true;
+				if (this.keepFirst) {
+					this.selectFirstOption(this.data);
+				}
+			}
+			this.hasFocus = true;
+			this.$emit('focus', event);
+		},
+		/**
+        * Blur listener.
+        */
+		onBlur(event) {
+			this.hasFocus = false;
+			this.$emit('blur', event);
+		},
+		onInput() {
+			const currentValue = this.getValue(this.selected);
+			if (currentValue && currentValue === this.newValue) return;
+			this.$emit('typing', this.newValue);
+			this.checkValidity();
+		},
+		rightIconClick(event) {
+			if (this.clearable) {
+				this.newValue = '';
+				if (this.openOnFocus) {
+					this.$el.focus();
+				}
+			} else {
+				this.$emit('icon-right-click', event);
+			}
+		},
+		checkValidity() {
+			if (this.useHtml5Validation) {
+				this.$nextTick(() => {
+					this.checkHtml5Validity();
+				});
+			}
+		},
+		updateAppendToBody() {
+			const dropdownMenu = this.$refs.dropdown;
+			const trigger = this.$refs.input.$el;
+			if (dropdownMenu && trigger) {
+				// update wrapper dropdown
+				const root = this.$data._bodyEl;
+				root.classList.forEach((item) => root.classList.remove(item));
+				root.classList.add('autocomplete');
+				root.classList.add('control');
+				if (this.expandend) {
+					root.classList.add('is-expandend');
+				}
+				const rect = trigger.getBoundingClientRect();
+				let top = rect.top + window.scrollY;
+				const left = rect.left + window.scrollX;
+				if (!this.isOpenedTop) {
+					top += trigger.clientHeight;
+				} else {
+					top -= dropdownMenu.clientHeight;
+				}
+				this.style = {
+					position: 'absolute',
+					top: `${top}px`,
+					left: `${left}px`,
+					width: `${trigger.clientWidth}px`,
+					maxWidth: `${trigger.clientWidth}px`,
+					zIndex: '99',
+				};
+			}
+		},
+	},
+};
+</script>
diff --git a/src/site/components/search/Search.vue b/src/site/components/search/Search.vue
new file mode 100644
index 0000000..57226a9
--- /dev/null
+++ b/src/site/components/search/Search.vue
@@ -0,0 +1,119 @@
+<template>
+	<div class="level-right">
+		<div class="level-item">
+			<b-field>
+				<SearchInput
+					ref="autocomplete"
+					v-model="query"
+					:data="filteredHints"
+					:customSelector="handleSelect"
+					field="name"
+					class="lolisafe-input search"
+					placeholder="Search"
+					type="search"
+					open-on-focus
+					@typing="handleTyping">
+					<template slot-scope="props">
+						<b>{{ props.option.name }}:</b>
+						<small>
+							{{ props.option.valueFormat }}
+						</small>
+					</template>
+				</SearchInput>
+				<p class="control">
+					<b-button type="is-lolisafe" @click="onSubmit">
+						Search
+					</b-button>
+				</p>
+			</b-field>
+		</div>
+	</div>
+</template>
+
+<script>
+import SearchInput from '~/components/search-input/SearchInput.vue';
+
+export default {
+	components: {
+		SearchInput,
+	},
+	data() {
+		return {
+			query: '',
+			hints: [
+				{
+					'name': 'tag',
+					'valueFormat': 'name',
+					'hint': '',
+				},
+				{
+					'name': 'album',
+					'valueFormat': 'name',
+					'hint': '',
+				},
+				{
+					'name': 'before',
+					'valueFormat': 'specific date',
+					'hint': '',
+				},
+				{
+					'name': 'during',
+					'valueFormat': 'specific date',
+					'hint': '',
+				},
+				{
+					'name': 'after',
+					'valueFormat': 'specific date',
+					'hint': '',
+				},
+			],
+			filteredHints: [],
+		};
+	},
+	created() {
+		this.filteredHints = this.hints; // fixes the issue where on pageload, suggestions wont load
+	},
+	methods: {
+		handleSelect(selected, currentValue) {
+			this.$refs.autocomplete.focus();
+			if (!currentValue) { return `${selected.name}:`; }
+			if (/[^:][\s|;|,]+$/gi.test(currentValue)) return `${currentValue}${selected.name}:`;
+			return currentValue.replace(/\w+$/gi, `${selected.name}:`);
+		},
+		handleTyping(qry) {
+			qry = qry || '';
+			// get the last word or group of words
+			const lastWord = (qry.match(/("[^"]*")|[^;, ]+/g) || ['']).pop().toLowerCase();
+			// if there's an open/unbalanced quote, don't autosuggest
+			if (/^[^"]*("[^"]*"[^"]*)*(")[^"]*$/.test(qry)) { this.filteredHints = []; return; }
+			// don't autosuggest if we have an open query but no text yet
+			if (/:[\s|;|,]?$/gi.test(qry)) { this.filteredHints = []; return; }
+			// if the above query didn't match (all quotes are balanced
+			// and the previous tag has value
+			// check if we're about to start a new tag
+			if (/[\s|;|,]+$/gi.test(qry)) { this.filteredHints = this.hints; return; }
+
+			// if we got here, then we handled all special cases
+			// now take last word, and check if we can autosuggest a tag
+			this.filteredHints = this.hints.filter((hint) => hint.name
+				.toString()
+				.toLowerCase()
+				.indexOf(lastWord) === 0);
+		},
+		sanitizeQuery(qry) {
+			// \w+:\s+? to transform 'tag: 123' into 'tag:123'
+		},
+		onSubmit() {
+			this.$emit('search', this.query);
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+	.search {
+		::v-deep .dropdown-content {
+			background-color: #323846;
+		}
+	}
+</style>
-- 
cgit v1.2.3


From 39e9941ded8de4e41048781daa80de0838c01c19 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Thu, 23 Jul 2020 04:08:31 +0300
Subject: feat: Add hiding to recommendations as a prop

fix: change some of the regexes to remove , and ; as separator support because the query parser doesn't understad them and I don't feel like dealing with all the edge cases introduces by it
---
 src/site/components/search/Search.vue | 35 ++++++++++++++++++++++++++---------
 1 file changed, 26 insertions(+), 9 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/search/Search.vue b/src/site/components/search/Search.vue
index 57226a9..72a5707 100644
--- a/src/site/components/search/Search.vue
+++ b/src/site/components/search/Search.vue
@@ -12,7 +12,8 @@
 					placeholder="Search"
 					type="search"
 					open-on-focus
-					@typing="handleTyping">
+					@typing="handleTyping"
+					@keydown.native.enter="onSubmit">
 					<template slot-scope="props">
 						<b>{{ props.option.name }}:</b>
 						<small>
@@ -37,6 +38,12 @@ export default {
 	components: {
 		SearchInput,
 	},
+	props: {
+		hiddenHints: {
+			type: Array,
+			default: () => [],
+		},
+	},
 	data() {
 		return {
 			query: '',
@@ -66,11 +73,17 @@ export default {
 					'valueFormat': 'specific date',
 					'hint': '',
 				},
+				{
+					'name': 'file',
+					'valueFormat': 'generated name',
+					'hint': '',
+				},
 			],
 			filteredHints: [],
 		};
 	},
 	created() {
+		this.hints = this.hints.filter(({ name }) => this.hiddenHints.indexOf(name) === -1);
 		this.filteredHints = this.hints; // fixes the issue where on pageload, suggestions wont load
 	},
 	methods: {
@@ -83,15 +96,19 @@ export default {
 		handleTyping(qry) {
 			qry = qry || '';
 			// get the last word or group of words
-			const lastWord = (qry.match(/("[^"]*")|[^;, ]+/g) || ['']).pop().toLowerCase();
+			let lastWord = (qry.match(/("[^"]*")|[^\s]+/g) || ['']).pop().toLowerCase();
 			// if there's an open/unbalanced quote, don't autosuggest
 			if (/^[^"]*("[^"]*"[^"]*)*(")[^"]*$/.test(qry)) { this.filteredHints = []; return; }
 			// don't autosuggest if we have an open query but no text yet
-			if (/:[\s|;|,]?$/gi.test(qry)) { this.filteredHints = []; return; }
+			if (/:\s+$/gi.test(qry)) { this.filteredHints = []; return; }
 			// if the above query didn't match (all quotes are balanced
 			// and the previous tag has value
 			// check if we're about to start a new tag
-			if (/[\s|;|,]+$/gi.test(qry)) { this.filteredHints = this.hints; return; }
+			if (/\s+$/gi.test(qry)) { this.filteredHints = this.hints; return; }
+
+			// ignore starting `-` from lastword, because - is used to
+			// exclude something, so -alb should autosuggest album
+			lastWord = lastWord.replace(/^-/, '');
 
 			// if we got here, then we handled all special cases
 			// now take last word, and check if we can autosuggest a tag
@@ -100,11 +117,11 @@ export default {
 				.toLowerCase()
 				.indexOf(lastWord) === 0);
 		},
-		sanitizeQuery(qry) {
-			// \w+:\s+? to transform 'tag: 123' into 'tag:123'
-		},
-		onSubmit() {
-			this.$emit('search', this.query);
+		onSubmit(event) {
+			if (event.key === 'Enter') {
+				if (/:$/gi.test(this.query)) { return; }
+			}
+			this.$emit('search', this.query, event);
 		},
 	},
 };
-- 
cgit v1.2.3


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 +-
 2 files changed, 58 insertions(+), 2 deletions(-)

(limited to 'src/site/components')

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'" />
-- 
cgit v1.2.3


From 4a3fef2b9931266d40c1d9e88748fd2aa623dc79 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Thu, 12 Nov 2020 22:58:34 +0200
Subject: chore: update buefy to 0.9

---
 src/site/components/album/AlbumDetails.vue | 77 ++++++++++++++++--------------
 src/site/components/grid/Grid.vue          | 77 ++++++++++++++----------------
 2 files changed, 77 insertions(+), 77 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/album/AlbumDetails.vue b/src/site/components/album/AlbumDetails.vue
index ac6eba5..2d0bb5d 100644
--- a/src/site/components/album/AlbumDetails.vue
+++ b/src/site/components/album/AlbumDetails.vue
@@ -5,46 +5,49 @@
 		<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
+				v-slot="props"
+				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
+				v-slot="props"
+				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="updateLinkOptions(albumId, props.row)" />
-				</b-table-column>
+			<b-table-column
+				v-slot="props"
+				field="enableDownload"
+				label="Allow download"
+				centered>
+				<b-switch
+					v-model="props.row.enableDownload"
+					@input="updateLinkOptions(albumId, props.row)" />
+			</b-table-column>
+
+			<b-table-column
+				v-slot="props"
+				field="enabled"
+				numeric>
+				<button
+					:class="{ 'is-loading': isDeleting(props.row.identifier) }"
+					class="button is-danger"
+					:disabled="isDeleting(props.row.identifier)"
+					@click="promptDeleteAlbumLink(albumId, props.row.identifier)">
+					Delete link
+				</button>
+			</b-table-column>
 
-				<b-table-column
-					field="enabled"
-					numeric>
-					<button
-						:class="{ 'is-loading': isDeleting(props.row.identifier) }"
-						class="button is-danger"
-						:disabled="isDeleting(props.row.identifier)"
-						@click="promptDeleteAlbumLink(albumId, props.row.identifier)">
-						Delete link
-					</button>
-				</b-table-column>
-			</template>
 			<template slot="empty">
 				<div class="has-text-centered">
 					<i class="icon-misc-mood-sad" />
diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 7170709..1fa3167 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -92,48 +92,45 @@
 		</template>
 		<div v-else>
 			<b-table :data="gridFiles || []" :mobile-cards="true">
-				<template slot-scope="props">
-					<template v-if="!props.row.hideFromList">
-						<b-table-column field="url" label="URL">
-							<a :href="props.row.url" target="_blank">{{ props.row.url }}</a>
-						</b-table-column>
-
-						<b-table-column field="albums" label="Albums" centered>
-							<template v-for="(album, index) in props.row.albums">
-								<nuxt-link :key="index" :to="`/dashboard/albums/${album.id}`">
-									{{ album.name }}
-								</nuxt-link>
-								<template v-if="index < props.row.albums.length - 1">
-									,
-								</template>
-							</template>
+				<b-table-column v-slot="props" field="url" label="URL">
+					<a :href="props.row.url" target="_blank">{{ props.row.url }}</a>
+				</b-table-column>
+
+				<b-table-column v-slot="props" field="albums" label="Albums" centered>
+					<template v-for="(album, index) in props.row.albums">
+						<nuxt-link :key="index" :to="`/dashboard/albums/${album.id}`">
+							{{ album.name }}
+						</nuxt-link>
+						<template v-if="index < props.row.albums.length - 1">
+							,
+						</template>
+					</template>
 
-							{{ props.row.username }}
-						</b-table-column>
+					{{ props.row.username }}
+				</b-table-column>
 
-						<b-table-column field="uploaded" label="Uploaded" centered>
-							<span><timeago :since="props.row.createdAt" /></span>
-						</b-table-column>
+				<b-table-column v-slot="props" field="uploaded" label="Uploaded" centered>
+					<span><timeago :since="props.row.createdAt" /></span>
+				</b-table-column>
+
+				<b-table-column v-slot="props" field="purge" centered>
+					<b-tooltip label="Edit" position="is-top">
+						<a class="btn" @click="handleFileModal(props.row)">
+							<i class="mdi mdi-pencil" />
+						</a>
+					</b-tooltip>
+					<b-tooltip label="Delete" position="is-top" class="is-danger">
+						<a class="is-danger" @click="deleteFile(props.row)">
+							<i class="mdi mdi-delete" />
+						</a>
+					</b-tooltip>
+					<b-tooltip v-if="user && user.isAdmin" label="More info" position="is-top" class="more">
+						<nuxt-link :to="`/dashboard/admin/file/${props.row.id}`">
+							<i class="mdi mdi-dots-horizontal" />
+						</nuxt-link>
+					</b-tooltip>
+				</b-table-column>
 
-						<b-table-column field="purge" centered>
-							<b-tooltip label="Edit" position="is-top">
-								<a class="btn" @click="handleFileModal(props.row)">
-									<i class="mdi mdi-pencil" />
-								</a>
-							</b-tooltip>
-							<b-tooltip label="Delete" position="is-top" class="is-danger">
-								<a class="is-danger" @click="deleteFile(props.row)">
-									<i class="mdi mdi-delete" />
-								</a>
-							</b-tooltip>
-							<b-tooltip v-if="user && user.isAdmin" label="More info" position="is-top" class="more">
-								<nuxt-link :to="`/dashboard/admin/file/${props.row.id}`">
-									<i class="mdi mdi-dots-horizontal" />
-								</nuxt-link>
-							</b-tooltip>
-						</b-table-column>
-					</template>
-				</template>
 				<template slot="empty">
 					<div class="has-text-centered">
 						<i class="icon-misc-mood-sad" />
@@ -226,7 +223,7 @@ export default {
 			return require('@/assets/images/blank.png');
 		},
 		gridFiles() {
-			return this.files;
+			return (this.files || []).filter((v) => !v.hideFromList);
 		},
 	},
 	created() {
-- 
cgit v1.2.3


From 90001c2df56d58e69fd199a518ae7f3e4ed327fc Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Thu, 24 Dec 2020 10:40:50 +0200
Subject: chore: remove trailing commas

---
 src/site/components/album/AlbumDetails.vue         | 22 ++++++-------
 src/site/components/album/AlbumEntry.vue           | 14 ++++-----
 src/site/components/footer/Footer.vue              |  8 ++---
 src/site/components/grid/Grid.vue                  | 36 +++++++++++-----------
 src/site/components/grid/waterfall/Waterfall.vue   | 26 ++++++++--------
 .../components/grid/waterfall/WaterfallItem.vue    |  2 +-
 src/site/components/home/links/Links.vue           | 29 ++++++++++++-----
 src/site/components/image-modal/AlbumInfo.vue      | 20 ++++++------
 src/site/components/image-modal/ImageInfo.vue      | 16 +++++-----
 src/site/components/image-modal/TagInfo.vue        | 16 +++++-----
 src/site/components/loading/CubeShadow.vue         | 14 ++++-----
 src/site/components/loading/Origami.vue            | 10 +++---
 src/site/components/loading/PingPong.vue           | 10 +++---
 src/site/components/loading/RotateSquare.vue       | 10 +++---
 src/site/components/navbar/Navbar.vue              | 10 +++---
 src/site/components/search-input/SearchInput.vue   | 22 ++++++-------
 src/site/components/search/Search.vue              | 26 ++++++++--------
 src/site/components/sidebar/Sidebar.vue            |  6 ++--
 src/site/components/uploader/Uploader.vue          | 22 ++++++-------
 19 files changed, 166 insertions(+), 153 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/album/AlbumDetails.vue b/src/site/components/album/AlbumDetails.vue
index 2d0bb5d..4067853 100644
--- a/src/site/components/album/AlbumDetails.vue
+++ b/src/site/components/album/AlbumDetails.vue
@@ -120,17 +120,17 @@ export default {
 	props: {
 		albumId: {
 			type: Number,
-			default: 0,
+			default: 0
 		},
 		details: {
 			type: Object,
-			default: () => ({}),
-		},
+			default: () => ({})
+		}
 	},
 	data() {
 		return {
 			isCreatingLink: false,
-			isDeletingLinks: [],
+			isDeletingLinks: []
 		};
 	},
 	computed: mapState(['config', 'auth']),
@@ -141,20 +141,20 @@ export default {
 			updateLinkOptionsAction: 'albums/updateLinkOptions',
 			createLinkAction: 'albums/createLink',
 			createCustomLinkAction: 'albums/createCustomLink',
-			alert: 'alert/set',
+			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),
+				onConfirm: () => this.deleteAlbum(id)
 			});
 		},
 		promptDeleteAlbumLink(albumId, identifier) {
 			this.$buefy.dialog.confirm({
 				type: 'is-danger',
 				message: 'Are you sure you want to delete this album link?',
-				onConfirm: () => this.deleteAlbumLink(albumId, identifier),
+				onConfirm: () => this.deleteAlbumLink(albumId, identifier)
 			});
 		},
 		async deleteAlbum(id) {
@@ -204,16 +204,16 @@ export default {
 				message: 'Custom link identifier',
 				inputAttrs: {
 					placeholder: '',
-					maxlength: 10,
+					maxlength: 10
 				},
 				trapFocus: true,
-				onConfirm: (value) => this.$handler.executeAction('albums/createCustomLink', { albumId, value }),
+				onConfirm: (value) => this.$handler.executeAction('albums/createCustomLink', { albumId, value })
 			});
 		},
 		isDeleting(identifier) {
 			return this.isDeletingLinks.indexOf(identifier) > -1;
-		},
-	},
+		}
+	}
 };
 </script>
 
diff --git a/src/site/components/album/AlbumEntry.vue b/src/site/components/album/AlbumEntry.vue
index 2723b49..1e1b2cf 100644
--- a/src/site/components/album/AlbumEntry.vue
+++ b/src/site/components/album/AlbumEntry.vue
@@ -63,22 +63,22 @@ import AlbumDetails from '~/components/album/AlbumDetails.vue';
 
 export default {
 	components: {
-		AlbumDetails,
+		AlbumDetails
 	},
 	props: {
 		album: {
 			type: Object,
-			default: () => ({}),
-		},
+			default: () => ({})
+		}
 	},
 	computed: {
 		...mapGetters({
 			isExpandedGetter: 'albums/isExpanded',
-			getDetails: 'albums/getDetails',
+			getDetails: 'albums/getDetails'
 		}),
 		isExpanded() {
 			return this.isExpandedGetter(this.album.id);
-		},
+		}
 	},
 	methods: {
 		async toggleDetails(album) {
@@ -86,8 +86,8 @@ export default {
 				await this.$store.dispatch('albums/fetchDetails', album.id);
 			}
 			this.$store.commit('albums/toggleExpandedState', album.id);
-		},
-	},
+		}
+	}
 };
 </script>
 
diff --git a/src/site/components/footer/Footer.vue b/src/site/components/footer/Footer.vue
index 19d18f2..b409cf5 100644
--- a/src/site/components/footer/Footer.vue
+++ b/src/site/components/footer/Footer.vue
@@ -81,8 +81,8 @@ export default {
 		...mapState({
 			version: (state) => state.config.version,
 			serviceName: (state) => state.config.serviceName,
-			token: (state) => state.auth.token,
-		}),
+			token: (state) => state.auth.token
+		})
 	},
 	methods: {
 		createShareXThing() {
@@ -102,8 +102,8 @@ export default {
 			}`;
 			const sharexBlob = new Blob([sharexFile], { type: 'application/octet-binary' });
 			saveAs(sharexBlob, `${location.hostname}.sxcu`);
-		},
-	},
+		}
+	}
 };
 </script>
 
diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 1fa3167..3a15335 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -162,37 +162,37 @@ import ImageInfo from '~/components/image-modal/ImageInfo.vue';
 export default {
 	components: {
 		Waterfall,
-		ImageInfo,
+		ImageInfo
 	},
 	props: {
 		files: {
 			type: Array,
-			default: () => [],
+			default: () => []
 		},
 		total: {
 			type: Number,
-			default: 0,
+			default: 0
 		},
 		fixed: {
 			type: Boolean,
-			default: false,
+			default: false
 		},
 		isPublic: {
 			type: Boolean,
-			default: false,
+			default: false
 		},
 		width: {
 			type: Number,
-			default: 150,
+			default: 150
 		},
 		enableSearch: {
 			type: Boolean,
-			default: true,
+			default: true
 		},
 		enableToolbar: {
 			type: Boolean,
-			default: true,
-		},
+			default: true
+		}
 	},
 	data() {
 		return {
@@ -208,15 +208,15 @@ export default {
 			modalData: {
 				file: null,
 				tags: null,
-				albums: null,
-			},
+				albums: null
+			}
 		};
 	},
 	computed: {
 		...mapState({
 			user: (state) => state.auth.user,
 			albums: (state) => state.albums.tinyDetails,
-			images: (state) => state.images,
+			images: (state) => state.images
 		}),
 		blank() {
 			// eslint-disable-next-line global-require, import/no-unresolved
@@ -224,7 +224,7 @@ export default {
 		},
 		gridFiles() {
 			return (this.files || []).filter((v) => !v.hideFromList);
-		},
+		}
 	},
 	created() {
 		// TODO: Create a middleware for this
@@ -251,7 +251,7 @@ export default {
 					} catch (e) {
 						this.$store.dispatch('alert/set', { text: e.message, error: true }, { root: true });
 					}
-				},
+				}
 			});
 		},
 		isAlbumSelected(id) {
@@ -279,12 +279,12 @@ export default {
 				if (add) {
 					response = await this.$store.dispatch('images/addToAlbum', {
 						albumId: id,
-						fileId: this.showingModalForFile.id,
+						fileId: this.showingModalForFile.id
 					});
 				} else {
 					response = await this.$store.dispatch('images/removeFromAlbum', {
 						albumId: id,
-						fileId: this.showingModalForFile.id,
+						fileId: this.showingModalForFile.id
 					});
 				}
 
@@ -332,8 +332,8 @@ export default {
 		},
 		isHovered(id) {
 			return this.hoveredItems.includes(id);
-		},
-	},
+		}
+	}
 };
 </script>
 
diff --git a/src/site/components/grid/waterfall/Waterfall.vue b/src/site/components/grid/waterfall/Waterfall.vue
index 762cbbd..af2af3f 100644
--- a/src/site/components/grid/waterfall/Waterfall.vue
+++ b/src/site/components/grid/waterfall/Waterfall.vue
@@ -20,29 +20,29 @@ const imagesloaded = isBrowser ? require('imagesloaded') : null;
 export default {
 	name: 'Waterfall',
 	components: {
-		WaterfallItem,
+		WaterfallItem
 	},
 	props: {
 		options: {
 			type: Object,
-			default: () => {},
+			default: () => {}
 		},
 		items: {
 			type: Array,
-			default: () => [],
+			default: () => []
 		},
 		itemWidth: {
 			type: Number,
-			default: 150,
+			default: 150
 		},
 		gutterWidth: {
 			type: Number,
-			default: 10,
+			default: 10
 		},
 		gutterHeight: {
 			type: Number,
-			default: 4,
-		},
+			default: 4
+		}
 	},
 	mounted() {
 		this.initializeMasonry();
@@ -62,7 +62,7 @@ export default {
 				node,
 				() => {
 					this.masonry.layout();
-				},
+				}
 			);
 		},
 		performLayout() {
@@ -101,7 +101,7 @@ export default {
 				removed,
 				appended,
 				prepended,
-				moved,
+				moved
 			};
 		},
 		initializeMasonry() {
@@ -111,8 +111,8 @@ export default {
 					{
 						columnWidth: this.itemWidth,
 						gutter: this.gutterWidth,
-						...this.options,
-					},
+						...this.options
+					}
 				);
 				this.domChildren = this.getNewDomChildren();
 			}
@@ -122,8 +122,8 @@ export default {
 			const children = this.options && this.options.itemSelector
 				? node.querySelectorAll(this.options.itemSelector) : node.children;
 			return Array.prototype.slice.call(children);
-		},
-	},
+		}
+	}
 };
 </script>
 
diff --git a/src/site/components/grid/waterfall/WaterfallItem.vue b/src/site/components/grid/waterfall/WaterfallItem.vue
index c5cade1..2a18606 100644
--- a/src/site/components/grid/waterfall/WaterfallItem.vue
+++ b/src/site/components/grid/waterfall/WaterfallItem.vue
@@ -5,6 +5,6 @@
 </template>
 <script>
 export default {
-	name: 'WaterfallItem',
+	name: 'WaterfallItem'
 };
 </script>
diff --git a/src/site/components/home/links/Links.vue b/src/site/components/home/links/Links.vue
index 41bd271..b20649f 100644
--- a/src/site/components/home/links/Links.vue
+++ b/src/site/components/home/links/Links.vue
@@ -1,6 +1,7 @@
 <template>
 	<div class="links">
-		<a href="https://github.com/WeebDev/lolisafe"
+		<a
+			href="https://github.com/WeebDev/lolisafe"
 			target="_blank"
 			class="link">
 			<header class="bd-footer-star-header">
@@ -8,15 +9,21 @@
 				<p class="bd-footer-subtitle">Deploy your own lolisafe</p>
 			</header>
 		</a>
-		<div v-if="loggedIn"
+		<div
+			v-if="loggedIn"
 			class="link"
 			@click="createShareXThing">
 			<header class="bd-footer-star-header">
-				<h4 class="bd-footer-title">ShareX</h4>
-				<p class="bd-footer-subtitle">Upload from your Desktop</p>
+				<h4 class="bd-footer-title">
+					ShareX
+				</h4>
+				<p class="bd-footer-subtitle">
+					Upload from your Desktop
+				</p>
 			</header>
 		</div>
-		<a href="https://chrome.google.com/webstore/detail/lolisafe-uploader/enkkmplljfjppcdaancckgilmgoiofnj"
+		<a
+			href="https://chrome.google.com/webstore/detail/lolisafe-uploader/enkkmplljfjppcdaancckgilmgoiofnj"
 			target="_blank"
 			class="link">
 			<header class="bd-footer-star-header">
@@ -24,17 +31,23 @@
 				<p class="bd-footer-subtitle">Upload from any website</p>
 			</header>
 		</a>
-		<router-link to="/faq"
+		<router-link
+			to="/faq"
 			class="link">
 			<header class="bd-footer-star-header">
-				<h4 class="bd-footer-title">FAQ</h4>
-				<p class="bd-footer-subtitle">We got you covered</p>
+				<h4 class="bd-footer-title">
+					FAQ
+				</h4>
+				<p class="bd-footer-subtitle">
+					We got you covered
+				</p>
 			</header>
 		</router-link>
 	</div>
 </template>
 <script>
 import { saveAs } from 'file-saver';
+
 export default {
 	computed: {
 		loggedIn() {
diff --git a/src/site/components/image-modal/AlbumInfo.vue b/src/site/components/image-modal/AlbumInfo.vue
index 8974a11..17c375a 100644
--- a/src/site/components/image-modal/AlbumInfo.vue
+++ b/src/site/components/image-modal/AlbumInfo.vue
@@ -31,21 +31,21 @@ export default {
 	props: {
 		imageId: {
 			type: Number,
-			default: 0,
+			default: 0
 		},
 		imageAlbums: {
 			type: Array,
-			default: () => [],
+			default: () => []
 		},
 		albums: {
 			type: Array,
-			default: () => [],
-		},
+			default: () => []
+		}
 	},
 	data() {
 		return {
 			selectedOptions: [],
-			orderedAlbums: [],
+			orderedAlbums: []
 		};
 	},
 	created() {
@@ -65,7 +65,7 @@ export default {
 						return selectedA ? -1 : 1;
 					}
 					return a.name.localeCompare(b.name);
-				},
+				}
 			);
 		},
 		isAlbumSelected(id) {
@@ -78,15 +78,15 @@ export default {
 			if (this.selectedOptions.indexOf(id) > -1) {
 				this.$handler.executeAction('images/addToAlbum', {
 					albumId: id,
-					fileId: this.imageId,
+					fileId: this.imageId
 				});
 			} else {
 				this.$handler.executeAction('images/removeFromAlbum', {
 					albumId: id,
-					fileId: this.imageId,
+					fileId: this.imageId
 				});
 			}
-		},
-	},
+		}
+	}
 };
 </script>
diff --git a/src/site/components/image-modal/ImageInfo.vue b/src/site/components/image-modal/ImageInfo.vue
index 0562e1f..73b6339 100644
--- a/src/site/components/image-modal/ImageInfo.vue
+++ b/src/site/components/image-modal/ImageInfo.vue
@@ -118,25 +118,25 @@ import Taginfo from './TagInfo.vue';
 export default {
 	components: {
 		Taginfo,
-		Albuminfo,
+		Albuminfo
 	},
 	props: {
 		file: {
 			type: Object,
-			default: () => ({}),
+			default: () => ({})
 		},
 		albums: {
 			type: Array,
-			default: () => ([]),
+			default: () => ([])
 		},
 		tags: {
 			type: Array,
-			default: () => ([]),
-		},
+			default: () => ([])
+		}
 	},
 	computed: mapState({
 		images: (state) => state.images,
-		tinyDetails: (state) => state.albums.tinyDetails,
+		tinyDetails: (state) => state.albums.tinyDetails
 	}),
 	methods: {
 		formatBytes(bytes, decimals = 2) {
@@ -152,8 +152,8 @@ export default {
 		},
 		isVideo(type) {
 			return type.startsWith('video');
-		},
-	},
+		}
+	}
 };
 </script>
 
diff --git a/src/site/components/image-modal/TagInfo.vue b/src/site/components/image-modal/TagInfo.vue
index a337148..59d01f5 100644
--- a/src/site/components/image-modal/TagInfo.vue
+++ b/src/site/components/image-modal/TagInfo.vue
@@ -23,24 +23,24 @@ export default {
 	props: {
 		imageId: {
 			type: Number,
-			default: 0,
+			default: 0
 		},
 		imageTags: {
 			type: Array,
-			default: () => [],
-		},
+			default: () => []
+		}
 	},
 	data() {
 		return {
-			filteredTags: [],
+			filteredTags: []
 		};
 	},
 	computed: {
 		...mapState({
-			tags: (state) => state.tags.tagsList,
+			tags: (state) => state.tags.tagsList
 		}),
 		selectedTags() { return this.imageTags.map((e) => e.name); },
-		lowercaseTags() { return this.imageTags.map((e) => e.name.toLowerCase()); },
+		lowercaseTags() { return this.imageTags.map((e) => e.name.toLowerCase()); }
 	},
 	methods: {
 		getFilteredTags(str) {
@@ -78,8 +78,8 @@ export default {
 		},
 		tagRemoved(tag) {
 			this.$handler.executeAction('images/removeTag', { fileId: this.imageId, tagName: tag });
-		},
-	},
+		}
+	}
 };
 </script>
 
diff --git a/src/site/components/loading/CubeShadow.vue b/src/site/components/loading/CubeShadow.vue
index bbfdb52..71b5da5 100644
--- a/src/site/components/loading/CubeShadow.vue
+++ b/src/site/components/loading/CubeShadow.vue
@@ -9,16 +9,16 @@ export default {
 	props: {
 		size: {
 			type: String,
-			default: '60px',
+			default: '60px'
 		},
 		background: {
 			type: String,
-			default: '#9C27B0',
+			default: '#9C27B0'
 		},
 		duration: {
 			type: String,
-			default: '1.8s',
-		},
+			default: '1.8s'
+		}
 	},
 	computed: {
 		styles() {
@@ -26,10 +26,10 @@ export default {
 				width: this.size,
 				height: this.size,
 				backgroundColor: this.background,
-				animationDuration: this.duration,
+				animationDuration: this.duration
 			};
-		},
-	},
+		}
+	}
 };
 </script>
 
diff --git a/src/site/components/loading/Origami.vue b/src/site/components/loading/Origami.vue
index cd1c087..59c5d8f 100644
--- a/src/site/components/loading/Origami.vue
+++ b/src/site/components/loading/Origami.vue
@@ -20,8 +20,8 @@ export default {
 	props: {
 		size: {
 			type: String,
-			default: '40px',
-		},
+			default: '40px'
+		}
 	},
 	computed: {
 		innerStyles() {
@@ -31,10 +31,10 @@ export default {
 		styles() {
 			return {
 				width: this.size,
-				height: this.size,
+				height: this.size
 			};
-		},
-	},
+		}
+	}
 };
 </script>
 
diff --git a/src/site/components/loading/PingPong.vue b/src/site/components/loading/PingPong.vue
index d562e9f..c04ae72 100644
--- a/src/site/components/loading/PingPong.vue
+++ b/src/site/components/loading/PingPong.vue
@@ -19,8 +19,8 @@ export default {
 	props: {
 		size: {
 			type: String,
-			default: '60px',
-		},
+			default: '60px'
+		}
 	},
 	computed: {
 		innerStyles() {
@@ -30,10 +30,10 @@ export default {
 		styles() {
 			return {
 				width: this.size,
-				height: this.size,
+				height: this.size
 			};
-		},
-	},
+		}
+	}
 };
 </script>
 
diff --git a/src/site/components/loading/RotateSquare.vue b/src/site/components/loading/RotateSquare.vue
index 089e01a..7bc9bb0 100644
--- a/src/site/components/loading/RotateSquare.vue
+++ b/src/site/components/loading/RotateSquare.vue
@@ -9,18 +9,18 @@ export default {
 	props: {
 		size: {
 			type: String,
-			default: '40px',
-		},
+			default: '40px'
+		}
 	},
 	computed: {
 		styles() {
 			return {
 				width: this.size,
 				height: this.size,
-				display: 'inline-block',
+				display: 'inline-block'
 			};
-		},
-	},
+		}
+	}
 };
 </script>
 
diff --git a/src/site/components/navbar/Navbar.vue b/src/site/components/navbar/Navbar.vue
index 1b1f10e..22d41d4 100644
--- a/src/site/components/navbar/Navbar.vue
+++ b/src/site/components/navbar/Navbar.vue
@@ -73,22 +73,22 @@ export default {
 	props: {
 		isWhite: {
 			type: Boolean,
-			default: false,
-		},
+			default: false
+		}
 	},
 	data() {
 		return { hamburger: false };
 	},
 	computed: {
 		...mapGetters({ loggedIn: 'auth/isLoggedIn' }),
-		...mapState(['config']),
+		...mapState(['config'])
 	},
 	methods: {
 		async logOut() {
 			await this.$store.dispatch('auth/logout');
 			this.$router.replace('/login');
-		},
-	},
+		}
+	}
 };
 </script>
 
diff --git a/src/site/components/search-input/SearchInput.vue b/src/site/components/search-input/SearchInput.vue
index abc433a..1c5b983 100644
--- a/src/site/components/search-input/SearchInput.vue
+++ b/src/site/components/search-input/SearchInput.vue
@@ -90,11 +90,11 @@ export default {
 		value: [Number, String],
 		data: {
 			type: Array,
-			default: () => [],
+			default: () => []
 		},
 		field: {
 			type: String,
-			default: 'value',
+			default: 'value'
 		},
 		keepFirst: Boolean,
 		clearOnSelect: Boolean,
@@ -106,12 +106,12 @@ export default {
 		maxHeight: [String, Number],
 		dropdownPosition: {
 			type: String,
-			default: 'auto',
+			default: 'auto'
 		},
 		iconRight: String,
 		iconRightClickable: Boolean,
 		appendToBody: Boolean,
-		customSelector: Function,
+		customSelector: Function
 	},
 	data() {
 		return {
@@ -125,7 +125,7 @@ export default {
 			style: {},
 			_isAutocomplete: true,
 			_elementRef: 'input',
-			_bodyEl: undefined, // Used to append to body
+			_bodyEl: undefined // Used to append to body
 		};
 	},
 	computed: {
@@ -202,9 +202,9 @@ export default {
 				// eslint-disable-next-line no-nested-ternary
 				maxHeight: this.maxHeight === undefined
 					// eslint-disable-next-line no-restricted-globals
-					? null : (isNaN(this.maxHeight) ? this.maxHeight : `${this.maxHeight}px`),
+					? null : (isNaN(this.maxHeight) ? this.maxHeight : `${this.maxHeight}px`)
 			};
-		},
+		}
 	},
 	watch: {
 		/**
@@ -258,7 +258,7 @@ export default {
 			if (this.keepFirst) {
 				this.selectFirstOption(value);
 			}
-		},
+		}
 	},
 	created() {
 		if (typeof window !== 'undefined') {
@@ -507,10 +507,10 @@ export default {
 					left: `${left}px`,
 					width: `${trigger.clientWidth}px`,
 					maxWidth: `${trigger.clientWidth}px`,
-					zIndex: '99',
+					zIndex: '99'
 				};
 			}
-		},
-	},
+		}
+	}
 };
 </script>
diff --git a/src/site/components/search/Search.vue b/src/site/components/search/Search.vue
index 72a5707..778474c 100644
--- a/src/site/components/search/Search.vue
+++ b/src/site/components/search/Search.vue
@@ -36,13 +36,13 @@ import SearchInput from '~/components/search-input/SearchInput.vue';
 
 export default {
 	components: {
-		SearchInput,
+		SearchInput
 	},
 	props: {
 		hiddenHints: {
 			type: Array,
-			default: () => [],
-		},
+			default: () => []
+		}
 	},
 	data() {
 		return {
@@ -51,35 +51,35 @@ export default {
 				{
 					'name': 'tag',
 					'valueFormat': 'name',
-					'hint': '',
+					'hint': ''
 				},
 				{
 					'name': 'album',
 					'valueFormat': 'name',
-					'hint': '',
+					'hint': ''
 				},
 				{
 					'name': 'before',
 					'valueFormat': 'specific date',
-					'hint': '',
+					'hint': ''
 				},
 				{
 					'name': 'during',
 					'valueFormat': 'specific date',
-					'hint': '',
+					'hint': ''
 				},
 				{
 					'name': 'after',
 					'valueFormat': 'specific date',
-					'hint': '',
+					'hint': ''
 				},
 				{
 					'name': 'file',
 					'valueFormat': 'generated name',
-					'hint': '',
-				},
+					'hint': ''
+				}
 			],
-			filteredHints: [],
+			filteredHints: []
 		};
 	},
 	created() {
@@ -122,8 +122,8 @@ export default {
 				if (/:$/gi.test(this.query)) { return; }
 			}
 			this.$emit('search', this.query, event);
-		},
-	},
+		}
+	}
 };
 </script>
 
diff --git a/src/site/components/sidebar/Sidebar.vue b/src/site/components/sidebar/Sidebar.vue
index 2e8ca9e..e0c8fa2 100644
--- a/src/site/components/sidebar/Sidebar.vue
+++ b/src/site/components/sidebar/Sidebar.vue
@@ -48,7 +48,7 @@ import { mapState } from 'vuex';
 
 export default {
 	computed: mapState({
-		user: (state) => state.auth.user,
+		user: (state) => state.auth.user
 	}),
 	methods: {
 		isRouteActive(id) {
@@ -56,8 +56,8 @@ export default {
 				return true;
 			}
 			return false;
-		},
-	},
+		}
+	}
 };
 
 </script>
diff --git a/src/site/components/uploader/Uploader.vue b/src/site/components/uploader/Uploader.vue
index 7e2d446..2740bee 100644
--- a/src/site/components/uploader/Uploader.vue
+++ b/src/site/components/uploader/Uploader.vue
@@ -88,15 +88,15 @@ export default {
 			files: [],
 			dropzoneOptions: {},
 			showDropzone: false,
-			selectedAlbum: null,
+			selectedAlbum: null
 		};
 	},
 	computed: {
 		...mapState({
 			config: (state) => state.config,
-			albums: (state) => state.albums.tinyDetails,
+			albums: (state) => state.albums.tinyDetails
 		}),
-		...mapGetters({ loggedIn: 'auth/isLoggedIn', token: 'auth/getToken' }),
+		...mapGetters({ loggedIn: 'auth/isLoggedIn', token: 'auth/getToken' })
 	},
 	watch: {
 		loggedIn() {
@@ -104,7 +104,7 @@ export default {
 		},
 		selectedAlbum() {
 			this.updateDropzoneConfig();
-		},
+		}
 	},
 	mounted() {
 		this.dropzoneOptions = {
@@ -127,7 +127,7 @@ export default {
 			maxFilesize: this.config.maxFileSize,
 			previewTemplate: this.$refs.template.innerHTML,
 			dictDefaultMessage: 'Drag & Drop your files or click to browse',
-			headers: { Accept: 'application/vnd.lolisafe.json' },
+			headers: { Accept: 'application/vnd.lolisafe.json' }
 		};
 		this.showDropzone = true;
 		if (this.loggedIn) this.getAlbums();
@@ -154,7 +154,7 @@ export default {
 			this.$refs.el.setOption('headers', {
 				Accept: 'application/vnd.lolisafe.json',
 				Authorization: this.token ? `Bearer ${this.token}` : '',
-				albumId: this.selectedAlbum ? this.selectedAlbum : null,
+				albumId: this.selectedAlbum ? this.selectedAlbum : null
 			});
 		},
 
@@ -170,7 +170,7 @@ export default {
 		dropzoneError(file, message, xhr) {
 			this.$store.dispatch('alert', {
 				text: 'There was an error uploading this file. Check the console.',
-				error: true,
+				error: true
 			});
 			// eslint-disable-next-line no-console
 			console.error(file, message, xhr);
@@ -182,8 +182,8 @@ export default {
 					original: file.name,
 					size: file.size,
 					type: file.type,
-					count: file.upload.totalChunkCount,
-				}],
+					count: file.upload.totalChunkCount
+				}]
 			});
 
 			this.processResult(file, data);
@@ -205,8 +205,8 @@ export default {
 				this.$clipboard(response.url);
 			});
 			*/
-		},
-	},
+		}
+	}
 };
 </script>
 <style lang="scss" scoped>
-- 
cgit v1.2.3


From 587f7d69e80cfa1d94cc4730dc26834c389f574d Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Thu, 24 Dec 2020 13:57:09 +0200
Subject: bug: fix showlist resetting itself every time the page is changed
 bug: fix store not commiting search results

---
 src/site/components/grid/Grid.vue | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

(limited to 'src/site/components')

diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index 3a15335..ea568f0 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -21,9 +21,8 @@
 			</div>
 		</nav>
 
-		<template v-if="!showList">
+		<template v-if="!images.showList">
 			<Waterfall
-				v-if="showWaterfall"
 				:gutterWidth="10"
 				:gutterHeight="4"
 				:options="{fitWidth: true}"
@@ -196,7 +195,6 @@ export default {
 	},
 	data() {
 		return {
-			showWaterfall: true,
 			searchTerm: null,
 			showList: false,
 			hoveredItems: [],
@@ -226,10 +224,15 @@ export default {
 			return (this.files || []).filter((v) => !v.hideFromList);
 		}
 	},
+	watch: {
+		showList: 'displayTypeChange'
+	},
 	created() {
 		// TODO: Create a middleware for this
 		this.getAlbums();
 		this.getTags();
+
+		this.showList = this.images.showList;
 	},
 	methods: {
 		async search() {
@@ -332,6 +335,9 @@ export default {
 		},
 		isHovered(id) {
 			return this.hoveredItems.includes(id);
+		},
+		displayTypeChange(showList) {
+			this.$store.commit('images/setShowList', showList);
 		}
 	}
 };
-- 
cgit v1.2.3