feat: implement all-in-one file detail viewer, tag editor and album selection modal

2 files changed, 33 insertions, 41 deletions

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;