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/AlbumEntry.vue | 179 +++++++++++++++++++++++++++++++
 1 file changed, 179 insertions(+)
 create mode 100644 src/site/components/album/AlbumEntry.vue

(limited to 'src/site/components/album/AlbumEntry.vue')

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/AlbumEntry.vue | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

(limited to 'src/site/components/album/AlbumEntry.vue')

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: {
-- 
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/AlbumEntry.vue | 41 +++++++++++++++++++-------------
 1 file changed, 25 insertions(+), 16 deletions(-)

(limited to 'src/site/components/album/AlbumEntry.vue')

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>
-
-- 
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/AlbumEntry.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

(limited to 'src/site/components/album/AlbumEntry.vue')

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