Merge pull request #4 from word-club/publication-detail

Linked publication/community detail page with backend

src/components/TheAppBar.vue

@@ -34,7 +34,7 @@
 					<v-avatar
 						v-if="routeNameStartsWith('User')"
 						size="30"
-						color="primary"
+						:color="(userInView && userInView.avatar) ? 'white': 'primary'"
 						class="mt-0 mb-2"
 					>
 						<v-img
@@ -45,12 +45,13 @@
 					<v-avatar
 						v-if="communityInView"
 						size="30"
-						:color="communityInView.theme.color"
+						:color="(communityInView && communityInView.avatar)
+							? 'white': communityInView.theme.color"
 						class="mt-0 mb-2"
 					>
 						<v-img
 							v-if="communityInView && communityInView.avatar"
-							:src="communityInView.avatar.image"
+							:src="$link(communityInView.avatar.image)"
 						/>
 					</v-avatar>
 				</template>
@@ -69,7 +70,7 @@
 				placeholder="Search WordClub"
 			>
 				<template #prepend-inner>
-					<v-icon size="22"> mdi-magnify</v-icon>
+					<v-icon size="22">mdi-magnify</v-icon>
 				</template>
 			</v-text-field>
 		</v-responsive>

src/components/feeds/FeedList.vue

@@ -3,7 +3,6 @@
 		<v-card v-for="(item, index) in publications.results"
 			:key="index" class="my-4 feed-item" outlined
 		>
-			<!--			<v-btn @click="deletePub(item.id)" icon><v-icon>mdi-delete</v-icon></v-btn>-->
 			<item-header :item="item" />
 			<v-card-title class="py-1 cursor publication-title"
 				@click="toPublicationDetail(item.id)"
