Fix modal and hookup to server, sending ajax post request to create report

src/components/ModalWindow.vue

@@ -48,6 +48,7 @@
 		background-color: #fff;
 		margin-top: -3rem;
 		opacity: 0;
+		position: relative;
 		border: 0.125rem solid $color__gray--darkest;
 		border-radius: 0.25rem;
 		pointer-events: none;

src/components/ReportPostModal.vue

@@ -1,13 +1,21 @@
 <template>
 	<div class='report_post_modal'>
 		<modal-window v-model='showModal'>
+			<div
+				class='report_post_modal__loading_overlay'
+				:class='{
+					"report_post_modal__loading_overlay--show": loading
+				}'
+			>
+				<loading-icon></loading-icon>
+			</div>
 			<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>
+					<button class='button button--modal' @click='submitReport'>Submit</button>
 				</div>
 			</div>
 		</modal-window>
@@ -17,17 +25,22 @@
 <script>
 	import ModalWindow from './ModalWindow'
 	import SelectButton from './SelectButton'
+	import LoadingIcon from './LoadingIcon'
+
+	import AjaxErrorHandler from '../assets/js/errorHandler'
 
 	export default {
 		name: 'ReportPostModal',
-		props: ['value'],
+		props: ['value', 'post-id'],
 		components: {
 			ModalWindow,
-			SelectButton
+			SelectButton,
+			LoadingIcon
 		},
 		data () {
 			return {
 				showModal: false,
+				loading: false,
 
 				selectedOption: 0,
 				reportOptions: [
@@ -41,6 +54,28 @@
 		methods: {
 			setShowModal (val) {
 				this.showModal = val
+			},
+			submitReport () {
+				if(this.selectedOption) {
+					this.loading  = true
+
+					this.axios
+						.post('/api/v1/report', {
+							postId: this.postId,
+							reason: this.selectedOption
+						})
+						.then(res => {
+							this.setShowModal(false)
+							this.selectedOption = 0
+							this.loading  = false
+						})
+						.catch(e => {
+							this.loading  = false
+							AjaxErrorHandler()(e)
+						})
+				}
+
+
 			}
 		},
 		watch: {
@@ -62,6 +97,27 @@
 		@at-root #{&}--margin {
 			margin: 0.5rem 0;
 		}
+		@at-root #{&}__loading_overlay {
+			position: absolute;
+			left: 0;
+			top: 0;
+			height: 100%;
+			width: 100%;
+			z-index: 5;
+			background-color: rgba(0, 0, 0, 0.15);
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			pointer-events: none;
+			opacity: 0;
+
+			transition: all 0.2s;
+
+			@at-root #{&}--show {
+				pointer-events: all;
+				opacity: 1;
+			}
+		}
 		@at-root #{&}__modal {
 			padding: 1rem;
 

src/components/ThreadPost.vue

@@ -22,7 +22,7 @@
 			</div>
 		</modal-window>
 
-		<report-post-modal v-model='showReportPostModal'></report-post-modal>
+		<report-post-modal v-model='showReportPostModal' :post-id='post.id'></report-post-modal>
 
 		<div class='post__meta_data'>
 			<avatar-icon :user='post.User' class='post__avatar'></avatar-icon>