Create ReportPostModal component, add component to ThreadPost

src/components/ReportPostModal.vue

@@ -0,0 +1,73 @@
+<template>
+	<div class='report_post_modal'>
+		<modal-window v-model='showModal'>
+			<div class='report_post_modal__modal'>
+				<h3>Report this post</h3>
+				<div class='report_post_modal--margin'>Select a reason for reporting this post below:</div>
+				<select-button :options='reportOptions' v-model='selectedOption' class='report_post_modal--margin'></select-button>
+				<div >
+					<button class='button button--modal' @click='setShowModal(false)'>Cancel</button>
+					<button class='button button--modal'>Submit</button>
+				</div>
+			</div>
+		</modal-window>
+	</div>
+</template>
+
+<script>
+	import ModalWindow from './ModalWindow'
+	import SelectButton from './SelectButton'
+
+	export default {
+		name: 'ReportPostModal',
+		props: ['value'],
+		components: {
+			ModalWindow,
+			SelectButton
+		},
+		data () {
+			return {
+				showModal: false,
+
+				selectedOption: 0,
+				reportOptions: [
+					{ name: 'Reason for reporting', disabled: true },
+					{ name: 'Spam', value: 'spam' },
+					{ name: 'Inappropriate content', value: 'inappropriate' },
+					{ name: 'Harassment', value: 'harassment' }
+				]
+			}
+		},
+		methods: {
+			setShowModal (val) {
+				this.showModal = val
+			}
+		},
+		watch: {
+			value (val) {
+				this.showModal = val
+				this.$emit('input', val)
+			},
+			showModal (val) {
+				this.$emit('input', val)
+			}
+		}
+	}
+</script>
+
+<style lang='scss' scoped>
+	@import '../assets/scss/variables.scss';
+
+	.report_post_modal {
+		@at-root #{&}--margin {
+			margin: 0.5rem 0;
+		}
+		@at-root #{&}__modal {
+			padding: 1rem;
+
+			h3 {
+				margin: 0;
+			}
+		}
+	}
+</style>

src/components/ThreadPost.vue

@@ -13,6 +13,7 @@
 			:class='{"post__remove_icon--show": showSelect && !post.removed}'
 			@click='toggleSelected'
 		></span>
+
 		<modal-window v-model='showShareModal'>
 			<div style='padding: 0rem 1rem 1rem 1rem;'>
 				<p>Copy this URL to share the post</p>
@@ -20,6 +21,9 @@
 				<button class='button button--modal' @click='setShareModalState(false)'>OK</button>
 			</div>
 		</modal-window>
+
+		<report-post-modal v-model='showReportPostModal'></report-post-modal>
+
 		<div class='post__meta_data'>
 			<avatar-icon :user='post.User' class='post__avatar'></avatar-icon>
 			<div class='post__thread' v-if='showThread' @click='goToThread'>{{post.Thread.name}}</div>
@@ -56,6 +60,13 @@
 			<div
 				class='post__footer_group'>
 				<div class='post__action post__share' @click='setShareModalState(true)'>Share</div>
+				<div
+					class='post__action'
+					@click='setShowReportPostModal(true)'
+					v-if='$store.state.username && !post.removed'
+				>
+					Report
+				</div>
 				<div
 					class='post__action post__reply'
 					v-if='$store.state.username && showReply'
@@ -75,6 +86,7 @@
 	import FancyInput from './FancyInput'
 	import ReplyingTo from './ReplyingTo'
 	import AvatarIcon from './AvatarIcon'
+	import ReportPostModal from './ReportPostModal'
 
 	import AjaxErrorHandler from '../assets/js/errorHandler'
 
@@ -87,7 +99,8 @@
 			FancyInput,
 			ReplyingTo,
 			AvatarIcon,
-			HeartButton
+			HeartButton,
+			ReportPostModal
 		},
 		data () {
 			let post = this.post
@@ -95,6 +108,7 @@
 			return {
 				hover: false,
 				showShareModal: false,
+				showReportPostModal: false,
 				postURL: `${location.origin}/p/${post.id}`,
 				selected: false
 			}
@@ -115,6 +129,9 @@
 			setShareModalState (val) {
 				this.showShareModal = val
 			},
+			setShowReportPostModal (val) {
+				this.showReportPostModal = val
+			},
 			goToThread () {
 				this.$router.push(`/thread/${this.post.Thread.slug}/${this.post.Thread.id}`)
 			},