@@ -34,6 +33,15 @@ import PublicationType from "@/mixin/PublicationType.js";
 export default {
 	name: "FeedList",
 	mixins: [RouteMixin, PublicationType],
+	props: {
+		payload: {
+			type: Object,
+			default: () => ({
+				is_published: true,
+				depth: 3
+			})
+		}
+	},
 	data: () => ({
 		isLoading: true
 	}),
@@ -53,12 +61,8 @@ export default {
 		await this.fetchPublications()
 	},
 	methods: {
-		deletePub(id) {
-			const url = this.$util.format(this.$urls.publication.detail, id)
-			this.$axios.delete(url)
-		},
 		async fetchPublications() {
-			await this.$store.dispatch("publication/filter", {is_published: true, depth: 3})
+			await this.$store.dispatch("publication/filter", this.payload)
 			this.isLoading = false
 		}
 	}

src/components/feeds/ItemActions.vue

@@ -49,7 +49,7 @@
 			<v-card-text v-if="commentMode">
 				<v-scale-transition>
 					<v-list class="mb-4 rounded"
-						v-if="item.comments.length"
+						v-if="!detail && item.comments.length"
 					>
 						<comment-item v-for="(comment, index) in item.comments"
 							:key="index"
@@ -86,7 +86,7 @@
 				<v-icon left
 					:color="commentMode ? 'white' : ''"
 				>mdi-comment-outline</v-icon>
-				{{item.comments.length}} Comments
+				{{item.reactions.comments}} Comments
 			</v-btn>
 			<v-menu offset-y>
 				<template #activator="{on, attrs}">
@@ -231,7 +231,10 @@ export default {
 	name: "ItemActions",
 	components: {CommentItem, ItemContent, ItemLink, ItemImages, ItemHeader, CommentField},
 	mixins: [PublicationType, Snack, PostMixin],
-	props: {item: {type: Object, default: () => {}}},
+	props: {
+		item: {type: Object, default: () => {}},
+		detail: {type: Boolean, default: false}
+	},
 	data: () => ({
 		clipboardContent: null,
 		commentMode: false,
@@ -252,7 +255,7 @@ export default {
 			return this.$vuetify.breakpoint.width < 600
 		},
 		reactionsCount() {
-			return this.item.reactions
+			return this.item.reactions.total
 		}
 	},
 	methods: {

src/components/feeds/ItemHeader.vue

@@ -30,9 +30,15 @@
 				<v-list-item v-if="$helper.ifCurrentUserIs(item.created_by)"
 					:to="{name: 'Submit', params: {toEdit: item.id}}"
 				>
-					<v-list-item-icon class="mr-2"><v-icon>mdi-pencil</v-icon></v-list-item-icon>
+					<v-list-item-icon class="mr-2"><v-icon color="primary lighten-1">mdi-pencil</v-icon></v-list-item-icon>
 					<v-list-item-content><v-list-item-title>Edit Publication</v-list-item-title></v-list-item-content>
 				</v-list-item>
+				<v-list-item v-if="$helper.ifCurrentUserIs(item.created_by)"
+					@click="deletePublication()"
+				>
+					<v-list-item-icon class="mr-2"><v-icon color="red lighten-1">mdi-delete</v-icon></v-list-item-icon>
+					<v-list-item-content><v-list-item-title>Delete Publication</v-list-item-title></v-list-item-content>
+				</v-list-item>
 			</v-list>
 		</v-menu>
 	</v-card-text>
@@ -48,6 +54,12 @@ export default {
 	components: {
 		UserHoverBox,
 		CommunityHoverBox,
+	},
+	methods: {
+		deletePublication() {
+			const url = this.$util.format(this.$urls.publication.detail, this.item.id)
+			this.$axios.delete(url)
+		},
 	}
 }
 </script>

src/components/feeds/ItemImages.vue

@@ -9,7 +9,7 @@
 				flat
 				height="350"
 			>
-				<v-img :src="image.image"
+				<v-img :src="$link(image.image)"
 					height="350"
 					contain
 				/>
@@ -24,7 +24,7 @@
 				flat
 				height="350"
 			>
-				<v-img :src="image.image_url"
+				<v-img :src="$link(image.image_url)"
 					height="350"
 					contain
 				/>

src/components/utils/CommunityHoverBox.vue

@@ -15,7 +15,7 @@
 					size="30"
 					:color="community.theme.color" tile
 					class="rounded cursor"
-					@click="toCommunityDetail(community.unique_id)"
+					@click="toCommunityDetail(community.id)"
 				>
 					<v-img v-if="community.avatar"
 						:src="$link(community.avatar)"
@@ -25,7 +25,7 @@
 				<div
 					class="px14 weight-600 cursor hover-underline"
 					:class="`${community.theme.color}--text`"
-					@click="toCommunityDetail(community.unique_id)"
+					@click="toCommunityDetail(community.id)"
 				>
 					{{ community.name }}
 				</div>

src/mixin/FetchMixin.js

@@ -0,0 +1,29 @@
+const FetchMixin = {
+	name: "FetchMixin",
+	data: () => ({
+		loading: true,
+		notFound: null
+	}),
+	beforeRouteLeave(to, from, next){
+		this.SET_TO_VIEW(null)
+		next()
+	},
+	methods: {
+		fetchDetail() {
+			this.routeId = this.$route.params.id
+			this.loading = true
+			return this.$axios
+				.get(this.$util.format(this.$urls[this.model].detail, this.routeId))
+				.then(res => {
+					this.SET_TO_VIEW(res)
+				})
+				.catch(() => {
+					this.notFound = true
+				})
+				.finally(() => {
+					this.loading = false
+				})
+		}
+	}
+}
+export default FetchMixin

src/mixin/RouteMixin.js

@@ -3,14 +3,14 @@ const RouteMixin = {
 		async toPublicationDetail(id) {
 			await this.$router.push({name: "Publication", params: {id: id}})
 		},
-		async toCommunityDetail(uniqueId) {
-			await this.$router.push({name: "Community Detail", params: {uniqueId: uniqueId}})
+		async toCommunityDetail(id) {
+			await this.$router.push({name: "Community Detail", params: {id: id}})
 		},
-		async toCommunityWiki(uniqueId) {
-			await this.$router.push({name: "Community Detail Wiki", params: {uniqueId: uniqueId}})
+		async toCommunityWiki(id) {
+			await this.$router.push({name: "Community Detail Wiki", params: {id: id}})
 		},
-		async toCommunityModmail(uniqueId) {
-			await this.$router.push({name: "Community Detail Modmail", params: {uniqueId: uniqueId}})
+		async toCommunityModmail(id) {
+			await this.$router.push({name: "Community Detail Modmail", params: {id: id}})
 		},
 		async toRegisterCommunity() {
 			await this.$router.push({name: "Community Mainframe"})

src/router/index.js

@@ -96,7 +96,7 @@ const routes = [
 		}
 	},
 	{
-		path: "/community/:uniqueId",
+		path: "/community/:id",
 		components: {
 			default: () => import("@/views/home/community/Community"),
 			sidebar: () => import("@/views/home/community/Sidebar")

src/store/modules/publication.js

@@ -56,6 +56,9 @@ const actions = {
 	removeImageItem({commit}, draftId, itemId) {
 		commit("REMOVE_IMAGE_ITEM", draftId, itemId)
 	},
+	setInView({commit}, value) {
+		commit("SET_TO_VIEW", value)
+	}
 }
 
 export default {

src/utils.js

@@ -1,4 +1,5 @@
 export function generateFullLink(link) {
-	if (link.startsWith("http://localhost:8000")) return link
-	return "http://localhost:8000" + link
+	if (link.startsWith("http://")) return link
+	else if (link.startsWith("https://")) return link
+	else return "http://localhost:8000" + link
 }

src/views/home/comment/FeedCommentItem.vue

@@ -17,7 +17,7 @@
 					<v-icon>mdi-circle-small</v-icon>
 					<div class="px14 weight-600 cursor hover-underline"
 						:class="`${comment.publication.community.theme.color}--text`"
-						@click="toCommunityDetail(comment.publication.community.unique_id)"
+						@click="toCommunityDetail(comment.publication.community.id)"
 					>
 						{{ comment.publication.community.unique_id }}
 					</div>

src/views/home/community/AboutCommunity.vue

@@ -15,22 +15,22 @@
 		<v-card-text class="pa-3">
 			{{ community.quote }}
 		</v-card-text>
-		<v-card-text class="d-flex align-center pa-3 weight-500">
+		<v-card-text class="d-flex align-center pa-3 weight-500 justify-space-between">
 			<div>
 				<div class="px18">
-					{{ community.subscribers.count }}
+					{{ community.subscriptions.subscribers }}
 				</div>
 				<div class="px14">
-					{{ community.settings.what_to_call_subscribers }}
+					{{ community.theme.to_call_subscriber }}
 				</div>
 			</div>
 			<div class="px-1" />
 			<div>
 				<div class="px18">
-					{{ community.notifiedSubscribers.count }}
+					{{ community.subscriptions.notification_disables }}
 				</div>
 				<div class="px14">
-					{{ community.settings.feeling_after_subscribing }}
+					{{ community.theme.state_after_subscription }}
 				</div>
 			</div>
 		</v-card-text>
@@ -40,7 +40,7 @@
 				mdi-routes-clock
 			</v-icon>
 			<div class="px-2 px16 weight-500">
-				Created {{ $moment(community.timestamp).fromNow() }}
+				Created {{ $moment(community.date_of_registration).fromNow() }}
 			</div>
 		</v-card-text>
 		<v-card-text class="pa-3">
@@ -54,35 +54,34 @@
 		</v-card-text>
 		<v-divider />
 		<v-card-text>
-			<v-menu offset-y>
-				<template #activator="{on, attrs}">
-					<v-btn
-						depressed small
-						rounded block
-						v-bind="attrs"
-						v-on="on"
+			<v-btn
+				depressed small
+				rounded block
+				@click="seeTheme = !seeTheme"
+			>
+				<template #default>
+					<div class="d-flex align-center justify-space-between px-4"
+						style="width: 100%"
 					>
-						<template #default>
-							<div class="d-flex align-center justify-space-between px-4"
-								style="width: 100%"
-							>
-								<div>Community options</div>
-								<v-icon>mdi-chevron-down</v-icon>
-							</div>
-						</template>
-					</v-btn>
+						<div>Community options</div>
+						<v-icon>mdi-chevron-down</v-icon>
+					</div>
 				</template>
-				<v-list dense>
+			</v-btn>
+		</v-card-text>
+		<v-slide-y-transition>
+			<v-card-actions v-if="seeTheme">
+				<v-card outlined class="full-width" rounded="lg">
 					<v-list-item>
-						<v-list-item-icon>mdi-eye-outline</v-list-item-icon>
+						<v-list-item-icon><v-icon>mdi-eye-outline</v-icon></v-list-item-icon>
 						<v-list-item-content><v-list-item-title>Community Theme</v-list-item-title></v-list-item-content>
 						<v-list-item-action>
-							<v-switch v-model="seeTheme" />
+							<v-switch :color="community.theme.color" v-model="seeTheme" />
 						</v-list-item-action>
 					</v-list-item>
-				</v-list>
-			</v-menu>
-		</v-card-text>
+				</v-card>
+			</v-card-actions>
+		</v-slide-y-transition>
 	</v-card>
 </template>
 
@@ -100,7 +99,6 @@ export default {
 			community: "community/inView"
 		})
 	},
-	methods: {}
 }
 </script>