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/image-modal/AlbumInfo.vue | 73 +++++++++++++++++++++++++++
 1 file changed, 73 insertions(+)
 create mode 100644 src/site/components/image-modal/AlbumInfo.vue

(limited to 'src/site/components/image-modal/AlbumInfo.vue')

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>
-- 
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 +++++++++++++++++++++------
 1 file changed, 26 insertions(+), 7 deletions(-)

(limited to 'src/site/components/image-modal/AlbumInfo.vue')

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);
-- 
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/image-modal/AlbumInfo.vue | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

(limited to 'src/site/components/image-modal/AlbumInfo.vue')

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