Refactored IssuesModal.vue to use new Modal system

frontend/components/Admin/Reports.vue

@@ -33,7 +33,7 @@
 		</table>
 	</div>
 
-	<issues-modal v-if='isModalActive'></issues-modal>
+	<issues-modal v-if='modals.reportIssues'></issues-modal>
 </template>
 
 <script>
@@ -46,7 +46,9 @@
 		data() {
 			return {
 				reports: [],
-				isModalActive: false
+				modals: {
+					reportIssues: false
+				}
 			}
 		},
 		methods: {
@@ -54,8 +56,8 @@
 				this.socket.emit('apis.joinAdminRoom', 'reports', data => {});
 			},
 			toggleModal: function (report) {
-				this.isModalActive = !this.isModalActive;
-				if (this.isModalActive) this.editing = report;
+				this.modals.reportIssues = !this.modals.reportIssues;
+				if (this.modals.reportIssues) this.editing = report;
 			},
 			resolve: function (reportId) {
 				this.socket.emit('reports.resolve', reportId, res => {

frontend/components/Modals/IssuesModal.vue

@@ -1,41 +1,40 @@
 <template>
-	<div class='modal is-active'>
-		<div class='modal-background'></div>
-		<div class='modal-card'>
-			<header class='modal-card-head'>
-				<p class='modal-card-title'>Report Issues</p>
-				<button class='delete' @click='$parent.toggleModal()'></button>
-			</header>
-			<section class='modal-card-body'>
+	<modal title='Report Issues'>
+		<div slot='body'>
+			<table class='table is-narrow'>
+				<thead>
+					<tr>
+						<td>Issue</td>
+						<td>Reasons</td>
+					</tr>
+				</thead>
+				<tbody>
+					<tr v-for='(index, issue) in $parent.editing.issues' track-by='$index'>
+						<td>
+							<span>{{ issue.name }}</span>
+						</td>
+						<td>
+							<span>{{ issue.reasons }}</span>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+		<div slot='footer'>
+			<a class='button is-primary' @click='$parent.resolve($parent.editing._id)' href='#'>
+				<span>Resolve</span>
+			</a>
+			<a class='button is-danger' @click='$parent.toggleModal()' href='#'>
+				<span>Cancel</span>
+			</a>
+		</div>
+	</modal>
+</template>
 
-				<table class='table is-narrow'>
-					<thead>
-						<tr>
-							<td>Issue</td>
-							<td>Reasons</td>
-						</tr>
-					</thead>
-					<tbody>
-						<tr v-for='(index, issue) in $parent.editing.issues' track-by='$index'>
-							<td>
-								<span>{{ issue.name }}</span>
-							</td>
-							<td>
-								<span>{{ issue.reasons }}</span>
-							</td>
-						</tr>
-					</tbody>
-				</table>
+<script>
+	import Modal from './Modal.vue';
 
-			</section>
-			<footer class='modal-card-foot'>
-				<a class='button is-primary' @click='$parent.resolve($parent.editing._id)' href='#'>
-					<span>Resolve</span>
-				</a>
-				<a class='button is-danger' @click='$parent.toggleModal()' href='#'>
-					<span>Cancel</span>
-				</a>
-			</footer>
-		</div>
-	</div>
-</template>
+	export default {
+		components: { Modal }
+	}
+</script>